World · UI direction

Selected hero: сейчас и дорогой эталон

Один и тот же экран 430×932. Слева — честный кадр из Defold. Справа — арт-направление для следующей итерации: изменено только свечение Aiko, а остальная композиция сохранена пиксель-в-пиксель.

Сейчас

Defold runtime
Текущее selected-состояние в Defold

Эталон

Живой preview
Концепт дорогого анимированного selected-состояния
Свет из корпусаBloom обнимает поверхность карточки и не живёт отдельной «вермишелью».
Два слояМягкое внешнее сияние плюс тонкая резкая внутренняя грань дают дорогую глубину.
Спокойная анимацияПосле увеличения геометрия фиксируется; течёт интенсивность света и едва заметные частицы.

Как это называется и как собрать

В целом это animated selection frameUI VFX. Отдельные картинки внутри него — спрайты. В Defold они лежат в атласе и отображаются как дочерние GUI box nodes карточки. Это не одна тяжёлая анимация, а композиция четырёх простых слоёв.

1

Aura sprite

Прозрачный PNG с широким мягким bloom. Режим смешивания SCREEN; меняется только alpha.

2

Edge sprite

Тонкая резкая рамка. Для карточек одного размера — обычный sprite; 9-slice нужен только для растягиваемых панелей.

3

Flow mask

Одна маленькая маска плюс GUI material. Shader гонит яркий участок по периметру без десятков полноразмерных кадров.

4

Motes

2–4 редкие частицы только при выборе. Это опциональный GUI ParticleFX, не постоянный снег вокруг карточки.

Рекомендуемая реализация для World

  • heroSelectionFx.ts — самостоятельный UI-компонент, принадлежащий карточке.
  • hero-card-aura.png, hero-card-edge.png и hero-card-flow-mask.png — прозрачные assets в существующем menu_ui.atlas.
  • hero-selection.material + fragment shader — двигают свет по маске через параметр phase.
  • heroChoiceCard.ts сообщает только setSelected(true/false); сам эффект не знает про API, героев или навигацию.
  • У выбранной карточки появится один дополнительный material batch. Поскольку selected всегда один, это нормальная цена.

Ритм анимации

0–420 msКарточка один раз увеличивается до 1.12; aura и edge мягко проявляются.
Idle 1.5 sAura дышит между 0.58 и 0.90. Размер рамки больше не меняется.
Flow 3.2 sОдин световой акцент спокойно проходит полный периметр.
DeselectСвет гаснет за 180–220 ms, карточка возвращается к масштабу 1.
// heroSelectionFx.ts — схема, а не дублирование логики карточки
gui.set_blend_mode(aura, gui.BLEND_SCREEN)
gui.set_blend_mode(flow, gui.BLEND_ADD)
gui.set_material(flow, 'hero_selection_fx')

setSelected(true)
// root: scale 1 → 1.12 once
// aura: alpha 0 → .90, then .58 ↔ .90
// edge: alpha 0 → .98

update(dt)
// phase = (phase + dt / 3.2) % 1
gui.set(flow, 'effect_params', vmath.vector4(phase, intensity, 0, 0))

Опирается на официальные возможности Defold: GUI nodes, blend modes и Slice 9, stable GUI API, GUI material constants. Flipbook тоже возможен, но для непрерывного travelling light shader легче и экономнее по памяти.