微信小游戏极速入门教程（一）基础知识

第一篇 基础知识

这篇系列教程的所有程序，都是基于D5Power游戏框架开发的。框架所使用的开发语言是TypeScript。所以你需要有一定的TypeScript（以下简称TS）的基础（不用担心，编辑器会帮我们完成大部分工作）。关于TS和游戏框架的渲染驱动引擎Egret Engine（白鹭引擎），这里就不多做介绍了。

试着想想你的初中时代（甚至小学？），你是不是列过方程？我们总会假设x等于某个数字，y等于某个数字，然后x+y就有了意义。对吧？

假设x等于10，假设y等于20，那么x加y等于30

在编程的世界里，我们也在重复的做着这样的工作，对于x和y这样的假定，我们在程序中称为“变量”。上面这句在年幼时熟的不能再熟悉的话，用程序的语言可以写成这样：

var x = 10;

var y = 20

var c = x+y;

这三行代码就已经是可以运行的程序了，我们设置了一个“变量”c，而它的值是x+y，也就是10+20=30。你是不是一眼就看懂了呢？

在TS中，变量是有类型的。我们接触到的第一个类型就是数字，用TS中的代码表示，就是number。于是上面这三句代码就变成了：

var x:number = 10;

var y:number = 20;

var c:number = x+y;

比刚才复杂了一点，不过相信你还是可以看的懂的。

在TS中，我们通过var来定义变量，通过在变量名的后面以“:”来说明这个变量的类型。例如var x:number = 10。就等于我们告诉了计算机，我需要声明（假定）一个名字为x，类型是数值（number），值为10的变量。

好像挺简单的。当然，我们也可以把x+y换成其他的计算符号。这跟我们上学时候学的可能不太一样。因为你知道，➗多难打啊，所以我们就用/代替了。而用*代替了✖️。而加减乘除的运算符号就变成了：

+ - * /

好吧，你已经写了三行代码了，值得庆祝一下。

让我们的代码运行起来

只在纸上或者脑子里写代码显然没什么意思。我们还是需要一个能看到代码运行的地方。好在D5Power编辑器为我们准备好了一切。那么，我们开始吧。如果你还没有准备好开发环境， 请按照以下步骤安装软件，做好准备工作。我们要飞啦。

1.下载并解压D5Power编辑器。点击这里进入下载页面

2.下载并安装Egret Engine

3.下载并安装Egret Wing

4.根据这里的介绍，配置好Egret Engine，至少需要下载5.2.0以上的版本。

我们把每一个编程的目标（例如一款游戏）称为一个项目。因此，我们需要调试代码，就需要建立一个新的项目。请运行您下载并解压好的D5Power编辑器（运行D5PowerEditor.exe），编辑器启动后会自动进行版本更新。然后，你就会看到一个这样的界面：

如果在这之前，您已经运行过编辑器，也可以通过顶部菜单的“文件”>>“项目变更”来进入上面这个界面。

我们现在需要创建新的项目，所以，只需要点击“创建新的项目”就可以了。为了避免误操作而覆盖文件，我们要求必须是空目录才可以用来创建项目。请根据编辑器的要求，选择一个空目录，并点击确认来创建项目。项目创建完成后，编辑器会自动重启，然后你就会进入下面的界面：

到这里，编辑器的工作就完成啦。你不会以为编辑器只能干这个事吧^_^，她可以干的事情可多着呢。不过目前我们暂时不需要她了。接下来，请启动安装好的Egret Wing，我们用来写代码的工具，通过顶部菜单的“文件”，选择“打开”，然后找到我们刚才选择的那个空目录。你会发现，现在空目录里有了两个新的目录，一个是D5Power，一个是GameTemplate。在这里，我们选择GameTemplate。

D5Power编辑器帮你生成的两个目录里，一个名字是D5Power，这里面包含了我们编程需要使用到的D5Power底层代码。而另一个则是GameTempalte，看名字也能才到，它才是我们真正的项目目录

然后，EgretWing就会在界面左侧把目录中的全部文件给展示出来。如下图：

你现在想说的是不是“这都是什么鬼……”，嗯，的确有很多文件。不过现阶段，你要关注的只有src这个目录，我在上图中已经使用高亮的颜色标记出来了。src是我们项目中用来保存源代码的目录，是不是瞬间觉得它高大上了起来。接下来，点开src左侧的小三角，你就会看到里面的Main.ts，它就是我们整个程序的入口的。整个程序的执行都是从它开始的。双击Main.ts打开它。在右侧的编辑区就会显示其代码内容了。像下面这样：

你是不是已经看到了醒目的“请从这里开始编写游戏逻辑”，这是D5Power编辑器自动生成的代码。既然都告诉你可以从这里写，那就下手吧。把刚才我们学到的三句代码给复制过来，于是现在，代码看起来应该是这样了：

private onAddToStage(event: egret.Event):void {

// 请从这里开始编写游戏逻辑

var x:number = 10;

var y:number = 20;

var c:number = x+y;

}

这时我们只是定义了三个变量，还没有告诉计算机如何让我们看到这三个数呢（是的，计算机就是这么蠢，它只会做你告诉它怎么做的事），所以，我们在最后需要增加一句代码

private onAddToStage(event: egret.Event):void {

// 请从这里开始编写游戏逻辑

var x:number = 10;

var y:number = 20;

var c:number = x+y;

trace(x,y,z);

}

trace是D5Power内置的一个方法（“方法”这个概念今天有点超纲了……），总之今天你需要理解的就是，我们通过这句代码，让计算机把x，y，z给我们显示出来。

那么，代码就写完啦，现在是表演的时间了。点击Egret Wing顶部的调试按钮，就是那个小虫子：

你的程序就会被Egret编译器进行编译，然后运行起来。

什么？你啥都没看到。我还没说完呢，在稍等一会后，Egret Wing的下方应该是这样提示的（如果你的提示不是这样的，说明出错了，可以直接把出错的截图发送给公众号，你就会得到回复）

你是不是准备吐槽教程是骗人的，你根本没看到输出。不要捉急，注意到上面图片里有“调试”了吗，点击它，奇迹是不是出现了？

恭喜，你的第一个程序运行成功了，计算机帮你计算出了10加20等于多少。显然它没你算的快。不过至少你已经学会用代码来控制它了。不是吗？

下一次，我们还会通过代码让计算机干更多的事情。那么，第一篇教程就到这里吧：）

啥？源代码？就四行代码，你还是自己敲下吧。