Sprite & Animation

Sprite là một hình 2D dùng trong game. Khi xếp nhiều khung hình (frame) của cùng một chuyển động lên một tấm ảnh, ta có sprite sheet. Engine sẽ cắt tấm ảnh thành từng ô và phát lần lượt để tạo chuyển động.

Quy tắc vàng của sprite sheet

1. Kích thước frame cố định

Mọi frame phải có cùng kích thước, ví dụ 64 × 64 px. Sheet 4 frame idle xếp ngang sẽ là 256 × 64 px. Nếu một frame rộng hơn các frame khác, engine sẽ cắt lệch và nhân vật bị "giật".

2. Pivot và baseline nhất quán

Pivot (Điểm neo) là điểm neo của sprite, thường đặt ở giữa hai bàn chân. Baseline là đường mặt đất. Ở mọi frame, chân nhân vật phải chạm đúng cùng một đường baseline, và thân phải nằm quanh cùng một trục dọc. Nếu không, nhân vật sẽ trôi lên xuống hoặc trượt ngang khi chạy animation.

3. Chừa khoảng trống

Để lại 2–4 px lề trong mỗi ô để tránh phần tóc hay vũ khí bị cắt, và tránh màu frame bên cạnh "lem" sang khi engine lọc ảnh.

Thực hành: animation idle 4 frame

1. Tạo file 64 × 64 px, nền Transparent (Ctrl+N). Bật lưới: EditChỉnh sửa›PreferencesTùy chọn cài đặt›Guides, Grid & Slices đặt Gridline every 64 px, rồi Ctrl+' để hiện lưới. Kẻ một guide ngang làm baseline ở y = 60.
2. Vẽ nhân vật ở tư thế đứng trên layer idle_01. Nhân đôi bằng Ctrl+J ba lần, đặt tên idle_02 đến idle_04.
3. Chỉnh từng layer: frame 2 hạ thân xuống 1 px (hít vào), frame 3 hạ 2 px, frame 4 hạ 1 px. Chân giữ nguyên trên baseline.
4. Mở WindowCửa sổ›TimelineDòng thời gian, bấm mũi tên và chọn Create Frame Animation.
5. Trong menu của panel Timeline (Dòng thời gian) chọn Make Frames From Layers. Xóa frame thừa (nếu layer nền bị tính là frame).
6. Đặt thời gian mỗi frame khoảng 0.15–0.2 giây, vòng lặp Forever, bấm Play (Space) để xem.

Onion skin – nhìn xuyên frame

Onion skin hiển thị mờ frame trước và sau để bạn so vị trí. Trong Photoshop, tính năng này chỉ có ở chế độ Video Timeline: vào menu panel Timeline, chọn Enable Onion Skins và chỉnh trong Onion Skin (Giấy can) Settings. Ở chế độ Frame Animation, bạn có thể giả lập bằng cách bật layer frame trước với Opacity (Độ mờ đục) 20–30% (phím 2 hoặc 3 khi đang chọn Move Tool (Công cụ Di chuyển)) rồi tắt đi khi xong.

Xem trước bằng GIF

Để gửi cho bạn bè hay đưa lên portfolio, xuất GIF bằng FileTệp›Export›Save for Web (Legacy) (Alt+Shift+Ctrl+S). Chọn định dạng GIF, Looping Options là Forever, bật Transparency (Độ trong suốt) nếu muốn nền trong suốt. Với sprite nhỏ, hãy đặt Image Size (Kích thước ảnh) 400% và Quality Nearest Neighbor (Điểm lân cận) để GIF to rõ, không mờ.

Ghép thành sprite sheet

1. ImageHình ảnh›Canvas SizeKích thước khung vẽ (Alt+Ctrl+C): đổi Width thành 256 px, Anchor ở ô bên trái.
2. Chọn Move Tool (V), di chuyển layer idle_02 sang phải đúng 64 px: giữ Shift và nhấn phím mũi tên phải (mỗi lần 10 px) kết hợp mũi tên thường (1 px). Làm tương tự cho frame 3 (128 px) và 4 (192 px).
3. Bật lưới để kiểm tra mỗi frame nằm gọn trong ô 64 × 64, chân chạm cùng baseline.
4. Xuất PNG trong suốt bằng FileTệp›Export›Quick Export as PNGXuất nhanh PNG.

Về trimming: ImageHình ảnh›TrimCắt bỏ viền thừa (Based on Transparent Pixels) rất hữu ích cho icon hay vật thể đơn lẻ, nhưng với sprite sheet thì chỉ dùng khi bạn chắc chắn kích thước sau cùng vẫn chia hết cho frame.