CocosCreator-安装和运行模板项目

目录

安装

模板项目

Demo开始

创建空白项目

设置编辑器语言

添加背景

创建文本

添加按钮

Button 点击事件

cocos creator 雅基软件 —— Cocos 引擎官方团队，出品的cocos起头名字起头的一系列软件都是免费的。

• 文档
• api

安装

官网地址：www.cocos.com 下载推荐版本

一路next，安装成功后，注册账号

如果密码正确，但是登陆不上，关闭软件，断网，再重新打开就好了，下载编辑器

模板项目

项目-新建-打开hello world模板项目，点击运行预览

Demo开始

创建空白项目

ctrl+w退出当前项目，创建空白项目：demo 

设置编辑器语言

 

添加背景

• 创建 assets/scene文件夹，创建一个Scene 场景文件，命名为 Main
• 创建 assets/script文件夹，存放脚本
• 创建 assets/images ，放入资源图片

双击main进入场景，然后点击并拖拽这个资源到 场景图层 中的根节点上，运行预览

切换横屏

创建文本

添加按钮

Button 属性

Target	Node 类型，当 Button 发生 Transition 的时候，会相应地修改 Target 节点的 SpriteFrame，颜色或者 Scale。
interactable	布尔类型，设为 false 时，则 Button 组件进入禁用状态。
Enable Auto Gray Effect	布尔类型，当设置为 true 的时候，如果 button 的 interactable 属性为 false，则 button 的 sprite Target 会变为灰度。
Transition	枚举类型，包括 NONE、COLOR、SPRITE 和 SCALE。每种类型对应不同的 Transition 设置。详情见下方的 Button Transition 部分。
Click Event	列表类型，默认为空，用户添加的每一个事件由节点引用、组件名称和一个响应函数组成。详情见下方的 Button 事件 部分。

Button Transition用来指定当用户点击 Button 时的状态表现。目前主要有 NONE、COLOR、SPRITE 和 SCALE 四种类型。

Button 点击事件

assets/script文件夹创建脚本 button.js，点击 属性检查器 下面的** 添加组件** 按钮，然后从** UI 组件**中选择自定义脚本

组件事件结构

偏好里面设置下打开的编辑器

 看了这么久的页面，熟悉的代码终于回来了

import { _decorator, Component, Event, Node, Button, EventHandler } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('ButtonJs')
export class ButtonJs extends Component {
    // [1]
    // dummy = '';

    // [2]
    // @property
    // serializableDummy = 0;

    start () {
        console.log("hello")
    }

    // update (deltaTime: number) {
    //     // [4]
    // }
    onLoad () {
        const clickEventHandler = new EventHandler();
        clickEventHandler.target = this.node; // 这个 node 节点是你的事件处理代码组件所属的节点
        clickEventHandler.component = 'ButtonJs';// 这个是脚本类名
        clickEventHandler.handler = 'callback';
        clickEventHandler.customEventData = 'foobar';
        
        const button = this.node.getComponent(Button);
        console.log(button); 
        button.clickEvents.push(clickEventHandler);
    }

    callback (event: Event, customEventData: string) {
        // 这里 event 是一个 Touch Event 对象，你可以通过 event.target 取到事件的发送节点
        // const node = event.target as Node;
        const button = this.node.getComponent(Button);
        console.log(customEventData); // foobar
    }
}