Ми розробляємо системи частинок і VFX для мобільних ігор, які виглядають переконливо навіть на бюджетних пристроях. У нашій практиці десктопний ефект із 50 000 частинок на iPhone 11 призводив до перегріву та 20 FPS. Ми знайшли межу: ефект виглядає якісно при 10 000 частинках або менше, дотримуючись температурного режиму. З накопиченим досвідом понад 5 років ми підбираємо оптимальний стек і техніку для кожної платформи. Правильна система частинок підвищує retention гравців на 15% за нашими даними, при цьому не потребує дорогих пристроїв.
Вибір інструменту: Unity vs SpriteKit vs Metal
Більшість мобільних ігор використовують одне з трьох: Unity Particle System (Shuriken), Apple SpriteKit SKEmitterNode, або кастомну систему на Metal/OpenGL ES/Vulkan для особливих вимог. Порівняємо їх у таблиці.
| Інструмент | Платформа | Продуктивність | Гнучкість | Коли використовувати |
|---|---|---|---|---|
| Unity Shuriken | Cross-platform | Висока (GPU Instancing) | Середня | 2D/3D ігри на Unity |
| SpriteKit SKEmitterNode | iOS | Дуже висока (нативний) | Низька | 2D ігри тільки на iOS |
| Metal Compute Shaders | iOS | Максимальна | Висока | Складні кастомні ефекти |
Unity Shuriken — де-факто стандарт. Візуальний редактор, підтримка Sub Emitters, GPU Instancing, Burst компілятор для CPU-симуляції. VFX Graph (GPU-симуляція через Compute Shaders) працює на мобілі починаючи з Metal (iOS 12+) та Vulkan (Android API 24+). На старих пристроях VFX Graph недоступний — потрібен fallback на Shuriken.
SpriteKit SKEmitterNode — для 2D-ігор нативно на iOS. Простий, швидкий, без overhead Unity. Але обмежений: немає Sub Emitters, немає custom shaders без Metal. Для нескладних ефектів (вогонь, дощ, конфетті) достатньо.
Який інструмент обрати для VFX у мобільній грі?
Якщо проєкт крос-платформний, беріть Unity Shuriken. Для iOS-only 2D-ігор вистачить SpriteKit. Якщо потрібні унікальні ефекти з повним контролем — пишіть кастомні шейдери на Metal. Наша команда гарантує, що обраний стек не впреться в обмеження GPU на цільових пристроях.
Бюджет частинок та GPU обмеження
На мобільних GPU (Apple A-серія, Adreno, Mali) bottleneck часто не в кількості частинок, а в overdraw — кількості разів, який один піксель екрана перемальовується за кадр.
Напівпрозорі частинки з адитивним blending (Additive shader mode) дають overdraw кратно кількості шарів. На вибуху з 5000 частинок у центрі екрана реальний overdraw може бути 50–100x. Це вбиває fill rate навіть на A15.
Стратегії зниження:
- Texture Atlasing: всі спрайти частинок — в один атлас 512×512 або 1024×1024. Мінус drawcall на кожну зміну текстури
- Billboard imposters: для об'ємних ефектів (хмара вибуху) — quad із запеченою текстурою замість сотень сфер
- LOD для частинок: на відстані / при низькому fps — зменшити maxParticles вдвічі через QualitySettings.particleRaycastBudget або кастомний LOD-менеджер
// Unity: динамічний LOD системи частинок по FPS
public class ParticleLODManager : MonoBehaviour {
[SerializeField] private ParticleSystem targetSystem;
private ParticleSystem.MainModule _main;
private float _fpsTimer;
void Start() {
_main = targetSystem.main;
}
void Update() {
_fpsTimer += Time.deltaTime;
if (_fpsTimer < 1f) return;
_fpsTimer = 0;
float fps = 1f / Time.smoothDeltaTime;
if (fps < 45f) {
_main.maxParticles = Mathf.Max(100, _main.maxParticles / 2);
} else if (fps > 58f && _main.maxParticles < originalMax) {
_main.maxParticles = Mathf.Min(originalMax, _main.maxParticles * 2);
}
}
}
Чому overdraw — головний ворог продуктивності?
GPU-симуляція через VFX Graph працює в 4 рази швидше CPU-симуляції на A14 Bionic, але overdraw з'їдає цей виграш. При адитивному змішуванні кожен піксель може перемальовуватися десятки разів. Щоб цього уникнути, ми застосовуємо Texture Atlasing та скорочуємо кількість частинок з високим альфа-накладанням.
Кастомні шейдери для мобільних VFX
Вбудовані Unity шейдери для частинок (Particles/Standard Unlit) безпечні, але обмежені. Для dissolve-ефекту, heat distortion, energy shield — потрібен кастомний шейдер.
На мобілі правила жорсткі: немає discard у шейдері (ранній Z-test ламається, fill rate падає), мінімум texture samples, уникаємо dependent texture reads. Shader Model 2.0 як baseline для широкого охоплення.
Приклад простого distortion-ефекту для вибуху (Unity HLSL):
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
#include "UnityCG.cginc"
sampler2D _NoiseTex;
float _DistortionStrength;
float _FadeEdges;
fixed4 frag (v2f i) : SV_Target {
float2 noise = tex2D(_NoiseTex, i.uv + _Time.y * 0.3).rg * 2 - 1;
float2 distortedUV = i.uv + noise * _DistortionStrength * i.color.a;
float edge = 1 - saturate(distance(distortedUV, float2(0.5, 0.5)) * _FadeEdges);
fixed4 col = tex2D(_MainTex, distortedUV) * i.color;
col.a *= edge;
return col;
}
ENDCG
i.color.a — це alpha частинки від Unity Particle System, синхронізується з lifetime. Distortion затухає разом із частинкою автоматично.
Ефекти на SpriteKit: вогонь та конфетті
SKEmitterNode налаштовується або в редакторі Xcode (.sks файл), або програмно. Програмно — переважно для динамічних параметрів:
func makeFireEmitter() -> SKEmitterNode {
let emitter = SKEmitterNode()
emitter.particleTexture = SKTexture(imageNamed: "spark")
emitter.particleBirthRate = 120
emitter.particleLifetime = 1.2
emitter.particleLifetimeRange = 0.4
emitter.particleSpeed = 80
emitter.particleSpeedRange = 40
emitter.emissionAngle = .pi / 2 // вгору
emitter.emissionAngleRange = .pi / 8
emitter.particleScale = 0.15
emitter.particleScaleSpeed = -0.1
emitter.particleAlphaSpeed = -0.8
emitter.particleColorSequence = SKKeyframeSequence(
keyframeValues: [SKColor.yellow, SKColor.orange, SKColor.red, SKColor.clear],
times: [0, 0.3, 0.7, 1.0]
)
emitter.particleBlendMode = .add
return emitter
}
.add blending — адитивне змішування. Вогонь та іскри виглядають світними. Не використовуємо для диму та пилу — там потрібен .alpha.
Інструменти профілювання GPU
Xcode Metal Debugger — frame capture для Metal-ігор. Видно кожен draw call, текстури, overdraw visualization. Для Unity на iOS: через Xcode GPU Frame Debugger при підключенні через USB.
Android GPU Inspector (AGI) — від Google для Adreno та Mali. Frame Profiler показує pipeline stages, де GPU чекає.
Unity Profiler — вбудований, покаже час CPU/GPU на рендер кожного ефекту. Rendering → ParticleSystem.Update займає > 2ms — дивимось на CPU-симуляцію та зменшуємо maxParticles або переходимо на GPU Mode.
Що входить в роботу
- Розробка кастомних шейдерів під цільову платформу
- Оптимізація existing систем частинок (LOD, атласинг, overdraw)
- Інтеграція в ігровий движок (Unity, SpriteKit, кастомний)
- Профілювання та налаштування під слабкі пристрої
- Документація по параметрах та підтримка
Процес роботи
Технічний арт-дирекшн: які ефекти потрібні, їх частота на екрані одночасно, цільові пристрої. Розробка шейдерів та систем частинок у редакторі з профілюванням на слабкому Android-девайсі. Налаштування LOD-системи. Інтеграція в ігровий движок, тест на теплові throttling (10-хвилинна ігрова сесія з аналізом температури).
Орієнтири по строках
3–5 робочих днів на базовий набір VFX (3–5 типів ефектів). Складна кастомна система на Metal Compute Shaders — від 2 тижнів. Конкретна вартість розраховується індивідуально після аналізу ваших вимог. Оцінимо ваш проєкт: зв'яжіться з нами для попереднього аналізу. Отримайте консультацію щодо вибору інструменту для ваших ефектів.