原创

Cocos Creator零基础游戏实战《左右跳》JS教程02-游戏主页

本章简介

每个游戏都有一个开始界面,本章介绍怎么使用Cocos Creator制作游戏的开始界面。我们的开始页面上有一个开始游戏的按钮,点击开始游戏按钮会跳转到游戏界面。

Cocos Creator创建游戏工程目录

在开发游戏之前,我们需要创建好游戏的目录,把需要的资源导入进去,并且创建一个game场景作为我们的游戏主页场景。

file

Cocos Creator开发竖屏游戏配置

我们在使用Cocos Creator开发工具创建一个项目时,默认是横屏游戏,如果开发竖屏游戏需要修改参数。
1.选中game场景。
2.点击Canvas节点。

file

在右侧属性检查器,我们发现设计分辨率宽(W)960高(H)640,勾选的是Fit Height适应高度,现在是横屏游戏,我们要设置成竖屏游戏,只需要把宽和高的参数进行互换,勾选Fit Width适应宽度CTRL + S 保存场景

file

Cocos Creator设计游戏主页布局

前面 一章详细介绍了游戏的分辨率适配方法,我们现在来做游戏主页的适配,看看效果怎么样。

1.创建背景节点,我们发现背景没有居中,我们在右侧属性检查器修改X,Y的参数为0,就可以实现居中。

file

2.运行看看效果,我们发现在iPhone X分辨率下,上面出现黑边。

file

3.因为我们选择的是宽度适应,所以高度我们要拉的更长,直到适应所有分辨率的高度,我们设置高度为1600。

file

file

4.背景有了,我们把开始按钮放上去看看效果。

file

5.游戏音乐开关布局,我们希望游戏开关始终在左上角,我们给它添加Widget组件。

file

file

通过脚本添加回调

游戏主界面我们布局好了,我们需要通过点击开始按钮来进入游戏场景。要实现点击跳转游戏场景功能,我们需要给按钮绑定回调函数。

1.创建一个名为game的游戏脚本来控制游戏的逻辑,并且把game脚本挂载在Canvas节点上。

file

2.打开game.js游戏脚本,添加一个开始游戏的回调函数代码,并保存。

onStartGame: function () {
        // 开始游戏
        console.log('开始游戏');
},

3.选中start节点,在右侧属性检查器添加Button组件

file

4.把start节点拖进Target选项Transition选择COLOR,Click Events的值修改为1。

file

5.把挂载开始游戏回调函数的节点拖进Click Events的脚本区域,我们刚才把带有游戏开始函数的game脚本挂载在Canvas节点上,所以把Canvas节点拖进Click Events的脚本区域,保存预览。

file

6.用谷歌浏览器打开,按下F12打开开发者模式,我们点击开始游戏,可以看到打印的日志,证明我们给开始按钮绑定回调函数成功。

file

7.同理,我们给音乐开关按钮也添加回调函数。

file

本章源码地址

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

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

正文到此结束
本文目录