Bạn không cần vẽ hàng chục khung hình để nhân vật pixel art trông có sức sống. Trên khung vẽ 32×32, chỉ cần nâng cơ thể lên một pixel, làm bóng đổ dẹt hơn một chút và giữ tư thế cao nhất lâu hơn một nhịp là đã tạo được cảm giác hít thở.
Mục tiêu của bài này là hoàn thành một chuyển động chờ bốn khung hình lặp mượt. Kỹ thuật này dùng được cho sprite trong game, avatar, nhãn dán và GIF pixel art trên mạng xã hội.
Hoạt ảnh pixel art cần sự nhất quán hơn số lượng khung hình
Mọi khung hình phải có cùng kích thước khung vẽ, vị trí nhân vật, độ dày đường viền và bảng màu. Chỉ thay đổi bộ phận thực sự chuyển động. Ở kích thước nhỏ, một pixel là khoảng cách lớn; sai lệch nhỏ sẽ thành rung hình khi phát lặp.
Hãy chọn lưới và một điểm neo trước khi thêm chi tiết. Với nhân vật đứng, điểm neo thường ở giữa bàn chân; với nhân vật lơ lửng, dùng tâm của bóng đổ.
Thiết lập cho bài tập đầu tiên
- Khung vẽ: bắt đầu với 32×32; biểu tượng đơn giản có thể dùng 16×16.
- Bảng màu: giới hạn 4–6 màu cho viền, màu chính, bóng và điểm sáng.
- Phóng to: dùng tỉ lệ nguyên 2×, 3× hoặc 4× cùng phép nội suy điểm ảnh gần nhất để cạnh không bị nhòe.
- Chuyển động: viết một câu như “nhân vật thở nhẹ”. Đừng thêm nhảy, vẫy tay và chớp mắt cùng lúc.
Kế hoạch chuyển động chờ bốn khung hình
| Khung hình | Thay đổi | Phần giữ cố định |
|---|---|---|
| 1 | Tư thế giữa làm mốc | Tâm bàn chân và kích thước khung vẽ |
| 2 | Cơ thể lên một pixel, hơi kéo dài | Khoảng cách mắt và bảng màu |
| 3 | Giữ ngắn ở điểm cao nhất | Tâm bóng đổ |
| 4 | Hạ xuống và hơi nén lại | Trọng tâm không trôi sang hai bên |
Các khung hình không cần dài bằng nhau. Giữ điểm cao lâu hơn tạo cảm giác nhẹ; hạ nhanh hơn tạo độ nảy.
![]()
Bước 1: kiểm tra hình khối bằng một màu
Ẩn mắt, hoa văn và điểm sáng, chỉ nhìn đường bao. Thu hình về đúng kích thước hiển thị. Nếu vẫn nhận ra đầu, thân và chân, hình khối đã đủ rõ để chuyển động.
Nhân vật chất nhầy, robot hình hộp, nấm hoặc khuôn mặt tròn có tai là những chủ đề dễ bắt đầu. Để phụ kiện nhỏ đến khi chuyển động chính đã ổn.
Bước 2: nhân bản khung hình gốc
Nhân khung hình đầu ba lần rồi chỉ di chuyển pixel cần thiết. Vẽ lại từng khung hình dễ làm đổi chiều rộng đầu, khoảng cách mắt và độ dày viền.
Bật lớp mờ của khung hình trước nếu công cụ có hỗ trợ. Nếu không, chuyển nhanh giữa hai khung hình để phát hiện cạnh bị nhấp nháy hoặc lệch ngoài ý muốn.
Bước 3: khóa điểm neo
Khi thân người đi lên một pixel, bàn chân không nhất thiết phải đi theo. Chân đứng yên khiến chuyển động giống nhịp thở; nếu cả chân và bóng cùng trượt, nhân vật sẽ như đang lướt trên khung vẽ.
Sau mỗi lần sửa từng khung hình, kiểm tra tọa độ điểm neo. Đây là cách nhanh nhất để loại bỏ rung hình.
Bước 4: giữ nguyên bảng màu và đường viền
Dùng cùng một bộ màu ở mọi khung hình. Một màu mới chỉ xuất hiện trong một khung hình sẽ trông như tia chớp. Muốn ánh sáng chuyển động, hãy di chuyển những pixel sáng đã có.
Phóng lớn để kiểm tra viền. Đường một pixel không nên đột ngột thành hai pixel, trừ khi bạn cố ý thể hiện động tác ép hoặc kéo giãn.
Bước 5: chỉnh nhịp trong lúc xem trước
Phát chậm trước để thấy các cú nhảy giữa các khung hình, sau đó tăng tốc. Không có một mức FPS bắt buộc. Điều quan trọng là người xem đọc được động tác và khung hình cuối nối lại khung hình đầu mà không giật.
Hãy xem lại sau khi xuất, vì trình duyệt và nền tảng xã hội có thể phát GIF với nhịp hơi khác.
Bước 6: chỉ thêm một chuyển động phụ
Khi thân người đã ổn, chọn một chi tiết: chớp mắt, ngọn tóc trễ một khung hình, khăn quàng đung đưa, điểm sáng dịch chuyển hoặc bóng co giãn. Độ trễ một khung hình thường tạo cảm giác có trọng lượng.
Đừng thêm tất cả. Trên 32×32, quá nhiều thay đổi sẽ che mất chuyển động chính.
Lỗi thường gặp và cách sửa
- Nhân vật rung ngang: tọa độ bàn chân hoặc bóng thay đổi giữa các khung hình.
- Đường viền nhấp nháy: viền bị xóa nhầm hoặc độ dày không đều.
- Cơ thể như tan chảy: mọi bộ phận đều biến dạng, không còn vùng ổn định.
- Động tác quá nhanh: tư thế chính không được giữ đủ lâu.
- Phóng to bị mờ: hãy dùng phép nội suy điểm ảnh gần nhất và tỉ lệ nguyên.
- Điểm nối vòng lặp bị giật: khung hình thứ tư khác khung hình đầu quá nhiều.
Danh sách kiểm tra trước khi xuất GIF
- Xem ở kích thước 100% và kích thước phóng lớn.
- Phát ít nhất mười vòng, lần lượt nhìn chân, mắt và đường bao.
- Dùng GIF để chia sẻ, PNG để giữ từng khung hình sắc nét. Với game, sắp xếp PNG tuần tự hoặc bảng sprite trong công cụ chuyên dụng.
- Không dùng JPG làm file gốc vì nén ảnh tạo nhiễu quanh cạnh pixel.
Câu hỏi thường gặp
Người mới nên bắt đầu với bao nhiêu khung hình?
Hãy dùng 2–4 khung hình. Nhịp thở, chớp mắt và nảy nhẹ đều có thể đọc được. Nếu động tác chưa rõ, tăng độ khác biệt của tư thế chính trước khi thêm khung hình.
Nên chọn 16×16 hay 32×32?
32×32 đủ chỗ để giữ đặc điểm nhân vật nhưng vẫn nhỏ để luyện kiểm soát từng pixel. Dùng 16×16 khi muốn luyện hình khối tối giản hơn.
Hoạt ảnh pixel art chỉ dành cho trò chơi?
Không. Bạn có thể dùng cho ảnh đại diện, nhãn dán, trang trí trang web và GIF lặp. Bài này tập trung vào một vòng lặp dễ đọc; hướng chuyển động, vùng va chạm và bảng sprite là bước tiếp theo.
Tạo vòng lặp bốn khung hình đầu tiên
Vẽ nhỏ, dịch một pixel rồi xem trước ngay. Chu trình ngắn này giúp bạn thấy rung hình trước khi thêm nhiều chi tiết.
Bắt đầu vẽ với WigglyPaint