04. Cocos Creator sử dụng Prefab
Prefab là đối tượng được CocosCreator hỗ trợ sử dụng cho các đối tượng được tạo, xóa liên tục và số lượng nhiều trong Game. Các thông tin cơ bản về Prefab ở trang document prefab
Prefab được tạo sau khi đã thiết kế đầy đủ các “thuộc tính”, các component của nó. Để tạo prefab, chỉ cần ta kéo từ khung Node Tree vào khung Assets.
Node đã được tạo prefab sẽ có màu xanh, và sẽ có file local ở dưới khung assets
Để cập nhật thay đổi các thuộc tính, component của prefab chúng ta cần sync cho file prefab đó
Lúc này node pefab sẽ chuyển sang màu xanh lá, và những thay đổi trên node sẽ được cập nhật khi nhấn vào lưu ở nút sync
Khởi tại đối tượng prefab sử dụng script
- @property(cc.Prefab) prefab_CaiTrung : cc.Prefab = null;
- Mapping đối tượng prefab đã vào vào script để sử dụng
- Khởi tại đối tượng prefab sử dụng script và thêm vào màn hình của node hiện tại
- var obj = cc.instantiate(this.prefab_CaiTrung);
this.node.addChild(obj);
Để lấy về component Ball đã add vào prefab và gọi hàm của script Ball
var ball = obj.getComponent(Ball);
ball.MoveObj();
ball.setSpeed(i * 100);
Viết script cho Ball.ts
const {ccclass, property} = cc._decorator;
- @ccclass
- export default class Ball extends cc.Component {
- public speed : number;
- isMove : boolean;
- // LIFE-CYCLE CALLBACKS:
- onLoad () {
- // this.isMove = false;
- }
- start () {
- // this.speed = 0;
- }
- public setSpeed(speed ) {
- this.speed = speed;
- }
- public MoveObj() {
- cc.log(“MoveObj”);
- this.isMove = true;
- }
- update (dt) {
- cc.log(this.isMove + “ update : “ + dt);
- if(this.isMove == false) {
- return;
- }
- cc.log(“Ball update spped:” + this.speed);
- var y = this.node.y;
this.node.y = y + this.speed * dt;
}
}
Toàn bộ script cho GameManager.ts
const {ccclass, property} = cc._decorator;
import Ball from './Ball';
enum GameState {
Started,
InGame,
GameOver
}
@ccclass
export default class GameManager extends cc.Component {
@property(cc.Label) label: cc.Label = null;
@property(cc.Canvas) canvas : cc.Canvas = null;
@property(cc.Prefab) prefab_CaiTrung : cc.Prefab = null;
@property(cc.Node) player : cc.Node = null;
@property({}) speed : number = 0;
totalTime : number;
gameState : GameState;
// LIFE-CYCLE CALLBACKS:
onLoad () {
this.canvas.node.on(cc.Node.EventType.TOUCH_START,
this.onTouchStart.bind(this));
this.canvas.node.on(cc.Node.EventType.TOUCH_END,
this.onTouchEnd.bind(this));
this.canvas.node.on(cc.Node.EventType.TOUCH_MOVE, this.onTouchMove.bind(this));
}
onTouchStart (event) {
cc.log("GameManager onTouchStart");
}
onTouchEnd (event) {
cc.log("GameManager onTouchEnd");
this.gameState = GameState.InGame;
this.totalTime = 0;
}
onTouchMove (event) {
cc.log("GameManager onTouchMove");
}
start () {
this.totalTime = 0;
this.gameState = GameState.Started;
for(var i = 0; i < 5; i ++ ){
var obj = cc.instantiate(this.prefab_CaiTrung);
obj.x = i * 30;
obj.y = i * 30;
this.node.addChild(obj);
var ball = obj.getComponent(Ball);
ball.MoveObj();
ball.setSpeed(i * 100);
}
}
update (dt) {
switch(this.gameState) {
case GameState.Started:
{
break;
}
case GameState.InGame:
{
this.totalTime += dt;
break;
}
case GameState.GameOver:
{
break;
}
}
this.label.string = Math.floor(this.totalTime).toString();
}
}