ocos2d-JS 屏幕适配相关内容
来源:互联网 发布:怎样做淘宝返利群 编辑:程序博客网 时间:2024/05/16 09:30
监听浏览器窗口大小变化事件 :
新的适配方案允许在浏览器大小变化的时候自动重新尝试适配。比如说,当用户拖拽来改变浏览器大小,或者更有用的情况,当他们转动自己手机方向的时候。游戏中任意时刻都可以开启这种行为,只需要调用cc.view的resizeWithBrowserSize函数:
<code class="hljs avrasm has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">cc<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.view</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.resizeWithBrowserSize</span>(true)<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>
为了更灵活得应对变化,我们为cc.view提供了一个新的函数,你可以通过setResizeCallback函数注册一个回调函数来监听浏览器窗口大小变化事件:
<code class="hljs javascript has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">cc.view.setResizeCallback(<span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">()</span> {</span> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 做任何你所需要的游戏内容层面的适配操作</span> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 比如说,你可以针对用户的移动设备方向来决定所要应用的适配模式</span>});</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li></ul>
Fullscreen API :
Fullscreen API是浏览器允许Web页面在获得用户全屏幕的一个新的制定中的API。
Cocos2d-JS在移动端浏览器中会尝试自动进入全屏幕来给用户更好的游戏体验(需要指出并不是所有浏览器都支持这个API)。
另一方面,桌面端几乎所有现代浏览器都支持Fullscreen API,如果你希望使用这个API,Cocos2d-JS也简化了它的使用方式:
尝试进入全屏模式(需要用户交互):
<code class="hljs avrasm has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">`cc<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.screen</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.requestFullScreen</span>(targetElement,onFullScreenCallback)<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;`</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>
检测是否处于全屏模式 :
<code class="hljs avrasm has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">cc<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.screen</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.fullScreen</span>()<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>
退出全屏模式 :
<code class="hljs avrasm has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"> cc<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.screen</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.exitFullScreen</span>()<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>
获取当前尺寸 :
<code class="hljs avrasm has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">cc<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.view</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.getFrameSize</span>()</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>
main中添加 :
<code class="hljs avrasm has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">cc<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.view</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.enableAutoFullScreen</span>(false)<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">; //true : 可以自动全屏</span> //false : 不可以自动全屏 //添加在cc<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.view</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.setDesignResolutionSize</span>的前面//cc<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.view</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.setDesignResolutionSize</span>(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">640</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">960</span> , cc<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.ResolutionPolicy</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.SHOW</span>_ALL)<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span></code>
0 0
- ocos2d-JS 屏幕适配相关内容
- Cocos2d-JS 屏幕适配相关内容
- js 相关内容
- Cocos2d-JS屏幕适配
- cocos-js,屏幕适配
- cocos2d js屏幕适配
- js适配屏幕大小
- JS打印相关内容
- iOS适配的相关内容的整理
- iOS适配的相关内容的整理
- cocos2d-js 新手入门 2.屏幕适配
- 适配手机端屏幕js代码
- Android屏幕保护KeyguardManager相关内容学习
- Android屏幕保护KeyguardManager相关内容学习
- Android屏幕保护KeyguardManager相关内容学习
- Android屏幕保护KeyguardManager相关内容学习
- Android屏幕保护KeyguardManager相关内容学习
- Android屏幕保护KeyguardManager相关内容学习
- 【并查集】Mushroom的区间
- ListView之ViewHolder类封装
- CentOS 安装配置JDK与Tomcat支持jsp文件解析
- 【十月总结】2016.10.31
- hdu 1709 普通母函数
- ocos2d-JS 屏幕适配相关内容
- Hive调优(语法与参数层面优化)
- stm32 ADC基础配置
- 如何查询oracle执行计划_总结
- 北京新闻客户端
- 查询单词在文章中出现的行和行数
- 改变UITextField的光标颜色
- javascript-ui 滑块
- 09-表格标记