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:
Vậy là ở Phần 1 lập trình game với Unity mình đã giới thiệu sơ qua về Unity, các cài đặt, các thẻ cơ bản trong Unity cũng như hướng dẫn các bạn viết 1 chương trình di chuyển đối tượng đơn giản với Unity.
Ở Phần 2 lập trình game với Unity mình đã hướng dẫn các bạn tạo Animations [Hiệu ứng chuyển động cho nhân vật] cơ bản với 2 hiệu ứng đó là Walk_Animation [hiển thị lúc nhân vật di chuyển] và Idle_Animation [hiển thị lúc nhân vật đứng yên].
Chúng ta sẽ tiếp tục với Phần 3, mình sẽ hướng dẫn các bạn 2 kĩ thuật cơ bản và thường dùng trong lập trình game đó là Scaler và Scolling Background.
1. Scaler và Scrolling Background là gì ?
Khi chúng ta tạo background thì kích thước của background có thể không đúng với kích thước của maincamera dẫn tới hình ảnh background hiển thị không đầy đủ, bị mất đoạn, kĩ thuật scaler giúp backgroud scaler đúng bàng kích thước của maincamera sẽ giúp giải quyết vấn đề này.
Kĩ thuật scrolling background là kĩ thuật giúp tạo hiệu ứng chuyển động cho background, ở phần này mình sẽ làm cho background chuyển động đi xuống vô tận, giúp tạo cảm giác phi thuyền di chuyển lên [thực chất phi thuyền đứng yên, chỉ có back ground di chuyển xuống].
2. Thực hành
Để làm được điều này thì chúng ta bắt đầu làm như sau:
Đầu tiên chúng ta chọn GameObject -> 3D Object -> Quad .
Tiếp theo các bạn reset tọa độ của Quad vừa mới tạo bằng cách nhấn vào biểu tượng cài đặt và chọn Reset.
Ở phần Mesh Collider nhấn vào biểu tượng cài đặt chọn Remove Component, bởi vị Mesh Collider chỉ dành cho 3D và ở đây chúng ta làm trên nền 2D nên xóa nó đi.
Các bạn sửa lại các thông số của ảnh dùng làm Background như sau:
Tiếp theo vào thẻ Assets tại vùng trống R_Click -> Create -> Material , đặt lại tên là Background.
Chọn vào material vừa mới tạo, trong thẻ Inspector tại phần Shader chọn lại là Mobile -> Particels -> Alpha Blended.
Sau khi chọn xong sẽ có dạng thế này:
Tại ô Texture click vào Select và chọn cho mình tấm hình bạn sử dụng để làm background.
Tiếp theo chúng ta quay lại phần Squad đã tạo lúc nãy, trong thẻ Inspector tại phần Mesh Renderer -> Element 0 có mặc định là Default-Material, các bạn kéo thả Background[Material] vừa làm xong vào đó.
Background được tạo ra sẽ rất nhỏ, ở đây chúng ta sẽ xử lí bằng lập trình 1 chút để background đúng bằng kích thước của main camera, kĩ thuật này mình gọi là Scaler Background.
Trước khí Scacler thì chúng ta điều chỉnh kích thước main camera một chút để phù hợp, với màn hình dọc của game thì kích thước chuẩn thường là 400x800, chúng ta điểu chỉnh bằng cách vào thẻ Game và điều chỉnh như hình bên dưới:
Các bạn tạo 1 file C# Script, đặt lại tên và lập trình như sau [ở đây chúng ta chỉ sử dụng hàm Start thôi, vì chỉ khởi tạo background cho đúng kích thước của maincamera nên không cần sử dụng hàm Update]:
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
public class FullScreen : MonoBehaviour
{
// Start is called before the first frame update
void Start[]
{
float HeightCamera = Camera.main.orthographicSize * 2f; //lấy chiều rộng main camera
float WidthCamera = HeightCamera * Screen.width / Screen.height; //lấy chiều cao của main camera
transform.localScale = new Vector3[WidthCamera, HeightCamera, 0f]; //scale background-material đúng bằng với main camera
}
}Các bạn lưu lại và kéo thả vào Squad, nhấn play để chạy thử để xem kết quả.
Bây giờ để Scorlling Background chúng ta tạo file C# Script đặt lại tên và lập trình như sau:
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
public class ScrollingBG : MonoBehaviour
{
public float speed = 0.1f; //tốc độ scrolling
private Material mat; // khởi tạo một biến Material
private Vector2 offset = Vector2.zero; //khai báo 1 độ dời cho background
// Start is called before the first frame update
void Start[]
{
mat = GetComponent[].material; //khởi tạo material
offset = mat.GetTextureOffset["__MainTex"];
}
// Update is called once per frame
void Update[]
{
offset.y += speed * Time.deltaTime; // cho background di chuyển từ trên xuống nê ta lấy trục y [nếu muốn di chuyển sang ngang thì ta lấy trục x]
mat.SetTextureOffset["_MainTex", offset];
}
}
//mục đích 2 câu lệnh "mat.GetTextureOffset["__MainTex"]" và "mat.SetTextureOffset["_MainTex", offset]" là tạo sự lặp lại vô tận cho background scorlling di chuyển xuống.Sau khi lập trình xong Save lại và kéo vào Squad , nhấn Play để chạy thử các bạn sẽ thấy background di chuyển xuống vô tận tạo cảm giác chuyển động cho phi thuyền.
3. Kết
Phần này mình đã hướng dẫn các bạn 2 kĩ thuật cơ bản là scaler và scorlling background, các kĩ thuật này có thể có nhiều cách làm khác nhau, cách mình giới thiệu chỉ là một trong những cách cơ bản, các bạn có thể tìm hiểu thêm để tìm cách phù hợp với mình nhất, phần sau mình sẽ hướng dẫn các bạn xử lí va chạm, cụ thể là xử lí chạm biên, vấn đề xuất hiện ở mọi game.