Construct 2 là phần mềm làm game trên nền tảng HTML5, được thiết kế đặc biệt dành cho các trò chơi 2D. Nó cho phép bất kì ai xây dựng game mà không cần nhiều kiến thức về code.
Với tất cả những công cụ sẵn có ngày nay, việc thiết kế video game không còn là việc phải cần tới cả một studio và hàng trăm nhân viên làm việc trong thời gian dài nữa. Thay vào đó, một cá nhân cũng có thể tự tạo cho mình những trò chơi thú vị. Tuy vậy, nhiều công cụ miễn phí lại yêu cầu người dùng phải biết ít nhiều về lập trình hay còn gọi là coding.
Construct 2 là một sản phẩm hoàn toàn khác. Nó cho phép người dùng thiết kế game 2D dựa trên HTML5 mà không cần tới kiến thức về lập trình. Construct 2 cho phép bất kì ai biến trí tưởng tượng phong phú của mình thành hiện thực và tạo ra những video game chỉ trong vài giờ.
Đặc điểm chính của phần mềm làm game 2D Construct 2
Làm game 2D dựa trên những mẫu có sẵn.
Giao diện trực quan.
Xem trước game bất kì lúc nào.
Áp dụng thay đổi trên game theo thời gian thực.
Xuất game đa nền tảng.
Hiệu ứng hình ảnh phong phú.
Plugin hỗ trợ và khả năng tự tạo plugin.
Video giới thiệu Construct 2
1.2. Các tính năng nổi bật
Giao diện làm việc trực quan
Với một giao diện trực quan và những yếu tố cơ bản nhất, sản phẩm cuối cùng sẽ là vô cùng độc đáo. Giao diện Ribbon giúp người dùng dễ dàng lựa chọn và sử dụng bộ công cụ của phần mềm, cho phép bất kì ai cũng có thể bắt đầu làm game mà không cần kiến thức chuyên sâu. Chỉ cần kéo, thả, xoay các mẫu có sẵn, thêm hiệu ứng và thay đổi các cài đặt trong Properties Bar. Các đối tượng mẫu này cũng có thể được đưa vào những lớp khác nhau để tạo hiệu ứng hòa trộn. Một công cụ chỉnh sửa ảnh cũng được tích hợp nhằm tăng hình ảnh đồ họa.
Hệ thống Event System mạnh mẽ (Powerful Event System)
Không cần phải ghi nhớ bất kì điều gì mà hãy cứ tập trung vào thiết kế game bởi Event System trong Construct 2 sẽ hệ thống hóa tất cả những sự kiện trong game. Sự kiện trong game được tạo ra bằng cách lựa chọn điều kiện chơi và hành động của nhân vật. Danh sách sự kiện kết quả, hay Event Sheet, được thiết kế đơn giản hóa, có thể được sử dụng trong những level sau.
Mỗi Event Sheet có một danh sách các sự kiện, trong đó chứa thông tin về điều kiện xảy ra. Khi những điều kiện này được đáp ứng thì các hành động tiếp sau sẽ tự động thực hiện. Ví dụ như vật thể sẽ phát nổ sau khi bom được đặt chèn lên Body...
Kích vào hình để xem demo
Hành vi nhân vật (Behavior)
Hành vi nhân vật trong game được thiết kế bởi Construct 2 hoạt động như một chức năng có sẵn. Tức là người dùng sẽ chọn các chuyển động được phần mềm đưa ra theo 8 hướng di chuyển, theo hướng rẽ của ô tô, theo nền tảng hoặc các tiêu chí khác. Ví dụ như khi thêm hành vi nhân vật dựa trên nền tảng (Platform Behavior), nhân vật có thể chạy, nhảy trên vật thể được đánh dấu là solid (rắn). Người dùng cũng có thể thay đổi tốc độ, gia tốc, độ mạnh của bước nhảy, trọng lực và nhiều yếu tố khác. Tất cả các lựa chọn đều rất trực quan và bạn sẽ thấy ngay kết quả.
Khả năng xem trước (Instant Preview)
Thiết kế game với Construct 2, bạn có thể xem trước thành quả của mình bất cứ lúc nào. Không cần phải chờ quá trình xử lý hay biên dịch... Chỉ cần một nút bấm trên giao diện là có thể kiểm tra game trên trình duyệt ngay lập tức. Tính năng tuyệt vời của Construct 2 là Preview Over Wifi. Nó cho phép bất kì điện thoại, máy tính bảng, laptop hay máy tính cá nhân khác có kết nối chung mạng LAN/Wifi có thể xem game ngay lập tức. Điều đó khiến việc thử nghiệm game diễn ra vô cùng dễ dàng.
Ngoài ra, phần mềm cũng không giới hạn số thiết bị có thể xem trước. Điều này có nghĩa là nhiều thiết bị có thể cùng xem game một lúc. Sẽ rất tuyệt vời nếu game bạn đang thiết kế nhắm tới các thiết bị màn hình cảm ứng. Điện thoại thông minh hay máy tính bảng có thể test game ngay tức thì.
Hiệu ứng hình ảnh trong game
Với hơn 70 hiệu ứng điểm ảnh dựa trên WebGL, việc hòa trộn, đổi màu, làm mờ và các hiệu ứng khác có thể được thực hiện dễ dàng. Người dùng có thể thêm các hiệu ứng này vào các vật thể, lớp (layer) hay layout đã có sẵn và thay đổi cách sắp xếp để tạo ra những kết quả tuyệt vời. Thậm chí bạn còn có thể xem kết quả ngay trong thời gian thực.
Kích vào hình để xem demo
Nếu có hiệu ứng nào không được hỗ trợ, Construct 2 sẽ cho phép sử dụng hiệu ứng trước đó. Ví dụ như hiệu ứng Screen WebGL có thể được thay thế bằng chế độ hòa trộn Additive nếu máy tính người dùng không hỗ trợ, mang đến trải nghiệm tốt nhất dựa trên phần cứng và hệ thống của máy tính người dùng.
Đa nền tảng (Multiplatform Export)
Không cần sử dụng nhiều codebase, việc xuất game được tạo từ Construct 2 có thể thực hiện trên nhiều nền tảng khác nhau. Người dùng có thể lựa chọn xuất game trên website, Chrome Web Store, Facebook... trên nền tảng máy tính PC, ứng dụng Mac hay Linux bằng cách sử dụng Node-Webkit wrapper. Game cũng có thể được đưa lên Windows 8 Store hoặc phát hành như một ứng dụng gốc của Windows Phone 8. Người dùng iOS và Android cũng có thể tiếp cận game với wrapper được hỗ trợ (wrapper có thể được hiểu là cầu nối giữa hai giao diện). Người dùng có thể đến với game của bạn cho dù họ ở bất kì nơi đâu và sử dụng bất kì thiết bị nào.
Các tiện ích mở rộng
Construct 2 mang đến hơn 20 plugin, hơn 20 behavior và hơn 70 hiệu ứng hình ảnh khác nhau, từ những đoạn văn bản hiển thị cho tới âm nhạc nền, hiệu ứng particle, hiệu ứng như Photoshop và rất nhiều những hiệu ứng khác. Nếu là người dùng chuyên nghiệp, bạn cũng có thể tự tạo plugin và behavior riêng cho mình với Javascript SDK, hiệu ứng đồ họa riêng với ngôn ngữ GLSL. Cộng đồng người dùng đã tạo hơn 150 plugin và behavior, tất cả những gì bạn cần chỉ là một trình soạn thảo và chút ít kiến thức về Javascript hoặc GLSL.
Viết game dựa trên ngôn ngữ HTML5 giúp cho game tương thích hoàn hảo với trình duyệt và sẽ không yêu cầu người chơi phải cài đặt bất cứ phần mềm nào khác trên máy tính để chơi game. Rõ ràng rằng đây là sản phẩm cực kì tuyệt vời với những ai đang nhắm tới thị trường game điện thoại dù rằng chưa phải tất cả các thiết bị đều được hỗ trợ. Nói chung thì phần mềm tạo game HTML5 Construct 2 chưa thể giúp bạn tạo ra một Skyrim thứ hai, nhưng đây chắc chắn sẽ là công cụ tuyệt vời để thử bắt đầu học lập trình game 2D. Phần mềm còn cung cấp lời khuyên trong quá trình người dùng làm game cũng như rất nhiều hướng dẫn khi mới bắt đầu sử dụng. Bản miễn phí sẽ giới hạn một số tính năng. 1.3. Ưu điểm Là một trong số ít những HTML5 Game Engine mạnh mẽ nhất có mặt hiện nay trên thế giới Việc làm game rất nhanh chóng và dễ dàng Giao diện trực quan Hiệu ứng hình ảnh phong phú Engine đang được phát triển tích cực, trung bình khoảng nửa tháng sẽ có đợt update một lần với những tính năng vô cùng mới mẻ Không cần tới kiến thức lập trình cao cấp, chỉ cần có ý tưởng, tư duy logic và kiến thức toán học, biến, mảng, hàm… Nếu thích lập trình, bạn có thể dùng SDK của nhà phát triển để tự viết plugin cho dự án (dành cho ai theo đuổi con đường lập trình chuyên nghiệp). Sản phẩm game hoàn thiện hoàn toàn được phép thương mại hóa trên các cửa hàng ứng dụng trực tuyến khi bạn đã tuân thủ luật bản quyền được đề ra. 1.4. Nhược điểm Hiện chỉ có thể làm game 2D, 2.5D, isometric Engine vẫn chưa thực sự hoàn thiện Đội ngũ Scirra chỉ có 2 người, trong đó chỉ 1 người là phát triển engine. Không có tiếng Việt, cộng đồng ở Việt Nam quá nhỏ bé (tham gia xây dựng cộng đồng tại đây)
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é.
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é
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é.
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é
