egret3d的GUI目前還沒有，在做3d游戲的時(shí)候沒有UI可用，只能使用egret2d的EUI組件庫(kù)，egret3d與egret2d混合開發(fā)，canvas3d的大小與位置與canvas2d并沒有重合，導(dǎo)致適配ui時(shí)總是錯(cuò)位。在做手機(jī)屏幕適配的時(shí)候必須解決這種問(wèn)題，我的解決方法是兩個(gè)屬性相同。

我的解決方案為修改源碼，在egret2d適配屏幕的時(shí)候加入自定義接口，通過(guò)事件的方式通知適配canvas3d的大小和位置。
先看下效果如何


轉(zhuǎn)屏適配??

---

增加Diy接口

打開 egret engine ，跳轉(zhuǎn)到引擎的根目錄下，進(jìn)入src->egret->diy->RMCanvas2DView.ts，diy->RMCanvas2DView.ts為自己創(chuàng)建的文件，目的是為了從引擎底部調(diào)出接口。

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函數(shù)的最后加上代碼：

/*** @private* 更新播放器視口尺寸*/ public updateScreenSize():void {......this.player.updateStageSize(stageWidth, stageHeight);//不要在這個(gè)方法后面修改屬性//函數(shù)的最下面加上以下代碼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)); ｝

編譯引擎

通過(guò)egret create命令創(chuàng)建的項(xiàng)目，在項(xiàng)目的根目錄下執(zhí)行一次 egret make命令，編譯完成后，在項(xiàng)目中看看是否有RMCanvas2DView類，如果沒有，請(qǐng)重新看下步驟，重試以下。

監(jiān)聽屏幕適配變化

然后在游戲啟動(dòng)時(shí)加入事件監(jiān)聽器回調(diào)函數(shù)

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.canvasW+'px';canvas.style['height'] = RM.RMCanvas2DView.canvasH+'px';}} }

這樣就把2D引擎適配的結(jié)果傳遞給3D了。旋轉(zhuǎn)縮放都沒有問(wèn)題了，可以使用2D下的所有適配模式。
有問(wèn)題請(qǐng)聯(lián)系哦！目前我以這種模式已做了2個(gè)egret3d項(xiàng)目嘍～不過(guò)目前并沒有上線運(yùn)營(yíng)。

轉(zhuǎn)載于:https://www.cnblogs.com/Richard-Core/p/egret23d-canvas.html

總結(jié)

以上是生活随笔為你收集整理的egret3D与2D混合开发，画布尺寸不一致的问题的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。