Creating Tilemap for Mobile Games: Complete Guide
We create tilemaps for mobile games—from tileset to a fully optimized scene with batched rendering. With over 10 years in mobile development and more than 50 tilemap projects delivered, we have a proven track record. This article covers real technical problems developers face and how we solve them. We guarantee a reduction in draw calls by at least 50% for any project using our optimization methods.
Tilemap is a system where a level is built from repeating fixed-size tiles. It's not just a visual tool—it's a pipeline from tileset creation to engine loading with batched rendering and correct collision.
How to Choose Tile Size?
Standard tile sizes: 16×16, 32×32, 64×64, or 128×128 pixels. For pixel art, use 16×16 or 32×32; for casual 2D, 64×64 or 128×128. The critical requirement is seamless edges: the right edge of a tile must exactly match the left edge of its neighbor, otherwise visible seams appear. In Aseprite or Photoshop, enable Tile Mode (View → Tile Mode in Aseprite) for real-time seam preview.
A single PNG tileset is standard—all tiles arranged in a grid on one image. In Unity, the Tilemap system works with Sprite Atlas or Tile Palette. In Tiled, the tileset is defined as one PNG with grid parameters. One texture = one draw call for the entire tilemap scene when batching is properly configured. As referenced in the Unity Tilemap Collider 2D documentation, using CompositeCollider2D merges individual collider shapes.
Autotile (Terrain Tiles in Unity, Wang Tiles in Tiled) automatically selects the correct tile based on neighbors. The artist draws 8–16 transition tiles, and the engine handles the rest.
Layer Structure
A professional tilemap is not a single layer but at least three:
- Background—sky, distant background, static without collisions. Z = -2, no collider.
- Ground—terrain, platforms. Z = 0, with TilemapCollider2D + CompositeCollider2D.
- Foreground/Details—grass, decoration above the character. Z = 2, no collisions.
CompositeCollider2D merges all individual tile colliders into one collider mesh. Without it, 100 platform tiles = 100 Box Collider2D checks per physics update. With CompositeCollider, it's one Polygon Collider. The physics performance difference can be up to 100 times fewer checks. This is a dramatic improvement—CompositeCollider2D performs up to 100x better than individual colliders.
Animated Tiles
AnimatedTile in Unity is a tile with a set of sprites and playback speed. Water, lava, flickering lights. Each AnimatedTile is a separate update cycle. Don't overuse: 50 animated water tiles on screen = 50 Coroutine or Update calls. For large water surfaces, use a shader with UV animation—much more efficient.
Level Editors and Export
- Tiled Map Editor—external level editor, exports to JSON/XML/TMX. Integrated with Unity via SuperTiled2Unity or Tiled2Unity package.
- LDtk—modern alternative to Tiled with better UX and native Unity integration (official package).
- Godot TileMap—built-in system with terrain set and autotiling support, no external tools needed.
Comparison of editors:
| Editor | Unity Integration | Autotiling | Export |
|---|---|---|---|
| Tiled | SuperTiled2Unity | Wang Tiles | JSON, TMX, XML |
| LDtk | Official package | Built-in | JSON |
| Godot TileMap | Built-in | Terrain set | Internal format |
From practice: a mobile platformer with Unity + SuperTiled2Unity. A level with 800 tiles produced 35 draw calls—unexpectedly high. The cause: the artist accidentally used two different tileset PNGs with identical content. Unity created two materials for two textures. After merging into one tileset, draw calls dropped to 2 for the entire tile geometry. This case confirms: one tileset = one texture = one draw call. Merging multiple texture atlases into one can reduce draw calls by up to 90%.
Pixel Art Specifics for Tilesets
Use Filter Mode: Point (no filter)—mandatory. Bilinear filtering blurs pixels at tile seams. Enable Pixel Snap in Camera Settings or use PixelPerfectCamera. For tilesets with thin pixel lines, disable compression (Compression: None) to avoid artifacts. Pixels Per Unit must match tile size: tile 32px → PPU = 32.
Tilemap Types
| Type | Features |
|---|---|
| Orthographic (rectangular) | Standard for platformers, top-down |
| Isometric | Diagonal view, RPGs/strategies. Tile Shape: Isometric in Unity |
| Hexagonal | Strategy games. Tile Shape: Hexagonal in Unity and Godot |
| Top-down with offset | 45° view, JRPG style |
Only the most common types are bolded for quick reference. Isometric tiles require Y-sorting. Use Renderer.sortingOrder based on transform.position.y or TilemapRenderer.Mode: Individual with custom IComparator.
How to Create a Tileset in 4 Steps
- Determine tile size and style (pixel art or smoothed).
- Draw base tiles (floor, wall, ceiling) with seamless edges.
- Create transition tiles for autotiling (8–16 variants).
- Export as a single PNG with grid.
What's Included in Our Work
- Tileset creation (seamless tiles with transition variants).
- Autotiling setup (Terrain/Wang).
- Level assembly in Unity/Godot/Tiled according to your design.
- Physics optimization using CompositeCollider2D.
- Draw call and batching verification in profiler.
- Animated tiles for special effects (water, lava).
We provide the full cycle—from concept to a ready scene with mobile performance in mind. Our pricing starts at $800 for a single-location tileset (base tiles + transitions + decoration), with volume discounts for multiple locations. Contact us to discuss your project and get a preliminary timeline estimate.
Timeline
- Tileset for one location (base tiles + transitions + decoration): 1–2 weeks.
- Level assembly based on an existing tileset: 3–5 days for 5–10 standard levels.
- Full set for a game with 3–5 thematic locations: 1–2 months.