欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

Egret Engine（一）：设备重力感应，方向、速度监听

程序员文章站 2022-05-04 11:56:14
来吧，展示主要属性函数定义egret主要方法//创建 DeviceOrientation 类private orientation = new egret.DeviceOrientation();//添加事件监听器 设备方向改变时派发this.orientation.addEventListener(egret.Event.CHANGE, this.onOrientation, this);//开始监听设备方向变化this.orientation.start();// 停止设备监听事件...

来吧，展示

Egret Engine（一）：设备重力感应，方向、速度监听

主要属性函数定义

egret主要方法

//创建 DeviceOrientation 类
private orientation = new egret.DeviceOrientation();
//添加事件监听器 设备方向改变时派发
this.orientation.addEventListener(egret.Event.CHANGE, this.onOrientation, this);
//开始监听设备方向变化
this.orientation.start();
// 停止设备监听事件
this.orientation.stop();

//创建 Motion 类
private motion = new egret.Motion();
//添加事件监听器
this.motion.addEventListener(egret.Event.CHANGE, this.onMotion, this);
//开始监听设备方向变化
this.motion.start();
// 停止设备监听事件
this.motion.stop();

监听主要字段

  • onOrientation(e: egret.OrientationEvent){/*code*/}
// 在alpha,beta和gamma三个轴向的角度信息
e.beta // (β)绕 X 轴的角度
e.gamma // (γ)绕 Y 轴的角度
e.alpha // (α)绕 Z 轴的角度
  • onMotion(e: egret.MotionEvent) {/*code*/}
// acceleration 
// 表示设备在 X Y Z 轴方将的加速度信息
// 单位是 m/s2
// 不包含重力
const acc = e.acceleration;
acc.x // X 轴方向的加速度
acc.y // Y 轴方向的加速度
acc.z // Z 轴方向的加速度

// accelerationIncludingGravity 
// 表示设备在 X Y Z 轴方将的加速度信息
// 单位是 m/s2
// 包含重力
const accig = e.accelerationIncludingGravity;
accig.x // X 轴方向的加速度
accig.y // Y 轴方向的加速度
accig.z // Z 轴方向的加速度

// rotationRate 
// 表示设备在 alpha、 beta 和 gamma 三个轴向的角速度信息
// 单位是 角度每秒
const rr = e.rotationRate;
rr.beta // (β)绕 X 轴的角速度
rr.gamma // (γ)绕 Y 轴的角速度
rr.alpha // (α)绕 Z 轴的角速度

创建按钮启动停止监听

  • 在游戏场景中创建可滚动窗口并将定义的空间容器加入到滚动窗口中
// 容器 所有控件都放到这个容器
private container: egret.DisplayObjectContainer = new egret.DisplayObjectContainer();

let stageW = this.stage.stageWidth;
let stageH = this.stage.stageHeight;

const scrollView: egret.ScrollView = new egret.ScrollView();
scrollView.setContent(this.container);
scrollView.width = stageW;
scrollView.height = stageH;
this.addChild(scrollView);
  • 创建按钮加入到container容器中,并配置点击事件
/**
 * 创建开始停止按钮
 */
private createStartOrStopBtn(stageW) {
    const btnGroup: egret.DisplayObjectContainer = new egret.DisplayObjectContainer();
    this.container.addChild(btnGroup);
    btnGroup.width = stageW;
    btnGroup.y = 800;

    // 开始按钮
    const startBtn: egret.Shape = new egret.Shape();
    startBtn.graphics.beginFill(0x0000ff);
    startBtn.graphics.drawRect(0, 0, 150, 50);
    startBtn.graphics.endFill();
    startBtn.x = 50;
    btnGroup.addChild(startBtn);
    const startBtnText: egret.TextField = new egret.TextField();
    startBtnText.size = 30;
    startBtnText.text = "START";
    startBtnText.x = 50;
    startBtnText.width = 150;
    startBtnText.height = 50;
    startBtnText.textColor = 0xff0000;
    startBtnText.textAlign = egret.HorizontalAlign.CENTER;
    startBtnText.verticalAlign = egret.VerticalAlign.MIDDLE;
    btnGroup.addChild(startBtnText);
    startBtn.touchEnabled = true;
    startBtn.addEventListener(egret.TouchEvent.TOUCH_BEGIN, this.onChangeStart, this);

    // 结束上传按钮
    const stopBtn: egret.Shape = new egret.Shape();
    stopBtn.graphics.beginFill(0x0000ff);
    stopBtn.graphics.drawRect(0, 0, 150, 50);
    stopBtn.graphics.endFill();
    stopBtn.x = 250;
    btnGroup.addChild(stopBtn);
    const stopBtnText: egret.TextField = new egret.TextField();
    stopBtnText.size = 30;
    stopBtnText.text = "STOP";
    stopBtnText.x = 250;
    stopBtnText.width = 150;
    stopBtnText.height = 50;
    stopBtnText.textColor = 0xff0000;
    stopBtnText.textAlign = egret.HorizontalAlign.CENTER;
    stopBtnText.verticalAlign = egret.VerticalAlign.MIDDLE;
    btnGroup.addChild(stopBtnText);
    stopBtn.touchEnabled = true;
    stopBtn.addEventListener(egret.TouchEvent.TOUCH_BEGIN, this.onChangeStop, this);
}

//创建 DeviceOrientation 类
private orientation = new egret.DeviceOrientation();
//创建 Motion 类
private motion = new egret.Motion(); 

/**
  * 开始设备事件监听
  */
private onChangeStart() {
    //添加事件监听器 设备方向改变时派发
    this.orientation.addEventListener(egret.Event.CHANGE, this.onOrientation, this);
    //开始监听设备方向变化
    this.orientation.start();

    //添加事件监听器
    this.motion.addEventListener(egret.Event.CHANGE, this.onMotion, this);
    //开始监听设备方向变化
    this.motion.start();
}

 /**
  * 停止设备事件监听并开始上传数据
  */
private onChangeStop() {
    this.orientation.stop();
    this.motion.stop();
}

监听并输出事件返回参数

private orientationText: egret.TextField = new egret.TextField();
private motionText: egret.TextField = new egret.TextField();

this.container.addChild(this.orientationText);
this.container.addChild(this.motionText);

/**
 * Orientation的监听事件
 */
private onOrientation(e: egret.OrientationEvent) {
    console.log(e);

    const beta = String(Math.floor(e.beta).toFixed(2));
    const gamma = String(Math.floor(e.gamma).toFixed(2));
    const alpha = String(Math.floor(e.alpha).toFixed(2));

    this.orientationText.textFlow = <Array<egret.ITextElement>>[

        { text: "在alpha,beta和gamma三个轴向的角度信息", style: { "textColor": 0x58c7f1 } },
        { text: "\n(β)绕 X 轴的角度：" },
        { text: beta, style: { "textColor": 0xff0000 } },
        { text: "\n(γ)绕 Y 轴的角度：" },
        { text: gamma, style: { "textColor": 0xff0000 } },
        { text: "\n(α)绕 Z 轴的角度：" },
        { text: alpha, style: { "textColor": 0xff0000 } },

    ]

}

/**
 * Motion的监听事件
 */
private onMotion(e: egret.MotionEvent) {
    console.log(e);

    // acceleration 表示设备在 X Y Z 轴方将的加速度信息，单位是 m/s2，不包含重力
    const acc = e.acceleration;
    // accelerationIncludingGravity 表示设备在 X Y Z 轴方将的加速度信息，单位是 m/s2，包含重力
    const accig = e.accelerationIncludingGravity;
    // rotationRate 表示设备在 alpha、 beta 和 gamma 三个轴向的角速度信息，单位是 角度每秒
    const rr = e.rotationRate;
    
    this.motionText.textFlow = <Array<egret.ITextElement>>[

        { text: "acceleration：", style: { "textColor": 0x3399ea } },
        { text: "\n在 X Y Z 轴方向的加速度信息", style: { "textColor": 0x58c7f1 } },
        { text: "\n单位是 m/s2，不包含重力", style: { "textColor": 0x58c7f1 } },
        { text: "\nX 轴方向的加速度：" },
        { text: Number(acc.x).toFixed(2), style: { "textColor": 0xff0000 } },
        { text: "\nY 轴方向的加速度：" },
        { text: Number(acc.y).toFixed(2), style: { "textColor": 0xff0000 } },
        { text: "\nZ 轴方向的加速度：" },
        { text: Number(acc.z).toFixed(2), style: { "textColor": 0xff0000 } },

        { text: "\n\naccelerationIncludingGravity：", style: { "textColor": 0x3399ea } },
        { text: "\n在 X Y Z 轴方向的加速度信息", style: { "textColor": 0x58c7f1 } },
        { text: "\n单位是 m/s2，包含重力", style: { "textColor": 0x58c7f1 } },
        { text: "\nX 轴方向的加速度：" },
        { text: Number(accig.x).toFixed(2), style: { "textColor": 0xff0000 } },
        { text: "\nY 轴方向的加速度：" },
        { text: Number(accig.y).toFixed(2), style: { "textColor": 0xff0000 } },
        { text: "\nZ 轴方向的加速度：" },
        { text: Number(accig.z).toFixed(2), style: { "textColor": 0xff0000 } },

        { text: "\n\nrotationRate：", style: { "textColor": 0x3399ea } },
        { text: "\n在alpha,beta和gamma三个轴向的角速度信息", style: { "textColor": 0x58c7f1 } },
        { text: "\n单位是 角度每秒", style: { "textColor": 0x58c7f1 } },
        { text: "\n(β)绕 X 轴的角速度：" },
        { text: Number(rr.beta).toFixed(2), style: { "textColor": 0xff0000 } },
        { text: "\n(γ)绕 Y 轴的角速度：" },
        { text: Number(rr.gamma).toFixed(2), style: { "textColor": 0xff0000 } },
        { text: "\n(α)绕 Z 轴的角速度：" },
        { text: Number(rr.alpha).toFixed(2), style: { "textColor": 0xff0000 } }

    ];
}

完整代码

class Main extends egret.DisplayObjectContainer {

    // 容器 所有控件都放到这个容器
    private container: egret.DisplayObjectContainer = new egret.DisplayObjectContainer();
    private orientationText: egret.TextField = new egret.TextField();
    private motionText: egret.TextField = new egret.TextField();

    //创建 DeviceOrientation 类
    private orientation = new egret.DeviceOrientation();
    //创建 Motion 类
    private motion = new egret.Motion();
    
    public constructor() {

        super();

        this.addEventListener(egret.Event.ADDED_TO_STAGE, this.onAddToStage, this);

    }

    /**
     * 开始设备事件监听
     */
    private onChangeStart() {

        //添加事件监听器 设备方向改变时派发
        this.orientation.addEventListener(egret.Event.CHANGE, this.onOrientation, this);
        //开始监听设备方向变化
        this.orientation.start();

        //添加事件监听器
        this.motion.addEventListener(egret.Event.CHANGE, this.onMotion, this);
        //开始监听设备方向变化
        this.motion.start();
    }

    /**
     * 停止设备事件监听并开始上传数据
     */
    private onChangeStop() {
        this.orientation.stop();
        this.motion.stop();
    }
    
    /**
     * Orientation的监听事件
     */
    private onOrientation(e: egret.OrientationEvent) {
        console.log(e);

        const beta = String(Math.floor(e.beta).toFixed(2));
        const gamma = String(Math.floor(e.gamma).toFixed(2));
        const alpha = String(Math.floor(e.alpha).toFixed(2));

        this.orientationText.textFlow = <Array<egret.ITextElement>>[

            { text: "在alpha,beta和gamma三个轴向的角度信息", style: { "textColor": 0x58c7f1 } },
            { text: "\n(β)绕 X 轴的角度：" },
            { text: beta, style: { "textColor": 0xff0000 } },
            { text: "\n(γ)绕 Y 轴的角度：" },
            { text: gamma, style: { "textColor": 0xff0000 } },
            { text: "\n(α)绕 Z 轴的角度：" },
            { text: alpha, style: { "textColor": 0xff0000 } },

        ]

    }

    /**
     * Motion的监听事件
     */
    private onMotion(e: egret.MotionEvent) {
        console.log(e);

        // acceleration 表示设备在 X Y Z 轴方将的加速度信息，单位是 m/s2，不包含重力
        const acc = e.acceleration;
        // accelerationIncludingGravity 表示设备在 X Y Z 轴方将的加速度信息，单位是 m/s2，包含重力
        const accig = e.accelerationIncludingGravity;
        // rotationRate 表示设备在 alpha、 beta 和 gamma 三个轴向的角速度信息，单位是 角度每秒
        const rr = e.rotationRate;

        this.motionText.textFlow = <Array<egret.ITextElement>>[

            { text: "acceleration：", style: { "textColor": 0x3399ea } },
            { text: "\n在 X Y Z 轴方向的加速度信息", style: { "textColor": 0x58c7f1 } },
            { text: "\n单位是 m/s2，不包含重力", style: { "textColor": 0x58c7f1 } },
            { text: "\nX 轴方向的加速度：" },
            { text: Number(acc.x).toFixed(2), style: { "textColor": 0xff0000 } },
            { text: "\nY 轴方向的加速度：" },
            { text: Number(acc.y).toFixed(2), style: { "textColor": 0xff0000 } },
            { text: "\nZ 轴方向的加速度：" },
            { text: Number(acc.z).toFixed(2), style: { "textColor": 0xff0000 } },

            { text: "\n\naccelerationIncludingGravity：", style: { "textColor": 0x3399ea } },
            { text: "\n在 X Y Z 轴方向的加速度信息", style: { "textColor": 0x58c7f1 } },
            { text: "\n单位是 m/s2，包含重力", style: { "textColor": 0x58c7f1 } },
            { text: "\nX 轴方向的加速度：" },
            { text: Number(accig.x).toFixed(2), style: { "textColor": 0xff0000 } },
            { text: "\nY 轴方向的加速度：" },
            { text: Number(accig.y).toFixed(2), style: { "textColor": 0xff0000 } },
            { text: "\nZ 轴方向的加速度：" },
            { text: Number(accig.z).toFixed(2), style: { "textColor": 0xff0000 } },

            { text: "\n\nrotationRate：", style: { "textColor": 0x3399ea } },
            { text: "\n在alpha,beta和gamma三个轴向的角速度信息", style: { "textColor": 0x58c7f1 } },
            { text: "\n单位是 角度每秒", style: { "textColor": 0x58c7f1 } },
            { text: "\n(β)绕 X 轴的角速度：" },
            { text: Number(rr.beta).toFixed(2), style: { "textColor": 0xff0000 } },
            { text: "\n(γ)绕 Y 轴的角速度：" },
            { text: Number(rr.gamma).toFixed(2), style: { "textColor": 0xff0000 } },
            { text: "\n(α)绕 Z 轴的角速度：" },
            { text: Number(rr.alpha).toFixed(2), style: { "textColor": 0xff0000 } }

        ];
    }

    private onAddToStage(event: egret.Event) {

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

            context.onUpdate = () => {

            }
        })

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

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

        this.runGame().catch(e => {
            console.log(e);
        })

    }

    private async runGame() {
        this.createGameScene();
    }

    /**
     * 创建开始停止按钮
     */
    private createStartOrStopBtn(stageW) {
        const btnGroup: egret.DisplayObjectContainer = new egret.DisplayObjectContainer();
        this.container.addChild(btnGroup);
        btnGroup.width = stageW;
        btnGroup.y = 800;

        // 开始按钮
        const startBtn: egret.Shape = new egret.Shape();
        startBtn.graphics.beginFill(0x0000ff);
        startBtn.graphics.drawRect(0, 0, 150, 50);
        startBtn.graphics.endFill();
        startBtn.x = 50;
        btnGroup.addChild(startBtn);
        const startBtnText: egret.TextField = new egret.TextField();
        startBtnText.size = 30;
        startBtnText.text = "START";
        startBtnText.x = 50;
        startBtnText.width = 150;
        startBtnText.height = 50;
        startBtnText.textColor = 0xff0000;
        startBtnText.textAlign = egret.HorizontalAlign.CENTER;
        startBtnText.verticalAlign = egret.VerticalAlign.MIDDLE;
        btnGroup.addChild(startBtnText);
        startBtn.touchEnabled = true;
        startBtn.addEventListener(egret.TouchEvent.TOUCH_BEGIN, this.onChangeStart, this);

        // 结束上传按钮
        const stopBtn: egret.Shape = new egret.Shape();
        stopBtn.graphics.beginFill(0x0000ff);
        stopBtn.graphics.drawRect(0, 0, 150, 50);
        stopBtn.graphics.endFill();
        stopBtn.x = 250;
        btnGroup.addChild(stopBtn);
        const stopBtnText: egret.TextField = new egret.TextField();
        stopBtnText.size = 30;
        stopBtnText.text = "STOP";
        stopBtnText.x = 250;
        stopBtnText.width = 150;
        stopBtnText.height = 50;
        stopBtnText.textColor = 0xff0000;
        stopBtnText.textAlign = egret.HorizontalAlign.CENTER;
        stopBtnText.verticalAlign = egret.VerticalAlign.MIDDLE;
        btnGroup.addChild(stopBtnText);
        stopBtn.touchEnabled = true;
        stopBtn.addEventListener(egret.TouchEvent.TOUCH_BEGIN, this.onChangeStop, this);

    }

    /**
     * 创建游戏场景
     * Create a game scene
     */
    private createGameScene() {
        let stageW = this.stage.stageWidth;
        let stageH = this.stage.stageHeight;

        const scrollView: egret.ScrollView = new egret.ScrollView();

        scrollView.setContent(this.container);
        scrollView.width = stageW;
        scrollView.height = stageH;
        this.addChild(scrollView);

        this.container.x = 10;
        this.container.y = 10;

        this.container.addChild(this.orientationText);
        this.container.addChild(this.motionText);

        this.orientationText.y = 0;
        this.motionText.y = 150;

        this.createStartOrStopBtn(stageW);

    }
    
}

本文地址：https://blog.csdn.net/weixin_43526371/article/details/107597217

相关标签： Egret Engine 游戏 typescript 游戏引擎

上一篇： 对战黄巾屡战屡败的董卓，为何能乱政？

下一篇： Java—正则表达式（Pattern类和Matcher类）

推荐阅读