Lesson 3: Mobile Art Pipeline

Welcome back! Now that your Unity project is set up and optimized for mobile, it's time to create the visual foundation for your puzzle game. In this lesson, you'll learn how to design mobile-optimized art assets that look great on all devices while maintaining excellent performance.

What You'll Learn

Design mobile-optimized art assets for puzzle games
Create scalable UI elements that work across different screen sizes
Set up sprite atlases for better performance
Implement art style guidelines for consistency
Optimize assets for mobile memory and performance

Prerequisites

Unity 2022.3 LTS or newer
Completed Lesson 2: Unity Mobile Project Setup
Basic understanding of image editing (optional - we'll cover free tools)
Your game concept from Lesson 1

Why Mobile Art Pipeline Matters

Mobile games face unique challenges compared to desktop games:

Limited memory - Mobile devices have less RAM than desktop computers
Varying screen sizes - Your game needs to look good on phones, tablets, and different aspect ratios
Battery life - Complex graphics drain battery faster
Performance - Smooth 60 FPS is essential for puzzle games

A well-designed art pipeline addresses all these challenges while creating beautiful, engaging visuals.

Step 1: Define Your Art Style

Before creating assets, define your art style. This ensures consistency across all your game elements.

Art Style Considerations

Color Palette

Choose 5-7 primary colors for your game
Use high contrast for puzzle elements (easier to see and distinguish)
Consider colorblind-friendly palettes
Test colors on actual mobile devices (screens vary)

Art Style Options

Minimalist - Simple shapes, clean lines, lots of white space
Cartoon - Bold outlines, vibrant colors, playful characters
Pixel Art - Retro aesthetic, small file sizes, nostalgic appeal
Flat Design - Modern, clean, no gradients or shadows
Hand-drawn - Organic feel, unique personality

Pro Tip: For puzzle games, minimalist or flat design often works best because they're easy to read, perform well, and scale beautifully.

Create Your Style Guide

Create a simple document (or Unity scene) with:

Color swatches - Your primary colors with hex codes
Font choices - 1-2 fonts for UI and game elements
Shape language - Rounded vs. sharp corners, organic vs. geometric
Texture style - Smooth, textured, or patterned
Reference images - Games or art that inspire your style

Step 2: Set Up Asset Organization

Proper organization makes your project maintainable and scalable.

Folder Structure

In your Unity project, create this folder structure:

Assets/
├── Art/
│   ├── Sprites/
│   │   ├── Characters/
│   │   ├── PuzzlePieces/
│   │   ├── UI/
│   │   └── Backgrounds/
│   ├── Textures/
│   ├── Materials/
│   └── Animations/
├── Prefabs/
│   ├── PuzzleElements/
│   └── UI/
└── Scripts/

Import Settings Best Practices

For each sprite asset, configure import settings:

Select your sprite in the Project window
Open Inspector and find Texture Importer settings
Configure settings:
- Texture Type: Sprite (2D and UI)
- Sprite Mode: Single (or Multiple if using sprite sheets)
- Pixels Per Unit: 100 (standard for mobile)
- Filter Mode: Bilinear (smooth scaling)
- Compression:
  - Android: ASTC 4x4 block
  - iOS: ASTC 4x4 block
  - Both: Automatic (Unity chooses best format)

Pro Tip: Use ASTC compression for mobile - it provides excellent quality with small file sizes.

Step 3: Create Mobile-Optimized Sprites

Mobile sprites need to be optimized for performance while maintaining visual quality.

Sprite Size Guidelines

Puzzle Pieces

Base size: 128x128 to 256x256 pixels
Maximum: 512x512 pixels (rare cases)
Why: Puzzle pieces are viewed up close, need detail

UI Elements

Buttons: 256x256 pixels (scales well)
Icons: 128x128 pixels
Backgrounds: Match target device resolution (but use 9-slicing for scalability)

Characters (if applicable)

Idle sprite: 256x256 pixels
Animation frames: 128x128 to 256x256 pixels

Power of 2 Rule

Always use power-of-2 dimensions (64, 128, 256, 512, 1024) when possible. This ensures:

Better compression
Faster loading
GPU-friendly memory alignment

Exception: UI elements can be any size, but power-of-2 is still recommended.

Sprite Atlas Setup

Sprite atlases combine multiple sprites into one texture, reducing draw calls and improving performance.

Create Sprite Atlas:

Right-click in Project window → Create → 2D → Sprite Atlas
Name it: PuzzleGameAtlas
Configure settings:
- Include in Build: Checked
- Allow Rotation: Unchecked (unless needed)
- Read/Write Enabled: Unchecked (better performance)
- Generate Mip Maps: Unchecked (2D games don't need mipmaps)
Add Objects: Drag sprite folders into "Objects for Packing"
Apply: Click "Pack Preview" to see results

Pro Tip: Create separate atlases for UI and game sprites - UI updates less frequently and can be kept separate.

Step 4: Design Scalable UI Elements

Mobile UI must work across different screen sizes and aspect ratios.

Canvas Scaler Setup

Select Canvas in your scene
Add Canvas Scaler component (if not present)
Configure:
- UI Scale Mode: Scale With Screen Size
- Reference Resolution: 1080x1920 (portrait) or 1920x1080 (landscape)
- Screen Match Mode: Match Width Or Height
- Match: 0.5 (balances width and height scaling)

9-Slicing for Scalable UI

9-slicing allows UI elements to scale without distortion.

Create 9-Sliced Sprite:

Select sprite in Project window
Sprite Editor → Set borders (green lines)
Configure borders:
- Left/Right: 10-20% of width
- Top/Bottom: 10-20% of height
Apply and use in Image component

Common 9-Sliced Elements:

Buttons
Panels
Backgrounds
Progress bars

Safe Area Considerations

Modern phones have notches and rounded corners. Design with safe areas in mind:

using UnityEngine;

public class SafeAreaAdapter : MonoBehaviour
{
    void Start()
    {
        RectTransform rectTransform = GetComponent<RectTransform>();
        Rect safeArea = Screen.safeArea;

        Vector2 anchorMin = safeArea.position;
        Vector2 anchorMax = safeArea.position + safeArea.size;

        anchorMin.x /= Screen.width;
        anchorMin.y /= Screen.height;
        anchorMax.x /= Screen.width;
        anchorMax.y /= Screen.height;

        rectTransform.anchorMin = anchorMin;
        rectTransform.anchorMax = anchorMax;
    }
}

Step 5: Create Your First Puzzle Piece Sprites

Let's create a simple puzzle piece sprite to practice the pipeline.

Option 1: Using Free Tools

Aseprite (paid but worth it) or Piskel (free web-based):

Create 128x128 pixel canvas
Design simple puzzle piece (circle, square, or custom shape)
Use your color palette
Export as PNG with transparency
Import to Unity

Option 2: Using Unity's Shape Tools

Unity's built-in tools can create simple shapes:

GameObject → 2D Object → Sprite → Square
Add Sprite Renderer component
Create Material with your color
Use as placeholder until you have final art

Option 3: Using Free Asset Packs

Unity Asset Store has free sprite packs:

Search "free 2D sprites"
Download and import
Modify colors to match your palette
Always check licensing

Step 6: Optimize for Performance

Mobile performance is critical. Here are optimization techniques:

Texture Compression

Android Settings:

Format: ASTC 4x4 block (best quality/size ratio)
Alternative: ETC2 (if ASTC not supported)

iOS Settings:

Format: ASTC 4x4 block
Alternative: PVRTC 4 bits (older devices)

Reduce Overdraw

Overdraw occurs when multiple sprites render on top of each other.

Techniques:

Use sprite sorting layers efficiently
Minimize transparent areas
Use opaque backgrounds where possible
Batch sprites with same material

Memory Management

Monitor Memory Usage:

Window → Analysis → Profiler
Check Memory tab
Look for:
- Texture memory (should be < 100MB for puzzle games)
- Mesh memory
- Audio memory

Reduce Memory:

Compress textures appropriately
Use sprite atlases
Remove unused assets
Set appropriate max texture size

Step 7: Create UI Element Prefabs

Create reusable UI prefabs for consistency and efficiency.

Button Prefab

Create Button: GameObject → UI → Button
Style it with your art assets
Add components:
- Image (with 9-sliced sprite)
- Button (configure colors)
- Text (optional label)
Save as Prefab: Drag to Prefabs/UI folder

Panel Prefab

Create Panel: GameObject → UI → Panel
Configure:
- Background sprite (9-sliced)
- Appropriate alpha/transparency
Save as Prefab

Icon Prefab

Create Image: GameObject → UI → Image
Set sprite to your icon
Configure:
- Preserve Aspect: Checked
- Set Native Size: Click button
Save as Prefab

Mini Challenge: Create Your First Asset Set

Create a complete set of assets for your puzzle game:

3 puzzle piece sprites (different shapes/colors)
1 button sprite (9-sliced)
1 background sprite (optimized for your target resolution)
1 UI panel sprite (9-sliced)

Requirements:

All sprites use your defined color palette
Sprites are power-of-2 dimensions
Proper import settings configured
Organized in correct folder structure
Added to sprite atlas

Test Your Assets:

Create a simple scene with your assets
Test on different screen sizes (use Game view aspect ratios)
Check performance in Profiler
Verify compression settings

Troubleshooting Common Issues

Sprites Look Blurry on Mobile

Causes:

Incorrect Pixels Per Unit setting
Wrong compression format
Scaling issues

Solutions:

Set Pixels Per Unit to 100
Use ASTC compression
Check Canvas Scaler settings
Ensure sprites aren't being scaled down too much

UI Elements Don't Scale Properly

Causes:

Missing Canvas Scaler
Incorrect reference resolution
Not using 9-slicing

Solutions:

Add Canvas Scaler component
Set appropriate reference resolution
Use 9-sliced sprites for scalable elements

High Memory Usage

Causes:

Uncompressed textures
Too many separate textures
Large texture sizes

Solutions:

Enable texture compression
Use sprite atlases
Reduce max texture size in import settings
Remove unused assets

Performance Issues

Causes:

Too many draw calls
Unoptimized shaders
High overdraw

Solutions:

Use sprite atlases (reduces draw calls)
Use simple shaders for UI
Minimize transparent areas
Enable sprite batching

Pro Tips for Mobile Art Pipeline

Design Workflow

Start simple - Create basic shapes first
Iterate quickly - Don't perfect one asset before moving on
Test early - Check on actual devices frequently
Get feedback - Show others your art style early

Performance Best Practices

Use sprite atlases - Essential for mobile performance
Compress everything - Mobile bandwidth and storage are limited
Optimize early - Don't wait until the end
Profile regularly - Use Unity Profiler to catch issues

Art Style Consistency

Create style guide - Reference document for all assets
Reuse elements - Same button style, same puzzle piece base
Color palette - Stick to your defined colors
Scale consistently - Use same Pixels Per Unit for similar elements

What's Next?

Congratulations! You've set up a professional mobile art pipeline. In the next lesson, you'll learn how to implement responsive touch controls and mobile input handling - bringing your puzzle game to life with intuitive mobile interactions.

Coming Up: Lesson 4 will cover touch controls, gesture recognition, and mobile input handling. You'll create smooth, responsive controls that feel natural on mobile devices.

Resources

Community Support

Discord Server: Share your art assets and get feedback
GitHub Repository: Find free sprite templates and examples
Mobile Game Development Forums: Learn from other mobile developers
Course Discussion: Show off your puzzle piece designs

Ready to make your game interactive? Continue to Lesson 4: Touch Controls & Input and learn how to create responsive mobile controls.