Egret 滤镜

效果图如下:

在之前需要在资源文件.json下添加该文件进组,以便加载时可以一起加载.
Egret不能在使用时动态加载位图,只能在使用前加载.
Main.ts代码如下:

//Main.ts

class Main extends egret.DisplayObjectContainer {

    /**
     * 加载进度界面
     * Process interface loading
     */
    private loadingView: LoadingUI;

    public constructor() {
        super();
        this.addEventListener(egret.Event.ADDED_TO_STAGE, this.onAddToStage, this);
    }

    private onAddToStage(event: egret.Event) {

        egret.lifecycle.addLifecycleListener((context) => {
            // custom lifecycle plugin

            context.onUpdate = () => {
                console.log('hello,world')
            }
        })

        egret.lifecycle.onPause = () => {
            egret.ticker.pause();
        }

        egret.lifecycle.onResume = () => {
            egret.ticker.resume();
        }


        //设置加载进度界面
        //Config to load process interface
        this.loadingView = new LoadingUI();
        this.stage.addChild(this.loadingView);

        //初始化Resource资源加载库
        //initiate Resource loading library
        RES.addEventListener(RES.ResourceEvent.CONFIG_COMPLETE, this.onConfigComplete, this);
        RES.loadConfig("resource/default.res.json", "resource/");
    }

    /**
     * 配置文件加载完成,开始预加载preload资源组。
     * configuration file loading is completed, start to pre-load the preload resource group
     */
    private onConfigComplete(event: RES.ResourceEvent): void {
        RES.removeEventListener(RES.ResourceEvent.CONFIG_COMPLETE, this.onConfigComplete, this);
        RES.addEventListener(RES.ResourceEvent.GROUP_COMPLETE, this.onResourceLoadComplete, this);
        RES.addEventListener(RES.ResourceEvent.GROUP_LOAD_ERROR, this.onResourceLoadError, this);
        RES.addEventListener(RES.ResourceEvent.GROUP_PROGRESS, this.onResourceProgress, this);
        RES.addEventListener(RES.ResourceEvent.ITEM_LOAD_ERROR, this.onItemLoadError, this);
        RES.loadGroup("preload");
    }

    /**
     * preload资源组加载完成
     * Preload resource group is loaded
     */
    private onResourceLoadComplete(event: RES.ResourceEvent) {
        if (event.groupName == "preload") {
            this.stage.removeChild(this.loadingView);
            RES.removeEventListener(RES.ResourceEvent.GROUP_COMPLETE, this.onResourceLoadComplete, this);
            RES.removeEventListener(RES.ResourceEvent.GROUP_LOAD_ERROR, this.onResourceLoadError, this);
            RES.removeEventListener(RES.ResourceEvent.GROUP_PROGRESS, this.onResourceProgress, this);
            RES.removeEventListener(RES.ResourceEvent.ITEM_LOAD_ERROR, this.onItemLoadError, this);
            this.createGameScene();
        }
    }

    /**
     * 资源组加载出错
     *  The resource group loading failed
     */
    private onItemLoadError(event: RES.ResourceEvent) {
        console.warn("Url:" + event.resItem.url + " has failed to load");
    }

    /**
     * 资源组加载出错
     *  The resource group loading failed
     */
    private onResourceLoadError(event: RES.ResourceEvent) {
        //TODO
        console.warn("Group:" + event.groupName + " has failed to load");
        //忽略加载失败的项目
        //Ignore the loading failed projects
        this.onResourceLoadComplete(event);
    }

    /**
     * preload资源组加载进度
     * Loading process of preload resource group
     */
    private onResourceProgress(event: RES.ResourceEvent) {
        if (event.groupName == "preload") {
            this.loadingView.setProgress(event.itemsLoaded, event.itemsTotal);
        }
    }

    private textfield: egret.TextField;

    /**
     * 创建游戏场景
     * Create a game scene
     */
    private createGameScene() {
/*        let sky = this.createBitmapByName("bg_jpg");
        this.addChild(sky);
        let stageW = this.stage.stageWidth;
        let stageH = this.stage.stageHeight;
        sky.width = stageW;
        sky.height = stageH;

        let topMask = new egret.Shape();
        topMask.graphics.beginFill(0x000000, 0.5);
        topMask.graphics.drawRect(0, 0, stageW, 172);
        topMask.graphics.endFill();
        topMask.y = 33;
        this.addChild(topMask);

        let icon = this.createBitmapByName("egret_icon_png");
        this.addChild(icon);
        icon.x = 26;
        icon.y = 33;

        let line = new egret.Shape();
        line.graphics.lineStyle(2, 0xffffff);
        line.graphics.moveTo(0, 0);
        line.graphics.lineTo(0, 117);
        line.graphics.endFill();
        line.x = 172;
        line.y = 61;
        this.addChild(line);


        let colorLabel = new egret.TextField();
        colorLabel.textColor = 0xffffff;
        colorLabel.width = stageW - 172;
        colorLabel.textAlign = "center";
        colorLabel.text = "Hello Egret";
        colorLabel.size = 24;
        colorLabel.x = 172;
        colorLabel.y = 80;
        this.addChild(colorLabel);

        let textfield = new egret.TextField();
        this.addChild(textfield);
        textfield.alpha = 0;
        textfield.width = stageW - 172;
        textfield.textAlign = egret.HorizontalAlign.CENTER;
        textfield.size = 24;
        textfield.textColor = 0xffffff;
        textfield.x = 172;
        textfield.y = 135;
        this.textfield = textfield;*/

        //根据name关键字,异步获取一个json配置文件,name属性请参考resources/resource.json配置文件的内容。
        // Get asynchronously a json configuration file according to name keyword. As for the property of name please refer to the configuration file of resources/resource.json.
        let qb=this.createBitmapByName('cartoon-egret_00_png');
        this.addChild(qb);
        qb.y=100;

        let qb1=this.createBitmapByName('cartoon-egret_00_png');
        this.addChild(qb1);
        qb1.y=100;
        qb1.x=300;

        this.applyGlowFilter(qb1);
        //RES.getResAsync("description_json", this.startAnimation, this)
    }
    private applyGlowFilter(disp:egret.DisplayObject):void{
        var color:number=0x33CCFF;
        //光晕的颜色
        var alpha:number=0.8;
        //透明度
        var blurX:number=35;//水平模糊量
        var blurY:number=35;//垂直模糊量
        var strength:number=2;//压印的强度,值越大,压印的颜色越深
        var quality:number=egret.BitmapFilterQuality.HIGH;//应用滤镜的次数
        var inner:boolean=false;//制定发光是否为内侧发光
        var knockout:boolean=false;//指定对象是否具有挖空效果
        var glowFilter:egret.GlowFilter=new egret.GlowFilter(color,alpha,blurX,blurY,strength,quality,inner,knockout);
        disp.filters=[glowFilter]; 
    }
    /**
     * 根据name关键字创建一个Bitmap对象。name属性请参考resources/resource.json配置文件的内容。
     * 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;
    }

    /**
     * 描述文件加载成功,开始播放动画
     * 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));
        let textfield = this.textfield;
        let count = -1;
        let change = () => {
            count++;
            if (count >= textflowArr.length) {
                count = 0;
            }
            let textFlow = textflowArr[count];

            // 切换描述内容
            // Switch to described content
            textfield.textFlow = textFlow;
            let tw = egret.Tween.get(textfield);
            tw.to({ "alpha": 1 }, 200);
            tw.wait(2000);
            tw.to({ "alpha": 0 }, 200);
            tw.call(change, this);
        };

        change();
    }
}



Egret事件

先贴跟随书上的问题代码:
项目截图:
Aaron
代码:

//Circle.ts
class Circle extends egret.Sprite{
    public constructor(cx:number,cy:number,cr:number){
        super();
        this.init(cx,cy,cr);
    }
    private shape:egret.Shape;
    private shapex:number;
    private shapey:number;
    private shaper:number;
    private color:number;
    public static Event_Click:string="event_click";
    private colorList = [13408665, 16777113, 6710937, 16750848, 16776960, 39372, 13421721, 13382553, 10079232, 16737894, 16776960, 3381708, 13395456, 10066329, 13421619, 16750899, 16777164, 39219, 39372, 13421772, 16737894, 16737792, 16777062, 39270, 13395507, 16764057, 13395456, 13369446, 39321, 16763955];
    private randmColor():number{
        return this.colorList[Math.round(Math.random()*this.colorList.length)];
    }
    private init(cx:number,cy:number,cr:number){
        this.color=this.randmColor();
        this.shape=new egret.Shape();
        this.shape.graphics.beginFill(this.color);
        this.shape.graphics.drawCircle(0,0,cr);
        this.shape.graphics.endFill();
        //设定矢量圆的位置为父类中心点
        this.shape.x=-cr;
        this.shape.y=-cr;

        this.shapex=cx;
        this.shapey=cy;
        this.shaper=cr;
        this.touchEnabled=!0;

        //侦听用户的移动与触摸事件
        this.addEventListener(egret.TouchEvent.TOUCH_TAP,this.onTouch,this,!1);
        this.addChild(this.shape);
        this.x=cx;
        this.y=cy;
    }
    private onTouch(e:egret.TouchEvent):void{
        var par=this.parent;
        par.dispatchEventWith(Circle.Event_Click,false,this.color);
        this.touchEnabled=!1;
        var tween:egret.Tween=egret.Tween.get(this);
        tween.to({alpha:0.1},500,egret.Ease.sineOut);
        tween.call(function(){
            this.visible=!1;
            par.removeChild(this);
            this.removeEventListener(egret.TouchEvent.TOUCH_TAP,this.onTouch,this);
        },this);

        var circleList:Circle[]=[];
        var tweenList:egret.Tween[]=[];
        var redius:number=this.shaper>>1;
        var tempx:number;
        var tempy:number;
        var tempr:number;

        var g:number=0;
        for(var i:number=0;i<2;++i){
            for(var t:number=0;t<2;++t){
                tempx=this.shapex-this.shaper+redius*2*t;
                tempy=this.shapey-this.shaper+redius*2*i;
                circleList[g]=new Circle(tempx,tempy,redius);
                circleList[g].alpha=0.1;
                circleList[g].scaleX=0.8;
                circleList[g].scaleY=0.8;
                par.addChild(circleList[g]);
                tweenList[g]=egret.Tween.get(circleList[g]);
                tweenList[g].to({alpha:1,scaleX:1,scaleY:1},1000,egret.Ease.sineIn);
                g++;
            }
        }

    }
}

//Main.ts
    public constructor() {
        super();
        this.addEventListener(egret.Event.ADDED_TO_STAGE, this.onAddToStage, this);
        this.addEventListener(Circle.Event_Click,this.onClickCircle,this);
    }

    private textCount:egret.TextField;
    private textTimer:egret.TextField;
    private textDes:egret.TextField;
    private timer:egret.Timer;
    private color:number; 

    private onAddToStage(event: egret.Event) {
        var stageW:number=this.stage.stageWidth;
        var stageH:number=this.stage.stageHeight;

        var bg=new egret.Shape();
        bg.graphics.beginFill(0xfccfcc);
        bg.graphics.drawRect(0,0,stageW,stageH);
        bg.graphics.endFill();

        this.textCount=new egret.TextField();
        this.textCount.textColor=0xffffff;
        this.textCount.y=630;
        this.textCount.text="分数 : 0";

        this.textTimer=new egret.TextField();
        this.textTimer.textColor=0xffffff;
        this.textTimer.y=720;
        this.textTimer.text="倒计时";

        this.textDes=new egret.TextField();
        this.textDes.text="点击第一个颜色开始";
        this.textDes.y=800;

        this.textCount.textAlign=
            this.textTimer.textAlign=
                this.textDes.textAlign=
                    egret.HorizontalAlign.CENTER;

        this.textCount.width=
            this.textDes.width=
                this.textTimer.width=stageW;

        this.textCount.textColor=
            this.textDes.textColor=
                this.textTimer.textColor=0x000000;

        this.addChild(bg);
        this.addChild(this.textCount);
        this.addChild(this.textDes);
        this.addChild(this.textTimer);

        this.timer=new egret.Timer(1000,30);
        this.timer.addEventListener(egret.TimerEvent.TIMER,this.onTimer,this);
        this.timer.addEventListener(egret.TimerEvent.TIMER_COMPLETE,this.onTimerComplete,this);

        var radius:number=60;
        for(var i:number=0;i<4;++i){
            for(var t:number=0;t<4;++t){
                var tempx:number=200+radius*2*t;
                var tempy:number=190+radius*2*i;
                var circle:Circle=new Circle(tempx,tempy,radius);
                this.addChild(circle);
            }
        }
    }

    private count:number=0;
    private onClickCircle(e:any):void{
        //e是触发时的事件对象
        console.log(e,this.color,"   ",e.data);
        if(this.count==0){
            this.color=e.data;
            //console.log(e,"   ",e.data);
            this.textCount.text="分数 : "+(++this.count);
            this.timer.start();
        }else if(this.color==e.data){
            this.textCount.text="分数 : "+(++this.count);
        }
    }

    private onTimer(e:egret.TimerEvent):void{
        this.textTimer.text="倒计时 : "+(this.timer.repeatCount-this.timer.currentCount);
    }

    private onTimerComplete(e:egret.TimerEvent):void{
        this.textDes.text="这不是极限,刷新再来一次! ";
        this.removeEventListener(Circle.Event_Click,this.onClickCircle,this);
    }

其中我不解的是

e:any

e.data

为什么是color:number类型的.所以准备系统搞一遍Event.

————

1.开始…
首先是构造函数中的三个参数,type、bubbles和cancelable。

type:触发事件的类型.
bubbles:是指定事件是否参与事件流的冒泡阶段,关于事件流,会在后面的小节中介绍。
cancelable:表示是否要取消Event对象。

这里我们用约会的例子来说明一下.
首先定义一个约会的类:

    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);
        }
    }

其中

static DATE:string

代表DATE事件.

————

2.侦听器
事件侦听器也就是事件的处理者,负责接收事件携带的信息,并在接收到该事件后执行特定的代码。
Egret中,事件的侦听器必须是一个函数。事件的发送者必须是 egret.EventDispatcher 类或者子类的实例。只有事件发送者才能侦听事件,并且可以 注册侦听器。
注册侦听器:addEventListener().

侦听器的定义:

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

type: 事件类型.
listener: 用来处理事件的侦听器,即函数.
thisObject: this即可.
注册侦听器:
事件发送者.addEventListener(事件类型, 侦听器, this);
移除侦听器:
事件发送者.removeEventListener(事件类型, 侦听器, this);
最后一个 priority 参数的设置即侦听器的优先级.
而 侦听器 有一个参数是 e:Event.或者 e:any.
e.data
即为发送过来的数据.
在项目中 Circle 有这样一个句:

par.dispatchEventWith(Circle.Event_Click,false,this.color);

即当事件触发时 打包发送 this.color.
将其改为 0Xffffff 试试:

果然如此.
问题解决!

Egret学习笔记

【添加与显示对象】

1.同一个显示对象只能被添加一次,无论添加多少次只显示最后一个.
2.删除对象是用父对象.removeChild(显示对象),即被删除对象必须有父级对象.
3.判断是否有父级对象存在:

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

【深度管理】

1.比较像html中的z-index
2.如果想在一个容器的某个深度添加子节点对象时,要用:

容器.addChildAt( 显示对象, 深度值 )

这就很像在队列中插入一个元素:

3.删除某深度的子对象:

容器.removeChildAt( 深度值 )

4.删除掉所有对象:

容器.removeChildren();

5.交换不同对象:

容器.swapChildren( 显示对象, 显示对象 )

容器.swapChildrenAt( 深度值, 深度值 )

6.重设深度值:

容器.setChildIndex( 显示对象, 新的深度值 );

【访问容器子对象】

1.通过深度获取:

容器.getChildAt( 深度值 );

2.设置灰度值:

对象.alpha = 0.5;

3.通过name值获取:
设置name的方法:

对象.name="";

获取方法:

容器.getChildByName("");

4.方法对比后还是通过深度获取效率更好.