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

这样就把2D引擎适配的结果传递给3D了。旋转缩放都没有问题了,可以使用2D下的所有适配模式。

有问题请联系哦!目前我以这种模式已做了2个egret3d项目喽~不过目前并没有上线运营。

egret3D与2D混合开发,画布尺寸不一致的问题的更多相关文章

  1. Qt 5.4正式发布!引入WP,支持HTML5混合开发

    北京时间12月11日消息,Digia全资子公司The Qt Company在其 官方博客上宣布,正式发布Qt 5.4,支持HTML5混合开发,引入对于Windows Phone的支持,以及众多跨桌面. ...

  2. Unity iOS混合开发界面切换思路

    Unity iOS混合开发界面切换思路 最近有很多博友QQ 私信 或则 留言联系我,请教iOS和Unity界面之前相互切换的问题,源代码就不私下发你们了,界面跳转功能的代码我直接贴到下面好了,顺带说i ...

  3. 基于ionic+angulajs的混合开发实现地铁APP

    基于ionic+angulajs的混合开发实现地铁APP 注:本博文为博主原创,转载时请注明出处. 项目源码地址:https://github.com/zhangxy1035/SubwayMap 一. ...

  4. IOS-Hybrid(混合开发)

    http://www.cnblogs.com/oc-bowen/p/5423902.html 1.1.     APP三种开发模式 智能手机之普及不用多说,手机APP渗投到各个行业:电商(淘宝.京东等 ...

  5. Hybrid APP混合开发的一些经验和总结

    http://www.cnblogs.com/kingplus/p/5588339.html 写在前面: 由于业务需要,接触到一个Hybrid APP混合开发的项目.当时是第一次接触混合开发,有一些经 ...

  6. 移动开发发展方向-----Hybird混合开发3大方案

    移动开发发展方向-----Hybird混合开发3大方案

  7. android混合开发,webview的java与js互操作

    android原生应用,用webview加载应用中的网页,并且java代码与js代码可以互相操作. 这是混合开发的基石,最基本也最重要的东西,实验代码在这里. 概括说说—— java调js:调用web ...

  8. (读书笔记)Asp.net Mvc 与WebForm 混合开发

    根据项目实际需求,有时候会想在项目中实现Asp.net Mvc与Webform 混合开发,比如前台框架用MVC,后台框架用WebForm.其实要是实现也很简单,如下: (1)在MVC 中使用Webfo ...

  9. Android 混合开发 的一些心得。

    其实所谓这个混合开发,也就是hybird,就是一些简单的,html5和native 代码之间的交互.很多电商之类的app里面都有类似的功能, 这种东西其实还是蛮重要的,主要就是你有什么功能都可以进行热 ...

随机推荐

  1. 记一次SQLServer的分页优化兼谈谈使用Row_Number()分页存在的问题

    最近有项目反应,在服务器CPU使用较高的时候,我们的事件查询页面非常的慢,查询几条记录竟然要4分钟甚至更长,而且在翻第二页的时候也是要这么多的时间,这肯定是不能接受的,也是让现场用SQLServerP ...

  2. [.NET] C# 知识回顾 - Event 事件

    C# 知识回顾 - Event 事件 [博主]反骨仔 [原文]http://www.cnblogs.com/liqingwen/p/6060297.html 序 昨天,通过<C# 知识回顾 - ...

  3. AFNetworking 3.0 源码解读 总结(干货)(下)

    承接上一篇AFNetworking 3.0 源码解读 总结(干货)(上) 21.网络服务类型NSURLRequestNetworkServiceType 示例代码: typedef NS_ENUM(N ...

  4. js 入门级常见问题

    写在前面:以下是个人总结的关于js常见的入门级的问题一些总结. js是有 ECMAScript Dom Bom 三部分组成. 1,undefined,NaN,Null,infinity 1) unde ...

  5. Atitit.项目修改补丁打包工具 使用说明

    Atitit.项目修改补丁打包工具 使用说明 1.1. 打包工具已经在群里面.打包工具.bat1 1.2. 使用方法:放在项目主目录下,执行即可1 1.3. 打包工具的原理以及要打包的项目列表1 1. ...

  6. Chrome 控制台不完全指南

    Chrome的开发者工具已经强大到没朋友的地步了,特别是其功能丰富界面友好的console,使用得当可以有如下功效: 更高「逼格」更快「开发调试」更强「进阶级的Frontender」 Bug无处遁形「 ...

  7. 牛顿插值法——用Python进行数值计算

    拉格朗日插值法的最大毛病就是每次引入一个新的插值节点,基函数都要发生变化,这在一些实际生产环境中是不合适的,有时候会不断的有新的测量数据加入插值节点集, 因此,通过寻找n个插值节点构造的的插值函数与n ...

  8. js倒计时-倒计输入的时间

    计算指定时间到指定时间之间相差多少天.时.分.秒. 节日.活动.商城常用. 原理: 主要使用到时间戳,也就是从1970 年 1 月 1 日 到指定时间的毫秒数. 1. 求出毫秒差 :当两个时间直接进行 ...

  9. iOS-----App闪退,程序崩溃---解决方案

    1.iOS-中app启动闪退的原因 2.iOS开发-闪退问题-解决之前上架的 App 在 iOS 9 会闪退问题 3.iOS-应用闪退总结 4.iOS开发-捕获程序崩溃日志 5.iOS开发-应用崩溃日 ...

  10. 阿里云自定义日记文件无法通过ftp下载

    异常处理汇总 ~ 修正果带着你的Net飞奔吧!http://www.cnblogs.com/dunitian/p/4599258.html 有可能是个例,xftp不行(对linux支持很好),Cute ...