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是图形,组件是脚本,两者可以关联到一起,是多对多的关系
canvas对应的脚本组件应该是主程序

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

component是一个js class
一些特殊属性:
extends: cc.Component, 表示继承关系
properties: {},表示可以在属性管理器中设置的属性,其他属性只能通过代码设置
对其他node的引用,可以通过设置属性,然后拖拉的方式直接获得
onLoad(){} 加载初始化
update(dt){} 帧回调,dt表示帧间隔时间(秒),

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);

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章