egret3D与2D混合开发，画布尺寸不一致的问题

最新推荐文章于 2021-06-26 22:20:22 发布

weixin_30954265

最新推荐文章于 2021-06-26 22:20:22 发布

阅读量139

点赞数

CC 4.0 BY-SA版权

文章标签： ui

原文链接：http://www.cnblogs.com/Richard-Core/p/egret23d-canvas.html

本文提供了一种将egret2D与egret3D混合开发时的屏幕适配解决方案，通过修改引擎源码实现2D与3D画布的同步调整，确保UI元素正确显示。

egret3d的GUI目前还没有，在做3d游戏的时候没有UI可用，只能使用egret2d的EUI组件库，egret3d与egret2d混合开发，canvas3d的大小与位置与canvas2d并没有重合，导致适配ui时总是错位。在做手机屏幕适配的时候必须解决这种问题，我的解决方法是两个属性相同。

我的解决方案为修改源码，在egret2d适配屏幕的时候加入自定义接口，通过事件的方式通知适配canvas3d的大小和位置。
先看下效果如何

转屏适配⬇️

增加Diy接口

打开 egret engine ，跳转到引擎的根目录下，进入src->egret->diy->RMCanvas2DView.ts，diy->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.canvasW+'px';
            canvas.style['height'] = RM.RMCanvas2DView.canvasH+'px';
        }
    }
}

这样就把2D引擎适配的结果传递给3D了。旋转缩放都没有问题了，可以使用2D下的所有适配模式。
有问题请联系哦！目前我以这种模式已做了2个egret3d项目喽～不过目前并没有上线运营。

转载于:https://www.cnblogs.com/Richard-Core/p/egret23d-canvas.html