Атлас

Хоча для спрайтів часто використовують окремі зображення, для підвищення продуктивності їх потрібно об’єднувати в більші набори зображень, які називають атласами (atlases). Об’єднання наборів менших зображень в атласи особливо важливе на мобільних пристроях, де пам’яті й обчислювальних потужностей менше, ніж на настільних комп’ютерах або спеціалізованих ігрових консолях.

У Defold ресурс атласу — це список окремих файлів зображень, які автоматично об’єднуються в одне більше зображення.

Створення атласу

Виберіть New... ▸ Atlas у контекстному меню панелі Assets. Укажіть назву нового файлу атласу. Редактор відкриє файл у редакторі атласів. Властивості атласу відображаються на панелі Properties, де їх можна редагувати (подробиці наведено нижче).

Перш ніж використовувати атлас як джерело графіки для компонентів (components) об’єктів, таких як спрайти й компоненти ефектів частинок (ParticleFX), потрібно додати до нього зображення або анімації.

Переконайтеся, що ви додали зображення до проєкту (перетягніть файли зображень у потрібне місце на панелі Assets)

Додавання окремих зображень

Перетягніть зображення з панелі Asset в область редактора.

Або клацніть правою кнопкою миші кореневий елемент Atlas на панелі Outline.

Виберіть Add Images у контекстному меню, щоб додати окремі зображення.

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

Додані зображення відображаються списком на панелі Outline, а весь атлас можна побачити в центральній області редактора. Можливо, вам знадобиться натиснути F (або вибрати View ▸ Frame Selection у меню), щоб умістити вибране в області перегляду.

Додавання покадрових анімацій

Клацніть правою кнопкою миші кореневий елемент Atlas на панелі Outline.

Виберіть Add Animation Group у контекстному меню, щоб створити групу покадрової анімації (flipbook animation).

До атласу буде додано нову порожню групу анімації зі стандартною назвою (New Animation).

Перетягніть зображення з панелі Asset в область редактора, щоб додати їх до поточної вибраної групи.

Або клацніть правою кнопкою миші нову групу й виберіть Add Images у контекстному меню.

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

Вибравши групу анімації, натисніть Space для попереднього перегляду, а потім Ctrl/Cmd+T, щоб закрити його. За потреби налаштуйте властивості анімації на панелі Properties (див. нижче).

Ви можете змінити порядок зображень на панелі Outline, вибравши їх і натиснувши Alt + Up/down. Також можна легко створювати дублікати, копіюючи та вставляючи зображення на панелі Outline (за допомогою меню Edit, контекстного меню, що відкривається правою кнопкою миші, або сполучень клавіш).

Властивості атласу

Кожен ресурс атласу має набір властивостей. Вони відображаються на панелі Properties, коли ви вибираєте кореневий елемент на панелі Outline.

Size

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

Margin

Кількість пікселів, які потрібно додати між зображеннями.

Inner Padding

Кількість порожніх пікселів, які потрібно додати навколо кожного зображення.

Extrude Borders

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

Max Page Size

Максимальний розмір сторінки в багатосторінковому атласі. За допомогою цієї властивості можна розділити атлас на кілька сторінок, щоб обмежити його розмір, і водночас використовувати лише один виклик малювання (draw call). Цю можливість потрібно використовувати разом із матеріалами, які підтримують багатосторінкові атласи й розташовані в /builtins/materials/*_paged_atlas.material.

Rename Patterns

Розділений комами (´,´) список шаблонів пошуку й заміни, кожен із яких має вигляд search=replace. Початкову назву кожного зображення (базову назву файлу) буде перетворено за цими шаблонами. (Наприклад, шаблон hat=cat,_normal= перейменує зображення з назвою hat_normal на cat). Це корисно для узгодження анімацій між атласами.

Нижче наведено приклади різних налаштувань властивостей для атласу з чотирма квадратними зображеннями розміром 64x64. Зверніть увагу, як розмір атласу збільшується до 256x256, щойно зображення перестають уміщуватися в 128x128, через що багато місця на текстурі залишається невикористаним.

Властивості зображення

Кожне зображення в атласі має набір властивостей:

Id

Ідентифікатор зображення (лише для читання).

Size

Ширина й висота зображення (лише для читання).

Pivot

Опорна точка зображення (в одиницях). Верхній лівий кут — (0,0), а нижній правий — (1,1). Стандартне значення — (0.5, 0.5). Опорна точка може виходити за межі діапазону 0-1. Це точка, за якою центрується зображення, коли воно використовується, наприклад, у спрайті. Ви можете змінити опорну точку, перетягуючи її маркер в області редактора. Маркер відображається лише тоді, коли вибрано одне зображення. Утримуючи Shift під час перетягування, можна ввімкнути прив’язку.

Sprite Trim Mode

Спосіб рендерингу спрайта. Стандартно спрайт відображається як прямокутник (властивість Sprite Trim Mode має значення Off). Якщо спрайт містить багато прозорих пікселів, ефективніше може бути відображати його як непрямокутну фігуру з кількістю вершин від 4 до 8. Зауважте, що обрізання спрайтів не працює разом зі спрайтами slice-9.

Image

Шлях до самого зображення.

Властивості анімації

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

Id

Назва анімації.

Fps

Швидкість відтворення анімації, виражена в кадрах на секунду (FPS).

Flip horizontal

Віддзеркалює анімацію по горизонталі.

Flip vertical

Віддзеркалює анімацію по вертикалі.

Playback

Визначає спосіб відтворення анімації:

• None — анімація не відтворюється, відображається перше зображення.
• Once Forward — анімація відтворюється один раз від першого зображення до останнього.
• Once Backward — анімація відтворюється один раз від останнього зображення до першого.
• Once Ping Pong — анімація відтворюється один раз від першого зображення до останнього, а потім назад до першого.
• Loop Forward — анімація відтворюється циклічно від першого зображення до останнього.
• Loop Backward — анімація відтворюється циклічно від останнього зображення до першого.
• Loop Ping Pong — анімація відтворюється циклічно від першого зображення до останнього, а потім назад до першого.

Створення текстур і атласів під час виконання

Текстуру й атлас можна створити під час виконання.

Створення ресурсу текстури під час виконання

Використовуйте resource.create_texture(path, params), щоб створити новий ресурс текстури:

  local params = {
    width  = 128,
    height = 128,
    type   = graphics.TEXTURE_TYPE_2D,
    format = graphics.TEXTURE_FORMAT_RGBA,
  }
  local my_texture_id = resource.create_texture("/my_custom_texture.texturec", params)

Після створення текстури можна скористатися resource.set_texture(path, params, buffer), щоб задати її пікселі:

  local width = 128
  local height = 128
  local buf = buffer.create(width * height, { { name=hash("rgba"), type=buffer.VALUE_TYPE_UINT8, count=4 } } )
  local stream = buffer.get_stream(buf, hash("rgba"))

  for y=1, height do
      for x=1, width do
          local index = (y-1) * width * 4 + (x-1) * 4 + 1
          stream[index + 0] = 0xff
          stream[index + 1] = 0x80
          stream[index + 2] = 0x10
          stream[index + 3] = 0xFF
      end
  end

  local params = { width=width, height=height, x=0, y=0, type=graphics.TEXTURE_TYPE_2D, format=graphics.TEXTURE_FORMAT_RGBA, num_mip_maps=1 }
  resource.set_texture(my_texture_id, params, buf)

Текстуру можна використовувати безпосередньо в компоненті моделі за допомогою go.set():

  go.set("#model", "texture0", my_texture_id)

Створення атласу під час виконання

Якщо текстуру потрібно використовувати в компоненті спрайта, її спочатку потрібно додати до атласу. Використовуйте resource.create_atlas(path, params), щоб створити атлас:

  local params = {
    texture = texture_id,
    animations = {
      {
        id          = "my_animation",
        width       = width,
        height      = height,
        frames      = { 1 },
      }
    },
    geometries = {
      {
        vertices  = {
          0,     0,
          0,     height,
          width, height,
          width, 0
        },
        uvs = {
          0,     0,
          0,     height,
          width, height,
          width, 0
        },
        indices = {0,1,2,0,2,3}
      }
    }
  }
  local my_atlas_id = resource.create_atlas("/my_atlas.texturesetc", params)

  -- assign the atlas to the 'sprite' component on the same go
  go.set("#sprite", "image", my_atlas_id)

  -- play the "animation"
  sprite.play_flipbook("#sprite", "my_animation")

Елементи frames — це індекси в таблиці geometries, нумерація яких починається з 1. Список може повторно використовувати геометрії, змінювати їхній порядок або пропускати їх, чого не можна виразити застарілими полями інтервалу frame_start і frame_end. Функція resource.get_atlas() повертає frames; використовуйте таке саме подання, передаючи дані атласу до resource.set_atlas() або resource.create_atlas(). Функції встановлення й створення все ще приймають поля інтервалу для сумісності, але в новому коді слід використовувати frames.