node-tutorial
node-tutorial copied to clipboard
Egret
入口文件
Main.ts,清空createGameScene里面的方法,里面是所有场景的起点
protected createGameScene(): void {}
添加背景
var bg:egret.Shape = new egret.Shape();
bg.graphics.beginFill( 0x336699 );
bg.graphics.drawRect( 0, 0, this.stage.stageWidth, this.stage.stageHeight );
bg.graphics.endFill();
this.addChild(bg);
添加文字
var tx:egret.TextField = new egret.TextField();
tx.text = "I'm Jack, I will use Egret create a fantasy mobile game!";
tx.size = 32;
this.addChild( tx );
添加事件
var tx: egret.TextField = new egret.TextField();
tx.text = "I'm Jack, I will use Egret create a fantasy mobile game!";
tx.size = 32;
tx.touchEnabled = true;//记得打开该对象的事件监听,所有对象默认都是不开启事件监听的,为了性能
tx.addEventListener(egret.TouchEvent.TOUCH_TAP
, function (evt: egret.TouchEvent): void {
tx.textColor = 0x00ff00;
}, this);
this.addChild(tx);
除了运用匿名函数,还可以这样添加事件
tx.touchEnabled = true;
tx.addEventListener( egret.TouchEvent.TOUCH_TAP, this.touchHandler, this );
private touchHandler( evt:egret.TouchEvent ):void{
var tx:egret.TextField = evt.currentTarget;
tx.textColor = 0x00ff00;
}
简单安装
最简单的引入方案,引入核心egret.js在页面中进行开发
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div style="margin: auto;width: 100%;height: 100%;" class="egret-player" data-entry-class="Main">
</div>
<script src="https://yun.duiba.com.cn/db_games/egret_5.2.9/egret.min.js"></script>
<script src="https://yun.duiba.com.cn/db_games/egret_5.2.9/egret.web.min.js"></script>
<script src="main.js"></script>
</body>
</html>
逻辑文件main.js
class Main extends egret.DisplayObjectContainer {
constructor() {
super();
this.addEventListener(egret.Event.ADDED_TO_STAGE, this.onAddToStage, this);
}
onAddToStage(event) {
let textfield = new egret.TextField();
this.addChild(textfield);
textfield.textColor = 0xff0000;
textfield.text = 'hello world';
}
}
window['Main'] = Main;
egret.runEgret();