Flixel tutorial

16
http:// fof.edu.vn HƯỚNG DẪN SỬ DỤNG FLIXEL. 1. Khởi tạo game. Sử dụng file Main.as sẽ là class chạy đầu tiên trong ứng dụng. Người ta gọi là “entry point”. Trạng thái của bàn chơi sẽ được khởi tạo đầu tiên là PlayState Gắn thêm preloader cho game bằng việc sử dụng preloader có sẵn của Flixel. Class Preloader này phải được kế thừa từ FlxPreloader, nhiệm vụ của class này chỉ đơn giản là khởi tạo class Main, tuy nhiên mọi việc sẽ được flixel làm hết, chúng ta không cần khai báo new Main() nữa. Khi sử dụng chỉ cần khai báo biến className có sẵn là “Main”.

Transcript of Flixel tutorial

Page 1: Flixel tutorial

http://fof.edu.vn

HƯỚNG DẪN SỬ DỤNG FLIXEL.

1. Khởi tạo game.Sử dụng file Main.as sẽ là class chạy đầu tiên trong ứng dụng. Người ta gọi là “entry point”. Trạng thái của bàn chơi sẽ được khởi tạo đầu tiên là PlayState

Gắn thêm preloader cho game bằng việc sử dụng preloader có sẵn của Flixel. Class Preloader này phải được kế thừa từ FlxPreloader, nhiệm vụ của class này chỉ đơn giản là khởi tạo class Main, tuy nhiên mọi việc sẽ được flixel làm hết, chúng ta không cần khai báo new Main() nữa. Khi sử dụng chỉ cần khai báo biến className có sẵn là “Main”.

Page 2: Flixel tutorial

http://fof.edu.vn

Quay lại với class Main. Các trạng thái của game trong Flixel được quản lý bởi các subclass của FlxState. Trong Main.as, class PlayState là một subclass của FlxState, tương ứng với màn hình bàn chơi (actual game state). Ngoài ra còn có các trạng thái khác như menu state, highscore state … Trong các subclass của FlxState có các thuộc tính khung (scaffold ) sau:

- create : được gọi khi class được tạo ra.- Update : được gọi tương ứng mỗi lần enterframe.

Page 3: Flixel tutorial

http://fof.edu.vn

2. Tạo hero (player) và điều khiển hero.Sau khi đã tạo được một sườn cấu trúc của game, công việc tiếp theo là tạo nhân vật chơi (hero). Và nhân vật được tạo ra từ class Ship.as trong thư mục ../lib/image/hero.png

FlxSprite là class đối tượng quan trọng nhất trong Flixel, tương tác với hầu hết các tính chất vật lý hoặc chuyển động. Ship cũng được kế thừa từ FlxState.

Page 4: Flixel tutorial

http://fof.edu.vn

Trong Ship, hình ảnh đồ họa được sửa dụng ở kích thước 50x50 và được embed vào. Người chơi điều khiển để chơi còn FlxSprite thì gọi hàm update() ở mỗi frame. Nếu thỏa mãn điều kiện tương ứng với các nút bấm thì đối tượng Ship sẽ thay đổi vận tốc của nó. Ban đầu vận tốc = 0, sau đó chúng ta kiểm tra xem player có nhấn các nút mũi tên để tăng giảm vận tốc hay không. Hàm super.update() được gọi để cập nhận trạng thái mới của Ship với giá trị vừa thay đổi của velocity.

Page 5: Flixel tutorial

http://fof.edu.vn

Nhiệm vụ tiếp theo là gắn Ship vào PlayState class sau khi game đã được khởi tạo (viết trong hàm create()).

Thử chạy thử project bằng việc complie, và điều khiển phi thuyền chạy loăng quăng. Lưu ý, chúng ta cần giới hạn khoảng không di chuyển của phi thuyền nằm trong stage. Công việc này cần thêm một đoạn code kiểm tra tọa độ của Ship trong Ship class hàm update. Lưu ý cần viết sau super.update().

Page 6: Flixel tutorial

http://fof.edu.vn

3. Tạo kẻ địch (enemies).Tiến hành tạo ra các enemies với file Alien.as trong src/de/pixelate/flixelprimer .Class Alien.as có thể set thuộc tính x và y, vì vậy chúng ta có thể thiết đặt tọa độ ban đầu của enimies khi mới sinh ra. Trong code, chúng ta set velocity (vận tốc) tới -200 sẽ khiến cho các enimes chạy từ phải sang trái với một tốc độ cố định. Về tọa độ y, chúng ta cho enimes di chuyển theo dao động hình sin.

Page 7: Flixel tutorial

http://fof.edu.vn

Để tự động tạo ra enimies. Chúng ta cần thực hiện việc này trong class PlayState. Ý tưởng của việc tạo enimies như sau:

a) Tạo ra một nhóm chứa các aliens (sử dụng class kế thừa từ FlxGroup), sau đó gắn các aliens vào nhóm này để dễ quản lý và dễ xét va chạm với Ship.

b) Đếm thời gian để sinh ra phi thuyền, khởi đầu từ 2,5 s sau đó nhanh dần cho tới khi đạt max ở giây thứ 10.

c) Tạo các aliens theo các tọa độ random, chạy từ phải qua trái.

Page 8: Flixel tutorial

http://fof.edu.vn

Các hàm hỗ trợ.

Page 9: Flixel tutorial

http://fof.edu.vn

4. Tạo vũ khí và luồng đạn.(bullets).Công việc tiếp theo là tạo ra những viên đạn (bullets) va chạm với aliens. Source code của bullets được chứa trong src/de/pixelate/flixelprimer file Bullet.as. Với với viên đạn chúng ta không sử dụng file ảnh mà vẽ trực tiếp trong code với phương thức makeGraphic ().

Page 10: Flixel tutorial

http://fof.edu.vn

Tạo các hàm phụ trong PlayState.as

Page 11: Flixel tutorial

http://fof.edu.vn

Cũng giống cách làm với cá aliens. Chúng ta tạo ra và nhóm các viên đạn vào một FlxGroup. Trong hàm update() , chúng ta sử dụng câu lệnh if để kiểm tra nếu người chơi nhấn nút cách (space key) thì phi thuyền sẽ bắn đạn.

Page 12: Flixel tutorial

http://fof.edu.vn

Lưu ý: chúng ta cần bổ sung hàm getBulletSpawnPosition() bên trong class Ship.as để xác định vị trí chính xác của viên đạn ở mũi phi thuyền. Các số 15 và 2 trong hình chỉ dùng để ướng lượng tọa độ mũi thuyền.

5. Xử lý va chạm.Đây là phần quan trọng nhất của một game và chúng ta sử dụng hàm update() trong PlayState để làm công việc này. Bản chất của việc va chạm là 2 hình có xếp chồng lên nhau (overlap) hay không. Đầu tiên chúng ta kiểm tra xem các viên đạn có va chạm với các aliens hay không qua hàm overlapAlienBullet(). Thứ hai là kiểm tra va chạm giữa phi thuyền và aliens.

Các hàm callback được gọi khi có xảy ra các trường hợp va chạm và phù hợp với từng trường hợp va chạm. Ví dụ, khi aliens bị bắn, hay aliens va chạm với viên đạn (bullet) thì aliens sẽ nổ tung và điểm sẽ tăng lên, hiển thị lên màn hình. Hay màn hình sẽ rung lên một chút khi phi thuyền va chạm với aliens (sử dụng FlxG.shake).

Page 13: Flixel tutorial

http://fof.edu.vn

Sau khi end game sẽ có một đoạn text thông báo chơi lại, đối tượng text ở đây (gameOverText) không phải là textfield mà là FlxText và được khai báo như một private var bên trong PlayState

Để người chơi có thể chơi lại khi kết thúc game thì trong hàm update của PlayState sử dụng cách sau:

Cuối cùng tạo ra vùng hiển thị điểm trong hàm create của PlayState và đặt FlxG.score về 0 bên trong hàm create của PlayState.as

Page 14: Flixel tutorial

http://fof.edu.vn

6. Âm thanh trong game.Với các nội dung bên trên thì game đã có thể chơi được rồi. Tuy vậy để tăng thêm độ hấp dẫn thì cần bổ sung thêm âm thanh cho game. Gắn âm thanh vào từng action để tăng thêm tính sinh động cho game. Tất cả các tham chiếu tới các file sound đều được khai báo ở phần đầu của class PlayState.

Sử dụng FlxG.play(…) để chạy các âm thanh trên trong các trường hợp:

Page 15: Flixel tutorial

http://fof.edu.vn

Bây giờ chúng ta đã có một game đơn giản làm từ Flixel engine !