03. Tạo Game đầu tiên với CocosCreator HelloWorld Count Time

Giới thiệu cơ bản về gameplay.

• Touch vào màn hình để bắt đầu chơi. Thời gian sẽ đến tăng liên tục, tới 10 thì kết thúc Game.

Tap vào màn hình để reset lại số hiện tại .

Tạo project với CocosCreator.

Chọn ngôn ngữ tương ứng sử dụng Javascript hoặc TypeScript

Chỉnh lại kích thước của Canvas: 640x960 và FixWidth

Xét kích tước màn hình máy ảo hiện thị của Cocos Creator, Sử dụng màn hình đứng (portrait)

• Vào menu CocosCreator → Preferences

Xóa đi các script và component không sử dụng

Thêm vào script GameManager để quản lý trạng thái trong Game (game state)

Tạo Node Empty đặt tên “GameManager”

Thêm Custom conpoment chọn GameManager để thêm component cho node “GameManager”

Hoặc kéo thả script vào cửa sổ Properties

Khawsc phục lỗi khi vừa tạo script

Dùng hàm cc.log(“”) để thêm log vào các hàm mặc định script tự sinh ra

Class GameManager

Cùng xem log in ra ở cửa sổ console:

Thứ tự load script sẽ vào hàm onLoad trước rồi tới hàm start để chạy.

Và trong mỗi frame hàm update sẽ được gọi, đồng thời trong hàm update sẽ có giá trị dt là thoi gian render của 2 frame liên tiếp.

Mapping đối tượng Canvas từ giao diện vào script để bắt event touch của người chơi

Khai báo node lưu đối tượng Canvas trong script GameManager.ts

@property(cc.Canvas) canvas : cc.Canvas = null;

Chọn node GameManager và kéo thả node Canvas vào ô canvas vừa tạo

Bắt event touch trong hàm onLoad

Chạy thử và tap vào màn hình để xem log

Thêm node Label để hiển thị text

@property(cc.Label) label : cc.Label = null;

Khai báo enum quản lý state cho Game

const {ccclass, property} = cc._decorator;
enum  GameState {
Start,
InGame,
EndGame
}

Tạo biến lưu đếm tổng thời gian

@property(cc.Canvas) canvas : cc.Canvas = null;
// private
totalTime : number;
state : GameState;

Khởi tạo giá trị ban đầu trong hàm start

start () {
cc.log("GameManager start");
this.totalTime = 0;
this.state = GameState.Start;
}

Xử lý update cho Game

update (dt) {
switch(this.state){
case GameState.Start:
break;
case GameState.InGame:
this.totalTime += dt;
if(Math.floor(this.totalTime) > 5 ) {
this.state = GameState.EndGame;
}
this.label.string = Math.floor(this.totalTime).toString();
break;
case GameState.EndGame:
break;
}
}

Xử lý khi người chơi tap vào màn hình để reset

playGame() {
this.state = GameState.InGame;
this.totalTime = 0;
}
onTouchEnd(event) {
cc.log("GameManager onTouchEnd");
this.playGame();
}

Chạy để xem kết quả.

Toàn bộ code GameManager.ts

HieuTranTrung1204/TrainingCocosCreator

Tiếp theo 04. Cocos Creator sử dụng Prefab