Chương 6. Plane Dodger
Trong chương này, chúng ta sẽ cùng tạo một trò chơi được gọi là Plane Dodger, là một game side-scrolling giống như Flappy Bird.
Trong Plane Dodger, người chơi điều khiển một máy bay màu xanh (chúng ta sẽ gọi là the plane), mục tiêu của nó là thu thập các ngôi sao trên bầu trời trong khi những máy bay màu đỏ là máy bay địch xuất hiện theo một chu kì. Những ngôi sao và máy bay địch sẽ xuất hiện ngẫu nhiên từ phải sang trái. Tốc độ máy bay địch sinh ra cũng như tốc độ di chuyển của chúng sẽ tăng dần theo thời gian. Trò chơi này là vô tận, nhiệm vụ của người chơi là thu thập được càng nhiều sao càng tốt trước khi đâm phải máy bay địch.
Người chơi điều khiển máy bay bằng một phím duy nhất, giúp máy bay bật lên. Tuy nhiên, lực hấp dẫn sẽ liên tục kéo máy bay xuống. Trong khi nó xuất hiện như một chiếc máy bay di chuyển từ trái sang phải, đây chính là ảo giác thị giác được tạo bởi scrolling background (sẽ được giải thích ở phần tiếp theo), trong thực tế, chuyển động của máy bay chỉ là bật lên tại một cột đơn lẻ. giao diện người dùng được thiết kế đơn giản và tối thiểu, vì vậy sẽ không ảnh hưởng đến trải nghiệm của người chơi.
Như thường lệ, trò chơi này sẽ được áp dụng kiến thức từ các chương trước. Đặc biệt, bạn sẽ được làm quen với hành vi Bullet, tạo hoạt ảnh, tạo biến (toàn cầu), và sử dụng đối tượng Text. Đặc biệt trong chương này, ta sẽ làm quen với scrolling background và parallax (thị sai) (Parallax là từ thường được dùng trong video games 2D, sử dụng nhiều hình ảnh nền rồi cho chúng cùng lúc di chuyển song song với những tốc độ khác nhau, tạo ra ảo giác về chiều sâu khi nhìn vào), sử dụng lực hấp dẫn và tạo sự tăng độ khó.
Để bắt đầu, hãy tải tệp .zip chứa các hình ảnh hỗ trợ cho game này. Trong thuộc tính layout, thiết lập layout Name thành Main, thiết lập Size thành 600, 800. Như các project trước đó, thiết lập 3 layer đặt tên là Background, Main, UI. Trong các thuộc tính của project, thay đổi Window Size thành 600, 800.
WAITING FOR LUV
Bạn có muốn cải thiện khả năng thiết kế đồ họa của mình? Chắc hẳn các bạn cũng biết, nếu các dòng code là linh hồn của một trò chơi, thì đồ họa chính là bộ mặt của trò chơi đó. Đồ họa đẹp, dễ nhìn sẽ khiến trò chơi của bạn tăng tỉ lệ hấp dẫn người xem đến 90%. Hiện tại có hai công cụ hỗ trợ thiết kế đồ họa game tiện nhất mà mình biết, đó là Photoshop và Illustrator. Mình sẽ cố gắng tìm kiếm và chia sẻ các đồ họa game miễn phí cho các bạn tại blog này; tuy nhiên,
một trò chơi mà 100% do chính mình tạo ra vẫn hơn là đi cóp nhặt hình ảnh từ nơi khác đúng không nào. Tiện đây, mình có chia sẻ một khóa học thiết kế đồ họa Game 2D cho Mobile. Các bạn có thể tham khảo dưới đây để được giảm 40% học phí nhé.
Bài 1. Hiệu ứng background
Trong phần này, bạn sẽ thiết lập hiệu ứng "cuộn vô hạn" (infinite scrolling) với hình ảnh background. Do các hình ảnh không thể có kích thước vô hạn, nên sẽ có một kĩ thuật dùng để tạo ảo ảnh của một hình nền vô hạn. Ý tưởng ở đây là sử dụng các hình ảnh liền mạch cho background để khi hai bản sao của hình ảnh được đặt cạnh nhau, ta sẽ thấy như một hình ảnh xuất hiện mãi mãi. Cả hai hình ảnh sẽ cùng cuộn tới phía bên trái cùng một tốc độ và một khi di chuyển sang bên trái màn hình, nó sẽ lập tức được dịch chuyển sang bên phải, trên phía đối diện của layout, được minh họa ở hình dưới đây:
Đầu tiên, bạn tạo một đối tượng background. Trong thuộc tính layout, thay đổi Active layer thành Background. Thêm một sprite mới được gọi là Sky, sử dụng hình ảnh sky.png. Thay đổi kích cỡ của nó thành 600, 800 - bằng với kích cỡ của layout. Đối tượng này nên được căn chỉnh chính xác trên layout, vì vậy sử dụng bảng Properties, thiết lập vị trí thành 300, 400. Thêm hành vi Bullet, thay đổi Speed thành 50 và thay đổi Set Angle thành No (bởi vị đối tượng này không được xoay). Thật không may, góc chuyển động của hành vi Bullet không được thiết lập ở bảng Properties, do đó, điều này sẽ được thiết lập thông qua một sự kiện thay thế. Trong event sheet, tạo một sự kiện mới với điều kiện System - Start & End: On Start of Layout, thêm hành động Sky - Bullet: Set angle of motion, và thiết lập Angle thành 180. Tạo một bản sao của đối tượng Sky, và trong bảng Properties, thiết lập vị trí thành 900, 400 để nó được căn chỉnh chính xác ở bên phải đối tượng Sky trước đó.
Tiếp theo, bạn sẽ tạo sự kiện khiến đối tượng Sky di chuyển sang bên phải sau khi nó di chuyển hoàn toàn khỏi màn hình ở bên trái. Tạo một sự kiện với điều kiện Sky - Size & Position: Is on-screen. Khi hoàn thành, kích chuột phải vào điều kiện này trong event sheet và lựa chọn Invert từ thanh menu xuất hiện. Kích chuột phải vào điều kiện lần nữa, chọn Add another condition, tạo điều kiện Sky - Size & Position: Compare X, thay đổi Comparison thành less than và X bằng 0. Cuối cùng, thêm hành động Sky - Size & Position: Move at angle, với Angle thiết lập thành 0 và Distance thiết lập thành 2 * Sky.Width. Khi bạn hoàn thành, sự kiện này sẽ xuất hiện trong hình dưới đây. Lưu và test project của bạn, các hình nền sẽ chạy mãi và không có khoảng cách giữa hai hình ảnh.
Một khi sprite Sky được thiết lập xong, hãy tiếp tục thiết lập sprite mặt đất tương tự như thế. Tạo một sprite được đặt tên là Ground, sử dụng hình ảnh ground.png, sửa kích cwox thành 600x80. Thiết lập Position thành 300, 760. Thêm hành vi Bullet, thay đổi Speed thành 200, và thay đổi Set Angle thành No. Nhân đôi đối tượng Ground và đặt nó ở vị trí 900, 760. Tại thời điểm này, layout của bạn sẽ xuất hiện như hình dưới:
Trong sự kiện với điều kiện On start of layout, thêm một hành động thứ hai để thiết lập góc chuyển động của đối tượng Ground thành 180. Cuối cùng, tạo một sự kiện mới khiến đối tượng Ground di chuyển sau khi nó ra khỏi màn hình, tương tự như khi bạn làm cho đối tượng Sky. Khi hoàn thành, các sự kiện sẽ trông như hình dưới. Lưu và test thử để xác nhận mặt đất có cuộn như mong muốn. Bằng cách thiết lập những cảnh quan phía xa (như mây và núi) cuộn chậm hơn cảnh quan ở gần (mặt đất), chúng ta đã tạo ra được hiệu ứng thị sai.
Bài 2. Máy bay của người chơi
Trong phần này, bạn sẽ thiết lập máy bay mà người chơi điều khiển. Trong layout, thay đổi Active layer thành Main để các đối tượng mới sẽ được đặt ở layer này. Tạo một sprite mới đặt tên là Player. Đối tượng có một hoạt ảnh có hình ảnh được lưu trữ riêng biệt ở mỗi tệp, chính vì vậy, trong cửa sổ Animation frames, kích chuột phải, lựa chọn Import frames và sau đó chọn From Files. Sử dụng những hình ảnh planeGreen0.png, planeGreen1.png và planeGreen2.png và xóa khung ảnh trống ban đầu đi. Về các thuộc tính của hoạt ảnh, thiết lập Speed thành 8, Loop thành Yes và ping-pong thành Yes. Thiết lập Position tại 100, 300. Máy bay này sẽ chỉ di chuyển lên và xuống; máy bay bật lên khi người chơi chạm vào màn hình và rơi xuống bởi lực hấp dẫn, cả 2 điều này đều có thể được thiết lập bởi hành vi Bullet. Thêm hành vi Bullet cho đối tượng Player, thiết lập Speed thành 0, thiết lập Gravity thành 600 và thay đổi Set Angle thành No vì ta muốn máy bay luôn hướng mặt về phía bên phải kể cả khi đi lên và xuống. Ngoài ra, hãy thêm hành vi Bound to Layout, điều này sẽ khiên máy bay không bị di chuyển ra khỏi màn hình.
Tiếp theo, ta cần máy bay phải dừng lại khi đam vào mặt đất. Có lẽ bạn sẽ nghĩ rằng đầu tiên ta cần thêm hành vi Solid cho mặt đất, nhưng tiếc là điều này sẽ không hoạt động. Theo mặc định, các đối tượng với hành vi Bullet sẽ đi xuyên qua các đối tượng có hành vi Solid trừ khi thuộc tính Bound off solids được thiết lập thành Yes; trong trường hợp đó, vẫn xảy ra điều mà ta không mong muốn đó là máy bay bị bật trả lại. Ngoài ra, thiết lập tốc độ của máy bay về 0 khi va chạm với mặt đất cũng không ổn bởi vì trọng lực vẫn sẽ kéo máy bay đi qua. Giải pháp đơn giản nhất đó chính là vô hiệu hóa hành vi Bullet khi máy bay va chạm với mặt đất và sau đó kích hoạt lại khi người chơi bấm một phím. Khi bấm một phím, máy bay sẽ di chuyển lên trên, bằng cách thiết lập góc chuyển động thành 270 độ với tốc độ 300. Để bắt đầu, thêm đối tượng Keyboard vào project của bạn. Sau đó, trong event sheet, tạo một sự kiện mới với điều kiện Keyboard - Keyboard: On Key Pressed và lựa chọn nút Space (nút cách). Sau đó, thêm 3 hành động Player - Bullet tới sự kiện này: thêm Set angle of motion, và thiết lập Angle thành 270; thêm Set speed, và thiết lập speed thành 300; cuối cùng là thêm Set enabled và thiết lập State thành enabled. Tạo một sự kiện khác, với điều kiện Player - Collisions: On Collision with another object, và lựa chọn Ground. Sau đó thêm hành động Player - Bullet: Set Enabled, và thiết lập State thành Disabled. Khi đã hoàn thành, những sự kiện này sẽ như hình bên dưới. Lưu lại và chơi thử xem có bị lỗi gì không. Kiểm tra bằng cách nhấn phím cách để máy bay bật lên và máy bay dừng di chuyển khi chạm mặt đất.
Tiếp theo, ta cần máy bay phải dừng lại khi đam vào mặt đất. Có lẽ bạn sẽ nghĩ rằng đầu tiên ta cần thêm hành vi Solid cho mặt đất, nhưng tiếc là điều này sẽ không hoạt động. Theo mặc định, các đối tượng với hành vi Bullet sẽ đi xuyên qua các đối tượng có hành vi Solid trừ khi thuộc tính Bound off solids được thiết lập thành Yes; trong trường hợp đó, vẫn xảy ra điều mà ta không mong muốn đó là máy bay bị bật trả lại. Ngoài ra, thiết lập tốc độ của máy bay về 0 khi va chạm với mặt đất cũng không ổn bởi vì trọng lực vẫn sẽ kéo máy bay đi qua. Giải pháp đơn giản nhất đó chính là vô hiệu hóa hành vi Bullet khi máy bay va chạm với mặt đất và sau đó kích hoạt lại khi người chơi bấm một phím. Khi bấm một phím, máy bay sẽ di chuyển lên trên, bằng cách thiết lập góc chuyển động thành 270 độ với tốc độ 300. Để bắt đầu, thêm đối tượng Keyboard vào project của bạn. Sau đó, trong event sheet, tạo một sự kiện mới với điều kiện Keyboard - Keyboard: On Key Pressed và lựa chọn nút Space (nút cách). Sau đó, thêm 3 hành động Player - Bullet tới sự kiện này: thêm Set angle of motion, và thiết lập Angle thành 270; thêm Set speed, và thiết lập speed thành 300; cuối cùng là thêm Set enabled và thiết lập State thành enabled. Tạo một sự kiện khác, với điều kiện Player - Collisions: On Collision with another object, và lựa chọn Ground. Sau đó thêm hành động Player - Bullet: Set Enabled, và thiết lập State thành Disabled. Khi đã hoàn thành, những sự kiện này sẽ như hình bên dưới. Lưu lại và chơi thử xem có bị lỗi gì không. Kiểm tra bằng cách nhấn phím cách để máy bay bật lên và máy bay dừng di chuyển khi chạm mặt đất.
Bản dịch do construct2vn.ga thực hiện
Ai sao chép hay chia sẻ hãy ghi nguồn và đưa link www.construct2vn.ga vào đầu bài chia sẻ nhé
