我们来看一个非常简单的游戏，FlappyBird。

一个当年非常火的游戏，光凭Banner广告就赚了几百万美元。

玩法很简单，这里有一个复刻版

就是一个小鸟用手指点屏幕控制，穿过一些柱子。

我们整理下游戏逻辑：

1. 整个场景仅有，背景，小鸟，柱子，分数。其中背景是循环滚动。

2. 小鸟通过点击屏幕可以向上飞，不点击会自由落体。

3. 柱子的间隔和开口都是随机的，以恒定速度向左运动。

4. 每当小鸟通过柱子，会增加分数，且会播放声音。

5. 小鸟飞出屏幕或者撞到柱子则游戏结束。

相当简单，我们来看看如何用小游戏开发工具来实现。完整的项目在这里，已经开源。地址为

https://gamemaker.weixin.qq.com/#/game?game_id=lbODIzZGRjYjAtYjcxNC00MzQwLWE4MzktYmVhM2YyNzAzM2M5

点改编，可以看见完整源码。

背景

素材大家可以去直接搜索，也有专门的素材网站，我这里的背景是直接百度搜索的。大家也可以换成自己喜欢的背景，注意最好是可以循环的。

然后需要让这个背景动起来。在层级管理面板直接选中背景

在右边的图层面板里面，点 编辑背景-》从素材库添加，上传这张背景图，背景就换过来了。再点下管理行为，添加 循环滚动 插件。通过自动移动可以让背景滚动，但为了有更好的可控制性，我们用代码来实现。

选中背景，添加事件，当场景启动时。

180度就是向左移动。

通知是一种可以在不同的精灵之间通讯的一种机制，一般游戏都会有 开始，结束，这是一个全局事件，比如很多游戏都会有一个Start按钮，当用户点击这个按钮的时候，很多逻辑才会开始工作。这里先不做Start的逻辑，但还是先发一个事件。

然后是不停的执行移动。效果就是这样的

小鸟

接下来我们需要找到一只合适的鸟。我在这里找到了一只鸟。一些游戏素材，一个动画并不是一个GIF，而是一堆序列帧，按一定规律命名的一堆文件。现在我们的工具还不能支持直接上传GIF，但支持序列帧，上传以后会生成一个动图。

小鸟需要有两个逻辑，一个是点击屏幕需要向上飞，一个是不操作的时候会往下掉。这里用物理引擎做最简单，看代码。

就这么简单，当然你需要在小鸟的属性面板里面先添加“物理”的行为。

点击的这句话，意思是当手指点击屏幕的时候，给这个小鸟一个向上的力。

下面这个逻辑的意思是设置一个默认的重力，大家可以随意修改这里的数值，会有不一样的效果。

柱子

接下来到另一个关键逻辑，柱子。

这种横版的游戏一般就两种方式，一种是场景有长度的，每个地方都是手动摆放的，比如超级玛丽。另一种就是角色没有动，其实是柱子在动。在这个游戏里面，其实就是柱子在动的，因为柱子的速度和背景一样，看起来是鸟在动。

我在这里找到了柱子，导入以后，实际上的场景是这样的：

其中有点小技巧。这个柱子不是绿色的，我使用了颜色叠加的效果，让柱子变成了绿色，上下两个柱子是因为其中一个使用了镜像。

柱子还有一个逻辑，就是两个柱子的开口位置是不确定的，随机的。但两个柱子的开口大小是固定的，所以这里又有一个小技巧。我把两个柱子变成了一个Group，这里称为容器，选中两个柱子，点右键，就可以组成一个容器。我只需要调整这个容器的Y 坐标就可以了。看代码

我们先看最后一个事件，当收到一个 start 的通知的时候。就把这两个管子不断向左运动。而且这个速度比背景大一倍，看起来就会有一个视差的效果。

中间的逻辑是，如果发现自己 X 坐标小于-500，也就是跑出了屏幕的左边，则发一个reset_pip的通知。这里完整的逻辑是，屏幕里面仅会出现一对柱子，每次从右往左移动，离开屏幕以后重新设置自己的Y坐标，这样看起来就是无限且随机高度的柱子了。当收到 reset_pip 通知的时候，这里使用了一个函数。函数在积木面板里面可以新建，创建好以后在资源管理器里面。

我们看以下函数的具体内容

首先把自己的X坐标放到500，也就是放屏幕的右边。然后把Y坐标设置到 [-350, 350] 之间。就可以实现随机高度的柱子了。

我们现在来运行下，看看效果。

分数

游戏肯定需要分数，我们在素材库里面的数字分类下，可以找到一些可用的数字类型。

数字的逻辑比较简单，就是当小鸟越过柱子的时候，分数加1。我们来看看逻辑

先看下面，当小鸟的X坐标，大于了容器（柱子）的X坐标，即小鸟飞过了柱子。则把score增加1。注意这里新增了两个变量一个是小鸟自己的私有变量fly_over，一个是全局变量score。

全局变量比较好理解，就是用来计数的，然后设置给文字。这个私有变量fly_over其实是限制这个逻辑仅执行一次的。因为这种判断条件型的事件，是每次都执行的，当小鸟飞过柱子的以后，小鸟的 X 就会一直大于柱子的 X，这个事件会一直触发，但我们只需要这个逻辑执行一次，所以使用一个变量，防止重复执行。然后看第一个事件，当收到 reset_pip 的通知的时候，需要把fly_over重新设置为0，否则第二个柱子就不会继续执行这个逻辑了。我们来看下效果

到这里，Flappy Bird的基本逻辑就已经完成了。如果要更好的手感，可能需要更细致的逻辑和参数调整。欢迎大家在此基础上进行改编和再创作。

微信小游戏开发工具地址：http://gm.weixin.qq.com

本示例项目的地址：https://gamemaker.weixin.qq.com/#/game?game_id=lbODIzZGRjYjAtYjcxNC00MzQwLWE4MzktYmVhM2YyNzAzM2M5

相关文章：微信小游戏可视化开发工具

从微信小游戏发布开始，微信小游戏就变成了一个独特的游戏类型。普通游戏平台都是针对资深玩家的，而微信小游戏的用户群更广，包括了小孩子和大爷大妈，所以微信小游戏上休闲和超休闲的游戏占了很大的比例。在微信小游戏平台上，可以包容各种类型的游戏，所以我们想推出一款小游戏开发工具，希望更多的人可以释放自己的创意，在微信上传播自己的想法。

我们的目标是低门槛，简单高效。因此开发工具设计为纯Web的，网址是 https://gamemaker.weixin.qq.com/，进入IDE后是这样的。
对于游戏IDE来讲，最基本的有两点，场景和逻辑。左边是场景编辑，右边是逻辑区。这里分别说下。

场景
场景编辑这里的相关概念都挺简单的，在最右边的图层属性里面可以对精灵进行基本的操作。我们尽量注意这里概念的简单化，尽量不增加复杂的概念，一开始我们没有Group的概念，后面随着场景变复杂，我们觉得有必要增加一个Group的概念，这里称为“容器”，把多个精灵一起选择就可以合并为一个容器。容器是可以单独添加逻辑的。为了保持概念的简单，我们没有针对具体的游戏品类做特化，但这样会导致实现具体品类时候的复杂性，我们通过插件的方式来解决这个问题，当前我们已经有十几个插件，可以简化某些品类下的编辑操作。

逻辑
对于非专业开发者来说，当前有3种比较常见的方式。
1. 积木。常见于少儿编程，本质上也是代码，但理解简单，语法简单。
2. 配置式。比如RPG工具可以全配置化，在精灵上弹出对话框可以配置任何RPG需要的能力。
3. 事件表。事件表是 事件-代码 的另一种形式，可以很复杂，有一定的学习成本。
我们最终选择了积木，选择积木的原因是学习门槛低，配置式虽然门槛低但仅限于特定品类的游戏和特定的动作，我们还是希望可以有更大的空间。
在场景窗口里面选择精灵，就可以添加各种事件，在事件里面写相关的逻辑。可以实现各种类型的游戏。

到此我们基本的框架就已经定型。然后我们增加了各种能力：

数据
支持局部和全局数据，支持二维表，提供了一个表格操作界面，考虑到积木操作的便利性，没有增加嵌套的数据结构（比如Json）。
当前支持本地存储，暂不支持云存储，本地存储通过插件里面的 本地存储 插件来提供的。

UI支持
我们增加了列表组件，摇杆，按钮，还有粒子效果，可以从顶部工具栏的 添加插件 来添加。

行为支持
在精灵的属性面板上，可以添加行为。行为可以让面向特定品类的游戏开发大为简化。当前已经支持了平台类型游戏的相关行为，包括固体，跳跃穿透，平台角色，方向控制，移动等。还有物理引擎和碰撞相关，包括物理，反弹。另外还辅助性行为，包括循环滚动，闪烁，抖动，遮罩，炮塔，弹出等。

碰撞系统
碰撞是游戏里非常重要的一项，除了行为里面的物理引擎，工具还提供了精灵自动描边，手动调整描边，碰撞事件支持等，我们对碰撞的性能也进行了大量的优化。

广告支持
我们提供了微信广告支持，在积木里面提供了广告能力积木，但前提是需要获得广告的ID，这个可以查看微信小游戏开放平台的相关说明。

调试能力
可以按精灵列表来查看相关的数据和属性，可暂停，可单帧执行。调试场景需要在顶部工具栏的预览按钮下拉以后才会看见。

这里需要提下的是，行为及插件的相关积木只有在添加了相关插件和行为以后才会出现，这样设计的目的是避免积木太多。还有为了方便查找，我们也提供了搜索能力（工具栏上搜索框），可以搜索积木和变量。

大家可以通过我们的示例项目《经典飞机大战》来体验下一个完整的工程。
https://gamemaker.weixin.qq.com/ide#/home/lbKHT1FdnZQsCZWQgdMmFEJA

选择 关卡 场景，选中小飞机，就可以看见关于小飞机的相关逻辑代码。点击 顶部工具栏 的 预览场景 按钮，可以预览这个游戏，也可以改动下代码或者资源，作为自己的一个改编游戏来发布。

下面说下手机预览和发布的方式，入口都在工具条上。

手机预览相当简单，就点预览按钮，可以生成一个二维码，直接用微信扫一扫即可。

其实这个时候你已经可以把这个二维码分享给你的朋友了，只是限50位。
要发布，也有两种方式，一种是发布到社区版，一种是正式发布到微信小游戏。

社区版的方式。在工具栏上点发布。提交后即可得到小游戏的二维码，可以分享给朋友，这里可以选择把代码开放，这样别人就可以基于你的作品进行改编。

如果要正式发布，则需要提交到MP，需要在微信小游戏开放平台网站上再发布，入口在 作品设置 里面。详细发布流程可以参考文档。

我们当前有一个社区小程序，如果你仅仅是想发社区版，则直接到上一步就可以，不需要经过正式的发布。这就是我们的社区版。

大家可以直接扫码体验下

欢迎大家体验下用我们工具开发出来的两个作品

相关资源：

学习文档：https://gamemaker.weixin.qq.com/doc/
教学视频：https://res.wx.qq.com/wechatgame/product/webpack/userupload/20201026/165325/quickstart.mp4
官方论坛：https://developers.weixin.qq.com/community/minihome/mixflow/1310477560790351872
QQ群：853676032（小游戏可视化体验官）
B站上有个Up主制作了相关的视频，大家也可以看看，https://space.bilibili.com/57386850

欢迎大家来体验我们的工具 https://gamemaker.weixin.qq.com/