cocos文档”快速上手第一个游戏“学习笔记

cocos creator快速上手第一个游戏学习笔记

https://docs.cocos.com/creator/manual/zh/getting-started/quick-start.html

（小吐槽：cocos creator 2的改动很大，这个示例代码居然没有跟进，实际上没法用2.4.0版本运行）

1、软件界面
层级管理器里面：
canvas代表屏幕，可以设置大小，但不能改变position，anchor等（应该可以通过camera改变视角）
注意node的上下级分属，这关系到他们的坐标。
示例node全部放到canvas下面，坐标系都以父节点canvas的anchor为原点。
node的位置，包括运动也是以anchor为原点描述

资源管理器 assets
文件都在这里面，可以自己创建目录

场景编辑器是所见即所得

2、游戏场景 scene
场景是核心，示例只有一个场景，默认加载。示例未演示多个场景下的默认场景设置。
加载场景是 cc.director.loadScene('sceneName');
也可以重新加载场景。（有时候会显示warn，但可以正常工作）

场景内容包括 node 和 组件component
node是图形，component是脚本，两者可以关联到一起，是node一对多的关系（实际是多对多）
canvas对应的脚本组件应该是主程序

node是具体图形/文字，可以直接设置一些显示属性，例如position, anchor等，可以添加组件获得相应的能力

component是一个js class

一些特殊属性：
extends: cc.Component, 表示继承关系
properties: {},表示可以在属性管理器中设置的属性，其他属性只能通过代码设置
对其他node的引用，可以通过设置属性，然后拖拉的方式直接获得
注意：node是cc.node  cc.Sprite等并不是node，cc.Sprite继承于 RenderComponent,是一个组件，
如果属性设置为cc.Sprite,在代码中cc.Sprite.node引用节点

生命周期函数：
onLoad(){} 加载初始化
update(dt){} 帧回调，dt表示帧间隔时间（秒），

node和component相互关系：
component内可以用this.node获取其关联的node，
场景内的其他node，属性拖拉获得，而脚本获得方式，目前只学到 this.node.parent 这一种相对关系的方式。

通过node获得其对应componet的方式是
this.node.getComponent,
获得引用后，可以获取属性，调用方法等

缓动 tween

就是node的位移、缩放和旋转等变化动作
取代了过去的动作action（缓动这个名字比动作好，缓慢的变化，而快速的变化是要在update里面做帧变化）
目前学到的内容是：

// 先定义一些动作
let jumpUp = cc.tween().by(this.jumpDuration, { y: this.jumpHeight}, {easing:'cubicOut'});
...
var scaleBack = cc.tween().to(this.squashDuration, {scaleX: 1, scaleY: 1}, {easing: "smooth"})

// 对node施展动作
cc.tween(this.node)
// 可以重复，注意这个重复方法可以重复多个动作，并且一直重复
.repeatForever(
// 具体的动作序列
cc.tween().sequence(squash, stretch, jumpUp, scaleBack, jumpDown)
// 还可以添加函数动作
.call(this.playJumpSound, this)
)
// 开始
.start()

取消动作的方法也只学到一种：
停止一个节点所有动作 this.node.stopAllActions();

帧动画（update函数）
涉及内容：

• 帧动画里面直接改变node坐标/透明度等（快速动画）
• 计时
• 判断碰撞（这里用的是非常简单的，anchor之间的距离）

Prefab（预制） 资源
用来动态创建的node和component

预制制作
在场景中正常编辑，拖到资源管理器会自动变成prefab,再删除场景中内容即可

预制使用

// 实例化预制
let newStar = cc.instantiate(this.starPrefab);
// 添加到上级node
this.node.addChild(newStar);
// 设置位置
let pos = this.getNewStarPosition();
newStar.setPosition(pos);
// 调用component方法
newStar.getComponent('Star').game = this;

监听输入

//监听键盘
cc.systemEvent.on(cc.SystemEvent.EventType.KEY_DOWN, this.onKeyDown, this);
cc.systemEvent.on(cc.SystemEvent.EventType.KEY_UP, this.onKeyUp, this); 
// 获取按键code: event.keyCode，具体按键值：cc.macro.KEY.a...
// 取消方法off，参数一致

尚未了解如何获取 触摸事件 touch

播放音频资源
properties类型：cc.AudioClip
播放代码

cc.audioEngine.playEffect(this.jumpAudio, false);