找回密码
 立即注册

QQ登录

只需一步,快速开始

HTML5网页游戏和微信小游戏极速入门教程(一)基础知识 I

5
回复
508
查看
[ 复制链接 ]

19

主题

21

帖子

130

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
130
2018-7-19 23:10:07 显示全部楼层 阅读模式
D5Power编辑器是一款为了协助开发者快速进行游戏开发而设计的工具。通过图形化界面以及与之配套的底层驱动程序,完成游戏开发与制作。从本篇文章起,我们将一起从零开始,借助D5Power编辑器以及D5Power游戏框架,快速入门HTML5网页游戏以及微信小游戏的开发。

第一篇 基础知识

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

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

  1. 假设x等于10,假设y等于20,那么x加y等于30
复制代码


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

  1. var x = 10;
  2. var y = 20;
  3. var c = x+y;
复制代码


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

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

  1. var x:number = 10;
  2. var y:number = 20;
  3. var c:number = x+y;
复制代码


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

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

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

  1. + - * /
复制代码


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

让我们的代码运行起来

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

1.下载并解压D5Power编辑器。点击这里进入下载页面
2.下载并安装Egret Engine
3.下载并安装Egret Wing4.根据这里的介绍,配置好Egret Engine,至少需要下载5.2.0以上的版本。

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


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

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



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

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

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



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



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

  1. private onAddToStage(event: egret.Event):void {
  2.         // 请从这里开始编写游戏逻辑
  3.         var x:number = 10;
  4.         var y:number = 20;
  5.         var c:number = x+y;
  6.     }
复制代码


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

  1. private onAddToStage(event: egret.Event):void {
  2.         // 请从这里开始编写游戏逻辑
  3.         var x:number = 10;
  4.         var y:number = 20;
  5.         var c:number = x+y;
  6.         trace(x,y,z);
  7.     }
复制代码

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

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



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

什么?你啥都没看到。我还没说完呢,在稍等一会后,Egret Wing的下方应该是这样提示的(如果你的提示不是这样的,说明出错了,可以把出错的图片回复本贴或者直接发送到公众号,我们会指导你解决)



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



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

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

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

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
回复

使用道具 举报

0

主题

5

帖子

9

积分

新手上路

Rank: 1

积分
9
2018-7-20 14:19:38 显示全部楼层
哪里来的
回复

使用道具 举报

0

主题

5

帖子

9

积分

新手上路

Rank: 1

积分
9
2018-7-20 14:20:01 显示全部楼层
真的这个不错啊
回复

使用道具 举报

0

主题

3

帖子

10

积分

新手上路

Rank: 1

积分
10
2018-7-21 16:31:24 显示全部楼层
赶紧学习学习,,
回复

使用道具 举报

1

主题

3

帖子

19

积分

新手上路

Rank: 1

积分
19
2018-8-5 16:46:36 显示全部楼层
太感谢了
回复

使用道具 举报

0

主题

3

帖子

24

积分

新手上路

Rank: 1

积分
24
5 天前 显示全部楼层
我准备做一款自己的小游戏
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则