Bài 4. Hiển thị thông báo với
đối tượng Text
Tiếp theo, bạn sẽ thiết lập điều kiện thắng và thua, và hiển thị thông tin này trên màn hình bằng cách sử dụng một loại đối tượng: Text. Đối tượng Text có thể hiển thị bất cứ văn bản thông báo nào mà bạn chọn và có thể thay đổi nội dung của chúng trong khi trò chơi đang chạy, vì vậy chúng linh hoạt hơn việc sử dụng hình ảnh chưa các từ (mà bạn đã sử dụng trong 2 chương trước). Để bắt đầu, kích chuột phải vào khu vực layout, lựa chọn Insert New Object và kích vào Text (không phải Text box); về tên, nhập TextGameOver và kích vào nút Insert. Trên layout, bạn sẽ thay đổi nhiều thuộc tính của đối tượng TextGameOver. Đầu tiên, thay đổi Layer thành UI, thay đổi Size thành 640, 64 và đặt nó ở nửa dưới của đối tượng stone (như hình dưới). Để hiển thị văn bản dễ nhìn hơn, trong bảng Properties, xác định vị trí thuộc tính có tên là Font và nháy đúp chuột vào tên của phông chữ bên cạnh nó. Một cửa sổ hộp thoại sẽ hiện ra, liệt kê tên và các biến thể của phông chữ được cài đặt trên máy tính của bạn. Ở đây, giữ mặc định Font thiết lập tới Arial, thay đổi Font style thành bold, thay đổi Size thành 28 và kích vào nút OK. Tiếp theo, kích vào thuộc tính Horizontal alignmient, và từ menu xuất hiện ở bên phải, chọn Center. Lặp lại quá trình này với thuộc tính Vertical alignment, thay đổi giá trị của nó thành Center. Bây giờ, bạn có thể thấy văn bản ở trung tâm hộp thoại của nó. Nếu bạn muốn, bạn có thể kích vào thuộc tính Color, và trong menu xuất hiện, bạn có thể chọn một màu khác. Nếu bạn chọn để thay đổi màu sắc, hãy chọn một màu tương phản với màu nền.
Về điều kiện thua, như bạn có thể tưởng tượng, sẽ xảy ra khi ô tô va chạm với người dọn dẹp (cleaner). Điều kiện thắng xảy ra khi người dọn dẹp mang hết rác sang thùng rác bên kia đường; đây là điều bạn sẽ thiết lập ngay bây giờ. Thêm một sprite mới, đặt tên nó là TrashCan, sử dụng tệp hình ảnh trashcan.png. Thiết lập layer của nó thành Main; thay đổi kích cỡ của nó thành 38, 48 và đặt nó ở trung tâm Grass background trên cùng.
Tiếp theo, bạn sẽ thiết lập các sự kiện cho điều kiện thắng và thua, mỗi điều kiện xảy ra sẽ làm một đoạn tin nhắn khác nhau xuất hiện trên đối tượng Text. Khi trò chơi kết thúc, bạn sẽ làm cho cleaner biến mất dần và đóng băng nó (không di chuyển khi đang biến mất) bằng cách vô hiệu hóa đầu vào của người dùng (user input: chuột, bàn phím,...).
Trong event sheet, tạo một sự kiện mới với điều kiện Cleaner - Collisions: On collision with Another Object, và lựa chọn đối tượng TrashCan. Sau đó, thêm các hành động sau cho sự kiện này:
- Thêm TextGameOver - Appearance: Set Visible, và thiết lập Visibility thành Visible.
- Thêm TextGameOver - Text: Set Text, và ở Text, gõ "You Win" (bao gồm cả dấu ngoặc kép).
- Thêm Cleaner - Fade: Start Fade.
- Thêm Cleaner - 8 Direction: Set enabled, và thiết lập State thành Disabled.
Khi bạn hoàn thành, sự kiện sẽ trông như dưới đây. Lưu lại và test game của bạn, và đảm bảo rằng tin nhắn You Win sẽ như chúng ta mong đợi.
Hiểu cách sử dụng dấu ngoặc kép trong hành động Set Text là cực kì quan trọng. Dấu ngoặc kép dùng để chỉ ra một biểu thức theo nghĩa đen, gần giống với cách chúng được sử dụng trong ngôn ngữ hàng ngày. Ví dụ, nếu bạn được yêu cầu viết tên của cuốn sách này, bạn sẽ viết là Game Development with Construct 2; nhưng nếu bạn được yêu cầu là viết "tên của cuốn sách này", dấu ngoặc kép biểu thị rằng bạn nên viết những từ trong dấu ngoặc đó chính xác, đó là tên của cuốn sách này. Các tình huống đó xảy ra tương tự khi sử dụng hành động Set text, sử dụng dấu ngoặc kép để hiển thị chính xác từ ngữ trong ngoặc, nếu dấu ngoặc kép không được sử dụng, C2 sẽ giả định rằng bất cứ điều gì bạn nhập vào đều là một thuộc tính hoặc một biến và sẽ cố gắng xác định giá trị của nó. Nếu không phải thuộc tính hay biến, C2 sẽ hiển thị cửa sổ thông báo lỗi.
Tiếp theo, bạn sẽ thêm sự kiện cho điều kiện thua. Trong event sheet, tạo sự kiện mới với điều kiện Car - Collisions: On Collision with Another Object, và lựa chọn đối tượng Cleaner. Sau đó, thêm các hành động sau cho sự kiện:
- Thêm TextGameOver - Appearance: Set Visible, và thiết lập Visibility thành Visible.
- Thêm TextGameOver - Text: Set Text, sau đó gõ You Lose ở phần Text.
- Thêm Cleaner - Fade: Start Fade.
- Thêm Cleaner - 8 Direction: Set Enabled, và thiết lập State thành Disabled.
Sự kiện sẽ trông như dưới đây:
Bài 5. Giữ điểm số với biến toàn cầu
Người chơi hẳn đã quen với một số cách để đánh giá thành tích của họ như số điểm kiếm được, thời gian hoàn thành thử thách hoặc một vài loại xếp hạng hệ thống (như 1 - 3 sao). Trong phần này, ta sẽ thêm một cơ chế gameplay khác: người dọn dẹp sẽ dọn sạch rác trong khu vực. Để theo dõi mức độ mà ta đang làm, bạn sẽ lập trình trò chơi để theo dõi có bao nhiêu mẩu rác được thu thập bởi tạo và sử dụng biến mới.
Biến là một cái tên tương ứng với dữ liệu được lưu trữ (chẳng hạn như một con số) có thể được thay đổi (hoặc có thể tự thay đổi, đó là lí do vì sao nó được gọi là biến). Trong toán đại số, các chữ cái đơn như x và y thường được sử dụng như tên của một biến; trong các bài toán khác nhau, giá trị của các biến này cũng khác nhau. Khi viết chương trình, bạn sẽ sử dụng các từ đó mô tả loại thông tin để tránh nhầm lẫn. Ví dụ, một biến t có thể lưu trữ thông tin về một thời gian (time) hoặc nhiệt độ (temperature); tuy nhiên điều này rất khó phân biệt. Khi tạo chương trình, sử dụng time hoặc temp để làm tên biến thay vì t để tránh nhầm lẫn.
Trong các chương trước, bạn đã gặp rất nhiều loại biến, chẳng hạn như vị trí, góc, kích thước, vân vân. Những biến này tương ứng với các giá trị liên quan tới các sprite mà bạn có thể thay đổi. Bởi vì mỗi phiên bản của một đối tượng sprite chứa tập biến mà chính nó sở hữu, những giá trị của nó có thể được đặt độc lập từ những biến của đối tượng khác, chúng được gọi là biến toàn cầu, nó không liên kết tới bất kì phiên bản (của sprite) cụ thể nào. Trong C2, một biến toàn cầu là biến được xác định rõ trong event sheet, có thể dễ dàng truy cập và sửa đổi, được sử dụng bởi tất cả sự kiện và đối tượng trong trò chơi.
Để bắt đầu, trong event sheet, kích chuột phải vào vùng màu trắng và chọn Add global variable từ menu xuất hiện. Một cửa sổ với tiêu đề New global variable sẽ xuất hiện, nơi bạn có thể thiết lập các thuộc tính của nó. Ở mục Name, gõ Score. Ở mục Type thiết lập Number và thiết lập Initial Value là 0. Tiếp theo là phần mô tả (cái này không bắt buộc, nhưng nếu bạn có nhiều biến toàn cầu thì nên miêu tả công dụng của nó vào đây để đỡ nhầm lẫn) , gõ số mẩu rác được thu thập. Khi bạn hoàn tất, nhấn OK.
Tiếp theo, bạn sẽ thiết lập đối tượng Text hiển thị giá trị của biến Score. Trong layout, tạo một đối tượng Text mới, đặt tên nó là TextScore. Thay đổi thuộc tính của nó (Layer, Size, Font, Horizontal Alignment, Vertical Alignment, và Color) cùng với giá trị mà bạn sử dụng cho đối tượng TextGameOver trong phần trước. Ngoài ra, đối với thuộc tính Text, nhập Trash Collected: 0. Đặt lại vị trí của đối tượng này sao cho được như hình dưới:
Biến là một cái tên tương ứng với dữ liệu được lưu trữ (chẳng hạn như một con số) có thể được thay đổi (hoặc có thể tự thay đổi, đó là lí do vì sao nó được gọi là biến). Trong toán đại số, các chữ cái đơn như x và y thường được sử dụng như tên của một biến; trong các bài toán khác nhau, giá trị của các biến này cũng khác nhau. Khi viết chương trình, bạn sẽ sử dụng các từ đó mô tả loại thông tin để tránh nhầm lẫn. Ví dụ, một biến t có thể lưu trữ thông tin về một thời gian (time) hoặc nhiệt độ (temperature); tuy nhiên điều này rất khó phân biệt. Khi tạo chương trình, sử dụng time hoặc temp để làm tên biến thay vì t để tránh nhầm lẫn.
Trong các chương trước, bạn đã gặp rất nhiều loại biến, chẳng hạn như vị trí, góc, kích thước, vân vân. Những biến này tương ứng với các giá trị liên quan tới các sprite mà bạn có thể thay đổi. Bởi vì mỗi phiên bản của một đối tượng sprite chứa tập biến mà chính nó sở hữu, những giá trị của nó có thể được đặt độc lập từ những biến của đối tượng khác, chúng được gọi là biến toàn cầu, nó không liên kết tới bất kì phiên bản (của sprite) cụ thể nào. Trong C2, một biến toàn cầu là biến được xác định rõ trong event sheet, có thể dễ dàng truy cập và sửa đổi, được sử dụng bởi tất cả sự kiện và đối tượng trong trò chơi.
Để bắt đầu, trong event sheet, kích chuột phải vào vùng màu trắng và chọn Add global variable từ menu xuất hiện. Một cửa sổ với tiêu đề New global variable sẽ xuất hiện, nơi bạn có thể thiết lập các thuộc tính của nó. Ở mục Name, gõ Score. Ở mục Type thiết lập Number và thiết lập Initial Value là 0. Tiếp theo là phần mô tả (cái này không bắt buộc, nhưng nếu bạn có nhiều biến toàn cầu thì nên miêu tả công dụng của nó vào đây để đỡ nhầm lẫn) , gõ số mẩu rác được thu thập. Khi bạn hoàn tất, nhấn OK.
Tiếp theo, bạn sẽ thiết lập đối tượng Text hiển thị giá trị của biến Score. Trong layout, tạo một đối tượng Text mới, đặt tên nó là TextScore. Thay đổi thuộc tính của nó (Layer, Size, Font, Horizontal Alignment, Vertical Alignment, và Color) cùng với giá trị mà bạn sử dụng cho đối tượng TextGameOver trong phần trước. Ngoài ra, đối với thuộc tính Text, nhập Trash Collected: 0. Đặt lại vị trí của đối tượng này sao cho được như hình dưới:
Tiếp theo, bạn sẽ thiết lập các đối tượng và các sự kiện có ảnh hưởng và hiển thị số điểm. Trong layout, tạo một sprite mới được đặt tên là Trash, sử dụng hình ảnh trash.png. Đảm bảo rằng thuộc tính Layer của nó được thiết lập thành Main. Thay đổi kích cỡ của nó thành 38, 38. Nhân đối tượng này 9 lần và sắp xếp cho chúng rải rác trên đường đi và quay (rotate) góc của mỗi cái bằng một con số khác nhau để chúng có sự khác biệt.
Bởi vì các đối tượng Trash nằm ở layer Main nên chúng sẽ xuất hiện bên trên những chiếc ô tô. Và điều này nhìn thật ngớ ngẩn nếu những chiếc xe đi qua mà lại xuất hiện bên dưới những mẩu rác. Để giải quyết vấn đề này, bạn cần thay đổi z - order của đối tượng Trash. Z- order dùng để điều chỉnh thứ tự các đối tượng trên mỗi layer. Vì ta muốn những mẩu rác xuất hiện bên dưới (và cả người dọn dẹp cleaner), chúng ta cần di chuyển nó xuống dưới (bottom) của layer. Để thực hiện việc này, kích vào Trash ở bảng Objects ở phía dưới bên phải cửa sổ C2 để tất cả các phiên bản khác nhau của đối tượng Trash được chọn cùng một lúc. Tiếp theo, kích chuột phải vào bất kì đối tượng Trash nào, từ bảng menu hiện ra, lựa chọn Z-order và Send to bottom of Layer. Vì tất cả các phiên bản đã được chọn nên sự thay đổi này sẽ ảnh hưởng đến tất cả chúng, và trong trò chơi, chúng sẽ xuất hiện bên dưới ô tô. Lưu ý rằng, đối tượng Trash không di chuyển xuống dưới đối tượng Grass hoặc Road bởi vì các đối tượng background ở trên một layer hoàn toàn tách biệt.
Tiếp theo, bạn cần phải thêm một sự kiện cho phép người dọn dẹp có thể thu thập được rác, cập nhật biến Score, và hiển thị thông tin cập nhật trong đối tượng Text. Trong event sheet, tạo sự kiện mới với điều kiện Cleaner - Collision: On Collision With và lựa chọn đối tượng Trash. Thêm hành động Trash - Misc: Destroy. Đồng thời thêm hành động System - Global and Local Variables: Add to, và trong cửa sổ tham số, thiết lập Variable là Score và Value là 1. Cuối cùng, thêm hành động TextScore - Text: Set Text và nhập đoạn sau "Trash Collected: " & Score. Tại đây, văn bản đang được hiển thị là một sự kết hợp của một dạng biểu thức bằng chữ (xuất hiện giữa các dấu ngoặc kép) và một biến (Score) - chúng ta không dùng dấu ngoặc kép cho biến và do đó nó sẽ được thay thế bởi giá trị của nó khi trò chơi đang chạy. Kí tự & được sử dụng để kết hợp văn bản với các loại biểu thức khác. Khi bạn hoàn thành, sự kiện này sẽ xuất hiện như hình dưới đây. Lưu và test dự án của bạn để kiểm tra xem chúng có hoạt động như mong đợi hay không.
Tiếp theo, bạn cần phải thêm một sự kiện cho phép người dọn dẹp có thể thu thập được rác, cập nhật biến Score, và hiển thị thông tin cập nhật trong đối tượng Text. Trong event sheet, tạo sự kiện mới với điều kiện Cleaner - Collision: On Collision With và lựa chọn đối tượng Trash. Thêm hành động Trash - Misc: Destroy. Đồng thời thêm hành động System - Global and Local Variables: Add to, và trong cửa sổ tham số, thiết lập Variable là Score và Value là 1. Cuối cùng, thêm hành động TextScore - Text: Set Text và nhập đoạn sau "Trash Collected: " & Score. Tại đây, văn bản đang được hiển thị là một sự kết hợp của một dạng biểu thức bằng chữ (xuất hiện giữa các dấu ngoặc kép) và một biến (Score) - chúng ta không dùng dấu ngoặc kép cho biến và do đó nó sẽ được thay thế bởi giá trị của nó khi trò chơi đang chạy. Kí tự & được sử dụng để kết hợp văn bản với các loại biểu thức khác. Khi bạn hoàn thành, sự kiện này sẽ xuất hiện như hình dưới đây. Lưu và test dự án của bạn để kiểm tra xem chúng có hoạt động như mong đợi hay không.
Chúc mừng! Bạn đã hoàn thành việc thực hiện cơ chế cơ bản của trò chơi Cleanup Challenge.
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. Phần phụ
Trong phần không bắt buộc này, bạn sẽ học cách thêm một số sự ngẫu nhiên vào trò chơi để cải thiện đồ hòa và cách chơi, dưới đây là một số tính năng bổ sung dành cho bạn.
1. Sự ngẫu nhiên
1. Sự ngẫu nhiên
Đầu tiên, bạn nên sắp xếp sự ngẫu nhiên tại vị trí ban đầu cho đối tượng Trash. Cho chúng xuất hiện ở gần đường và không quá gần các cạnh của màn hình. Tọa độ X nên nằm giữa 40 và 600, tọa độ Y nên nằm giữa 256 và 512. Với điều này, tạo một sự kiện mới với điều kiện System - Start & End: On Start of Layout và hành động Trash - Size & Position: Set Position. Về giá trị X, nhập random(40, 600), và về giá trị Y, nhập random(256, 512). Khi hoàn thành, sự kiện sẽ trông như trong hình dưới. Lưu và test game, kích vào nút khởi động lại của trình duyệt để thấy mỗi lần bạn bắt đầu game mới, những mẩu rác lại xuất hiện ở các vị trí khác nhau.
Tiếp theo, bạn sẽ thêm một số ngẫu nhiên cho hình ảnh của ô tô. Khi trò chơi đang chạy, các màu xe giống nhau sẽ xuất hiện cùng một làn đường. Ta có thể lựa chọn ngẫu nhiên giữa các đồ họa được lưu trữ của đối tượng ô tô nhờ vào quy ước đặt tên bạn đã sử dụng khi thiết lập hoạt ảnh trước đó. Hãy nhớ rằng tên của các hoạt ảnh ô tô là Car1, Car2, Car3 và Car4. Ý tưởng ở đây sẽ là chọn ngẫu nhiên một số, hoặc 1, 2, 3 hoặc 4 và kết hợp các số đó với văn bản Car để lấy tên hoạt ảnh để thiết lập. Sự lựa chọn ngẫu nhiên sẽ được thực hiện với một hàm được đặt tên là choose, được giải thích sau đây. Tìm sự kiện với điều kiện đối tượng Car va chạm với đối tượng CarWarp. Thêm một hành động khác vào sự kiện này: Car - Animations: Set Animation. Thiết lập giá trị của Animation thành "Car" & choose(1,2,3,4). Khi kết thúc, sự kiện này sẽ như hình bên trên. Lưu và test game, xác nhận rằng mỗi hình ảnh ô tô sẽ thay đổi một cách ngẫu nhiên khi nó xuất hiện (thi thoảng vẫn sẽ có 2 hình ảnh giống xuất xuất hiện cùng một đợt).
Hàm choose cung cấp một cách lựa chọn ngẫu nhiên các giá trị được gửi (số hoặc văn bản); đầu vào của hàm đại diện cho các sự lựa chọn có thể khác nhau, trong số đó sẽ được chọn ngẫu nhiên khi hành động xảy ra. Ngoài ra, thay vì "Car" & choose(1, 2, 3, 4), bạn có thể thay thế bằng choose("Car1", "Car2", "Car3", "Car4"), hai biểu thức này hoạt động như nhau. Một trong những điều tuyệt vời về lập trình đó là thường có nhiều cách để tiếp cận và giải quyết một vấn đề.
Chắc hẳn bạn sẽ thắc mắc tại sao mình lại không dùng hàm random(1, 4) trong phần này. Điều này là do hàm random có thể sẽ trả về một giá trị thập phân ngẫu nhiên (ví dụ 1,43), mà chúng ta không hề có đối tượng Car nào có giá trị thập phân cả. Tuy nhiên, hàm random vẫn sẽ cho ra một kết quả gần với giá trị của đối tượng nhưng nó vẫn không được hoàn hảo, bởi vì nó sẽ cho ra kết quả gần giá trị 2 và 3 hơn là 1 và 4. Do những yếu tố trên, hàm choose là tối ưu hơn cả.
2. Tự thiết kế
Bây giờ, hãy nhờ một người bạn chơi thử trò chơi này để có một cái nhìn tổng quan cho nó. Nếu quá khó, hãy giảm tốc độ của xe, bạn cũng có thể thêm nhiều mẩu rác hơn để kéo dài thời gian của trò chơi.
Bạn có thể hiển thị tổng thời gian mà người chơi đã chơi. C2 có một biến được xác định gọi là time - sẽ tự động cập nhật thời gian đã trôi qua kể từ khi trò chơi bắt đầu. Nếu như vậy, hãy thêm sự kiện Player - Size & Position: Is On Screen để bộ đếm giờ dừng khi người dọn dẹp biến mất (báo hiệu kết thúc trò chơi) và khi tạo hành động cho việc thiết lập hiển thị văn bản. Sử dụng hàm round để làm tròn biến thời gian tới giây gần nhất (nếu không, phần thập phân của thời gian sẽ xuất hiện trên màn hình; điều này sẽ làm mất mĩ quan của trò chơi).
Tổng kết
Trong chương này, bạn đã được học về một đối tượng mới: TiledBackground và Text. Bạn đã tạo ra một sprite với nhiều hoạt ảnh và sự kiện để chuyển đổi những hoạt ảnh đó khi cần thiết. Bạn cũng học được cách sử dụng biến để theo dõi các giá trị và cách để hiển thị chúng trên màn hình bằng cách sử dụng đối tượng Text.
Trong chương tiếp theo, bạn sẽ học cách thêm một vài tính năng cho trò chơi ở chương trước, ví dụ như dạng màn hình menu, âm thanh (hiệu ứng âm thanh và nhạc nền) và các nguồn đầu vào thay thế.
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é
