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