Multi-Aspect Ratio Support

Your theme needs to look good on different screen sizes and orientations. HyperTheme's multi-aspect ratio support makes this possible - one project, multiple layouts!

Understanding Aspect Ratios

What is Aspect Ratio?

Aspect ratio = width ÷ height

The relationship between screen width and height.

Common ratios:

• 16:9 - Standard HD (1920×1080, 2560×1440)
• 9:16 - Vertical/Portrait (1080×1920, phone vertical)
• 4:3 - Classic/Square-ish (1024×768, old monitors)
• 3:4 - Vertical 4:3 (768×1024, vertical arcade)

Why Multiple Aspect Ratios?

Different displays:

• Horizontal monitors (16:9, 4:3)
• Vertical arcade cabinets (9:16, 3:4)
• TVs vs monitors
• Modern vs retro setups

One theme, multiple uses:

• Create once
• Adapt for each ratio
• Users pick what they need

Aspect Ratios in HyperTheme

Selecting Initial Aspect Ratio

During project creation:

1. Click New Project
2. Choose theme type
3. Select aspect ratio:
   • 16:9 (Landscape - most common)
   • 9:16 (Portrait)
   • 4:3 (Classic)
   • 3:4 (Portrait classic)
4. Create project

This becomes your PRIMARY ratio - the one you design first.

Adding Additional Aspect Ratios

After creating project:

Method varies, typically:

1. Look for aspect ratio selector in top bar
2. Or Settings → Aspect Ratios
3. Add new ratio
4. Switch between ratios

Each ratio has:

• Independent canvas size
• Same layers (shared)
• Different positions/sizes per ratio
• Different animations per ratio (optionally)

How Multi-Ratio Works

Shared elements:

• Same layers across all ratios
• Same assets
• Same project structure

Independent settings per ratio:

• Layer positions (X, Y)
• Layer scales (different sizes for different screens)
• Animation timings (can vary per ratio)
• Visibility (show/hide layers per ratio)

Think of it like: Same ingredients, different arrangements on different plates.

Designing for Multiple Ratios

Strategy 1: Design Primary First

The recommended approach:

Step 1: Master ratio (usually 16:9)

• Design complete theme
• Add all animations
• Polish everything
• Get it perfect

Step 2: Adapt to other ratios

• Switch to 9:16 (or other ratio)
• Reposition elements for vertical layout
• Adjust sizes if needed
• Modify animations if necessary
• Test and refine

Step 3: Repeat for each ratio

• One ratio at a time
• Each is an adaptation of the original
• Maintain consistent style

Strategy 2: Design Simultaneously

For experienced designers:

Parallel design:

• Switch between ratios frequently
• Adjust each as you build
• Ensure consistency across all

More work upfront, but:

• Catches issues early
• Ensures compatibility
• No ratio is an afterthought

Strategy 3: Responsive Design Thinking

Plan for flexibility:

Use relative positioning:

• Center important elements
• Edges/corners for less critical items
• Works across ratios with minimal adjustment

Scalable designs:

• Elements that work at various sizes
• Not dependent on exact positioning
• Flexible layouts

Adapting Layouts Between Ratios

16:9 → 9:16 (Horizontal to Vertical)

Major changes needed:

• 16:9 is wide, 9:16 is tall
• Horizontal layouts become vertical
• Reduce horizontal spread
• Stack elements vertically

Example transformation:

16:9 Layout (wide):
┌─────────────────────────────────┐
│  [Logo]                         │
│  [Item] [Item] [Item] [Item]    │
└─────────────────────────────────┘

9:16 Layout (tall):
┌──────────┐
│  [Logo]  │
│          │
│  [Item]  │
│  [Item]  │
│  [Item]  │
│  [Item]  │
│          │
└──────────┘

Adaptation tips:

• Stack wheel items vertically
• Center logo
• Adjust text sizes
• May need to hide some elements

16:9 → 4:3 (Wide to Squarer)

Less dramatic change:

• 4:3 is narrower but still horizontal
• Compress horizontal spread
• Slightly adjust spacing
• Usually minimal redesign

Example:

16:9: [Item]──[Item]──[Item]──[Item]
4:3:  [Item]─[Item]─[Item]─[Item]
      (slightly closer together)

Landscape → Portrait (Any)

Complete reorganization:

• Horizontal rows become vertical columns
• Side-by-side becomes top-to-bottom
• May need to hide decorative elements
• Focus on essentials

Working with Aspect Ratios

Switching Between Ratios

In HyperTheme:

1. Look for aspect ratio dropdown (usually top bar)
2. Click and select ratio
3. Canvas changes to that ratio
4. Layers adjust to saved positions for that ratio

What happens when you switch:

• Canvas size changes
• Layers move to their positions for that ratio
• Animations may differ (if customized per ratio)

Positioning Layers Per Ratio

When you move a layer:

• Position is saved FOR THE CURRENT RATIO
• Other ratios keep their own positions
• Must position in each ratio separately

Workflow:

1. Select 16:9 ratio
2. Position logo at top-center (960, 100)
3. Switch to 9:16 ratio
4. Position logo at top-center (540, 100)
   (different X coordinate for different canvas width)
5. Both positions saved independently

Animations Per Ratio

Animations can differ per ratio:

Option 1: Same animations everywhere

• Add animation in one ratio
• Works in all ratios
• Positions differ, but animation same

Option 2: Custom per ratio

• Different animation timings
• Different effects per ratio
• Some animations only on certain ratios

Example:

16:9 ratio:
- Wide sweep animation (horizontal)

9:16 ratio:
- Vertical slide animation
- Horizontal sweep wouldn't work well

Best Practices for Multi-Ratio Design

Design Principles

Start with most common:

• 16:9 is standard
• Design this first
• Adapt to others

Maintain consistency:

• Same visual style
• Same color scheme
• Same animations (when possible)
• Recognizable across ratios

Respect each ratio:

• Don't just squash/stretch
• Reorganize for each shape
• What works wide doesn't work tall

Element Visibility

Hide elements that don't fit:

• Decorative elements may not fit portrait
• Hide via layer visibility (per ratio)
• Keep essential elements only

Example:

16:9 (wide):
- Background particles (visible)
- Decorative corners (visible)
- 5 wheel items visible

9:16 (tall):
- Background particles (hidden - too busy)
- Decorative corners (hidden - no room)
- 3 wheel items visible (less space)

Text Sizing

Adjust text per ratio:

• Smaller screens may need smaller text
• Or fewer lines
• Or abbreviated content

Example:

16:9 title size: 72px
9:16 title size: 60px (less width available)
4:3 title size: 68px

Image Scaling

Different scales per ratio:

• Box art might be larger on 16:9
• Smaller on 9:16 (limited width)
• Adjust Scale property per ratio

Maintain aspect ratio:

• Don't distort images
• Scale uniformly
• Crop if necessary

Testing Across Ratios

The Testing Workflow

For each ratio:

1. Switch to ratio

   • Select from dropdown

2. Visual check

   • Everything positioned correctly?
   • Nothing cut off?
   • Spacing looks good?

3. Animation test

   • Press Spacebar
   • Watch full animation cycle
   • Check timing and flow

4. Edge case check

   • Long game names
   • Missing metadata
   • Various content types

5. Document issues

   • Note what needs fixing
   • Fix before moving on

Repeat for all ratios!

Common Issues

Elements off-screen:

• Positioned outside canvas bounds
• Adjust X/Y for that ratio

Overlapping elements:

• Not enough space in new ratio
• Reposition or resize

Animations look wrong:

• Movement too large for canvas
• Adjust animation distances per ratio

Text too large/small:

• Scale text size per ratio
• Or adjust container size

Advanced Multi-Ratio Techniques

Responsive Positioning

Center-based positioning:

• Position relative to center
• Works better across ratios
• Less adjustment needed

Example:

Instead of: X = 100 (absolute left edge)
Use: X = center + 100 (relative to center)

Adapts better to different widths

Conditional Layouts

Different compositions per ratio:

16:9 - Horizontal wheel:

[Item] [Item] [ITEM] [Item] [Item]

9:16 - Vertical stack:

  [Item]
  [ITEM]
  [Item]

Completely different arrangements!

Ratio-Specific Assets

Different assets for different ratios:

• Upload wide background for 16:9
• Upload tall background for 9:16
• Swap in different ratios
• Optimized for each shape

Animation Adjustments

Modify animations per ratio:

16:9:

• Move X: -200 to 200 (wide sweep)

9:16:

• Move X: -100 to 100 (less room)
• Or Move Y: -200 to 200 (vertical instead)

Customize for canvas size!

Workflow Tips

Efficient Multi-Ratio Workflow

Phase 1: Primary ratio (16:9)

1. Complete design
2. Add all animations
3. Test thoroughly
4. Get it perfect

Phase 2: Quick adaptation

1. Switch to 9:16
2. Auto-positions may be off - fix them
3. Adjust scales
4. Test animations (may need tweaking)
5. Polish

Phase 3: Remaining ratios

1. Switch to 4:3
2. Usually minor adjustments from 16:9
3. Test and polish
4. Repeat for 3:4 if needed

Time allocation:

• Primary ratio: 70% of time
• First adaptation: 20% of time
• Remaining ratios: 10% of time

Using Ratio Selector Efficiently

Keyboard shortcuts (if available):

• Quick switch between ratios
• Speeds up testing

Preview in all ratios:

• Before finishing, check all
• Switch and press Spacebar
• Catch issues early

Multi-Ratio Checklist

For each aspect ratio:

• All elements positioned correctly
• Nothing cut off or off-canvas
• Text readable (size appropriate)
• Images scaled appropriately
• Animations work well (no off-screen movement)
• Animations timed correctly
• Layout looks balanced
• Consistent with other ratios (style)
• Tested with Spacebar preview
• Tested with various content (long names, etc.)

When to Support Multiple Ratios

Always support:

• 16:9 (standard HD, most common)

Consider adding:

• 9:16 (if targeting vertical cabinets/displays)
• 4:3 (if supporting retro setups)
• 3:4 (less common, specialized)

Don't over-commit:

• Each ratio = significant work
• Only add ratios your audience needs
• Quality over quantity!

Aspect Ratio Reference

Ratio	Orientation	Common Resolutions	Use Case
16:9	Landscape	1920×1080, 2560×1440	Modern displays, TVs
9:16	Portrait	1080×1920	Vertical arcade, phones
4:3	Landscape	1024×768, 1280×960	Old monitors, retro
3:4	Portrait	768×1024	Vertical 4:3 displays

Next Steps

• Best Practices - Design principles
• Your First Theme - Build with ratios in mind
• Publishing - Share your multi-ratio theme

---

Pro Tip: Design for 16:9 first, then adapt. Don't try to design all ratios simultaneously unless you're experienced. One at a time! 📐✨