Search…

Tạo Animation với Unity

30/09/20203 min read
Hướng dẫn hiện thực animation trên Unity.

Animation là 1 yếu tố không thể thiếu được trong bất kỳ game nào. Animation giúp lập trình viên diễn tả hành động của các nhân vật chân thực và sống động hơn. Bài viết sẽ hướng dẫn cách tạo 1 animation đơn giản trong Unity.

Tài nguyên sử dụng

Bài viết hiện thực animation trên nền scrolling background.

Có thể download project Scrolling Background tại đây: STDIO_UnityScrollingBackground.

Ảnh phi thuyền sử dụng trong bài viết.

Setup môi trường làm việc

Sau khi download về, mở project bằng Unity. Chọn Scene STDIO_StarWar và chọn Open.

ss_1

Import file spaceship.png đã download ở trên vào thư mục Resources.

ss_2

Sử dụng Sprite Editor

File hình ảnh sử dụng trong bài viết bao gồm nhiều frame hình, hỗ trợ cho việc tạo animation.

Có thể tạo animation thủ công. Tuy nhiên Unity đã hỗ trợ công cụ tạo Animation khá hiệu quả và dễ sử dụng. Bài viết hướng dẫn sử dụng công cụ Sprite Editor.

Chọn file spaceship.png. Trong cửa sổ Inspector hiện ra các tuỳ chọn thao tác với file. Phần Sprite Mode sẽ chọn Multiple, nhấn vào nút Sprite Editor để mở ra cửa sổ Sprite Editor.

ss_3

Giao diện của Sprite Editor khá đơn giản và dễ thao tác. Chọn button Slice, ở mục Type chọn Grid để tạo các frame có kích thước bằng nhau. Điều chỉnh theo thông số đã thiết lập sẵn rồi nhấn vào button Slice phía dưới.

ss_4

Mỗi frame sẽ được bao phủ bởi 1 hình chữ nhật. Sau khi thực hiện các bước trên, click chọn Apply để hoàn tất.

ss_5

Ngoài tuỳ chọn Grid, Unity còn hỗ trợ cắt Sprite tự động bằng tuỳ chọn Automatic, hoặc có thể tự chia sprite bằng cách quét chọn vùng cần lấy.

Bên cạnh file resource có 1 dấu mũi tên. Click vào dấu mũi tên này sẽ hiện ra các frame vừa cắt xong bằng Sprite Editor.

ss_6

Animation

Sau khi thực hiện xong, tạo animation cho phi thuyền.

Nếu sử dụng phiên bản Unity từ 4.6 trở về trước, nhấn giữ phím Ctrl và chọn 4 frame: spaceship_0, spaceship_1, spaceship_2spaceship_3, sau đó kéo thả 4 frame này vào trong cửa sổ Hierarchy.

Cửa sổ Create New Animation hiện ra. Chọn đường dẫn để lưu trữ file animation để sử dụng sau này, đặt lại tên và nhấn chọn Save.

Trong bài viết tạo thêm 1 sub folder Animation đặt trong folder Assets sẵn có để tiện lưu trữ và quản lý. File animation đặt tên là idleShip.anim để thể hiện trạng thái “chờ” của phi thuyền.

ss_7

Đối với phiên bản Unity 5, Unity tự động tạo animation khi kéo thả các frame vào Hierarchy. Animation được tạo ra sẽ nằm cùng thư mục với spritesheet sử dụng.

Tới đây về cơ bản đã tạo xong 1 animation đơn giản cho phi thuyền. Việc còn lại là tuỳ chỉnh lại toạ độ của phi thuyền cho phù hợp. Thông số thiết lập sẵn như sau:

ss_8

Cuối cùng nhấn Play để xem thành quả đạt được sau bài viết.

ss_9
IO Stream

IO Stream Co., Ltd

30 Trinh Dinh Thao, Hoa Thanh ward, Tan Phu district, Ho Chi Minh city, Vietnam
+84 28 22 00 11 12
developer@iostream.co

383/1 Quang Trung, ward 10, Go Vap district, Ho Chi Minh city
Business license number: 0311563559 issued by the Department of Planning and Investment of Ho Chi Minh City on February 23, 2012

©IO Stream, 2013 - 2024