微信小游戏制作新手入门指南——飞机大战+改编

目录

前言

新手教程

Step 1:新建作品

Step 2:添加素材

Step 3:添加行为

Step 4:添加事件

第一个事件:使战机始终面向鼠标光标位置

第二个事件:让战机发射子弹

第三个事件:让子弹消灭敌机

Step5:得分

Step6:游戏结束

游戏改编

设置背景可动态移动、闪烁

在关卡设计中引入一些障碍

添加音频对象

游戏演示


前言

本文使用小游戏可视化工具——微信小游戏制作工具,开始制作自己的第一个游戏!我们将制作 飞机大战演示游戏,一步一步学习制作简单游戏所需的所有知识-从精灵到行为到事件系统!

新手教程

Step 1:新建作品

微信小游戏制作工具

点击上面的链接进入网站,点击右上角的新建作品创建一个新项目,根据需要制作的游戏选择横竖屏,这里我们选择横屏制作飞机大战游戏。

微信小游戏制作新手入门指南——飞机大战+改编_第1张图片

编辑器分为8个区域,分别是:

  • 工具栏:添加素材,运行游戏,预览发布,搜索,保存退出等功能入口;
  • 场景面板:添加/切换不同场景,如果游戏复杂可能存在多个场景,比如:不同关卡、开始界面、结束界面等等;
  • 资源面板:管理当前项目的所有资源(包括精灵/声音/函数),资源管理器中的精灵可拖拽进入编辑区域生成一个新的图层精灵实例
  • 积木面板:用于控制精灵实例的积木脚本,积木是与资源一一对应的,一个资源的多个实例图层都会公用一套积木;
  • 图层面板:管理当前场景中的精灵实例,已经在编辑区域有实例的精灵都是一个图层,在图层面板可以拖拽调整图层顺序,也可以打组成为容器(Ctrl+G);
  • 编辑区域:这里就是所见即所得的游戏界面!编辑区域与图层是一一对应的,我们可以选中区域中的精灵实例进行拖拽位置,调整大小等;
  • 属性面板:由两块组成,当我们选择资源时,只显示资源属性,当我们选择图层时,同时显示图层属性和资源属性。每个图层都有自己的属性互不影响;
  • 数据面板:对(全局/精灵私有)的变量/列表/表格/通知等数据进行管理

微信小游戏制作新手入门指南——飞机大战+改编_第2张图片

Step 2:添加素材

制作飞机大战需要添加星空背景(或者是你喜欢的任意背景图)、战机、敌机、子弹,点击添加素材,在素材库选择需要的元素并添加

微信小游戏制作新手入门指南——飞机大战+改编_第3张图片

在层级管理中点击星空背景,选择平铺并将宽高调整到可覆盖整个布局视图的大小,层级管理中点击战机,设置其坐标使其移到中心位置。由于游戏开始时我们并不需要看见除战机外的其他精灵,所以将他们移到布局线以外的地方。

微信小游戏制作新手入门指南——飞机大战+改编_第4张图片

添加更多的敌机,单击选中按敌机精灵。Ctrl+C复制一个敌机,Ctrl+V粘贴,你会注意到它创建了另一个实例。这只是敌机对象类型的另一个实例。

微信小游戏制作新手入门指南——飞机大战+改编_第5张图片

Step 3:添加行为

要使游戏中的精灵受控制产生移动等行为,需要对精灵添加行为控制,点击战机,再点击管理行为可添加“方向控制”行为,选择键盘控制,预览项目即可发现现在战机可以通过方向键控制移动啦!

  • 微信小游戏制作新手入门指南——飞机大战+改编_第6张图片

Step 4:添加事件

点击选择对应的精灵添加事件

第一个事件:使战机始终面向鼠标光标位置

重复循环是,每一帧都会执行一次,如果不发生卡顿,每一秒执行60次,因此,如果我们使战机在每一帧都指向鼠标光标的位置,则它们总是看起来像是面对鼠标光标。由于“面向积木”默认战机的“脸”是3点钟方向,而实际图片是12点钟方向。因此我们要提前旋转一次战机的角度。

微信小游戏制作新手入门指南——飞机大战+改编_第7张图片

第二个事件:让战机发射子弹

我们定义当屏幕被点击的时候发射一个子弹,由于每次点击都需要发射子弹,所以当屏幕被点击的时候,克隆一个子弹,子弹被克隆之后,我们需要对克隆体添加逻辑:

  • 将子弹移动到战机位置
  • 子弹移动方向为鼠标光标方向
  • 设置移动步数的大小控制子弹的速度

微信小游戏制作新手入门指南——飞机大战+改编_第8张图片

第三个事件:让子弹消灭敌机

首先设置敌机随机克隆,每一帧都让敌机朝向主角以1步的速度朝着主角运动

微信小游戏制作新手入门指南——飞机大战+改编_第9张图片微信小游戏制作新手入门指南——飞机大战+改编_第10张图片

再设置碰撞逻辑使敌机碰撞到蓝色子弹时触发碰撞特效后消失,得分的变量添加将在后续介绍,

点击敌机精灵——编辑造型即可添加爆炸动画造型。

微信小游戏制作新手入门指南——飞机大战+改编_第11张图片

微信小游戏制作新手入门指南——飞机大战+改编_第12张图片

当子弹克隆体移出屏幕或碰撞到敌机时,删除克隆体

微信小游戏制作新手入门指南——飞机大战+改编_第13张图片


Step5:得分

在数据面板新建全局变量——得分

微信小游戏制作新手入门指南——飞机大战+改编_第14张图片

新增一个数字对象,在素材库任选一个数字即可,点击选中该对象添加事件,每一帧同步得分的值

微信小游戏制作新手入门指南——飞机大战+改编_第15张图片

添加得分增加的逻辑,我们希望敌机爆炸时得分加一,得分增加逻辑已经在上面第三个事件的积木中完成设置,无需重复添加。

Step6:游戏结束

添加基础文字、再玩一次对象,并设置其为不显示(在右侧取消显示勾选)

若战机与敌机碰撞或战机移出屏幕,战斗失败,显示“游戏结束”文字与再玩一次按钮,点击按钮即可重新开始游戏

微信小游戏制作新手入门指南——飞机大战+改编_第16张图片

微信小游戏制作新手入门指南——飞机大战+改编_第17张图片微信小游戏制作新手入门指南——飞机大战+改编_第18张图片

微信小游戏制作新手入门指南——飞机大战+改编_第19张图片

游戏改编

设置背景可动态移动、闪烁

在星空背景中添加循环滚动、闪烁行为,根据需求设置参数,并添加循环克隆、闪烁事件,即可实现背景动态移动、闪烁的效果

微信小游戏制作新手入门指南——飞机大战+改编_第20张图片

在关卡设计中引入一些障碍

添加陨石、火球对象,设置其随机生成,战机需要通过移动躲避障碍物,否则战斗失败。

按Ctrl后选中火球、陨石图层再按G使其放在同一容器中

微信小游戏制作新手入门指南——飞机大战+改编_第21张图片

对容器添加事件:每间隔随机的几秒,就克隆一个障碍物。添加一个当作为克隆体启动时,设置克隆体的位置,等待1.5S后删除。

微信小游戏制作新手入门指南——飞机大战+改编_第22张图片

对战机添加碰撞事件,若碰撞到陨石或火球则游戏结束

微信小游戏制作新手入门指南——飞机大战+改编_第23张图片

添加音频对象

播放背景音乐以及击落敌机音效

微信小游戏制作新手入门指南——飞机大战+改编_第24张图片微信小游戏制作新手入门指南——飞机大战+改编_第25张图片

游戏演示

微信小游戏制作新手入门指南——飞机大战+改编_第26张图片

演示视频链接:微信小游戏制作新手入门指南——飞机大战+改编_哔哩哔哩_bilibili

你可能感兴趣的:(微信小程序,小程序)