FK-坦克大战制作(一)菜单制作

1、Cocos Creator新建2d项目

FK-坦克大战制作(一)菜单制作_第1张图片

2.在资源管理器中新建场景menu

 新建scences文件夹=》新建场景=》改名为menu

3.在层级管理器的Canvas下新建Layout节点,并在此节点下新建Label标签

4.双击Label,在属性检查器中进行编辑

FK-坦克大战制作(一)菜单制作_第2张图片

5. 添加动画:(对文本进行放大缩小)

资源管理器新建animations文件夹,进行动画文件放置,新建boot动画,拖到动画编辑器中进行编辑,然后给Label添加Animation组件,将boot拉入cc.Animation的clips中

FK-坦克大战制作(一)菜单制作_第3张图片

6.按钮制作与交互

在Layout下新建Buttton节点,在button下新建Label节点

FK-坦克大战制作(一)菜单制作_第4张图片

修改Label信息

FK-坦克大战制作(一)菜单制作_第5张图片 

 在button中添加sprite组件,修改sprite Frame

FK-坦克大战制作(一)菜单制作_第6张图片

添加Button组件,在ClickEvent事件中添加事件处理

FK-坦克大战制作(一)菜单制作_第7张图片

在menu场景下新增Menu节点,并在资源管理器中新增script文件夹放置脚本,再次新建Menu文件夹,新建menu脚本:

 代码:

import { _decorator, Component, director, Node } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('Menu')
export class NewComponent extends Component {

    onLoad() {
        director.preloadScene("game");
    }


    //点击按钮转到game场景
    onBtnOne(){
        director.loadScene("game")
    }

    //多人游戏
    onBtnMore(){
        //自动匹配玩家,加入房间
    }

}

将menu脚本拖入Menu节点新增的自定义脚本script中

FK-坦克大战制作(一)菜单制作_第8张图片

 最终结果:

FK-坦克大战制作(一)菜单制作_第9张图片

 

你可能感兴趣的:(cocos2d)