Як упакувати спрайт-лист: безкоштовні інструменти (2026)

Спрайт-лист (sprite sheet) - це одне зображення, що містить багато менших зображень. Атлас текстур - та сама ідея, але поруч лежить файл даних, який вказує, де розташований кожен кадр: його назву, позицію, розмір, а іноді й те, чи його було обрізано або повернуто. На практиці люди вживають обидва терміни для одного й того самого, а кожен рушій і кожен інструмент пакування називає це трохи по-різному.

Цей туторіал розповідає, як упакувати спрайт-лист безкоштовними інструментами, які налаштування визначають, чи виглядатиме все правильно в грі, як завантажити результат у Phaser 3, Unity, Godot і чистому CSS, а також які помилки трапляються найчастіше. Наприкінці є невеликий розділ для тих, хто продає паки спрайтів.

Навіщо взагалі пакувати спрайти

Причина однакова на всіх платформах: менше окремих елементів, з якими доводиться працювати обладнанню чи браузеру.

Менше draw calls у грі. Рендерер зазвичай може об'єднати спрайти з однією текстурою в один виклик малювання. Якщо кожен кадр кожного персонажа - окреме зображення, рендерер змушений постійно перемикати текстури, і об'єднання не працює. Розмістіть їх в одному атласі, і десятки спрайтів можна відправити разом.
Менше запитів у вебі. Завантаження сорока маленьких іконок як сорока файлів означає сорок запитів. Один спрайт-лист - це один запит і одне декодування. HTTP/2 здешевив багато дрібних запитів порівняно з минулим, але одне зображення все одно простіше кешувати й попередньо завантажувати.
Менше марно витраченої пам'яті. Старіші GPU та деякі мобільні драйвери округлюють текстури до наступного степеня двійки. Зображення 130 на 70 пікселів може зайняти в пам'яті 256 на 128. Пакування багатьох зображень в один вдало підібраний за розміром атлас марнує набагато менше.
Простіше керування ресурсами. Одну пару файлів (зображення плюс дані) легше версіонувати, постачати й завантажувати, ніж папку з сотнями кадрів.

Пакувати не завжди варто. Одне фонове зображення чи спрайт, що вже й так величезний, нічого не виграє від атласу. Виграш дають багато маленьких зображень, які малюються разом.

Безкоштовні інструменти для пакування спрайт-листів

Щоб отримати хороший атлас, платити не потрібно. У таблиці нижче перелічено інструменти, про які йдеться тут. «Безкоштовно» означає, що ви можете створити придатний до використання атлас без купівлі ліцензії; у деяких з них є платні тарифи з додатковими функціями.

Інструмент	Працює з	Типовий результат	Вартість
TexturePacker	Phaser, Pixi, Unity, Godot, Cocos, CSS та багато інших	PNG + JSON, XML, файли для конкретних рушіїв	Безкоштовний базовий режим, платні функції Pro
Free Texture Packer (free-tex-packer)	Phaser, Pixi, універсальний JSON, XML, CSS	PNG + JSON hash або array, XML	Безкоштовно, відкритий код
Aseprite	Будь-який рушій, що читає дані кадрів у JSON	PNG + JSON hash або array	Платно, є вихідний код для самостійної компіляції
Unity Sprite Atlas	Лише Unity	Внутрішній атлас, що створюється під час збірки чи запуску	Вбудовано в Unity
Godot AtlasTexture	Лише Godot	Ресурс, що вказує на ділянку текстури	Вбудовано в Godot
CSS-спрайт власноруч	Браузери	Один PNG або SVG + CSS background-position	Безкоштовно

Якщо з таблиці запам'ятати лише одне: коли ваша ціль - JavaScript-рушій на кшталт Phaser чи Pixi, Free Texture Packer покриває майже все безкоштовно. Коли ви працюєте в Unity або Godot, спершу скористайтеся власною системою атласів рушія і звертайтеся до зовнішнього пакувальника лише тоді, коли потрібне те, чого вона не вміє.

Крок за кроком: пакування у Free Texture Packer

Free Texture Packer - це десктопний застосунок (є також вебверсія), який бере папку із зображеннями й створює атлас. Це добрий вибір за замовчуванням для вебігор, бо він має пресети експорту для поширених JavaScript-рушіїв.

Підготуйте кадри. Експортуйте кожен кадр як окремий PNG із прозорістю. Назвіть їх так, щоб вони правильно сортувалися: run_00.png, run_01.png тощо. Числа з нулями попереду важливі; без них run_10 стоятиме перед run_2.
Додайте папку. Перетягніть папку в застосунок. Назви підпапок зазвичай стають частиною назви кадру, що зручно для групування (hero/run_00.png).
Виберіть формат експорту. Для Phaser 3 оберіть пресет Phaser 3 або JSON hash. JSON array теж підходить; різницю пояснено нижче.
Задайте padding і extrude. Почніть із 2 пікселів padding і 1 пікселя extrude. Чому саме так, пояснюється в розділі про налаштування.
Вирішіть щодо обрізання та обертання. Обрізання прибирає прозорі краї та економить місце. Обертання дозволяє пакувальнику повертати кадри на 90 градусів, щоб вмістити більше. Залишайте обертання вимкненим, якщо ваш рушій чітко не підтримує повернуті кадри в цьому форматі.
Встановіть максимальний розмір. 2048 на 2048 - безпечна межа для більшості платформ, зокрема телефонів. Якщо кадри не вміщуються, розділіть їх на кілька атласів, а не піднімайте ліміт навмання.
Експортуйте. Ви отримаєте зображення та файл даних з однаковою базовою назвою. Зберігайте їх разом.

TexturePacker працює за тією самою схемою: додайте спрайти, виберіть формат даних зі свого довгого списку фреймворків, налаштуйте padding і обрізання, а потім опублікуйте. Деякі розширені опції позначено як Pro, і застосунок повідомить, коли вибране налаштування потребує ліцензії. Для простого атласу з PNG і JSON безкоштовного режиму достатньо.

Експорт з Aseprite

Якщо ви малюєте піксель-арт в Aseprite, для багатьох проєктів можна обійтися без окремого пакувальника. Скористайтеся File, Export Sprite Sheet. У діалозі ви обираєте розкладку (за рядками, за стовпцями, щільну), які шари й теги включити, відступ по краях і між формами та чи обрізати. На вкладці виводу можна записати файл даних JSON поруч із зображенням у вигляді hash або array.

JSON також містить ваші теги анімацій з діапазонами кадрів і тривалістю кожного кадру, яку ви задали на часовій шкалі. Деякі рушії та плагіни вміють читати це напряму, що позбавляє вас від ручного введення номерів кадрів. Коли ви працюєте з кількома файлами, поширена схема така: експортувати кожного персонажа з Aseprite окремими кадрами або смугою, а потім упакувати все разом універсальним пакувальником, щоб уся гра використовувала менше текстур.

Налаштування, які справді мають значення

Більшість візуальних помилок з атласами походить від чотирьох-п'яти налаштувань. Правильно їх виставити - ось справжня майстерність.

Padding і extrude

Коли GPU семплює текстуру з увімкненою фільтрацією, він змішує сусідні пікселі. На краю кадру сусід може належати наступному кадру в атласі. У результаті на межі спрайта з'являється тонка лінія хибного кольору, яку часто видно лише під час руху камери або масштабування спрайта. Це називається bleeding (просочування).

Padding додає порожній простір між кадрами, щоб не було чужого, з чим можна змішатися. Extrude повторює назовні зовнішній ряд пікселів кожного кадру, тож якщо семплер таки виходить за край, він підхоплює колір самого кадру. Для тайлів, які мають стикуватися впритул, саме extrude прибирає видимі шви. Два пікселі padding і один extrude - розумна відправна точка; збільшуйте їх, якщо ви користуєтеся mipmap-ами або сильно зменшуєте спрайти.

Обрізання

Обрізання зрізає прозорі краї й записує в файл даних початковий розмір і зміщення. Потім рушій розміщує обрізаний кадр на належне місце. Це суттєво економить місце для персонажів із порожнім простором навколо. Підступ: якщо ваш рушій або завантажувач ігнорує дані обрізання, анімації тремтітимуть, бо кожен кадр має інший розмір. Phaser, Pixi та поширені пакувальники правильно обробляють це у форматах JSON hash і array. Якщо спрайт тремтить на місці, насамперед перевірте обрізання.

Обертання

Дозвіл пакувальнику повертати кадри на 90 градусів може вмістити більше на тому самому листі. Рушій має повернути їх назад під час малювання, а не кожен завантажувач це робить. Якщо кадри з'являються боком, вимкніть обертання. Заощаджене місце рідко виправдовує зусилля на налагодження.

Степінь двійки та максимальний розмір

Сучасні десктопні GPU без проблем працюють з текстурами, розміри яких не є степенем двійки, і WebGL 2 теж. Розміри, що є степенем двійки (512, 1024, 2048, 4096), залишаються безпечним вибором, коли потрібні mipmap-и на старіших платформах, коли ви використовуєте стиснуті формати текстур, що їх очікують, або коли ви не певні щодо обладнання. Щодо максимального розміру, 2048 на 2048 підтримується майже скрізь. 4096 на 4096 працює на більшості сучасних пристроїв, але на бюджетних телефонах може завантажуватися повільно або просто відхилятися. Якщо ваша гра орієнтована на мобільні пристрої, тримайте атласи розміром 2048 і використовуйте кілька таких.

Піксель-арт і фільтрація

Піксель-арт слід малювати з семплінгом найближчого сусіда, а не з лінійною фільтрацією, інакше він стане розмитим. У Phaser установіть pixelArt: true у конфігурації гри. У Unity виставте режим фільтра текстури на Point і вимкніть стиснення для невеликих листів. У Godot встановіть фільтр текстури Nearest на вузлі або в налаштуваннях проєкту. З семплінгом найближчого сусіда bleeding трапляється рідше, але padding усе одно допомагає, коли спрайти рухаються до дробових позицій.

Формати експорту: JSON hash, JSON array, XML

Зображення майже завжди є PNG. Формати відрізняються у файлі даних.

JSON hash зберігає кадри як об'єкт з назвою кадру як ключем: "frames": { "run_00.png": { ... } }. Легко шукати за назвою.
JSON array зберігає кадри як список, кожен із полем filename. Він гарантує порядок, який подобається деяким інструментам.
Формати XML, як-от у стилі Starling / Sparrow, перелічують кожну підтекстуру з атрибутами x, y, ширина і висота. Phaser може завантажувати цей стиль через load.atlasXML.

Phaser 3 читає і JSON hash, і JSON array одним і тим самим викликом load.atlas, тож для Phaser вибір майже не має значення. Оберіть один і дотримуйтеся його в усьому проєкті.

Завантаження атласу в Phaser 3

Ось мінімальна сцена, яка завантажує атлас, розміщує з нього спрайт і будує анімацію бігу з пронумерованих кадрів.

class GameScene extends Phaser.Scene {
  preload() {
    // image and data file exported by the packer
    this.load.atlas('hero', 'assets/hero.png', 'assets/hero.json');
  }

  create() {
    this.anims.create({
      key: 'run',
      frames: this.anims.generateFrameNames('hero', {
        prefix: 'run_',
        start: 0,
        end: 7,
        zeroPad: 2,
        suffix: '.png'
      }),
      frameRate: 12,
      repeat: -1
    });

    const player = this.add.sprite(200, 300, 'hero', 'run_00.png');
    player.play('run');
  }
}

const config = {
  type: Phaser.AUTO,
  width: 800,
  height: 600,
  pixelArt: true,
  scene: GameScene
};

new Phaser.Game(config);

Назви кадрів у generateFrameNames мають точно збігатися з назвами в JSON, включно з розширенням, якщо пакувальник його зберіг. Відкрийте JSON один раз і погляньте; більшість попереджень «missing frame» виникає через префікс або суфікс, що не збігається.

Unity Sprite Atlas і Godot AtlasTexture

У Unity створіть Sprite Atlas через меню Create у розділі 2D, а потім перетягніть папки чи окремі спрайти до його списку об'єктів для пакування. В інспекторі атласу є padding, опція дозволу обертання та опція щільного пакування (tight packing). Щільне пакування слідує контуру спрайта, а не його прямокутнику, і економить місце, але може обрізати спрайти незвичної форми, тож перевірте результат. Ваші спрайти зберігають власні посилання в сценах і префабах; Unity підставляє атлас під час збірки. Переконайтеся, що пакування спрайтів увімкнено в налаштуваннях редактора проєкту, інакше ви не побачите ефекту в режимі гри.

У Godot AtlasTexture - це ресурс, що вказує на прямокутну ділянку іншої текстури. Ви можете створити його в інспекторі, призначити великий лист як його атлас і задати ділянку. Для анімованих персонажів редактор SpriteFrames, який використовує AnimatedSprite2D, може нарізати лист на сітку й додати кадри напряму, що часто швидше, ніж створювати багато ресурсів AtlasTexture вручну. Для карт тайлів редактор TileSet працює безпосередньо з листом і має власні налаштування відстані та поля.

CSS-спрайти для вебу

Для іконок на вебсайті спрайт - це одне зображення з усіма іконками та CSS, що показує потрібну частину. Багато пакувальників можуть експортувати таблицю стилів; її також можна написати вручну.

.icon {
  width: 32px;
  height: 32px;
  background-image: url('/img/icons.png');
  background-repeat: no-repeat;
}
.icon-cart   { background-position: 0 0; }
.icon-search { background-position: -32px 0; }
.icon-user   { background-position: -64px 0; }

Для екранів із високою щільністю пікселів експортуйте лист удвічі більшого розміру та встановіть background-size на початкові розміри, щоб кожна іконка залишалася чіткою. Для простих одноколірних іконок SVG-спрайт з елементами <symbol> та <use> часто кращий вибір, ніж PNG, бо масштабується без додаткових файлів.

Типові помилки

Тонкі лінії на краях спрайтів. Bleeding через фільтрацію. Додайте padding і extrude або переключіть піксель-арт на семплінг найближчого сусіда.
Анімація тремтить на місці. Обрізані кадри, а завантажувач не читає зміщення обрізання, або кадри експортовано з різними розмірами полотна. Тримайте однакове полотно для кожної анімації або переконайтеся, що дані обрізання використовуються.
Кадри з'являються повернутими. Пакувальник їх повернув, а завантажувач не повертає назад. Вимкніть обертання.
Атлас працює на комп'ютері, але порожній на телефоні. Лист перевищує максимальний розмір текстури пристрою. Розділіть його на листи 2048.
Попередження «Frame missing». Назви не збігаються через префікс, суфікс, підпапку або відсутні нулі попереду.
Перепакування змінює все. Позиції в листі зсуваються, коли ви додаєте кадр. Завжди завантажуйте кадри за назвою, ніколи за жорстко прописаними координатами, і наступне перепакування нічого не зламає.
Один гігантський атлас для всієї гри. Групування за рівнем чи за екраном зменшує використання пам'яті, адже ви завантажуєте лише те, що потрібно поточній сцені.

Якщо ви продаєте паки спрайтів

Покупці користуються різними рушіями та різними пакувальниками, тож найкорисніший пак працює з усіма. Кілька звичок роблять пак легшим для купівлі та використання:

Постачайте обидві форми. Додайте окремі кадри як роздільні PNG-файли та упакований атлас із його JSON. Ті, хто перепаковує зі своїми налаштуваннями, хочуть окремі кадри; ті, хто хоче просто вставити й працювати, хочуть атлас.
Вказуйте факти в описі товару. Розмір кадру в пікселях, кількість кадрів в анімації, padding і extrude в атласі, чи кадри обрізано, формат даних (JSON hash, JSON array, XML) та частоту кадрів, під яку створено пак.
Тримайте передбачувані назви. З нулями попереду, малими літерами, з одним префіксом на анімацію. Покупці писатимуть код, спираючись на ці назви.
Додайте прев'ю. Анімований GIF або коротке відео кожної анімації відповідає на головне запитання ще до купівлі.
Чітко вкажіть ліцензію. Зазначте, чи можна використовувати пак у комерційних іграх.

Якщо ви хочете побачити, як інші творці презентують свої паки, або виставити на продаж власні, категорія 2D-спрайтів на Getly - одне з місць, де продаються паки спрайтів.

Пакування спрайт-листа займає кілька хвилин, коли налаштування зрозумілі: послідовні назви кадрів, трохи padding і extrude, обережне використання обрізання, жодного обертання, якщо ви не впевнені, що завантажувач його підтримує, і розмір атласу, який приймає цільове обладнання. Якщо все це зробити правильно, атлас відходить на задній план, а саме це від нього й потрібно.

Як упакувати спрайт-лист: безкоштовні інструменти (2026)

Навіщо взагалі пакувати спрайти

Безкоштовні інструменти для пакування спрайт-листів

Крок за кроком: пакування у Free Texture Packer

Експорт з Aseprite