[游戏开发]白鹭引擎基本方法学习笔记

通过 x 和 y 属性访问修改显示对象的坐标位置

const shape: egret.Shape = new egret.Shape();
shape.x = 100;
shape.y = 20;

缩放功能

const shape: egret.Shape = new egret.Shape();
shape.scaleX = 0.5;
shape.scaleY = 0.5;

透明度的操作。显示对象的默认透明度为"1"，表示完全不透明

const shape: egret.Shape = new egret.Shape();
shape.alpha = 0.4;

旋转操作，旋转角度可通过 rotation 属性访问修改。将图中的矩形旋转30°，

const shape: egret.Shape = new egret.Shape();
shape.rotation = 30;

基本属性

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

基础方法

egret.Shape.anchorOffsetX = 50;//设置锚点位置

本地坐标和舞台坐标

创建容器（可能是画布）

//创建一个空的 DisplayObjectContainer，把它的 x 和 y 坐标都改为
        const container: egret.DisplayObjectContainer = 
                     new egret.DisplayObjectContainer();
        container.x = 200;
        container.y = 200;
        //容器添加到画板上。图形添加到容器上
        this.addChild(container);
        const circle: egret.Shape = new egret.Shape();
        container.addChild(circle); 

?注册事件

const circle: egret.Shape = new egret.Shape();
//增加点击事件
circle.touchEnabled = true;
circle.addEventListener(egret.TouchEvent.TOUCH_TAP, onClick, this);

egret.TouchEvent.TOUCH_BEGIN? 这个参数决定使用那个方法

TOUCH_MOVE? 触摸屏移动控制

TOUCH_END? 结束触摸的时候控制

TOUCH_BEGIN? 开始触摸的时候控制，在此方法内添加触摸控制，例如：

      //设定2个偏移量
        let offsetX: number;
        let offsetY: number;
        //画一个红色的圆
       const circle: egret.Shape = new egret.Shape();
       circle.graphics.beginFill(0xff0000);
        circle.graphics.drawCircle(25, 25, 25);
        circle.graphics.endFill();
        this.addChild(circle);

        //手指按到屏幕，触发 startMove 方法
        circle.touchEnabled = true;
        circle.addEventListener(egret.TouchEvent.TOUCH_BEGIN, startMove, this);
        //手指离开屏幕，触发 stopMove 方法
        circle.addEventListener(egret.TouchEvent.TOUCH_END, stopMove, this);

        function startMove(e: egret.TouchEvent): void {
            //计算手指和圆形的距离
            offsetX = e.stageX - circle.x;
            offsetY = e.stageY - circle.y;

            //手指在屏幕上移动，会触发 onMove 方法
            this.stage.addEventListener(egret.TouchEvent.TOUCH_MOVE, onMove, this);
        }

        function stopMove(e: egret.TouchEvent) {
            console.log(22);

            //手指离开屏幕，移除手指移动的监听
            this.stage.removeEventListener(egret.TouchEvent.TOUCH_MOVE, onMove, this);
        }

        function onMove(e: egret.TouchEvent): void {
            //通过计算手指在屏幕上的位置，计算当前对象的坐标，达到跟随手指移动的效果
            circle.x = e.stageX - offsetX;
            circle.y = e.stageY - offsetY;
            
        }

删除图形?this.removeChild(spr);

使用的?addChild()?方法会默认按照当前子对象深度进行排序，从0开始，每次深度加1，以此类推。

若要将某一个显示对象添加到一个指定深度的时候，需要使用?addChildAt()?方法。

资源配置，插入图片

class BitmapTest extends egret.DisplayObjectContainer {
    public constructor() {
        super();
        this.addEventListener(egret.Event.ADDED_TO_STAGE, this.onAddToStage, this);
    }
    private async onAddToStage(event: egret.Event) {
        RES.addEventListener(RES.ResourceEvent.GROUP_COMPLETE, this.onGroupComplete, this);
        await RES.loadConfig("resource/default.res.json", "resource/");
        await RES.loadGroup("preload");
    }
    private onGroupComplete() {
        const img: egret.Bitmap = new egret.Bitmap();
        img.texture = RES.getRes("bgImage");
        this.addChild(img);
    }
}

官方用例

多图片Json用例

碰撞检测：

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

使用

class HitTest extends egret.DisplayObjectContainer {
    public constructor() {
        super();
        this.addEventListener(egret.Event.ADDED_TO_STAGE, this.onAddToStage, this);
    }
    private onAddToStage(event: egret.Event) {
        this.drawText();
        const shp: egret.Shape = new egret.Shape();
        shp.graphics.beginFill(0xff0000);
        shp.graphics.drawRect(0, 0, 100, 100);
        shp.graphics.endFill();
        shp.width = 100;
        shp.height = 100;
        this.addChild(shp);
        const isHit: boolean = shp.hitTestPoint(10, 10);
        this.infoText.text = "isHit: " + isHit;
    }
    private infoText: egret.TextField;
    private drawText() {
        this.infoText = new egret.TextField();
        this.infoText.y = 200;
        this.infoText.text = "isHit";
        this.addChild(this.infoText);
    }
}

?显示碰到了，注：如果是不规则图形，会判断它外面的矩形包围盒是否碰撞，所以有时候看到没有碰到但还是返回true，建议使用const isHit: boolean = shp.hitTestPoint(x, y, true);