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轴正方向向下；

}