Monday, March 28, 2016

4. Xếp hình cùng cocos creator (tetris)

Với mục tiêu nhắm đến việc phát triển game là chủ yếu, nên những phần ngoài rìa như UI, ads, social plugin, screen manager tôi sẽ thực hiện trong những bài viết ở giữa cuộc hành trình khám phá thế giới game. Trong những bài viết mở đầu, tôi sẽ không đề cập tới những vấn đề này quá nhiều.

Phân tích game

phần 2, tôi đã thực hiện một game đơn giản trên màn hình nằm ngang (landscape). Trong bài viết này, tôi tiếp tục làm một tựa game đơn giản là Tetris. Và màn hình được chọn lựa để phát triển là màn hình đứng (portrait).

Trước khi cắm cúi vào thực hiện project, tôi cần phải phân tích những yêu cầu của game và đưa ra giải pháp phù hợp. Đây là những bước cơ bản khi làm một tựa game, nên tôi sẽ không đi quá nhanh mà để lỡ mất những chi tiết quan trọng.

Không nhất thiết tôi phải làm giống như các game khác. Đây sẽ là những gì tôi sẽ làm trong game Tetris của mình:
  • Game có các hình khối, mỗi hình khối sẽ có 4 ô vuông mô tả các kí tự I, J, L, O, Z. 
  • Các kí tự này sẽ rơi ngẫu nhiên, mỗi đơn vị thời gian sẽ di chuyển vị trí xuống một đơn vị toạ độ (đúng bằng độ rộng của một ô vuông). 
  • Mỗi khi có thao tác quay, kí tự sẽ quay 1 góc 90 độ. 
  • Mỗi hàng ngang sẽ tương ứng với 16 đơn vị, nếu hàng ngang được phủ kín sẽ biến mất, và các hình khối phía trên hàng ngang sẽ rơi xuống để che lấp hàng ngang đó. 
  • Sẽ có nhiều mức độ khi chơi, có thể có hữu hạn cấp để người chơi giành chiến thắng sau 20 level. Mỗi khi tăng level thì tăng tốc độ rơi của kí tự
  • Thể loại chơi đơn (1 người chơi)
Dựa vào phần mô tả trên, tôi sẽ cần một số assets sau:
  • Image: Hình nền game
  • Image: Hình của 1 ô vuông 
  • Particle: Hiệu ứng khi 1 hàng biến mất 
  • Prefab cho chữ I, J, L, O, Z 

Concepts game

Đây là bản vẽ game concepts của tôi. Thường người ta sẽ sử dụng giấy và viết chì hoặc bảng vẽ để vẽ bằng tay. Tuy nhiên, đối với tôi việc sử dụng phần mềm vẽ sẽ dễ nhìn hơn là dùng giấy viết o_0!

Dựa trên concepts này, tôi chia phần phân tích thành 2 phần bố cụclogic:
- Về layout (bố cục), score và level sẽ là 2 label nằm ở 2 góc như hình trên và align với canvas. Tôi sẽ cần một toạ độ y0 để mô tả vị trí bắt đầu spawn một kí tự bất kì và tại một toạ độ x bất kì nằm trong khoảng nhìn thấy của màn hình. Ở nền, tôi cũng cần một toạ độ y1 để mô tả vị trí thấp nhất của nền.
- Về logic, có một số vấn đề được đặt ra là: 
  1. Khi nào thì kí tự ngừng rơi và kí tự mới rơi tiếp?
  2. Khi nào thì tôi biết được 1 hàng đã bị phủ kín? Nếu nhiều hàng bị phủ kín cùng lúc thì sao?
  3. Khi nào thì start game? Có dấu hiệu nhận biết không?
  4. Khi nào thì lên level? Speed tăng bao nhiêu theo level?
  5. Khi nào thì gameover? Khi gameover thì có hiện gì không? Sau đó thì sao?
  6. Khi nào thì tăng score? và tăng bao nhiêu? 

Tôi sẽ phải trả lời lần lượt từng câu hỏi trước khi bắt tay thực hiện game

Khi nào thì kí tự ngừng rơi và kí tự mới rơi tiếp?
Với kiểu cấu trúc thế này, tôi quyết định sử dụng mảng (array) để mô tả dữ liệu game. Với màn hình đứng, tôi chọn resolution 400x600, mỗi ô vuông 25x25. Như vậy mảng tối đa tôi có thể sử dụng có kích thước 16x24. Tôi chọn mảng 16x20 để chừa 1 khoảng phía trên cho dễ nhìn. Với mỗi ô của kí tự sẽ tương ứng với giá trị là 1, những kí tự đã trở thành nền phía dưới có giá trị là 2, còn khoảng không có giá trị là 0.
Khi tôi duyệt qua những ô của kí tự, nếu như ô phía dưới của bất kì ô nào có giá trị là 2, thì sau 0.5s kí tự sẽ ngừng di chuyển. Giá trị của các ô trong kí tự sẽ chuyển thành 2 và kí tự mới xuất hiện.
Vị trí kí tự mới xuất hiện là từ phía trên của hàng đầu tiên, sau đó thì rơi xuống theo từng ô.

Ví dụ 
 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0
 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0
 0 0 0 0 0 0 0 1 1 0 0 0 0 0 0 0
 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
 0 0 0 0 0 0 0 0 0 0 2 0 0 0 0 0
 0 0 0 0 0 0 0 0 0 0 2 0 0 0 0 0
 0 2 0 0 0 0 0 0 0 2 2 0 0 0 2 0
 0 2 2 2 2 2 2 2 2 2 2 2 2 2 2 0


Khi nào thì tôi biết được 1 hàng đã bị phủ kín? Nếu nhiều hàng bị phủ kín cùng lúc thì sao?
Với mỗi khi kí tự ngừng rơi, tôi bắt đầu duyệt qua từng hàng từ dưới lên, nếu hàng nào full thì liệt vô danh sạch loại trừ. Khi duyệt qua tất cả các hàng, thì tôi mới bắt đầu xoá từng hàng trong danh sách loại trừ. Với mỗi hàng, tôi hạ các hàng phía trên xuống 1 đơn vị, và cho xuất hiện particle tại hàng đó. 
Sau khi hạ hết các hàng xuống, tôi lại bắt đầu quét lại cho tới khi nào không có hàng nào bị loại trừ thì mới cho xuất hiện kí tự mới

Khi nào thì start game? Có dấu hiệu nhận biết không?
Tôi không chú trọng vào việc biển diễn các màn hình, do đó việc start game sẽ không có dấu hiệu gì nhiều, chỉ cho kí tự rơi xuống để chơi thôi.

Khi nào thì lên level? Speed tăng bao nhiêu theo level?
Khi điểm vượt quá các mốc điểm của level thì sẽ được tăng level. Tôi sẽ có 1 dictionary quy định mốc điểm và mốc speed cho từng level. Hiện tại tôi chưa biết con số cụ thể vì chưa chạy thử game.

Khi nào thì gameover? Khi gameover thì có hiện gì không? Sau đó thì sao?
Khi có một ô trên hàng đầu tiên có giá trị là 2 thì gameover. Khi gameover, tất cả các ô sẽ chuyển thành màu xám, có thể chạy animation từ dưới lên trên. Sau đó replay lại game.

Khi nào thì tăng score? và tăng bao nhiêu? 
Tăng mỗi khi có hàng bị biến mất. Hiện tại tôi cho như sau
1 hàng: 5
2 hàng: 15
3 hàng: 25
4 hàng trở lên: 50

Resources game


Hiện tại tôi đang khá bận công việc, nên đa phần sẽ không viết cụ thể cách làm thế nào. Tôi chỉ chụp hình minh hoạ thôi, mong các bạn thông cảm.



3 comments:

  1. mình tải cocos creater về rồi mà nó bắt login, mình đăng ký tài khoản rồi nhưng không biết xác nhận thông tin, bạn chỉ giúp mình được không bạn?

    ReplyDelete
  2. n năm sau 1 người xa lạ đọc được những dòng nhật ký này thật là xúc động

    ReplyDelete