Trình Trích Xuất Sprite

Drop files here or click (max 12 MB)

Thả một hình ảnh vào đây để bắt đầu trích xuất sprite.

Giới thiệu Công cụ Trích xuất Sprite Trực tuyến

Cần biến một sprite sheet hoặc hình ảnh tĩnh thành các sprite riêng lẻ? Sprite Extractor này tự động phát hiện vùng sprite, cắt chúng gọn gàng (với tùy chọn cắt tỉa và đệm) và xuất ra PNG trong suốt sẵn sàng sử dụng. 🚀 Lý tưởng cho dự án Scratch, nguyên mẫu game 2D, hoạt động lớp học và game indie. Hoạt động tốt với pixel art, phần tử UI, biểu tượng và nhân vật.

Tại Sao Nên Sử Dụng Công Cụ Trích Xuất Sprite Này?

  • Tự động phát hiện sprite dựa trên độ trong suốt và ngưỡng cấu hình
  • Cắt xén sạch sẽ với tùy chọn cắt bỏ viền trong suốt xung quanh mỗi sprite
  • Kiểm soát khoảng đệm, căn chỉnh (giữa/dưới) và kích thước đầu ra đồng nhất tùy chọn
  • Giữ nguyên độ trong suốt (kênh alpha) cho xuất PNG – lý tưởng cho tilemap và nhân vật
  • Thư viện hình ảnh trực quan của tất cả sprite được phát hiện để kiểm tra nhanh trước khi tải xuống
  • Xuất ZIP phía máy khách sử dụng JSZip, giữ nguyên tên file và thứ tự sprite ổn định
  • Thân thiện với Scratch: nhanh chóng biến một sprite sheet thành nhiều trang phục hoặc tài sản
  • Hoàn hảo để tái sử dụng tài sản trên nhiều engine (Scratch, Godot, Unity 2D, Phaser, v.v.)

🛠️ Cách Trích Xuất Sprite Từ Sprite Sheet for sprite-extractor

1

1. Thả hình ảnh của bạn

Kéo & thả sprite sheet hoặc hình ảnh vào vùng thả, hoặc nhấp để chọn file. Để có kết quả tốt nhất, hãy sử dụng PNG với nền trong suốt hoặc độ tương phản cao giữa sprite và nền.

2

2. Chạy tự động phát hiện

Công cụ gửi một biểu diễn nhẹ của hình ảnh đến điểm cuối phát hiện, nơi tính toán các hộp giới hạn cho mỗi sprite dựa trên độ trong suốt và kích thước tối thiểu. Các hộp được phủ lên hình ảnh để bạn có thể nhanh chóng thấy những gì sẽ được xuất.

3

3. Điều chỉnh tùy chọn trích xuất

Điều chỉnh khoảng đệm, nền trong suốt so với màu đặc, cắt bỏ viền trong suốt, căn chỉnh (giữa hoặc dưới), và chiều rộng/cao đầu ra đồng nhất tùy chọn. Công cụ xây dựng lại canvas cho mỗi sprite tương ứng.

4

4. Xem trước sprite

Cuộn qua thư viện sprite đã tạo. Mỗi bản xem trước được xây dựng trên máy khách bằng canvas ngoài màn hình và có thể được đổi tên hoặc loại bỏ tùy theo tùy chọn giao diện.

5

5. Tải xuống PNG hoặc ZIP

Xuất sprite PNG riêng lẻ hoặc tải xuống một file ZIP duy nhất chứa tất cả bản xem trước hiện tại. ZIP được xây dựng phía máy khách bằng JSZip, và tên file theo mẫu tuần tự như <code>sprite_0000.png</code>, <code>sprite_0001.png</code>, v.v.

Thông Số Kỹ Thuật

Phát Hiện & Hộp Giới Hạn

Giai đoạn phát hiện chạy trên điểm cuối backend chuyên dụng và trả về các hộp giới hạn sạch mà máy khách sử dụng để xây dựng sprite cuối cùng.

Khía cạnhHành viGhi chú
Điểm cuối phát hiệnPOST /api/sprite-extractor/inspectChấp nhận URL dữ liệu và các tùy chọn phát hiện, trả về một mảng các hộp sprite.
Đầu vào phát hiệndung sai, ngưỡng alpha, chiều rộng tối thiểu, chiều cao tối thiểuĐiều chỉnh các tham số này trong giao diện người dùng để bỏ qua nhiễu nhỏ hoặc chỉ chụp các sprite có ý nghĩa.
Hình dạng hộpHình chữ nhật căn chỉnh theo trụcMỗi <code>SpriteBox</code> chứa <code>x</code>, <code>y</code>, <code>width</code>, <code>height</code> trong tọa độ hình ảnh nguồn.
Xử lý độ trong suốtNhận biết alphaCác pixel trong suốt góp phần vào quyết định cắt/xén nhưng có thể được giữ lại trong đầu ra.
Xử lý lỗiDự phòng mượt màNếu phát hiện thất bại, công cụ hiển thị lỗi dễ đọc và không làm hỏng giao diện người dùng.

Cắt, Xén & Căn chỉnh

Khi các hộp đã được xác định, tất cả việc hiển thị sprite được thực hiện trong trình duyệt bằng canvas HTML.

BướcTriển khaiChi tiết
Cắt ban đầudrawImage(img, box.x, box.y, w, h, 0, 0, w, h)Mỗi sprite đầu tiên được cắt từ hình ảnh gốc lên một canvas tạm thời.
Xén trong suốtquét kênh alpha qua getImageDataCông cụ quét các pixel để tính toán hộp giới hạn không trong suốt tối thiểu khi tính năng xén được bật.
Đệmcó thể cấu hình 0–256 pxĐệm được áp dụng xung quanh sprite đã xén hoặc cắt để giảm hiện tượng méo cạnh trong các engine.
Căn chỉnhgiữa / dướiSprite có thể được căn giữa hoặc căn dưới (hữu ích cho các nhân vật đứng trên đường cơ sở).
Kích thước đầu ra đồng nhấttùy chọn spriteWidth / spriteHeightKhi được bật, tất cả sprite được hiển thị vào một canvas có kích thước cố định để chuẩn hóa hoạt ảnh.
Nềntrong suốt hoặc màu đặcGiữ độ trong suốt hoàn toàn hoặc lấp đầy canvas bằng màu nền RGBA đã chọn.

Hiệu suất & Giới hạn

Được thiết kế cho sử dụng tương tác trong trình duyệt.

Tham sốHành vi điển hìnhGhi chú
Kích thước đầu vào tối đa~10 MB hình ảnhTệp lớn hơn vẫn có thể hoạt động nhưng sẽ tải/phát hiện chậm hơn.
Số lượng spritelên đến ~400 spriteSố lượng rất cao có thể thực hiện, nhưng việc hiển thị xem trước và tạo ZIP sẽ mất nhiều thời gian hơn.
Định dạng xuấtPNG bên trong ZIP (Blob)ZIP được tạo hoàn toàn ở phía máy khách bằng JSZip.
Thao tác canvasCắt và vẽ từng spriteDựa trên API canvas 2D của trình duyệt; hiệu suất tỷ lệ với độ phân giải và số lượng.

Lựa chọn thay thế Dòng lệnh

Đối với sprite sheet khổng lồ hoặc quy trình tự động, bạn có thể kết hợp các công cụ CLI như ImageMagick với kịch bản.

Linux / 🍎 macOS

Cắt lưới đồng nhất với ImageMagick

convert spritesheet.png -crop 64x64 +repage sprite_%04d.png

Cắt lưới 64×64 đều thành các tệp PNG riêng lẻ.

Nén tất cả sprite

zip sprites.zip sprite_*.png

Đóng gói tất cả sprite đã tạo vào một kho lưu trữ duy nhất.

Windows (PowerShell + ImageMagick)

Cắt dựa trên lưới

magick spritesheet.png -crop 64x64 +repage sprite_%%04d.png

Giống như trên, sử dụng CLI <code>magick</code> trên Windows.

Trường hợp Sử dụng Thực tế

Phát triển Trò chơi 2D

  • Trích xuất khung hình hoạt hình nhân vật từ sprite sheet cho Godot, Unity 2D, Phaser hoặc Construct.
  • Tách biệt các phần tử giao diện (nút, biểu tượng, thanh máu) từ bản thiết kế mô phỏng.
  • Phân tách tileset thành các ô riêng lẻ cho trình chỉnh sửa cấp độ.
// Ví dụ Godot: tải nhiều khung hình\nvar frames = []\nfor i in range(0, 8):\n    frames.append(load(\"res://sprites/hero_walk_\" + str(i).pad_zeroes(2) + \".png\"))

Dự án Scratch & Lớp học

  • Biến một sprite sheet duy nhất thành nhiều trang phục cho nhân vật Scratch.
  • Chuẩn bị gói tài nguyên theo chủ đề (động vật, hành tinh, biểu tượng) cho các hội thảo lập trình.
  • Cho phép học sinh thiết kế sprite sheet trong công cụ vẽ và sau đó trích xuất chúng cho Scratch.
// Mã giả kiểu Scratch cho hoạt ảnh đơn giản\nwhen green flag clicked\nforever\n  next costume\n  wait 0.1 seconds

Nghệ thuật Pixel & Thư viện Tài nguyên

  • Tách các bảng pixel art cũ thành thư viện sprite riêng lẻ có thể tìm kiếm.
  • Trích xuất chỉ những tài sản bạn cần từ các gói thương mại hoặc mã nguồn mở lớn.
  • Chuẩn hóa phần đệm và căn chỉnh trên các sprite từ các nguồn khác nhau.

❓ Frequently Asked Questions

❓Phát hiện sprite có hoàn toàn tự động không?

Công cụ thực hiện phát hiện tự động dựa trên độ trong suốt và các ngưỡng có thể cấu hình (dung sai, ngưỡng alpha, chiều rộng/cao tối thiểu). Trong nhiều trường hợp nó 'hoạt động ngay', nhưng với các bảng phức tạp bạn có thể cần điều chỉnh tùy chọn hoặc chạy lần thứ hai.

📏Trình trích xuất có thay đổi hình ảnh gốc của tôi không?

Không. Hình ảnh gốc của bạn vẫn được giữ nguyên. Công cụ chỉ đọc nó vào canvas trong bộ nhớ, cắt các vùng thành canvas mới, và sau đó xuất các sprite PNG mới.

🎯Tôi có thể kiểm soát phần đệm và căn chỉnh không?

Có. Bạn có thể cấu hình phần đệm (theo pixel), chọn giữa nền trong suốt hoặc nền đặc, bật cắt các cạnh trong suốt, và căn chỉnh sprite ở giữa hoặc căn dưới trong canvas đầu ra.

🔒Hình ảnh của tôi có được lưu trữ trên máy chủ không?

Bước phát hiện gửi hình ảnh của bạn (dưới dạng URL dữ liệu) đến một điểm cuối chuyên dụng để tính toán khung sprite, nhưng bản thân các sprite được xây dựng và nén ZIP trong trình duyệt của bạn. Dịch vụ được thiết kế cho xử lý tạm thời, không phải lưu trữ lâu dài. Như mọi khi, tránh sử dụng các công cụ của bên thứ ba cho các tài sản phải được giữ bí mật tuyệt đối.

🧊Độ trong suốt có được bảo toàn trong các sprite xuất ra không?

Có. Mặc định canvas đầu ra được để trong suốt và các sprite của bạn giữ lại kênh alpha. Bạn có thể tùy chọn chọn màu nền đặc nếu công cụ mục tiêu của bạn ưa thích tài sản mờ đục.

Pro Tips

Best Practice

Sử dụng một lượng phần đệm nhỏ (2–4 px) xung quanh mỗi sprite để ngăn chảy màu ở cạnh khi phóng to hoặc xoay trong công cụ của bạn.

Best Practice

Đặt tên sprite một cách nhất quán (ví dụ: <code>hero_run_0001.png</code>, <code>hero_run_0002.png</code>) để đơn giản hóa việc nhập hoạt họa và lập trình.

Best Practice

Trong môi trường lớp học, hãy bắt đầu với các bảng sprite rất đơn giản (ít sprite lớn, nền rõ ràng) để học sinh thấy kết quả ngay lập tức.

Best Practice

Giữ tệp ZIP xuất ra cùng với các tệp nguồn dự án của bạn để bạn có thể dễ dàng tạo lại hoặc điều chỉnh hoạt họa sau này.

Additional Resources

Scratch Wiki – Sprites
Documentation
Tài liệu Godot – Hoạt họa Sprite 2D
Documentation
Hướng dẫn Unity – Sprites 2D
Documentation

Other Tools