Egret 项目文件夹配置和基本容器动画
Posted allyh
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Egret 项目文件夹配置和基本容器动画相关的知识,希望对你有一定的参考价值。
Egret 项目文件夹配置和基本容器、动画:
class Main extends egret.DisplayObjectContainer { //src是resource codede 缩写,所有项目的源代码都放在该目录;新建项目会包含;两个文件 Main.ts默认入口文件; //LoadingUI.ts是加载过程辅助显示组建,用来显示加载进度; //项目配置文件:根目录下的egretProperties.json //libs 目录包含项目各个模块对应的所有类库 //bin-debug 目录包含项目 //项目资源文件目录: resource用来存放项目运行所需要的所有资源。包含图片(图片,声音等资源默认存放目录resource/assets)和配置文件,通常有资源清单文件,默认是resource.json。 //配置数据文件默认存放目录resource/config //项目发布:执行发布命令,会对项目编译文件和运行库文件进行整合压缩,合并为一个文件。命令:项目->发布。 //发布生成的文件会被存储在项目的release 目录,且根据发布类型存放,通常发布生成位于release/html5目录中,在一个时间戳(如143918484)命名的文件夹内。 //发布输出目录中,可以看到仅有3个js文件,所有的游戏逻辑和所需的运行库均被打包为一个game-min.js //采用的是TypeScript作为开发语言,一种标准的oop(面向对象编程)语言。 //typescript 官网文档:http://www.typescriptlang.org //快速调整代码格式:快捷 Alt + shift +F //快捷查询脚本 ctrl+P 选择内容查询ctrl+c ctrl+p private _txInfo: egret.TextField; private _bgInfo: egret.Shape; public constructor() { super(); this.once(egret.Event.ADDED_TO_STAGE, this.onAddToStage, this); } private onAddToStage(event: egret.Event) { //ImageLoader 类可用于加载图像(JPG、PNG 或 GIF)文件。 //使用 load() 方法来启动加载。被加载的图像对象数据将存储在 ImageLoader.data 属性上 。 var imgLoader: egret.ImageLoader = new egret.ImageLoader; imgLoader.addEventListener(egret.Event.COMPLETE, this.loadCompleteHandler, this); imgLoader.load("resource/assets/xd.png"); //绘制一个圆形 green var circle: egret.Shape = new egret.Shape(); circle.graphics.lineStyle(0, 0xffffff); circle.graphics.beginFill(0x00ff00, 0.8); circle.graphics.drawCircle(200, 200, 100);//x y r半径 circle.graphics.endFill(); this.addChild(circle);//添加到舞台 //圆形绘制 end } //显示图像 private bitmap: egret.Bitmap; private loadCompleteHandler(event: egret.Event): void { var imageLoader = <egret.ImageLoader>event.currentTarget; let texture = new egret.Texture(); texture._setBitmapData(imageLoader.data); // this.bitmap = new egret.Bitmap(texture); //bitmap的pos设定 this.bitmap.x = 100; this.bitmap.y = 100; //设置位图的尺寸 //this.bitmap.width=this.bitmap.height = 100; //缩放 this.bitmap.scaleX = this.bitmap.scaleY = 0.6; this.bitmap.rotation = 45;//旋转 //this.bitmap.x =this.bitmap.y = 100; this.addChild(this.bitmap); //为定位设置基准点 this.bitmap.anchorOffsetX = this.bitmap.width / 2; this.bitmap.anchorOffsetY = this.bitmap.height / 2; this.bitmap.x = this.stage.stageWidth * .5; this.bitmap.y = this.stage.stageHeight * .5; //文本 this._txInfo = new egret.TextField(); this.addChild(this._txInfo); //文本格式大小 this._txInfo.size = 30; //this._txInfo.width = this._txInfo.height = 30; //文本位置 this._txInfo.x = 50; this._txInfo.y = 50; this._txInfo.textAlign = egret.HorizontalAlign.LEFT;//文字对齐的方式 //注:若将文本的宽高,文本是无法正确使用对齐方式;若文本v不设置大小,则TextField会根据文字的内容自动计算出需要的宽高度 //在最初会对文本进行设置宽高,第二次则不会自动设置宽高度,所以可以在第二次手动进行宽高度的设置 //在第一次文本赋值前,进行设置文本的宽高度 //即在文本处理时,需要考虑位置和大小 //egret.HorizontalAlign.RIGHT; 其他对齐方式 //egret.VerticalAlign.TOP;egret.VerticalAlign.BOTTOM; this._txInfo.textColor = 0x00000;//设置文本颜色 16进制的颜色数值 this._txInfo.textColor = 0xFFFF00;//yellow //文字描边 this._txInfo.strokeColor = 0x0000ff;//颜色 this._txInfo.stroke = 2;//描边宽度 2个像素的宽度 //改变文字样式 this._txInfo.bold = true;//粗体 this._txInfo.italic = true;//斜体 //指定文本的字体:建议使用常见的字体,否则当查询不到所用字体的时候,会使用默认的字体s this._txInfo.fontFamily = "KaiTi"; //利用位图,在图片内作为自定义的字体,解决字体显示统一性的问题 [.fnt .png资源内容]房子在assets文件夹下 //.fnt 图片中各个字符的描述 //.png 字符或者数字等的图片 this._txInfo.alpha = 0.8; this._txInfo.type = egret.TextFieldType.DYNAMIC; this._txInfo.lineSpacing = 6; this._txInfo.text = "这是bitMap和TextField的显示"; //为文字添加背景 this._bgInfo = new egret.Shape; this.addChildAt(this._bgInfo, this.numChildren - 1); this._bgInfo.x = this._txInfo.x; this._bgInfo.y = this._txInfo.y; this._bgInfo.graphics.clear(); this._bgInfo.graphics.beginFill(0xffffff, .5);//参数:颜色,[透明度=可不写] this._bgInfo.graphics.drawRect(0, 0, this._txInfo.width, this._txInfo.height); this._bgInfo.graphics.endFill(); this.stage.addEventListener(egret.TouchEvent.TOUCH_BEGIN, (evt: egret.TouchEvent) => { this.bitmap.x = evt.localX; this.bitmap.y = evt.localY; }, this); this.bitmapAnimation(); } //动画 private bitmapAnimation(): void { var tw = egret.Tween.get(this.bitmap); //to(props: any, duration?: number, ease?: Function): Tween; 返回的类型是Tween //tw.to({ x: 280, y: 0 }, 500); //tw.to({x:280,y:300},500); //也可以写成 tw.to({ x: 280, y: 0 }, 500).to({ x: 280, y: 300 }, 500).to({ x: 0, y: 300 }, 500).to({ x: 0, y: 0 }, 500); tw.call(this.bitmapAnimation, this);//动画完成后的回调函数,实现循环播放动画的效果 } //舞台Stage的位置坐标体系:左上角为坐标原点;x轴正方向向右;y轴正方向向下; }
以上是关于Egret 项目文件夹配置和基本容器动画的主要内容,如果未能解决你的问题,请参考以下文章