Cách biến bảng sprite thành GIF lặp sạch

Sheet đầy các tư thế chưa phải hoạt ảnh. Các ô phải được cắt đúng kích thước, phát đúng thứ tự và đặt thời gian để vòng lặp nối tự nhiên. GIF thêm một ràng buộc nữa: nó không thể giữ toàn bộ chi tiết màu và độ trong suốt của các PNG gốc.

Kiểm tra lưới trước khi tải

Với bảng 256 × 128 có bốn cột hai hàng, mỗi ô 64 × 64. ImageMint đọc trái sang phải rồi trên xuống. Nếu có đệm, ô không đều hoặc hàng cuối trống, cắt hàng cột trực tiếp có thể gồm phần ô bên cạnh hoặc tư thế trống. Cắt trước bằng Cắt sprite sheet và dùng tùy chọn các ảnh riêng thay thế.

Cho mỗi tư thế cùng canvas và neo. Nhân vật đi không nên nhích một pixel lên vì một khung cắt sát hơn. Căn sai thấy như nhảy trong xem trước; đổi tốc độ không sửa được.

Tám tư thế đi bộ của nhà thám hiểm pixel art khăn đỏ sắp trong bảng, dẫn tới hoạt ảnh lặp.
Chuỗi tám tư thế được minh họa. Đọc các ô theo thứ tự và kiểm tra tư thế cuối có thể chuyển về tư thế đầu; hình này giải thích quy trình chứ không phải atlas có thể tải xuống để dùng. Mở ảnh kích thước đầy đủ

Tạo và thử vòng lặp tám khung

  1. Chọn Lựa chọn B cho một sheet gồm các ô bằng nhau. Nhập hai hàng và bốn cột trước khi nạp. Nếu bạn đã có tám PNG đánh số, hãy dùng Lựa chọn A thay thế.
  2. Mở dải Thứ tự khung và nhấp xem cả tám tư thế. Dùng điều khiển mũi tên để chuyển tư thế đặt sai lên trước hoặc xuống sau. Khung cuối phải nối tự nhiên về khung đầu; tránh lặp lại tư thế đầu ở cuối trừ khi bạn chủ ý muốn giữ tư thế.
  3. Bắt đầu thử ở 8 FPS. Tám khung tại 8 FPS tạo vòng một giây; tại 16 FPS, cùng hình hoàn thành trong nửa giây. Đánh giá chân và trọng tâm nhân vật, không coi một FPS là đúng cho mọi trường hợp.
  4. Dùng Lặp cho idle/walk. Tắt cho hiệu ứng một lần như trúng đòn. Chỉ xuất khi preview đúng thứ tự/nhịp.

Biết GIF thay gì

GIF có bảng màu giới hạn và trong suốt gần như bật/tắt, còn PNG/WebP giữ cạnh bán trong suốt mượt hơn. Bóng nhỏ hoặc khử răng cưa mềm có thể gắt sau xuất. Rõ nhất với sprite có phát sáng, khói trong mờ hoặc dải màu tinh tế. So GIF tải với xem trước PNG trên nền sáng và tối.

Bộ xuất dùng cùng độ trễ cho mọi khung theo FPS, làm tròn 10 ms. Không lưu thời gian giữ riêng một tư thế đặc biệt. Muốn dừng lâu, cố ý thêm khung trùng hoặc sửa thời gian từng khung bằng công cụ hoạt ảnh chuyên dụng sau. Giữ ảnh gốc nếu cần tài nguyên game không mất dữ liệu.

Triệu chứngNguyên nhân có thểKiểm tra tiếp
Nhân vật nhảy lên xuốngCanvas hoặc neo khung không nhất quánCăn chỉnh khung nguồn trước khi xuất.
Các phần của hai tư thế trong một ôSai số hàng/cột hoặc sheet có đệmKiểm tra kích thước sheet và cắt riêng.
Vòng khựng ở cuốiTư thế cuối không chuyển được sang đầuSắp lại hoặc bỏ tư thế điểm cuối dư.
Cạnh trông thôGiới hạn màu/trong suốt GIFGiữ PNG cho tài nguyên sản xuất.

Xuất GIF bị giới hạn ở 1024 pixel mỗi cạnh và tổng 20 triệu pixel khung. Nếu sheet vốn hợp lệ vượt mức đó, hãy thu nhỏ hoặc xuất ít khung hơn. Bản xem trước hoạt ảnh vẫn giúp chẩn đoán thời gian trước khi bạn chọn bản xuất nhỏ hơn.

Thử căn chỉnh bằng điểm tham chiếu cố định

Trước khi xuất, chọn điểm phải ổn định: chân đặt đất trong hoạt ảnh đứng yên, tâm biểu tượng xoay hoặc tay cầm vật vung. Duyệt ảnh thu nhỏ và so điểm đó với ranh giới khung. Nếu tải ảnh khác kích thước, xuất GIF căn giữa trong canvas lớn nhất, không căn chân hoặc tay cầm đã chọn. Đặt các vùng cắt nhỏ lên canvas chung trước khi nhập.

Với đi bộ, phân biệt chuyển động cơ thể có chủ ý với lỗi cắt. Đầu lên xuống trong khi chân đặt sàn vẫn ổn. Di chuyển mọi tư thế cho cạnh trên khớp sẽ xóa khác biệt và tạo chân trượt. Dùng đường cơ sở dự định, không phải khung bao sát nhất.

Kiểm tra vòng lặp đã tải xuống, không chỉ bản xem trước trong trình duyệt

Vòng lặp tám khung ở 8 FPS xem trước với 125 ms mỗi tư thế. Công cụ xuất GIF làm tròn thành 130 ms, khiến vòng trong tệp dài 1,04 giây. Ở 16 FPS nó ghi 60 ms, khiến vòng dài 0,48 giây. Khác biệt này có thể quan trọng khi so sánh với nhạc hoặc hiệu ứng có thời gian khác. GIF không phải tệp gốc định thời chính xác.

  1. Mở lại GIF và xem nhiều vòng hoàn chỉnh. Chuyển giật từ cuối về đầu dễ thấy hơn sau khi lặp.
  2. Kiểm tra cùng đầu ra trên nền sáng và tối, đặc biệt quanh cạnh bán trong suốt.
  3. Giữ bảng gốc, cài đặt hàng/cột và FPS trong ghi chú dự án. GIF riêng không phải dự án hoạt ảnh chỉnh được.
Sẵn sàng chia sẻ: số khung đúng, điểm neo ổn định, ranh giới vòng lặp có chủ ý, mép GIF chấp nhận được và bản nguồn không mất dữ liệu đã lưu. Nếu đích là game engine, hãy dùng các khung gốc thay vì GIF.

Thử quy trình

Tải bảng ô đều hoặc khung riêng, sắp thứ tự, xem thời gian và tải GIF động.

Xem trước khung và xuất GIF →