Cocos Creator游戏开发教程
Cocos Creator游戏开发教程_60集教学视频
https://www.bilibili.com/video/BV1sA411Y7x4
2 4
三 1.1 课程内容
2020/731
游戏开发
本课程学的是什么?2D小游戏开发I小游戏:可以发布到微信小游戏、支付宝小游戏、华为快游戏、小米快游戏、头条小游戏等手游:支持 Android/iOS 发布桌游:支持Windows/Mac 发布页游:支持 Web 发布
游戏开发
我们能做什么游戏?
2D小游戏
例如:打地鼠、连连看、扫雷、迷宫、学习认字、俄罗斯方块、贪吃蛇、棋牌类、射击类游戏等
(若有美工配合,几乎无所不能)
游戏开发
本课程用的是什么?Cocos Creator开发平台:Cocos Creator 2.4.2开发语言:JavaScript/TypeScript后面还有Cocos Creator 3D,与Unity类似
扣扣 kelete
https://docs.cocos.com/creator/manual/zh/publish/
游戏开发
学习之前要做什么准备?
会一点 JavaScript
-会一点程序设计
参考Swing入门篇、Swing高级篇游戏中的程序设计,难度低于Swing高级篇
课程资料下载
相关资料:课件、文档、素材、软件、项目源码
官网地址:http://afanihao.cn
百度搜索‘阿发你好’
课件与资料下载
技术演示(1)飞机大战
技术演示:飞机大战
飞机大战游戏
所需技术:
Cocos Creator入门教程
Cocos Creator进阶教程
2.1 Cocos Creator的安装
Cocos Creator的安装
4
Cocos的官网:https://www.cocos.com/
Cocos Creator
Cocos Creator 3D
Cocos2d-x 代码集中
本课程的演示版本:Cocos Creator 2.4.2
2.2 创建项目
创建项目
打开Dashboard界面,首次需要登录用户Project:最近项目列表Editor:编辑器
Community:官网的一些新闻Learn:一些网络教程提示:此界面可能有更新,以网盘中的视频演示为准
start_project
example02
要点与细节
Dashboard相当于一个综合性的网络客户端
真正的游戏制作在Cocos Creator中完成
3.1编辑器界面
编辑器界面
几个常用的面板:
资源管理器:图片、声音、脚本等文件
场景编辑器:显示游戏场景
层级管理器:用于管理场景中的节点
属性检查器:显示节点或资源的属性参数
控制台:显示一些日志和编译信息
3.2 添加场景
添加场景
场景,Scene,就是一个游戏里的场景演示:小猪佩琪场景1:家中
场景2:户外
显然,这个游戏/动画中,至少有两个场景
要点与细节
1后面的练习中,一般只添加一个主场景2 资源名称一般用英文
(字母、数字、下划线、空格)
3.3 添加资源
添加资源
资源Asset,指游戏里用到的素材、脚本等数据文件比如,常用的几种类型:
Texture 图片素材(.jpg/.png)
AudioClip 音频素材(.mp3)
JavaScript/TypeScript程序脚本(.js/*.ts)
资源的管理
1可以任意添加子目录,分类管理素材2素材会保存到项目的 assets目录下可以在文件夹窗口中查看
每一条素材/目录,对应一个*.meta文件素材的增删、重命名操作,请在Cocos Creator中完成
4.1 场景编辑器
场景编辑器
场景编辑器中,能看到什么?
1网格,每一格大小为100像素2 世界坐标系
y轴向上为正
x x轴向右为正
y
3紫色框,表示设计分辨率,默认960x640
场景编辑器
鼠标鼠标操作:
-鼠标滚轮,放大/缩小视图
-鼠标右键拖拽,平移视图
数据驱动
以Canvas为根节点,把图片节点添加到Canvas下面
4.2 添加节点
4.3 节点的操作
节点操作
节点的4个操作:
移动 position
旋转 rofation
缩放 scale
矩形变换 size
要点与细节
相关操作,可以参考官方文档的说明1 这4个节点操作工具,可以用 w,e,r,t 键切换2如果精确的设定,应该在属性检查里来指定各个参数
4.4 位置与锚点
位置与锚点
锚点Anchor,定义一个代表节点位置的点当我们说一个节点的位置,具体的是指它的锚点所在位置
图片 position 相对canvas
4.5 游戏的运行
5.1 添加图片节点
添加图片节点
节点,Node图片节点,就是一个能显示图片的节点
添加图片节点第一种方式:
-直接将图片素材,拖拽到层级管理器
-观察属性检查器
Sprite I Sprite Frame 一项注:Sprite是游戏开发中术语,表示图片
5.2 添加文本节点
添加文本节点
添加一个Label节点,用于显示文本在属性检查器里:Label,称为组件
String,Font,Font Size,称为组件的属性
文本节点 =Node + Label
5.3 添加UI节点
添加UI节点
UI节点,用于实现用户的输入比如,按钮 Button、输入框 EditBox类似于普通窗口应用开发里的各种控件
5.4 节点与组件
节点与组件
节点,Node组件,Component,表示一个功能比如,Sprite组件,用于显示一个图片Label 组件,用于显示一个文本
节点与组件
1节点本身没有类型,真正起作用的是组件图片节点 = Node + Sprite
2 一个节点可以挂载多个组件
不过,渲染类组件只能挂一个,不能同时挂Sprite和Label
5.5 父子节点
父子节点
节点下面可以添加子节点,称为父子关系演示:
1 添加一个图片节点
2 在图片节点下面,添加一个子节点 Label
6.1 VSCode环境
程序脚本
程序脚本,是游戏的灵魂
I支持的脚本语言:JavaScript/TypeScript
6.2 创建游戏脚本
组件绑定脚本
6.3 脚本的运行
脚本的运行
脚本的运行原理:
1 游戏引擎加载所有节点2 加载节点的所有的组件
var comp = new PigScript();node["PigScript"]= comp;comp.onLoad();comp.start();
生命期回调
生命期回调 Life-Cycle Callback
onLoad()组件初始化时执行 I
start()第一次激活前执行
update()每帧执行
onEnable()组件启用时调用
onDisable()组件禁用时调用
onDestroy()组件销毁时调用
要点与细节
以模拟器方式运行时,日志出现在 Cocos 控制台里以浏览器方式运行时,日志出现在开发者工具(F12)的控制台里。
I
6.4 事件响应处理
事件响应处理
事件处理,和HTML里的JavaScript事件类似点击事件 mousedown/mouseup/mousemove...
键盘事件 keyup/keydown触摸事件 touchstart/touchend/touchcancel...
具体会在课程用到的时候再仔细说明
this:当前组件
this.node:当前节点
注意:this.moveLeft 传入方法名,不要加括号Load()
// Learn TypeScript:
// - https://docs.cocos.com/creator/manual/en/scripting/typescript.html
// Learn Attribute:
// - https://docs.cocos.com/creator/manual/en/scripting/reference/attributes.html
// Learn life-cycle callbacks:
// - https://docs.cocos.com/creator/manual/en/scripting/life-cycle-callbacks.html
const {ccclass, property} = cc._decorator;
@ccclass
export default class NewClass extends cc.Component {
@property(cc.Label)
label: cc.Label = null;
@property
text: string = 'hello';
// LIFE-CYCLE CALLBACKS:
onLoad () {
this.node.on('mousedown',this.moveLeft,this);
}
start () {
cc.log('hello world')
}
moveLeft(){
this.node.x-=200
}
// update (dt) {}
}
6.5 脚本的调试
浏览器
选择手机尺寸横屏/竖屏日志输出级别
显示帧率 FPS Recompile:重新编译
当脚本修改变化后,点Recompile按钮,重新加载。。
7.1 TypeScript
属性的定义
在TypeScript添加一个类,类里可以添加属性形式如下:
@property("string")time:string ="";其中,@property称为装饰器(同Java中的注解语法)
@property 加这个出开发工具显示
属性的定义
属性的定义规则:
1若无@property注解,则不会出现在Cocos Creator属性面板2@property中,应该指明类型@property("string")
@property(cc.Node)
3 基本类型,可以不指定类型
string,number,boolean,bigint
TypeScript里有number和Number两种类型
number算是基本类型
Number算是引用类型(对象)
@property
namelavel:string='koo'
如果内置有不能覆盖
7.2 属性的定义
7.3 基本类型的属性
属性的应用
属体一般分为两种类型:
-基本类型
string,number,boolean,bigint引用类型
cc.Node 节点
cc.SpriteFrame 图片帧资源cc.AudioClip 音频资源I
1一个脚本,可以重复使用,应用于多个节点2脚本组件的属性,可以在属性面板里指定初始值
// Learn TypeScript:
// - https://docs.cocos.com/creator/manual/en/scripting/typescript.html
// Learn Attribute:
// - https://docs.cocos.com/creator/manual/en/scripting/reference/attributes.html
// Learn life-cycle callbacks:
// - https://docs.cocos.com/creator/manual/en/scripting/life-cycle-callbacks.html
const {ccclass, property} = cc._decorator;
@ccclass
export default class NewClass extends cc.Component {
// @property(cc.Label)
// label: cc.Label = null;
// @property
// text: string = 'hello';
// @property
// namelavel:string='koo'
@property
flag:boolean=true
@property
step:number=20
// LIFE-CYCLE CALLBACKS:
onLoad () {
this.node.on('mousedown',this.move,this);
}
start () {
cc.log('hello world')
}
move(){
if(this.flag){
this.node.x-=this.step
}else{
this.node.x+=this.step
}
}
// update (dt) {}
}
7.4 引用类型的属性
// Learn TypeScript:
// - https://docs.cocos.com/creator/manual/en/scripting/typescript.html
// Learn Attribute:
// - https://docs.cocos.com/creator/manual/en/scripting/reference/attributes.html
// Learn life-cycle callbacks:
// - https://docs.cocos.com/creator/manual/en/scripting/life-cycle-callbacks.html
const {ccclass, property} = cc._decorator;
@ccclass
export default class NewClass extends cc.Component {
// @property(cc.Label)
// label: cc.Label = null;
// @property
// text: string = 'hello';
// @property
// namelavel:string='koo'
@property
flag:boolean=true
@property
step:number=20
@property(cc.AudioClip)
audio:cc.AudioClip=null
// LIFE-CYCLE CALLBACKS:
onLoad () {
this.node.on('mousedown',this.move,this);
}
start () {
cc.log('hello world')
}
move(){
if(this.flag){
this.node.x-=this.step
}else{
this.node.x+=this.step
}
if(this.audio!==null){
cc.audioEngine.play(this.audio,false,1)
}
}
// update (dt) {}
}
8.1 API获取节点
API 获取节点
1当前节点this.node:cc.Node例如 let node:cc.Node = this.node;
2 父节点 this.node.parent
3子节点 this.node.children:cc.Node[]
4 全局查找
例如target = cc.find("Canvas/佩奇/名字")
5 查找子节点
例如 target = cc.find("xx/yy",someNode)
// Learn TypeScript:
// - https://docs.cocos.com/creator/manual/en/scripting/typescript.html
// Learn Attribute:
// - https://docs.cocos.com/creator/manual/en/scripting/reference/attributes.html
// Learn life-cycle callbacks:
// - https://docs.cocos.com/creator/manual/en/scripting/life-cycle-callbacks.html
const {ccclass, property} = cc._decorator;
@ccclass
export default class NewClass extends cc.Component {
onLoad () {
this.node.on('mousedown',this.onClick,this);
}
start () {
}
onClick(){
let node:cc.Node=cc.find('Canvas/3')
node.setPosition(0,20)
}
// update (dt) {}
}
8.2 API获取组件
API 获取组件
对于已经节点node,可以获取它挂载的组件对象获取组件
let label = node.getComponent(cc.Label)
获取自定义类型的组件(脚本组件)
let script = node.getComponent("YourScript")
// Learn TypeScript:
// - https://docs.cocos.com/creator/manual/en/scripting/typescript.html
// Learn Attribute:
// - https://docs.cocos.com/creator/manual/en/scripting/reference/attributes.html
// Learn life-cycle callbacks:
// - https://docs.cocos.com/creator/manual/en/scripting/life-cycle-callbacks.html
const {ccclass, property} = cc._decorator;
@ccclass
export default class NewClass extends cc.Component {
onLoad () {
this.node.on('mousedown',this.onClick,this);
}
start () {
}
onClick(){
let node:cc.Node=cc.find('Canvas/bg/name')
let label:cc.Label=node.getComponent(cc.Label)
label.string='my have ting'
}
// update (dt) {}
}
8.3 脚本组件的访问
脚本组件的访问
组件:
系统自带的组件,如cc.Label,cc.Sprite自定义的组件,如脚本组件
脚本组件,也是可以在代码中访问的。
onClick(){
let node:cc.Node=cc.find('Canvas/bg/name')
let script=node.getComponent('test')
script.speak()
}
小游戏:行走的佩奇
10.1 坐标系与坐标
坐标系
坐标用 Vec2 或者 Vec3 表示(Vector,向量)
Vec2:二维坐标(×,y)
pos = new cc.Vec2(100,100);pos = cc.v2(100,100);Iz Vec3:三维坐标(x,y,z)
pos = new cc.Vec3(100,100,0);pos = cc.v3(100,100,0);
坐标系
取得一个节点的坐标
let pos:cc.Vec2 = node.getPosition();设置一个节点的坐标
node.setPosition(cc.v2(250,-120));node.setPosition(cc.v3(250,-120,0));设置一个节点的缩放
node.setScale(cc.v3(1,1,0));目标是2D游戏,所以Z轴方向的值设为0即可
Node.position是相对坐标,相对于父节点
// Learn TypeScript:
// - https://docs.cocos.com/creator/manual/en/scripting/typescript.html
// Learn Attribute:
// - https://docs.cocos.com/creator/manual/en/scripting/reference/attributes.html
// Learn life-cycle callbacks:
// - https://docs.cocos.com/creator/manual/en/scripting/life-cycle-callbacks.html
const {ccclass, property} = cc._decorator;
@ccclass
export default class NewClass extends cc.Component {
onLoad () {
this.node.on('mousedown',this.onClick,this);
}
start () {
}
onClick(){
let node:cc.Node=cc.find('Canvas/bg/name')
cc.log(node.getPosition())
node.setPosition(cc.v2(10,10))
node.setScale(cc.v3(10,10,0))
let pos:cc.Vec2=new cc.Vec2(100,200)
let pos1:cc.Vec2=cc.v2(100,200)
}
// update (dt) {}
}
10.2 缓动系统
缓动系统
下面介绍缓动系统(Tweening System)
其他的系统:
物理系统
碰撞系统
粒子系统 等
I
一部分会留在 Cocos Creator进阶教程 中讲解
缓动系统
缓动,就是缓慢地动,呈现渐动效果
从(-250,-120)移动到(250,-120)
1 直接移动
node.setPosition(cc.v3(250,-120,0));
2 缓动
cc.tween(node).to(1,(position:cc.v3(250,-120,0)}).start();
缓动系统
用 cc.tween()实现缓动效果:
cc.tween(node)
.to(1,{position:cc.v3(250,-120,0)})
.start();
1这种写法称为链式调用,参考图文教程
2 to(duration,args)中,duration表示缓动的时长,args表示结束时的参数。
更多用法
连续动作:先位移、后旋转
cc.tween(node)
.to(1,{position:cc.v3(250,-120,0)})
.to(1,{rotation:360})
.start();并发动作:位移、旋转同时进行
cc.tween(node)
I
.to(1,{position:cc.v3(250,-120,0),rotation:360})
.start();
写在一起并发 链式先后
// Learn TypeScript:
// - https://docs.cocos.com/creator/manual/en/scripting/typescript.html
// Learn Attribute:
// - https://docs.cocos.com/creator/manual/en/scripting/reference/attributes.html
// Learn life-cycle callbacks:
// - https://docs.cocos.com/creator/manual/en/scripting/life-cycle-callbacks.html
const {ccclass, property} = cc._decorator;
@ccclass
export default class NewClass extends cc.Component {
onLoad () {
this.node.on('mousedown',this.onClick,this);
}
start () {
}
onClick(){
let node:cc.Node=cc.find('Canvas/bg/name')
let pos:cc.Vec3=cc.v3(10,10,0)
node.setPosition(pos)
cc.tween(node).to(1,{position:pos,scale:1.5}).start() //并发
// cc.tween(node).to(1,{position:pos}).to(1,{scale:1.5}).start() //先后
}
// update (dt) {}
}
10.3 cc.tween()
cc.tween用法1 区分to与 by cc.tween(node).to(...).start()
对属性进行绝对值计算,传入最终值cc.tween(node).by(...).start()
对属性进行相对值计算,传入改变值
cc.tween用法
2 变速运动 easing默认地,从A状态到B状态是匀速改变的
cc.tween(node).to(duration,props,easing)
例如:速度越来越慢(速度为时间的平方)
cc.tween(node)
.by(1,{position:cc.v3(0,300,0)},{easing:'quadOut})
.start();
onClick(){
let node:cc.Node=cc.find('Canvas/bg/name')
let pos:cc.Vec3=cc.v3(10,10,0)
node.setPosition(pos)
// cc.tween(node)
// .by(1,{position:pos,scale:1.5})
// .by(1,{position:cc.v3(0,10,0)})
// .by(1,{position:cc.v3(-10,0,0)})
// .by(1,{position:cc.v3(0,-10,0)})
// .start()
cc.tween(node)
.by(1,{position:pos,scale:1.5},{easing:'fade'})
.start()
}
10.4(练习)拍球
11.1 动画
动画
本章讨论以程序的方式来编写动画效果(比 cc.tween()要高级)演示:一只能跑的小猪。。
那么,如何让游戏中的物体运动起来呢?
}
动画
添加一个脚本组件,重写update()方法update(dt){
I这个update()被会游戏引擎每秒调用60次即帧率 FPS = 60 frames per second
帧动画
动画
1 每帧之间的变化较小
2 帧率高,快到人眼无法区分帧动画不是连续的,每帧之前有16毫秒的间隔。但是人类大脑无法区分,大脑认为画面是连续的
// Learn TypeScript:
// - https://docs.cocos.com/creator/manual/en/scripting/typescript.html
// Learn Attribute:
// - https://docs.cocos.com/creator/manual/en/scripting/reference/attributes.html
// Learn life-cycle callbacks:
// - https://docs.cocos.com/creator/manual/en/scripting/life-cycle-callbacks.html
const {ccclass, property} = cc._decorator;
@ccclass
export default class NewClass extends cc.Component {
onLoad () {
}
start () {
}
update (dt) {
if(this.node.x>=400)return;
this.node.x+=5
}
}
11.2 帧率
帧率
帧率 FPS(frames per second)
实际指的是 update()的调用频率如果 update()里没有变化,则游戏画面是不会重绘的(与电影、动画不同)
}
帧率
游戏的默认FPS= 60
update(dt){
其中,dt(delta time)指上一帧的时间间隔一般dt约为0.016秒,但并不是一个精确数字,或长或短
帧率
一般来说,帧率越高,1操作系统的负载越大可以适当调低帧率:
cc.game.setFrameRate(30);注意:帧率是一个全局设置,所以最好在游戏的初始化脚本中设置。建一个GameInitScript,挂在Canvas节点下。
节点的加载顺序:根节点Canvas先于子节点加载
onLoad () {
cc.game.setFrameRate(30)
}
11.3 状态控制
状态控制
程序设计:
1 添加节点的运动状态
direction:cc.Vec2 = null;
(1,0)向右
(-1,0)向左
(0,1)向上
(0,-1)向下
null 表示原地不动
// Learn TypeScript:
// - https://docs.cocos.com/creator/manual/en/scripting/typescript.html
// Learn Attribute:
// - https://docs.cocos.com/creator/manual/en/scripting/reference/attributes.html
// Learn life-cycle callbacks:
// - https://docs.cocos.com/creator/manual/en/scripting/life-cycle-callbacks.html
const {ccclass, property} = cc._decorator;
@ccclass
export default class NewClass extends cc.Component {
@property
speed:number=3
@property
direction:cc.Vec2=null
onLoad () {
cc.systemEvent.on('keydown',this.keyPress,this)
}
keyPress(e:cc.Event.EventKeyboard){
if(e.keyCode==cc.macro.KEY.left){
this.direction=cc.v2(-1,0)
}
else if(e.keyCode==cc.macro.KEY.right){
this.direction=cc.v2(1,0)
}
else if(e.keyCode==cc.macro.KEY.up){
this.direction=cc.v2(0,1)
}
else if(e.keyCode==cc.macro.KEY.down){
this.direction=cc.v2(0,-1)
}
else if(e.keyCode==cc.macro.KEY.space){
this.direction=null
}
}
start () {
}
update (dt) {
if(this.direction==null)return;
let pos:cc.Vec2=this.node.getPosition()
pos.x+=this.speed*this.direction.x
pos.y+=this.speed*this.direction.y
this.node.setPosition(pos)
}
}
11.4计时器API
计时器 API Cocos Creator还提供一套计时器 API封装在 cc.Component 中
启动定时器
comp.schedule(callback,interval)
comp.schedule(callback,interval,repeat,delay)
停止定时器
comp.unschedule(callback)
计时器 API完整调用,可以传4个参数
comp.schedule(callback,interval,repeat,delay)
其中,I callback,计时器回调
interval,每次时间间隔
repeat,重复多少次
delay,多少秒后还时启动
// Learn TypeScript:
// - https://docs.cocos.com/creator/manual/en/scripting/typescript.html
// Learn Attribute:
// - https://docs.cocos.com/creator/manual/en/scripting/reference/attributes.html
// Learn life-cycle callbacks:
// - https://docs.cocos.com/creator/manual/en/scripting/life-cycle-callbacks.html
const {ccclass, property} = cc._decorator;
@ccclass
export default class NewClass extends cc.Component {
label: cc.Label = null;
text: string = '';
index:number=0
onLoad () {
this.label=this.getComponent(cc.Label)
this.text=this.label.string
this.label.string=''
this.schedule(this.Timer,0.3)
}
Timer() {
this.index++
let str:string=this.text.substring(0,this.index)
this.label.string=str
if(this.index>=this.text.length){
this.unschedule(this.Timer)
}
}
start () {
}
speak(){
cc.log('hello koo')
}
// update (dt) {}
}
小游戏:手柄控制器
13.1 GIF图的显示
GIF图的显示
本章内容:在项目中使用GIF动态图演示:。。
注意:GIF图是由美工提供的,我们的工作是把GIF应用于游戏项目中。
13.2 准备GIF素材
准备GIF素材
在Cocos Creator里使用GIF,需要预先处理有两种使用方式
方式1:
提取出每一帧图片,添加到项目中方式2:
制作为图集资源Atlas,添加到项目中
准备GIF素材
使用步骤:
1参考《GIF提取教程》,从GIF中提取每一帧注意,提取出来的PNG图片应该背景透明2 将所有图片添加到项目
3 对每张图片逐一设置
属性检查器1 Sprite,把Trim Type设置为None
13.3 GifPlayer
// Learn TypeScript:
// - https://docs.cocos.com/creator/manual/en/scripting/typescript.html
// Learn Attribute:
// - https://docs.cocos.com/creator/manual/en/scripting/reference/attributes.html
// Learn life-cycle callbacks:
// - https://docs.cocos.com/creator/manual/en/scripting/life-cycle-callbacks.html
const {ccclass, property} = cc._decorator;
@ccclass
export default class NewClass extends cc.Component {
@property([cc.SpriteFrame])
frams:cc.SpriteFrame[]=[]
sprite:cc.Sprite=null
index:number=0
onLoad () {
this.sprite=this.getComponent(cc.Sprite)
}
Timer(Timer: any, arg1: number) {
if(this.frams.length==0)return;
this.sprite.spriteFrame=this.frams[this.index]
this.index++
if(this.index>=this.frams.length){
this.index=0
}
}
start () {
this.schedule(this.Timer,0.2)
}
onDestroy(){
this.unschedule(this.Timer)
}
// update (dt) {}
}
13.4图集Atlas
图集 Atlas图集Atlas,由多张小图合成的一张大图类似于 HTML中的 雪碧图 CSS Sprite参考官方文档的说明:资源工作流程1图集资源提示:本节不是重点,了解即可
图集Atlas Atlas图集资源的制作:TexturePacker(收费软件)
I生成两个文件:AAA.plist和AAA.png其中,*.plist是一个XML文件,描述每个子图的信息
新版加密
// Learn TypeScript:
// - https://docs.cocos.com/creator/manual/en/scripting/typescript.html
// Learn Attribute:
// - https://docs.cocos.com/creator/manual/en/scripting/reference/attributes.html
// Learn life-cycle callbacks:
// - https://docs.cocos.com/creator/manual/en/scripting/life-cycle-callbacks.html
const {ccclass, property} = cc._decorator;
@ccclass
export default class NewClass extends cc.Component {
@property([cc.SpriteAtlas])
atlas:cc.SpriteAtlas=null
frams:cc.SpriteFrame[]=[]
sprite:cc.Sprite=null
index:number=0
onLoad () {
this.sprite=this.getComponent(cc.Sprite)
if(this.atlas!=null){
this.frams=this.atlas.getSpriteFrames()
}
}
Timer(Timer: any, arg1: number) {
if(this.frams.length==0)return;
this.sprite.spriteFrame=this.frams[this.index]
this.index++
if(this.index>=this.frams.length){
this.index=0
}
}
start () {
this.schedule(this.Timer,0.2)
}
onDestroy(){
this.unschedule(this.Timer)
}
// update (dt) {}
}
14.1 动态加载资源
资源的加载
资源的加载,有两种方式
1 静态加载
直接在属性管理器指定,在节点被加载时一并加载2 动态加载
在脚本中,使用代码cc.resources.load()运行时加载I
()待加载的资源必须放在resources目录下
()路径不能加后缀名
onLoad () {
this.node.on('touchstart',this.touch,this)
}
touch() {
cc.resources.load('3',cc.SpriteFrame,(err,asset)=>{
if(err)return;
let node=this.getComponent(cc.Sprite)
node.spriteFrame=<cc.SpriteFrame>asset
})
}
14.2 加载多个资源
加载多个资源
可以一次性的加载多个资源,有两个办法:
1 指定多个资源路径
cc.resources.load(paths,callback(err,assets){..})
其中,paths类型[cc.String],assets类型[cc.Asset]
2 指定一个资源目录
cc.resources.loadDir(path,callback(err,assets){...})
其中,path是一个文件夹路径,assets是[cc.Asset]
// Learn TypeScript:
// - https://docs.cocos.com/creator/manual/en/scripting/typescript.html
// Learn Attribute:
// - https://docs.cocos.com/creator/manual/en/scripting/reference/attributes.html
// Learn life-cycle callbacks:
// - https://docs.cocos.com/creator/manual/en/scripting/life-cycle-callbacks.html
const {ccclass, property} = cc._decorator;
@ccclass
export default class NewClass extends cc.Component {
@property(cc.Label)
label: cc.Label = null;
@property
text: string = 'hello';
// LIFE-CYCLE CALLBACKS:
frams:cc.SpriteFrame[]=[]
sprite:cc.Sprite=null
index:number=0
onLoad () {
this.sprite=this.getComponent(cc.Sprite)
cc.resources.loadDir('gif/',cc.SpriteFrame,(err,assets)=>{
if(err)return;
this.frams=<cc.SpriteFrame[]>assets
})
}
start () {
this.schedule(this.Timer,0.3)
}
Timer(Timer: any, arg1: number) {
if(this.frams.length==0)return;
this.sprite.spriteFrame=this.frams[this.index]
this.index++
if(this.index>=this.frams.length){
this.index=0
}
}
onDestroy(){
this.unschedule(this.Timer)
}
// update (dt) {}
}
15.1 触摸事件
触摸事件触摸事件
touchstart,touchmove,touchend,touchcancel鼠标事件
mousedown,mousemove,mouseup,mousewheel mouseenter,mouseleave在本教程中,统一使用触摸系列事件
触摸事件
在桌面环境下,也支持触摸事件,方便调试参考官方文档的说明
cc.Event.EventTouch注意:事件中的坐标位置(x,y)是世界坐标
15.2 事件冒泡机制
事件冒泡机制
事件冒泡 Event Bubbles与网页开发的冒泡机制相同I注意:这里特指 触摸事件,不适用鼠标事件
要点与细节
以下讨论限仅于触摸事件,不适用鼠标事件1同级节点不会接收到此touchstart事件2即使子节点在父节点区域之外,此事件也会传给父节点3 可以阻止事件的传递
e.stopPropagation()
则此事件到此为止,不会继续后面的传递发你好
15.3(练习)遮罩效果
this.node.active = false; 设置隐藏
Widget组件
Widget组件:用于辅助定位添加Widget组件,将上下左右边距设为0具体用法在Cocos Creator进阶教程中讲解
15.4(练习)模态提示框
15.5 BlockInputEvents组件
15.5 Block Input Events
Block Input Events Block Input Events,一个自带的组件用于阻止输入事件
I演示:。。
阻止冒泡等
要点与细节
1组件表示一个功能
可以用自带的组件,还是自己写一个脚本组件2 脚本组件的命名
可以是名词,如 Label,Sprite也可以是动词,如Block Input Events
小游戏:子弹发射效果
16.2 布置场景
16.3 动态创建节点
动态创建节点
例如,动态创建一个节点,添加Sprite组件,然后挂在当前节点下面:
let bullet:cc.Node = new cc.Node();let sprite:cc.Sprite = bullet.addComponent(cc.Sprite);sprite.spriteFrame = this.bulletIcon;bullet.parent = this.node;
// Learn TypeScript:
// - https://docs.cocos.com/creator/manual/en/scripting/typescript.html
// Learn Attribute:
// - https://docs.cocos.com/creator/manual/en/scripting/reference/attributes.html
// Learn life-cycle callbacks:
// - https://docs.cocos.com/creator/manual/en/scripting/life-cycle-callbacks.html
const {ccclass, property} = cc._decorator;
@ccclass
export default class NewClass extends cc.Component {
@property(cc.Label)
label: cc.Label = null;
@property
text: string = 'hello';
// LIFE-CYCLE CALLBACKS:
frams:cc.SpriteFrame[]=[]
sprite:cc.Sprite=null
index:number=0
@property(cc.SpriteFrame)
spot:cc.SpriteFrame=null
onLoad () {
this.sprite=this.getComponent(cc.Sprite)
cc.resources.loadDir('gif/',cc.SpriteFrame,(err,assets)=>{
if(err)return;
this.frams=<cc.SpriteFrame[]>assets
})
this.node.on('touchstart',(e)=>{
if(!this.spot)return;
let newNode=new cc.Node()
let sprite=newNode.addComponent(cc.Sprite)
sprite.spriteFrame=this.spot
newNode.parent=this.node
newNode.setPosition(cc.v3(0,80,0))
},this)
}
start () {
this.schedule(this.Timer,0.3)
}
Timer(Timer: any, arg1: number) {
if(this.frams.length==0)return;
this.sprite.spriteFrame=this.frams[this.index]
this.index++
if(this.index>=this.frams.length){
this.index=0
}
}
onDestroy(){
this.unschedule(this.Timer)
}
// update (dt) {}
}
16.4 附加脚本组件
附加脚本组件
动态创建的节点,也可以附加脚本组件1 新建脚本 BulletScript
2 附加到节点
let comp = node.addComponent(类名)
注意:将脚本的类名规范命名,因为要在别的类中引入
import spot from "./spot";
this.node.on('touchstart',(e)=>{
if(!this.spot)return;
let newNode=new cc.Node()
let sprite=newNode.addComponent(cc.Sprite)
sprite.spriteFrame=this.spot
newNode.parent=this.node
newNode.setPosition(cc.v3(0,80,0))
let script=newNode.addComponent(spot)
},this)
16.5 爆炸效果
// Learn TypeScript:
// - https://docs.cocos.com/creator/manual/en/scripting/typescript.html
// Learn Attribute:
// - https://docs.cocos.com/creator/manual/en/scripting/reference/attributes.html
// Learn life-cycle callbacks:
// - https://docs.cocos.com/creator/manual/en/scripting/life-cycle-callbacks.html
const {ccclass, property} = cc._decorator;
@ccclass
export default class NewClass extends cc.Component {
@property(cc.Label)
label: cc.Label = null;
@property
text: string = 'hello';
// LIFE-CYCLE CALLBACKS:
spot:cc.SpriteFrame=null
onLoad () {
this.schedule(this.run,0.016)
cc.resources.load('3',cc.SpriteFrame,(err,asset:cc.SpriteFrame)=>{
!err && (this.spot=asset)
})
}
run(){
if(this.node.y>300){
this.unschedule(this.run)
// this.node.destroy()
this.flash()
return
}
this.node.y+=10
}
flash() {
this.node.on('touchstart',(e)=>{
if(!this.spot)return;
let sprite=this.node.getComponent(cc.Sprite)
sprite.spriteFrame=this.spot
this.node.scale=0.1
let self=this
cc.tween(this.node).to(1,{scale:0.5,opacity:0}).call(function(){self.alter();}).start()
},this)
}
alter() {
this.node.destroy()
}
start () {
}
// update (dt) {}
}
小游戏:雪地射击
下一篇:进阶教程!!
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 推荐几款开源且免费的 .NET MAUI 组件库
· 实操Deepseek接入个人知识库
· 易语言 —— 开山篇
· 【全网最全教程】使用最强DeepSeekR1+联网的火山引擎,没有生成长度限制,DeepSeek本体