Game Development with Construct 2 - Chương 7 - Phần 2

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é.

Có, mình muốn đăng kí

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)

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.

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:

• 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

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.

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é

Game Development with Construct 2 - Chương 7 - Phần 1

Chương 7. Racecar 500

Trong chương này, bạn sẽ tạo một trò chơi đua xe được gọi là Racecar 500, với góc nhìn từ trên xuống.

Bài 1. Giới thiệu

Trong racecar 500, người chơi điều khiển một chiếc xe, mục tiêu là lái xe xung quanh đường đua trong thời gian nhanh nhất có thể, trong khi các chướng ngại vật xung quanh có thể làm chậm hoặc thay đổi ngẫu nhiên hướng đi của người chơi. Đường đua sẽ lớn hơn cửa sổ màn hình, vì vậy chỉ có một phần đường đua xung quanh chiếc xe là được hiển thị.

Người chơi điều khiển xe bằng các phím mũi tên. Cụ thể, mũi tên lên dùng để tăng tốc, các mũi tên phải và trái để rẽ và mũi tên xuống để giảm tốc (và xe sẽ đi ngược lại nếu giữ đủ lâu). Giao diện người dùng (user interface - UI) sẽ hiển thị tổng thời gian (tính bằng giây) khi xe bắt đầu di chuyển từ vạch xuất phát cho đến khi kết thúc ở vạch đích (được hiển thị dưới dạng bàn cờ).

Ở chương này, bạn sẽ được giới thiệu một hành vi mới: Car. Vì kích cỡ của layout sẽ lớn hơn kích cỡ màn hình window nên hành vi Scroll to cũng sẽ được đề cập đến. Để tạo những hình ảnh tùy chỉnh cho đường đua, đối tượng Tilemap cũng sẽ được giới thiệu.

Để bắt đầu, tải tệp .zip chứa đồ họa của chương này. Trong các thuộc tính layout, thiết lập Name thành game, Size thành 2048, 1534. Như ở các chương trước, thiết lập 3 layer có tên là Background, Main và UI. Trong các thuộc tính của project, thay đổi Window Size thành 800, 600.

Bài 2. Tilemap và thiết kế cấp độ

Để tạo hình nền tùy chỉnh, bạn sẽ sử dụng tilemap. Một tilemap là kết quả của sự sắp xếp các hình vuông lại với nhau, các hình vuông đó được gọi là tile. Điều này thực sự hữu ích cho các hình nền hoặc thiết kế cấp độ với nhiều tile giống nhau. Tilemap thường được sử dụng cho các trò chơi có góc nhìn từ trên xuống hoặc cho các trò chơi platformer như Mario. Trong project này, đường đua có thể được xây dựng từ các tile như hình dưới đây. Thông thường, tất cả các hình ảnh này sẽ được gói lại trong một tệp hình ảnh đơn giản được gọi là tileset, tương tự với một hình ảnh chứa tất cả các hoạt ảnh cho một sprite.

Những tile này có thể được sắp xếp theo nhiều cách để tạo ra rất nhiều con đường khác nhau, hình dưới đây là một ví dụ cơ bản:

Để bắt đầu làm việc với tilemap trong C2, đầu tiên hãy đảm bảo Layer được thiết lập ở Background và trong layout, kích chuột phải rồi chọn thêm đối tượng Tilemap mới. Một con trỏ hình dấu cộng sẽ xuất hiện (tương tự khi thêm sprite); kích vào bất kì đâu trên layout. Khi cửa sổ chỉnh sửa hình ảnh xuất hiện, mở hình ảnh road-tileset.png và đóng cửa sổ chỉnh sửa hình ảnh. Một bảng điều khiển mới sẽ được thêm vào C2, được gọi là bảng Tilemap, như hình dưới. Nếu bạn không nhìn thấy nó, hãy bấm vào View và kiểm tra xem hộp Tilemap đã được tích hay chưa.

Trước khi làm việc với tilemap, có một vài thuộc tính cần thay đổi trong bảng Properties. Theo mặc định, các tile trong tileset sẽ được mặc định là 32x32 pixel; tuy nhiên, trong project này, ta sẽ thiết lập các tile có kích thước lớn hơn: 128x128 px để ô tô có thể được thêm vào sau đó. Kích cỡ của tile cũng ảnh hưởng đến kích cỡ của layout, điều quan trọng là kích cỡ của layout phải là bội số kích thước của tile, nếu không sẽ có khu vực không đủ không gian để xếp tile. Kích thước layout trong project này đã được thiết lập cho vừa đủ 16 tile theo chiều rộng và 12 tile theo chiều cao.

Để tạo tilemap của bạn, hãy kích vào biểu tượng bút chì trong bảng tilemap, điều này cho phép bạn kéo các tile lên tilemap. Tiếp theo, kích vào một tile trong bảng, di chuột qua tilemap và hình ảnh của tile sẽ hiển thị hơi mờ trên ô vuông mà con trỏ chuột đang trỏ. Tạo bản sao của tile đó. Hãy tự thử nghiệm và tạo đường đua của riêng bạn, hoặc tạo như hình dưới đây:

Cuối cùng, bạn cần các khu vực cỏ hoạt động như đối tượng solid hoặc các rào cản để ngăn chiếc xe chạy ra khỏi đường đua. Để làm điều này, thêm hành vi Solid vào đối tượng tilemap. Tuy nhiên, các đa giác va chạm (được nói ở chương 2) của mỗi tile được thiết lập mặc định là hình vuông, bao phủ hoàn toàn tile đó. Do vậy, bạn cần điều chỉnh đa giác va chạm cho mỗi tile riêng lẻ để đa giác chỉ bao phủ phần cỏ. Để bắt đầu, trong bảng Tilemap, nháy đúp chuột vào một tile để mở cửa sổ đa giác va chạm. Các đỉnh của đa giác va chạm sẽ xuất hiện với một hình vuông nhỏ màu đỏ, được kết nối bằng các đoạn thẳng màu xanh. Các điều chỉnh được thực hiện như sau:

• Đối với các tile chỉ có cỏ, không cần điều chỉnh.
• Đối với các tile có cả cỏ và đường đua, hãy thêm các đỉnh của đa giác sao cho phù hợp để đa giác có thể bao phủ phần cỏ, còn phần đường đua thì để lại. 

Trong khi làm việc với tileset, bạn có thể nhận ra không có tile nào chỉ có đường đua mà không có cỏ. Đó là bởi vì một tile như thế không nên có hành vi Solid, cho dù bạn có thu nhỏ đa giác va chạm đến mức nào thì nhiều khi nó vẫn sẽ xảy ra va chạm không đáng có tại điểm đó, điều này sẽ tạo ra bug (lỗi) của game. Nếu bạn có ý định tạo một đường đua hoàn toàn không có đa giác va chạm thì bạn nên tạo riêng hẳn một sprite mới với hình ảnh road.jpg và đặt nó chình xác trong khu vực cần đặt, nhớ là phải khớp hình.

Bây giờ, bạn đã thành công với tilemap, lựa chọn biểu tượng con trỏ ở bảng Tilemap. Công cụ này cho phép bạn đặt lại vị trí của tilemap, mặc dù bạn không cần làm thế ở đây. Để tránh việc vô tình chọn nhầm hoặc thay đổi tilemap, chọn biểu tượng cái khóa ở bảng layer trên mục Background. Điều này sẽ khóa tất cả các đối tượng trong layer đó, chúng sẽ không thể được lựa chọn trừ khi được mở khóa.

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é.

Có, mình muốn đăng kí

Bài 3. Ô tô

Trong phần này, bạn sẽ thiết lập sprite Car và các điều khiển nó bởi người chơi. Hãy chắc chắn rằng active layer là Main và thêm một sprite mới đặt tên là Car và sử dụng hình ảnh car-red.png. Đặt xe trên khu vực đường đua nơi bạn muốn cuộc đua bắt đầu. Thêm hành vi Car, đây là hành vi được sử dụng riêng cho đối tượng là ô tô. Có rất nhiều thuộc tính có thể thay đổi, chẳng hạn như Max speed (ô tô có thể đi nhanh đến mức nào) và Steer speed (ô tô có thể cua nhanh đến mức nào, tính theo độ trên giây). Đồng thời, thêm hành vi Scroll to tới ô tô, điều này sẽ giữ trung tâm của màn hình vào ô tô, tức là ô tô đi đến đâu màn hình sẽ theo đến đấy. Lưu và test thử xem rồi điều chỉnh lại các thuộc tính của hành vi Car sao cho bạn thấy phù hợp.

Giống trong thực tế, hành vi Car cho phép đối tượng quay khi đang di chuyển, nếu đối tượng không di chuyển, nút mũi tên phải và trái sẽ bị vô hiệu. Điều này sẽ gây khó khăn cho một số người mới. Nếu muốn ô tô có thể quay bất cứ lúc nào, thêm hành vi Keyboard tới project và triển khai các sự kiện sau. Tạo một sự kiện mới với điều kiện Keyboard - Key is Down, lựa chọn key Left và thêm hành động Car - Angle: Rotate counter-clockwise, nhập 0.5 degrees. Tạo một sự kiện tương tự như thế với nút mũi tên bên phải. Các sự kiện sẽ như hình dưới đây. Sau khi bạn thực hiện điều này thì việc cua sẽ rất nhạy, bạn nên giảm thuộc tính Steer speed của hành vi Car đi để người chơi không bị mất kiểm soá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é

Game Development with Construct 2 - Chương 6 - Phần 2

Bài 3. Những ngôi sao và điểm số

Trong phần này, các bạn sẽ thêm những ngôi sao vào trò chơi để người chơi thu thập, một biến toàn cầu để theo dõi số sao thu được, và một đối tượng Text để hiển thị thông tin này. Để bắt đầu, trong event sheet, kích chuột phải và thêm một biến toàn cầu (global variable); thiết lập Name là Score, Type là Number và Description là Số sao thu được.

Tiếp theo, trong layout, thêm một sprite có tên là Star với hình ảnh star.png. Thêm hành vi Bullet, với Speed đặt là 200 (để khớp với tốc độ của Ground) và thiết lập Set Angle thành No. Đồng thời, để thu hút sự chú ý của người chơi vào những vật thể này, bạn sẽ thiết lập một vài hoạt ảnh dựa trên giá trị. Thêm hành vi Rotate với Speed là 30. Đồng thời thêm hành vi Sine, với Movement là Size, Period là 1 và Magnitude là 8. Trong khi đó ở layout, thêm một đối tượng Text đặt tên là TextScore. Thiết lập thuộc tính Text của nó thành 0, hiển thị số đếm ban đầu. Đồng thời, thiết lập layer của nó thành UI, làm cho hộp văn bản to hơn một chút, thiết lập các thuộc tính căn chỉnh sao cho văn bản được căn ở giữa, và thay đổi kích cớ phông chữ để nó có thể dễ dàng được đọc (chẳng hạn như Arial, cỡ 48). Để khiến cho văn bản trở nên nổi bật hơn, ta sao chép văn bản thành 2 cái, một cái màu đen và một cái màu trắng. Sắp xếp văn bản màu đen xuống dưới rồi đè văn bản màu trắng lên trên một chút, điều này sẽ tạo ra một hiệu ứng đẹp.

Bây giờ, bạn sẽ thiết lập ba sự kiện liên quan đến đối tượng Star: một sự kiện để tạo ra Star, một sự kiện dành cho thời điểm người chơi thu thập được ngôi sao và khi người chơi không thu thập được ngôi sao rồi nó ra khỏi màn hình sang bên trái.

Đầu tiên, tạo một sự kiện mới với điều kiện System - Time: Every X seconds, và thiết lập Interval thành 2. Thêm một điều kiện tới sự kiện này là Player - Size & Position: Is on-screen; mục đích của điều kiện thư hai này là ngừng sản sinh ra các ngôi sao khi người chơi thua. Tiếp theo, bạn sẽ thêm một hành động sản sinh ra các bản sao của ngôi sao bên ngoài layout. Các sprite có thể sản sinh từ một sprite khác, hoặc chúng có thể sản sinh từ đối tượng System; ở đây là sẽ thực hiện sản sinh theo System. Trong sự kiện này, thêm một hành động System - General: Create Object. Trong cửa sổ tham số, thiết lập Object to create là Star, thiết lập Layer là "Main" (có dấu ngoặc kép), thiết lập X là 700 và Y là random(100, 700). Hãy nhớ rằng các góc chuyển động cần được thiết lập bởi hành động, chính vì vậy, thêm một hành động được gọi là Star - Bullet: Set angle of motion và thiết lập Angle thành 180.

Tiếp theo, bạn sẽ tạo sự kiện xử lí những gì xảy ra khi người chơi va chạm với một ngôi sao, đó là ngôi sao bị phá hủy, một điểm được thêm vào biến Score và đối tượng Text hiển thị giá trị score được cập nhật. Tạo một sự kiện mới với điều kiện Player - Collisions: On collision with another object, lựa chọn Star. Thêm 3 hành động tới sự kiện này:

• Thêm Star - Misc: Destroy.
• Thêm System - Global & local variables: Add to, thiết lập Variable là Score và Value là 1.
• Thêm TextScore - Text: Set Text, và tiếp theo là Text nhập Score (không dùng dấu ngoặc kếp để giá trị của nó hiển thị, chứ không phải chính nó - từ score).

Cuối cùng, bạn sẽ tạo ra sự kiện phá hủy ngôi sao một khi nó di chuyển ra khỏi màn hình. Điều quan trọng là bạn phải xác định nơi các ngôi sao được tạo ra ở bên phải vì bạn không muốn chúng bị phá hủy trong tình huống đó. Tạo một sự kiện mới với điều kiện Star - Size & Position: Is on-screen và đảo ngược (invert) điều kiện trên event sheet. Đồng thời thêm điều kiện Star - Size & Position: Compare X, thay đổi Comparison thành Less than, và thiết lập tọa độ X thành 0. Cuối cùng, thêm hành động Star - Misc: Destroy.

Khi bạn đã hoàn thành 3 sự kiện trên, chúng sẽ xuất hiện như hình bên dưới. Lưu và test game của bạn rồi xác nhận những ngôi sao xuất hiện trên màn hình mỗi 2 giây và khi người chơi va chạm với ngôi sao, ngôi sao sẽ biến mất và người chơi có thể cập nhật điểm số.

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é.

Có, mình muốn đăng kí

Bài 4. Kẻ địch

Trong phần này, bạn sẽ thêm một vài máy bay địch để thêm sự thách thức cho trò chơi. Như một mức độ được thêm vào, bạn sẽ tạo một tập hợp các biến dùng để tăng độ khó theo thời gian. Tỉ lệ kẻ địch được sinh ra và tốc độ di chuyển của chúng sẽ tăng dần. Điều này rất hữu ích cho người chơi, nó sẽ khiến họ không cảm thấy nhàm chán và kĩ năng của họ sẽ tăng dần; họ sẽ có thể chơi trò chơi nhiều hơn để cải thiện điểm số của họ. Để bắt đầu, trong event sheet, tạo một biến toàn cầu, đặt tên nó là SpawnRate, thiết lập Type thành Number, thiết lập Initial value thành 2 và ở Description nhập Số giây kẻ thù sinh ra lần tới. Tiếp theo, tạo một biến toàn cầu mới, đặt tên là EnemySpeed, thiết lập Initial value thành 300 và Description nhập Được sử dụng khi thiết lập tốc độ máy bay địch mới được tạo ra. 

Trong layout, tạo một sprite mới được đặt tên là Enemy. Thiết lập hoạt ảnh của nó như khi làm với máy bay của người chơi. Trong cửa sổ Animation frames, chèn tệp hình ảnh máy bay màu đỏ, quay mặt về phía bên trái, và thiết lập thuộc tính Speed thành 8, Loop thành Yes và Ping-pong thành Yes. Đặt máy bay địch ở ngoài màn hình, thêm hành vi Bullet và thay đổi Set Angle thành 0.

Tiếp theo, bạn sẽ thêm tổng năm sự kiện liên quan đến kẻ địch vào event sheet. Ba trong số sự kiện đó sẽ tương tự với sự kiện liên quan tới ngôi sao mà bạn đã tạo trước đó: một sự kiện sản sinh biến mới, một sự kiện để xử lí va chạm với người chơi và một sự kiện để phá hủy đối tượng kẻ địch khi ra khỏi màn hình. Mỗi lần một kẻ địch mới được sinh ra, giá trị của biến SpawnRate và EnemyRate sẽ bị điều chỉnh; hai sự kiện còn lại sẽ đảm bảo rằng các giá trị của 2 biến này sẽ nằm trong phạm vi hợp lí.

Trong bảng sự kiện, tạo sự kiện mới với điều kiện System - Time: Every X seconds, và thiết lập Interval thành SpawnRate. Thêm một điều kiện mới được gọi là Player - Size & Position: Is on-screen. Khi trò chơi kết thúc và máy bay của người chơi bị phá hủy, sự kiện này sẽ không còn được kích hoạt. Tiếp theo, thêm các hành động sau:

• Thêm System - General: Create object, và trong cửa sổ tham số, thiết lập Object to create thành Enemy, thiết lập Layer thành "Main", thiết lập X thành 700 và Y thành random(100, 700).
• Thêm Enemy - Bullet: Set angle of motion, và thiết lập Angle thành 180.
• Thêm Enemy - Bullet: Set speed, và thiết lập Speed thành EnemySpeed.

Cập nhật các giá trị của biến liên quan yêu cầu thêm hai hành động tới sự kiện này:

• Thêm System - Global & local variables: Add to. Về Variable, lựa chọn EnemySpeed và với Value, nhập 10.
• Thêm System - Global & local variables: Subtract from. Về Variable, lựa chọn SpawnRate và với Value, nhập 0.05.

Tiếp theo, bạn sẽ tạo hai sự kiện mới tương tự với các sự kiện liên quan tới ngôi sao trước đó. Tạo sự kiện mới với điều kiện kiểm tra xem người chơi có va chạm với kẻ thù hay không và hành động tương ứng phá hủy đối tượng Player. Tạo một sự kiện khác với hai điều kiện để kiểm tra xem kẻ địch có xuất hiện trên màn hình hay không và so sánh giá trị X xem nó có nhỏ hơn 0 hay không; đồng thời thêm một hành động tương ứng phá hủy kẻ địch.

Cuối cùng, bạn cần thiết lập các giới hạn hợp lí về giá trị của các biến. Nếu bạn nhớ thì trước đây bạn đã thực hiện điều này trong trò Space Rock, ở trong sự kiện kiểm tra tốc độ của tàu vũ trụ của người chơi; nếu tốc độ lớn hơn 200 thì nó sẽ bị thiết lập về 200; điều này đã giới hạn giá trị tốc độ của con tàu. Bạn sẽ tạo hai sự kiện tương tự trong trò chơi này. Sự kiện đầu tiên sẽ thiết lập hạn chế tốc độ máy bay địch sinh ra; nếu giá trị của SpawnRate quá gần với 0 thì máy bay địch sẽ được sinh ra liên tiếp, và người chơi sẽ không thể tránh chúng (điều này sẽ không công bằng và ức chế cho người chơi). Để giải quyết vấn đề này, bạn sẽ thiết lập một hạn chế nhỏ hơn 0.5 cho SpawnRate. Để thực hiện điều này, hãy tạo một sự kiện với điều kiện System - Global & local: Compare variable, thiết lập Variable thành SpawnRate, Comparison thành less than và Value thành 0.5. Sau đó tạo hành động System: Global and local variables: Set value, thay đổi Variable thành SpawnRate và Value thành 0.5. Một khi bạn hoàn thành, hãy tạo một sự kiện tương tự kể kiểm tra giá trị của EnemySpeed có lớn hơn 800 hay không, và nếu có thì thiết lập giá trị của nó thành 800.

Khi bạn kết thúc, các sự kiện sẽ xuất hiện như trong hình dưới. Lưu lại và test thử xem để đảm bảo rằng kẻ thù trở nên nhanh hơn và xuất hiện nhiều hơn khi thời gian trôi qua.

Khi bạn đã đạt tới thời điểm này thì xin chúc mừng, bạn đã hoàn thành gameplay cơ bản của Plane Dodge.

Bài 5. Phần phụ

Có rất nhiều tính năng mà bạn có thể xem xét để thêm vào trò chơi này. Ví dụ:

• Hiệu ứng động khi ngôi sao được thu thập hoặc khi hai máy bay va chạm với nhau (bạn có thể sử dụng hình ảnh sparkle.png và exploision.png).
• Nhạc nền.
• Hiệu ứng âm thanh khi ngôi sao được thu thập hoặc khi máy bay nổ.
• Điều khiển thay thế, cho phép người chơi sử dụng chuột để điều khiển thay vì phím cách.
• Thêm một layout khác có nhiệm vụ như màn hình bắt đầu.
• Các đối tượng khác sẽ xuất hiện khi người chơi thua, chẳng hạn như một văn bản Game Over và một vài nút để người chơi có thể chơi lại.

Tổng kết

Trong chương này, bạn đã học cách tạo ra một trò chơi vô tận, sử dụng scrolling background để tạo ảo giác về chuyển động. Bạn đã sử dụng tính chất trọng lực của hành vi Bullet. Để tránh cho trò chơi trở nên nhàm chán, bạn đã tăng tốc độ của trò chơi theo thời gian. Cuối cùng, bạn được gợi ý rất nhiều ý tưởng trong Phần phụ. 

Trong chương tới, bạn sẽ tạo một trò chơi với góc nhìn từ trên xuống khi bạn tạo một trò chơi đua xe Racecar 500.

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é

Game Development with Construct 2 - Chương 6 - Phần 1

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é.

Có, mình muốn đăng kí

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.

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é