Egret Launcher 引擎入门教学笔记（四）

xihehua
130 阅读5分钟

一.游戏的准备

1.开始场景

  •  设置按钮

  • 作用:弹出设置页面,主要是音频的设置

  • 素材:需要一张底图

  • 绑定方法:响应函数是弹出音频设置页面

  • 开始游戏按钮

  • 作用:切换到游戏的关卡场景

  • 素材:需要一张底图

  • 绑定方法:响应函数是切换场景

  • 背景图

  • 作用:是作为游戏开始场景的背景图

  • 素材:需要-张大图.

2.关卡场景

  • 需要关卡配置文件

  • 关卡选择按钮

  • 作用:进入该关卡的游戏场景

  • 素材:

  • 激活状态的图片

  • 禁用状态的图片

  • 绑定方法:

  • 如果是禁用的关卡按钮，则无效果

  • 如果是激活状态的关卡,并且关卡指示箭头处于当前关卡时,直接进入游戏场景

  •  位置(布局)

  • 使用的是正弦曲线来排列.

  • 关卡指示箭头

  • 作用:指示当前选中的关卡

  • 素材:需要- -张图片

  • 返回按钮

  • 作用:切换到游戏开始场景。素材:需要- -张图片

3.游戏场景 

  •  返回按钮

  • 作用:返回上一级场景,切换到游戏的关卡场景。

  • 素材:需要一张图片

  • 成语提示图

  • 作用:提示成语的图片,可供玩家猜测答案.。

  • 素材:需要游戏关卡信息中的图片

  • 成语答案区

  • 作用:显示玩家选择而成的成语(答案)。

  • 组成:有四个相同的方格组件

  •  绑定方法:

  • 点击区域没有文字:无响应

  • 点击区域有文字:清空该方格,让区域内的文字恢复到选择区.

  • 成语文字提示区

  •  作用:提示成语的图片，可供玩家猜测答案.

  • 素材:需要游戏关卡信息中的图片.

  • 成语答案区

  • 作用:显示玩家选择而成的成语(答案)。

  • 组成:由四个相同的方格组件

  • 成语文字提示(选择)区

  • 作用:从里面挑选四个文字,组成一个单词.。

  • 组成:由二十个相同的方格组件

  • 组件中有Label

  •  位置:网格布局.

  • 。绑定方法:

  • 把选择的文字显示在成语答案区空白处

  • 隐藏当前点击的方格.

  • 需要验证答案区成语是否正确

  • 如果正确,弹出正确场景

  • 如果错误，无响应

4.正解场景

  • 透明的蒙层 

  • 作用是隔开游戏场景

  • 正解的显示区 

  • 背景图

  • 成语解释

  • 成语出处

  • 下一关按钮 

  • 作用:开启下一关的游戏场景

  • 素材:需要一张图片 

  • 绑定方法:

  • 隐藏正解场景 ■替换下一关卡的游戏内容.

 5.设置

  •  背景框

  • 背景音乐按钮

  • 作用:开启或关闭背景音乐。

  • 素材:

  • 激活状态

  • 禁用状态.

  • 绑定方法:

  • 判断是否是激活状态，如果是,切换到禁用状态,同时停止背景音乐播放 

  •  判断是否是禁用状态，如果是,切换到激活状态，同时开启背景音乐播放

  • 音效按钮

  • 作用:开启或关闭交互音效。

  • 素材

  • 激活状态

  • 禁用状态

  • 绑定方法

  • 判断是否是激活状态，如果是,切换到禁用状态,同时停止音效音乐播放

  • 判断是否是禁用状态,如果是,切换到激活状态,同时开启音效音乐 

●确定按钮 

  • 作用:确认上述操作的修改
  • 素材:需要一张图片

 二.开始构建游戏

1.创建游戏项目
2.添加游戏素材

  • 由于我们的素材过多,所以希望保留原来的目录结构
  • 所以我们直接在源代码的文件下进行操作把data文件夹拖到源代码resource/assets/目录下

3.添加一些素材到preload组里. 

4.解析游戏关卡文件

"answer" :"食言而肥" ,     
"img" :" images/174. jpg","word" :"吃胖吞说口人", 
"tip" :"比喻言而无信，说话不守信用。",      
"content":"明.李开光.水风卧吟楼记:「此予 事而挂客怀，何也?不以食言而肥，
不因苦吟而瘦，试以数语为记，请览而教正之如何?」"}



answewe:答案
img:图片路径
word:混淆文字
tip:正确解释      
content:成语出处

5删除Main.ts 下的 createGameScene方法里面的内容

三.游戏开始场景

 1.创建SceneBegin组件

  • 构建exmI

  • 拿到两个按钮，分别绑定方法

    class SceneBegin extends eui.Component implements eui.UIComponent { //设置按钮 public btn_setting:eui.Button; //开始按钮 public btn_begin:eui.Button;

    //声明单例
private static shared: SceneBegin;
public static Shared() :SceneBegin{
	if(SceneBegin.shared == null){
		SceneBegin.shared = new SceneBegin();
	}
	return SceneBegin.shared;
}

public constructor() {
	super();
}

protected partAdded(partName:string,instance:any):void
{
	super.partAdded(partName,instance);
}

protected childrenCreated():void
{
	super.childrenCreated();
	this.init();
}

// 初始化
private init(){
	// 给两个按钮绑定点击方法
	this.btn_setting.addEventListener(egret.TouchEvent.TOUCH_TAP,this.setting_tap,this);
	this.btn_begin.addEventListener(egret.TouchEvent.TOUCH_TAP,this.begin_tap,this);
}

//点击设置按钮的响式函数
private setting_tap(){
	//打开设置页面
	console.log('打开设置页面')
}

private begin_tap(){
	//打开游戏页面
	console.log('打开游戏页面')
	//把游戏关卡场景加入
	this.parent.addChild(SceneLevels.Shared());
	//移除游戏开始场景
	this.parent.removeChild(this);
}

    }

四.游戏关卡场景

1.创建SceneLevel组件

  • 构建SceneLevels.exmI 

2.创建 Levellcon组件

  • Levellcon.exmI 

3.创建关卡数据管理类levelDataManager.ts|

  • 读取并保存所有的关卡数据
  • 通过关卡号返回关卡数据
  • 存档(游戏的最远进度)
  • 取档(游戏的最远进度) 
  • 需要再定义个变量->用来获取关卡的总数量 （totalLevels）

4.给返回按钮和关卡按钮绑定方法.

5.项目的结构

avatar
文章
阅读
粉丝