Pixel Editor

Спрайти й тайлмапи, піксель за пікселем: кадри, onion skinning, палітри, колізії для кожного тайла, карти нормалей, 9-slice та експорт у GIF чи Aseprite.

Одним реченням#

Редактор спрайтів і тайлмап, створений для роботи як із 32×32, так і з 1024×1024 однаково зручно, з кадрами анімації та інструментами кольору, які розуміють палітри.

Компонування#


Menu bar	File · Edit · View · Plugins
Mode tabs	Sprite і Tilemap
Toolbar	New, скасувати/повторити, розмір полотна, кадрування, зведення шарів, віддзеркалення по горизонталі й вертикалі, сітка, імпорт, експорт, Save
Options row	розмір пензля, форма пензля, непрозорість, розділений вигляд і пресети
Left rail	олівець, фігури, заливка, градієнт, текст, виділення, піпетка, пара кольорів, палітра
Centre	полотно, з невеликим індикатором поточного інструмента й кольорів, і Preview у масштабі 1:1
Right	Layers, потім Effects, Normal map, Reference і Modes
Bottom	timeline кадрів, а потім панель палітри
Status bar	розмір полотна, активний шар, масштаб

Що ви тут робите#

Малюйте#

Space + перетягування панорамує, колесо прокрутки масштабує, 0 скидає вигляд. Пензель має розмір і форму (за замовчуванням квадратну) та непрозорість. Панель попереднього перегляду показує спрайт у масштабі 1:1, поки ви працюєте зі збільшенням, і це єдиний чесний вигляд піксельного спрайту.

Шари#

Іменовані, з можливістю переставляти, кожен зі своїм режимом змішування й непрозорістю, плюс кольорова мітка і поле фільтра на випадок, коли їх багато. Effects застосовується недеструктивно.

Анімуйте#

Timeline уздовж низу є стрічкою кадрів. Додавайте, дублюйте, видаляйте, переставляйте; встановлюйте duration in milliseconds для кожного кадру; відтворюйте вперед, назад або ping-pong. Індикатор показує, що з цього виходить: 1 frame • 100 ms • ~10 fps.

Onion ледь помітно показує сусідні кадри під поточним, і саме так цикл ходьби не «пливе».

Колір#

Панель палітри вартує того, щоб її вивчити:


Palette	робочий набір, з лічильником і + Add
Recent	те, що ви обирали останнім часом
Shades	градієнт від світлого до темного, згенерований з поточного кольору
Harmony	пропозиції компліментарних, тріадних та аналогових поєднань
Ramp	градієнт, який ви будуєте й зберігаєте

Поточний колір редагується як hex.

Тайлмапи#

Вкладка Tilemap перемикає з малювання спрайту на розкладання його тайлами. Результат іде в Engine, у якого є власний редактор тайлмап для самого рівня.

Карти нормалей#

Розділ Normal map виводить карту нормалей із спрайту, тож 2D-спрайт можна освітлити в Engine, а не залишати його пласким.

Референс#

Перетягніть зображення в розділ Reference, і воно ляже позаду полотна, поки ви малюєте поверх нього.

Панелі#

Їх дев'ять, і саме останні чотири перетворюють спрайт на ігровий асет:


Tool Palette	інструменти
Layers	стек
Timeline	кадри анімації
Reference	зображення позаду полотна
Effects	недеструктивні ефекти для шару
Tileset	побудувати тайлсет із полотна, з обраним розміром тайла
Tilemap	розкласти ці тайли в карту
Collisions	форми колізій для кожного тайла
Normal Map	вивести й відредагувати карту нормалей

Тайлсети й тайлмапи#

Панель Tileset нарізає полотно на тайли (за замовчуванням 16 px); панель Tilemap розкладає їх у карту з шарами і може змінювати її розмір.

Тайлмапи зберігаються як .tilemap і експортуються двома способами: as one file або separately: карта як JSON і кожен тайлсет як окреме зображення, і саме цього зазвичай хоче зовнішній рушій.

Колізії#

Кожен тайл несе форму колізії, намальовану поверх тайлсету, а не оголошену в коді:


Full	весь тайл бере участь у колізії
None	прохідний
Top / Bottom / Left / Right half	часткова колізія
Slope up / Slope down	нахилена колізія

Show Collisions накладає їх поверх, і весь набір експортується як JSON. Зробивши це тут, ви передаєте в Engine тайлмапу, яка вже знає, де може ходити гравець.

Карти нормалей#

Generate Normal Map виводить її зі спрайту, з параметром strength; далі Normal Map Editor дає змогу вручну намалювати напрям нормалей (P), і це єдиний спосіб виправити місця, де автоматичний прохід помиляється.

9-slice і pivot#

9-Slice guides позначають ділянки UI-спрайту, які розтягуються, а Pivot / Origin встановлює точку, навколо якої спрайт обертається і прив'язується. Обидва подорожують разом зі спрайтом в Engine.

Симетрія#

Mirror X і Mirror Y малюють обидві сторони одразу: горизонтально, вертикально, обидва варіанти або радіально.

Градієнти кольору та палітри#

Модальне вікно Color Ramp будує градієнт правильно, а не на око, а палітри імпортуються з .gpl (формат палітр GIMP, у якому постачається більшість піксель-артових палітр).

Експорт#

Format
PNG	один кадр
GIF	анімація, всюди
APNG	анімація, зі справжньою альфою
Aseprite	назад в Aseprite, шари незмінні
Atlas / sprite sheet	ігровий рушій
`.tilemap`	карта, разом або розділена на JSON + зображення

Файли, які вона читає й записує#


Власний формат	`.editor`
Імпортує	`.png`, `.jpg`, `.aseprite`, `.tilemap`, `.gpl` (палітри)
Експортує	`.png`, `.gif`, APNG, `.aseprite`, спрайт-атлас, `.tilemap` (разом або розділено), JSON колізій

Передача роботи іншим студіям#

Produces: піксель-арт. Accepts: піксель-арт і зображення.

Піксель-арт приймають Inkwell, Composer, Animator, Matter і Engine: спрайт-лист може потрапити прямо в гру без проміжного файлу.

Робота з кимось іншим#

Pixel Editor синхронізується операція за операцією: дані сцени, асети, анімації та скрипти.

Обмеження і типові пастки#

Масштаб не є роздільною здатністю. Рядок стану показує справжній розмір полотна; Preview показує його в масштабі 1:1.
М'який пензель не є піксельним пензлем. Непрозорість нижче 100% згладить ваші краї (anti-alias), а це зазвичай не те, що потрібно для спрайту.
Тривалість кадру задається для кожного кадру окремо, а не для всієї анімації. Цикл із 12 кадрів по 100 мс кожен йде на ~10 fps, незалежно від того, що роблять інші.