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里面都有类似的功能, 这种东西其实还是蛮重要的,主要就是你有什么功能都可以进行热 ...
随机推荐
- Android UI体验之全屏沉浸式透明状态栏效果
前言: Android 4.4之后谷歌提供了沉浸式全屏体验, 在沉浸式全屏模式下, 状态栏. 虚拟按键动态隐藏, 应用可以使用完整的屏幕空间, 按照 Google 的说法, 给用户一种 身临其境 的体 ...
- 【深入浅出jQuery】源码浅析--整体架构
最近一直在研读 jQuery 源码,初看源码一头雾水毫无头绪,真正静下心来细看写的真是精妙,让你感叹代码之美. 其结构明晰,高内聚.低耦合,兼具优秀的性能与便利的扩展性,在浏览器的兼容性(功能缺陷.渐 ...
- Python 正则表达式入门(中级篇)
Python 正则表达式入门(中级篇) 初级篇链接:http://www.cnblogs.com/chuxiuhong/p/5885073.html 上一篇我们说在这一篇里,我们会介绍子表达式,向前向 ...
- 【uwp】浅谈China Daily 中划词翻译的实现
学习uwp开发也有一段时间了,最近上架了一个小应用(China Daily),现在准备将开发中所学到的一些东西拿出来跟大家分享交流一下. 先给出应用的下载链接:China Daily , 感兴趣的童鞋 ...
- APEX:对object中数据进行简单处理?
在Salesforce中,常常要对各种数据进行处理,已满足业务逻辑.本篇文章会介绍如何实现从object获取数据,然后将取得的数据进行一系列简单处理. 第一步:SongName__c 是一个新建的ob ...
- svn常用命令
1.新建版本库 [root@localhost repos]# mkdir -p project [root@localhost repos]# svnadmin create project [ro ...
- Prometheus 系统监控方案 一
最近一直在折腾时序类型的数据库,经过一段时间项目应用,觉得十分不错.而Prometheus又是刚刚推出不久的开源方案,中文资料较少,所以打算写一系列应用的实践过程分享一下. Prometheus 是什 ...
- 不要着急改代码,先想想--centos 6.8下编译安装tmux
诸位读者新年好,2017开年第一篇博客,请允许我先问候一下看到这篇博客的诸位.写博客是我2017年定下的目标之一,希望我会坚持下去. 最近打算尝试一下tmux这个神器,于是有了这一篇关于思维方式的Bl ...
- EF里Guid类型数据的自增长、时间戳和复杂类型的用法
通过前两章Lodging和Destination类的演示,大家肯定基本了解Code First是怎么玩的了,本章继续演示一些很实用的东西.文章的开头提示下:提供的demo为了后面演示效果,前面代码有些 ...
- javascript中的变量作用域以及变量提升
在javascript中, 理解变量的作用域以及变量提升是非常有必要的.这个看起来是否很简单,但其实并不是你想的那样,还要一些重要的细节你需要理解. 变量作用域 “一个变量的作用域表示这个变量存在的上 ...