【CocosCreator入门教程(1)】——混个脸熟

最新推荐文章于 2025-07-17 16:00:27 发布
原创 最新推荐文章于 2025-07-17 16:00:27 发布 · 8.3k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#cocos #Creator #教程

本教程介绍Cocos Creator 1.3以上版本的安装及基本使用方法，涵盖下载、安装、登录过程，并详解编辑器各部分功能，如层级管理器、资源管理器等，适合初学者快速上手。

本系列教程使用1.3以上版本

下载安装

http://www.cocos.com/download
安装过程中如果有小问题参考官方文档
http://www.cocos.com/docs/creator/getting-started/install.html
安装完后需要登陆，账号注册https://passport.cocos.com/auth/signup
打开后你就会看到这个界面
这里写图片描述

  1. Hello World工程里包括了一个简单游戏场景
  2. 空白项目就是空白项目。。。。
  3. 范例集合里有游戏的各个功能的示例，自学的好帮手

我们选择Hello World工程先来看看我们这个她长什么样子

编辑器界面

首先，我们要双击那个像火苗的文件，也就是场景文件，打开helloworld场景就会看见入下图的界面
这里写图片描述

A:层级管理器

显示场景里节点的位置关系
节点就是游戏里的基本元素单位，比如玩家可以是个节点，子弹也可以是个节点
层级管理器里越靠下的节点在场景里越靠前（距离屏幕越近）

B:资源管理器

存储游戏资源
支持直接拖入

C:场景编辑器

D:控制台

E:控件库

基本没用，我们点右上角把他关了，或者放在属性旁边

F:属性检查器

显示编辑器中各种元素的属性，比如点击节点就会显示节点的属性，点击图片资源就会显示图片资源的属性，在属性面板上可以进行一些相应的操作

点击一下上面的三角按钮，就可以进行预览了（可以选择模拟器和浏览器）
这里写图片描述

外部编辑器

官方支持使用VS Code，那就用吧

今天的课就到这里，下面请同学们自习。。。

有什么问题可以在下面留言

Cocos Creator引擎开发：Cocos Creator基础入门_（4）.创建第一个项目
chenlz2007的博客
04-24 784
在本节中，我们将详细介绍如何在Cocos Creator中创建你的第一个虚拟现实游戏项目。从安装Cocos Creator到创建项目的基本步骤，再到项目的初始结构和一些基础操作，你将逐步了解如何开始你的游戏开发之旅。首先，你需要在你的计算机上安装Cocos Creator。Cocos Creator支持多种操作系统，包括Windows、macOS和Linux。以下是安装步骤：下载安装包：访问Cocos官方网站（https://www.cocos.com/creator）。在下载页面选择适合你操作系统的Coc
CocosCreator教程（入门篇）
标题
09-20 1万+
目录一、项目结构二、资源分类三、资源小知识点四、场景小知识点五、子系统重点六、脚本开发七、发布游戏 系列教程CocosCreator教程（初识篇）CocosCreator教程（编辑器篇） 一、项目结构 ProjectName（新建项目） ├──assets ├──library ├──local ├──packages ├──settings ├──temp └──project....
最新Cocos Creator 3.8.x免费教程资源盘点！
最新发布
Cocos的博客
07-17 117
Cocos Creator 使用 TypeScript 进行逻辑开发，如果没有系统学习过的小伙伴，可以优先看下面的教程。Cocos Creator 3.8 版本发布以来，越来越多开发者选择用它来打造高品质的 2D 和 3D 游戏。2D 休闲合成游戏案例，完整讲解金币合成类休闲游戏的开发流程，适合想做合成消除类游戏的开发者。3D 类解压游戏案例，如何实现 3D 碰撞系统，渲染深度模版，射线检测遮挡透视等功能。2D Roguelike 策略游戏，打造类似《背包英雄》的背包管理与回合制战斗游戏。
CocosCreator教程（入门篇）【转】
Globalizationa的博客
01-27 2984
目录一、项目结构二、资源分类1、场景（scene）2、贴图（texture）3、预制（prefab）4、图集（atlas）5、自动图集（auto-atlas）6、艺术数字（label-atlas）7、字体（font）8、粒子（particle）9、声音（audio）10、骨骼动画（spine / dragonBones）11、瓦片图（tiledMap）12、文本（text）13、脚本（script）14、json三、资源小知识点1、跨项目导入导出资源2、图像资源自动剪裁四、场景小知识点1、场景中的...
Cocos Creator入门教学（全而简单版）
前方的路在刚开始
07-07 2277
摘要：作者利用周末时间学习使用CocosCreator游戏引擎开发一款2D横板竞速游戏《战士勇敢向前冲》。文章详细记录了从引擎安装（选择2D模板）、界面介绍（层级/资源/场景编辑器等），到实现角色移动功能的全过程：导入自制角色素材，创建控制脚本绑定方向键操作，并通过代码实现像素级移动。作为国产开源引擎，CocosCreator支持中英文切换，适合新手入门2D/3D游戏开发。
【CocosCreator入门】CocosCreator项目创建 | 面板介绍
看世界，也找自己
01-12 3469
Cocos Creator 编辑器由多个面板组成，面板可以自由移动、组合，以适应不同项目和开发者的需要。
cocos creator主程入门教程（一）—— 初识creator
houjia159的专栏
09-05 1807
我们在cocos creator新建一个Hello TypeScript项目，都会有一个assets/Scene/helloworld.fire文件。使用cocos creator开发游戏时，项目可以只有一个.fire文件。一般地，我会把这个文件夹改名为assets/scene，下面只有main.fire文件：assets/scene/main.fire。 双击main.fire文件，在层级管理器可以看到它的结构， 根节点是一个Canvas，点击Canvas节点，在右边的属性面板可以看到C.
cocos creator入门教程（五）—— cc.Node坐标空间
标题
08-27 1732
cc.Vec2 cc.Vec2 二维向量坐标, 表结构{x: 120, y: 120}; cc.v2(x, y) 创建一个二维向量 cc.p() 创建一个二外向量 cc.pSub: 向量相减 cc.pAdd: 向量相加; cc.pLength: 向量长度; //坐标位置3种方法--1 var w_pos = new cc.Vec2(100,100)...
cocos creator入门教程（七）—— cc.Component使用
标题
10-09 1497
组件入口函数 1: onLoad: 组件加载的时候调用, 保证了你可以获取到场景中的其他节点，以及节点关联的资源数据 2: start: 也就是第一次执行 update 之前触发 3: update(dt):组件每次刷新的时候调用,距离上一次刷新的时间(会在所有画面更新前执行) 4: lateUpdate(dt) 刷新完后调用(会在所有画面更新后执行); 5: onEnable: 启用这...
cocos creator入门教程（二）—— UI组件和JS脚本事件绑定
标题
08-13 4311
刚接触creator的新手，可能会比较迷茫：我在UI上编辑好了界面了，里面加的按钮，如何在js脚本上触发功能呢？这一小节我们就来学习这个功能。 首先上一张编辑好的UI图，带几个按钮的： 上图中有5个按钮，客服、注册、游客登录、微信登录、账号登录； 对应的脚本如下： 我们简单的写了5个事件函数，功能就是打印输出信息； 准备工作做完了，下面我们来实现UI和js的绑定； 如上图，...
cocos creator入门教程（九）—— Button组件使用详解
标题
10-09 2789
cc.Button使用 cc.Button 1:添加按钮的方法 (1)直接创建带Button组件的节点; (2) 先创建节点，再添加组件; 2:按钮组件, 按钮是游戏中最常用的组件, 点击然后响应事件; 3: 按钮的过渡效果: 过渡: 普通状态, 鼠标滑动到物体上, 按下状态, 禁用状态 (1)没有过渡，只有响应事件; (2)颜色过渡, 过...
CocosCreator教程demo集合
07-01
CocosCreator教程demo集合
CocosCreator
03-08
Cocos Creator 是以内容创作为核心的游戏开发工具，在 Cocos2d-x 基础上实现了彻底脚本化、组件化和数据驱动等特点。
Cocos Creator教程 ——（一）Hello World
然后就去远行
10-23 1万+
目录一、新建项目欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 一、新建项目 我们先通过一个简单的项目了解Cocos的基本结构； 打开cocos creator，在下面界面中选择"new"，然
Cocos Creator 开发入门
路漫漫亦无涯
03-21 1万+
Cocos Creator 开发入门 H5小游戏，基本都是用的Cocos Creator和LayaBox，egret 这三款引擎IDE。 Cocos Creator官网：https://www.cocos.com/ LayaBox 官网：http://www.layabox.com/。 我入门微信小游戏开发就是从Laya开始的，所以对laya会有特殊的感情。值得一提的是，laya因为有腾讯入股，所以技术支持还是很大方的。 白鹭官网：https://www.egret.com/ 今天主要说下 Cocos
cocos creator入门教程（一）—— 初识creator
热门推荐
标题
08-10 1万+
一、我们在cocos creator新建一个Hello JavaScript项目，都会有一个assets/Scene/helloworld.fire文件。使用cocos creator开发游戏时，项目可以只有一个.fire文件。一般地，我会把这个文件夹改名为assets/scene，下面只有main.fire文件：assets/scene/main.fire。资源管理器结果图如下： 本地目录...
1、Cocos Creator 基础入门
qq_38248841的博客
03-29 1579
Cocos Creator 目前支持发布游戏到 Web、iOS、Android、各类"小游戏"、PC 客户端等平台，真正实现一次开发，全平台运行。Cocos Creator 既是一款高效、轻量、免费开源的跨平台 2D&3D 图形引擎，也是一个实时 2D&3D 数字内容创作平台。：它是一个完整的游戏开发解决方案，包含了轻量高效的跨平台游戏引擎，以及能让你更快速开发游戏所需要的各种图形界面工具。：完全为引擎定制打造，包含从设计、开发、预览、调试到发布的整个工作流所需的全功能一体化编辑器。
【CocosCreator入门教程(0)】——写在前面
Next的博客
10-26 5047
你们要的Creator新手教程，来了本系列教程面向纯新手（高手我也教不来），但我默认你用过一种编程语言（不一定是JavaScript）之前我也写过一些小游戏实战的博客，但高手不会看，新手又看不懂，所以碰到很多人来问我跟游戏本身并没有多大关系的问题，比如那篇介绍Tiledmap的教程，那是我很早以前写的，后来Creator更新，Tiledmap组件里的loadmap方法取消了，所以用新版本的Creat
CocosCreater 教程（中）
L的博客
11-19 2652
CocosCreater学习
cocos creator引导手
02-13
### Cocos Creator 入门教程引导 对于初学者而言，掌握Cocos Creator的基础知识至关重要。通过创建简单的项目来熟悉环境是非常有效的学习方法。 #### 创建首个Cocos Creator项目 启动Cocos Creator后，在欢迎界面选择“新建项目”，输入项目名称并指定保存路径。这一步骤简单直观，适合初次使用者快速上手[^2]。 #### 探索编辑器布局与功能区 打开项目后，默认会展示场景编辑器、资源管理器等多个面板。这些工具栏和菜单项提供了丰富的操作选项，帮助开发者高效完成游戏制作中的各项任务。建议新手花时间浏览各个区域的功能特性，理解其用途所在[^1]。 #### 编写第一个脚本 利用JavaScript语言编写的自定义逻辑是驱动游戏行为的核心手段之一。可以通过继承`cc.Component`类来自动生成基础结构： ```javascript const MyComponent = cc.Class({ extends: cc.Component, properties: { // 定义公开属性 }, onLoad() { console.log('组件已加载'); }, }); ``` 此代码片段展示了如何声明一个带有生命周期回调函数的组件实例[^5]。 #### 实现交互效果——以按钮点击为例 为了使UI元素具备响应能力，通常会在关联的脚本文件内监听特定事件的发生，并据此触发相应的处理流程。例如设置按钮按下后的跳转页面或播放音效等功能[^3]。 #### 学习更多高级特性和最佳实践 随着技能水平逐步提升，可深入研究动画系统、物理模拟等方面的知识点；同时关注官方文档获取最新资讯和技术支持[^4]。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值