原创

Cocos Creator零基础游戏实战《左右跳》JS教程01-屏幕适配

本章简介

要做好一个小游戏,最重要的就是游戏体验,怎样让游戏对于不同分辨率的设备适配是一个很重要的问题,本章内容详细介绍使用Cocos Creator开发工具解决屏幕适配

Cocos Creator官方文档《摘星星》示例

在学习使用Cocos Creator开发小游戏之前,我们先来看一篇Cocos Creator官方快速入门的游戏示例,里面对Cocos Creator开发工具有详细的介绍,大家先大概了解一下工具的使用,在脑海里对Cocos Creator游戏引擎有个大概的认识。

文档地址:https://docs.cocos.com/creator/manual/zh/getting-started/quick-start.html

创建一个空项目

用Cocos Creator开发工具创建一个空项目,命名为day01。我会用这个项目来做Cocos Creator制作游戏的分辨率适配示例

Cocos Creator配置模拟器分辨率

在开发过程中,我们需要有不同分辨率的设备来进行测试,确保我们的游戏在各种设备下能正常显示。Cocos Creator开发工具虽然自带了调试工具,并且默认有多种分辨率可以使用,但是这些分辨率远远不够,我们需要更多的分辨率来测试,其实我们可以通过修改配置文件,来满足我的要求。配置方式就是修改boot.js配置文件

1.点击右上角编辑器打开文件路径

2.找到 \static\preview-templates\boot.js

3.在boot.js文件添加:

{ name: 'Apple iPhone X/XS', width: 375, height: 812, ratio: 3 },
{ name: 'Apple iPhone XS Max', width: 414, height: 896, ratio: 3 },
{ name: 'Apple iPhone XR', width: 414, height: 896, ratio: 2 },
{ name: 'MX4', width: 576, height: 960 , ratio: 2 },

4.点击预览,我们发现已经添加进去。

到此我们学会了怎么在Cocos Creator开发工具配置分辨率。

创建文件目录

分别创建:scene目录,用了存放游戏场景;textures目录,用来存放游戏音乐和游戏动画等游戏资源;scripts目录,用来存放控制游戏进行的游戏脚本脚本。

游戏背景通过Widget组件适配

1.在资源管理器,创建一个名为game的场景,选中场景。
2.在层级管理器,选中Canvas。在右侧的属性检查器里修改对应参数,CTRL + S 保存。

3.把背景图片添加在Canvas节点下,设置旋转90度,CTRL + S保存。

4.打开预览发现有黑边

file

5.图片的宽度设置等于第2步设置的宽度,因为刚才图片旋转了90度,所以现在的高度H就是图片的宽度,我们设置H片的等于640图片的高度设置要尽可能的高,这样才能适配所有机型,我们设置W等于1600,看看效果。

file

file

游戏内容通过Widget组件适配

1.创建一个名为top的空节点
2.把图片摆放整齐。

file

file

3.我们需要中间这一块东西能在屏幕最上方,用到Widget组件

file

file

file

4.我们想要中间部分随着屏幕变化,自动填满。

file

5.我们只需要4个方向都勾上,调整好边距,就可以实现。

file

file

游戏内容通过代码适配

1.在一些极端的情况下,比如屏幕已经放不下了,这个时候只能通过代码缩放来实现适配。

2.iPhone5下面正常

file

3.iPad下面明显放不下

file

4.我们创建一个名为content_scale的脚本来控制缩放,从而达到适配效果。

5.打开content_scale.js脚本,在start方法里编写代码:

start () {
        if(cc.winSize.height < 854){ // 如果屏幕高度小于iPad
            //局部 缩放0.6
            this.node.scale = 0.6;
        }
 },

6.把编写好的content_scale.js脚本挂载到content节点上。

file

file

Cocos Creator屏幕适配视频

视频地址:https://www.bilibili.com/video/av50357029/

本章源码地址

码云地址:https://gitee.com/cbb123/day01

本章内容到此结束,觉得对你有帮助的记得收藏本站,谢谢老铁们的支持!

正文到此结束
本文目录