Chương 4. Cleanup Challenge
Trong chương này, bạn sẽ tạo một game thu thập là Cleanup Challenge, được lấy cảm hứng từ các trò chơi cổ điển
Frogger.
Trong Cleanup Challenge, người
chơi sẽ điều khiển một nhân vật (chúng ta sẽ gọi là cleaner), mục tiêu của nó là thu thập những mẩu rác nằm rải rác
xung quanh đường và bỏ vào thùng rác phía đối diện. Đồng thời, những chiếc ô tô
sẽ chạy ngang qua đường. Nếu nhân vật bị đâm trúng thì người chơi sẽ thua. Người
chơi sẽ phải tính toán cẩn thận vị trí mẩu rác có thể lấy được. Vào đầu trò
chơi, thùng rác sẽ được phân tán ngẫu nhiên trên màn hình. Cleaner sẽ có chuyển động 8 hướng, được điều khiển bởi phím mũi
tên, và thu thập rác bằng cách va chạm với
nó.
Chương này sẽ giúp bạn nắm vững kiến thức từ hai chương trước. Đồng thời,
nó sẽ giúp bạn làm quen với việc sử dụng các hành vi 8 Direction, Bound to Layout và Fade, tạo các hoạt ảnh dựa trên hình ảnh, viết các sự kiện với điều
kiện ngược hoặc đa hành động và sử dụng hàm ngẫu nhiên. Các chủ đề sẽ được giới
thiệu trong chương này bao gồm việc sử dụng lưới layout, tạo đối tượng Tiled Background, tạo đối tượng Text để hiển thị các chữ cái trên màn
hình và tạo các tuỳ biến để lưu trữ giá trị (chẳng hạn như điểm số).
Trong chương này, chúng ta sẽ bắt đầu sử dụng các sự kiện có mô tả ngắn
và hiệu quả hơn. Trong các chương trước, quá trình tạo ra một điều kiện có thể
như sau: “Về điều kiện, lựa chọn đối tượng System
và từ nhóm Time, chọn điều kiện Every X seconds; trong cửa sổ tham số, ở
mục Interval, nhập giá trị 5”. Vì bạn đã có kinh nghiệm với quá
trình này, chúng ta sẽ tóm gọn nó lại như là “Tạo điều kiện System – Time: Every X seconds, và thiết
lập Interval thành 5”. Nói chung, nó sẽ có dạng “thêm tên đối tượng – tên nhóm: tên điều kiện và thiết lập tên tham số thành giá trị”.
Hành động cũng sẽ được viết theo cách tương tự.
Để bắt đầu, tải tệp .zip chứa đồ hoạ của chương này. Trong thuộc tính của
layout, thiết lập Name thành Main và thiết lập kích cỡ layout thành
640, 640. Như bạn thấy ở các dự án trước, hãy thiết lập 2 layer có tên là Background, Main, và UI. Trong bảng
thuộc tính của dự án, thay đổi thuộc tính Window
Size thành 640, 640 (và bạn có thể
điền vào thuộc tính Name và Author nếu bạn muốn).
Bài 1. Backgound (hình nền)
Trong chương này, bạn sẽ thiết lập một loạt các hình ảnh background để
có background như hình ảnh bên dưới. Trong trò chơi, sự điều chỉnh và ngăn nắp
của đồ hoạ là rất quan trọng, vì vậy bạn sẽ sử dụng công cụ xây dựng lưới để lắp
các thứ vào vị trí. Nhấn vào tab View
ở trên cùng của cửa sổ C2, kích vào Snap
to grid và hộp kiểm Show grid.
Vì kích thước được thiết lập thành 32x32, nên mỗi lần bạn di chuyển hay thay đổi
kích thước một đối tượng, nó sẽ tự động tính giá trị tương ứng với bội số gần
nhất của 32. Điều này sẽ thuận tiện khi bạn sẽ đặt các đối tượng dưới đây gần
nhau.
Trong chương trước, bạn chỉ sử dụng một sprite đơn lẻ để làm background.
Bạn có thể nhận thấy rằng khi thay đổi kích thước của một sprite, hình ảnh có
thể dài ra hoặc co lại phù hợp với kích thước mà bạn chọn. Đối với dự án này, bạn
sẽ sử dụng một đối tượng khác để tạo nền: đối tượng Tiled Background. Sự khác biệt chính giữa hai loại đối tượng này
là đối tượng Tiled Background sẽ
không thay đổi kích thước hình ảnh của nó. Thay vào đó, nếu đối tượng lớn hơn
hình ảnh ban đầu thì hình ảnh sẽ được lặp lại cho đến khi nó đạt tới kích cỡ của
đối tượng; nếu đối tượng nhỏ hơn hình ảnh ban đầu thì hình ảnh sẽ bị cắt xén tới
kích thước của đối tượng. Điều này cực kì hữu ích khi sử dụng liền mạch các
hình ảnh background, tức là các hình ảnh xếp thẳng hàng khi đặt cạnh nhau.
Tiếp theo, bạn cần thêm một loạt các đối tượng Tiled Background vào
layout để tạo background. Trong thuộc tính layout, thay đổi Active layer thành Background để tất cả các đối tượng bạn sắp thêm sẽ được đặt trong Background layer. Trong layout, tạo một
đối tượng Tiled background và đặt
tên nó là grass, sử dụng hình ảnh grass.jpg. Thay đổi kích cỡ thành
640x128, bởi vì bạn đã kích hoạt lưới layout trước đó, kích thước này tương ứng
với chiều rộng của layout và chiều cao của 4 hộp (vì 4 lần 32 bằng 128). Đặt đối
tượng này ở dưới layout. Tạo một đối tượng Tiled
background khác và đặt tên nó là Road,
sử dụng hình ảnh raod.jpg, với kích cỡ
640x256 và sắp xếp nó cạnh đối tượng Grass.
Tạo một bản sao của đối tượng Grass
(cũng là 640x128) và đặt nó để làm sao cho giống hình bên trên. Cuối cùng, tạo
một Tiled background được đặt tên là
Stone, sử dụng tệp hình ảnh stone.jpg, với kích thước 640x128 và đặt
nó ở đầu layout, nó nên bao phủ các khu vực còn lại của layout. ĐỒng thời, thêm
hành vi Solid vào đối tượng Stone, điều này sẽ ngăn chặn người
chơi đi trong khu vực này (vì đây là nơi bạn sẽ đặt văn bản giao diện người
chơi).
Tiếp theo, bạn sẽ thiết lập các đường màu vàng đánh dấu các làn đường. Tạo
một đối tượng Tiled Background mới và đặt tên nó là DashedLine, sử dụng hình ảnh yellow-dash.png.
Sử dụng bảng Properties, thay đổi
kích cỡ thành 640, 8. Bạn cần sử dụng bảng properties
bởi vì Snap to Grid đã được kích hoạt,
nhưng 8 không phải bội của 32 (hoặc nếu bạn thích sử dụng chuột, bạn có thể giữ
phím Alt trong khi nhấp và kéo một đối tượng miễn là nút đang được giữ). Thay đổi
Opacity của DashedLine thành 50. Tạo
thêm hai phiên bản của đối tượng này và đặt cả 3 đối tượng này sao cho nó chia
con đường thành 4 làn đều nhau. Một khi layout của bạn như hình trên, bạn có thể
sẵn sàng bước sang phần tiếp theo.
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 2. Animated character
(sinh động hóa nhân vật)
Trong các chương trước, ta chỉ làm cho nhân vật xoay người để đối mặt với
hướng mà chúng di chuyển tới. Trong dự án này, bạn sẽ sử dụng hoạt ảnh thay vì một hình ảnh duy nhất cho nhân vật, và hơn nữa, bạn sẽ thiết lập cho cho dự án
hiển thị các hoạt ảnh khác nhau dựa trên hướng mà nhân vật di chuyển, tương tự
như phong cách của các trò chơi RPG. Chú ý rằng spritesheet này chứa các khung
hình hoạt ảnh của nhân vật di chuyển theo 4 hướng.
Trong layout, thiết lập Active
layer thành Main để các đối tượng
mới thêm vào sẽ tự động được đặt trên layer đó. Tạo một sprite mới tên là cleaner. Trong cửa sổ chỉnh sửa hình ảnh,
kích chuột phải vào cửa sổ Animation
frames, di chuyển chuột tới Import
frames, lựa chọn From Sprite Strip,
và sau đó chọn hình ảnh cleaner.png.
Trong tấm ảnh này chứa 3 khung hình ở mỗi hàng và 4 khung hình ở mỗi cột, vì vậy
trong cửa sổ Import Sprite Strip, nhập
3 vào ô hàng ngang (horizontal) và nhập 4 vào ô dọc (vertical). Tích vào hộp Replace entire existing animation (để
xoá khung trống ban đầu). Mười hai khung hình sẽ xuất hiện trong cửa sổ Animation frames như dưới đây:
Tất nhiên, không phải tất cả các khung này sẽ được sử dụng cho mỗi hoạt ảnh.
Bạn sẽ sử dụng hoạt ảnh này như một cơ sở để tạo ra 4 hoạt ảnh tương đương với
4 hướng đi. Đầu tiên, trong cửa sổ Animations,
kích vào Default (tên hiện tại của
hoạt ảnh) và trong bảng Properties,
thay đổi Speed thành 6, thay đổi Loop thành Yes và thay đổi Ping-pong
thành Yes. Sau đó, trong cửa sổ Animations, kích chuột phải vào Default và trong menu xuất hiện, lựa
chọn Duplicate. Lặp lại điều này hai
lần nữa để bạn có tổng cộng 4 hình động xuất hiện trong danh sách. Sau đó, kích
chuột phải vào hoạt ảnh đầu tiên, chọn Rename
và nhập South như một cái tên mới. lặp
lại quá trình này đối với các hoạt ảnh khác trong danh sách, đặt tên chúng là West, East, và North. Khi bạn đã hoàn thành, bạn sẽ có cửa sổ màn hình trông như
hình dưới đây. Tiếp theo, lựa chọn hoạt ảnh được đặt tên là Sound trong danh sách, và trong cửa sổ Animation frames, kích vào mỗi khung mà
không tương ứng với nhân vật đi về hướng Nam (được đánh sô từ 3 đến 11), sau đó
nhấn nút Delete. Khi bạn hoàn thành,
bạn sẽ có cửa sổ hình ảnh như hình dưới đây. Kích chuột phải vào hoạt ảnh South từ cửa sổ Animation và chọn Preview
để xem nó như thế nào, bạn có thể điều chỉnh tốc độ của nó nếu muốn. Sau đó lặp
lại quá trình này cho các hoạt ảnh West,
East và North. Xoá các khung hình không tương ứng. Khi hoàn thành, đóng cửa
sổ chỉnh sửa lại.
Trong khu vực layout, thay đổi thuộc tính Size của Cleaner thành 48, 48 và đặt nó ở trung tâm của vùng cỏ
bên dưới (bởi vì Snap to Grid đang
hoạt động và kích thước được thiết kế không phải là bội của 32 nên hãy thay các
giá trị này trong bảng Properties).
Thêm hành vi 8 Direction, và thay đổi
thuộc tính của Max Speed thành 80 và
Set Angle thành No. Điều này sẽ dừng sprite khỏi việc quay theo hướng mà nó di chuyển,
các hoạt ảnh sẽ xử lí vấn đề này. ĐỒng thời, thêm hành vi Bound to layout. Cuối cùng, thêm hành vi Fade và thay đổi Active at
start thành No.
Tiếp theo, bạn sẽ tạo ra một vài sự kiện sẽ thay đổi hoạt ảnh của Cleaner thành một trong bốn hướng mà bạn
vừa thiết lập, dựa trên nút được nhấn. Đầu tiên, thêm đối tượng Keyboard tới dự án. Trong event sheet,
tạo một điều kiện mới với điều kiện Keyboard
- On Key Pressed, với Key thiết
lập thành Down Arrow. Trong sự kiện
này, thêm hành động Cleaner –
Animations: Set animation, và trong cửa sổ tham số, nhập “South” (bao gồm cả dấu ngoặc kép, hãy đảm
bảo rằng chữ viết hoa khớp với tên bạn nhập trong cửa sổ Animations trước đó). Lặp lại quá trình này 3 lần, tạo thêm 3 sự kiện
để khi nhấn nút mũi tên trái tương ứng với hoạt ảnh West và vân vân. Bạn cũng nên thiết lập cho nhân vật dừng lại khi
không di chuyển. Để làm như vậy, tạo ra một sự kiện mới với điều kiện Cleaner - 8-Direction: Is Moving, và
trong event sheet, kích chuột phải và đảo ngược (invert) điều kiện. Sau đó thêm
hành động Cleaner - Animation: Stop.
Khi bạn hoàn thành những sự kiện này, hãy lưu và chơi thử trò chơi của bạn, và
xác minh rằng khi bạn nhấn nút mũi tên, hướng di chuyển của nhân vật sẽ tương ứng
với các hoạt ảnh, và khi nhân vật dừng lại, hoạt ảnh cũng sẽ dừng lại.
Bài 3. Ô tô
Trong phần này, bạn sẽ thêm một số xe ô tô để cleaner tránh né trên con đường; những chiếc xe có ngoại hình và tốc
độ khác nhau. Để bắt đầu, tạo một sprite mới có tên là Cars. Trong cửa sổ chỉnh sửa hình ảnh chính, chọn bất cứ hình ảnh ô
tô nào mà bạn đã tải về từ đầu chương. Trong danh sách cửa sổ Animations, kích chuột phải vào Default, chọn Rename và nhập Car1 như
cái tên mới. Kích chuột phải vào cửa sổ lần nữa và chọn Add animation. Đặt tên hoạt ảnh này là Car2, và thêm hình ảnh của một chiếc ô tô với màu khác. Lặp lại
thêm lần nữa với những hình ảnh khác nhau; đặt tên chúng là Car3 và Car4. Khi hoàn thành, đóng cửa sổ chỉnh sửa hình ảnh lại.
Trong layout, thêm hành vi Bullet
vào đối tượng Car, và thay đổi tốc độ
thành 200. Tạo 3 phiên bản khác của đối
tượng Car, và đặt chúng ở mỗi làn đường khác nhau. Ở hàng thứ hai và thứ 4, đặt
ô tô ở hàng bên phải và thiết lập Angle
của chúng thành 180 (để chúng đối mặt
về phía bên trái).
Chọn đối tượng Car ở làn đầu tiên. Trong bảng Properties, ở gần cuối danh sách, tìm thuộc tính tên là Initial animation. Kế tiếp thuộc tính
này, bạn sẽ thấy từ Default (hoặc nếu
không có hoạt ảnh nào có tên đó, nó sẽ hiển thị tên hoạt ảnh đầu tiên trong
danh sách). Thay đổi văn bản thành Car1.
Sau đó, đối với đối tượng ô tô ở hành thứ hai, thay đổi thuộc tính Initial animation thành Car2. Tương tự, thay đổi Initial animation của ô tô ở làn hai và
ba thành Car3 và Car4. Khi bạn hoàn thành, hãy lưu và chơi thử game của bạn, những
chiếc xê nên di chuyển theo đường thẳng, cuối cùng di chuyển qua các cạnh của
màn hình.
Tiếp theo, lẽ ra nên có một dòng xe chạy dọc theo đường. Có một cách để
thực hiện việc này đó là thêm hành vi Wrap
vào đối tượng Car, nhưng sẽ quá hạn
chế đối với mục đích của ta trên thực tế. Chúng ta muốn thay đổi một số
gameplay bằng cách thay đổi thuộc tính của mỗi đối tượng Car sau khi nó rời màn
hình và trước khi nó trở lại ở phía bên kia. Sử dụng hành vi Wrap và tốc độ cố định sẽ dẫn đến hành
vi đó quá dễ đoán, và khi người chơi thấy quen dần, trò chơi sẽ trở nên quá dễ
dàng. Nó cũng sẽ phá vỡ sự thực tế vì những người lái ô tô trong thực tế sẽ
không hành động như được dự đoán trước. Do đó, trong phần này, bạn sẽ tạo một số
sự kiện tạo ra hiệu ứng tương tự hành vi Wrap
và đồng thời, cho phép bạn sửa đổi thuộc tính của một chiếc xe (như là tốc độ)
mỗi lần nó đi qua các cạnh của màn hình. Để thực hiện điều này, tiếp theo bạn sẽ
thêm một sprite mới, nằm ngoài màn hình, nó sẽ đóng vai trò kích hoạt cho những
hành động này.
Tạo một sprite được đặt tên là CarWarp.
Hình ảnh không quan trọng vì đối tượng này nằm ngoài màn hình, người chơi không
thể nhìn thấy, vì vậy bạn có thể sử dụng các công cụ vẽ đơn giản của C2. Khi bạn
kết thúc, đóng cửa sổ chỉnh sửa hình ảnh và thay đổi kích thước của CarWarp thành 32, 32. Tạo thêm 3 bản
sao này và đặt chúng ở mép của layout (đối diện với nơi các ô tô xuất phát), và
phải cách layout ít nhất là bằng chiều của ô tô. Cần khoảng cách đủ để đối tượng
Car sẽ không va chạm với đối tượng CarWarp cho đến khi những chiếc xe hoàn
toàn vượt qua cạnh của layout. Như hình dưới đây:
Trong event sheet, tạo một 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 CarWarp.
Hành động đầu tiên sẽ tạo lại hành vi warplike
và đặt chiếc xe vượt qua rìa phía đối diện của màn hình. Thật không may, không
có hành động “move backward” trong
danh sách hành động, nhưng bạn vẫn có thể làm nó hoạt động với các hành vi có sẵn.
Đối với sự kiện này, thêm hành động Car
- Size & Position: Move Forward và thiết lập Distance thành âm 900 (-900) (nếu là một khoảng cách âm thì đối tượng
sẽ di chuyển ngước lại). Sau đó, trong cùng một sự kiện, thêm hành động Car - Bullet: Set Speed, và thiết lập tốc
độ ngẫu nhiên random(200, 400), điều
này sẽ chọn ngẫu nhiên một số trong phạm vi 200 đến 400. Khi bạn hoàn thành,
lưu và chơi thử trò chơi để xác định rằng ô tô vẫn trở lại ở phía bên kia màn
hình và với tốc độ khác.
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é
