{"id":653,"date":"2019-12-07T14:04:05","date_gmt":"2019-12-07T06:04:05","guid":{"rendered":"http:\/\/blog.xrhoujie.com\/?p=653"},"modified":"2019-12-07T14:04:05","modified_gmt":"2019-12-07T06:04:05","slug":"egret-%e6%9e%81%e9%99%90%e9%a3%9e%e8%bd%a6%e6%b8%b8%e6%88%8f%e5%bc%80%e5%8f%91","status":"publish","type":"post","link":"http:\/\/blog.xrhoujie.com\/?p=653","title":{"rendered":"egret-\u6781\u9650\u98de\u8f66\u6e38\u620f\u5f00\u53d1"},"content":{"rendered":"

\u5148\u521b\u5efa\u4e00\u4e2aegret\u6e38\u620f\u9879\u76ee \uff0c<\/p>\n

\u7136\u540e\u5728\u6211\u4eec\u7684main.ts\u6587\u4ef6\u5199\u4e0a\u4ee5\u4e0b\u4ee3\u7801
\n
\nclass Main extends egret.DisplayObjectContainer {
\npublic constructor() {
\nsuper();
\nthis.addEventListener(egret.Event.ADDED_TO_STAGE, this.onAddToStage, this);
\n}
\nprivate onAddToStage(event: egret.Event) {<\/code><\/p>\n

egret.lifecycle.addLifecycleListener((context) => {
\n\/\/ custom lifecycle plugin<\/p>\n

context.onUpdate = () => {<\/p>\n

}
\n})<\/p>\n

egret.lifecycle.onPause = () => {
\negret.ticker.pause();
\n}<\/p>\n

egret.lifecycle.onResume = () => {
\negret.ticker.resume();
\n}<\/p>\n

this.runGame().catch(e => {
\nconsole.log(e);
\n})<\/p>\n

}<\/p>\n

private async runGame() {
\nawait this.loadResource()
\nthis.createGameScene();
\nconst result = await RES.getResAsync(“description_json”)
\n\/\/ this.startAnimation(result);
\nawait platform.login();
\nconst userInfo = await platform.getUserInfo();
\nconsole.log(userInfo);<\/p>\n

}<\/p>\n

private async loadResource() {
\ntry {
\nconst loadingView = new LoadingUI();
\nthis.stage.addChild(loadingView);
\nawait RES.loadConfig(“resource\/default.res.json”, “resource\/”);
\nawait RES.loadGroup(“preload”, 0, loadingView);
\nthis.stage.removeChild(loadingView);
\n}
\ncatch (e) {
\nconsole.error(e);
\n}
\n}<\/p>\n

private textfield: egret.TextField;<\/p>\n

private car: egret.Bitmap;
\nprivate isMove: boolean = false;
\nprivate radius: number
\nprivate top_cx: number;
\nprivate top_cy: number;
\nprivate bot_cx: number;
\nprivate bot_cy: number;
\nprivate left_x: number;
\nprivate right_x: number;
\nprivate speed: number = 10;
\nprivate cl: number = 0;<\/p>\n

\/**
\n* \u521b\u5efa\u6e38\u620f\u573a\u666f
\n* Create a game scene
\n*\/
\nprivate createGameScene() {
\nthis.createBgPic()
\nthis.createPaoDao()<\/p>\n

this.car = new egret.Bitmap();
\nthis.car.texture = RES.getRes(‘car_png’);
\nthis.addChild(this.car)<\/p>\n

this.car.anchorOffsetX = this.car.width \/ 2;
\nthis.car.anchorOffsetY = this.car.width \/ 2;
\nthis.car.y = this.stage.stageHeight – this.stage.stageWidth \/ 2 – 10;
\nthis.car.x = this.stage.stageWidth – this.car.width \/ 2;<\/p>\n

this.stage.addEventListener(egret.TouchEvent.TOUCH_TAP, this.onDrive, this)
\n}
\nprivate createBgPic() {
\nlet bgPic:egret.Bitmap = this.createBitmapByName(‘bg_jpg’)
\nthis.addChild(bgPic);
\nbgPic.width = this.stage.stageWidth;
\nbgPic.height = this.stage.stageHeight;
\n}
\nprivate createPaoDao() {
\nlet top: egret.Shape = new egret.Shape()
\ntop.graphics.lineStyle(10, 0xff0304);
\ntop.graphics.beginFill(0xff0000, 0);
\n\/\/\u7ed8\u5236 \u5706\u5fc3\u7684\u4f4d\u7f6ex,\u5706\u5fc3\u7684\u4f4d\u7f6ey,\u534a\u5f84\uff0c\u4ece\u4ec0\u4e48\u89d2\u5ea6\u5230\u4ec0\u4e48\u89d2\u5ea6\u7ed8\u5236
\ntop.graphics.drawArc(this.stage.stageWidth \/ 2, this.stage.stageWidth \/ 2 – 10, this.stage.stageWidth \/ 2 – 40, -Math.PI, 0, false)
\ntop.graphics.endFill();
\nthis.addChild(top);<\/p>\n

this.radius = this.stage.stageWidth \/ 2 – 40;
\nthis.top_cx = this.stage.stageWidth \/ 2;
\nthis.top_cy = this.stage.stageWidth \/ 2 – 10;<\/p>\n

let left: egret.Shape = new egret.Shape();
\nleft.graphics.lineStyle(10, 0xff0000);
\n\/\/\u4ece\u4ec0\u4e48\u4f4d\u7f6e\u5f00\u59cb
\nleft.graphics.moveTo(40, this.stage.stageWidth \/ 2 – 10);
\n\/\/\u5230\u4ec0\u4e48\u4f4d\u7f6e\u7ed3\u675f
\nleft.graphics.lineTo(40, this.stage.stageHeight – this.stage.stageWidth \/ 2 – 10);
\nleft.graphics.endFill();
\nthis.addChild(left);
\nthis.left_x = 40;<\/p>\n

let right: egret.Shape = new egret.Shape();
\nright.graphics.lineStyle(10, 0xff0000);
\n\/\/\u4ece\u4ec0\u4e48\u4f4d\u7f6e\u5f00\u59cb
\nright.graphics.moveTo(this.stage.stageWidth – 40, this.stage.stageWidth \/ 2 – 10);
\n\/\/\u5230\u4ec0\u4e48\u4f4d\u7f6e\u7ed3\u675f
\nright.graphics.lineTo(this.stage.stageWidth – 40, this.stage.stageHeight – this.stage.stageWidth \/ 2 – 10);
\nright.graphics.endFill();
\nthis.addChild(right);
\nthis.right_x = this.stage.stageWidth – 40;<\/p>\n

let bottom: egret.Shape = new egret.Shape()
\nbottom.graphics.lineStyle(10, 0xff0304);
\nbottom.graphics.beginFill(0xff0000, 0);
\n\/\/\u7ed8\u5236 \u5706\u5fc3\u7684\u4f4d\u7f6ex,\u5706\u5fc3\u7684\u4f4d\u7f6ey,\u534a\u5f84\uff0c\u4ece\u4ec0\u4e48\u89d2\u5ea6\u5230\u4ec0\u4e48\u89d2\u5ea6\u7ed8\u5236
\nbottom.graphics.drawArc(this.stage.stageWidth \/ 2, this.stage.stageHeight – this.stage.stageWidth \/ 2 – 10, this.stage.stageWidth \/ 2 – 40, -Math.PI, 0, true)
\nbottom.graphics.endFill();
\nthis.addChild(bottom);<\/p>\n

this.bot_cx = this.stage.stageWidth \/ 2;
\nthis.bot_cy = this.stage.stageHeight – this.stage.stageWidth \/ 2 – 10, this.stage.stageWidth \/ 2 – 40;
\n}
\nprivate onDrive() {
\nif (!this.isMove) {
\nthis.isMove = true;
\nthis.addEventListener(egret.Event.ENTER_FRAME, this.update, this)
\n} else {
\nthis.isMove = false;
\nthis.removeEventListener(egret.Event.ENTER_FRAME, this.update, this);
\n}
\n}
\nprivate update() {
\nif (this.car.y < this.top_cy) { this.topRun() } else if (this.car.y > this.bot_cy) {
\nthis.bottomRun()<\/p>\n

} else {
\nif (this.car.x < this.top_cx) {
\nthis.leftRun()
\n} else {
\nthis.rightRun()
\n}
\n}
\n}
\nprivate leftRun() {
\nthis.cl = 0;
\nthis.car.y += this.speed;
\n}
\nprivate rightRun() {
\nthis.cl = 0;
\nthis.car.y -= this.speed;
\n}
\nprivate topRun() {
\n\/\/\u5148\u786e\u5b9a\u4f4d\u7f6e\uff0c\u7136\u540e\u6839\u636e\u4f4d\u7f6e \u8ba1\u7b97\u51fa\u89d2\u5ea6, \u5f27\u5ea6 = \u89d2\u5ea6\/\u534a\u5f84
\nthis.cl += this.speed;
\nlet angle: number = this.cl \/ this.radius;
\nif (angle < Math.PI) {
\n\/\/\u6839\u636e\u5f27\u5ea6\u65cb\u8f6c\u5c0f\u8f66\u5934\u90e8
\nthis.car.rotation = 180 * -angle \/ Math.PI;
\nthis.car.x = this.top_cx + Math.cos(angle) * this.radius;
\nthis.car.y = this.top_cy – Math.sin(angle) * this.radius;
\n} else {
\nthis.car.rotation = 180;
\nthis.car.x = this.left_x;
\nthis.car.y = this.top_cy;
\n}
\n}
\nprivate bottomRun() {
\nthis.cl += this.speed;
\nlet angle: number = this.cl \/ this.radius;
\nif (angle < Math.PI) { this.car.rotation = -(180 + 180 * angle \/ Math.PI); this.car.x = this.bot_cx – Math.cos(angle) * this.radius; this.car.y = this.bot_cy + Math.sin(angle) * this.radius; } else { this.car.rotation = 0; this.car.x = this.right_x; this.car.y = this.bot_cy; } } \/** * \u6839\u636ename\u5173\u952e\u5b57\u521b\u5efa\u4e00\u4e2aBitmap\u5bf9\u8c61\u3002name\u5c5e\u6027\u8bf7\u53c2\u8003resources\/resource.json\u914d\u7f6e\u6587\u4ef6\u7684\u5185\u5bb9\u3002 * 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) { let result = new egret.Bitmap(); let texture: egret.Texture = RES.getRes(name); result.texture = texture; return result; } \/** * \u63cf\u8ff0\u6587\u4ef6\u52a0\u8f7d\u6210\u529f\uff0c\u5f00\u59cb\u64ad\u653e\u52a8\u753b * Description file loading is successful, start to play the animation *\/ private startAnimation(result: string[]) { let parser = new egret.HtmlTextParser(); let textflowArr = result.map(text => parser.parse(text));
\nlet textfield = this.textfield;
\nlet count = -1;
\nlet change = () => {
\ncount++;
\nif (count >= textflowArr.length) {
\ncount = 0;
\n}
\nlet textFlow = textflowArr[count];<\/p>\n

\/\/ \u5207\u6362\u63cf\u8ff0\u5185\u5bb9
\n\/\/ Switch to described content
\ntextfield.textFlow = textFlow;
\nlet tw = egret.Tween.get(textfield);
\ntw.to({ “alpha”: 1 }, 200);
\ntw.wait(2000);
\ntw.to({ “alpha”: 0 }, 200);
\ntw.call(change, this);
\n};<\/p>\n

change();
\n}
\n}<\/p>\n

\u770b\u4e0b\u8fd0\u884c\u6548\u679c\uff1a<\/p>\n

\n