استخراج کننده اسپرایت
Drop files here or click (max 12 MB)
چرا از این استخراجکننده اسپرایت استفاده کنیم؟
- تشخیص خودکار اسپرایت بر اساس شفافیت و آستانههای قابل تنظیم
- برش تمیز با امکان حذف حاشیههای شفاف اطراف هر اسپرایت
- کنترل حاشیه، تراز (مرکز/پایین) و اندازه خروجی یکسان اختیاری
- حفظ شفافیت (کانال آلفا) برای خروجیهای PNG - ایدهآل برای tilemapها و کاراکترها
- گالری بصری از تمام اسپرایتهای تشخیصدادهشده برای بازرسی سریع قبل از دانلود
- خروجی ZIP سمت کاربر با استفاده از JSZip، با حفظ نام فایلها و ترتیب اسپرایتها
- سازگار با اسکرچ: سریعاً یک صفحه اسپرایت را به چندین کاستیوم یا asset تبدیل کنید
- مناسب برای استفاده مجدد از assetها در موتورهای مختلف (اسکرچ، گودو، یونیتی 2D، فیزر و غیره)
🛠️ نحوه استخراج اسپرایتها از یک صفحه اسپرایت for sprite-extractor
1. تصویر خود را رها کنید
یک صفحه اسپرایت یا تصویر را در ناحیه رها کردن بکشید و رها کنید، یا برای انتخاب فایل کلیک کنید. برای بهترین نتایج، از PNG با پسزمینه شفاف یا کنتراست بالا بین اسپرایتها و پسزمینه استفاده کنید.
2. اجرای تشخیص خودکار
ابزار یک نمای سبک از تصویر شما را به یک نقطه پایانی تشخیص ارسال میکند که جعبههای مرزی برای هر اسپرایت بر اساس شفافیت و حداقل اندازه محاسبه میکند. جعبهها روی تصویر شما قرار میگیرند تا بتوانید به سرعت ببینید چه چیزی صادر خواهد شد.
3. تنظیم گزینههای استخراج
حاشیه، پسزمینه شفاف در مقابل رنگ ثابت، حذف لبههای شفاف، تراز (مرکز یا پایین) و عرض/ارتفاع خروجی یکسان اختیاری را تنظیم کنید. ابزار بوم هر اسپرایت را بر این اساس بازسازی میکند.
4. پیشنمایش اسپرایتها
در گالری اسپرایتهای تولیدشده پیمایش کنید. هر پیشنمایش در سمت کاربر با استفاده از یک بوم خارج از صفحه ساخته میشود و بسته به گزینههای رابط کاربری میتواند تغییر نام داده یا حذف شود.
5. دانلود PNGها یا یک ZIP
اسپرایتهای PNG جداگانه را صادر کنید یا یک فایل ZIP حاوی تمام پیشنمایشهای فعلی را دانلود کنید. ZIP در سمت کاربر با استفاده از JSZip ساخته میشود و نام فایلها از الگوی ترتیبی مانند <code>sprite_0000.png</code>، <code>sprite_0001.png</code> و غیره پیروی میکند.
مشخصات فنی
تشخیص و جعبههای مرزی
فاز تشخیص در یک نقطه پایانی بکاند اختصاصی اجرا میشود و جعبههای مرزی تمیزی را برمیگرداند که کاربر برای ساخت اسپرایتهای نهایی از آن استفاده میکند.
| جنبه | رفتار | یادداشتها |
|---|---|---|
| نقطه پایانی تشخیص | POST /api/sprite-extractor/inspect | یک URL داده و گزینههای تشخیص را میپذیرد و آرایهای از جعبههای اسپرایت برمیگرداند. |
| ورودیهای تشخیص | تحمل، آستانه آلفا، حداقل عرض، حداقل ارتفاع | این پارامترها را در رابط کاربری تنظیم کنید تا نویزهای کوچک نادیده گرفته شوند یا فقط اسپرایتهای معنیدار شناسایی شوند. |
| شکل جعبه | مستطیلهای تراز شده با محور | هر <code>SpriteBox</code> شامل <code>x</code>، <code>y</code>، <code>width</code>، <code>height</code> در مختصات تصویر منبع است. |
| مدیریت شفافیت | آگاه از آلفا | پیکسلهای شفاف در تصمیمهای برش/تریم مؤثرند اما میتوانند در خروجی حفظ شوند. |
| مدیریت خطا | عقبنشینیهای ظریف | اگر تشخیص با شکست مواجه شود، ابزار یک خطای قابل خواندن نمایش میدهد و رابط کاربری را خراب نمیکند. |
برش، تریم و تراز
پس از مشخص شدن جعبهها، تمام رندرینگ اسپرایتها در مرورگر با استفاده از بوم HTML انجام میشود.
| مرحله | پیادهسازی | جزئیات |
|---|---|---|
| برش اولیه | drawImage(img, box.x, box.y, w, h, 0, 0, w, h) | هر اسپرایت ابتدا از تصویر اصلی روی یک بوم موقت برش داده میشود. |
| تریم شفاف | اسکن کانال آلفا از طریق getImageData | ابزار پیکسلها را اسکن میکند تا هنگام فعال بودن تریم، کوچکترین جعبه مرزی غیرشفاف را محاسبه کند. |
| حاشیه | قابل پیکربندی ۰–۲۵۶ پیکسل | حاشیه در اطراف اسپرایت تریم شده یا برش داده شده اعمال میشود تا آثار لبه در موتورها کاهش یابد. |
| تراز | مرکز / پایین | اسپرایتها میتوانند در مرکز یا در پایین تراز شوند (برای شخصیتهایی که روی خط پایه ایستادهاند مفید است). |
| اندازه خروجی یکنواخت | اختیاری spriteWidth / spriteHeight | هنگام فعال شدن، تمام اسپرایتها روی یک بوم با اندازه ثابت رندر میشوند تا انیمیشنها استاندارد شوند. |
| پسزمینه | شفاف یا رنگ ثابت | یا شفافیت کامل حفظ شود یا بوم با یک رنگ RGBA انتخاب شده پر شود. |
عملکرد و محدودیتها
طراحی شده برای استفاده تعاملی در مرورگر.
| پارامتر | رفتار معمول | یادداشتها |
|---|---|---|
| حداکثر اندازه ورودی | ~۱۰ مگابایت تصویر | فایلهای بزرگتر ممکن است کار کنند اما بارگذاری و تشخیص کندتر خواهد بود. |
| تعداد اسپرایتها | تا حدود ۴۰۰ اسپرایت | تعداد بسیار بالا امکانپذیر است، اما رندر پیشنمایش و ایجاد ZIP زمان بیشتری خواهد برد. |
| فرمت خروجی | PNG داخل ZIP (Blob) | فایل ZIP به طور کامل در سمت کلاینت با استفاده از JSZip تولید میشود. |
| عملیات Canvas | برش و رسم برای هر اسپرایت | وابسته به API دو بعدی Canvas مرورگر؛ عملکرد با وضوح و تعداد مقیاس میشود. |
جایگزینهای خط فرمان
برای صفحات اسپرایت عظیم یا خطوط لوله خودکار، میتوانید ابزارهای CLI مانند ImageMagick را با اسکریپتنویسی ترکیب کنید.
لینوکس / 🍎 مک
برش شبکه یکنواخت با ImageMagick
convert spritesheet.png -crop 64x64 +repage sprite_%04d.pngیک شبکه منظم ۶۴×۶۴ را به فایلهای PNG جداگانه برش میدهد.
زیپ کردن همه اسپرایتها
zip sprites.zip sprite_*.pngتمام اسپرایتهای تولید شده را در یک آرشیو واحد بستهبندی میکند.
ویندوز (PowerShell + ImageMagick)
برش مبتنی بر شبکه
magick spritesheet.png -crop 64x64 +repage sprite_%%04d.pngمشابه بالا، با استفاده از CLI <code>magick</code> در ویندوز.
موارد استفاده عملی
توسعه بازی دو بعدی
- استخراج فریمهای انیمیشن شخصیت از یک صفحه اسپرایت برای Godot، Unity 2D، Phaser یا Construct.
- جداسازی عناصر رابط کاربری (دکمهها، آیکونها، نوارهای سلامتی) از یک طرح اولیه.
- تجزیه مجموعههای کاشی به کاشیهای جداگانه برای ویرایشگرهای سطح.
// مثال Godot: بارگذاری چندین فریم\nvar frames = []\nfor i in range(0, 8):\n frames.append(load(\"res://sprites/hero_walk_\" + str(i).pad_zeroes(2) + \".png\"))اسکرچ و پروژههای کلاسی
- تبدیل یک صفحه اسپرایت واحد به چندین کاستیوم برای یک شخصیت اسکرچ.
- آمادهسازی بستههای دارایی موضوعی (حیوانات، سیارات، آیکونها) برای کارگاههای برنامهنویسی.
- اجازه دهید دانشآموزان صفحات اسپرایت را در یک ابزار طراحی ایجاد کرده و سپس برای اسکرچ استخراج کنند.
// شبهکد سبک اسکرچ برای انیمیشن ساده\nwhen green flag clicked\nforever\n next costume\n wait 0.1 secondsپیکسل آرت و کتابخانههای دارایی
- تقسیم صفحات پیکسل آرت قدیمی به یک کتابخانه قابل جستجو از اسپرایتهای جداگانه.
- استخراج تنها داراییهای مورد نیاز از بستههای تجاری بزرگ یا متنباز.
- یکسانسازی حاشیه و تراز در اسپرایتهای منابع مختلف.
❓ Frequently Asked Questions
❓آیا تشخیص اسپرایت کاملاً خودکار است؟
📏آیا استخراجگر تصویر اصلی من را تغییر میدهد؟
🎯آیا میتوانم حاشیه و تراز را کنترل کنم؟
🔒آیا تصاویر من در سرور ذخیره میشوند؟
🧊آیا شفافیت در اسپرایتهای صادر شده حفظ میشود؟
Pro Tips
از مقدار کمی حاشیه (۴–۲ پیکسل) در اطراف هر اسپرایت استفاده کنید تا از نشت لبه هنگام مقیاسگذاری یا چرخش در موتور شما جلوگیری شود.
اسپرایتها را به صورت یکنواخت نامگذاری کنید (مثلاً <code>hero_run_0001.png</code>, <code>hero_run_0002.png</code>) تا واردات انیمیشن و اسکریپتنویسی ساده شود.
در محیطهای کلاسی، با صفحات اسپرایت بسیار ساده شروع کنید (اسپرایتهای کم و بزرگ، پسزمینه واضح) تا دانشآموزان بلافاصله نتایج را ببینند.
فایل ZIP صادر شده را همراه با فایلهای منبع پروژه خود نگه دارید تا بعداً بتوانید به راحتی انیمیشنها را بازتولید یا تنظیم کنید.
Additional Resources
Other Tools
- زیباکننده CSS
- زیباکننده HTML
- زیباکننده JavaScript
- زیباکننده PHP
- انتخابگر رنگ
- دیکودر Base64
- انکودر Base64
- فرمتدهنده C#
- فرمتدهنده CSV
- Dockerfile Formatter
- فرمتدهنده Elm
- فرمتدهنده ENV
- فرمتدهنده Go
- فرمتدهنده GraphQL
- فرمتدهنده HCL
- فرمتدهنده INI
- فرمتدهنده JSON
- فرمتدهنده LaTeX
- فرمتدهنده Markdown
- فرمتدهنده Objective-C
- Php Formatter
- فرمتدهنده Proto
- فرمتدهنده Python
- فرمتدهنده Ruby
- فرمتدهنده Rust
- فرمتدهنده Scala
- فرمتدهنده اسکریپت شل
- فرمتدهنده SQL
- قالببندی SVG
- قالببندی Swift
- قالببندی TOML
- Typescript Formatter
- قالببندی XML
- قالببندی YAML
- قالببندی Yarn
- کوچککننده CSS
- Html Minifier
- Javascript Minifier
- کوچککننده JSON
- کوچککننده XML
- نمایشگر هدرهای HTTP
- PDF به متن
- تستکننده Regex
- بررسیکننده رتبه SERP
- جستجوی Whois