Creating 2D Sprite Atlases for Game Performance

We create sprite atlases for 2D games, delivering a 3–10× reduction in draw calls on mobile devices. Ten individual sprites in a folder mean ten texture bindings during rendering. The same ten sprites in one atlas mean a single binding. The performance difference on mobile is enormous. Our extensive experience in gamedev with over 50 optimized titles confirms that a properly built atlas reduces loading times by 40% and saves up to 70% of draw calls.

But an atlas is not just "put textures into one big one." An incorrectly composed atlas introduces artifacts, memory waste, and doesn't reduce draw calls as intended. We guarantee quality packing and platform-specific tuning.

Technical Foundation: TexturePacker

TexturePacker is the standard tool for creating sprite atlases in gamedev (source: wikipedia.org/wiki/Sprite_atlas). It supports all major engines: Unity, Godot, Cocos2d, Phaser. Key settings determine atlas quality:

Algorithm. MaxRects BestShortSideFit gives the best packing for most projects (maximum texture space utilization). Basic is faster but packs poorly. For production atlases, use MaxRects.

Padding. The gap between sprites in the atlas. Without padding, bleeding artifacts occur: when rendering, neighboring sprite pixels are captured. Standard: 2px padding. With mipmaps, use 4–8px (mipmaps blend neighboring pixels at lower levels).

Rotation. Allow TexturePacker to rotate sprites 90° for better packing. The engine must support this (Unity Sprite Atlas does; some older engines do not).

Power of Two. The final atlas dimensions must be powers of two: 512×512, 1024×1024, 2048×2048. GPUs cache power-of-two textures more efficiently. Non-standard sizes (e.g., 1000×800) on some GPUs cause automatic upscaling to the nearest power of two, wasting memory.

How to Group Sprites Correctly into Atlases

The most important decision: which sprites to combine into one atlas.

Rule of one draw call. Combine sprites that render simultaneously. UI elements of the main menu go into one atlas. Animation frames of one character go into one atlas. Tiles of one biome go into one atlas. Mixing UI, characters, and tiles into a single "general" atlas is an antipattern: it increases texture size without reducing draw calls.

Atlas size limit. 2048×2048 is safe for mobile. 4096×4096 works on most modern Android/iOS devices but has exceptions (older budget Android). Exceeding the device's maximum texture size causes a crash or degraded fallback.

Animation atlases. A sprite sheet (all animation frames in one atlas) is standard for frame-by-frame animations. TexturePacker's Sprite Sheet Export creates an atlas plus a JSON/XML file with coordinates for each frame. Unity's Sprite Editor reads this JSON via Custom Physics Shape or automatic slicing.

Why Compression Format Matters for Mobile Games

The texture storage format in the atlas is critical for performance:

Using RGBA32 for final production builds is a mistake. A 2048×2048 RGBA32 texture uses 16 MB of video memory. The same texture in ASTC 4×4 uses 2 MB — that is 8 times better memory efficiency. Multiply that by the number of atlases in your game, and you have a memory problem on mobile.

In Unity, platform-specific overrides in the Texture Importer allow setting different formats for iOS and Android without duplicating assets.

Sprite Atlas in Unity

Unity's Sprite Atlas (introduced with the Sprite Atlas feature) is a native tool requiring no external plugins. Create a SpriteAtlas asset in Project → Create → 2D → Sprite Atlas. Add folders or individual sprites to Objects for Packing. Unity automatically packs the atlas during build.

Important nuance: Sprites must either have a Packing Tag set or be directly added to the Sprite Atlas—otherwise they remain separate textures. Mixing atlas and non-atlas sprites in the same UI Canvas breaks the draw call.

Late Binding (modern Unity versions): The atlas is loaded only when a sprite it contains is first used, not at scene start. This is critical for large games with many atlases—it reduces initial scene load time.

Typical Artifacts and Their Causes

• Bleeding (edge pixelation): padding = 0, or mipmaps without increased padding.
• Empty space in atlas (>20%): suboptimal packing algorithm or incompatible sprite sizes.
• Draw calls not reduced: sprites from different atlases in the same Canvas or render batch.
• Rotation artifacts: the engine doesn't support rotation, but TexturePacker enabled it.

Deliverables

• Documentation: Detailed atlas setup guide, including TexturePacker configuration files and Unity/Godot import notes.
• Access: Source atlas projects (JSON, .psd, .tps) for future modifications.
• Training: Up to 2 hours of remote walkthrough on atlas maintenance and optimization.
• Support: One month of email support for integration issues.

Our services have helped clients save development time and budget. For example, one client saved over $2,000 in development costs after implementing our atlas optimization. Typical engagement costs range from $1,200 to $5,000 depending on project scope and asset volume.

Steps for Creating an Atlas

1. Audit current assets: list all sprites, sizes, formats.
2. Group sprites by draw call rule (same canvas, same animation, same biome).
3. Pack with TexturePacker using MaxRects, 2px padding, power-of-two.
4. Configure compression per platform (ASTC for iOS, ETC2 for Android, DXT for PC).
5. Test with Unity Frame Debugger to verify draw call reduction.

Pro tip: When using mipmaps, set padding to 4–8 pixels to avoid bleeding at lower mip levels.

Company Expertise

With over a decade of experience in game development and 50+ optimized titles shipped, we deliver proven results. Our team has contributed to projects on Steam, App Store, and Google Play, achieving up to 90% reduction in draw calls compared to individual textures and cutting load times by 40%.

Timelines

Pricing is calculated individually based on asset volume and number of platforms. We offer free project evaluation. Contact us for a consultation.

2D Art and Animation

We have encountered projects where 2D graphics accounted for 70% of the build size. Optimization started with replacing frame-by-frame with skeletal animation. But it's not just about converting sprites to Spine — you need to properly design the rig, atlas packing, and texture format. Our service is a full 2D cycle: from concept art and illustrations to final Spine animation optimized for mobile platforms.

A mobile game with 200 character animations takes up 800 MB just for textures. Google Play rejects the APK due to size. Meanwhile, half of the animations are variations of the same movement with minor differences. This is a classic problem for teams that chose frame-by-frame animation where skeletal animation provides a better result at a fraction of the size.

Our team creates 2D graphics and illustrations for games of any genre — from pixel art to realistic styles. We work with Unity, Unreal Engine, and Godot. Every animation is performance-checked: FPS budget, draw call count, texture size.

What's Included in the Service

• Concept art and illustrations — characters, environment, UI elements, promo
• Sprite animation — frame-by-frame in Aseprite with palette and frame optimization
• Skeletal animation — Spine (professional license), DragonBones for budget projects
• 2D effects — particle-based (Shuriken, VFX Graph) and shader-based (Shader Graph for URP/HDRP)
• Atlas optimization — TexturePacker, Unity Sprite Atlas, platform-specific compression (ASTC, ETC2, DXT)

How Skeletal Animation Reduces APK Size

Spine (Esoteric Software) is the de facto standard for skeletal animation in 2D games. Skeletal animation is a method where movement is defined by bones and vertex weights rather than entire frames. In Spine, a character animation with 15 animations takes about 2 MB, while frame-by-frame takes 10 MB (5 times more). Alternatives include DragonBones (free, fewer features) and the native 2D Animation package in Unity (convenient but weaker than Spine in tools).

The return on investment for a Spine Professional license is achieved when creating 15+ unique animations — each frame-by-frame would cost several times more in time and size. When scaled to a large number of animations, the savings on a single project can be substantial. Contact us — we will calculate the savings for your project.

When is Skeletal Animation More Effective than Frame-by-Frame?

The rule that works in practice: if a character has more than 15 unique animations — Spine is more efficient in size and iteration time. If the project stylistically requires frame-by-frame (pixel art, rotoscoping, cartoon style with deliberate artifacts) — Aseprite.

Mesh Deformation in Spine is one of the key features. The character bends organically, clothes fold, cheeks puff up. Workflow:

1. In Spine, create a mesh on the sprite (Tools > Mesh > Edit Mesh)
2. Assign vertex weights to bones (Weights mode)
3. Set the number of vertices based on the desired deformation detail — more vertices = smoother deformation, but higher computational cost

Path Constraints — a bone follows a curve. Used for tails, hair, tentacles, ropes — any elements that need to bend organically. IK Constraints in Spine work through a two- or three-bone chain. For limbs this is essential: the animator moves the IK target (hand position), and the shoulder-forearm-hand chain is set automatically. Without IK, animating limbs in FK takes twice as long.

Spine Integration in Unity

The official Spine-Unity runtime is paid (included in the Spine license) and actively supported. Components:

• SkeletonAnimation — main component for animation
• SkeletonMecanim — integration with Unity Animator Controller (useful for reusing Mecanim logic)
• SkeletonGraphic — for Canvas/UI (rendered via CanvasRenderer, not MeshRenderer)

An important performance point: SkeletonAnimation creates a separate Mesh per instance. With 50+ characters on screen, this is at least 50 draw calls (without batching). Solution — SkeletonAnimation Batching via SubmeshSeparator + GPU instancing, or limiting the number of simultaneously visible Spine objects.

Spine Events — synchronization mechanism: an event in animation (footstep, attack_hit, spawn_particle) is dispatched to Unity code via AnimationState.Event. Correct architecture: Spine Event → UnityEvent → sound/particle/logic. Do not hardcode synchronization by time — animation can slow down via timeScale.

How to Reduce Draw Calls in 2D UI with Atlases?

Every individual sprite in Unity creates a separate draw call. 100 UI icons without an atlas = 100 draw calls just for UI. Sprite Atlas packs sprites into a single texture, allowing batching of draw calls for objects using the same atlas. Texture atlas is a technique used in 3D and 2D to reduce texture switching.

TexturePacker vs Unity Sprite Atlas

TexturePacker (CodeAndWeb) is an external tool, more flexible in packing settings. It supports many packing algorithms, transparent pixel trimming, edge extrusion to prevent bleeding, and export to platform-specific formats (PVRTC for iOS, ETC2 for Android). The license pays for itself on the first project with atlases.

Unity Sprite Atlas (built-in) is convenient for Addressables and dynamic loading. Two modes: Master Atlas (full control) and Variant Atlas (reduced version for low-end devices via Scale Factor).

Practical packing rules:

• Group by scene/screen: everything visible at once — in one atlas. Otherwise atlas doesn't help with batching
• Maximum atlas size: 2048x2048 for mobile, 4096x4096 for PC. Larger risks issues on old GPUs
• Trim transparent pixels: mandatory. A sprite with large transparent areas wastes space in the atlas
• Padding: 2-4 pixels between sprites prevents texture bleeding during mipmapping and UV filtering

Texture Compression Formats

For atlases with many small sprites and sharp edges, ASTC 4x4 is preferable to ASTC 6x6 (fewer artifacts on fine details).

How Does 2D Asset Optimization Benefit in Practice?

Each of these points has been verified on dozens of projects: transparent pixel trimming in the atlas (saving up to 30% area), 2-4 pixel padding (eliminates bleeding), maximum atlas size 2048x2048 for mobile (stable on old GPUs), using ASTC 4x4 for iOS and ETC2 for Android, Mesh Deformation in Spine instead of extra bones for cheeks and clothing folds, grouping UI elements by screen into different atlases. Order 2D animation development with a performance guarantee — we will take into account all the nuances of your stack and platform.

What Pipeline for 2D Effects to Choose?

Particle System (Shuriken) — for most 2D effects, the built-in system is sufficient. For 2D it's important: Renderer Mode = Billboard or Horizontal Billboard, Simulation Space = World for effects that should not move with the character.

Visual Effect Graph (VFX Graph) in URP — GPU-based particles, suitable for complex effects with thousands of particles. For mobile — be cautious, requires Compute Shaders (not all devices support).

Shader Graph for 2D: dissolve effects, outline via SDF, distortion (water, heat shimmer), animated UV (lava, water). Sprite Lit Shader + custom nodes in Shader Graph — standard path for 2D in URP.

2D Animation Package (native Unity): PSDImporter for importing layers from Photoshop as separate sprites, Sprite Skin for skeletal animation inside Unity without Spine. Suitable for simple characters with a limited number of animations — if the team doesn't want to purchase a Spine license. These costs are recouped in one project if animations exceed 15.

We are ready to develop 2D graphics and animation for your game. Contact us to discuss details and get advice on asset optimization. Get an estimate of cost and timeline based on your brief — we will respond within one business day.