Bài 4. Race Timer
Trong phần này, chúng ta sẽ thiết lập thời gian hiển thị mà người chơi đã đua. Điều này đòi hỏi một số yêu cầu để không làm trôi mất lớp UI, để bắt đầu và kết thúc đúng thời điểm và để ngăn người chơi thắng bằng cách lái xe lùi lại và kết thúc trò chơi (đây chính là bug).
Đầu tiên, thêm một đối tượng Text có tên là TextTimer tới project. Đặt nó ở UI layer và di chuyển nó tới góc trên bên trái layout. Bởi vì ô tô sẽ di chuyển xung quanh layout nên các vị trí khác trong trò chơi sẽ có thể nhìn thấy; tuy nhiên, nội dung của UI layer nên cố định tại một chỗ. Để thiết lập cài đặt này, kích vào UI layer trong bảng Layer và thiết lập thuộc tính layer Parallax thành 0,0. Thuộc tính này chỉ ra rằng layer tương ứng sẽ không cuộn. Lựa chọn đối tượng TextTimer, thay đổi Text mặc định thành Time: 0.00. Để làm cho văn bản dễ nhìn hơn, thay đổi phông chữ thành Arial, bold, size 24. Giữ nguyên màu đen của chữ hoặc thay đổi sang bất cứ màu nào mà bạn muốn nhưng tốt nhất nên tìm một màu tương phản với nền, bạn có thể sử dụng hiệu ứng tạo bóng như ở chương trước. Tạo một bản sao TextTimer khác, di chuyển nó lên trên một tí rồi đổi sang màu trắng. Bạn sẽ được một đối tượng vô cùng chuyên nghiệp như dưới đây:
Tiếp theo, bạn sẽ thêm một cái đích, báo hiệu kết thúc đường đua. Thay đổi Active layer thành Main (đây sẽ là layer hoạt động cho phần còn lại của chương này). Thêm một sprite mới tên là FinishLine với tệp hình ảnh checkboard.png. Vị trí này ở phần cuối của đường đua, nếu đường đua là một vòng lặp thì nó thường ở ngay sau vạch xuất phát. Thay đổi kích thước của nó nếu muốn. Thay đổi Opacity thành 60, độ trong suốt này sẽ giúp nó như thể được vẽ lên đường đua. Ngoài ra, vì sprite FinishLine được thêm vào Main layer sau đối tượng Car nên FinishLine sẽ nằm bên trên Car; để khắc phục điều này, kích chuột phải vào Car và lựa chọn Z-order - Send to top layer.
Bây giờ, đã đến lúc bạn thêm các sự kiện để theo dõi và hiển thị thời gian trôi qua. Trong event sheet, thêm một biến toàn cầu có tên là RaceTime với initial value là 0; biến này sẽ theo dõi thời gian trôi qua từ lúc xe bắt đầu chạy. Tuy nhiên, biến này chỉ được tăng lên trong suốt cuốc đua, chứ không được tăng ngoài lúc đua. Để theo dõi trò chơi hiện đang ở trạng thái nào (trước lúc đua, trong lúc đua và sau lúc đua), tạo một biến toàn cầu khác tên là RaceState với initial value là 0. Giá trị 0 sẽ cho biết cuộc đua vẫn chưa bắt đầu, giá trị 1 sẽ cho biết cuộc đua đang diễn ra (và biến RaceTime sẽ được tăng lên đồng thời văn bản được cập nhật) và giá trị 2 sẽ cho biết cuộc đua kết thúc. Thêm đối tượng Keyboard, sau đó tạo các sự kiện sau:
- Một sự kiện để phát hiện cuộc đua bắt đầu. Tạo một sự kiện mới với điều kiện Keyboard - On key pressed và chọn mũi tên Up. Thêm điều kiện System - Compare variable, để kiểm tra xem RaceState bằng 0 hay không. Thêm hành động System - Variable: Set value; đặt RaceState bằng 1.
- Một sự kiện cần thiết để cập nhật thời gian và hiển thị văn bản khi cuộc đua đang diễn ra. tạo một sự kiện mới với điều kiện System - Compare variable, để kiểm tra xem RaceState có bằng 1 hay không. Có hai hành động cho sự kiện này. Hành động đầu tiên được thêm vào là System - Variable: Add to. Thêm vào biến RaceTime một giá trị dt (lưu trữ khoảng thời gian đã trôi qua kể từ lần tích cuối cùng). Hành động thứ hai đó là TextTimer - Text: Set text. Thiết lập nó thành "Time: " & round(RaceTime * 100) / 100. Biểu thức toán học này dùng để làm tròn giá trị của RaceTime đến hai chữ số thập phân.
- Sự kiện còn lại để phát hiện cuộc đua đã kết thúc. Tạo một sự kiện mới với điều kiện Car - On collision with, và lựa chọn FinishLine. Hành động tương ứng là System - Variable: Set value. Thiết lập RaceState bằng 2.
Khi bạn hoàn thành, bạn sẽ có sự kiện như dưới đây:
Cuối cùng, bạn có thể đã nhận ra dễ dàng có một cheat trong game này và có thể kết thúc cuộc đua một cách nhanh chóng. Thay vì đi đủ một vòng đường đua như dự kiến, bạn có thể di chuyển lên phía trước một chút rồi lùi xe về phía sau qua vạch đích, rồi tiếp tục đi lên, thế là xong game. Để ngăn người chơi làm việc này, bạn sẽ thiết lập cơ chế one-way gate bằng cách sử dụng một sprite mới và hai sự kiện kèm theo. Tạo một sự kiện mới tên là Gate với hình ảnh gate.png. Vị trí của Gate liền kề với các FinishLine như ở hình dưới, thiết lập thuộc tính Initial Visibility thành Invisible. Khi điều chỉnh xong, bạn có thể phóng to hoặc thu nhỏ nhỏ bằng cách giữ Ctrl và lăn con lăn chuột.
Thêm hành vi Solid vào Gate. Ý tưởng ở đây là open gate (vô hiệu hóa hành vi Solid) khi ô tô kết thúc cuộc đua. Để thực hiện điều này, tạo một sự kiện mới với điều kiện Car - Is overlapping another object và lựa chọn FinishLine. Thêm hành động Gate - Solid: Set Enabled; chọn Disabled. Cuối cùng, close gate (kích hoạt hành vi Solid) khi chiếc xe di chuyển qua, chúng ta cần thêm một sự kiện nữa. Tạo một sự kiện với hai điều kiện Car - Is overlapping another object, lựa chọn FinishLine, và đảo ngược (invert) điều kiện; tiếp tục Car - Is overlapping another object, lựa chọn Gate và đảo ngược điều kiện. Thêm hành động Gate - Solid: Set Enabled, chọn Enabled. Khi hoàn thành, những sự kiện này sẽ xuất hiện trong hình dưới đây. Lưu và test thử project của bạn, kiểm tra xem cái cổng có hoạt động tốt không.
Bây giờ, bạn đã hoàn tất các cơ chế cơ bản của trò chơi này rồi. Xin chúc mừng.
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 5. Phần phụ
Như thường lệ, sau khi hoàn thành một trò chơi, có rất nhiều tính năng phụ ta có thể thêm vào để cải thiện trò chơi đó.
1. Scenery (quang cảnh)
1. Scenery (quang cảnh)
Mặc dù sự tập trung của người chơi chủ yếu là vào con đường, nhưng sẽ rất tuyệt nếu bạn thêm một chút quảng cảnh cho khu vực cỏ. Trong tệp game asset của chương này có chứa một vài đồ họa cho quang cảnh (cây cối) mà bạn có thể sử dụng cho mục đích này; để đa dạng hơn, bạn có thể tạo bản sao cho các đối tượng này và thay đổi kích cỡ của chúng. Ngoài ra, bạn cũng có thể tìm kiếm trên mạng các asset free và sử dụng chúng như mong muốn (nhưng nếu bạn muốn làm game với mục đích thương mại thì nên cẩn thận vì vấn đề bản quyền rất khắt khe).
Để tạo nên hiệu ứng sương mù, tạo một sprite đặt tên là Cloud bao gồm hình ảnh cloud.png. Thêm hành vi Bullet và Wrap, thay đổi Opacity thành 80 và Bullet Speed thành 50. Tạo một vài bản sao của nó và thay đổi kích thước cũng như thuộc tính của nó để tạo sự khác biệt. Khi bạn bắt đầu game, nó sẽ như một đám mây hoặc sương mù đang trôi qua đường đua. Nhìn cực kì chuyên nghiệp.
Để tạo nên hiệu ứng sương mù, tạo một sprite đặt tên là Cloud bao gồm hình ảnh cloud.png. Thêm hành vi Bullet và Wrap, thay đổi Opacity thành 80 và Bullet Speed thành 50. Tạo một vài bản sao của nó và thay đổi kích thước cũng như thuộc tính của nó để tạo sự khác biệt. Khi bạn bắt đầu game, nó sẽ như một đám mây hoặc sương mù đang trôi qua đường đua. Nhìn cực kì chuyên nghiệp.
2. Obstacle (chướng ngại vật)
Để giảm sự đơn điệu khi lái xe trên một con đường trống rỗng, bạn có thêm thêm nhiều trở ngại. Ở chương này, bạn có thể thêm các thùng gỗ (dùng để giảm tốc độ của xe nếu đâm vào) và các vũng dầu (sẽ làm chệch hướng đi của xe).
Đầu tiên, thêm một sprite mới có tên là Crate với hình ảnh crate.png. Thay đổi kích cỡ của cái thùng để có thể lái xe qua nó. Đồng thời, thêm một sự kiện đặt tên là CrateFragment với hình ảnh crate-fragment.png; thay đổi kích cỡ tương tự, thêm hành vi Fade, thay đổi thuộc tính Wait time của nó thành 1, và di chuyển nó vào lề của layout. Thêm sự kiện với điều kiện Car - On collision with another object, và lựa chọn Crate. Thêm các hành động dưới đây vào sau các sự kiện này:
Đầu tiên, thêm một sprite mới có tên là Crate với hình ảnh crate.png. Thay đổi kích cỡ của cái thùng để có thể lái xe qua nó. Đồng thời, thêm một sự kiện đặt tên là CrateFragment với hình ảnh crate-fragment.png; thay đổi kích cỡ tương tự, thêm hành vi Fade, thay đổi thuộc tính Wait time của nó thành 1, và di chuyển nó vào lề của layout. Thêm sự kiện với điều kiện Car - On collision with another object, và lựa chọn Crate. Thêm các hành động dưới đây vào sau các sự kiện này:
- Thêm Car - Car: Set speed, nhập Self.Car.Speed / 2 (điều này sẽ giảm tốc độ của xe đi một nửa).
- Thêm Crate - Spawn another object, lựa chọn CrateFragments, và nhập layer Main.
- Tạo Crate - Destroy.
- Tạo CrateFragments - Z-Order: Move to bottom (để ô tô có thể xuất hiện bên trên mảnh vỡ).
Cuối cùng, thêm sprite được đặt tên là OilSlick với hình ảnh oil-slick.png và thay đổi kích cỡ của nó như bạn đã làm với cái thùng. Ngoài ra, bởi vì các sprite OilSlick và Crate được thêm vào Main layer, kích chuột phải vào các đối tượng này trong bảng Objects và lựa chọn Z-Order - Send to bottom of layer. Tạo một sự kiện với hai điều kiện; thêm Car - Is overlapping another object, sau đó lựa chọn OilSlick. Sau đó, thêm System - Compare two values, kiểm tra xem random(0, 100) nhỏ hơn 50 hay không. Hành động tương ứng Car - Car: Simulate Control; chọn Steer left. Tạo một sự kiện khác giống với sự kiện này, nhưng thay đổi simulate control thành Steer right. Khi ô tô lái đi bên trên vũng dầu, hai hành động này sẽ chỉnh hướng xe ngẫu nhiên sang trái hoặc phải. Đôi khi cả hai điều kiện đều đúng và hành động bị hủy bỏ, nhưng tỉ lệ xảy ra điều này rất thấp. Các sự kiện này được hiển thị như hình ở bên trên.
3. On Your Own
3. On Your Own
Có nhiều tính năng khác mà bạn có thể thêm vào. Bạn có thể thêm những trở ngại phức tạp hơn, chẳng hạn những trở ngại có thể di chuyển (như một con chó chạy ngang qua đường). Ngoài ra, trái ngược với các chướng ngại vật, bạn có thể thêm một số tính năng có lợi cho người chơi (như power up) có thể khiên người chơi tăng tốc độ lên. Bạn cũng có thể thêm một biến để đếm số vòng đua. Bạn có thể thêm một văn bản hiển thị Congratulation! khi trò chơi kết thúc hoặc hiển thị một số thông điệp như Good, Great hay Excellent dựa vào số thời gian người chơi hoàn thành. Bạn có thêm thêm nhạc nền và âm thanh hiệu ứng nữa. Cuối cùng, đừng quên các tính ăng cơ bản như menu vì các tính năng này sẽ giúp trò chơi của bạn trở nên chuyên nghiệp (bạn có thể sử dụng lại asset của chương trước để làm phần này).
Tổng kết
Ở trong chương này, bạn đã tạo một trò chơi đua xe với góc nhìn từ trên xuống. Bạn đã học cách sử dụng Tilemap cùng hành vi Car và Scroll to. Bạn đã học cách thiết lập thị sai (parallax) để chỉnh sửa UI layer khi kích thước của trò chơi lớn hơn kích thước cửa sổ màn hình. Bạn đã được học các thủ thuật hữu ích cho các project sau này, chẳng hạn như theo dõi thời gian trò chơi, sử dụng biến để theo dõi trạng thái hiện tại của trò chơi, làm tròn giá trị đến vị trí số thập phân và tạo cơ chế cổng một chiều.
Trong chương tiếp theo, bạn sẽ tạo một trò chơi Breakout cổ điển.
Trong chương tiếp theo, bạn sẽ tạo một trò chơi Breakout cổ điển.
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é
