查看: 21072|回复: 15

关于自适应全屏

2 主题	0 好友	42 积分

士兵

Rank: 1

发消息

电梯直达

楼主

发表于 2013-6-19 13:35:02 |只看该作者 |倒序浏览

我使用过LSystem.screen(LStage.FULL_SCREEN);但在手机浏览器中，安卓chrome不认，ios的safari会自动缩小，虽然画布显示完整了，但缩得好小，边上露出了很多白边。
我今天看了一个叫做limejs(http://www.limejs.com)的html5游戏引擎，在它的范例文件中http://www.limejs.com/static/roundball/index.html，这个游戏就可以自适应浏览器的大小进行内容的缩放。最牛的一点他在手机浏览器中，会关闭掉浏览器的头部地址栏以及底部按钮，让游戏画布撑满整个屏幕，让这个网页游戏更像一个app而不是浏览器中的网页，相比之下LStage.FULL_SCREEN的显示效果和我预期的有点远，期待以后版本能有这个功能。

------------------------------------------
lufy留言：
此贴较早，现在的版本已经有完美的全屏适应api

分享0 收藏0

使用道具举报

lufy

37 主题	8 好友	9312 积分

诸侯王

Rank: 15

发消息

沙发

发表于 2013-6-19 16:47:41 |只看该作者

那个引擎并不是基于canvas的，他是通过div标签来实现的，里面所有对象都是div，你看一下代码就知道了，让div全屏那是html最基本的功能，所以比较容易，而让canvas全屏就没那么容易了，我也一直在寻找更好的方法，以后一旦有更好的全屏对策，会及时更新的

不回答与技术和引擎不相关的问题

使用道具举报

cailven

2 主题	0 好友	42 积分

士兵

Rank: 1

发消息

板凳

发表于 2013-6-19 18:32:40 |只看该作者

本帖最后由 cailven 于 2013-6-19 18:33 编辑

lufy 发表于 2013-6-19 16:47
那个引擎并不是基于canvas的，他是通过div标签来实现的，里面所有对象都是div，你看一下代码就知道了，让di ...

哦对的，limesJs果然是div结构的游戏引擎，之前没仔细看。我也一起再想想这方面办法，看到好的例子就给你。

http://www.noiseboard.com.au/
这个网站的canvas是适应浏览器的。但我后来通过firebug调试lufyLegend的canvas大小后发现里面的元素也不会自动跟着canvas缩放。如果canvas能自适应里面的东西也能自适应，就如同flash里面scaleMode类那样就好了。

使用道具举报

cailven

2 主题	0 好友	42 积分

士兵

Rank: 1

发消息

地板

发表于 2013-6-20 18:08:24 |只看该作者

本帖最后由 cailven 于 2013-6-20 18:31 编辑

lufy 发表于 2013-6-19 16:47
那个引擎并不是基于canvas的，他是通过div标签来实现的，里面所有对象都是div，你看一下代码就知道了，让di ...

我非常偏执，对这个问题我调研了其他好几个游戏引擎包括著名的EaselJs,国内的QuarkJS，以及melonjs都没有实现对于canvas的全屏问题。我后来一直想搞懂的就是canvas能否全屏。通过firebug对于网页元素的分析后，发现有很多网站使用的canvas方法还是基于在网页中建立很多不同的canvas，比如昨天的http://www.noiseboard.com.au/，以及微软的水族馆http://ie.microsoft.com/testdriv ... shbowl/default.html。但我很想弄明白到底单个的canvas能否全屏，最后找到了两个范例：http://ie.microsoft.com/testdrive/Performance/AsteroidBelt/
http://peterned.home.xs4all.nl/demooo/
在地球的那个范例中作者用了一个叫做Clay的引擎。然后调用了以下代码
window.onresize = function() {
                     stage.resizeTo(
                              window.innerWidth || document.documentElement.clientWidth,
                              window.innerHeight || document.documentElement.clientHeight
                     );
            };

陨石那个是这样的：
// Get the canvas element.
         canvasElement = document.getElementById('canvas1');

         STAGE_WIDTH = window.innerWidth;
         STAGE_HEIGHT = window.innerHeight;
         canvasElement.width = STAGE_WIDTH;
         canvasElement.height = STAGE_HEIGHT;

function onResize() {
         STAGE_WIDTH = window.innerWidth;
         STAGE_HEIGHT = window.innerHeight;

         canvasElement.width = STAGE_WIDTH;
         canvasElement.height = STAGE_HEIGHT;
      }
onResize在body标签中跑的。
<body id="demobody">

并且我在手机端测试下来都是有用的。看看能否早日让lufylegend也具备这个功能。一定会领先很多其他引擎成为html5游戏的首选。

使用道具举报

lufy

37 主题	8 好友	9312 积分

诸侯王

Rank: 15

发消息

5^#

发表于 2013-6-20 19:40:35 |只看该作者

cailven 发表于 2013-6-20 18:08
我非常偏执，对这个问题我调研了其他好几个游戏引擎包括著名的EaselJs,国内的QuarkJS，以及melonjs都没有 ...

非常感谢兄弟一起帮忙。
其实，像这样动态的设置canvas的大小，lufylegend.js也是完全可以的，无非就是取得当前屏幕的大小，然后再设置canvas的大小和屏幕大小相等即可。
不过，这样一来，因为canvas的大小并不是比例缩放，而是大小改变了，那么你的游戏或应用也必须能够随这个canvas的大小变化而变化，比如原来你游戏的地图大小是800x400，当把canvas的大小改为1000x500的时候，如果你的地图不随着改变大小的话，就会出现空白区域了。
而真正想实现类似于flash那样的全屏效果，肯定要对整个canvas进行缩放，而并不是单纯的改变大小，所以才需要通过改变viewport标签的比例来实现全屏效果，这个缩放是整个canvas的缩放，你的游戏对象也会随之缩放。

不回答与技术和引擎不相关的问题

使用道具举报

cailven

2 主题	0 好友	42 积分

士兵

Rank: 1

发消息

6^#

发表于 2013-6-21 00:07:28 |只看该作者

lufy 发表于 2013-6-20 19:40
非常感谢兄弟一起帮忙。
其实，像这样动态的设置canvas的大小，lufylegend.js也是完全可以的，无非就是取 ...

对的，没错，canvas标签根据window的大小自动缩放的同时，viewport的缩放应该就能计算出来。比如初始化的时候，init(50,"mylegend",800,400,main);然后，这时候的场景是1000x500,我们就可以得出StageWidthRatio=5/4;StageHeightRatio=5/4;然后建立的物体的位置以及Scale都乘以这个数值。然后在全局类里面就能加上三个stage属性。noScale：就是现在的样子不缩放。SHOW_ALL:StageWidthRatio和StageHeightRatio取小的那个值等比缩放内容；NO_BORDER：取大的值等比缩放内容；EXACT_FIT：都取不等比缩放但充满画布；
但说起来容易改起来可能比较麻烦吧。而且可能每个类都需要改才行。但如果一旦解决，引擎在不同的设备之间的体验效果也迎刃而解了，包括有些网友利用phoneGap或者appcan打包体验也会更好。

Html5的优势就在于跨平台，这个趋势大家都看到了，我们公司现在正逼着所有的flash程序员都转HTML5.这也把我逼到了刀刃上，从而让我有机会接触了你的引擎，看了Api后第二天就把你的书买了，翻看了一遍后，基本都没怎么花大量时间学习，很容易的就利用原先的as3基础上手了，这也是我感到万般兴奋的事情。

2011年的时候天地会也有另一个叫做CasualJS的仿as框架出现过，http://code.google.com/p/casualjs/，作者也利用他的引擎做过几款游戏，http://www.riaidea.com/blog/archives/389.html，但我看了他的api远不如你的引擎完善。这些年adobe也在推由EaselJS为主体的CreatJs框架，并可以直接用flash导出素材，号称api和as3很像，但我接触后也差的太远，学习起来并不怎么方便，如果有开发手机游戏基础的大部分都会选择cocos2dxHtml5版本，这也让很多cocos出身的人受益匪浅。quark虽然学起来也不难但也需要花上一定的学习成本。只有你的引擎最有优势了，在这个js引擎层出不穷的年代，希望这个引擎能走的远一点。而不成为caualJs第二半路夭折。加油！

使用道具举报

lufy

37 主题	8 好友	9312 积分

诸侯王

Rank: 15

发消息

7^#

发表于 2013-6-21 10:44:24 |只看该作者

cailven 发表于 2013-6-21 00:07
对的，没错，canvas标签根据window的大小自动缩放的同时，viewport的缩放应该就能计算出来。比如初始化的 ...

是啊，对于HTML5来说，全屏的处理相当麻烦，我现在也只是计算了一下viewport的值来完成全屏的，其实要修改的地方还有很多，目前我的精力又无法全都放到这里，所以只能慢慢来了，我本人的兴趣就是研究技术，所以引擎一般来说是夭折不了的，而且引擎开源，以后使用的人越来越多了，就算我不管了，也有其他高手来完善的，哈哈

不回答与技术和引擎不相关的问题

使用道具举报

cailven

2 主题	0 好友	42 积分

士兵

Rank: 1

发消息

8^#

发表于 2013-6-21 11:31:00 |只看该作者

lufy 发表于 2013-6-21 10:44
是啊，对于HTML5来说，全屏的处理相当麻烦，我现在也只是计算了一下viewport的值来完成全屏的，其实要修 ...

我昨晚想了一下，其实流程上可以这么做就方便很多了。在一开始建立项目的时候，先建立一个LSprite对象取名叫ViewPort,然后建立其他可视对象并addChlid到这个viewPort里面。这样只需要控制这个LSprite对象缩放和位置的变化，一切都可以解决了。我空下来做个demo试试看，做好之后我微博私信你。

使用道具举报

lufy

37 主题	8 好友	9312 积分

诸侯王

Rank: 15

发消息

9^#

发表于 2013-6-21 11:44:14 |只看该作者

cailven 发表于 2013-6-21 11:31
我昨晚想了一下，其实流程上可以这么做就方便很多了。在一开始建立项目的时候，先建立一个LSprite对象取 ...

这虽然算是一种方法，但是我个人不太提倡，一旦对底层的LSprite对象进行缩放，那么里面的坐标肯定会全都变成小数。对于canvas绘图来说，坐标是否取整直接影响绘图效率，在某些浏览器上可能会有8,9倍的差距，绘图效率对于HTML5来说本来就是硬伤，开发过程中应该尽量避免一些影响效率的算法等处理，滤镜等都要尽可能的用图片来代替。

不回答与技术和引擎不相关的问题

使用道具举报

cailven

2 主题	0 好友	42 积分

士兵

Rank: 1

发消息

10^#

发表于 2013-6-21 12:17:31 |只看该作者

lufy 发表于 2013-6-21 11:44
这虽然算是一种方法，但是我个人不太提倡，一旦对底层的LSprite对象进行缩放，那么里面的坐标肯定会全都变 ...

对的，还是要考虑性能优化。Js不像as3可以设置强类型，如果as3直接声明变量时候设置成int就好了。诶~~确实麻烦，照你写的那本书上说的Math类也会慢的话，坐标取整的算法也是一件挺麻烦的事情，但可以定义一个效率比较高算法,让坐标自动对齐到整数。

使用道具举报

12 / 2 页下一页

返回列表

		自动登录	找回密码
密码			立即注册