egret 学习笔记

准备

1. EgretLauncher
2. EgretLauncher 中安装引擎
3. EgretLauncher 中安装 Egret Compiler

基础说明

各文件夹说明

• .wing：包括 Egret 项目的任务配置文件和启动配置文件。
• wingProperties.json：Egret Wing 项目配置文件。
• bin-debug：项目调试时，所产生的文件存放于此目录。
• libs：库文件，包括 Egret 核心库和其他扩展库存放于此目录。
• resource：项目资源文件存放于此目录。
• scripts：项目构建和发布时需要用到的脚本文件存放在此目录。
• src：项目代码文件存放于此目录。
• template：项目模板文件存放于此目录。
• egretProperties.json：项目的配置文件。具体的配置说明可以参考：EgretProperties说明
• index.html：入口文件。具体的配置说明可以参考：入口文件说明
• manifest.json：网页清单文件。
• tsconfig.json：typescript 编译配置文件。

命令行

代码语言：txt复制

    1、运行名为【HelloWorld】的一个项目
    egret run HelloWorld
    2、编译名为【HelloWorld】的一个项目
    egret build HelloWorld

• create 创建新项目 create project_name [--type core|eui]
• create_lib 创建新第三方库项目 egret create_lib lib_name
• create_app 从h5游戏生成app egret create_app app_name -f h5_game_path -t template_path
• build 构建指定项目 egret build [project_name] [-e] [--target wxgame|bricks|ios|android]
• publish 发布项目 egret publish [project_name] [--version [version]] [--target wxgame|bricks|ios|android]
• run 启动本地服务器,并在默认浏览器中运行指定项目 egret run [project_name] [--port 3000]
• clean 重置项目中的引擎代码 egret clean [project_name]
• upgrade 升级项目代码 egret upgrade [project_name] --egretversion [target version]
• make 修改引擎源码后，编译引擎源码。如果没有特殊需求，不建议普通用户使用
• info 获得Egret信息，如当前Egret版本，以及安装路径
• help 了解各个 command 的细节 egret help [command]

入口文件 index.html

代码语言：txt复制

<div style="margin: auto;width: 100%;height: 100%;" class="egret-player"
	 data-entry-class="Main"
	 data-orientation="auto"
	 data-scale-mode="showAll"
	 data-frame-rate="30"
	 data-content-width="640"
	 data-content-height="1136"
	 data-multi-fingered="2"
	 data-show-fps="false" data-show-log="false"
	 data-show-fps-style="x:0,y:0,size:12,textColor:0xffffff,bgAlpha:0.9">
</div>

开发说明

显示对象

视觉图像，全部基于 DisplayObject 扩展。

属性

• alpha：透明度
• width：宽度
• height：高度
• rotation：旋转角度
• scaleX：横向缩放
• scaleY：纵向缩放
• skewX：横向斜切
• skewY：纵向斜切
• visible：是否可见
• x：X轴坐标值
• y：Y轴坐标值
• anchorOffsetX：对象绝对锚点X
• anchorOffsetY：对象绝对锚点Y

核心显示类

类	描述
DisplayObject	显示对象基类，所有显示对象均继承自此类
Bitmap	位图，用来显示图片
Shape	用来显示矢量图，可以使用其中的方法绘制矢量图形
TextField	文本类
BitmapText	位图文本类
DisplayObjectContainer	显示对象容器接口，所有显示对象容器均实现此接口
Sprite	带有矢量绘制功能的显示容器
Stage	舞台类

扩展

代码语言：txt复制

    class MyGrid extends egret.Shape{
        public constructor(){
            super();
            this.drawGrid();
        }
        private drawGrid(){
            this.graphics.beginFill( 0x0000ff );
            this.graphics.drawRect( 0, 0, 50,50 );
            this.graphics.endFill();
            this.graphics.beginFill( 0x0000ff );
            this.graphics.drawRect( 50, 50, 50, 50);
            this.graphics.endFill();
            this.graphics.beginFill( 0xff0000 );
            this.graphics.drawRect( 50, 0, 50,50 );
            this.graphics.endFill();
            this.graphics.beginFill( 0xff0000 );
            this.graphics.drawRect( 0, 50, 50,50 );
            this.graphics.endFill();               
        }
    }

显示容器

继承自 DisplayObjectContainer > DisplayObject。

常用操作

• 添加、删除子对象
• 访问子对象
• 检测子对象
• 设置叠放次序

常用容器 Sprite

Sprite 继承自 DisplayObjectContainer，添加了 Graphics 功能。

自定义容器

代码语言：txt复制

    class GridSprite extends egret.Sprite
    {
        public constructor()
        {
            super();
            this.drawGrid();
        }
        private drawGrid()
        {
            this.graphics.beginFill( 0x0000ff );
            this.graphics.drawRect( 0, 0, 50,50 );
            this.graphics.endFill();
            this.graphics.beginFill( 0x0000ff );
            this.graphics.drawRect( 50, 50, 50, 50);
            this.graphics.endFill();
            this.graphics.beginFill( 0xff0000 );
            this.graphics.drawRect( 50, 0, 50,50 );
            this.graphics.endFill();
            this.graphics.beginFill( 0xff0000 );
            this.graphics.drawRect( 0, 50, 50,50 );
            this.graphics.endFill();
        }
    }

变换操作

• 锚点: anchorOffsetX、anchorOffsetY
• 位置和平移: x、y
• 尺寸: width、height、scaleX、scaleY
• 旋转: rotation
• 斜切: skewX、skewX

显示列表

代码语言：txt复制

	/* 建立显示对象 */
    var spr:egret.Sprite = new egret.Sprite();
    spr.graphics.beginFill( 0x00ff00 );
    spr.graphics.drawRect(0, 0, 100, 100);
    spr.graphics.endFill();
	
	/* 添加显示对象 */
	this.addChild( spr );
	
	/* 删除显示对象 */
	this.removeChild( spr );

删除显示对象时，其必须有父级

代码语言：txt复制

    if( spr.parent ) {
        spr.parent.removeChild( spr );
    }

管理子对象

• 获取子对象的数量: 容器.numChildren
• 添加到指定位置: addChildAt()
• 删除指定子对象: removeChild(obj)
• 删除指定深度: removeChildAt(num)
• 删除所有子对象: removeChildren()
• 交换不同深度对象: swapChildren(A, B)、swapChildrenAt(numA, numB)
• 访问子对象: getChildAt(num)、getChildByName(obj.name)
• 重设子对象深度: setChildIndex(obj, num)
• 重设子对象深度(更高效): zIndex, 需要容器包含 sortableChildren = true

矢量绘图

矩形

代码语言：txt复制

    class GraphicsTest extends egret.DisplayObjectContainer
    {
        public constructor()
        {
            super();
            this.addEventListener(egret.Event.ADDED_TO_STAGE,this.onAddToStage,this);
        }
        private onAddToStage(event:egret.Event)
        {
            var shp:egret.Shape = new egret.Shape();
			
			shp.x = 20;
			shp.y = 20;
			
			shp.graphics.lineStyle( 10, 0x00ff00 );

            shp.graphics.beginFill( 0xff0000, 1);
            shp.graphics.drawRect( 0, 0, 100, 200 );
            shp.graphics.endFill();
            this.addChild( shp );
        }
    }

圆形

代码语言：txt复制

    drawCircle( x:number, y:number, radius:number): void

直线

代码语言：txt复制

    moveTo( x:number, y:number): void
    lineTo( x:number, y:number): void

曲线

代码语言：txt复制

    curveTo( x1:number, y1:number, x2:number, y2:number ): void

圆弧

代码语言：txt复制

    drawArc( x:number, y:number, radius:number, startAngle:number, endAngle:number, anticlockwise:boolean ):void

清空绘图

代码语言：txt复制

    shp.graphics.clear();

遮罩

形状遮罩

代码语言：txt复制

    shp.mask = new egret.Rectangle(20,20,30,50);

对象遮罩

代码语言：txt复制

	mySprite.mask = maskSprite;

碰撞

矩形碰撞

代码语言：txt复制

    var isHit:boolean = shp.hitTestPoint( x: number, y:number );

像素碰撞

代码语言：txt复制

    var isHit:boolean = shp.hitTestPoint( x: number, y:number, true:boolean );

矩形碰撞检测，是判断显示对象的包围盒是否与一点相交；而像素碰撞检测，是判断显示对象的图案（非透明区域）是否与一点相交。

文本

代码语言：txt复制

    var label:egret.TextField = new egret.TextField(); 
    label.text = "This is a text!"; 
    this.addChild( label );

输入文本

代码语言：txt复制

	var txInput:egret.TextField = new egret.TextField();
    txInput.type = egret.TextFieldType.INPUT;
	txInput.inputType = egret.TextFieldInputType.TEXT; // PASSWORD | TEL
	txInput.setFocus();

位图文本

代码语言：txt复制

    class Main extends egret.DisplayObjectContainer {
        public constructor() {
            super();
            this.once( egret.Event.ADDED_TO_STAGE, this.onAddToStage, this );
        }
        private onAddToStage( evt:egret.Event ) {
            RES.getResByUrl( "resource/cartoon-font.fnt", this.onLoadComplete, this, RES.ResourceItem.TYPE_FONT );
        }
        private _bitmapText:egret.BitmapText;
        private onLoadComplete( font:egret.BitmapFont ):void {
            this._bitmapText = new egret.BitmapText();
            this._bitmapText.font = font;
            this._bitmapText.x = 50;
            this._bitmapText.y = 300;
            this.addChild( this._bitmapText );
        }
    }

事件

控制类

代码语言：txt复制

    class SampleDate extends egret.DisplayObjectContainer
    {
        public constructor()
        {
            super();
            //创建一个男朋友
            var boy:Boy = new Boy();
            boy.name = "男朋友";
            //创建一个女朋友
            var girl:Girl = new Girl();
            girl.name = "女朋友";
            //注册侦听器
            boy.addEventListener(DateEvent.DATE,girl.getDate,girl);
            //男朋友发送要求
            boy.order();
            //约会邀请完成后，移除侦听器
            boy.removeEventListener(DateEvent.DATE,girl.getDate,girl);
        }
    }

发起类

代码语言：txt复制

    class Boy extends egret.Sprite
    {
        public constructor()
        {
            super();
        }
        public order()
        {
            //生成约会事件对象
            var daterEvent:DateEvent = new DateEvent(DateEvent.DATE);
            //添加对应的约会信息
            daterEvent._year = 2014;
            daterEvent._month = 8;
            daterEvent._date = 2;
            daterEvent._where = "肯德基";
            daterEvent._todo = "共进晚餐";
            //发送要求事件
            this.dispatchEvent(daterEvent);
        }
    }

监听类

代码语言：txt复制

    class Girl extends egret.Sprite
    {
        public constructor()
        {
            super();
        }
        public getDate(evt:DateEvent)
        {
            console.log("得到了"   evt.target.name   "的邀请！" );
            console.log("会在"   evt._year   "年"   evt._month   "月"   evt._date   "日，在"  evt._where  evt._todo);
        }
    }

事件定义

代码语言：txt复制

    class DateEvent extends egret.Event
    {
        public static DATE:string = "约会";
        public _year:number = 0;
        public _month:number = 0;
        public _date:number = 0;
        public _where:string = "";
        public _todo:string = "";
        public constructor(type:string, bubbles:boolean=false, cancelable:boolean=false)
        {
            super(type,bubbles,cancelable);
        }
    }

监听器

代码语言：txt复制

    listenerName(evt:Event):void {...}

	事件发送者.addEventListener(事件类型, 侦听器, this);
		
	事件发送者.removeEventListener(事件类型, 侦听器, this);
	
	事件发送者.hasEventListener(事件类型);
			
	显示对象实例.touchEnabled = true;.hasEventListener(事件类型);

事件优先级

代码语言：txt复制

    public addEventListener(type:string, listener:Function, thisObject:any, useCapture:boolean = false, priority:number = 0)

触摸事件 egret.TouchEvent

• TOUCH_BEGIN：当用户第一次触摸启用触摸的设备时（例如，用手指触摸配有触摸屏的移动电话或平板电脑）触发
• TOUCH_CANCEL：由于某个事件取消了触摸时触发
• TOUCH_END：当用户移除与启用触摸的设备的接触时（例如，将手指从配有触摸屏的移动电话或平板电脑上抬起）触发
• TOUCH_MOVE：当用户触碰设备并移动时进行触发，而且会连续触发，直到接触点被删除
• TOUCH_TAP：当用户在触摸设备上与开始触摸的同一 DisplayObject 实例上抬起接触点时触发（相当与点击事件）

网络

发送请求

代码语言：txt复制

    /**
     * 下面的示例使用 egret.HttpRequest 类进行网络通信。
     */
    class Main extends egret.DisplayObjectContainer {
        private statusGetLabel:egret.TextField;
        private statusPostLabel:egret.TextField;
        public constructor() {
            super();
            this.sendGetRequest();
            this.sendPostRequest();
        }
        private sendGetRequest():void {
            var statusGetLabel = new egret.TextField();
            this.statusGetLabel = statusGetLabel;
            statusGetLabel.size = 18;
            statusGetLabel.text = "GET request being sent to httpbin.org";
            this.addChild(statusGetLabel);
            statusGetLabel.x = 50;
            statusGetLabel.y = 40;
            var params = "?p1=getP1&p2=getP2";
            var request = new egret.HttpRequest();
            request.responseType = egret.HttpResponseType.TEXT;
            request.open("php/get_test.php" params,egret.HttpMethod.GET);
            request.send();
            request.addEventListener(egret.Event.COMPLETE,this.onGetComplete,this);
            request.addEventListener(egret.IOErrorEvent.IO_ERROR,this.onGetIOError,this);
            request.addEventListener(egret.ProgressEvent.PROGRESS,this.onGetProgress,this);
        }
        private onGetComplete(event:egret.Event):void {
            var request = <egret.HttpRequest>event.currentTarget;
            console.log("get data : ",request.response);
            var responseLabel = new egret.TextField();
            responseLabel.size = 18;
            responseLabel.text = "GET response: n"   request.response.substring(0, 50)   "...";
            this.addChild(responseLabel);
            responseLabel.x = 50;
            responseLabel.y = 70;
            this.statusGetLabel.text = "Get GET response!";
        }
        private onGetIOError(event:egret.IOErrorEvent):void {
            console.log("get error : "   event);
        }
        private onGetProgress(event:egret.ProgressEvent):void {
            console.log("get progress : "   Math.floor(100*event.bytesLoaded/event.bytesTotal)   "%");
        }
        private sendPostRequest() {
            var statusPostLabel = new egret.TextField();
            this.statusPostLabel = statusPostLabel;
            this.addChild(statusPostLabel);
            statusPostLabel.size = 18;
            statusPostLabel.x = 300;
            statusPostLabel.y = 40;
            statusPostLabel.text = "Sending POST request to httpbin.org";
            var params = "p1=postP1&p2=postP2";
            var request = new egret.HttpRequest();
            request.responseType = egret.HttpResponseType.TEXT;
            request.open("php/post_test.php",egret.HttpMethod.POST);
            request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            request.send(params);
            request.addEventListener(egret.Event.COMPLETE,this.onPostComplete,this);
            request.addEventListener(egret.IOErrorEvent.IO_ERROR,this.onPostIOError,this);
            request.addEventListener(egret.ProgressEvent.PROGRESS,this.onPostProgress,this);
        }
        private onPostComplete(event:egret.Event) {
            var request = <egret.HttpRequest>event.currentTarget;
            console.log("post data : ",request.response);
            var responseLabel = new egret.TextField();
            responseLabel.size = 18;
            responseLabel.text = "POST response:n"   request.response.substring(0, 50)   "...";
            this.addChild(responseLabel);
            responseLabel.x = 300;
            responseLabel.y = 70;
            this.statusPostLabel.text = "Get POST response!";
        }
        private onPostIOError(event:egret.IOErrorEvent):void {
            console.log("post error : "   event);
        }
        private onPostProgress(event:egret.ProgressEvent):void {
            console.log("post progress : "   Math.floor(100*event.bytesLoaded/event.bytesTotal)   "%");
        }
    }

请求位图

代码语言：txt复制

    var imgLoader:egret.ImageLoader = new egret.ImageLoader;
    imgLoader.once( egret.Event.COMPLETE, this.imgLoadHandler, this ); 
    imgLoader.load( "resource/egret.png" );

代码语言：txt复制

    imgLoadHandler( evt:egret.Event ):void{
        let loader:egret.ImageLoader = evt.currentTarget;
        let bmd:egret.BitmapData = loader.data;
        //创建纹理对象
        let texture = new egret.Texture();
        texture.bitmapData = bmd;
        let bmp:egret.Bitmap = new egret.Bitmap(texture);
        this.addChild(bmp);
    }

• 服务器设置访问权限。
• 可以通过尝试修改 imgLoader.crossOrigin = 'anonymous' 来以匿名的方式访问。不过在使用 texture.toDataURL 时会报跨域问题。
• Webgl 渲染下，暂不支持跨域图片处理。

加载文本

代码语言：txt复制

    var url = "resource/config/description.json";
    var  request:egret.HttpRequest = new egret.HttpRequest();
    var respHandler = function( evt:egret.Event ):void{
       switch ( evt.type ){
           case egret.Event.COMPLETE:
               var request:egret.HttpRequest = evt.currentTarget;
               console.log( "respHandler:n", request.response );
               break;
           case egret.IOErrorEvent.IO_ERROR:
               console.log( "respHandler io error" );
               break;
       }
    }
    var progressHandler = function( evt:egret.ProgressEvent ):void{
       console.log( "progress:", evt.bytesLoaded, evt.bytesTotal );
    }
    request.once( egret.Event.COMPLETE, respHandler, null);
    request.once( egret.IOErrorEvent.IO_ERROR, respHandler, null);
    request.once( egret.ProgressEvent.PROGRESS, progressHandler, null);
    request.open( url, egret.HttpMethod.GET ); 
    request.send( );

加载二进制

代码语言：txt复制

    var url = "resource/assets/egret_icon.png";
    var  request:egret.HttpRequest = new egret.HttpRequest();
    request.responseType = egret.HttpResponseType.ARRAY_BUFFER;
    var respHandler = function( evt:egret.Event ):void {
       switch ( evt.type ){
           case egret.Event.COMPLETE:
               var request:egret.HttpRequest = evt.currentTarget;
               var ab:ArrayBuffer = request.response;
               console.log( "respHandler:n", ab.byteLength );
               break;
           case egret.IOErrorEvent.IO_ERROR:
               console.log( "respHandler io error" );
               break;
       }
    }
    request.once( egret.Event.COMPLETE, respHandler, null);
    request.once( egret.IOErrorEvent.IO_ERROR, respHandler, null);
    request.open( url, egret.HttpMethod.GET );
    request.send( );

时间控制 Timer

代码语言：txt复制

    class TimerDemo extends egret.DisplayObjectContainer
    {
        public constructor()
        {
            super();
            //创建一个计时器对象
            var timer:egret.Timer = new egret.Timer(500,5);
            //注册事件侦听器
            timer.addEventListener(egret.TimerEvent.TIMER,this.timerFunc,this);
            timer.addEventListener(egret.TimerEvent.TIMER_COMPLETE,this.timerComFunc,this);
            //开始计时
            timer.start();
        }
        private timerFunc()
        {
            console.log("计时");
        }
        private timerComFunc()
        {
            console.log("计时结束");
        }
    }

心跳

代码语言：txt复制

    class startTickerTest extends egret.DisplayObjectContainer {
        public constructor() {
            super();
            this.once(egret.Event.ADDED_TO_STAGE,this.onLoad,this);
        }
        private star:egret.Bitmap;
        private speed:number = 0.05;
        private time:number = 0;
        private onLoad(event:egret.Event) {
            var star:egret.Bitmap = new egret.Bitmap(RES.getRes("star"));
            this.addChild(star);
            this.star = star;
            this.time = egret.getTimer();
            egret.startTick(this.moveStar,this);
        }
        private moveStar(timeStamp:number):boolean {
            var now = timeStamp;
            var time = this.time;
            var pass = now - time;
            console.log("moveStar: ",(1000 / pass).toFixed(5));
            this.time = now;
            return false;
        }
    }

帧事件

代码语言：txt复制

    class startTickerTest extends egret.DisplayObjectContainer {
        public constructor() {
            super();
            this.once(egret.Event.ADDED_TO_STAGE,this.onLoad,this);
        }
        private timeOnEnterFrame:number = 0;
        private onLoad(event:egret.Event) {
            this.addEventListener(egret.Event.ENTER_FRAME,this.onEnterFrame,this);
            this.timeOnEnterFrame = egret.getTimer();
        }
        private  onEnterFrame(e:egret.Event){  
            var now = egret.getTimer();
            var time = this.timeOnEnterFrame;
            var pass = now - time;
            console.log("onEnterFrame: ", (1000 / pass).toFixed(5));
            this.timeOnEnterFrame = egret.getTimer();
        }
    }

多媒体

javascript 游戏解决方案 html5

0 人点赞