egret3D与2D混合开发,画布尺寸不一致的问题
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项目喽~不过目前并没有上线运营。
egret3D与2D混合开发,画布尺寸不一致的问题的更多相关文章
- Qt 5.4正式发布!引入WP,支持HTML5混合开发
北京时间12月11日消息,Digia全资子公司The Qt Company在其 官方博客上宣布,正式发布Qt 5.4,支持HTML5混合开发,引入对于Windows Phone的支持,以及众多跨桌面. ...
- Unity iOS混合开发界面切换思路
Unity iOS混合开发界面切换思路 最近有很多博友QQ 私信 或则 留言联系我,请教iOS和Unity界面之前相互切换的问题,源代码就不私下发你们了,界面跳转功能的代码我直接贴到下面好了,顺带说i ...
- 基于ionic+angulajs的混合开发实现地铁APP
基于ionic+angulajs的混合开发实现地铁APP 注:本博文为博主原创,转载时请注明出处. 项目源码地址:https://github.com/zhangxy1035/SubwayMap 一. ...
- IOS-Hybrid(混合开发)
http://www.cnblogs.com/oc-bowen/p/5423902.html 1.1. APP三种开发模式 智能手机之普及不用多说,手机APP渗投到各个行业:电商(淘宝.京东等 ...
- Hybrid APP混合开发的一些经验和总结
http://www.cnblogs.com/kingplus/p/5588339.html 写在前面: 由于业务需要,接触到一个Hybrid APP混合开发的项目.当时是第一次接触混合开发,有一些经 ...
- 移动开发发展方向-----Hybird混合开发3大方案
移动开发发展方向-----Hybird混合开发3大方案
- android混合开发,webview的java与js互操作
android原生应用,用webview加载应用中的网页,并且java代码与js代码可以互相操作. 这是混合开发的基石,最基本也最重要的东西,实验代码在这里. 概括说说—— java调js:调用web ...
- (读书笔记)Asp.net Mvc 与WebForm 混合开发
根据项目实际需求,有时候会想在项目中实现Asp.net Mvc与Webform 混合开发,比如前台框架用MVC,后台框架用WebForm.其实要是实现也很简单,如下: (1)在MVC 中使用Webfo ...
- Android 混合开发 的一些心得。
其实所谓这个混合开发,也就是hybird,就是一些简单的,html5和native 代码之间的交互.很多电商之类的app里面都有类似的功能, 这种东西其实还是蛮重要的,主要就是你有什么功能都可以进行热 ...
随机推荐
- CSS 3学习——animation动画
以下内容根据官方文档翻译以及自己的理解整理. 1. 介绍 本方案介绍动画(animations).通过动画,开发者可以将CSS属性值的变化指定为一个随时间变化的关键帧(keyframes)的集合.在 ...
- favicon.ioc使用以及注意事项
1.效果 2.使用引入方法 2.1 注意事项:(把图标命名为favicon.ico,并且放在根目录下,同时使用Link标签,多重保险) 浏览器默认使用根目录下的favicon.ico 图标(如果你并没 ...
- Python的单元测试(一)
title: Python的单元测试(一) author: 青南 date: 2015-02-27 22:50:47 categories: Python tags: [Python,单元测试] -- ...
- 前端学HTTP之字符集
前面的话 HTTP报文中可以承载以任何语言表示的内容,就像它能承载图像.影片或任何类型的媒体那样.对HTTP来说,实体主体只是二进制信息的容器而已.为了支持国际性内容,服务器需要告知客户端每个文档的字 ...
- HTML5新特性有哪些,你都知道吗
一.画布(Canvas) 画布是网页中的一块区域,可所以用JavaScript在上面绘图.下面我们来创建一个画布并在上面绘制一个坦克(后面将用HTML5做一个坦克大战游戏),代码如下: <!DO ...
- zookeeper源码分析之六session机制
zookeeper中session意味着一个物理连接,客户端连接服务器成功之后,会发送一个连接型请求,此时就会有session 产生. session由sessionTracker产生的,sessio ...
- Kooboo CMS技术文档之一:Kooboo CMS技术背景
语言平台 依赖注入方案 存储模型 1. 语言平台 Kooboo CMS基于.NET Framework 4.x,.NET Framework 4.x的一些技术特性成为站点开发人员使用Kooboo CM ...
- C++随笔:.NET CoreCLR之GC探索(3)
有几天没写GC相关的文章了哈,今天我讲GC的方式是通过一个小的Sample来讲解,这个小的示例代码只有全部Build成功了才会有.地址为D:\coreclr2\coreclr\bin\obj\Wind ...
- Could not evaluate expression
VS15 调试变量不能显示值,提示:Could not evaluate expression 解决办法: 选择"在调试时显示运行以单击编辑器中的按钮"重启VS即可. 可参考:Vi ...
- iOS之应用版本号的设置规则
版本号的格式:v<主版本号>.<副版本号>.<发布号> 版本号的初始值:v1.0.0 管理规则: 主版本号(Major version) 1. 产品的主体构件进 ...