【越策划】不写代码：教你如何快速制作h5独立小游戏（上篇）
作为游戏策划，最梦想的可能就是做一款完全自己设计的游戏，这也是独立游戏的魅力所在。现在市面很有很多游戏制作工具，construct2绝对是其中的佼佼者，它的拿手好戏就是“快”，上手快、开发快，“理论”上可以制作任何类型的2d游戏，支持导出html5也非常方便传播。
虽然用construct2制作大型商业游戏也是可以的，但在我看来它的最大价值就是可以实现游戏的”MVP”（minimum viable product，最小化可行产品），这个词在创业领域很流行，就是用最小的代价试验产品是否可行，得到验证之后再投入大量资源。如果有一个特别的游戏创意，可以先做一个小demo出来，小范围传播后看反响再进行一次次迭代，初期投入少，也可以慢慢积累种子用户，利用construct2的“快”的特性，可以胜任这个任务。
“不用写代码”我承认这个标题党了，其实construct2也是真的不需要你“写”代码，通过鼠标拖拽即可。但其游戏的内部逻辑，还是需要用代码的思维。construct2的好处就是，你不用特别额外时间去学习语法、记忆命令，即用即得，就像是搭积木一样，所有的积木已经摆在你面前了，需要的只是你去找到那一块合适的积木。如果你是程序员，估计更能用得更加得心应手。
说到做HTML5游戏，很多人第一个反应就是白鹭，而且大家打开软件一看，怎么界面这么像啊，其实呢……你就把construct2比作whatsapp，白鹭比作微信就懂了。
这次用的版本是Release 239(64-bit)免费版，有诸多限制，但不影响本次教学。学习完之后如果感兴趣想继续，建议购买个人版，里面的图层数量无限制、设置图层顺序等，都是非常好用和重要的功能。
（干货较多，请放心阅读）
New Project 新建工程 → 打开之后一张白纸。
Open Project 打开工程 → 打开之前已经保存过的工程文件，首次打开指向的是一堆官方的范例文件，很有用（后面会说到）。
点击New Project
New em
pty project 新建空白工程，同上，建一张白纸。
建议：如果已经想好想做的游戏的界面尺寸，可直接选用下面的模板，省不少时间。
此外，强烈建议！往下拉，就是官方的范例文件。这些都是已经做好的游戏，对新手来说有很高的借鉴价值，而且刚好想做同类型的游戏（比如说Flappy Bird），直接打开，替换一下图片，调整一下参数，微调部分代码，那就是自己的游戏了，多方便。
将主界面进行大致的区域分割，先不要关注具体细节。
A 最次要，设置好了基本不用管了。
B 重要，有很多时间会消耗在这里，下文会重点介绍。
C 最重要，大部分时间消耗在这里。
D 一般，本项目所有的项目元素（插件、图片、音效等等）列在此处（Projects）
E 一般，查看当前页面使用到的项目元素，列在此处（Objects），还有瓦片背景（Tilemap）
另外，个人版还有一个Z-layer，用过PS的应该清楚，就是图片的上下层关系，很重要的功能，免费版可通过调整D区域的Layers来解决。
我们先暂停一下教程，了解一下construct2的架构。了解架构可以让大家心中先有一个整体的概念，知道C2是怎么运作的，对后面的设计工作很有帮助。
上一章中说到，界面中最重要的就是C区，那C区有什么呢
除了一大块空白以外，左上角有一个标签：
另外，细心的朋友也会发现，D区也有类似的：
其实就是最重要的界面层和逻辑层。
一个图片层对应一个逻辑层，图片层就是放置我们游戏界面上的主角、坏人、机枪子弹等元素的，逻辑层就是控制这些主角坏人等元素的逻辑的，也就是传说中的代码。
图片层下面只能有一个逻辑层，或者没有逻辑层。
逻辑层上面必定只有一个图片层，不能没有图片曾。
我们可以把自己当成这个游戏的上帝，那么图片层就是天地，逻辑层就是这天地间运作的规律。
有了天地，那还要有丰富多彩的世界，让我们把主角、坏人、枪支、子弹、地板等加入到这个世界中，这个就是插件(plugins)。
双击任意空白处，弹出插入插件的窗口：
第一次看到吓死了，这么多插件啊。实际上我们90%的情况下用到的就只有Sprite插件。
就这货
回到上帝模式，我们要创世，首先要造出落脚的地板。用到的是Tiled Backgroud插件，也就是传说中的瓦片，把一张图片无限重复铺满整个画面。
所以，我们可以看到，青色的地板加上了，三角形的小人（项目元素大部分都是Sprite）快乐地生活在上面。
和人一样，每个项目元素（插件）也有高矮胖瘦，拥有各自的属性，可以调整它们的位置、大小、颜色、透明度等等基础属性，B区域中就可以进行调整。
既然有基础属性，当然也有特殊属性，下面就介绍一下特殊属性四大天王：
附着在插件上的变量，可以存储数字和文本，并进行运算和增减。和你说一个词你就懂了，HP，就是血量，就是一个变量，将它附着在某个敌人上，数字小于或等于零，敌人就死啦。
如果说插件(plugins)是C2中第一重要的话，那么行为特性（behaviors）就是第二重要。
行为特性就相当于是将若干相关或常用的属性打包，变成属性包，比如说有个“子弹”(bullet)行为特性，带有自动飞行的属性、可以设置移动速度、加速度、减速度等等。将其挂载在某个插件上，这个插件就带有了子弹的全部所有属性。
那我们先看看behaviors的列表：
这也是一坨一坨的好多呀。但这不用一个个去记，可以用一个学一个。
其实学习construct2有点像学英语，插件(plugins)、行为特性（behaviors）就像是英文单词，掌握得越多越能写出好文章（做出好游戏）。而且不仅限官方自带的插件，非官方的爱好者也会写一些非常非常好用的插件，有时候自己费尽脑汁想做的效果，一个插件就搞定了。
也是附着在插件上的特性，视觉效果，比如雾化、液态、噪点等。
这个功能免费版不支持，而且需要浏览器支持WebGl，在手机上可能由于一些兼容问题会出现一些奇怪的效果。所以新手用的不是很多，有兴趣可以自己研究。
不过，有些特效真的很漂亮呀。（颜控必入）
这个也属于高级功能，但免费版也能用，作用是把一个插件装入另一个插件。具体怎么应用呢，比如说要做一个魂斗罗一样的射击游戏，主角就是一个插件，手上的枪也是一个插件，把枪“装在”主角身上，用到就是这个功能。
继续回到上帝模式，这个世界上的每一小人，高矮胖瘦都不一样，并带有自己的脾气特性。
每个点代表一个行为特性
看完了图片层，再看看逻辑层。每个逻辑层只能对应一个图片层，就如同一个世界只能拥有一套自然规律。（看到这里就想到了三体，一个世界有多套自然规律）
逻辑层，其实就是代码。Construct2号称不用写代码，实际上还是要写的哈，只是它的代码结构非常简单，优点是好学，缺点是代码量大了就像搅面条，维护起来特别麻烦。所以construct2适合做创意小游戏，高效快速，大型的商业游戏还是交给专业的游戏开发引擎吧。
我们先来看C2的代码窗口
1、上方的绿色的放置的是游戏中用到的全局变量，例如游戏时间、分数等等放置在此。
2、下方的每个数字，代表一条代码，学过BASIC的就知道，这就是行号，程序运行时按照这个顺序一条一条地运行代码。
说到这里，要普及一个概念，什么叫tick。比如说有200条代码，系统从第1条开始检查并运行到第200条后结束，算是一个tick（当然不是200条代码全部运行，中间肯定有一些跳转和条件判断）。一般一秒钟运行20 tick，这张程序表一秒钟要运行20次。这有点类似“帧”的概念，一秒20帧的动画，就是一秒钟播放20张图片。
人的反应能力0.1秒左右，所以理论上来说系统运算速度高于一秒10 tick就够了。当然tick不是越高越好，手机等设备对运算的强度非常敏感，太高就会导致耗电、卡顿等等问题。
3、细心的朋友可以发现某些代码前面有个小标记。带有绿色小箭头
的表示是个触发事件，比如这条tick内检测到手指触摸，则运行该条代码。带有绿色旋转箭头
的表示的是遍历事件，比如说，检查所有人的HP情况，如果发现有人HP少于或等于0，则执行“处死”事件。
4、单条代码的结构非常简单，看这个表就懂了
判断条件 | 判断事件 | ||
项目元素 | 什么条件 | 项目元素 | 做什么事情 |
这部分后面实战部分会详细讲解，目前只要先做了解。
好了，到此，作为使用C2创造世界的上帝，手上的工具已经全都准备好了。当然了，作为一个完整的游戏，仅仅只有“一个世界”是不够的，比方说：
是不是有种“大千世界”的感觉？其实我们所说的“世界”就是场景，一款完整的游戏需要多个场景。
为了本次教学方便，范例游戏只做一个场景。有兴趣的朋友可以自己创建多个场景，只要右键点击D区域的Layouts文件夹，选择Add layout即可。
另外别忘记同样在Event Sheets文件夹创建layout对应的Event sheet，不然你的世界就“动”不起来哦。
相信大家都玩过《植物大战僵尸》吧。我们可以自己控制豌豆射手，变成一个射击游戏，配合触摸，做一个适合手机上玩的小游戏。
大家可以先看看最终效果图：
需要的素材也准备好了，附件里下载：
shooter | 豌豆射手头部 | ×1 |
Pot | 花盆底部 | ×1 |
Boom | 黄瓜炸弹 | ×1 |
Bean | 豌豆子弹 | ×1 |
Zombie | 僵尸行走动画 | ×31 |
Explosion | 爆炸动画 | ×6 |
Dead | 僵尸死亡动画 | ×20 |
TiledBackground | 草地地板 | ×1 |
kills | 僵尸头图标 | ×1 |
times | 时钟图标 | ×1 |
score | 结算框面板 | ×1 |
restart | 重新开始按钮 | ×1 |
在铺设地板之前，我们先设置一下“房间”的大小。
先移目到D区，选中Newproject
再移目到B区，设置WindowsSize为480,640
设置好project的尺寸后，还要设置layout的尺寸
选中后，B区内设置LayoutSize、Margins都是480,640
大家可能会奇怪，为什么我设置好了project的尺寸，还要设置layout呢。同时，细心的朋友也能发现，实际上设置project的，是一个虚线框。
其实，虚线框就是我们屏幕的尺寸，俗话说的“镜头”。卷轴类的游戏，例如Flappy Bird，镜头就小于背景，这样才能形成背景滚动的效果。但我们这款不用滚动卷轴，所以全都设置成一样。
设置好之后，可以正式铺设瓦片了。双击C区域的任意空白处，弹出Insert New Object，选中Tiled Background插件后选择insert：
点击屏幕空白处后，弹出瓦片编辑窗口：
选择load an image from a file：
选中素材文件夹里的地板：
如果图片的尺寸不是2的指数形式，会提醒你。
这里就要提一下，制作图片素材的时候，尽量将图片尺寸裁剪成32、64、128等2的指数的形式，图片量多之后对性能有很大的影响，特别是移动设备上。不过暂时做不到也关系，为了教程顺利进行，先凑活着用吧。
关闭编辑窗口后，瓦片会自动根据大小铺设，将其铺设成界面尺寸一样大即可。
可以拖动移动并控制大小
直接设置参数更准确方便
界面D区，切换至Layers标签，点击锁图标，将Layer 0锁定。
另外，再此界面，点击加号图标，增加一个图层Layer 1并选中。
解释一下：我们将瓦片地板放在Layer 0并锁定，因为瓦片不会变化，可以方便之后的操作。我们新建一个Layer 1，将其他元素（大多数都是动态的）放置在这里。
PS：再啰嗦一下，大家也可以自己斟酌，将确定不会变动的元素放在Layer 0，可以方便管理和之后的操作。
双击舞台，插入一个Sprite，最好能够下方命名处命一个名方便管理。
选择花盆底座，将其放置在界面下方位置。
同样操作，将豌豆射手也添加进入，但是图片的炮口是转向右边的，看起来像是得了歪脖子病，所以我们在B区设置一下角度让它朝上。
看起来还不错：
为什么要弄一张“歪脖子”的素材呢，因为CT2规定图片的默认是朝向45°的（可能因为它默认自己是一款制作横版卷轴游戏的工具吧）
我们要通过触摸控制炮口的转向，首先要加一个touch的插件。
接下来要写代码了，转向Event sheet 1，点击Add event，选择豌豆射手
选择on anytouch start
细心的朋友应该会发现，能表达触摸的时间很多，那为什么要选择这个事件呢？
如果实际用手指操作看看就能发现问题，如果是on any touch end或是on tap，他们完成触发的条件是“手指松开”，所以必须完成手指的“点击”再“松开”，才能完成一次转向。而on any touch start只要手指“点击”即可，手感会好很多，设置可以在屏幕上滑动进行转向。有兴趣的朋友可以试试用on anytouch end或是on tap，感受一下最终在手机上的表现效果。
以上只是条件，接下来点击Add action创建事件。
选中豌豆射手
选中set angletoward position，设置朝那个方向转向：
输入touch.X和touch.Y，表示朝着手指触摸的位置转向。
按F5，查看一下效果。
现在豌豆射手已经“指哪儿朝哪儿”了。但是还有一个小问题，因为小射手的脑袋是圆圆的，好像转向没有完全沿着圆脑袋转，有点偏。
这问题就需要我们设置一个锚点，转向的时候以它为圆心。
双击豌豆射手打开图片设置，选择锚点，设置锚点位置在射手的脑袋中间即可。（注意：设置锚点位置要用键盘的上下左右键移动）
然后稍微调整一下射手在花盆上的位置，让锚点和花盆的中心重合，这样转起来看就像是射手在花盆上转着脑袋的样子，比较自然。
完成之后F5看一下效果，看起来就比较完美了。
首先我们要将子弹素材加入进来。双击舞台插入一个Sprite，使用素材bean，创建成功后放置在任意位置，选中后在B区设置其属性，点击Behaviors添加一个行为特性。
点击加号添加
选择Bullet并添加（就是子弹……）
添加好之后发现Behaviors里已有Bullet属性了，关闭窗口。
此时再选中豌豆，就会发现有B区已经有Bullet相关的参数设置了。
对Bullet参数进行相应的设置，设置Speed值为600（当然也可以根据自己喜好设置成别的值）
另外几个参数，Acceleration是加速度，设置了之后子弹会越飞越快。Gravity是重力，设置了之后自动会向下落，数值越高下落越快。建议这两个值都设为0。
另外，还要在豌豆射手身上，再增加一个锚点。因为我们设置子弹从射手嘴里射出，需要将具体位置给指定出来，就是这个新加的锚点位置。
双击打开豌豆射手，新增一个锚点：
转到代码区，在原有的touch条件下，增加一个事件
依然是豌豆射手发生的事件
选择Spawn another object事件，意思就是生成另外一个物件。
有三个项目需要填写，分别是object（生成的物件）、layer（图层）、锚点（Image point）。
Object对应就是豌豆子弹，layer是1（还记得之前创建图层后面的编号了吗），Image point是1（翻回去看看后面的编号）。
按F5看看，点击屏幕，发现豌豆射手可以射击了！突突突机关枪一样。
不过，好像有个小瑕疵，怎么一开始屏幕会有个豌豆子弹飞出去啊？（如果一开始你将子弹放置在舞台内的话）
解决的方式也很简单，把子弹拖出舞台就可以了。
另外，还要选中子弹，在Behaviors里面增加一个DestroyOutsideLayout，意思就是这个物件不在屏幕中的时候，就被系统清除掉。这点非常重要，因为物件放置在屏幕外，依然占据着内存，一旦数量多了之后，就会造成内存泄漏事故，游戏会越来越卡。
同样，双击舞台插入Sprite，注意下方的Animation frames功能框，右键点击选择Import frames –From files…
打开素材文件夹，选中所有的僵尸行走图
默认自带的第一帧没有用，删除掉
右边Animations功能框内，我们可以右键点击动画，选择Preview，查看动画预览效果。
看了实际效果后发现，虽然僵尸以行动迟缓著称，但这动画也太慢了，所以我们还要对这个动画的参数进行一些调整。
选中动画，在B区，调整动画的参数Speed为10，Loop为YES。Loop就是无限循环播放的意思，因为僵尸行走是永不停息的捏哈哈哈哈……
还有一个小瑕疵，就是僵尸看着像是会“飘”，这是因为动画文件引起的，所以我们要设置一个锚点让僵尸“贴”住地面。
点击锚点图片，弹出Image points窗口，右键点击，选择Quick assign，选择Bottom。这样，我们就可以设置当前图片的锚点放置在下方居中位置。
光有一张图片设置还不够，还要将设置普及到动画的每一帧图片内。
右键点击锚点，选择Apply to whole animation。
但这只是让僵尸在原地踏步，还要让僵尸真正能够前进，就要在Behavior添加特性让它“走”起来。
大家可以依旧选中之前用过的bullet，但这里有一个更好的选择Platform
Platform支持的可设置参数更多，可以实现更好的控制，一般用于横版游戏的主角、敌人的设计，完成各种复杂的动作。
另外还要加上DestroyOutsideLayout。随着大家做游戏的技能越来越熟练，是能够培养这种感敏性的，那种类似“无限生成”、“自动生成”的物件，都要有相应的垃圾处理机制，及时清除掉，对游戏的效率提升有非常大的好处。
然后对Platform的部分参数进行设置。
Maxspeed是僵尸移动的速度（当然就是很慢很慢啦）。
Gravity是重力，大于0就会下落，等于0是保持浮空。（也可以试试小于0，你懂的）
Defaultcontrols是默认控制角色，一般用于横版游戏主角的控制，如果代码中加入玩家控制左右移动事件的话，就能直接控制该角色的移动。此时我们选择NO。
光有这些僵尸还“动”不起来，需要在代码中控制它“向前走”。
点击Addevent添加一条新的事件
这回是添加System事件
添加ForEach事件
选择执行的目标物件——僵尸，点击Done完成创建。
这段代码什么作用呢，For Each字面的意思就是“为每一个”，聪明的朋友可能就已经能想到，“为每一个”就说明不只有一个，可能会有很多个。作为敌人，僵尸的数量肯定不止一个，如果僵尸有多个实体，那一条代码就能对每一个实体做出控制，很方便吧。
点击Addaction，增加对应的事件。
选择僵尸
大家可以看到，一旦加入了某个Behavior，就会增加对应的动作选项，很方便吧，这次我们选中Simulatecontrol，意思就是系统对该对象进行控制。
控制可以选择僵尸向左走、向右走、跳跃，我们先选择Right向右走。
可能有朋友要问了，僵尸一直向左走，不会太单调了吗。别急，下篇我们就会讲到这个内容，现在我们可以先按F5，看到屏幕中的僵尸就可以缓缓地向右走动了。
添加小编微信，发送“策划”
即可直接加入GAD行业精英策划汪聚集地
获取行业干货资讯，观看大牛分享直播
↓长按添加小编GAD-沫沫↓