Hoạt hình slime nảy bằng Timeline
Tạo 4 tư thế nén – giãn cho slime, dựng hoạt hình khung hình trong bảng Timeline, xuất GIF xem thử và ghép sprite sheet 512 × 128 để dùng trong Unity.
Photoshop hiển thị tiếng Anh. Từ có gạch chân chấm là thuật ngữ trên giao diện — chạm để xem nghĩa, hoặc tra Từ điển Anh–Việt.
Tải về rồi mở bằng Photoshop: (Ctrl+O).
- Slime xanh 128 × 128 px, nền trong suốt PNG · 7 KB
Trước khi đưa hoạt ảnh vào game, họa sĩ thường xem thử chuyển động ngay trong Photoshop. Bảng Timeline (Dòng thời gian) (Dòng thời gian) ở chế độ Frame Animation biến mỗi layer thành một khung hình, cho bạn chỉnh thời gian, phát thử và xuất GIF. Sau đó, cùng những layer đó bạn ghép thành sprite sheet cho Unity.
Mục tiêu
- Tạo 4 tư thế theo nguyên lý squash and stretch (nén và giãn): nghỉ, nén, nhảy, giãn.
- Dùng Make Frames From Layers, đặt thời gian 0,1 giây và lặp Forever.
- Xuất GIF bằng Save for Web (Legacy) và ghép sprite sheet 512 × 128 px (4 khung 128 × 128).
Chuẩn bị
Tải p2-slime-nay.png và mở ra. Đặt tên layer là 1 - Idle. Slime đứng sát đáy canvas, phía trên còn trống để nhảy lên.
Các bước thực hiện
- Nhấn Ctrl+J, đặt tên
2 - Squash. Ctrl+T, trên Options bar (Thanh tùy chọn) bấm ô giữa cạnh dưới của biểu tượng Reference Point (9 ô vuông), nhập W 125%, H 75%, Enter. Slime bè ra, đáy vẫn chạm đất. - Chọn lại
1 - Idle, Ctrl+J, đặt tên3 - Stretch. Ctrl+T, Reference Point giữa cạnh dưới, W 85%, H 120%, Enter. Với Move Tool (Công cụ Di chuyển) V nhấn phím mũi tên lên 6 lần (mỗi lần 1 px) – lúc vừa bật khỏi mặt đất, thân dài ra. - Nhân bản
1 - Idlelần nữa, đặt tên4 - Jump. Giữ Shift nhấn phím mũi tên lên 2 lần (mỗi lần 10 px) rồi nhấn mũi tên lên thêm 4 lần – slime bay lên 24 px. Ctrl+T thu W 90%, H 110%. - Kiểm tra thứ tự trong bảng Layers từ dưới lên:
1 - Idle,2 - Squash,3 - Stretch,4 - Jump(chuyển động: nghỉ → nén → giãn bật lên → trên không). - Mở . Bấm mũi tên cạnh nút giữa bảng, chọn Create Frame Animation, rồi bấm nút đó.
- Bấm menu ☰ ở góc trên phải bảng Timeline, chọn Make Frames From Layers. Mỗi layer thành một khung. Nếu khung đầu tiên hiện tất cả slime chồng lên nhau, chọn nó và bấm thùng rác để xóa.
- Chọn khung đầu, giữ Shift nhấp khung cuối để chọn hết. Nhấp vào thời gian dưới một khung, chọn 0.1 giây. Ô lặp ở góc dưới trái chọn Forever.
- Nhấn Space hoặc nút Play để xem thử. Muốn slime "tiếp đất" mềm hơn, nhân bản khung
2 - Squashkéo xuống cuối dãy. - Xuất GIF: (Alt+Shift+Ctrl+S), chọn định dạng GIF, Colors 128, tích Transparency (Độ trong suốt), Looping Options Forever, bấm Save.
- Ghép sprite sheet: lưu PSD, rồi trong menu ☰ của Timeline chọn Delete Animation. : Width 512 px, bấm ô neo giữa bên trái, OK.
- Bật con mắt cả 4 layer. Chọn
2 - Squash, Ctrl+T, bấm biểu tượng tam giác Use relative positioning giữa ô X và Y, gõ X = 128 px, Enter. Tương tự3 - StretchX = 256 px,4 - JumpX = 384 px. - Xuất PNG 512 × 128 có Transparency.
Kết quả mong đợi
File GIF slime nảy liên tục, nhịp nhàng. Sprite sheet 512 × 128 có 4 khung đều nhau, mỗi slime nằm gọn trong ô 128 × 128 của mình, nền trong suốt.
Mẹo & trick học nhanh
Chọn hai khung liền nhau, bấm nút Tween (biểu tượng các ô chồng nhau) để Photoshop tự thêm khung chuyển tiếp vị trí và độ mờ.
Cho khung nén giữ lâu hơn (0.15 giây) và khung trên không ngắn hơn (0.05 giây) – chuyển động sẽ có "lực" hơn hẳn.
Chọn nhiều khung (giữ Shift) rồi nhấp vào thời gian dưới một khung bất kỳ để đổi cho tất cả cùng lúc.