• 媒体品牌
    爱范儿
    关注明日产品的数字潮牌
    APPSO
    先进工具,先知先行,AIGC 的灵感指南
    董车会
    造车新时代,明日出行家
    玩物志
    探索城市新生活方式,做你的明日生活指南
  • 知晓云
  • 制糖工厂
    扫描小程序码,了解更多

开发 | 傻瓜式操作带你创建「跳一跳」场景

小程序

2018-02-27 20:00

上一篇教程里,知晓君为大家简单讲解了如何创建小游戏。通过介绍,大家一定对于小游戏的开发有了一些认识。

我们将一个游戏分为多个场景,每个场景展示不同的页面,比如「跳一跳」,我们可以简单分为三个场景:开始场景、游戏中场景、结束场景。

今天,知晓程序就将手把手教你用白鹭引擎创建游戏场景,操作十分简单,可能也就比画图复杂一点。

新建小游戏项目

我们所需要用到的工具依然是:微信开发者工具、Egret Launcher、Egret Wing3。

上周微信开发者工具已更新到 v1.02.1802021,建议下载安装最新版。

然后到白鹭官网下载最新版的 Egret Launcher,新版的 Egret Launcher 添加了对小游戏的支持。

下载完毕,注册账号并登录后,我们在 Egret Launcher 的「工具」标签中下载「Egret Wing3」。

在「引擎」标签中下载引擎,截止到发稿前的最新版是 5.1.5,只要版本在 5.1.2 以上均可,点击下载图标即可安装。

在「项目」标签中创建新项目,项目路径尽量选择纯英文路径,项目名字叫作「test」,引擎版本选择已下载的 5.1.2 以上版本。新建时缩放模式选择 fixedWidth

在新建好的项目上点击「发布设置」。

「发布设置」中已经默认填写了微信「小游戏开发辅助」的 AppID,无需更改,仅用于调试项目。

项目名称填写「test」。点击确定按钮后,弹出提示面板,选择「使用微信开发者工具打开」(注:只有 Egret Launcher 1.0.37 以上版本会显示该选项)。

此时,会生成与 test 项目同级的文件夹 test_wxgame,这里面装的就是针对微信开发者工具的源码。

在新建好项目后 Egret Wing 也会打开。如果我们本次关闭了 Egret Wing,下次直接打开即可,无需再从 Egret Launcher 进入。

项目结构分析

那么 Egret Wing 到底是一个怎样的工具呢?它是 Egret 引擎附带的最重要的 IDE(集成开发环境),它的界面可分为以下几个版块:

下面知晓君简单介绍一下项目结构。

1. 核心文件在 src 目录中,包含所有项目源代码。目录中最重要的文件如下:

  • Main.ts:项目入口类,也称为文档类,文档类是衔接项目运行容器环境与项目中所有类的重要文件。
  • LoadingUI.ts:加载过程中的辅助显示组件,用来显示加载进度。

2. 而与 src 目录同在根目录下的 egretProperties.json 是整个项目的配置文件,我们将开发的「跳一跳」配置中引擎适配自己已安装的白鹭引擎版本,并改至使用微信开发者工具启动调试,代码如下:

{
  "engineVersion": "5.1.5",
  "compilerVersion": "5.1.5",
  "target": {
    "current": "wxgame"
  },
  "template": {},
  "eui": {
    "exmlRoot": [
      "resource/eui_skins"
    ],
    "themes": [
      "resource/default.thm.json"
    ],
    "exmlPublishPolicy": "commonjs"
  },
  "modules": [
    {
      "name": "egret"
    },
    {
      "name": "eui"
    },
    {
      "name": "assetsmanager"
    },
    {
      "name": "tween"
    },
    {
      "name": "promise"
    }
  ]
}

3. libs 目录中包含项目各模块所对应的所有类库。

4. 项目编译的结果文件都会被存储到 bin-debug 目录中,这也是调试运行过程将会调用到的文件。

5. resource 是用来存放项目运行所需要的所有资源,包含图片和配置文件。

创建游戏开始场景

要仿写「跳一跳」,我们需要设计两个场景:游戏开始页面、游戏中页面(包含游戏结束场景)

首先,我们在 src 目录下创建一个 SceneManager.ts

  • 鼠标右击 src 目录;
  • 选择「新建模板文件」;
  • 选择「新建 TypeScript 类」;
  • 类名填写为「SceneManager」,点击确定。

一个 EUI 组件由两部分组成:ts 文件和 exml 文件。

我们在 src 目录下新建一个文件夹 scene,用于存放两个游戏场景类 ts 文件;在 resource 目录下也创建一个 scene 文件夹,用于存放两个游戏场景类 exml 文件。

src 目录下的 scene 文件夹中创建 BeginScene 场景的 EUI 组件:

  • 鼠标右击 src 目录;
  • 选择「新建模板文件」;
  • 选择「新建 EUI 组件」;
  • 类名填写为「BeginScene」;
  • 修改皮肤默认路径为:/resource/scene/{className}.exml。

点击确定后,生成 BeginScene 场景的 EUI 组件:

同理,在 src 目录下新建 GameScene 场景的 EUI 组件

引入游戏场景

src 目录下的 SceneManage.ts 负责控制场景的切换,需要写入两个场景类的对象,完整代码如下:

class SceneMange extends egret.Sprite {
	// 场景控制器的单例
	private static instance: SceneMange;
	// 开始场景
	private beginScene: BeginScene;
	// 游戏场景
	private gameScene: GameScene;

	public constructor() {
		super();
		this.init();
	}
	private init(){
		// 实例化两个场景
		this.beginScene = new BeginScene();
		this.gameScene = new GameScene();
		// 默认添加开始场景
		this.addChild(this.beginScene);
	}
	// 实例化单例获取方法
	public static getInstance(): SceneMange{
		if(!SceneMange.instance){
			SceneMange.instance = new SceneMange();
		}
		return SceneMange.instance;
	}
	// 切换场景
	public changeScene(type){
		this.removeChildren();
		this.addChild(this[type]);
	}
}

在入口文件 Main.ts 中引入场景管理类 SceneManage,找到第 102 行 createGameScene 方法,并删除方法内所有代码:

然后在这个方法中写入代码如下,记得修改后随手 ctrl+s 保存:

this.addChild(SceneMange.getInstance());

添加游戏资源

这里我们用简单粗暴的方法用我们的「跳一跳」资源替换掉初始化的游戏资源,删除 test 文件夹中 resource 目录下的 assets,拖入知晓程序提供的 assets。资源链接放在文章末尾。

点击 resource 下的 default.res.json,可以看到默认的资源分组 preload 中已经被替换为我们的「跳一跳」游戏资源。

编辑开始场景的 EUI

找到项目结构下 resource 目录下的 scene 文件夹下的 BeginScene.exml

点击「场景预览」区域,在「属性面板」中设置场景的宽和高分别为:640 和 1136,可配合使用「工具栏」中的放大镜来缩放场景。

选择并拖动「组件」选项卡中的 image 控件到「场景预览」里。

在「属性面板」中设置 image 控件上下左右约束值为 0,铺满整个场景。

选择并拖动「资源」选项卡中的 bg.jpg 到控件属性「样式」>「资源名」中,这样开始场景中的背景图就放置好了。如果拖动到位后没有效果,可点击「工具栏」中的「刷新」。

与放置背景图操作一致,在「组件」选项卡中选择并拖动一个 button 控件到场景预览中,在「属性面板」中选择「快速约束」的「水平居中对齐」。

选择并拖动「资源」选项卡中的 start_btn_png 到控件属性「样式」>「皮肤快捷模板」>「正常」中。

删除「标签」内容,将「ID」设为 beginBtn。所有设好后按下 ctrl+s 保存。

在 IDE 中选择「调试」项目,即可在微信开发者工具中打开这个项目并手机预览。

我们的「跳一跳」开始场景就创建好了。

大家可以看到,整个场景创建中代码改动部分很少,大多时候只是鼠标在拖放,操作十分简单。不管你是开发者还是对此感兴趣,都不妨跟着一试。

关注「知晓程序」微信公众号,回复「开发」,让你的小程序性能再上一层楼。

登录,参与讨论前请先登录

评论在审核通过后将对所有人可见

正在加载中