CocosCreator-安装和运行模板项目

2024-05-21 21:57:12

目录

安装

模板项目

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}
}

CocosCreator-安装和运行模板项目相关推荐

OpenMPI的安装与运行分布式项目
目录基于云服务器配置Hosts 配置免密登录运行分布式程序防火墙其它问题 1. MPI多节点执行:HYDU_sock_connect (utils/sock/sock.c:145): una ...
Linux nginx 安装部署运行前端项目
(1)nginx介绍 Nginx (engine x) 是一个高性能的HTTP和反向代理web服务器 [13] ,同时也提供了IMAP/POP3/SMTP服务.Nginx是由伊戈尔· ...
ABP框架 .net core 版本的安装与运行（vue模板）
1.首先当然去官网下载.net core vue模板 2.解压后用vscode打开aspnet-core 文件夹(后台项目) 3.Ctrl+~ 打开终端窗口,先biild一下,命令:dotnet bu ...
linux安装eclipse运行web,Linux安装Tomcat,运行Eclipse，web项目
到官网下载:https://tomcat.apache.org/download-80.cgi 在这里是8.5.39版本下载tar,gz 提取解压后,我这里是放到opt目录下 cd 切换目录 / ...
安装SBT环境运行Scala项目
介绍2种spark安装方式通过docker的方式安装下载docker文件 https://gitee.com/pingfanrenbiji/docker-spark docker-compose ...
vmware虚拟机上的centos安装Hadoop,以及在本地eclipse上运行mapReduce项目，并将文件输出到HDFS中...
注意centos主机名不支持下划线,所以文章中若出现centos_02.com,请替换为 centos02.com vmware虚拟机上的centos安装Hadoop 安装vmware虚拟机虚拟机上 ...
Linux 下配置JDK 并运行springboot项目进行访问 Tomcat的安装
前言记忆++1 步骤一.JDK安装我们开发java程序必须要的环境! 1.下载JDK rpm.去oralce 官网下载即可!(百度jdk即可) 2.安装java环境检测当前系统是否存在java ...
CentOS 安装 laradock 以及运行 Laravel 项目
Docker 官方文档 https://docs.docker.com/install/linux/dock... Laradock 官方文档 https://laradock.io/getting- ...
windows 安装配置 pycharm 创建项目并运行代码
windows 安装配置 pycharm 创建项目并运行代码 PyCharm 是由 JetBrains 打造的一款 Python IDE,支持 macOS. Windows. Linux 系统. Py ...

最新文章

热门文章