使用egret开发h5游戏的入门demo
main类代码
基本的代码如下所示,都写了注释,应该很好懂的。就不再一步一步分析了:
/**
* 定义全局变量
*/
//定义一个透明度的值用来判断是否需要隐藏或者显示
var number: number;
//定义一个值来表示是图片序号
var count: number = 1;
//定义三个按钮
let button = new eui.Button();
let button3 = new eui.Button();
let button2 = new eui.Button();
//定义一个位图对象
let sky = new egret.Bitmap();
/**
* main方法
*/
class Main extends eui.UILayer {
protected createChildren(): void {
super.createChildren();
egret.lifecycle.addLifecycleListener((context) => {
// custom lifecycle plugin
})
egret.lifecycle.onPause = () => {
egret.ticker.pause();
}
egret.lifecycle.onResume = () => {
egret.ticker.resume();
}
//inject the custom material parser
//注入自定义的素材解析器
let assetAdapter = new AssetAdapter();
egret.registerImplementation("eui.IAssetAdapter", assetAdapter);
egret.registerImplementation("eui.IThemeAdapter", new ThemeAdapter());
this.runGame().catch(e => {
console.log(e);
})
}
private async runGame() {
await this.loadResource()
this.createGameScene();
const result = await RES.getResAsync("description_json")
this.startAnimation(result);
await platform.login();
const userInfo = await platform.getUserInfo();
console.log(userInfo);
}
private async loadResource() {
try {
const loadingView = new LoadingUI();
this.stage.addChild(loadingView);
await RES.loadConfig("resource/default.res.json", "resource/");
await this.loadTheme();
await RES.loadGroup("preload", 0, loadingView);
this.stage.removeChild(loadingView);
}
catch (e) {
console.error(e);
}
}
private loadTheme() {
return new Promise((resolve, reject) => {
// load skin theme configuration file, you can manually modify the file. And replace the default skin.
//加载皮肤主题配置文件,可以手动修改这个文件。替换默认皮肤。
let theme = new eui.Theme("resource/default.thm.json", this.stage);
theme.addEventListener(eui.UIEvent.COMPLETE, () => {
resolve();
}, this);
})
}
private textfield: egret.TextField;
/**
* 创建场景界面
* Create scene interface
*/
protected createGameScene(): void {
var result: egret.Bitmap = new egret.Bitmap();
//定义位图对象
var texture: egret.Texture = RES.getRes("bg_jpg");
var texture2: egret.Texture = RES.getRes("aa_jpg");
var texture3: egret.Texture = RES.getRes("bb_jpg");
var texture4: egret.Texture = RES.getRes("cc_png");
//判断
if (count == 1) {
//默认显示图1
result.texture = texture;
//在重新创建场景的时候,也就是按钮4进行返回的时候,把图片设置成之前的图片序号count的值
} else if (count == 2) {
result.texture = texture2;
} else if (count == 3) {
result.texture = texture3;
} else if (count == 4) {
result.texture = texture4;
}
//赋值给全局位图对象
sky = result;
// sky = this.createBitmapByName("bg_jpg");
//给当前对象添加子元素
this.addChild(sky);
//取出舞台的宽高
let stageW = this.stage.stageWidth;
let stageH = this.stage.stageHeight;
//把舞台宽高复制给当前的场景
sky.width = stageW;
sky.height = stageH;
/**
* 创建按钮1 显示/隐藏
*/
button = new eui.Button();
button.label = "显示/隐藏";
button.horizontalCenter = 0;
// button.verticalCenter = 0;
button.$setX(200);
button.$setY(800);
//给当前对象添加按钮子元素
this.addChild(button);
//监听事件
button.addEventListener(egret.TouchEvent.TOUCH_TAP, this.onButtonClick, sky);
/**
* 创建按钮2 更换图片
*/
button2 = new eui.Button();
button2.label = "更换图片";
button2.horizontalCenter = 0;
// button2.verticalCenter = 0;
button2.$setX(200);
button2.$setY(900);
//给当前对象添加按钮子元素
this.addChild(button2);
//添加监听事件
button2.addEventListener(egret.TouchEvent.TOUCH_TAP, this.onButtonClick2, this);
/**
* 创建按钮3 切换场景
*/
button3 = new eui.Button();
button3.label = "切换场景";
button3.horizontalCenter = 0;
// button2.verticalCenter = 0;
button3.$setX(200);
button3.$setY(1000);
//给当前对象添加按钮子元素
this.addChild(button3);
//添加监听事件
button3.addEventListener(egret.TouchEvent.TOUCH_TAP, this.onButtonClick3, this);
}
/**
* 根据name关键字创建一个Bitmap对象。name属性请参考resources/resource.json配置文件的内容。
* Create a Bitmap object according to name keyword.As for the property of name please refer to the configuration file of resources/resource.json.
*/
private createBitmapByName(name: string): egret.Bitmap {
let result = new egret.Bitmap();
let texture: egret.Texture = RES.getRes(name);
result.texture = texture;
return result;
}
/**
* 描述文件加载成功,开始播放动画
* Description file loading is successful, start to play the animation
*/
private startAnimation(result: Array<any>): void {
let parser = new egret.HtmlTextParser();
let textflowArr = result.map(text => parser.parse(text));
let textfield = this.textfield;
let count = -1;
let change = () => {
count++;
if (count >= textflowArr.length) {
count = 0;
}
let textFlow = textflowArr[count];
// 切换描述内容
// Switch to described content
textfield.textFlow = textFlow;
let tw = egret.Tween.get(textfield);
tw.to({ "alpha": 1 }, 200);
tw.wait(2000);
tw.to({ "alpha": 0 }, 200);
tw.call(change, this);
};
change();
}
/**
* 点击按钮1执行的方法
* Click the button
*/
private onButtonClick(e: egret.TouchEvent) {
//判断透明度为0,既隐藏的时候,先把number透明度设置为显示,既number=1;
if (number == 0) {
number = 1;
//设置组件的透明度为不透明,既显示
this.$setAlpha(1);
console.log("执行了按钮1的不透明显示");
} else {
number = 0
//设置组件的透明度为全透明,既隐藏
this.$setAlpha(0);
console.log("执行了按钮1的透明显示");
}
}
/**
* 点击按钮2更换图片
* Click the button
*/
private onButtonClick2(e: egret.TouchEvent) {
//判断透明度为0,既隐藏的时候,先把number透明度设置为显示,既number=1;再执行切换图片的方法
if (number == 0) {
number = 1;
}
this.removeChildren();
var result: egret.Bitmap = new egret.Bitmap();
var texture: egret.Texture = RES.getRes("bg_jpg");
var texture2: egret.Texture = RES.getRes("aa_jpg");
var texture3: egret.Texture = RES.getRes("bb_jpg");
var texture4: egret.Texture = RES.getRes("cc_png");
//如果图片是1,那就切换到图2
if (count == 1) {
result.texture = texture2;
count++;
//如果图片是2,那就切换到图3
} else if (count == 2) {
result.texture = texture3;
count++;
//如果图片是3,那就切换到图4
} else if (count == 3) {
result.texture = texture4;
count++;
} else if (count == 4) {
//如果增加到4,说明下一张图片就是循环的第一张图片,重设图片为图片1
result.texture = texture;
//设置图片的序号count为1
count = 1;
}
//赋值给全局位图变量
sky = result;
//添加子元素
this.addChild(sky);
/**
* 重新创建按钮1
*/
button = new eui.Button();
button.label = "显示/隐藏";
button.horizontalCenter = 0;
// button.verticalCenter = 0;
button.$setX(200);
button.$setY(800);
//增加按钮到当前舞台
this.addChild(button);
//增加按键监听事件
button.addEventListener(egret.TouchEvent.TOUCH_TAP, this.onButtonClick, sky);
//增加三个按钮
this.addChild(button);
this.addChild(button2);
this.addChild(button3);
}
/**
* 点击按钮3切换场景的方法
* Click the button
*/
private onButtonClick3(e: egret.TouchEvent) {
//移除sky场景
this.removeChild(sky);
//定义位图对象
var result: egret.Bitmap = new egret.Bitmap();
var texture: egret.Texture = RES.getRes("dd_jpg");
//显示你的图片1
result.texture = texture;
this.addChild(result);
let button = new eui.Button();
button.label = "返回";
button.horizontalCenter = 0;
// button.verticalCenter = 0;
button.$setX(200);
button.$setY(1000);
//添加返回按钮
this.addChild(button);
button.icon = RES.getRes("button_png");
//添加监听事件
button.addEventListener(egret.TouchEvent.TOUCH_TAP, this.onButtonClickBack, this);
//重设透明度为1,防止切换回来是透明图片
number = 1;
}
/**
* 点击按钮4返回的方法
*/
private onButtonClickBack(e: egret.TouchEvent) {
//移除所有元素
this.removeChildren();
//重新创建之前的场景
this.createGameScene();
}
}
index展示页:点击【显示/隐藏】
点击【更换图片】:
点击【切换场景】:
点击【返回】:
详细完整代码,后续贴出!
版权声明:本文为qq_21650491原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。