Simplifying 2D Game Scaling: How My Multi-Resolution System Works
One of the biggest challenges in 2D game development is ensuring consistent visuals across devices with wildly different screen resolutions. Here’s how I tackled this with a scalable system that saves time and preserves graphical quality.
📐 Base Resolution: The Foundation
My system revolves around a base resolution of 360×800 pixels. All scaling calculations start here:
- For example, a device with a width of 1440 pixels would have a scale factor of
1440 / 360 = x4. - This scale determines which asset resolution to load, ensuring crisp visuals on any screen.
🎨 Asset Workflow: Automation Is Key
- Export from Figma at x4 scale: Sprites designed for the base resolution (e.g., 100×100 pixels) are exported at 400×400 pixels (x4).
- Asset Packer magic: Tools automatically generate downscaled versions for x1, x2, x3, and x4 resolutions.
- Dynamic loading: The game loads textures matching the device’s calculated scale.
Why this rocks:
- No manual asset preparation for each resolution.
- High-resolution screens (e.g., 4K) get pixel-perfect sprites.
💻 Code Logic: Think in Figma Units
We always work in base (x1) coordinates in the code. If an object is at (50, 100) in Figma, that’s exactly where it’s placed in the game. The renderer handles scaling automatically.
Benefits:
- No mental math to convert coordinates for different devices.
- Designers and developers share the same “language” (Figma ↔ code).
✍️ Fonts: Metrics vs. Glyphs
Text rendering has its own trick:
- Fonts are generated with x4-scale metrics (kerning, line height).
- A script creates glyph textures for x1–x4 and adjusts the font file to use x1 metrics.
- In-game, text uses the scaled glyph textures but retains x1 metric calculations.
Result:
- Crisp text on all devices.
- Layout stability (no jumps caused by font metric discrepancies).
The Bottom Line
System achieves:
✅ Automated asset preparation (no manual resizing).
✅ High-quality visuals for Retina/4K displays.
✅ Consistent workflow between designers and developers.
✅ Zero per-device tweaking.
Questions or ideas for improvement? Let’s discuss in the comments! 🚀