前言
- 目的:是为了熟悉Egret引擎
- 这款小游戏还是个半成品。
一些常用方法、技巧
*官网的一些常用方api版本多，隐藏的较深，比较不好找，所以总结下一些常用的。
| 类 | 描述 |
|---|---|
| DisplayObject | 显示对象基类，所有显示对象均继承自此类 |
| Bitmap | 位图，用来显示图片 |
| Shape | 用来显示矢量图，可以使用其中的方法绘制矢量图形 |
| DisplayObjectContainer | 显示对象容器接口，所有显示对象容器均实现此接口 |
| Sprite | 与DisplayObjectContainer类似，多一些功能 |
| Stage | 舞台类 |
| TextField | 文本类 |
| TextInput | 输入文本类 |
Bitmap
这应该是最常用到的
//创建一个图片精灵 let sky = new egret.Bitmap(); sky.texture = RES.getRes("game_scene_bg"); //RES.getRes获取资源 sky.width = 100; skt.height = 100; this.addChild(sky); //九宫格位图,改变长宽而不改变圆角处，见下图。 let sky = new egret.Bitmap(); sky.texture = RES.getRes("game_scene_bg"); //RES.getRes获取资源 this.addChild(sky); let rect:egret.Rectangle = new egret.Rectangle(30,31,40,41); sky.scale9Grid = rect; 
除了宽高还有许多属性，可以设置也可以获取，游戏中会有许多逻辑判断，都将会用到这些数据。
alpha:1anchorOffsetX:0anchorOffsetY:0blendMode:"normal"cacheAsBitmap:falsefilters:nullhashCode:40height:456mask:nullmatrix:MatrixmeasuredHeight:456 measuredWidth:326name:""numChildren:3parent:MainplatingPage:playingPage {$hashCode: 46, $EventDispatcher: {…}, $children: Array(0), $parent: null, $stage: null, …}rotation:0scaleX:1scaleY:1scrollRect:nullskewX:0skewY:0stage:StagetouchChildren:truetouchEnabled:falsevisible:truewidth:326x:0y:0 Shape
let shp:egret.Shape = new egret.Shape(); shp.x = 100; shp.y = 100; shp.graphics.lineStyle( 10, 0x00ff00 ); shp.graphics.beginFill( 0xff0000, 1); shp.graphics.drawCircle( 0, 0, 50 ); //圆 x,y,r //shp.graphics.drawRect( 0, 0, 100, 200 ); 矩形 //shp.graphics.moveTo( 50, 50); 移动，不划线 //shp.graphics.curveTo( 100,100, 200,50); 曲线 //shp.graphics.lineTo( 100, 20 ); 直线 shp.graphics.endFill(); this.addChild( shp );
TextField
let label:egret.TextField = new egret.TextField(); label.text = "这是一个文本"; label.textColor = 0xff0000; //颜色 label.fontFamily = "KaiTi"; //字体 label.textAlign = egret.HorizontalAlign.RIGHT; //布局默认LEFT //描边属性 label.strokeColor = 0x0000ff; label.stroke = 2; this.addChild( label );
TextInput
let txInput:egret.TextField = new egret.TextField; txInput.type = egret.TextFieldType.INPUT; txInput.width = 282; txInput.height = 43; txInput.x = 134; txInput.y = 592; txInput.textColor = 0x000000; /// 注意_container是事先建立好的一个显示容器，即 egret.Sprite，并且已经添加到显示列表中 this._container.addChild(txInput);
Tween
let delay = 200, during = 100;egret.Tween.get(sprite) .to({alpha: 0}, 1) //动画类型常用的有alpha、ritation、scaleX、scaleY、 .to({alpha: 1, y: during}, delay) ... .wait(400) .call(()=>{ ... }); 添加、移除精灵
- parent.addChild(); //添加
- parent.removeChild(); //单个对象
- parent.removeChildren() ;//移除所有子对象
- parent.numChildren //获取parent容器子对象的数量
- parent.getChildIndex(); //获取精灵深度（叠放次序）
- parent.getChildAt(); //通过index获取子对象（效率高）
- parent.getChildByName(); //通过name属性获取子对象（效率低）
- child.parent //获取父级对象
Demo 部分代码
/** * 结构Main - >startPage -> playingPage -> 结束页？ * 还有一种方案就是编写自定义监听事件，在每个页面结束之后触发自定义事件，通知Main移除前页面进入下一个页面,结构： Main -> startPage, Main -> playingPage, Main -> 结束页 */
Main.ts
/** * 加载资源 * 添加两个子对象：背景、游戏开始页 */ private startPage = new StartPage(); //游戏开始页 private onResourceLoadComplete(event: RES.ResourceEvent) { if (event.groupName == "startPage") { ... ... ... //背景 let sky = new egret.Bitmap(); sky.texture = RES.getRes("game_scene_bg"); this.addChild(sky); sky.width = this.stage.stageWidth; sky.height = this.stage.stageHeight; this.addChild(this.startPage); } } startPage.ts
public create(): void{ //舞台宽高 let stageW = this.stage.stageWidth; let stageH = this.stage.stageHeight; //开始按钮 let starBtn = this.createBitmapByName("play_btn"); this.addChild(starBtn); starBtn.width = 110; starBtn.height = 110; starBtn.anchorOffsetX = 55; starBtn.x = stageW * .5; starBtn.y = stageH * .6; starBtn.touchEnabled = true; starBtn.addEventListener(egret.TouchEvent.TOUCH_TAP, ()=> { this.removeChildren(); //移除所有子对象 this.addChild(tip); }, this); //游戏提示 let tip = this.createBitmapByName("help_info"); tip.width = stageW * .9; tip.height = stageH * .55; tip.x = stageW * .05; tip.y = 120; tip.touchEnabled = true; tip.addEventListener(egret.TouchEvent.TOUCH_TAP, ()=>{ this.removeChild(tip); this.addChild(this.platingPage); //添加游戏页 }, this); //音乐按钮 let sound = this.createBitmapByName("sound_on_btn"); let soundSwitch = true; this.addChild(sound); sound.width = 60; sound.height = 60; sound.anchorOffsetX = 60; sound.x = stageW - 12; sound.y = 17; sound.touchEnabled = true; //点击切换开关状态 sound.addEventListener(egret.TouchEvent.TOUCH_BEGIN, ()=>{ if(soundSwitch){ egret.Tween.get(sound) .to({scaleY: 1.1, scaleX: 1.1}, 150) .to({scaleY: 1, scaleX: 1}, 150); sound.texture = RES.getRes("sound_off_btn"); //替换资源 soundSwitch = !soundSwitch; } else{ egret.Tween.get(sound) .to({scaleY: 1.1, scaleX: 1.1}, 150) .to({scaleY: 1, scaleX: 1}, 150); sound.texture = RES.getRes("sound_on_btn"); soundSwitch = !soundSwitch; } }, this); } playingPage.ts
private createBlock():void{ ... ... let matrix = []; //位置矩阵 let Matrix = new egret.Sprite(); //新建一个容器，存放方块，方便整体操作 //初始化9*8方块, this.addChild(Matrix); for(let j = 0; j<9; j++){ matrix[j] = []; alreadyRet[j] = [], retrievalOk[j] = []; for(let i = 0; i<8; i++){ let index = Math.floor(Math.random() * 5); let bl = this.createBitmapByName(`bl${index}`); matrix[j].push(bl); retrievalOk[j][i] = false; bl.name = index.toString(); bl.width = 41; bl.height = 41; bl.x = 4 + 41 * j; bl.y = stageH - 3 - 41 * (i+1); Matrix.addChild(bl); } } //把点击事件绑定到背景层 let bg = this.parent.parent.getChildAt(0); //获取背景精灵 bg.touchEnabled = true; bg.addEventListener(egret.TouchEvent.TOUCH_BEGIN, click, this); function click(e) { position = this.getPosition(e); //通过点击坐标确定点击的方块，避免了对每个方块都绑定点击事件，提高效率 ... ... //达到30分，进入下一关 if(this.totalScore>=30){ this.totalScore = 0; egret.Tween.get(Matrix) //所有滑块，下滑出屏幕 .to({y:stageH},500) .call(()=>{ //移除点击事件，否则会造成重复绑定，后果很严重。 bg.removeEventListener(egret.TouchEvent.TOUCH_BEGIN, click ,this); this.removeChild(Matrix); this.createBlock(); }); } } } /** * 几乎每个游戏都要用到数字，复用率高，写一个创建数字的方法 * num：要显示的数字 * sprite：精灵（Sprite），把所有的数字都加入到他的子对象，方便整体 操作 * width：单个数字的宽度 * height：单个数字的宽度 * x:数字x坐标，锚点为width/2,就是中间点横坐标。 * y：最上方点的纵坐标，为了与其他元素保持一致，方便计算。 */ private createNumber(num: number, sprite, width: number, height: number, x: number, y: number) { let number = num.toString(); let len = number.length; let anchorX = width / 2 * len; sprite.removeChildren(); for(let i = 0; i 以上代码都没有涉及逻辑部分并删除了许多相似内容，每个不同的游戏逻辑都不一样，参考价值不大，附上完整代码：