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:
Để 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.
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é.
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.
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é
