陕西省建设总工会网站,在线音乐网站开发数据库,适合企业员工培训的课程,wordpress自动加载egret3d的GUI目前还没有#xff0c;在做3d游戏的时候没有UI可用#xff0c;只能使用egret2d的EUI组件库#xff0c;egret3d与egret2d混合开发#xff0c;canvas3d的大小与位置与canvas2d并没有重合#xff0c;导致适配ui时总是错位。在做手机屏幕适配的时候必须解决这种问… egret3d的GUI目前还没有在做3d游戏的时候没有UI可用只能使用egret2d的EUI组件库egret3d与egret2d混合开发canvas3d的大小与位置与canvas2d并没有重合导致适配ui时总是错位。在做手机屏幕适配的时候必须解决这种问题我的解决方法是两个属性相同。 我的解决方案为修改源码在egret2d适配屏幕的时候加入自定义接口通过事件的方式通知适配canvas3d的大小和位置。 先看下效果如何 转屏适配⬇️ 增加Diy接口 打开 egret engine 跳转到引擎的根目录下进入src-egret-diy-RMCanvas2DView.tsdiy-RMCanvas2DView.ts为自己创建的文件目的是为了从引擎底部调出接口。 module RM {export class RMCanvas2DView {public static canvasW:number 0;public static canvasH:number 0;public static canvasX:number 0;public static canvasY:number 0;public static canvasR:string rotate(0deg);public static eventDispatcher:egret.EventDispatcher new egret.EventDispatcher();public constructor() {}}
}修改WebPlayer.ts源码 在WebPlayer.updateScreenSize函数的最后加上代码 /*** private* 更新播放器视口尺寸*/
public updateScreenSize():void {......this.player.updateStageSize(stageWidth, stageHeight);//不要在这个方法后面修改属性//函数的最下面加上以下代码RM.RMCanvas2DView.canvasW displayWidth;RM.RMCanvas2DView.canvasH displayHeight;RM.RMCanvas2DView.canvasX canvas.style.left.split(px)[0];RM.RMCanvas2DView.canvasY canvas.style.top.split(px)[0];RM.RMCanvas2DView.canvasR canvas.style.transform;RM.RMCanvas2DView.eventDispatcher.dispatchEvent(egret.Event.create(egret.Event,egret.Event.RESIZE));编译引擎 通过egret create命令创建的项目在项目的根目录下执行一次 egret make命令编译完成后在项目中看看是否有RMCanvas2DView类如果没有请重新看下步骤重试以下。 监听屏幕适配变化 然后在游戏启动时加入事件监听器回调函数 class WorldCanvas {private _canvas3d:egret3d.Egret3DCanvas;private _view3d:egret3d.View3D;public constructor() {this.initCanvas();this.initHtmlCanvas();}private initCanvas():void {this._canvas3d new egret3d.Egret3DCanvas();this._canvas3d.width GameConfig.STAGE_W;this._canvas3d.height GameConfig.STAGE_H;this._canvas3d.x this._canvas3d.y 0;this._view3d new egret3d.View3D( 0, 0, GameConfig.STAGE_W, GameConfig.STAGE_H );this._view3d.backColor 0x00000000;this._canvas3d.addView3D( this._view3d );this.onResize();RM.RMCanvas2DView.eventDispatcher.addEventListener( egret.Event.RESIZE, this.onResize, this );}private initHtmlCanvas():void{var canvas document.getElementById( egret3D );if ( canvas ) {canvas.style[ position ] absolute;canvas.style[ cursor ] inherit;canvas.style[ bottom ] 0px;canvas.style[ right ] 0px;canvas.style[ transform-origin ] 0% 0% 0px;}}public onResize( $e? ):void {this._canvas3d.x RM.RMCanvas2DView.canvasX;this._canvas3d.y RM.RMCanvas2DView.canvasY;var canvas document.getElementById( egret3D );if ( canvas ) {canvas.style[ transform ] RM.RMCanvas2DView.canvasR;canvas.style[width] RM.RMCanvas2DView.canvasWpx;canvas.style[height] RM.RMCanvas2DView.canvasHpx;}}
}这样就把2D引擎适配的结果传递给3D了。旋转缩放都没有问题了可以使用2D下的所有适配模式。 有问题请联系哦目前我以这种模式已做了2个egret3d项目喽不过目前并没有上线运营。 转载于:https://www.cnblogs.com/Richard-Core/p/egret23d-canvas.html
