CocosCreator项目实战(1):基本场景搭建

时间:2024-03-14 07:46:26


一、背景搭建

  1. 在资源管理器assets目录下右击新建文件夹,新建几个目录。
    scenes:场景目录;
    scripts:脚本目录;
    prefabs:预置资源目录 。

CocosCreator项目实战(1):基本场景搭建

  1. 在scenes目录下新建Scene,命名为game,双击game进入game场景。

CocosCreator项目实战(1):基本场景搭建

  1. 因为是手机竖屏小游戏,点击层级管理器Canvas设置宽720高1280,并且勾选自动缩放

CocosCreator项目实战(1):基本场景搭建

  1. 在Canvas下右击创建渲染节点Sprite(单色)节点命名为bg作为背景层,在右下角添加组件 -> UI组件 -> Widget,调整四条边与父节点的差值均设置为0.00px,点击上方Color属性,输入颜色值#F9F7EC

CocosCreator项目实战(1):基本场景搭建

  1. 可预先调整锚点Anchor至左下角方便之后数字块的相关设置。

CocosCreator项目实战(1):基本场景搭建


二、游戏标题与分数标签

  1. 右击bg创建渲染节点Label(文字)命名为titleLabel,设置字体String为2048,大小为100,文字行高106(免某些中文字体高度超过行高),Color为#6C635A,添加Widget组件设置居中对齐,向上拖动到合适的位置。

CocosCreator项目实战(1):基本场景搭建

  1. 同理,右击bg创建渲染节点Label(文字)命名为scoreLabel,设置字体String为Score: 0,大小为40,文字行高46,Color为#B2A396,添加Widget组件设置居中对齐,向上拖动到合适的位置。

CocosCreator项目实战(1):基本场景搭建


三、预览

  1. 点击Cocos Creator正中间预览按钮,会进入浏览器进行预览。

CocosCreator项目实战(1):基本场景搭建

  1. 至此,游戏基本场景已搭建完成。