Bài 5. Menu
Màn hình menu là một nền tảng trong phát triển game để tạo một trải nghiệm hoàn thiện. Khi chạy trò chơi, nên có một màn hình chính để người chơi có thời gian chuẩn bị trước khi chơi. Màn hình bổ sung thường được dùng để hiển thị cốt truyện, cài đặt, vật phẩm trong game, mục tiêu và cửa hàng. Trong phần này, bạn sẽ thêm một menu chính và một màn hình hướng dẫn như hình dưới. Điều này yêu cầu tạo layout và event sheet mới, nút điều hướng giữa layout, sự kiện với hành động chuyển đổi layout khi nút được nhấn.
Để bắt đầu, trong bảng Project ở phía bên phải cửa sổ C2, kích chuột phải vào thư mục Layouts, và lựa chọn Add layout từ menu xuất hiện. Một cửa sổ sẽ xuất hiện để hỏi xem bạn có muốn tạo event sheet mới hay không. Trong khi điều này không thực sự cần thiết (các layout khác nhau đều có thể sử dụng chung một event sheet), tuy nhiên nó có thể làm cho các code của bạn được tổ chức và sắp xếp dễ dàng hơn. Kích vào Add event sheet, và sau đó bạn sẽ thấy một layout mới xuất hiện trong thư mục Layouts; thêm vào đó, một sự kiện mới sẽ xuất hiện trong thư mục Event sheet. Thay đổi tên layout vừa tạo thành Start và thay đổi event sheet vừa tạo thành Menu Events. Để phù hợp với việc đặt tên, bạn nên thay đổi tên của layout đầu thành Game và event sheet đầu thành Game Event. Sau đó kích chuột phải vào thư mục Layout lần nữa, thêm một layout khác nhưng lần này kích chuột vào nút có nhãn Don't add event sheet. Đổi tên layout này thành Help.
Mở Start layout trong khu vực layout, thay đổi Layout Size thành 800, 600. Để tạo một phiên bản mới của đối tượng Background cho layout này, trong bảng Projects, lựa chọn đối tượng Background từ thư mục Object types sau đó kích và kéo nó vào khu vực layout. Thay đổi kích thước và vị trí để nó vừa vặn với layout. Ngoài ra, thay đổi Opacity thành 50; điều này sẽ làm giảm độ tương phản của hình ảnh, giúp dễ dàng hơn trong việc nhận diện các yếu tố giao diện người dùng (interface user - tức là mấy cái nút bắt đầu, cài đặt, mở tắt âm thanh,...). Tiếp theo, tạo 3 sprite mới: một cái đặt tên là Title với hình ảnh title.png, một cái được đặt tên là ButtonStart với hình ảnh button-start.png, một cái đặt tên là ButtonHelp với hình ảnh button-help.png. Sắp xếp chúng như hình bên trên.
Tiếp theo, mở Help layout trong khu vực layout, thay đổi kích cỡ layout và thêm background như ở phần Start layout. Kích vào phần layout để bảng Properties hiển thị các thuộc tính của layout và thiết lập Event sheet thành Menu event. Đồng thời, tạo một thực thể mới của đối tượng Title và ButtonStart bằng cách kéo chúng vào layout từ bảng Projects. Tạo một sprite mới được đặt tên là ButtonBack với hình ảnh button-back.png. Tiếp theo, tạo một đối tượng Text đặt tên là Textlnstructions, với Text được thiết lập thành Use the arrow keys to move the turtle. Để trò chơi dễ nhìn hơn, thay đổi font chữ lớn hơn và đổi màu thành xanh đậm. Khi bạn cảm thấy hoàn chỉnh, hãy tạo một đối tượng Text khác và thay đổi văn bản của nó thành Collect all starfish to win the game. Sắp xếp chính như hình bên trên.
Cuối cùng, bạn cần tạo sự kiện cho phép người dùng điều hướng qua menu. Nháy đúp chuột vào Menu Events trong bảng project để mở trình chỉnh sửa, thêm một sự kiện mới với điều kiện Mouse - On object clicked, và chọn đối tượng ButtonStart. Thêm hành động System - General: Go to layout, và lựa chọn layout tên là Game. lặp lại quá trình này để thêm hai sự kiện: kích vào đối tượng ButtonHelp sẽ đi tới layout tên là help, và kích vào đối tượng ButtonBack sẽ đi tới layout tên là Start. Khi bạn đã kết thúc, các sự kiện này sẽ xuất hiện như hình dưới đây. Trong các thuộc tính của project, thiết lập First layout thành Start. Sau đó, lưu dự án của bạn lại, và trong khi Start menu được xuất hiện trong khu vực layout, chạy layout và test xem các nút có hoạt động như mong đợi hay không, nó có điều hướng qua các layout khác hay không.
Mở Start layout trong khu vực layout, thay đổi Layout Size thành 800, 600. Để tạo một phiên bản mới của đối tượng Background cho layout này, trong bảng Projects, lựa chọn đối tượng Background từ thư mục Object types sau đó kích và kéo nó vào khu vực layout. Thay đổi kích thước và vị trí để nó vừa vặn với layout. Ngoài ra, thay đổi Opacity thành 50; điều này sẽ làm giảm độ tương phản của hình ảnh, giúp dễ dàng hơn trong việc nhận diện các yếu tố giao diện người dùng (interface user - tức là mấy cái nút bắt đầu, cài đặt, mở tắt âm thanh,...). Tiếp theo, tạo 3 sprite mới: một cái đặt tên là Title với hình ảnh title.png, một cái được đặt tên là ButtonStart với hình ảnh button-start.png, một cái đặt tên là ButtonHelp với hình ảnh button-help.png. Sắp xếp chúng như hình bên trên.
Tiếp theo, mở Help layout trong khu vực layout, thay đổi kích cỡ layout và thêm background như ở phần Start layout. Kích vào phần layout để bảng Properties hiển thị các thuộc tính của layout và thiết lập Event sheet thành Menu event. Đồng thời, tạo một thực thể mới của đối tượng Title và ButtonStart bằng cách kéo chúng vào layout từ bảng Projects. Tạo một sprite mới được đặt tên là ButtonBack với hình ảnh button-back.png. Tiếp theo, tạo một đối tượng Text đặt tên là Textlnstructions, với Text được thiết lập thành Use the arrow keys to move the turtle. Để trò chơi dễ nhìn hơn, thay đổi font chữ lớn hơn và đổi màu thành xanh đậm. Khi bạn cảm thấy hoàn chỉnh, hãy tạo một đối tượng Text khác và thay đổi văn bản của nó thành Collect all starfish to win the game. Sắp xếp chính như hình bên trên.
Cuối cùng, bạn cần tạo sự kiện cho phép người dùng điều hướng qua menu. Nháy đúp chuột vào Menu Events trong bảng project để mở trình chỉnh sửa, thêm một sự kiện mới với điều kiện Mouse - On object clicked, và chọn đối tượng ButtonStart. Thêm hành động System - General: Go to layout, và lựa chọn layout tên là Game. lặp lại quá trình này để thêm hai sự kiện: kích vào đối tượng ButtonHelp sẽ đi tới layout tên là help, và kích vào đối tượng ButtonBack sẽ đi tới layout tên là Start. Khi bạn đã kết thúc, các sự kiện này sẽ xuất hiện như hình dưới đây. Trong các thuộc tính của project, thiết lập First layout thành Start. Sau đó, lưu dự án của bạn lại, và trong khi Start menu được xuất hiện trong khu vực layout, chạy layout và test xem các nút có hoạt động như mong đợi hay không, nó có điều hướng qua các layout khác hay khô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 6. Bộ điều khiển thay thế
Mỗi người chơi game đều có cách chơi theo sở thích của riêng họ, một số thích điều khiển trên bàn phím và chuột, một số thích chơi trên màn hình cảm ứng, một số lại thích chơi với tay cầm. Trong phần này, bạn sẽ tìm hiểu cách thực hiện các tính năng này.
1. Thay đổi điều khiển mặc định
1. Thay đổi điều khiển mặc định
Trong trò chơi Starfish Collector, các điều khiển mặc định là các nút mũi tên. nếu bạn muốn, bạn có thể vô hiệu hóa các thiết lập mặc định và sử dụng các phím khác để kích hoạt hành động 8-Direction. Ở đây, bạn sẽ dùng các phím W/A/S/D để thay thế các phím lên/xuống/trái/phải. Một thiết lập phổ biến với nhiều game thủ. Để bắt đầu, thêm đối tượng Keyboard tới dự án. Sau đó, lựa chọn đối tượng Turtle, và ở bảng Properties, dưới nhóm 8-Direction, thay đổi Default controls thành No. Tiếp theo, trong Game Event event sheet, tạo một sự kiện mới với điều kiện Keyboard - Key is down, thiết lập Key thành W, thêm hành động Turtle - 8 Direction: Simulate Control, và lựa chọn Up từ danh sách. Tạo các sự kiện tương tự như thế và các điều kiện liên quan. Khi bạn đã hoàn thành, các sự kiện sẽ trông như dưới đây. lưu và test xem để đảm bảo rằng các sự kiện hoạt động tốt.
2. Điều khiển cầm tay
Một tùy chọn khác để điều khiển nhân vật đó là gamepad (điều khiển cầm tay), chẳng hạn như X-box 360. C2 sử dụng trình duyệt web để chạy game, và có rất nhiều trình duyệt hỗ trợ điều khiển cầm tay mà không yêu cầu bất kì cấu hình đặc biệt nào (như là Chrome). Để thêm điều khiển cầm tay vào game của bạn, kích chuột phải vào khu vực layout, lựa chọn Insert New Object và chọn đối tượng Gamepad. Sau đó, trong event sheet, bạn có thể truy cập vào rất nhiều điều kiện liên quan tới gamepad, ví dụ xác định xem gamepad được kết nối chưa hay các nút có được nhấn hay giữ (tương tự như Keyboard).
Một khả năng là ta sẽ sử dụng D-pad để điều khiển con rùa. Các sự kiện cho cái này khá đơn giản: có một điều kiện của đối tượng Gamepad có tên là Is button down, và trong cửa sổ tham số, bạn để mục Gamepad thiết lập là 0 (tức là gamepad đầu tiên đã được kết nối) và thiết lập Button tới một trong các nút được liệt kê. Hành động liên quan sẽ là Turtle - 8 Direction: Simulate Control, tương tự ở phần trên. Tuy nhiên, trong phần này, bạn sẽ sử dụng các nút trên gamepad để điều khiển con rùa. Đây là thường thiết lập phù hợp hơn vì nó cung cấp cho người chơi quyền kiểm soát chuyển động của nhân vật tốt hơn. Bất kì hướng nào đều có thể chọn, và tốc độ của nhận vật có thể phụ thuộc vào độ xa trung tâm của joystick (cần điều khiển) được nhấn.
Tuy nhiên, điều khiển joystick phức tạp hơn điều khiển nút bàn phím. Mỗi joystick đo lường khoảng cách người chơi nhấn theo trục x (dọc) và trục y (ngang). Giá trị hiển thị bằng phần trăm, và có thể được sử dụng để thiết lập tốc độ trên hướng X và Y (gọi là Vector X và Vector Y trong C2). Để có được những giá trị này, bạn sử dụng hàm của đối tượng Gamepad được gọi là Axis. Cũng giống như bạn sử dụng dấu chấm để truy cập thuộc tính thuộc đối tượng (chẳng hạn như Turtle.Angle), bạn thực hiện tương tự cho các hàm (mặc dù điều này ít xảy ra), vì vậy, hàm này sẽ là Gamepad.Axis. Hàm này có hai đầu vào. Đầu vào đầu tiên là số ID của gamepad (gamepad đầu tiên có ID 0, gamepad thứ hai có ID 1 và vv). Đầu vào thứ hai là code cho joystick (trái hoặc phải) để kiểm tra bộ điều khiển và trục. Các code như sau:
Tuy nhiên, điều khiển joystick phức tạp hơn điều khiển nút bàn phím. Mỗi joystick đo lường khoảng cách người chơi nhấn theo trục x (dọc) và trục y (ngang). Giá trị hiển thị bằng phần trăm, và có thể được sử dụng để thiết lập tốc độ trên hướng X và Y (gọi là Vector X và Vector Y trong C2). Để có được những giá trị này, bạn sử dụng hàm của đối tượng Gamepad được gọi là Axis. Cũng giống như bạn sử dụng dấu chấm để truy cập thuộc tính thuộc đối tượng (chẳng hạn như Turtle.Angle), bạn thực hiện tương tự cho các hàm (mặc dù điều này ít xảy ra), vì vậy, hàm này sẽ là Gamepad.Axis. Hàm này có hai đầu vào. Đầu vào đầu tiên là số ID của gamepad (gamepad đầu tiên có ID 0, gamepad thứ hai có ID 1 và vv). Đầu vào thứ hai là code cho joystick (trái hoặc phải) để kiểm tra bộ điều khiển và trục. Các code như sau:
- 0 cho joystick trái, x-axis
- 1 cho joystick trái, y-axis
- 2 cho joystick phải, x-axis
- 3 cho joystick phải, y-axis
Chính vì vậy, ví dụ, nếu chỉ có một gamepad (ID là 0) và người chơi đang sử dụng joystick bên trái, bạn có thể xác định tỉ lệ phần trăm mà chúng đang được nhấn với biểu thức Gamepad.Axis(0,0) cho x-axis và biểu thức Gamepad.Axis(0,1) cho y-axis. Giá trị trả về bởi các hàm này là các số phạm vi từ -100 đến 100, vì vậy, trong thực tế bạn sẽ chia chúng cho 100 (để chuyển chúng thành một phân số) và sau đó nhận kết quả bởi tốc độ tối đa của đối tượng.
Để bật điều khiển gamepad cho con rùa, tạo một sự kiện mới với điều kiện Gamepad - Gamepad: Has gamepads. Thêm hành động Turtle - 8-Direction: Set vector X, và nhập Gamepad.Axis(0,0) / 100 * 200. Thêm hành động khác tương tự, thay thế thiết lập 8 Direction vector Y và thay thế Gamepad.Axis(0,0) thành Gamepad.Axis(0,1). Khi bạn đã kết thúc, sự kiện sẽ xuất hiện như hình sau. Lưu dự án của bạn lại, kết nối điều khiển gamepad tới máy tính của bạn, chạy thử layout. Khi game bắt đầu, bạn hãy nhấn một nút bất kì trên gamepad để trình duyệt web nhận ra gamepad đã được kết nối. Kiểm tra joystick và xác minh rằng con rùa di chuyển như mong đợi.
Nếu bạn muốn, bạn có thể thêm sự kiện vào Game Events hoặc Menu Events để cho phép người chơi sử dụng gamepad tương tác với các nút tùy chỉnh khi nhấn các nút trên gamepad. Một vài nút được coi là tiêu chuẩn, chẳng hạn như nút bắt đầu, nút dừng game hay nút quay trở lại menu (những nút này thường có sẵn trên gamepad nên rất dễ thiết lập). Một mẹo nhỏ là đặt biểu tượng của các nút trên gamepad lên các nút như hình dưới đây để thay cho lời hướng dẫn. Đây là một mẹo phụ, bạn có thể thực hiện nếu muốn; nếu bạn muốn thực hiện thì bạn có thể sử dụng các hình ảnh được cung cấp của chương này.
Điều khiển cuối cùng mà ta muốn nhắc đến trong chương này đó là cảm ứng. Từ quan điểm kĩ thuật thì điều khiển thông qua màn hình cảm ứng khá đơn giản. Các sprite chứa hình ảnh đại diện cho các nút hoặc các phím có thể được tạo, có một đối tượng là Touch được sử dụng để phát hiện đối tượng khi được chạm vào (tương tự các điều kiện được cung cấp bởi đối tượng Mouse) và bạn có thể sử dụng các hành động mô phỏng điều khiển tám hướng. Ngoài ra, nếu bạn thêm điều khiển cảm ứng vào trò chơi và chạy thử trên máy tính, nó sẽ được thay bằng điều khiển chuột, điều này rất thuận tiện cho việc thử nghiệm. Tuy nhiên, từ quan điểm thiết kế, layout của màn hình cảm ứng khá phức tạp. Các hình ảnh được sử dụng thường tương đối lớn (64 pixel hoặc lớn hơn) để chúng có thể dễ dàng được ấn trên màn hình nhỏ. Vấn đề chính đó là các nút quá to sẽ làm nghẽn hình ảnh trong trò chơi bởi vì các đối tượng có thể chồng lên nhau, như hình dưới. Làm cho các nút điều khiển trong suốt một chút không hoàn toàn giải quyết được vấn đề này vì ngón tay của người chơi vẫn sẽ che màn hình. Ta có thể đặt nút điều khiển bên các vật thể rắn (solid) chẳng hạn như đặt nút điều khiển dưới lòng đất trong các game platform, nhưng đối với nhiều trò chơi thì điều này vẫn không khả thi. Thảo luận về vấn đề này sẽ đưa ta đi quá xa nội dung cần nhắm tới, chính vì vậy tôi sẽ để lại nó như một vấn đề về thiết kế mà bạn phải tự xử lí trong các dự án trò chơi sau này.
Tổng kết
Trong chương này, bạn đã học được cách khiến cho trò chơi của mình trở nên chuyên nghiệp hơn: thêm âm thanh (nhạc nền và âm thanh hiệu ứng), tạo thêm layout mở màn và thực hiện các điều khiển thay thế cho trò chơi. Bây giờ, bạn có thể áp dụng nó cho hai trò chơi Space Rock và Cleanup Challenge và cố gắng thực hiện các tính năng trong chương này cho hai trò chơi đó. Trong chương tiếp theo, bạn sẽ tạo một trò chơi mới với chức năng side-scrolling (cuộn màn hình) đó là Plane Dodger.
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é
