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

第一篇 基础知识

这篇系列教程的所有程序,都是基于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等于多少。显然它没你算的快。不过至少你已经学会用代码来控制它了。不是吗?

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

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

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180720G0FV8800?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券