Pixel Editor
Sprites और tilemaps, पिक्सेल दर पिक्सेल: फ़्रेम, onion skinning, पैलेट, per-tile collisions, normal maps, 9-slice, और GIF या Aseprite एक्सपोर्ट।
एक लाइन में#
एक sprite और tilemap एडिटर, जो 32×32 पर उतनी ही आसानी से काम करने के लिए बना है जितनी 1024×1024 पर, साथ ही एनिमेशन फ़्रेम और ऐसे कलर टूल जो पैलेट को समझते हैं।
ले-आउट#
| Menu bar | File · Edit · View · Plugins |
| Mode tabs | Sprite और Tilemap |
| Toolbar | New, undo/redo, कैनवस साइज़, crop, लेयर flatten, फ़्लिप horizontal और vertical, grid, import, export, Save |
| Options row | ब्रश साइज़, ब्रश शेप, ओपैसिटी, स्प्लिट व्यू, और प्रीसेट |
| Left rail | pencil, shapes, fill, gradient, text, selection, eyedropper, colour pair, palette |
| Centre | कैनवस, मौजूदा टूल और रंगों की एक छोटी सी जानकारी के साथ, और 1:1 पर एक Preview |
| Right | Layers, फिर Effects, Normal map, Reference और Modes |
| Bottom | फ़्रेम timeline, फिर पैलेट बार |
| Status bar | कैनवस साइज़, सक्रिय लेयर, ज़ूम |
आप यहाँ क्या करते हैं#
ड्रॉ करें#
Space + drag पैन करता है, स्क्रॉल व्हील ज़ूम करता है, 0 व्यू को रीसेट
करता है। ब्रश की एक साइज़ और एक शेप (डिफ़ॉल्ट रूप से square) होती है, और एक
ओपैसिटी। जब आप ज़ूम इन करके काम कर रहे होते हैं, प्रीव्यू पैनल sprite को 1:1
पर दिखाता है, जो किसी पिक्सेल sprite को देखने का इकलौता ईमानदार तरीक़ा है।
Layers#
नाम वाली, क्रम बदली जा सकने वाली, हर एक का अपना blend mode और अपनी opacity, साथ ही एक कलर टैग और, जब बहुत सारी हों तो एक फ़िल्टर बॉक्स। Effects non-destructively लगते हैं।
एनिमेट करें#
नीचे मौजूद timeline फ़्रेमों की एक पट्टी है। जोड़ें, डुप्लिकेट करें, डिलीट करें, क्रम बदलें; हर फ़्रेम के लिए मिलीसेकंड में एक duration सेट करें; आगे, पीछे या ping-pong चलाएँ। रीड-आउट बताता है कि कुल मिलाकर यह क्या बनता है, 1 frame • 100 ms • ~10 fps।
Onion मौजूदा फ़्रेम के नीचे पड़ोसी फ़्रेम धुंधले तौर पर दिखाता है, यही वह तरीक़ा है जिससे कोई walk cycle भटकने से बचती है।
रंग#
पैलेट बार वह हिस्सा है जिसे सीखना ख़ुद ही फ़ायदा देता है:
| Palette | working सेट, एक गिनती और + Add के साथ |
| Recent | जो आपने हाल ही में चुना |
| Shades | मौजूदा रंग से बनाया गया एक हल्के-से-गहरे का ramp |
| Harmony | complementary, triadic और analogous सुझाव |
| Ramp | एक ramp जो आप बनाते और रखते हैं |
मौजूदा रंग hex के रूप में एडिट किया जा सकता है।
Tilemaps#
Tilemap टैब किसी sprite को ड्रॉ करने से बदलकर उसे tiles के रूप में बिछाने पर ले जाता है। नतीजा Engine के पास जाता है, जिसके पास ख़ुद लेवल के लिए अपना ख़ुद का tilemap एडिटर है।
Normal maps#
Normal map सेक्शन sprite से एक normal map निकालता है, ताकि किसी 2D sprite को चपटा रहने के बजाय Engine में लाइट किया जा सके।
Reference#
किसी इमेज को Reference सेक्शन में डालें और वह कैनवस के पीछे बैठ जाती है, जबकि आप उसके ऊपर ड्रॉ करते हैं।
पैनल#
इनमें से नौ हैं, और आख़िरी चार वे हैं जो किसी sprite को गेम एसेट में बदलते हैं:
| Tool Palette | टूल |
| Layers | स्टैक |
| Timeline | एनिमेशन फ़्रेम |
| Reference | कैनवस के पीछे की एक इमेज |
| Effects | किसी लेयर पर non-destructive इफ़ेक्ट |
| Tileset | चुने गए tile साइज़ पर, कैनवस से एक tileset बनाना |
| Tilemap | उन tiles को एक मैप में बिछाना |
| Collisions | per-tile collision shapes |
| Normal Map | एक normal map निकालना और एडिट करना |
Tilesets और tilemaps#
Tileset पैनल कैनवस को tiles में काटता है (डिफ़ॉल्ट रूप से 16 px); Tilemap पैनल उन्हें लेयर्स के साथ एक मैप में बिछाता है, और उसे रीसाइज़ भी कर सकता है।
Tilemaps .tilemap के रूप में सेव होते हैं, और दो तरीक़ों से एक्सपोर्ट होते
हैं: as one file, या separately: मैप JSON के रूप में और हर tileset
अपनी ख़ुद की इमेज के रूप में, जो एक बाहरी इंजन को आमतौर पर चाहिए होता है।
Collisions#
हर tile एक collision shape रखता है, जो कोड में घोषित करने के बजाय tileset के ऊपर ड्रॉ की जाती है:
| Full | पूरा tile टकराता है |
| None | पार किया जा सकने वाला |
| Top / Bottom / Left / Right half | आंशिक collision |
| Slope up / Slope down | तिरछा collision |
Show Collisions इन्हें ओवरले करता है, और पूरा सेट JSON के रूप में एक्सपोर्ट होता है। यह यहाँ करने का मतलब है कि Engine को एक ऐसा tilemap मिलता है जो पहले से जानता है कि खिलाड़ी कहाँ चल सकता है।
Normal maps#
Generate Normal Map sprite से एक निकालता है, एक strength के साथ;
फिर Normal Map Editor आपको हाथ से (P) normal दिशा पेंट करने देता है,
जो उन जगहों को ठीक करने का इकलौता तरीक़ा है जहाँ ऑटोमैटिक पास ग़लत करता है।
9-slice और pivot#
9-Slice guides किसी UI sprite के खिंचने लायक हिस्सों को चिह्नित करती हैं, और Pivot / Origin वह बिंदु तय करता है जिसके चारों ओर sprite घूमती और टिकती है। दोनों sprite के साथ Engine में जाती हैं।
Symmetry#
Mirror X और Mirror Y दोनों तरफ़ एक साथ पेंट करते हैं: horizontal, vertical, both, या radial।
Colour ramps और palettes#
Color Ramp मोडल किसी ramp को अंदाज़े से नहीं, बल्कि ठीक तरह से बनाता है,
और पैलेट .gpl से इम्पोर्ट होते हैं (GIMP पैलेट फ़ॉर्मेट, जिसमें
ज़्यादातर पिक्सेल-आर्ट पैलेट आते हैं)।
एक्सपोर्ट करना#
| Format | किसके लिए |
|---|---|
| PNG | एक सिंगल फ़्रेम |
| GIF | एनिमेशन, हर जगह |
| APNG | एनिमेशन, असली alpha के साथ |
| Aseprite | वापस Aseprite में, लेयर्स बरक़रार |
| Atlas / sprite sheet | किसी गेम इंजन के लिए |
.tilemap | मैप, साथ में या JSON + इमेज में बँटा हुआ |
यह क्या पढ़ता और लिखता है#
| Native format | .editor |
| Imports | .png, .jpg, .aseprite, .tilemap, .gpl (पैलेट) |
| Exports | .png, .gif, APNG, .aseprite, sprite atlas, .tilemap (साथ में या बँटा हुआ), collision JSON |
दूसरे स्टूडियो को काम भेजना#
बनाता है पिक्सेल आर्ट। स्वीकार करता है पिक्सेल आर्ट और इमेज।
पिक्सेल आर्ट को Inkwell, Composer, Animator, Matter और Engine स्वीकार करते हैं: कोई sprite sheet बिना किसी फ़ाइल से होकर गुज़रे सीधे किसी गेम में जा सकती है।
किसी और के साथ काम करना#
Pixel Editor operation by operation सिंक होता है: सीन डेटा, एसेट्स, एनिमेशन और स्क्रिप्ट।
सीमाएँ और आम अड़चनें#
- ज़ूम रिज़ॉल्यूशन नहीं है। स्टेटस बार असली कैनवस साइज़ दिखाता है; Preview इसे 1:1 पर दिखाता है।
- एक soft ब्रश कोई pixel ब्रश नहीं है। 100% से कम opacity आपके किनारों को anti-alias कर देगी, जो आमतौर पर किसी sprite पर मनचाहा नहीं होता।
- फ़्रेम duration हर फ़्रेम की अपनी होती है, पूरी एनिमेशन की नहीं। एक 12-फ़्रेम साइकिल, हर फ़्रेम 100 ms पर, ~10 fps पर चलती है, बाक़ी चाहे जो भी करें।