pxl দিয়ে কোডের মাধ্যমে পিক্সেল আর্ট, স্প্রাইট শিট ও GIF তৈরি করুন

pxl কী?

pxl হলো Node.js-এর জন্য একটি কোড-ভিত্তিক পিক্সেল আর্ট টুল। আপনি সংক্ষিপ্ত .px.js বা .px.ts ফাইলে আর্টওয়ার্ক বর্ণনা করেন, তারপর এর কমান্ড-লাইন ইন্টারফেস ব্যবহার করে PNG স্প্রাইট, JSON মেটাডেটাসহ স্প্রাইট শিট, অ্যানিমেটেড GIF এবং পিক্সেল গ্রিডসহ বড় প্রিভিউ তৈরি করতে পারেন।

প্রকল্পটির জন্য Node.js 22.18 বা তার পরের সংস্করণ প্রয়োজন। এতে কোনো রানটাইম নির্ভরতা নেই এবং ক্লোন করা রিপোজিটরি থেকে ব্যবহার করলে আলাদা বিল্ড ধাপের প্রয়োজন হয় না।

আপনি সোর্স ফাইল সংরক্ষণ করলেই এর লাইভ ব্রাউজার ভিউয়ার আর্টওয়ার্ক পুনর্নির্মাণ করে। সম্পাদিত অ্যাসেটের প্রতিটি অপারেশন ধাপে ধাপে পুনরায় চালানোও যায়, ফলে হাতে আঁকা বা AI এজেন্টের সঙ্গে কাজ করার সময় তৈরির প্রক্রিয়া সহজে পর্যালোচনা করা যায়।

প্রধান বৈশিষ্ট্য

• সংক্ষিপ্ত প্যালেট: এক অক্ষরের কী-তে রং বরাদ্দ করুন এবং Pico-8, Sweetie 16 ও Endesga 32-এর মতো বিল্ট-ইন প্যালেট ব্যবহার করুন।
• স্প্রাইট ও ভ্যারিয়েন্ট: টেক্সট-গ্রিড স্প্রাইট তৈরি করুন, সেগুলো মিরর করুন, স্বয়ংক্রিয় আউটলাইন যোগ করুন, ঘোরান বা উল্টান এবং প্যালেট-বদলানো ভ্যারিয়েন্ট তৈরি করুন।
• অঙ্কন সরঞ্জাম: আয়তক্ষেত্র, রেখা, বৃত্ত, বহুভুজ, গ্রেডিয়েন্ট, ডিথারিং, নয়েজ, স্ক্যাটার ব্রাশ, টাইলম্যাপ এবং বিল্ট-ইন পিক্সেল ফন্ট ব্যবহার করুন।
• স্প্রাইট শিট: TexturePacker-ধাঁচের JSON মেটাডেটাসহ প্যাক করা ছবি এক্সপোর্ট করুন।
• দৃশ্য: আর্টওয়ার্ককে স্তরে সাজান, ছায়া ও আলো স্তর যোগ করুন এবং পৃথক স্তর PNG ফাইল হিসেবে এক্সপোর্ট করুন।
• অ্যানিমেশন: বেস স্প্রাইটের ওপর প্যাচ হিসেবে ফ্রেম নির্ধারণ করুন এবং স্ট্রিপ, JSON ট্যাগ ও GIF ফাইল এক্সপোর্ট করুন।
• ঐচ্ছিক আলো: ল্যাম্প, গ্লো এবং নর্মাল-ভিত্তিক রিলিফ যোগ করুন।
• সহায়ক ডায়াগনস্টিক: ত্রুটির সঙ্গে ফাইল, লাইন, কলাম, অ্যাসেট, স্তর ও অপারেশনের তথ্য দেখানো হয়; প্রযোজ্য ক্ষেত্রে “আপনি কি বোঝাতে চেয়েছেন” ধরনের পরামর্শও দেওয়া হয়।

pxl ইনস্টল ও চালান

বিকল্প ১: রিপোজিটরি ক্লোন করুন

প্রকল্পটি ক্লোন করে এর ডিরেক্টরিতে প্রবেশ করুন:

git clone https://github.com/crsolver/claude-pxl.git
cd claude-pxl

ক্লোন করা রিপোজিটরিতে node bin/pxl.js দিয়ে CLI চালু করুন। লাইভ ভিউয়ারে অন্তর্ভুক্ত উদাহরণগুলোর একটি সঙ্গে সঙ্গে খুলতে পারেন:

node bin/pxl.js serve examples/shop.px.js

ব্রাউজারে http://127.0.0.1:4321/ খুলুন। আর্ট ফাইল সংরক্ষণ করলেই ভিউয়ার প্রকল্পটি পুনর্নির্মাণ করবে।

বিকল্প ২: npx দিয়ে চালান

রিপোজিটরি ক্লোন না করেও GitHub রিপোজিটরি থেকে সরাসরি একটি আর্ট ফাইল বিল্ড করতে পারেন:

npx github:crsolver/claude-pxl build art.px.js

নিচের কমান্ডগুলোতে pxl বলতে ক্লোন করা রিপোজিটরির node bin/pxl.js অথবা npx github:crsolver/claude-pxl-কে বোঝানো হয়েছে।

আপনার প্রথম কোড-ভিত্তিক স্প্রাইট তৈরি করুন

art.px.js নামে একটি ফাইল তৈরি করে নিচের কোড যোগ করুন:

pal({
  k: "#1b1630",
  g: "#8ccf63",
  G: "#4c8a44",
  w: "#fff6e0",
  r: "#e2585e",
  R: "#a63a4c"
})

sprite("slime", { mx: true, outline: "k" }, `
  ....ggg
  ..ggGGg
  .ggGwGg
  gggkwgg
  GGGGGGG`)

sprite("slime_red", {
  base: "slime",
  swap: { g: "r", G: "R" }
})

sheet("chars", ["slime*"], { pad: 1 })

উদাহরণটি বুঝুন

1. pal() এক অক্ষরের কী-কে হেক্সাডেসিমাল রঙের সঙ্গে ম্যাপ করে। এরপর ওই কী-গুলো সরাসরি স্প্রাইট গ্রিডে ব্যবহার করা যায়।
2. sprite("slime", ...) বেস স্প্রাইট ঘোষণা করে।
3. mx: true বিকল্পটি স্প্রাইটের দেওয়া অর্ধেককে অনুভূমিকভাবে মিরর করে।
4. outline: "k" প্যালেটের k-তে বরাদ্দ রং ব্যবহার করে স্বয়ংক্রিয়ভাবে স্প্রাইটের আউটলাইন তৈরি করে।
5. দ্বিতীয় স্প্রাইটটি base: "slime" ব্যবহার করে এবং সবুজ রংকে লাল রং দিয়ে বদলে দেয়। ফলে গ্রিড পুনরাবৃত্তি না করেই নতুন রঙের ভ্যারিয়েন্ট তৈরি হয়।
6. sheet() chars নামে একটি স্প্রাইট শিট তৈরি করে। slime* প্যাটার্নটি মিলে যাওয়া অ্যাসেটগুলো অন্তর্ভুক্ত করে এবং pad: 1 এক পিক্সেল প্যাডিং যোগ করে।

অ্যাসেট বিল্ড করুন

ক্লোন করা রিপোজিটরি থেকে চালান:

node bin/pxl.js build art.px.js

উদাহরণটি এ ধরনের ফাইল তৈরি করে:

out/sprites/slime.png
out/sprites/slime_red.png
out/chars.png
out/chars.json
out/_preview/*.png

স্প্রাইট ফাইলগুলোতে মূল এক-পিক্সেল স্কেলে আর্টওয়ার্ক থাকে। chars.png এবং chars.json ফাইল মিলে স্প্রাইট শিট ও এর TexturePacker-ধাঁচের মেটাডেটা তৈরি করে। out/_preview/ ডিরেক্টরিতে পিক্সেল গ্রিডসহ বড় প্রিভিউ থাকে।

লাইভ ভিউয়ার ব্যবহার করুন

আপনার আর্ট ফাইলের জন্য ডেভেলপমেন্ট সার্ভার চালু করুন:

node bin/pxl.js serve art.px.js

ডিফল্টভাবে ভিউয়ারটি 4321 পোর্টে পাওয়া যায়। প্রতিবার সংরক্ষণ করলে বিল্ড চালু হয় এবং সম্পাদিত অ্যাসেটটি ধাপে ধাপে পুনরায় চালানো হয়। আউটপুট নিষ্ক্রিয় না করলে সার্ভারটি বিল্ড কমান্ডের মতো একই out/ ফাইলও লেখে।

অন্য পোর্ট বা আউটপুট ডিরেক্টরি নির্বাচন করতে ব্যবহার করুন:

node bin/pxl.js serve art.px.js --port 5000 --out generated

ডিস্কে তৈরি অ্যাসেট না লিখে ভিউয়ার ব্যবহার করতে:

node bin/pxl.js serve art.px.js --no-out

CLI কমান্ডগুলো দেখুন

নির্বাচিত অ্যাসেট বিল্ড করুন

বিল্ড কমান্ডটি গন্তব্য ডিরেক্টরি, নির্বাচিত অ্যাসেট, আউটপুট স্কেল এবং প্রিভিউয়ের জন্য অপশন গ্রহণ করে:

pxl build <art.px.js> [--out DIR] [--only a,b] [--scale N] [--no-preview]

উদাহরণস্বরূপ, মূল স্কেলের চার গুণে শুধু দুটি নামযুক্ত অ্যাসেট বিল্ড করুন:

node bin/pxl.js build art.px.js --only slime,slime_red --scale 4

স্প্রাইট টেক্সট হিসেবে পরিদর্শন করুন

ascii কমান্ডটি একটি অ্যাসেটকে প্যালেট কী হিসেবে অনুভূমিক ও উল্লম্ব রুলারসহ প্রিন্ট করে। পৃথক পিক্সেল শনাক্ত করার সময় এটি কার্যকর:

node bin/pxl.js ascii art.px.js slime

প্রজেক্টের সংজ্ঞাগুলো তালিকাভুক্ত করুন

অ্যাসেট, গ্রুপ এবং শিটের সঙ্গে তাদের সোর্স অবস্থান দেখাতে list ব্যবহার করুন:

node bin/pxl.js list art.px.js

উন্নত ওয়ার্কফ্লো টিপস

TypeScript আর্ট ফাইল ব্যবহার করুন

আর্ট প্রজেক্টে .js অথবা .ts—যেকোনোটি ব্যবহার করা যায়। .px.ts ফাইলের জন্য এডিটর কমপ্লিশন দিতে রিপোজিটরিতে types/pxl.d.ts অন্তর্ভুক্ত রয়েছে।

আর্টওয়ার্ক পুনর্ব্যবহার ও রূপান্তর করুন

অ্যাসেটগুলোর সাধারণ কাঠামো থাকলে গ্রিড বারবার লেখা এড়িয়ে চলুন। একটি বেস স্প্রাইট থেকে ভ্যারিয়েন্ট তৈরি করুন, বিকল্প রঙের স্কিমের জন্য প্যালেট অদলবদল ব্যবহার করুন, এবং প্রয়োজনে ফ্লিপ, রোটেশন, পুনর্ব্যবহারযোগ্য _parts ও stamp ব্যবহার করুন।

নির্ধারিত ফলদায়ক প্রক্রিয়াগত টুল ব্যবহার করুন

DSL-এ গ্রেডিয়েন্ট, ডিথারিং, নয়েজ, স্ক্যাটার ব্রাশ, টাইলম্যাপ এবং পুনরুৎপাদনযোগ্য সিডসহ র‍্যান্ডম গ্রুপ রয়েছে। বিল্ডগুলোর মধ্যে জেনারেট করা ডিটেইল স্থির রাখতে চাইলে পুনরুৎপাদনযোগ্য র‍্যান্ডমনেস বিশেষভাবে কার্যকর।

লেয়ারে দৃশ্য তৈরি করুন

বড় কম্পোজিশনের ক্ষেত্রে প্রতিটি অপারেশন একটি সমতল অ্যাসেটে রাখার বদলে দৃশ্য ও লেয়ার ব্যবহার করুন। pxl কাস্ট-শ‍্যাডো ও লাইট লেয়ার, পাশাপাশি প্রতিটি লেয়ারের PNG এক্সপোর্ট সমর্থন করে। সম্পূর্ণ API-এর জন্য reference.md দেখুন।

বাছাই করে অ্যানিমেশন ও আলো যোগ করুন

অ্যানিমেশন ফ্রেমগুলোকে একটি বেস স্প্রাইটের ওপর প্যাচ হিসেবে প্রকাশ করা যায়, ফলে একই ধরনের ফ্রেমে পুনরাবৃত্তি কমে। pxl এই সংজ্ঞাগুলোকে স্ট্রিপ, JSON ট্যাগ এবং অ্যানিমেটেড GIF-এ রূপান্তর করতে পারে। ল্যাম্প, গ্লো ও নরমাল-ভিত্তিক রিলিফের জন্য নির্দিষ্ট lighting guide অনুসরণ করুন।

AI এজেন্টের সঙ্গে pxl ব্যবহার করুন

রিপোজিটরিটি একটি এজেন্ট স্কিল হিসেবে কাজ করার জন্য তৈরি। প্রস্তাবিত ধাপ হলো একটি আর্ট ফাইল লেখা, সেটি বিল্ড করা, প্রিভিউ পরিদর্শন করা এবং সোর্সে সংশোধন আনা। লাইভ ভিউয়ার এই ওয়ার্কফ্লোটি রিয়েল টাইমে দৃশ্যমান করে।

সব Claude Code প্রজেক্টের জন্য স্কিলটি ইনস্টল করতে:

git clone https://github.com/crsolver/claude-pxl.git ~/.claude/skills/pxl-pixel-art

শুধু বর্তমান প্রজেক্টের জন্য ইনস্টল করতে:

git clone https://github.com/crsolver/claude-pxl.git .claude/skills/pxl-pixel-art

Codex, Cursor বা অন্য কোনো এজেন্টের জন্য এজেন্টকে SKILL.md-এর নির্দেশনা দিন এবং CLI পাথ হিসেবে node <path-to-pxl>/bin/pxl.js নির্দিষ্ট করুন। ব্রাউজারে আর্টওয়ার্ক তৈরি হওয়া দেখতে চাইলে এজেন্টকে pxl serve চালু করতে বলুন।

ডেভেলপমেন্ট কমান্ড

আপনি যদি pxl নিজেই পরিবর্তন করতে চান, এর ডেভেলপমেন্ট ডিপেন্ডেন্সি ইনস্টল করে চেক চালান:

npm install
npm run check

ডেভেলপমেন্ট ডিপেন্ডেন্সির মধ্যে TypeScript এবং Node.js টাইপ ডেফিনিশন রয়েছে। রিপোজিটরি গ্যালারি পুনরায় তৈরি করতে চালান:

node scripts/gallery.ts

উপসংহার

pxl পিক্সেল আর্টকে সোর্স কোড হিসেবে বিবেচনা করার একটি সংক্ষিপ্ত উপায় দেয়। একটি প্যালেট ও টেক্সট-গ্রিড স্প্রাইট দিয়ে শুরু করুন, সেটিকে PNG ও স্প্রাইট-শিট অ্যাসেটে বিল্ড করুন এবং দ্রুত প্রতিক্রিয়ার জন্য লাইভ ভিউয়ার খোলা রাখুন। প্রজেক্ট বড় হলে রানটাইম ডিপেন্ডেন্সি যোগ না করেই পুনর্ব্যবহারযোগ্য ভ্যারিয়েন্ট, ড্রয়িং প্রিমিটিভ, লেয়ারযুক্ত দৃশ্য, অ্যানিমেশন, আলো এবং AI-সহায়িত পুনরাবৃত্তির লুপ যোগ করতে পারবেন।