স্প্রাইট এক্সট্র্যাক্টর
Drop files here or click (max 12 MB)
কেন এই স্প্রাইট এক্সট্র্যাক্টর ব্যবহার করবেন?
- স্বচ্ছতা এবং কনফিগারযোগ্য থ্রেশহোল্ডের ভিত্তিতে স্বয়ংক্রিয় স্প্রাইট শনাক্তকরণ
- প্রতিটি স্প্রাইটের চারপাশের স্বচ্ছ সীমানা অপসারণের বিকল্পসহ পরিষ্কার ক্রপিং
- প্যাডিং, অ্যালাইনমেন্ট (সেন্টার/বটম) এবং ঐচ্ছিক অভিন্ন আউটপুট আকার নিয়ন্ত্রণ
- PNG এক্সপোর্টের জন্য স্বচ্ছতা (আলফা চ্যানেল) সংরক্ষণ করে – টাইলম্যাপ এবং ক্যারেক্টারের জন্য আদর্শ
- ডাউনলোডের আগে দ্রুত পরিদর্শনের জন্য সমস্ত শনাক্তকৃত স্প্রাইটের ভিজুয়াল গ্যালারি
- JSZip ব্যবহার করে ক্লায়েন্ট-সাইড ZIP এক্সপোর্ট, আপনার ফাইলের নাম এবং স্প্রাইট ক্রম স্থিতিশীল রাখে
- স্ক্র্যাচ-বান্ধব: দ্রুত একটি স্প্রাইট শীটকে একাধিক কস্টিউম বা অ্যাসেটে রূপান্তর করুন
- বিভিন্ন ইঞ্জিনে (স্ক্র্যাচ, গডট, ইউনিটি 2D, ফেজার ইত্যাদি) অ্যাসেট পুনরায় ব্যবহারের জন্য উপযুক্ত
🛠️ কিভাবে একটি স্প্রাইট শীট থেকে স্প্রাইট এক্সট্র্যাক্ট করবেন for sprite-extractor
1. আপনার ছবি ড্রপ করুন
একটি স্প্রাইট শীট বা ছবি ড্রপজোনে ড্র্যাগ ও ড্রপ করুন, বা ফাইল নির্বাচন করতে ক্লিক করুন। সেরা ফলাফলের জন্য, স্বচ্ছ ব্যাকগ্রাউন্ড সহ PNG বা স্প্রাইট এবং ব্যাকগ্রাউন্ডের মধ্যে উচ্চ কনট্রাস্ট ব্যবহার করুন।
2. স্বয়ংক্রিয় শনাক্তকরণ চালান
টুলটি আপনার ছবির একটি হালকা উপস্থাপনা একটি শনাক্তকরণ এন্ডপয়েন্টে পাঠায়, যা স্বচ্ছতা এবং ন্যূনতম আকারের ভিত্তিতে প্রতিটি স্প্রাইটের জন্য বাউন্ডিং বক্স গণনা করে। বক্সগুলি আপনার ছবির উপর ওভারলে করা হয় যাতে আপনি দ্রুত দেখতে পারেন কী এক্সপোর্ট করা হবে।
3. এক্সট্র্যাকশন বিকল্পসমূহ টিউন করুন
প্যাডিং, স্বচ্ছ ব্যাকগ্রাউন্ড বনাম সলিড কালার, স্বচ্ছ প্রান্ত ট্রিমিং, অ্যালাইনমেন্ট (সেন্টার বা বটম), এবং ঐচ্ছিক অভিন্ন আউটপুট প্রস্থ/উচ্চতা সামঞ্জস্য করুন। টুলটি সেই অনুযায়ী প্রতিটি স্প্রাইট ক্যানভাস পুনর্নির্মাণ করে।
4. স্প্রাইটগুলি প্রিভিউ করুন
উৎপন্ন স্প্রাইটগুলির গ্যালারি স্ক্রোল করুন। প্রতিটি প্রিভিউ ক্লায়েন্টে একটি অফস্ক্রিন ক্যানভাস ব্যবহার করে তৈরি করা হয় এবং UI বিকল্পের উপর নির্ভর করে পুনঃনামকরণ বা বাতিল করা যেতে পারে।
5. PNG বা ZIP ডাউনলোড করুন
স্বতন্ত্র PNG স্প্রাইট এক্সপোর্ট করুন বা বর্তমান সমস্ত প্রিভিউ ধারণকারী একটি একক ZIP ফাইল ডাউনলোড করুন। ZIP ক্লায়েন্ট-সাইডে JSZip ব্যবহার করে তৈরি করা হয়, এবং ফাইলের নামগুলি <code>sprite_0000.png</code>, <code>sprite_0001.png</code> ইত্যাদির মতো একটি অনুক্রমিক প্যাটার্ন অনুসরণ করে।
প্রযুক্তিগত বিবরণ
শনাক্তকরণ ও বাউন্ডিং বক্স
শনাক্তকরণ পর্যায় একটি নির্দিষ্ট ব্যাকএন্ড এন্ডপয়েন্টে চলে এবং ক্লায়েন্ট চূড়ান্ত স্প্রাইট তৈরি করতে ব্যবহার করে এমন পরিষ্কার বাউন্ডিং বক্স ফেরত দেয়।
| দিক | আচরণ | নোট |
|---|---|---|
| শনাক্তকরণ এন্ডপয়েন্ট | POST /api/sprite-extractor/inspect | একটি ডেটা URL এবং শনাক্তকরণ অপশন গ্রহণ করে, স্প্রাইট বক্সের একটি অ্যারে ফেরত দেয়। |
| শনাক্তকরণ ইনপুট | টলারেন্স, আলফা থ্রেশহোল্ড, সর্বনিম্ন প্রস্থ, সর্বনিম্ন উচ্চতা | ক্ষুদ্র শব্দ উপেক্ষা করতে বা শুধুমাত্র অর্থপূর্ণ স্প্রাইট ক্যাপচার করতে UI-তে এই প্যারামিটারগুলি টিউন করুন। |
| বক্সের আকৃতি | অক্ষ-সারিবদ্ধ আয়তক্ষেত্র | প্রতিটি <code>SpriteBox</code> সোর্স ইমেজ কোঅর্ডিনেটে <code>x</code>, <code>y</code>, <code>width</code>, <code>height</code> ধারণ করে। |
| স্বচ্ছতা হ্যান্ডলিং | আলফা-সচেতন | স্বচ্ছ পিক্সেল ক্রপিং/ট্রিমিং সিদ্ধান্তে অবদান রাখে কিন্তু আউটপুটে সংরক্ষিত থাকতে পারে। |
| ত্রুটি হ্যান্ডলিং | মার্জিত ফলব্যাক | যদি শনাক্তকরণ ব্যর্থ হয়, টুলটি একটি পাঠযোগ্য ত্রুটি দেখায় এবং UI ভাঙ্গে না। |
ক্রপিং, ট্রিমিং ও অ্যালাইনমেন্ট
বক্সগুলি জানা হয়ে গেলে, সমস্ত স্প্রাইট রেন্ডারিং HTML ক্যানভাস ব্যবহার করে ব্রাউজারে করা হয়।
| ধাপ | বাস্তবায়ন | বিস্তারিত |
|---|---|---|
| প্রাথমিক ক্রপ | drawImage(img, box.x, box.y, w, h, 0, 0, w, h) | প্রতিটি স্প্রাইট প্রথমে মূল ছবি থেকে একটি অস্থায়ী ক্যানভাসে ক্রপ করা হয়। |
| স্বচ্ছ ট্রিম | getImageData এর মাধ্যমে আলফা চ্যানেল স্ক্যান করুন | ট্রিমিং সক্ষম হলে সর্বনিম্ন অস্বচ্ছ বাউন্ডিং বক্স গণনা করতে টুলটি পিক্সেল স্ক্যান করে। |
| প্যাডিং | কনফিগারযোগ্য ০–২৫৬ পিক্সেল | ইঞ্জিনে এজ আর্টিফ্যাক্ট কমাতে ট্রিমড বা ক্রপড স্প্রাইটের চারপাশে প্যাডিং প্রয়োগ করা হয়। |
| অ্যালাইনমেন্ট | কেন্দ্র / নীচে | স্প্রাইটগুলি কেন্দ্রীভূত বা নীচে সারিবদ্ধ করা যেতে পারে (বেসলাইনে দাঁড়ানো চরিত্রগুলির জন্য দরকারী)। |
| ইউনিফর্ম আউটপুট সাইজ | ঐচ্ছিক spriteWidth / spriteHeight | সক্ষম হলে, অ্যানিমেশন মানকীকরণের জন্য সমস্ত স্প্রাইট একটি নির্দিষ্ট আকারের ক্যানভাসে রেন্ডার করা হয়। |
| ব্যাকগ্রাউন্ড | স্বচ্ছ বা শক্ত রঙ | সম্পূর্ণ স্বচ্ছতা রাখুন বা একটি নির্বাচিত ব্যাকগ্রাউন্ড RGBA রঙ দিয়ে ক্যানভাস পূরণ করুন। |
পারফরম্যান্স ও সীমাবদ্ধতা
ব্রাউজারে ইন্টারেক্টিভ ব্যবহারের জন্য ডিজাইন করা হয়েছে।
| প্যারামিটার | সাধারণ আচরণ | নোট |
|---|---|---|
| সর্বোচ্চ ইনপুট সাইজ | ~১০ এমবি ইমেজ | বড় ফাইলগুলো এখনও কাজ করতে পারে তবে লোড/ডিটেক্ট হতে বেশি সময় লাগবে। |
| স্প্রাইট সংখ্যা | ~৪০০ পর্যন্ত স্প্রাইট | অত্যন্ত উচ্চ সংখ্যা সম্ভব, তবে প্রিভিউ রেন্ডারিং এবং জিপ তৈরি হতে বেশি সময় লাগবে। |
| এক্সপোর্ট ফরম্যাট | জিপের ভিতরে পিএনজি (ব্লব) | জিপটি সম্পূর্ণরূপে ক্লায়েন্ট-সাইডে JSZip ব্যবহার করে তৈরি করা হয়। |
| ক্যানভাস অপারেশন | প্রতি-স্প্রাইট ক্রপিং এবং ড্রয়িং | ব্রাউজারের ২ডি ক্যানভাস এপিআই-এর উপর নির্ভর করে; পারফরম্যান্স রেজোলিউশন এবং সংখ্যার সাথে স্কেল করে। |
কমান্ড লাইন বিকল্প
বিশাল স্প্রাইট শীট বা স্বয়ংক্রিয় পাইপলাইনের জন্য, আপনি ImageMagick-এর মতো CLI টুলস স্ক্রিপ্টিংয়ের সাথে একত্রিত করতে পারেন।
লিনাক্স / 🍎 ম্যাকওএস
ImageMagick দিয়ে অভিন্ন গ্রিড ক্রপিং
convert spritesheet.png -crop 64x64 +repage sprite_%04d.pngএকটি নিয়মিত ৬৪×৬৪ গ্রিডকে পৃথক পিএনজি ফাইলে কাটে।
সমস্ত স্প্রাইট জিপ করুন
zip sprites.zip sprite_*.pngসমস্ত জেনারেট করা স্প্রাইট একটি একক আর্কাইভে প্যাকেজ করুন।
উইন্ডোজ (PowerShell + ImageMagick)
গ্রিড-ভিত্তিক ক্রপিং
magick spritesheet.png -crop 64x64 +repage sprite_%%04d.pngউইন্ডোজে <code>magick</code> CLI ব্যবহার করে উপরের মতোই।
ব্যবহারিক ব্যবহারের ক্ষেত্র
২ডি গেম ডেভেলপমেন্ট
- Godot, Unity 2D, Phaser বা Construct-এর জন্য একটি স্প্রাইট শীট থেকে ক্যারেক্টার অ্যানিমেশন ফ্রেম এক্সট্র্যাক্ট করুন।
- একটি ডিজাইন মক-আপ থেকে UI এলিমেন্ট (বাটন, আইকন, হেলথ বার) আলাদা করুন।
- লেভেল এডিটরগুলির জন্য টাইলসেটগুলিকে পৃথক টাইলে ভাঙ্গুন।
// Godot example: load multiple frames\nvar frames = []\nfor i in range(0, 8):\n frames.append(load(\"res://sprites/hero_walk_\" + str(i).pad_zeroes(2) + \".png\"))স্ক্র্যাচ ও ক্লাসরুম প্রজেক্ট
- একটি একক স্প্রাইট শীটকে স্ক্র্যাচ ক্যারেক্টারের জন্য একাধিক কস্টিউমে পরিণত করুন।
- প্রোগ্রামিং ওয়ার্কশপের জন্য থিমড অ্যাসেট প্যাক (প্রাণী, গ্রহ, আইকন) প্রস্তুত করুন।
- ছাত্রদের একটি ড্রয়িং টুলে স্প্রাইট শীট ডিজাইন করতে দিন এবং তারপর স্ক্র্যাচের জন্য সেগুলো এক্সট্র্যাক্ট করুন।
// Scratch-style pseudocode for simple animation\nwhen green flag clicked\nforever\n next costume\n wait 0.1 secondsপিক্সেল আর্ট ও অ্যাসেট লাইব্রেরি
- পুরানো পিক্সেল আর্ট শীটগুলোকে পৃথক স্প্রাইটের একটি অনুসন্ধানযোগ্য লাইব্রেরিতে বিভক্ত করুন।
- বড় বাণিজ্যিক বা ওপেন-সোর্স প্যাক থেকে শুধুমাত্র আপনার প্রয়োজনীয় অ্যাসেটগুলো বের করুন।
- বিভিন্ন উৎস থেকে প্রাপ্ত স্প্রাইটগুলোর মধ্যে প্যাডিং এবং অ্যালাইনমেন্ট স্বাভাবিক করুন।
❓ Frequently Asked Questions
❓স্প্রাইট সনাক্তকরণ সম্পূর্ণ স্বয়ংক্রিয়?
📏এক্সট্র্যাক্টর কি আমার মূল ছবি পরিবর্তন করে?
🎯আমি কি প্যাডিং এবং অ্যালাইনমেন্ট নিয়ন্ত্রণ করতে পারি?
🔒আমার ছবি কি সার্ভারে সংরক্ষিত হয়?
🧊রপ্তানি করা স্প্রাইটগুলিতে কি স্বচ্ছতা সংরক্ষিত থাকবে?
Pro Tips
আপনার ইঞ্জিনে স্কেলিং বা ঘোরানোর সময় প্রান্ত ফুটো রোধ করতে প্রতিটি স্প্রাইটের চারপাশে অল্প পরিমাণ প্যাডিং (২–৪ px) ব্যবহার করুন।
অ্যানিমেশন ইম্পোর্ট এবং স্ক্রিপ্টিং সহজ করতে স্প্রাইটগুলির নাম সামঞ্জস্যপূর্ণভাবে রাখুন (যেমন, <code>hero_run_0001.png</code>, <code>hero_run_0002.png</code>)।
ক্লাসরুম সেটিংসে, খুব সহজ স্প্রাইট শীট দিয়ে শুরু করুন (কয়েকটি বড় স্প্রাইট, পরিষ্কার ব্যাকগ্রাউন্ড) যাতে শিক্ষার্থীরা তাৎক্ষণিক ফলাফল দেখতে পায়।
রপ্তানি করা ZIP আপনার প্রকল্পের সোর্স ফাইলের পাশে রাখুন যাতে আপনি পরে সহজেই অ্যানিমেশন পুনরুত্পাদন বা সামঞ্জস্য করতে পারেন।
Additional Resources
Other Tools
- সিএসএস সৌন্দর্যবর্ধক
- এইচটিএমএল সৌন্দর্যবর্ধক
- জাভাস্ক্রিপ্ট সৌন্দর্যবর্ধক
- পিএইচপি সৌন্দর্যবর্ধক
- রং নির্বাচক
- বেস৬৪ ডিকোডার
- বেস৬৪ এনকোডার
- সি-শার্প ফরম্যাটার
- সিএসভি ফরম্যাটার
- Dockerfile Formatter
- এলম ফরম্যাটার
- ইএনভি ফরম্যাটার
- গো ফরম্যাটার
- গ্রাফকিউএল ফরম্যাটার
- এইচসিএল ফরম্যাটার
- আইএনআই ফরম্যাটার
- জেসন ফরম্যাটার
- ল্যাটেক ফরম্যাটার
- মার্কডাউন ফরম্যাটার
- অবজেক্টিভসি ফরম্যাটার
- Php Formatter
- প্রোটো ফরম্যাটার
- পাইথন ফরম্যাটার
- রুবি ফরম্যাটার
- রাস্ট ফরম্যাটার
- স্কালা ফরম্যাটার
- শেল স্ক্রিপ্ট ফরম্যাটার
- এসকিউএল ফরম্যাটার
- SVG ফরম্যাটার
- Swift ফরম্যাটার
- TOML ফরম্যাটার
- Typescript Formatter
- XML ফরম্যাটার
- YAML ফরম্যাটার
- Yarn ফরম্যাটার
- সিএসএস মিনিফায়ার
- Html Minifier
- Javascript Minifier
- জেসন মিনিফায়ার
- XML মিনিফায়ার
- এইচটিটিপি হেডার ভিউয়ার
- পিডিএফ থেকে টেক্সট
- রেজেক্স টেস্টার
- সার্প র্যাংক চেকার
- Whois লুকআপ