[Tạo 2D Platformer Game với Godot] Phần 3: Thiết kế nhân vật

Trong phần ba này thì chúng ta sẽ tiến hành việc thiết kế nhân vật để nó có thể di chuyển, animation cho nó.

Ở trong phần này thì nó cũng không khó lắm, mình sẽ giải thích chặt chẽ các đoạn code để bạn có thể hiểu nó một cách dễ dàng hơn.

Tilemap

Trước đó, ở bài trước mình đã hướng dẫn các bạn cách để có thể thiết kế level nhưng mà phần đó chúng ta chưa add CollisionShape vào cho tilemap.

Cho nên, bây giờ việc bạn cần làm là add nó vào nếu không thì con nhân vật của chúng ta sẽ bị rơi xuống vô cực bởi vì CollisionShape chưa được add vào.

[Tạo 2D Platformer Game với Godot] Phần 3: Thiết kế nhân vật 94

Đầu tiên, các bạn vào lại phần Tileset sau đó chọn cho mình là Collision.

[Tạo 2D Platformer Game với Godot] Phần 3: Thiết kế nhân vật 95

Sau khi chọn xong, các bạn nhấn vào 1 ô bên dưới.

[Tạo 2D Platformer Game với Godot] Phần 3: Thiết kế nhân vật 96

Sau đó nhấn vào ô vuông ( collisionshape hình vuông còn bên cạnh là collisionshape polygon).

[Tạo 2D Platformer Game với Godot] Phần 3: Thiết kế nhân vật 97

Sau đó ô vuông hiện xanh.

[Tạo 2D Platformer Game với Godot] Phần 3: Thiết kế nhân vật 98

Rồi nhấn qua ô bên cạnh hai lần bạn sẽ thấy ô mà chúng ta vừa chọn đã được fill collision shape.

Các bạn cứ tiếp tục là cho hết phần Region chúng ta đã chọn nhé.[Tạo 2D Platformer Game với Godot] Phần 3: Thiết kế nhân vật 99

Như mình đã fill xong đây, vì mình chỉ xài những region này nên mình cũng chỉ có fill từng này thôi chứ không fill hết vì nó mất thời gian + không sử dụng nữa nên rất là phí nha.

Nhân Vật

Về nhân vật, các bạn tải về ở link sau đây nha: 3 Character Sprite Sheets

Ở đây, mình sẽ sử dụng AnimatedSprite chứ không phải Spritesheet vì cái Art nhân vật này nó bị tách ra nên không sài SpriteSheet được.

Tải Xuống & Cài đặt

[Tạo 2D Platformer Game với Godot] Phần 3: Thiết kế nhân vật 100

Các bạn tải xuống sau đó vào thư mục Assets tạo cho mình một thư mục mới tên là NhanVat ( đây là nơi chứa art nhân vật).

[Tạo 2D Platformer Game với Godot] Phần 3: Thiết kế nhân vật 101

Sau đó thì các bạn copy hết file từ file zip vừa tải xuống vào trong folder nhân vật

[Tạo 2D Platformer Game với Godot] Phần 3: Thiết kế nhân vật 102

Sau khi các bạn đã làm xong trong Editor sẽ hiển thị như này.

Tạo nhân vật

Đến với phần quan trọng nhất.[Tạo 2D Platformer Game với Godot] Phần 3: Thiết kế nhân vật 103Đầu tiên, để tạo 1 nhân vật các bạn cần tạo cho mình 1 scene mới bằng cách nhấn vào nút trên ảnh.

[Tạo 2D Platformer Game với Godot] Phần 3: Thiết kế nhân vật 104

Ở đây mình không add nó vào hẳn một scene như ảnh trên vì làm như thế sẽ mất thời gian để làm lại.

Do đó, mình tạo hẳn ra 1 scene mới và có thể Instance( thêm scene đã tạo vào một scene khác)  nó vào các Scene khác cho lẹ.

[Tạo 2D Platformer Game với Godot] Phần 3: Thiết kế nhân vật 105

Các bạn thêm cho mình Node Gốc là Kinematicbody2D ( Node này là node mà Godot đã mặc định nó như là Node dùng để tạo nhân vật vì Node này có chứa các hàm giúp chúng ta di chuyển. Ngoài node này ra còn 2 loại Node Body khác là Rigidbody và StaticBody).

[Tạo 2D Platformer Game với Godot] Phần 3: Thiết kế nhân vật 106

Sau đó, mình đổi tên Node Gốc thành Player và add thêm 2 node AnimatedSprite ( Mình dùng nó thay Sprite là vì cái art mà mình tải nó có nhiều Animation và được chia ra thành nhiều ảnh cho nên mình sẽ dùng AnimatedSprite thay vì Sprite) , CollisionShape2D.

[Tạo 2D Platformer Game với Godot] Phần 3: Thiết kế nhân vật 107

Bạn nhấn vào AnimatedSprite bên bảng Inspector chọn [empty] -> New SpriteFrames
[Tạo 2D Platformer Game với Godot] Phần 3: Thiết kế nhân vật 108

Sau đó nhấn vào cá SpriteFrames vừa tạo.

[Tạo 2D Platformer Game với Godot] Phần 3: Thiết kế nhân vật 109

Sau đó tab AnimatedSprites sẽ hiện lên.

Bạn sẽ thấy cột Animations bên trái là danh sách các Animation.

Bên phải là các Frame của Animation.

[Tạo 2D Platformer Game với Godot] Phần 3: Thiết kế nhân vật 110

Mình sẽ đổi cái default thành dungyen bằng cách double click vào nó.

[Tạo 2D Platformer Game với Godot] Phần 3: Thiết kế nhân vật 111

Tiếp đó, mình sẽ chọn nút trên ảnh để add sprite vào.

[Tạo 2D Platformer Game với Godot] Phần 3: Thiết kế nhân vật 112

Ở đây, mình đang tạo Animation đứng yên cho nên mình sẽ tìm cái Animation phù hợp. Trong đây thì idle bằng đứng yên.

[Tạo 2D Platformer Game với Godot] Phần 3: Thiết kế nhân vật 113

Sau đó, thì 1 bảng mới sẽ hiện lên và mình sẽ edit nó hợp lý.

Bạn để ý ở trên bên trái có 2 dòng liền kề nhau là Horizon ( chiều ngang) và Vertical ( chiều dọc) . Bạn phải chỉnh sao cho hợp lý để chọn các frame.

[Tạo 2D Platformer Game với Godot] Phần 3: Thiết kế nhân vật 114

Ở đây, cái animation của mình có 4 frame. Chiều ngang thì nó có 4 ảnh cho nên Horizon là số 4, Chiều dọc thì chỉ có 1 cho nên Vertical sẽ là số 1
[Tạo 2D Platformer Game với Godot] Phần 3: Thiết kế nhân vật 115

Sau đó bạn chọn từng ô theo thứ tự từ trái sang phải vì nó tính thứ tự frame theo thứ tự bạn chọn. Sau đó nhấn Add Frame.

[Tạo 2D Platformer Game với Godot] Phần 3: Thiết kế nhân vật 116

[Tạo 2D Platformer Game với Godot] Phần 3: Thiết kế nhân vật 117

Đây sẽ là giao diện sau khi add.

[Tạo 2D Platformer Game với Godot] Phần 3: Thiết kế nhân vật 118

Sau đó các bạn add thêm các animation tương ứng như trên bảng cho mình.

Đây cũng là bài tập cho các bạn.

Ở đây nếu các bạn nào không biết chọn ảnh nào thì ở dưới đây mình sẽ nói luôn:

  • chay = run
  • chet = deah
  • nhay = jump
  • tancong = attack1

[Tạo 2D Platformer Game với Godot] Phần 3: Thiết kế nhân vật 119

Để chạy Animation các bạn có thể chọn Animation ở ô Animation và tick vào Playing để chạy.

[Tạo 2D Platformer Game với Godot] Phần 3: Thiết kế nhân vật 120

Nếu nhân vật của bạn mờ như ảnh thì các bạn cần Reimport 2D pixel lại nhé.

[Tạo 2D Platformer Game với Godot] Phần 3: Thiết kế nhân vật 121Sau khi Reimport nhân vật của chúng ta sẽ nét hơn.

Adblock test (Why?)


Xem Them Chi Tiet

Nhung Mon Do Cong Nghe Duoc Yeu Thich

Do Cong Nghe Phu Kien
Xem Them Chi Tiet

Phu nu phai dep dan ong moi yeu! Sam ngay bo vay dam sieu dep

Thanh xuan nhu mot tach trá Khong mua do hot phi hoai thanh xuan

0 nhận xét:

Đăng nhận xét