Bài 4. Động cơ và các vụ nổ
Tại thời điểm này, bạn đã thực hiện xong các chức năng cơ bản của trò chơi Space Rocks. Phần này được dành riêng cho phản hồi trực quan, là điều quan trọng trong việc cung cấp trải nghiệm game chất lượng cho người chơi. Hai tính năng bạn sẽ thực hiện bao gồm một hiệu ứng động cơ, được hiển thị bất cứ khi nào con tàu tăng tốc, và một vụ nổ sinh động, sẽ xuất hiện bất cứ khi nào đối tượng bị phá hủy.
Đầu tiên, bạn sẽ thêm hiệu ứng động cơ. Trong khu vực layout, thêm một sprite mới có tên là Fire, sử dụng hình ảnh fire.png. Đặt và thay đổi kích cỡ sprite này để nó xuất hiện từ con tàu vũ rụ. Thêm hành vi Pin. Hành vi Pin được sử dụng để gắn liền một sprite này với một sprite khác; khi một sprite di chuyển hoặc xoay, bất kì sprite nào được gắn với nó sẽ di chuyển và xoay y như sprite kia, như thể các sprite là một đối tượng duy nhất.
Để xác định đối tượng mà ngọn lửa sẽ được gắn, ta cần thiết lập một sự kiện. Sự kiện này cần diễn ra chính xác một lần, ngay khi game bắt đầu, như là “Nếu layout vừa mới bắt đầu thì đối tượng ngọn lửa sẽ tự động gắn vào tàu vũ trụ”. Trong event sheet, thêm một sự kiện mới. Lựa chọn đối tượng Systemvà điều kiện On start of layout. Thêm một hành động, lựa chọn đối tượng Firevà lựa chọn hành động Pin to Object; trong cửa sổ tham số vừa xuất hiện, lựa chọn đối tượng Spaceship. Ngọn lửa chỉ nên tồn tại nếu con tàu tồn tại, chính vì vậy bạn cũng nên thêm một hành động tới sự kiện mà một tiểu hành tinh va chạm với con tàu; trong tình huống này, ngọn lửa nên bị phá hủy. Khi bạn hoàn thành, bạn sẽ có sự kiện như hình dưới đây. Lưu lại và test thử trò chơi của bạn, đối tượng Fire và Spaceship nên di chuyển xung quanh màn hình như một nhất thể. Tuy nhiên, đối tượng Fire hiện tại luôn được nhìn thấy, trong khi đó ta chỉ muốn nó xuất hiện khi tàu tăng tốc. Vấn đề này sẽ được sửa lại.
Đối tượng Fire không nên được nhìn thấy khi game mới bắt đầu, do đó bạn nên chọn đối tượng Fire ở layout và thiết lập thuộc tính Initial Visibility thành Invisible. Tiếp theo, bạn cần thiết lập một cặp sự kiện để kiểm soát sự hiển thị của ngọn lửa, khi tăng tốc, ngọn lửa nên được nhìn thấy và khi không tăng tốc, ngọn lửa sẽ vô hình. Hãy nhớ rằng sự tăng tốc xảy ra khi phím mũi tên lên được giữ, và có một sự kiện ở cùng với điều kiện này. Vì vậy, bạn chỉ cần thêm một hành động mới cho sự kiện này, vì vậy kích vào Add action ngay bên duới hành động tăng tốc của tàu vũ trụ. Trong cửa sổ xuất hiện, lựa chọn đối tượng Fire và hành động Set Visible từ nhóm Appearance. Trong cửa sổ tham số xuất hiện, thiết lập chế độ hiển thị thành giá trị mặc định của Visible, cuối cùng kích vào nút Done.
Để làm ngọn lửa không thể nhìn thấy, sự kiện sẽ là “Nếu mũi tên lên không giữ xuống thì đối tượng Fire sẽ thiết lập sự hữu hình thành vô hình”. Bạn có thể thấy, về cơ bản, các điều kiện trong C2 được diễn đạt một cách rõ ràng, chúng kiểm tra mỗi lần điều kiện xảy ra hơn là mỗi lần điều kiện không xảy ra. Trong các trường hợp như vậy, khi sự phủ định của điều kiện cần được kiểm tra, C2 sẽ cung cấp cho bạn khả năng đảo ngược bất kì điều kiện nào được đưa ra. Một điều kiện được đảo ngược là đúng khi điều kiện ban đầu là không đúng. Như vậy, để thực hiện đầy đủ sự kiện được miêu tả ở trên, hãy bắt đầu bằng cách tạo một sự kiện mới với điều kiện Keyboard là Key is Down, và thông qua cửa sổ thông số, lựa chọn Up arrow key, như bạn đã làm trước đó. Khi bạn hoàn thành và điều kiện được hiển thị trên màn hình, kích chuột phải vào điều kiện và danh sách lựa chọn sẽ xuất hiện. Từ danh sách này, lựa chọn Invert và một dấu X màu đỏ sẽ xuất hiện trong điều kiện, cho thấy rằng nó đã được đảo ngược. Việc đảo ngược có thể được diễn tả là “Không phải là trường hợp …”. Sau đó, thêm hành động vào sự kiện này, chọn đối tượng Fire và hành động Set Visible, và trong cửa sổ thông số, thay đổi thiết lập thành Invisible. Khi bạn hoàn thành, bạn sẽ có sự kiện như hình dưới đây. Như thường lệ, lưu và test game của bạn, hãy đảm bảo rằng ngọn lửa chỉ xuất hiện khi bạn nhấn mũi tên lên.
Tiếp theo, bạn sẽ thêm các hiệu ứng bùng nổ xuất hiện khi có đối tượng bị phá huỷ. Không giống như các hoạt ảnh dựa trên giá trị ở chương trước (bao gồm xoay và thay đổi kích cỡ hình ảnh), đây sẽ là hoạt ảnh dựa trên hình ảnh đầu tiên của bạn, là hiển thị nhanh chóng một chuỗi các hình ảnh, tương tự như trong làm phim hoạt hình. Ở đây, bạn sẽ sử dụng tệp hình ảnh explosiom.png, chứa các hình ảnh nhỏ hơn (được coi là khung của hoạt ảnh) được sắp xếp theo hình chữ nhật. Nếu những hình ảnh đặc biệt này được hiển thị một lần nữa, thì nó sẽ hiển thị như một vụ nổ, thay đổi từ màu vàng cam sang màu vàng đỏ, và cuối cùng là một màu sẫm và biến mất như khói bụi.
Để bắt đầu, thêm một sprite mới có tên là Explosion tới main layer của layout. Khi cửa sổ chỉnh sửa hình ảnh xuất hiện, thay vì sử dụng cửa sổ Edit Image lớn, bạn sẽ tập trung vào cửa sổ được gọi là Animation frames. Kích chuột phải vào cửa sổ, và trong menu xuất hiện, di chuyển chuột tới lựa chọn Import frames và sau đó kích vào From Sprite Strip. Lựa chọn hình ảnh explosion.png và sau đó một cửa sổ sẽ xuất hiện với tiêu đề Import Sprite Strip. Cửa sổ này được sử dụng để chỉ rõ có bao nhiêu hình ảnh phụ được chứa trong chuỗi hình ảnh sprite. Trong trường hợp này, có chứa 6 hình ảnh ở mỗi hàng, do đó nhập 6 cho số hình ảnh ở hàng ngang (horizontal), và nhập 6 cho hình ảnh ở hàng dọc (vertical). Ngoài ra, lựa chọn hộp kiểm Replace Entire Existing Animation nếu bạn không muốn lưu lại hình ảnh trống mặc định được cung cấp bởi trình chỉnh sửa hình ảnh. Kích vào nút OK và khi hộp thoại xác nhận xuất hiện, kích vào OK. Sau một lúc, bạn sẽ thấy các khung riêng lẻ xuất hiện trong cửa sổ Animation frames (bạn có thể sẽ phải dùng lăn chuột để xem tất cả). Các khung có thể sắp xếp lại bằng cách sử dụng chuột để kéo thả, và các khung riêng lẻ có thể xoá bằng cách kích chuột phải vào nó và chọn Delete; tuy nhiên, bạn không cần làm những điều trên vào lúc này. Để xem trước hoạt ảnh, xác định vị trí cửa sổ chỉnh sửa có tên là Animations; cái này chứa danh sách các hoạt ảnh được lưu trữ cho đối tượng này và hiện tại chỉ chưa 1 mục, được đặt tên là Default. Kích chuột phải vào tên của hoạt ảnh và chọn Preview, một cửa sổ nhỏ sẽ xuất hiện và hiển thị một hoạt ảnh rất chậm. Để khắc phục nó, kích vào tên hoạt ảnh, và trong thanh Properties sẽ hiển thị một danh sách ngắn các thuộc tính liên quan tới hoạt ảnh. Thuộc tính Speed đại diện cho bao nhiêu khung hình sẽ hiển thị trong 1 giây; thay đổi giá trị này thành 20 và sau đó xem lại hoạt ảnh lần nữa để kiểm tra xem nó có mượt mà hơn không. Khi bạn kết thúc, đóng cửa sổ chỉnh sửa hình ảnh.
Tiếp theo, trong layout, đặt Explosionsprite để nó nằm trong vùng màu xám. Điều này là để vụ nổ ban đầu xảy ra bên ngoài trò chơi và không hiển thị cho người chơi thấy. Tiếp theo, bạn cần thêm hành động vào các sự kiện trước nơi vụ nổ sẽ xảy ra. Trong event sheet, bạn sẽ thêm hành động khác cho sự kiện mà có liên quan đến việc tàu vũ trụ bị phá huỷ. Kích vào Add action ngay bên dưới hành động này, và trong cửa sổ tham số chọn đối tượng Explosion và sản sinh nó ngay trên Main layer. Tương tự như vậy, hãy thêm một hành động cho sự kiện có liên quan tới việc một tiểu hành tinh bị phá huỷ, kích vào Add action, chọn đối tượng Asteriod, lựa chọn hành động Spawn, chọn đối tượng Explosion và thiết lập nó xuất hiện trên Main layer. Cuối cùng, bạn thêm một sự kiện để bỏ Explosionsprite ra khỏi layout sau khi hoạt ảnh kết thúc. Nếu không, tất cả các vụ nổ sẽ đều tồn tại trong bộ nhớ máy tính (mặc dù chúng vô hình), điều này sẽ khiến trò chơi bị chậm lại, giật lag. Thêm một sự kiện mới, chọn đối tượng Explosion và điều kiện On any finished từ nhóm Animation. Về hành động, chọn đối tượng Explosion và hành động Destroy. Khi bạn hoàn thành, bạn sẽ có một màn hình như dưới đây. Lưu lại và test game của bạn.
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 5. Sự di chuyển
Một cơ chế trò chơi nữa được đề cập ở đầu đó là khả năng phi thuyền có thể dịch chuyển tới một vị trí ngẫu nhiên trên màn hình, một phương pháp cứu nguy cho con tàu của chúng ta thoát khỏi rủi ro va chạm. Bạn có thể cung cấp một khung cảnh với một hiệu ứng đặc biệt ở vị trí ban đầu và vị trí tiếp theo của con tàu.
Đầu tiên, bạn cần tạo một sprite đại diện cho hiệu ứng đặc biệt. Trong layout, bạn tạo ra một sprite được đặt tên là Warp, đặt nó ở lề của layout. Vì bạn đang tạo một sprite hoạt ảnh, nên quá trình sau sẽ tương đối giống với khi tạo ra hoạt ảnh của vụ nổ. Khi cửa sổ chỉnh sửa hình ảnh được mở, kích chuột phải vào cửa sổ Animation framesvà chọn Import frames / from sprite strip. Chọn tệp hình ảnh warp.png, và cửa sổ xuất hiện, nhập 8 cho ô ngang (horizontal) và 4 cho ô dọc (vertical). Kích vào Defaultrong cửa sổ Animation, và trong thanh Properties, thay đổi Speed thành 16 và thay đổi Loopthành Yes. Điều này có nghĩa là các khung hoạt ảnh sẽ được lặp lại, như một vòng tròn. Khi hoàn thành, thêm hành vi Fade cho Warp sprite. Điều này sẽ làm mờ Warp sprite sau 1 giây. Và vì thuộc tính Destroy của hành vi Fade được thiết lập mặc định After fade out nên bạn không cần thêm sự kiện để phá huỷ nó như với Explosionsprite.
Sự kiện bạn sẽ tạo tiếp theo đó là “Nếu phím X được nhấn thì tàu vũ trụ sẽ sinh ra một đối tượng Warp, con tàu sẽ di chuyển tới một vị trí ngẫu nhiên và tạo ra đối tượng Warp thứ hai”. Để bắt đầu, tạo một sự kiện mới với điều kiện Keyboard/ On key pressed. Trong cửa sổ tham số, nhấn nút X (hoặc bất kì nút nào mà bạn thích). Thêm một hành động tới sự kiện này, lựa chọn đối tượng Spaceship, lựa chpnj hành động Spawn another Object, và lựa chọn đối tượng Warp. Sau đó thêm hành động thứ hai tới sự kiện này, lựa chọn đối tượng Spaceship và hành động Set position trong nhóm Size & Position. Trong cửa sổ tham số xuất hiện, có các hộp văn bản nơi bạn có thể chỉ định các tọa độ X và Y của con tàu. Tuy nhiên, bạn không muốn chỉ nhập một số trong khu vực này vì con tàu sẽ luôn di chuyển tới một vị trí cụ thể và sự dịch chuyển sẽ không ngẫu nhiên.
May mắn thay, công cụ C2 không giới hạn như là chỉ được nhập số. bạn có thể nhập cả các biểu thức, đó là sự kết hợp các giá trị và hàm. Cụ thể, các hàm được sử dụng để biến đổi các giá trị đầu vào thành giá trị đầu ra theo một công thức hoặc phương pháp có sẵn. Khi nhập các hàm vào C2, tên của hàm sẽ được viết đầu tiên, tiếp theo là dầu ngoặc đơn, đầu vào xuất hiện ở giữa các dấu ngoặc đơn, và nếu có nhiều giá trị đầu vào thì chúng được ngăn cách bởi các dấu phẩy. Đây là một ví dụ:
- Hàm round chuyển số 3.8 thành 4; nó sẽ được nhập là round(3.8).
- Hàm sqrt(“square root”) chuyển số 25 thành 5; nó sẽ được nhập là sqrt(25).
- Hàm max(“maximun”) có hai số là đầu vào và trình số lớn hơn trong hai số như là đầu ra; ví dụ max(9, 7) sẽ bằng 9.
- Hàm random có hai số như là đầu vào và trình đầu ra một giá trị thập phân ngẫu nhiên giữa các giá trị. Không giống hầu hết các hàm khác, mỗi lần hàm này được sử dụng, bạn có thể nhận được một số khác nhau. Ví dụ, random(10, 20) sẽ cho giá trị đầu ra là 14.5333, nhưng lần tiếp theo có thể sẽ là 19.765.
Đối với trò chơi này, chúng ta sẽ sử dụng hàm cuối cùng mà ta vừa đề cập bên trên, đó là hàm random. Bởi vì layout có chiều rộng là 800 pixel nên giá trị của X có thể nằm giữa 0 và 800. Quay trở lại cửa sổ tham số, nhập biểu thức random(0, 800)trong hộp X. Tương tự, bởi vì layout có chiều cao 600 pixel, hãy nhập random(0, 600) trong hộp Y, và sau đó kích vào nút Done. Cuối cùng, thêm hành động thứ ba vào sự kiện này, giống với cái đầu tiên: chọn đối tượng Spaceship, chọn hành động Spawn Another Object, và chọn đối tượng Warp. Vì các hành động được kích hoạt theo trình tự từ trên xuống dưới, đối tượng Warp thứ hai sẽ được tạo ra bởi tàu vũ trụ khi nó di chuyển tới vị trí mới trên layout. Khi bạn hoàn thành, sự kiện sẽ trông như hình dưới đây. Lưu lại trò chơi của bạn và chơi thử nó để xác nhận nó hoạt động như mong muốn.
Bài 6. Thắng và thua
Cuối cùng, bạn sẽ thực hiện vài thông báo cho người chơi biết rằng trò chơi đã kết thúc và người chơi sẽ thắng hay thua. Và quan trọng là cung cấp một hình ảnh kết thúc đẹp mắt. Các sự kiện cũng sẽ tương tự như ở chương trước: “Nếu không còn tiểu hành tinh nào, một thông điệp Congratulations! Sẽ xuất hiện; nếu tàu vũ trụ không còn, thì thông điệp game Over sẽ xuất hiện.
Để bắt đầu, tạo một sprite có tên là MesengerWin, sử dụng tệp mesenger-win.png. Đặt nó ở giữa layout, thay đổi thuộc tính Layer của nó thành UI, và thay đổi thuộc tính Intial Visibility thành Invisible. Tương tự ta tạo một sprite có tên là MessengerLose sử dụng tệp hình ảnh messenger-lose.png và đặt nó ở giữa layout, thiết lập thuộc tính Layer sang UI, và khiến nó vô hình (invisible). Tiếp theo, thêm một sự kiện với điều kiện System / Compare Two Values; trong cửa sổ tham số, nhập Asteroid.Count ở giá trị đầu tiên, Equal ở phần so sánh và 0ở giá trị thứ hai. Thêm hành động cho sự kiện này, lựa chọn đối tượng MessengerWin và hành động Set Visible, với tham số Visible. Cuối cùng, thêm một sự kiện với điều kiện System / Compare Two Values; trong cửa sổ tham số, nhập Spaceship.Countcho giá trị đầu tiên, Equal cho phần so sánh và 0 cho giá trị thứ hai. Thêm hành động cho sự kiện này để thiết lập cho tính hữu hình của đối tượng thành có thể nhìn thấy (visible). Lưu và chơi thử game của bạn, hãy kiểm tra cả thắng và thua để đảm bảo nó hoạt động tốt.
Bài 7. Thêm các thành phần phụ