cocoscreator的游戏背景适配方案

1：该适配方案是针对横屏游戏的，竖屏游戏可作参考，这里先设置canvas默认分辨率为1280*720, 缩放模式为FitHeight

2:创建两个sprite单色的控件，背景控件bg和ui的控件，bg大小为1400*720， ui大小为1280*720

3：打开浏览器，调成1500*720的分辨率, 如果没有这个分辨率，可以在修改boot.js的文件进行新增, 参考路径D:\creator2.4.7\resources\static\preview-templates.boot.js

这里我们发现会两边留有黑边，其实，一般的手机宽高比为1.7到2.2之间，我们可以让美术出背景图为1500*720，这样背景图也就适配了大部分市面的手机了

4：如果宽高比大于1500/720时，还是会有黑边的，这时可以通过添加widget控件进行宽度的拉伸，去适配一些特殊宽高比的手机，代码如下，（ps:可以做成一个脚本组件，挂载到需要适配的背景图片节点上）

let bg = cc.find('bg', this.node)
let sprite = bg.getComponent(cc.Sprite)
let spWidth = sprite.spriteFrame.getTexture().widthlet screen_width = cc.winSize.width
if(screen_width > spWidth) {let widget = bg.addComponent(cc.Widget)widget.isAlignTop = truewidget.isAlignBottom = truewidget.isAlignLeft = truewidget.isAlignRight = truewidget.top = 0widget.bottom = 0widget.left = 0widget.right = 0
}

6：这里的cc.winSize的宽高会根据Canvas的FitHeight与FitWidth适配方案变化的，具体的求值为：

（1）canvas FitHeight缩放模式时 winSize

width求值公式为 frameSize.width / ? = frameSize.height / disignSize.height

height = disignSize.height
（2）canvas FitWidth缩放模式时 winSize

width = disignSize.width

height求值公式为 frameSize.width / disignSize.width = frameSize.height / ?
（3）canvas FitHeight与FitWidth模式同时设置时 winSize = 设计分辨率

其中的

frameSize = cc.view.getFrameSize(), 是指手机的分辨率

disignSize = cc.view.getDesignResolutionSize(), 是指设计分辨率，Canva属性里有对应的配置

cocoscreator的游戏背景适配方案相关推荐

微信小游戏开发之CocosCreator多分辨率场景适配方案
主题 Cocos Creator不同手机分辨率的背景图像和场景内容适配特别说明 CocosCreator微信小游戏开发系列文章,是我在逐步开发过程中,基于官方文档之上,记录一些重点内容,以及对官方文 ...
游戏开发29课 cocoscreator 多分辨率适配方案
多分辨率适配方案 Cocos Creator 3.0 在整体设计上沿用了 Cocos Creator 2.x 一套资源适配多种分辨率屏幕的方案.简单概括来说,我们通过以下几个部分完成多分辨率适配解决方 ...
【cocos2d-x 手游研发小技巧（3）Android界面分辨率适配方案】
先感叹一下吧~~android的各种分辨率各种适配虐我千百遍,每次新项目我依旧待它如初恋···· 每家公司都有自己项目工程适配的方案,这种东西就是没有最好,只有最适合!!! 这次新项目专项针对andr ...
Android屏幕适配框架-(今日头条终极适配方案)
2019独角兽企业重金招聘Python工程师标准>>> 在Android开发中,屏幕适配是一个非常头痛的问题,因而为了去进行屏幕适配,作为程序员,是呕心沥血,历经磨难,哈哈我们之前 ...
Android8.0运行时权限策略变化和适配方案
版权声明:转载必须注明本文转自严振杰的博客:http://blog.yanzhenjie.com Android8.0也就是Android O即将要发布了,有很多新特性,目前我们可以通过Android ...
全面屏适配方案,终极版,华为隐藏导航栏解决方案
全面屏适配方案,终极版,华为隐藏导航栏解决方案参考文章: (1)全面屏适配方案,终极版,华为隐藏导航栏解决方案 (2)https://www.cnblogs.com/lizhanqi/p/93371 ...
安卓屏幕适配方案(根据今日头条方案,升级版)
前言屏幕适配方案有很多,比如原生的dp,鸿洋大神的AutoLayout,宽高限定符,今天我用缺点比较小的今日头条方案头条适配方案的文章链接:https://mp.weixin.qq.com/s/d ...
Android 8.0 运行时权限策略变化和适配方案
Android8.0也就是Android O即将要发布了,有很多新特性,目前我们可以通过AndroidStudio3.0 Canary版本下载Android O最新的系统映像的Developer Pr ...
今日头条屏幕适配方案落地研究
目录前言各平板数据比较为什么看起来更小了?(头条方案跟最小宽度方案比较) smallesWidth 方案迁移优缺点 issue 附录(适配核心代码) 前言大家好,现在给大家推荐一种极低版本的 ...

cocoscreator的游戏背景适配方案

cocoscreator的游戏背景适配方案相关推荐

最新文章

热门文章