cocos2d-js 3.0 屏幕适配方案 分辨率适应

首先介绍一个api和相应的参数:

cc.view.setDesignResolutionSize(1024, 768, cc.ResolutionPolicy.FIXED_WIDTH);

这里设置游戏制作的目标尺寸和显示的模式。

模式包括:

cc.ResolutionPolicy = {
    // The entire application is visible in the specified area without trying to preserve the original aspect ratio.
    // Distortion can occur, and the application may appear stretched or compressed.
    EXACT_FIT:0,
    // The entire application fills the specified area, without distortion but possibly with some cropping,
    // while maintaining the original aspect ratio of the application.
    NO_BORDER:1,
    // The entire application is visible in the specified area without distortion while maintaining the original
    // aspect ratio of the application. Borders can appear on two sides of the application.
    SHOW_ALL:2,
    // The application takes the height of the design resolution size and modifies the width of the internal
    // canvas so that it fits the aspect ratio of the device
    // no distortion will occur however you must make sure your application works on different
    // aspect ratios
    FIXED_HEIGHT:3,
    // The application takes the width of the design resolution size and modifies the height of the internal
    // canvas so that it fits the aspect ratio of the device
    // no distortion will occur however you must make sure your application works on different
    // aspect ratios
    FIXED_WIDTH:4,

    UNKNOWN:5
};

参考官方说明: http://www.cocos2d-x.org/wiki/Multi_resolution_support

EXACT_FIT会拉伸游戏,充满整个屏幕,最简单最粗暴;
SHOW_ALL保持游戏原比例,让一边占满屏幕,另外一侧黑边;
NO_BORDER跟SHOW_ALL类似,但让短边占满屏幕,另外一侧超出屏幕,不显示黑边,一部分画面在屏幕外,无法显示;
FIXED_WIDTH和FIXED_HEIGHT都是NO_BORDER的升级版,指定那一侧充满屏幕,另外一侧超出屏幕。

这里建议使用FIXED_WIDTH和FIXED_HEIGHT,其他用法请参考:

http://www.cocoachina.com/game/20130513/6180.html

http://www.cocoachina.com/cocos/20140516/8451.html

这两个方案适合UI沿着屏幕边缘布局,而游戏画面居中,游戏背景则可以裁剪(显示一部分)的情况。

通过上边的文章,我们知道winSize,visibleSize,designSize(自己的设计尺寸)。

无论什么方案,winSize和visibleSize是一致的,cc.director.getWinSize()和cc.director.getVisibleSize()获取到一样的数据。

以FIXED_WIDTH为例

布局过程中,横向就按照设计稿直接写死绝对坐标值都可以,因为cc.director.getVisibleSize().width就是我们的设计宽度,cocos2d通过缩放会让横向刚好占满屏幕;

而纵向,就利用cc.director.getVisibleSize().height来布局。

y=0表示刚好在屏幕边缘,在FIXED_WIDTH方案中,不像NO_BORDER会有visibleOrigin,这里不需要考虑这个值,因为总是0,cocos2d自动把y=0放到这个visibleOrigin位置了。

而屏幕上方则使用cc.director.getVisibleSize().height - 20类似的方式来布局。

这里的20也会随着整个画面的压缩比例而变小。

例如设计宽高为1024*768,但实际放到725*225的区域运行,那么cc.director.getVisibleSize()获取到的是(1024, 315)左右。实际上这个尺寸并不是真实屏幕尺寸,但可以按照这个数值进行布局。

屏幕尺寸

另外cc.view.getFrameSize可以获取屏幕尺寸

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏闻道于事

js登录滑动验证,不滑动无法登陆

js的判断这里是根据滑块的位置进行判断,应该是用一个flag判断 <%@ page language="java" contentType="text/html...

6828
来自专栏一个爱瞎折腾的程序猿

sqlserver使用存储过程跟踪SQL

USE [master] GO /****** Object: StoredProcedure [dbo].[sp_perfworkload_trace_s...

2060
来自专栏跟着阿笨一起玩NET

c#实现打印功能

2772
来自专栏落花落雨不落叶

canvas画简单电路图

62011
来自专栏一个会写诗的程序员的博客

Spring Reactor 项目核心库Reactor Core

Non-Blocking Reactive Streams Foundation for the JVM both implementing a Reactiv...

2152
来自专栏hbbliyong

WPF Trigger for IsSelected in a DataTemplate for ListBox items

<DataTemplate DataType="{x:Type vm:HeaderSlugViewModel}"> <vw:HeaderSlug...

4064
来自专栏芋道源码1024

熔断器 Hystrix 源码解析 —— 断路器 HystrixCircuitBreaker

本文主要基于 Hystrix 1.5.X 版本 1. 概述 2. HystrixCircuitBreaker 3. HystrixCircuitBreaker....

5327
来自专栏pangguoming

Spring Boot集成JasperReports生成PDF文档

由于工作需要,要实现后端根据模板动态填充数据生成PDF文档,通过技术选型,使用Ireport5.6来设计模板,结合JasperReports5.6工具库来调用渲...

1.2K7
来自专栏菩提树下的杨过

Flash/Flex学习笔记(23):运动学原理

先写一个公用的小球类Ball: package{ import flash.display.Sprite; //小球 类 public class B...

25310
来自专栏飞扬的花生

jsencrypt参数前端加密c#解密

      写程序时一般是通过form表单或者ajax方式将参数提交到服务器进行验证,如何防止提交的请求不被抓包后串改,虽然无法说绝对安全却给非法提交提高了难度...

3869

扫码关注云+社区