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/java/

课程资料下载
相关资料:课件、文档、素材、软件、项目源码
官网地址: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) {}
}

小游戏:雪地射击
下一篇:进阶教程!!

posted @   KooTeam  阅读(114)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 推荐几款开源且免费的 .NET MAUI 组件库
· 实操Deepseek接入个人知识库
· 易语言 —— 开山篇
· 【全网最全教程】使用最强DeepSeekR1+联网的火山引擎,没有生成长度限制,DeepSeek本体
点击右上角即可分享
微信分享提示