Chương 2. Làm game Starfish Collector
Trong chương này, bạn sẽ tạo một trò chơi với Construct 2, được gọi là Starfish Collector, như hình dưới. Người
chơi điều khiển một con rùa, mục tiêu của nó là bởi xung quanh đại dương và thu
thập những con sao biển mà nó nhìn thấy. Trò chơi có góc nhìn từ trên xuống và
người chơi điều khiển bằng các phím mũi tên. Chương này sẽ giới thiệu các khái
niệm cơ bản nhất để tạo ra một trò chơi bằng C2.
Bài 1. Thiết lập dự án
Để bắt đầu, tải file zip chứa các hình ảnh cho trò chơi này ở phần giới
thiệu cuốn sách. Giải nén tới thư mục mà bạn chọn; sẽ có hình ảnh của nước, con
rùa, sao biển, hòn đá và từ You win!
Khi người chơi thắng. Bạn cũng có thể sử dụng những hình ảnh mà bạn tự thiết kế.
Tiếp theo, bắt đầu chương trình C2. Ở thanh menu, lựa chọn New để tạo một project mới. Trong cửa sổ
mới xuất hiện, lựa chọn New empty project
và kích vào nút Open. C2 sẽ tạo một tệp
project mới cho bạn. Ở giữa bạn sẽ nhìn thấy layout của trò chơi. Ở phía bên
trái là phần Properties (nó hiển thị
thông tin của đối tượng được chọn trong layout). Ở phía trên bên phải là phần project (hiển thị danh sách project của
bạn), và phía dưới bên phải là phần object
(hiển thị các loại đối tượng hiện tại của bạn trong layout).
Để bắt đầu, bạn sẽ thiết lập layout. Kích vào bất cứ đâu trên khu vực
layout và tiêu đề bảng điều khiển Properties
sẽ thay đổi thành Layout properties.
Bên dưới, nó sẽ liệt kê các thuộc tính của layout bên cột bên trái và giá trị
hiện tại của chúng hoặc các thiết lập ở bên phải. Kích vào Name, gõ từ main và ấn
enter. Bạn sẽ thấy tên của layout đã thay đổi trong bảng điều khiển project.
Tương tự, kích vào phần Layout size
và nhập 800, 600. Điều này sẽ thiết lập layout rộng 800px và cao 600px. Đây là
kích cỡ ổn định. Khi bạn hoàn thành các thay đổi, bạn sẽ có màn hình như hình
dưới đây:
Tiếp theo, các bạn sẽ thiết lập các layer trên layout. Layer được sử dụng
để đưa các đối tượng trên layout vào một nhóm, chẳng hạn như hình ảnh nền
(background), các nhân vật và trang bị, giao diện người dùng (UI) và hiển thị
trên màn hình (HUD) (head-up display). Để nhìn thấy danh sách layer, bên dưới bảng
điều khiển project, bạn sẽ thấy 2 tab: Projects
và Layers. Kích vào Layer tab, bảng điều khiển Project sẽ được đặt với bảng điều khiển Layer. Bạn sẽ thấy danh sách chưa 1 layer
đơn lẻ, được đặt tên là layer 0. Kích
vào biểu tượng dấu cộng 2 lần để thêm 2 layer; chúng sẽ có tên mặc định là Layer 1 và Layer 2. Để thay đổi tên layer, kích chuột phải vào layer và kích
vào biểu tượng cây bút chì. Thay đổi Layer
0 thành Background, layer 1 thành Main, Layer 2 thành UI. Khi bạn hoàn thành, bảng layer sẽ
trông như hình dưới đây. Các thứ tự trong các tên layer tạo ra 1 khác biệt;
layer ở dưới cùng sẽ có nội dung hiển thị trước tiên. Các đối tượng của nó sẽ
xuất hiện ở dưới, hoặc ở sau các đối tượng của layer khác. Tương tự, các layer
bên trên sẽ có đối tượng được xuất hiện tiếp theo. Layer ở đầu danh sách được
xuất hiện cuối cùng, vì vậy đây là nhóm tốt nhất cho thông tin liên quan đến
giao diện người dùng (UI: user interface-related), chẳng hạn như điểm số hoặc
thời gian còn lại, bởi vì dữ liệu này được hiển thị bao phủ lên thế giới trò
chơi.
Công việc thiết lập project cuối cùng bạn sẽ làm là thiết lập một vài
thuộc tính project. Đây là lưu trữ thông tin về trò chơi của bạn và thay đổi
cài đặt kích thước cửa sổ cũng như trình duyệt web được sử dụng để xem trước
trò chơi của bạn. Kích vào khu vực layout và bên dưới danh sách thuộc tính của
layout ở bên trái, bạn sẽ thấy dòng Project
properties, bên cạnh đó là một từ màu xanh View. Kích vào View, và bảng
điều khiển Properties sẽ xuất hiện
và hiển thị các thuộc tính của project. Tại đây, bạn có thể điền vào khu vực Name (tên của trò chơi) và Author (tên của bạn). Điền vào các thuộc
tính như Email hoặc Website là không cần thiết nhưng có thể sẽ
hữu dụng nếu bạn có kế hoạch chia sẻ tệp project của bạn với ai đó và bạn muốn
cung cấp cách cho họ tiếp xúc với bạn. Tiếp tục trong bảng điều khiển Properties, bạn nên thay đổi Window Size thành 800, 600; giống như bạn
đã làm cho Layout Size trước đó. Điều
quan trọng nhất là màn hình Starfish Collector nên lấp đầy cửa sổ chương trình.
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. Các sprite
Tiếp theo, bạn cần thêm một số đối tượng sprite vào chương trình của bạn.
Một sprite là một hình ảnh đại diện cho một thực thể trong trò chơi của bạn và
sở hữu các thuộc tính như vị trí (được chỉ định bằng tọa độ x, y), góc quay (đo
bằng độ), và kích cỡ (ko cần giống với kích cỡ ban đầu). Để tạo một sprite,
kích chuột phải vào khu vực layout, và một menu sẽ xuất hiện. Lựa chọn Insert New Object, và một cửa sổ sẽ xuất
hiện. Kích chuột phải vào biểu tượng
Sprite; sau đó ở hộp văn bản bên dưới cửa sổ bên cạnh Name when insert, gõ Background;
và cuối cùng nhấn vào nút Insert.
Sau khi kích vào nút Insert,
con trỏ chuột sẽ chuyển sang hình dấu cộng, được sử dụng để chỉ ra nơi bạn muốn
đặt đối tượng sprite. Bạn có thể dễ dàng thay đổi vị trí của sprite sau đó, do
đó bây giờ chỉ cần kích vào khu vực layout. Tiếp theo, một tập hợp các cửa sổ
được xuất hiện như hình dưới đây. Đây là những cửa sổ chỉnh sửa hình ảnh. Với
các công cụ được cung cấp, bạn có thể vẽ một hình ảnh hoặc thiết lập một hoạt ảnh.
Tuy nhiên, đối với dự án này, bạn nên sử dụng các đồ họa được cung cấp sẵn.
Kích vào biểu tượng thư mục dọc theo đầu của cửa sổ Edit image, điều hướng đến thư mục mà bạn giải nén các hình ảnh từ
tệp .zip, và lựa chọn hình ảnh có tên là water.jpg.
Hình ảnh sẽ xuất hiện trong cửa sổ chỉnh sửa hình ảnh. Bạn không cần sửa đổi hình ảnh
này nữa, chính vì vậy đóng cửa sổ chỉnh sửa lại (các cửa sổ chỉnh sửa hình ảnh
khác cũng tự động được đóng), và sprite sẽ xuất hiện trong khu vực layout.
Sprite hình nền cần được điều chỉnh để có thể bao phủ toàn bộ diện tích
layout. Nhấp vào sprite ở layout để lựa chọn nó; sprite hiện được chọn sẽ được
bao phủ bởi một hình chữ nhật màu xanh nhạt. Bạn có thể đặt lại vị trí của
sprite bằng cách nhấp và kéo vào vùng trung tâm của sprite. Bạn có thể thay đổi
kích thước của sprite bằng cách nhấn và kéo bất kì hình vuông nhỏ màu trắng xuất
hiện xung quanh hình chữ nhật màu xanh lam khi sprite được chọn. Bạn có thể
xoay sprite bằng cách nhấp và kéo các hình vuông nhỏ màu trắng được kết nối với
điểm trung tâm bằng 1 dòng (tuy nhiên, bạn không cần phải xoay sprite này). Bạn sẽ
nhận thấy rằng, khi bạn thay đổi vị trí, kích thước, hoặc góc, giá trị tương ứng
trong bảng điều khiển Properties
cũng sẽ thay đổi. Ngoài ra bạn cũng có thể thiết lập các vị trí này bằng cách
gõ giá trị của chúng trực tiếp trên bảng điều khiển Properties. Ngoài ra, thay đổi thuộc tính Layer của sprite hình nền thành Background layer.
Tiếp theo, bạn sẽ lặp lại quá trình này để thêm một con rùa. Như trước,
nhấp chuột phải vào khu vực layout, lựa chọn Insert New Object, kích vào Sprite,
nhập tên Turtle và kích vào nút Insert. Khi con trỏ chuột hình dấu cộng
xuất hiện, kích vào bất cứ đâu trong layout để chọn vị trí ban đầu, và trong cửa
sổ chỉnh sửa hình ảnh xuất hiện tiếp theo với tên turtle.png.
Hình
ảnh con rùa được lưu trữ dưới dạng tệp PNG thay vì JPG bởi vì định dạng tệp PNG
có hỗ trợ trong suốt, còn JPG thì không; nếu hình ảnh được lưu trữ dưới dạng
JPG, thì hình ảnh con rùa sẽ xuất hiện trên một hình chữ nhật màu trắng.
Đóng cửa sổ chỉnh sửa hình ảnh, thay đổi kích cỡ và vị trí của con rùa
như mong muốn và thấy đổi thuộc tính Layer
thành Main. Cuối cùng, lặp lại quá
trình này và thêm một sprite sao biển, với tên là Starfish, sử dụng hình ảnh sao biển. Khi bạn hoàn thành, bạn sẽ được
màn hình như sau:
Trò chơi này sẽ khá ngắn nếu chỉ có một sao biển cho con rùa thu thập.
Do đó bạn sẽ tạo ra một số bản sao của srite sao biển mà bạn đã tạo ra trước
đây. Những bản sao này được gọi là các phiên bản của sprite sao biển. Mỗi phiên
bản của một đối tượng đều có những thiết lập giá trị thuộc tính của chính nó và
có thể được điều chỉnh độc lập với các phiên bản khác. Các phiên bản bổ sung được
tạo theo nhiều cách. Một cách trong đó là chọn một sprite bạn muốn sao chép, nhấn
Ctrl C để sao chép nó và nhấn Ctrl V để dán nó vào layout, biểu tượng con trỏ sẽ
thay đổi thành dấu cộng, cho phép bạn lựa chọn vị trí của phiên bản mới. Một
phương pháp thay thế (nhanh hơn) là lựa chọn sprite trên layout, nhấn phím
Ctrl, và kéo thả sprite được lựa chọn. Một phiên bản mới của sprite sẽ được tạo
ra trên phiên bản gốc, sau đó có thể kéo tới vị trí khác trên layout. Sử dụng một
trong hai phương pháp này, tạo ra một vài phiên bản của sao biển và đặt chúng
xung quanh màn hình. Thay đổi góc và kích cỡ của chúng để tạo ra sự khác biệt.
Một khi bạn đã hoàn tất, hãy lưu dự án của bạn lại.
Bạn
nên lưu dự án của bạn lại thường xuyên để tránh rủi ro mất dự án khi bị cắt điện
hay hỏng máy tính, làm lại rất là mệ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é
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é
