Chương 8. Rectangle Destroyer
Trong chương này, chúng ta sẽ cùng tạo một game được gọi là Rectangle Destroyer. Lấy cảm hứng từ trò chơi cổ điển Breakout.
Bài 1. Giới thiệu
Trong Rectangle Destroyer, người chơi điều khiển một tấm ván di chuyển từ bên này sang bên kia, nó được sử dụng để bật lại những quả bóng và phá vỡ các viên gạch hình chữ nhật bên trên. Mục tiêu là phá hủy tất cả các viên gạch hình chữ nhật. Thi thoảng, một viên gạch bị phá hủy sẽ cho xuất hiện một hiệu ứng nào đó, dùng để cản trở hoặc hỗ trợ người chơi bằng cách thay đổi các phần của lối chơi, chẳng hạn như tăng kích thước tấm ván, khiến quả bóng bay nhanh hơn,... Nếu quả bóng rơi qua tấm ván và chạm vào cạnh dưới của màn hình thì quả bóng sẽ biến mất. Người chơi sẽ có một vài quả bóng thay thế; đến khi hết bóng, người chơi thua.
Các sự điều khiển và giao diện người dùng (UI) sẽ được tối giản. Tấm ván được di chuyển bằng cách di chuyển chuột sang trái và phải, các hiệu ứng được thu thập bằng cách bắt chúng (cho va chạm với tấm ván). Giao diện người dùng thì hiển thị điểm số của người chơi số quả bóng còn lại. Một số hiệu ứng có thể thay đổi hình dạng của tấm ván hoặc quả bóng.
Các nguyên liệu chính bao gồm các đối tượng sprite, tiled background và chuột; các hành vi Solid, Bullet và Pin; hàm random và biến toàn cầu (global variable). Bạn sẽ sử dụng các hoạt ảnh để lưu trữ các hình ảnh khác nhau tương ứng với các hiệu ứng khác nhau và số lần xuất hiện khác nhau của quả bóng với tấm ván. Bạn sẽ được học về hàm Choose, giúp dễ dàng chọn ngẫu nhiên một từ hoặc một số từ những đầu vào được nhập trước đó.
Để bắt đầu, tải tệp .zip lưu trữ đồ họa của chương này. Trong các thuộc tính layout, thiết lập tên layout thành Main, thiết lập Size thành 600, 800. Như bạn đã có trong các dự án trước, thiết lập 3 layer Main, Background và UI. Trong thuộc tính của project, thay đổi Window Size thành 600, 800. Thiết lập Active layer thành Background. Thêm đối tượng TiledBackground, đặt tên là Background, sử dụng hình ảnh background.png và thay đổi kích cỡ của nó để nó bao phủ hoàn toàn layout. Khóa layer khi bạn hoàn thành và thiết lập Active layer thành Main.
Bài 2. Tấm ván, bức tường,
các viên gạch và quả bóng
Thêm một sprite mới đặt tên là Paddle với hình ảnh paddle.png và đặt nó ở gần cuối layout. Thêm hành vi Solid và Bound to layout. Hầu hết trong các thể loại game breakout, đánh bóng về phía bên trái tấm ván sẽ khiến quả bóng nảy sang trái và đánh bóng sang bên phải sẽ khiến nó nảy sang bên phải; do đó, bạn cần điều chỉnh đa giác va chạm của đối tượng Paddle như hình dưới đây. Tiếp theo, thêm đối tượng Mouse vào project (được sử dụng để điều khiển tấm ván). Trong event sheet, tạo một sự kiện mới với điều kiện System: Every tick, thêm một hành động Paddle: Set X và nhập Mouse.X.
Tiếp theo, tạo đối tượng TiledBackground đặt tên là Wall với hình ảnh white-pixels.png. Thêm hành vi Solid. Tạo hai bản sao của đối tượng Wall và đặt 3 cái ở 3 vị trí trái, phải và trên cùng của layout như trong hình đầu tiên. Đặc biện, bản sao ở trên cùng sẽ dày hơn để ta có thể chèn văn bản vào đó.
Thêm một sprite được gọi là Brick với hình ảnh brick-red.png (nằm trong thư mục Bricks), và trong cửa sổ Animations, thay đổi tên animation thành red. Tạo một animation mới được gọi là blue, sử dụng hình ảnh brick-blue.png. Lặp lại quá trình này với các viên gạch có màu khác (bao gồm có 8 màu khác nhau). Khi bạn đã hoàn tất, đóng cửa sổ chỉnh sửa hình ảnh. Tiếp theo, thêm các hành vi Solid và Fade. Trong bảng Properties, thay đổi thuộc tính của hành vi Fade là Active at start thành No và thay đổi Fade out time thành 0,25. Bây giờ thì bạn đã hiểu tại sao ta phải tạo nhiều bản sao của viên gạch như thế (nếu chỉ có một thì trò chơi sẽ kết thúc rất nhanh và nhàm chán), nhưng trước khi bạn làm thế, có lẽ bạn sẽ cần kích hoạt các tùy chọn khung lưới trong C2, như bạn đã làm trong game Cleanup Challenge ở chương 4. Để làm vậy, trong View tab, lựa chọn Snap to grid và Show grid; bạn cũng nên thay đổi kích cỡ chiều rộng và chiều cao của lưới thành 8, vì điều này sẽ tạo ra một mạng lưới mượt hơn và cho phép điều chỉnh chính xác hơn. Cuối cùng, tạo một vài bản sao của đối tượng Brick và căn chỉnh chúng trong các hàng ở gần đầu layout. Bạn có thể thay đổi màu sắc của các viên gạch bằng cách nhập tên hoạt ảnh (mà bạn đã đặt trước đó) trong bảng Properties - Initial Animation.
Thêm một sprite đặt tên là Ball sử dụng hình ảnh ball-normal.png Thêm hành vi Bullet (thay đổi các thuộc tính Speed thành 300, Gravity thành 8, và Bound off solids thành Yes), Solid và Destroy outside layout. Đặt quả bóng ngay phía trên tấm ván và thiết lập thuộc tính Angle thành 280 để lúc đầu quả bóng sẽ đi lên trên chếch về bên phải. Tạo một sự kiện mới với điều kiện Ball - On collision with, chọn Brick. Sau đó, thêm các hành động Brick - Fade: Start fade và Brick - Solid: Set enabled, và lựa chọn Disabled. Sự kiện sẽ như hình dưới.
Thêm một sprite được gọi là Brick với hình ảnh brick-red.png (nằm trong thư mục Bricks), và trong cửa sổ Animations, thay đổi tên animation thành red. Tạo một animation mới được gọi là blue, sử dụng hình ảnh brick-blue.png. Lặp lại quá trình này với các viên gạch có màu khác (bao gồm có 8 màu khác nhau). Khi bạn đã hoàn tất, đóng cửa sổ chỉnh sửa hình ảnh. Tiếp theo, thêm các hành vi Solid và Fade. Trong bảng Properties, thay đổi thuộc tính của hành vi Fade là Active at start thành No và thay đổi Fade out time thành 0,25. Bây giờ thì bạn đã hiểu tại sao ta phải tạo nhiều bản sao của viên gạch như thế (nếu chỉ có một thì trò chơi sẽ kết thúc rất nhanh và nhàm chán), nhưng trước khi bạn làm thế, có lẽ bạn sẽ cần kích hoạt các tùy chọn khung lưới trong C2, như bạn đã làm trong game Cleanup Challenge ở chương 4. Để làm vậy, trong View tab, lựa chọn Snap to grid và Show grid; bạn cũng nên thay đổi kích cỡ chiều rộng và chiều cao của lưới thành 8, vì điều này sẽ tạo ra một mạng lưới mượt hơn và cho phép điều chỉnh chính xác hơn. Cuối cùng, tạo một vài bản sao của đối tượng Brick và căn chỉnh chúng trong các hàng ở gần đầu layout. Bạn có thể thay đổi màu sắc của các viên gạch bằng cách nhập tên hoạt ảnh (mà bạn đã đặt trước đó) trong bảng Properties - Initial Animation.
Thêm một sprite đặt tên là Ball sử dụng hình ảnh ball-normal.png Thêm hành vi Bullet (thay đổi các thuộc tính Speed thành 300, Gravity thành 8, và Bound off solids thành Yes), Solid và Destroy outside layout. Đặt quả bóng ngay phía trên tấm ván và thiết lập thuộc tính Angle thành 280 để lúc đầu quả bóng sẽ đi lên trên chếch về bên phải. Tạo một sự kiện mới với điều kiện Ball - On collision with, chọn Brick. Sau đó, thêm các hành động Brick - Fade: Start fade và Brick - Solid: Set enabled, và lựa chọn Disabled. Sự kiện sẽ như hình dưới.
