Sprite Sheet Sang GIF

Thả một sprite sheet vào và phát nó dưới dạng GIF động — chọn khung hình, tốc độ và tỉ lệ phóng to, rồi tải về.

Thả một sprite sheet, hoặc một bộ ảnh khung hình, hoặc bấm để chọn file

PNGWEBPGIFBMPJPEG

Thả nhiều ảnh cùng lúc thì mỗi ảnh là một khung hình, xếp theo tên file: walk1, walk2, walk10.

Công Cụ Này Làm Gì

Thả một sprite sheet vào và nó sẽ phát lại dưới dạng GIF động. Công cụ dùng lại đúng phần nhận diện lưới, chọn hàng và khoảng frame, cùng các nút điều khiển phát lại đã dùng để cắt frame — bạn chọn frame muốn dùng, đặt tốc độ khung hình và tỉ lệ phóng to, chọn cách xử lý nền, rồi tải về một file GIF lặp vô hạn duy nhất.

Vì Sao Tốc Độ Không Chính Xác Tuyệt Đối

GIF không lưu độ trễ theo mili-giây; nó lưu theo số nguyên bước một phần trăm giây cho mỗi frame, và bộ mã hoá không bao giờ dùng bước ngắn hơn hai phần trăm giây — bước ngắn hơn rất dễ bị trình phát hiểu nhầm thành bước dài gấp mười lần, phản tác dụng hoàn toàn. Phần lớn tốc độ khung hình mà game hay ứng dụng thực tế hay dùng — 24, 30, 60 — cũng không rơi đúng vào bội số của đơn vị đó, nên bộ mã hoá phải làm tròn về mức gần nhất có thể biểu diễn được. Chênh lệch này thường nhỏ, nhưng ở tốc độ cao thì không còn nhỏ nữa: 60 fps làm tròn về bước 2, tức phát ra khoảng 50 fps thay vì 60, và trần 50 fps này áp dụng cho mọi tốc độ cao hơn nữa. Bất cứ khi nào tốc độ đã làm tròn khác với tốc độ yêu cầu, tốc độ thực tế sẽ được hiển thị ngay bên cạnh, để sự khác biệt được nói rõ chứ không bị giấu đi.

Trong Suốt Hay Làm Phẳng

Độ trong suốt của GIF chỉ có hai mức — một điểm ảnh hoặc đục hoàn toàn, hoặc trong suốt hoàn toàn, không có mức nào ở giữa. Pixel art với viền cứng, alpha một-bit giữ nguyên được điều đó nên công cụ mặc định xuất những sheet như vậy ở chế độ trong suốt. Sheet có viền mềm, khử răng cưa lại là chuyện khác: cắt những điểm ảnh viền có độ trong suốt một phần ở ngưỡng 50% sẽ để lại một viền màu sai bao quanh mỗi sprite, dễ thấy nhất khi đặt trên nền phức tạp. Làm phẳng những sheet đó lên một màu nền trước sẽ loại bỏ hoàn toàn viền sai màu, đổi lại sprite không còn trong suốt nữa. Dù công cụ gợi ý chế độ nào theo mặc định, bạn vẫn đổi được chỉ bằng một cú bấm.

Một Bảng Màu Cho Mọi Frame

GIF chỉ mang một bảng màu duy nhất, dùng chung cho cả animation, tối đa 256 màu. Xây dựng bảng màu đó bằng cách xét tất cả các frame đã chọn cùng một lúc — thay vì chọn riêng cho từng frame — chính là điều giữ cho màu da nhân vật hay màu của một chi tiết giao diện không bị trôi dần khi animation phát. Nếu mỗi frame có bảng màu riêng, mỗi frame có thể làm tròn cùng một màu về một màu gần nhất hơi khác nhau. Đánh đổi là một sheet dùng nhiều hơn hẳn 256 màu khác nhau xuyên suốt các frame sẽ có một số màu bị gộp về màu gần nhất, thường không nhận ra được trên pixel art nhưng có thể lộ thành dải màu nhẹ trên sheet có gradient kiểu vẽ tay.

Câu hỏi thường gặp

Sprite sheet của tôi có bị upload lên đâu không?
Không. Sheet được giải mã, cắt và mã hoá thành GIF ngay bằng JavaScript chạy trong tab trình duyệt của bạn, file được ghi thẳng ra máy mà không hề đi qua mạng. Đó cũng là lý do công cụ vẫn hoạt động khi mất mạng, miễn là trang đã tải xong.
Vì sao GIF phát ra không đúng tốc độ tôi đã chọn?
Thời gian trong GIF được lưu theo bước 1/100 giây chứ không phải mili-giây, nên phần lớn tốc độ khung hình không chia hết cho đơn vị đó, và bộ mã hoá không bao giờ dùng bước ngắn hơn hai phần trăm giây — bước ngắn hơn rất dễ bị trình phát hiểu nhầm thành bước dài gấp mười lần. Chọn 60 fps thì mức gần nhất GIF có thể lưu là bước hai phần trăm giây, tức phát ra khoảng 50 fps thay vì 60; chọn 7 fps thì mức gần nhất sẽ lệch về khoảng 7,14. Bất cứ khi nào tốc độ yêu cầu không khớp chính xác, công cụ làm tròn về bước gần nhất có thể biểu diễn và hiển thị tốc độ thực tế ngay bên cạnh tốc độ bạn nhập, để sự chênh lệch không bị giấu đi.
Nên xuất nền trong suốt hay làm phẳng trên một màu?
Tuỳ vào viền của sprite. Độ trong suốt trong GIF chỉ có hai mức — một điểm ảnh hoặc trong suốt hoàn toàn, hoặc đục hoàn toàn, không có mức nào ở giữa — nên pixel art với viền cứng, không khử răng cưa giữ nguyên được độ trong suốt. Sheet có viền mềm, khử răng cưa thì khác: ép những điểm ảnh viền có độ trong suốt một phần qua ngưỡng cắt hai mức đó sẽ để lại một viền màu sai bao quanh sprite. Làm phẳng lên một màu nền trước sẽ loại bỏ viền này, đổi lại sprite không còn trong suốt nữa. Công cụ mặc định chọn làm phẳng cho sheet có viền mềm và chọn trong suốt cho pixel art, nhưng bạn luôn có thể đổi lại chỉ bằng một cú bấm.
Vì sao màu sắc trông hơi khác so với sheet gốc?
GIF chỉ lưu một bảng màu dùng chung cho cả animation, tối đa 256 màu, không có bảng màu riêng cho từng frame. Bảng màu đó được tính bằng cách xét tất cả các frame đã chọn cùng lúc, nên một màu phổ biến ở frame này nhưng hiếm ở các frame khác có thể bị đẩy về màu gần nhất để nhường chỗ. Bù lại, màu sắc sẽ nhất quán xuyên suốt animation — không bị lệch tông từ frame này sang frame khác như khi mỗi frame có bảng màu riêng.
GIF xuất ra có lặp vô hạn không?
Có, mọi file xuất ra đều được ghi để lặp vô hạn, giống hệt cách bản xem trước phát trước khi bạn tải về.
Nếu dung lượng ước tính quá lớn thì nên làm gì?
Tỉ lệ phóng to là yếu tố ảnh hưởng nhiều nhất: giảm từ 2x xuống 1x giúp giảm khoảng bốn lần số điểm ảnh bộ mã hoá phải xử lý. Xuất ít frame hơn — thu hẹp khoảng chọn hoặc bỏ qua khung trống — cũng giúp ích, và giảm tốc độ khung hình cũng vậy, vì GIF lưu trọn một ảnh đánh chỉ số theo bảng màu cho mỗi frame bất kể frame đó giống frame trước đến đâu.
Những frame nào sẽ được đưa vào GIF?
Đúng những frame đang được chọn trong dải khung hình phía trên, theo đúng thứ tự phát — giống hệt lựa chọn mà xuất ZIP sẽ dùng. Tắt bớt frame, thu hẹp khoảng, hoặc chỉ chọn một hàng, GIF xuất ra sẽ phản ánh đúng lựa chọn đó.