CHƯƠNG 3 PHÂN TÍCH VÀ THIẾT KẾ ‘PTITIT GAME’ 3.1 Giới thiệu chung
3.2.4. Ảnh chụp màn hình
Hình 3.13: Ảnh chụp màn hình Level 1
+ Trả lời đúng câu hỏi nào, miếng ghép hình ở câu hỏi đó sẽ được mở ra, để lộ bức hình phía đằng sau.
Hình 3.14: Ảnh chụp màn hình Level 1
+ Khi kết thúc Level 1 hiển thị dialog thông báo điểm số không đủ để vượt qua level:
3.3. Level 2.
3.3.1. Thể loại:
Game vật lý, câu đố, tính thời gian...
3.3.2. Mô tả kịch bản
Mỗi lần chơi sẽ có 5 câu hỏi trắc nghiệm liên quan đến môn học. Tuy nhiên, khác với level 1, thay vì đơn thuần lựa chọn đáp án, người chơi sẽ được thử thách hơn nhiều.
Level 2 mô phỏng một tấm bảng gỗ được giới hạn trong một miền hình chữ nhật, trên đó có nhiều lỗ đen. Có 2 loại lỗ đen: Lỗ nhỏ, chứa đáp án A, B, C tương ứng với kí hiệu ghi trên lỗ và các lỗ to. Nhiệm vụ của người chơi là phải NGHIÊNG thiết bị của mình sao cho quả bóng rơi vào ô chứa đáp án đúng. Nếu chọn sai đáp án, sẽ bị trừ điểm và chuyển sang câu hỏi kế tiếp. Nếu rơi nhầm vào các lỗ to sẽ bị trừ điểm và mất 1 mạng, nếu làm mất 3 mạng thì level này sẽ kết thúc. Thời gian được tính liên tục cho toàn bộ level, đến khi trả lời hết 5 câu hoặc khi người chơi sử dụng hết số mạng.
Cách tính điểm (tối đa 150 điểm cho level 2):
+ Khi bắt đầu, người chơi sẽ có 50 điểm với 3 mạng làm vốn.
+ Lần lượt trả lời 5 câu hỏi trắc nghiệm, với tổng thời gian cho toàn bộ là 100 giây. + Mỗi câu trả lời đúng, điểm số được cộng thêm 20 và chuyển sang câu hỏi tiếp theo. + Mỗi câu trả lời sai, điểm số bị trừ đi 10 điểm và chuyển sang câu hỏi tiếp theo. + Để bóng rơi xuống lỗ, điểm số bị trừ 15 điểm và mất đi một mạng.
+ Level kết thúc khi thời gian đếm ngược hết 100 giây, hoặc sử dụng hết số mạng, hoặc trả lời hết 5 câu hỏi, hoặc bất kì khi nào điểm số của bạn nhỏ hơn 0.
Người chơi được coi là vượt qua level này nếu đạt điểm số lớn hơn hoặc bằng mức điểm mà môn học đề ra. Tương ứng với mỗi màn chơi (hay môn học) sẽ yêu cầu một mức điểm khác nhau, và độ khó tăng dần:
+ Môn học 1 (Lập trình C/C++) yêu cầu 75 điểm để vượt qua. + Môn học 2 (Lập trình Java) yêu cầu 100 điểm để vượt qua. + Môn học 3 (Lập trình Web) yêu cầu 125 điểm để vượt qua.
3.3.3. Thiết kế chi tiết
3.3.3.1. Phân tích kịch bản
+ Vì phần chính của level 2 là yếu tố vật lý, câu hỏi được thêm vào chỉ là phụ. Bởi vậy cần bố trí các đối tượng sao cho nổi bật lên phần vật lý game trong level này.
+ Câu hỏi và đáp án sẽ được đặt ở một phần nhỏ của màn hình, trong khi phần lớn màn hình còn lại để thể hiện game vật lý.
+ Level 2 cũng có phần tính điểm và thời gian, ngoài ra còn thêm cả việc quản lý số mạng. Bởi vậy, cần phân bổ các đối tượng trong màn hình hợp lý để có thể đặt các thành phần này vào trong màn hình.
+ Vị trí các lỗ đáp án hay các lỗ to phải tách biệt, không được trùng nhau, và phải đảm bảo rằng việc di chuyển trái bóng đến các lỗ đáp án là hoàn toàn có thể, không có trường hợp nào trái bóng bị chặn mọi đường dẫn đến lỗ đáp án.
3.3.3.2. Phác thảo giao diện của level 2:
Hình 3.16: Giao diện phác thảo Level 2
Trong giao diện phác thảo Level 2:
+ Phần (1) là dự kiến phần đặt mặt phẳng giới hạn hình chữ nhật, chỉ cho phép trái bóng lăn trên đó. Trên mặt phẳng này cũng bao gồm các lỗ chứa đáp án và các lỗ to.
+ Phần (2) là dự kiến phần đặt các biểu tượng thể hiện số mạng. Khi mất một mạng, đồ họa ở đây sẽ thay đổi báo hiệu cho người chơi biết.
+ Phần (3) là dự kiến phần bố trí hiển thị điểm số và thời gian.
+ Câu hỏi và các đáp án trả lời sẽ được hiển thị trong phần (Câu hỏi) và (Các câu trả lời A B C) tương ứng.
3.3.3.3. Phân tích yếu tố vật lý và cách tính điểm trong Level 2
Việc xử lý các thành phần vật lý cũng như việc kiểm tra kết quả đúng sai của level 2 phức tạp hơn nhiều so với level 1, bởi vậy chúng ta cùng tìm hiểu qua về logic xây dựng các thành phần vật lý và cách thức tính điểm trong level 2.
a. Xây dựng các thành phần vật lý.
Game trong level 2 cần các thành phần sau: + Môi trường vật lý (Physics World)
Chúng ta cần tạo ra một môi trường cho các thành phần vật lý bên trong game. Cách thức khai báo đã được nêu ở mục 2.3.6 và sẽ được nhắc lại ở phần sau.
+ Quả bóng:
Là nhân vật chính trong level 2. Là một AnimatedSprite, có trạng thái vật lý là động và có khả năng tương tác với các thành phần khác trong màn hình game (BodyType.Dynamic).
Lớp LaunchLevel2.java sẽ được implements interface IAccelerationListener, sau đó ghi đè các phương thức onAccelerationAccuracyChanged() và onAccelerationChanged() của nó.
Hình 3.17: Các phương thức của IAccelerationListener
Việc sử dụng IAccelerationListener có ý nghĩa giúp việc di chuyển của trái bóng trong màn hình game gần với thực tế hơn. Tức là sẽ có quán tính, có gia tốc.. thỏa mãn các điều kiện trong môi trường vật lý PhysicsWorld mà chúng ta đã tạo ra ở trên.
Quả bóng này sẽ được di chuyển tự do trong màn hình, và tương tác với các thành phần như các biên, các lỗ đáp án và các lỗ to.
+ Các lỗ đáp án và các lỗ to
Các lỗ đáp án và các lỗ to là các Spite, có trạng thái vật lý là tĩnh (BodyType.Static). Được đặt thuộc tính isCensor = true, để làm cho việc hiển thị các lỗ này tương ứng với hình nền. Nghĩa là khi quả bóng di chuyển qua các lỗ, thì hình ảnh quả bóng sẽ được hiển thị lên trên hình ảnh các lỗ.
Các lỗ đáp án có kích thước nhỏ hơn kích thước quả bóng. Các lỗ to có kích thước lớn hơn kích thước quả bóng.
Việc bố trí các lỗ trong màn hình phải thỏa mãn điều kiện sao cho việc di chuyển quả bóng đên bất kì lỗ đáp án nào là hoàn toàn khả thi. Không có trường hợp các lỗ to chắn hết các đường di chuyển của quả bóng đến một lỗ đáp án nào đó.
+ Hình chữ nhật bao quanh giới hạn phần màn hình mà quả bóng có thể di chuyển. Việc tạo phần giới hạn hình chữ nhật này sẽ được nói đến ở phần sau.
b. Cách thức tính điểm trong Level 2
Đầu tiên ta xét ‘va chạm’ giữa quả bóng với các lỗ trong màn hình.
Việc xét ‘va chạm’ này chỉ là tương đối, vì nếu chúng ta đưa quả bóng đến cạnh một lỗ mà đã bị coi là quả bóng đó chui vào lỗ thì hoàn toàn vô lý, phi thực tế. Bởi vậy, ở đây chúng ta xét ‘va chạm’ dựa vào việc tính khoảng cách giữa tâm của quả bóng với tâm của lỗ.
Gọi r1 là bán kính quả bóng, r2 là bán kính của lỗ.
Gọi ball_center_X là tọa độ X, ball_center_Y là tọa độ Y của tâm quả bóng.
ball_center_X =(ball_AS.getX() + ball_AS.getWidth())/2; ball_center_Y = (ball_AS.getY() + ball_AS.getHeight())/2;
Gọi hole_center_X là tọa độ X, hole_center_Y là tọa độ Y của tâm lỗ.
hole_center_X = (hole_SP.getX() + hole_SP.getWidth())/2; hole_center_Y = (hole_SP.getY() + hole_SP.getHeight())/2;
distance_X = Math.abs(ball_center_X - hole_center_X); distance_Y = Math.abs(ball_center_Y - hole_center_Y);
d = Math.sqrt(Math.pow(distance_X, 2)+Math.pow(distance_Y, 2));
Ta có thể xét tương đối việc quả bóng chui vào lỗ khi:
d <= e; với e là số bất kì và e <= min (r1, r2)
Tất nhiên việc xét ‘va chạm’ này chỉ mang tính tương đối, vì không tính đến trọng lượng cũng như vận tốc trái bóng trên đường di chuyển đến lỗ đó. Ta tạm chấp nhận công thức trên để cho việc xử lý kết quả không quá phức tạp.
+ Sau khi xử lý được ‘va chạm’ giữa quả bóng với một lỗ nào đó. Chúng ta tiến hành tính điểm tương tự như ở Level 1.
Nếu câu trả lời đúng, ta cộng vào điểm một mức 20 điểm Nếu câu trả lời sai, ta cộng vào điểm một mức -10 điểm Nếu rơi vào lỗ đen lớn, ta cộng vào điểm một mức -15 điểm
3.3.3.4. Code
Hình 3.18: Cấu trúc các thành phần của Level 2 a. LaunchLevel2.java
Là phần thân chính của game, một lớp được extends từ SimpleBaseGameActivity của AndEngine GLES2. Đây là nơi nạp dữ liệu ban đầu, tải các tài nguyên, sắp xếp và phân bổ vị trí cũng như kích thước các đối tượng.
Một số phần trong source code: + Khai báo biến:
Các thần phần sử dụng trong LaunchLevel2:
o mHinhNen: đối tượng này sẽ tạo ảnh nền cho Level2. Ở đây ảnh nền chính là hình tấm gỗ, để tạo cảm giác thật hơn cho người chơi.
o mKhungCauHoi: đối tượng này thể hiện phần (Câu hỏi) và phần (Các câu trả lời A B C) trong giao diện phác thảo Level 2 (Hình 3.16).
o mThoiGianDemNguoc: là một đối tượng chứa đoạn text thể hiện thời gian đếm ngược trong game, được biểu diễn ở phần (3) trong giao diện phác thảo Level 2 (Hình 3.16).
o mDiem: là một đối tượng chứa đoạn text thể hiện điểm số trong game, được biểu diễn ở phần (3) trong giao diện phác thảo level 2 (Hình 3.16)
o timer: luồng điều khiển đếm ngược thời gian.
o mDungSai: đây là một đối tượng mới khác với Level 1, nó sẽ tạo ra một AnimatedSprite để thể hiện việc trả lời câu hỏi đúng hay sai. Chỉ hiển thị khi người chơi vừa lựa chọn câu trả lời, sau đó sẽ được ẩn khỏi màn hình.
+ Một số phương thức:
Phương thức onCreate(Bundle savedInstanceState);
Đây là phương thức của một Activity thông thường, có tác dụng khởi tạo các thành phần được sử dụng bên trong game.
Hình 3.20: Phương thức onCreate() của LaunchLevel2.java
Phương thức onCreateEngineOptions(); tương tự như LauncherLevel1.java Phương thức onCreateResources();
Ở đây, chúng ta cần createResources cho các biến, đồng thời cũng cần nạp vào hình ảnh các lỗ đen cũng như các lỗ đáp án để sử dụng trong game.
Phương thức onCreateScene();
Tại đây, ta thực hiện các bước xây dựng một thế giới vật lý như đã nói ở mục 2.3.6b.
B1: Ta khởi tạo biến PhysicsWorld
Hình 3.21: Khởi tạo môi trường vật lý trong LaunchLevel2.java
Tham số new Vector2(0,0) để thể hiện gia tốc trọng trường. Trong trường hợp này chúng ta coi quả bóng nằm trên mặt phẳng nằm ngang so với màn hình của thiết bị. Bởi vậy ta không xét đến trọng lực của quả bóng.
B2: Ta tạo một hình chữ nhật để giới hạn miền mà quả bóng có thể di chuyển.
Hình 3.22: Tạo hình chữ nhật giới hạn miền di chuyển quả bóng.
Hình 3.23: Gán trạng thái cho các cạnh của hình chữ nhật.
B3: Ta gắn các cạnh hình chữ nhật vừa tạo vào trong Scene. Đồng thời đăng ký
Hình 3.24: Gắn hình chữ nhật tĩnh vào trong Scene.
Ta làm tương tự các bước trên với các sprite thể hiện các lỗ đen to và các lỗ đáp án. Bởi chúng cũng là những đối tượng cần xét đến trong môi trường vật lý, và chúng nằm yên trong màn hình. Cần lưu ý rằng, ta phải set thuộc tính cho các lỗ đen này là isCensor để trong chúng như trùng với nền của level.
B4: Kết nối các Sprite với vật lý thông qua PhysicsConnectors.
Ở đây, ta không xét đến việc xử lý tương tác khi quả bóng đập vào các cạnh hình chữ nhật. Bởi vậy, không cần kết nối chúng thông qua PhysicsConnectors.
Mặt khác, quả bóng là đối tượng động (BodyType.DynamicBody) mà chúng ta cần quan tâm đến vị trí cũng như sự tương tác của nó với các thành phần khác trong Scene. Bởi vậy, ta tạo kết nối của ball_AS với vật lý thông qua PhysicsConnectors.
Hình 3.25: Tạo quả bóng trong LaunchLevel2.java B5: Đăng ký Box2D PhysicsWorld như một UpdateHandler cho Scene.
Hình 3.26: Đăng kí PhysicsWorld cho Scene. b. HinhNen.java
Lớp HinhNen.java tạo ra hình nền là hình tấm gỗ cho Level2.
c. KhungCauHoi.java
Lớp KhungCauHoi.java tạo ra phần hiển thị câu hỏi thông qua Text. Text thể hiện câu hỏi sẽ được đặt trên cùng màn hình. Text thể hiện các phương án trả lời sẽ được đặt phía dưới cùng của màn hình. Câu hỏi và nội dung các đáp án được lấy ra theo thứ tự ngẫu nhiên từ cơ sở dữ liệu. Và đảm bảo 2 lần chơi khác nhau không lấy ra cùng 1 tập câu hỏi.
d. DungSai.java
Lớp DungSai.java tạo ra phần hiển thị một AnimatedSprite cho phép thể hiện kết quả của câu trả lời mà người chơi lựa chọn là đúng hay sai. Các AnimatedSprite này chỉ xuất hiện sau khi người chơi chọn đáp án, và sẽ được ẩn khỏi màn hình sau một khoảng thời gian.
e. ThoiGianDemNguoc.java và Diem.java
Hình 3.27: Thể hiện của lớp ThoiGianDemNguoc.java và Diem.java trong Level 2
Lớp ThoiGianDemNguoc.java và Diem.java chứa 2 đối tượng Text để hiển thị thời gian và điểm số trong game. Hai text này đã được format font.
f. Resources.java
Khác với Level 1, lớp Resource.java phức tạp hơn. Ngoài các biến giá trị được sử dụng trong game như startScore: Điểm ban đầu khi chơi; trueAnswer: Điểm cho mỗi câu trả lời đúng; wrongAnswer: Điểm cho mỗi câu trả lời sai.. Tại đây còn lưu giá trị tọa độ của vị trí các lỗ đen và các lỗ đáp án trong màn hình, cũng như số lượng các lỗ đen sẽ xuất hiện trong màn hình. Việc lựa chọn vị trí các lỗ hay số lượng này tùy thuộc vào người lập trình.
3.3.3.5. Yêu cầu về xử lý đồ họa
+ Các ảnh cho các sprite phải có nền trống (transparent), là ảnh png.
+ Ảnh cho lỗ đen phải có viền gần giống với màu nền gỗ, để tạo cảm giác hòa trộn giữa lỗ đen với nền.
Hình 3.28: Một số hình ảnh dùng cho các Sprite trong Level 2
3.3.4. Ảnh chụp màn hình
+ Màn hình Level 2 khi bắt đầu chơi.
Hình 3.29: Ảnh chụp màn hình Level 2
+ Màn hình level 2 khi người chơi để bóng rơi vào lỗ đen và mất mạng. Hình ảnh bên trái thể hiện số mạng chơi sẽ thay đổi.
+ Khi kết thúc Level 2 hiển thị dialog thông báo điểm số không đủ để vượt qua level:
Hình 3.31: Ảnh chụp màn hình Level 2