微信小游戏

创建于:2017-12-28

创建人: MotionWalk Studios

75 信息 778 成员
关于微信小游戏的内容

如何10分钟做一个Flappy Bird

stack 2020-12-10

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

Image title

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

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

Image title

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

Image title

我们整理下游戏逻辑:

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

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

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

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

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

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

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

Image title

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

背景

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

Image title

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

Image title

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

Image title

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

Image title

180度就是向左移动。

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

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

Image title

小鸟

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

Image title

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

Image title

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

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

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

柱子

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

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

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

Image title

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

Image title

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

Image title

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

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

Image title

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

Image title

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

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

Image title

分数

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

Image title

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

Image title

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

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

Image title

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

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

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

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

(转发自:原日志地址
 

加入 indienova

  • 建立个人/工作室档案
  • 建立开发中的游戏档案
  • 关注个人/工作室动态
  • 寻找合作伙伴共同开发
  • 寻求线上发行
  • 更多服务……
登录/注册