Pixel Editor
স্প্রাইট ও টাইলম্যাপ, পিক্সেল বাই পিক্সেল, ফ্রেম, onion skinning, প্যালেট, প্রতি-টাইল কলিশন, নরমাল ম্যাপ, 9-slice, এবং GIF বা Aseprite এক্সপোর্ট।
এক লাইনে#
একটি স্প্রাইট ও টাইলম্যাপ এডিটর, 1024×1024-এর মতোই আরামে 32×32-এ কাজ করার জন্য তৈরি, প্যালেট বোঝে এমন অ্যানিমেশন ফ্রেম ও কালার টুলিং সহ।
লেআউট#
| মেনু বার | File · Edit · View · Plugins |
| Mode ট্যাব | Sprite এবং Tilemap |
| টুলবার | New, undo/redo, ক্যানভাস সাইজ, crop, layer flatten, flip horizontal ও vertical, গ্রিড, import, export, Save |
| Options সারি | ব্রাশ সাইজ, ব্রাশ শেপ, opacity, split view, এবং প্রিসেট |
| বাম রেইল | pencil, shapes, fill, gradient, text, selection, eyedropper, colour pair, palette |
| কেন্দ্র | ক্যানভাস, বর্তমান টুল ও কালারের একটি ছোট read-out সহ, এবং 1:1-এ একটি Preview |
| ডান | Layers, তারপর Effects, Normal map, Reference এবং Modes |
| নিচে | ফ্রেম timeline, তারপর palette বার |
| স্ট্যাটাস বার | ক্যানভাস সাইজ, active layer, জুম |
এখানে আপনি যা করেন#
আঁকা#
Space + drag প্যান করে, scroll wheel জুম করে, 0 ভিউ রিসেট করে। ব্রাশের একটি সাইজ ও একটি শেপ আছে (ডিফল্টভাবে square), এবং একটি opacity। আপনি জুম করে কাজ করার সময় preview প্যানেলটি স্প্রাইটটিকে 1:1-এ দেখায়, যা একটি pixel স্প্রাইটের একমাত্র সৎ ভিউ।
Layers#
নাম দেওয়া, পুনর্বিন্যাসযোগ্য, প্রতিটির একটি blend mode ও একটি opacity সহ, সেই সঙ্গে অনেক থাকলে একটি colour ট্যাগ ও একটি filter বক্স। Effects অ-ধ্বংসাত্মকভাবে প্রয়োগ হয়।
Animate#
নিচের timelineটি ফ্রেমের একটি স্ট্রিপ। যোগ, ডুপ্লিকেট, ডিলিট, পুনর্বিন্যাস করুন; প্রতি ফ্রেমে একটি duration in milliseconds সেট করুন; forwards, backwards বা ping-pong চালান। Read-out আপনাকে বলে দেয় সেটা মোট কত হয়, 1 frame • 100 ms • ~10 fps।
Onion বর্তমানটির নিচে পাশের ফ্রেমগুলো ম্লানভাবে দেখায়, এভাবেই আপনি একটি walk cycle-কে সরে যাওয়া থেকে আটকান।
Colour#
Palette বারটাই সেই অংশ যা শিখে নেওয়ার মতো লাভজনক:
| Palette | working set, একটি সংখ্যা ও + Add সহ |
| Recent | আপনি সম্প্রতি যা বেছেছেন |
| Shades | বর্তমান কালার থেকে তৈরি একটি light-to-dark ramp |
| Harmony | complementary, triadic ও analogous সাজেশন |
| Ramp | আপনার তৈরি করা ও রাখা একটি ramp |
বর্তমান কালারটি hex হিসেবে এডিটযোগ্য।
Tilemaps#
Tilemap ট্যাবটি একটি স্প্রাইট আঁকা থেকে সেটিকে tile হিসেবে সাজানোয় বদলে দেয়। ফলাফলটি যায় Engine-এ, যার লেভেলের জন্য নিজস্ব একটি tilemap এডিটর আছে।
Normal maps#
Normal map সেকশনটি স্প্রাইট থেকে একটি normal map বের করে, তাই একটি 2D স্প্রাইট চ্যাপ্টা থাকার বদলে Engine-এ আলোকিত হতে পারে।
Reference#
Reference সেকশনে একটি ইমেজ ফেলুন আর আপনি তার উপর আঁকার সময় সেটি ক্যানভাসের পেছনে বসে থাকে।
প্যানেলগুলো#
নয়টি, আর শেষ চারটিই একটি স্প্রাইটকে একটি গেম অ্যাসেটে পরিণত করে:
| Tool Palette | টুলগুলো |
| Layers | স্ট্যাক |
| Timeline | অ্যানিমেশন ফ্রেম |
| Reference | ক্যানভাসের পেছনের একটি ইমেজ |
| Effects | একটি লেয়ারের উপর অ-ধ্বংসাত্মক effect |
| Tileset | একটি বেছে নেওয়া tile সাইজে ক্যানভাস থেকে একটি tileset তৈরি করুন |
| Tilemap | সেই tileগুলো একটি ম্যাপে সাজান |
| Collisions | প্রতি-টাইল collision শেপ |
| Normal Map | একটি normal map বের করুন ও এডিট করুন |
Tileset ও tilemap#
Tileset প্যানেল ক্যানভাসটিকে tile-এ কাটে (ডিফল্টভাবে 16 px); Tilemap প্যানেল সেগুলোকে লেয়ারসহ একটি ম্যাপে সাজায়, এবং এটি রিসাইজ করতে পারে।
Tilemap .tilemap হিসেবে সংরক্ষিত হয়, এবং দুই উপায়ে এক্সপোর্ট হয়: একটি ফাইল হিসেবে, বা আলাদাভাবে: ম্যাপটি JSON হিসেবে আর প্রতিটি tileset তার নিজস্ব ইমেজ হিসেবে, যা একটি বাইরের ইঞ্জিন সাধারণত চায়।
Collisions#
প্রতিটি tile একটি collision শেপ বহন করে, কোডে ঘোষণা না করে tileset-এর উপর আঁকা:
| Full | পুরো tile-এ collision |
| None | পার হওয়া যায় |
| Top / Bottom / Left / Right half | আংশিক collision |
| Slope up / Slope down | কৌণিক collision |
Show Collisions এগুলো overlay করে, আর পুরো সেটটি JSON হিসেবে এক্সপোর্ট হয়। এখানে এটা করলে Engine এমন একটি tilemap পায় যা আগে থেকেই জানে খেলোয়াড় কোথায় হাঁটতে পারে।
Normal maps#
Generate Normal Map স্প্রাইট থেকে একটি বের করে, একটি strength সহ; তারপর Normal Map Editor আপনাকে হাতে (P) normal দিক আঁকতে দেয়, যা automatic pass ভুল করা জায়গাগুলো ঠিক করার একমাত্র উপায়।
9-slice ও pivot#
9-Slice guides একটি UI স্প্রাইটের stretchable অঞ্চল চিহ্নিত করে, আর Pivot / Origin সেই বিন্দু সেট করে যাকে ঘিরে স্প্রাইটটি ঘোরে ও নোঙর করে। দুটোই স্প্রাইটের সাথে Engine-এ যায়।
Symmetry#
Mirror X ও Mirror Y দুই পাশে একসাথে আঁকে: horizontal, vertical, both, বা radial।
Colour ramp ও palette#
Color Ramp মোডালটি চোখে দেখে না বানিয়ে একটি ramp সঠিকভাবে তৈরি করে, আর palette .gpl থেকে ইমপোর্ট হয় (GIMP palette ফরম্যাট, যাতে বেশিরভাগ pixel-art palette আসে)।
Export করা#
| ফরম্যাট | কিসের জন্য |
|---|---|
| PNG | একটি একক ফ্রেম |
| GIF | একটি অ্যানিমেশন, সবখানে |
| APNG | একটি অ্যানিমেশন, real alpha সহ |
| Aseprite | আবার Aseprite-এ, লেয়ার অক্ষত রেখে |
| Atlas / sprite sheet | একটি গেম ইঞ্জিন |
.tilemap | ম্যাপ, একসাথে বা JSON + ইমেজে ভাগ করা |
যেসব ফাইল এটি পড়ে ও লেখে#
| নেটিভ ফরম্যাট | .editor |
| ইমপোর্ট | .png, .jpg, .aseprite, .tilemap, .gpl (palette) |
| এক্সপোর্ট | .png, .gif, APNG, .aseprite, sprite atlas, .tilemap (একসাথে বা ভাগ করা), collision JSON |
অন্য স্টুডিওতে কাজ পাঠানো#
তৈরি করে pixel art। গ্রহণ করে pixel art ও ইমেজ।
Pixel art Inkwell, Composer, Animator, Matter এবং Engine-এ গৃহীত হয়: একটি sprite sheet একটি ফাইলের মধ্য দিয়ে ঘুরপথ না নিয়েই সরাসরি একটি গেমে যেতে পারে।
অন্য কারও সাথে কাজ করা#
Pixel Editor অপারেশন বাই অপারেশন সিঙ্ক হয়: scene data, অ্যাসেট, অ্যানিমেশন ও স্ক্রিপ্ট।
সীমাবদ্ধতা ও সাধারণ সমস্যা#
- Zoom রেজোলিউশন নয়। স্ট্যাটাস বার আসল ক্যানভাস সাইজ দেখায়; Preview সেটিকে 1:1-এ দেখায়।
- একটি soft ব্রাশ একটি pixel ব্রাশ নয়। 100%-এর নিচে opacity আপনার প্রান্তগুলোকে anti-alias করে দেবে, যা একটি স্প্রাইটে সাধারণত আপনি চান না।
- Frame duration প্রতি ফ্রেমে, প্রতি অ্যানিমেশনে নয়। বাকিরা যাই করুক না কেন, প্রতিটি 100 ms-এর একটি 12-ফ্রেম cycle ~10 fps-এ চলে।