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.
Import file spaceship.png đã download ở trên vào thư mục Resources.
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.
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.
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.
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.
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_2
và spaceship_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.
Đố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:
Cuối cùng nhấn Play để xem thành quả đạt được sau bài viết.