Chương 3. Tạo trải nghiệm đa dạng cho người chơi với dạng game tương tự Flappy Bird
Được rồi,
trong chương này, chúng ta sẽ làm 1 trò chơi đầu tiên bằng Construct 2, chúng
ta sẽ sử dụng những thông tin về game design mà chúng ta lĩnh hội được ở chương
trước. Chúng ta sẽ cùng nhìn vào 1 trò chơi phổ biến, Flappy Bird, và cố gắng tạo ra 1 cái gì đó na ná vậy. Chúng ta sẽ
phân tích xem nên làm những gì:
- Thiết kế của Flappy Bird trông như thế nào?
- Làm thế nào để tạo ra một gameplay đầy cuốn hút?
- Làm sao để thêm vào những sửa đổi từ thiết kế ban đầu?
- Làm thế nào để thêm những bộ sưu tập?
Bài 1. Flappy Bird hoạt động như thế nào
Hãy nhìn
vào cách hoạt động của Flappy bird và làm thế nào để kết thúc với thiết kế của
nó. Trò chơi này thực sự đơn giản, mọi người điều khiển một con chim tự động
rơi xuống mặt đất, người chơi cần chạm vào màn hình để con chim bật lên phía
trên. Có những cái ống xuất hiện từ phía bên phải màn hình và 1 khoảng trống nhỏ
để con chim bay qua.
Mọi
thứ quá đơn giản, vậy tại sao nó lại phổ biến? Câu trả lời là thông qua cách điều
khiển đơn giản và hệ ngẫu nhiên. Chúng ta kiểm soát trò chơi chỉ với 1 ngón
tay, mọi thứ khác đều được xử lí bởi trò chơi. Nhân tố khác đó là hệ ngẫu nhiên.
1. Tìm hiểu về hệ ngẫu nhiên
Vậy hệ ngẫu nhiên là gì và nó khiến cho trải
nghiệm của Flappy bird trở nên hấp dẫn
như thế nào?
Hệ
ngẫu nhiên là kĩ thuật được sử dụng để tạo ra 1 đối tượng trò chơi ở 1 vị trí
ngẫu nhiên hoặc khoảng cách ngẫu nhiên, hoặc đối tượng của chính nó cũng có thể
là ngẫu nhiên.
Đây là những gì được sử dụng để tạo những cái ống
nước; có 1 khoảng cách ở 1 vị trí ngẫu nhiên giữa 2 ống nước khi chúng được tạo.
Tại sao điều này lại quan trọng? Nó tạo ra những trải nghiệm đầy thử thách như
thế nào? Đó là bởi vì những ống nước xuất hiện hoàn toàn ngẫu nhiên. Flappy bird tạo ra những cấp độ khác
nhau tại mọi thời điểm mà trò chơi hoạt động, không bao giờ lặp lại. Nếu khoảng
trống được tạo ra ở 1 vị trí cố định, người chơi có thể ghi nhớ và vượt qua dễ
dàng, từ đó làm giảm bớt sự ham muốn “phá đảo” của họ.
2. Thiết kế game Flappy Bird
Bây giờ, để hiểu rõ hơn về hoạt động bên trong của
Flappy bird, chúng tôi sẽ cố diễn giải bằng những gì đã học được ở Chương 2: Viết game design đầu tiên của bạn.
Điều này không phản ánh cách của Nguyễn Hà Đông tạo ra Flappy Bird. Tài liệu
game design sau đây được viết theo cách của tôi để chương này trở nên dễ hiểu
hơn:
- Elevator pitch (bản tóm tắt): Đây là 1 trò chơi bạn phải giúp con chim nhỏ bay qua các khoảng trống của chướng ngại vật (ống nước).
- Chủ đề: one-tap game (1 lần nhấn).
- Genre: casual game (thể loại game phổ thông, dễ chơi).
- Thách thức: đưa con chim bay qa ống nước.
- Phần thưởng: điểm số.
- Điều kiện thắng: không có điều kiện thắng, đây là 1 trò chơi bất tận.
- Điều kiện thua: con chim rơi xuống đất hoặc chạm vào ống nước.
- Dynamics: Bao gồm những điều sau:
- Con chim tự động rơi xuống nếu người chơi không nhấn vào màn hình.
- Nếu người chơi chạm vào màn hình con chim sẽ bay lên vài bay rồi lại rơi xuống.
- Hai ống nước sẽ xuất hiện định kì từ phía bên phải, các khoảng trống sẽ được sắp xếp ngẫu nhiên.
- Gameplay: trình tự như sau:
- Trừ khi người chơi chạm vào màn hình, con chim sẽ rơi xuống.
- Chừng nào con chim còn bay thì trò chơi vẫn sẽ tạo ra các ống nước.
- Nếu con chim rơi xuống đất hoặc chạm vào ống nước, người chơi sẽ thua.
Đây là thiết kế của trò chơi, chúng ta sẽ theo
thiết kế này để tạo ra một bản sao của Flappy
Bird.
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. Tạo game Tappy plane
Chúng ta sẽ làm một trò chơi tương tự Flappy
bird có tên là Tappy plane, nhưng sẽ có sự khác biệt. Điều này là do trọng tâm của
chương này không phải là sao chép nguyên si Flappy bird mà là tìm hiểu các kĩ
thuật trong trò chơi. Tôi sẽ hướng dẫn bạn làm từng bước trong việc làm nó với
C2, đầu tiên là hệ ngẫu nhiên.
1. Thêm layer
Đầu tiên,
chúng ta cần chuẩn bị asset (hành trang) của trò chơi. Asset bao gồm: sprite,
âm nhạc, âm thanh, … mà chúng ta sử dụng chúng để tạo ra trò chơi. Về cơ bản,
các bạn có thể sử dụng bất kì asset nào mà các bạn muốn, hoặc bạn có thể sử dụng
asset của Tappy plane bằng cách download ở phần Learning Construct 2 mà tôi đã cung cấp.
Khởi động
C2 và tạo một new empty project như
tôi đã nói ở chương 1. Điều đầu tiên tôi làm đó là tạo ra 1 project mới và thiết
lập các layer mà tôi sử dụng trong trò chơi. Điều này rất quan trọng bởi vì nếu
bạn tạo những object mới trên 1 layer, bạn
cần phải tạo layer đó đầu tiên trước khi thực hiện những event để tạo những
object. Chúng ta sẽ tạo tổng cộng 5 layer, đó là:
- HUD: viết tắt của Head up display; đây là nơi chúng ta đặt giao diện người dùng.
- Collectibles: Đây là nơi để tiền xu hoặc các vật phẩm khác.
- Main: Đây là nơi mà nhân vật trong trò chơi được tạo ra mà người chơi điều khiển được tạo.
- Obstacles: các chướng ngại vật.
- Background: hình nền của trò chơi.
Các layer sẽ
trông giống như thế này:
Bây giờ chúng ta đã có nhiều hơn 1 layer. Tôi sẽ
nói với bạn về active layer. Một active layer là layer được chọn cuối cùng trên
thanh Layer; nếu bạn thêm 1 object mới
vào layout, nó sẽ được thêm vào active layer trước khi bạn di chuyển nó vào
layer khác. Nó cũng là layer với các thuộc tính được hiển thị trên thanh Properties.
Trong
đồ họa máy tính, 1 sprite là 1 hình ảnh 2 chiều được hội nhập vào 1 cảnh lớn
hơn. Hình ảnh này có thể di chuyển trên màn hình và thao tác như một thực thể
đơn lẻ.
Hãy nhớ rằng nếu bạn thêm một đối tượng mới, ví
dụ, một sprite, vào 1 active layer bị khóa thì object này sẽ tự động bị khóa
ngay khi thêm vào. Bạn sẽ không thể di chuyển hay thay đổi kích cỡ của nó trừ
khi bạn di chuyển nó đến 1 layer đã mở khóa. Bạn có thể xem layer nào là active
layer ở góc cuối bên phải cửa sổ C2.
2. Thêm sprite object
Thay đổi active layer sang Main bằng cách kích vào main layer ở thanh Layer, và sau đó chèn 1 sprite object mới. Thay đổi tên của object bằng bất cứ gì bạn muốn. Mặc dù ta có thể thay đổi sau này nhưng tốt hơn hết ta nên đổi ngay từ bây giờ để sau này không bị nhầm lẫn. Ở đây chúng ta sẽ đặt tên nó là bluePlane.
Nếu
một object mới được thêm vào mà cùng tên với 1 object cũ, C2 sẽ tự động đổi tên
nó. Vì thế, bạn nên đổi tên object trước khi thêm nó.
Sau khi
thêm sprite object, bạn sẽ được trình 1 pop-up chỉnh sửa hình ảnh. Về cơ bản, chức năng của nó là thêm hình ảnh
tới 1 sprite, nhưng nó có 1 chút phức tạp để hiểu, chính vì vậy tôi không giải
thích nó ở chương 1. Bây giờ tôi sẽ giải thích chi tiết về nó.
Có 4 cửa sổ
được bật lên ở đây:
- Edit image (chỉnh sửa hình ảnh).
- Animations (hình động).
- Animation frames (khung hình động).
- The color palette / image points window (cửa sổ bảng màu và điểm ảnh).
Ảnh chụp dưới đây là cửa sổ chỉnh sửa hình ảnh, bạn có thể thực hiện chỉnh sửa hình ảnh cơ bản ở đây, như vẽ, xóa, tô màu hoặc bạn có thể tải hình ảnh từ 1 tập tin. Bạn cũng có thể đặt các điểm ảnh và các đa giác va chạm cho sprite ở đây.
Hình tiếp theo là cửa sổ ảnh động, tất cả sprite
được chèn vào 1 hình động ngay cả khi nó chỉ là 1 khung. Bạn có thể thêm những
hình động mới bằng cách nhấp chuột phải vào cửa sổ này.
Cửa sổ
khung hình động sẽ hiển thị sprite ở mỗi khung cho hình động được lựa chọn. Đây
là nơi để thêm nhiều sprite nếu hình động của bạn có nhiều hơn 1 khung. Bạn có
thể thêm các khung riêng lẻ hoặc từ 1 trang sprite.
Cửa sổ pop-up cuối cùng đó là cửa sổ bảng màu/điểm ảnh. Hai cửa sổ này hiển thị dựa trên công cụ bạn nhấp vào ở bên trái cửa sổ chỉnh sửa hình ảnh. Nếu bạn kích vào công cụ eraser (tẩy xóa), cửa sổ này sẽ không hiển thị. Cửa sổ bảng màu rất dễ hiểu, nó cho phép bạn chọn 1 màu để vẽ hoặc đổ màu. Những gì cần giải thích là ở cửa sổ điểm ảnh, trước hết, chúng ta hãy thêm 1 hình ảnh. Hãy chọn hình ảnh máy bay màu xanh trong tệp asset mà chúng ta đã tải từ trước, tệp Tappy plane.
Nhấp vào biểu tượng như hình ảnh trên để chọn
hình ảnh từ 1 tệp. Chọn hình ảnh planeBlue1.png từ tệp asset đã tải về. Bây giờ tôi sẽ giải thích điểm ảnh và các đa giác va chạm.
3. Sử dụng điểm ảnh
Vậy những điểm ảnh là gì? Điểm ảnh là các vị trí trong 1 sprite có thể truy cập từ mã. Có 2 loại điểm ảnh: điểm gốc và điểm ảnh. Gốc chính là điểm trung tâm của sprite, đó là nơi sprite của bạn được đặt khi bạn đặt nó trong trò chơi, thường là điểm giữa của sprite. Trong khi đó, điểm ảnh là các vị trí trong sprite có thể sử dụng và thao tác từ mã, thường là được sử dụng khi bạn muốn tạo ra 1 cái gì đó ở 1 vị trí nhất định từ sprite, ví dụ, 1 sprite phi thuyền có thể bắn laze.
Để thêm/chỉnh sửa điểm ảnh, kích vào công cụ điểm ảnh ở bên tay trái của sổ chỉnh sửa hình ảnh:
Kích vào
nút này sẽ hiển thị cửa sổ điểm ảnh. Bạn có thể thêm hoặc xóa các điểm ảnh hay
thay đổi vị trí các điểm ảnh hiện có.
Có 2 điều cần nhớ:
- Mỗi khung ảnh phải có 1 điểm gốc, bạn không thể xóa hay thêm điểm gốc.
- Các điểm ảnh cho mỗi khung ảnh bạn tách ra, có nghĩa là nếu bạn đã thêm 1 điểm ảnh trong khung 1 của hình động, nó sẽ không tự thêm vào khung 2, khung 3 … nhưng bạn có thể nhấp chuột phải vào điểm ảnh và copy nó vào các khung trong ảnh động.
Còn 1 điều cuối cùng mà tôi muốn nhắc đến trước khi kết thúc phần này đó là đa giác va chạm. Đa giác va chạm là tập hợp các điểm trong sprite tạo ra khu vực va chạm. Nó đại diện cho kích cỡ của 1 object (cái này hơi khó hình dung, trong lúc thực hành sẽ hiểu rõ). Những đa giác va chạm được tạo tự động khi bạn tải hình ảnh từ 1 tập tin.
Các ô vuông màu đỏ là đa giác va chạm, và vùng màu xanh ở giữa là vùng va chạm. Bạn có thể di chuyển mỗi đa giác để tùy chỉnh vùng va chạm, điều này sẽ làm cho sự tương tác giữa các vật thể trong game trở nên chính xác hơn.
Hãy nhớ rằng cũng giống như điểm ảnh, các đa giác va chạm ở trong mỗi khung hình động được tách ra khác nhau, cho nên nếu bạn chỉnh sửa đa giác va chạm trong 1 khung, hãy chỉnh sửa tất cả các khung còn lại. Giống như điểm ảnh, bạn có thể kích chuột phải, chọn các đa giác va chạm và sao chép nó cho toàn bộ khung hình động.
Đó là tất cả
về việc thêm một sprite object vào một
layout. Nó cần giải thích một cách kĩ
lưỡng vì nó vô cùng phức tạp, các object khác không phức tạp như thế. Được rồi,
giờ hãy đóng cửa sổ chỉnh hình ảnh lại bằng nút X và thêm object của bạn vào layout.
Tiếp tục lặp lại việc thêm một sprite, bây giờ ta sẽ thêm một background cho trò chơi. Làm tương tự như khi thêm máy bay. Nháy đúp chuột vào khu vực màu xám, chọn Sprite, kích vào nút Insert. Mở hình ảnh background.png trong tệp hình ảnh mà tôi cung cấp. Nhớ chuyển layer của nó sang background.
Tiếp tục lặp lại việc thêm một sprite, bây giờ ta sẽ thêm một background cho trò chơi. Làm tương tự như khi thêm máy bay. Nháy đúp chuột vào khu vực màu xám, chọn Sprite, kích vào nút Insert. Mở hình ảnh background.png trong tệp hình ảnh mà tôi cung cấp. Nhớ chuyển layer của nó sang background.
Thay đổi active layer sang Obstacles, vì chúng ta sẽ thêm đất và đá như những chướng ngại vật.
Mặt đất cũng được coi là chướng ngại vật vì nếu va chạm với nó thì người chơi sẽ
thua.
Như các bạn thấy, có 1 khoảng trống nhỏ giữa các sprite và các đường gạch nối, khoảng cách này chính là biên giới của màn hình trò chơi. Để làm cho các sprite và đường gạch nối phù hợp với biên giới, chúng ta có thể tạo ra bản sao của các sprite để đưa vào ngay bên cạnh các sprite đang tồn tại. Một bản sao của các object đang tồn tại được gọi là 1 phiên bản. Trên thực tế, ngay cả bản gốc cũng được gọi là một phiên bản của object, chính vì vậy mà object gốc chính là phiên bản đầu tiên, object thứ hai (hay bản copy đầu tiên) được gọi là phiên bản thứ 2,…
Để sao chép 1 object, nhấn giữ chuột trái và kéo object đó, bạn sẽ tự động tạo ra 1 bản sao của object đó.
Sau khi bạn tạo 1 bản copy, đặt nó bên cạnh bản đầu tiên để lấp đầy khoảng trống trong màn hình trò chơi. Bạn sẽ thấy hầu hết bản thứ hai sẽ nằm ngoài cửa sổ trò chơi. Layout của bạn trông sẽ như thế này:
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é
