Responsive Design

Tip and functions for mobile development

In the era of multi-device gaming, it's crucial to ensure your game is accessible and optimized for various platforms, including mobile devices and tablets. While YOM uses pixel streaming to deliver high-quality graphics across devices, understanding and adapting to different screen sizes and input methods can greatly enhance the user experience. Why implement responsive design:

1. Broaden your audience by supporting multiple device types

2. Ensure consistent gameplay experience across platforms

3. Optimize UI and controls for touch-based interfaces

4. Improve accessibility for players with different device preferences

Step 1: Detect Mobile Devices

YOM provides a built-in method to identify if a player is connecting from a mobile device:

1. Access the YomGameInstanceSubsystem in your Blueprint or C++ code.

2. Check the "GetIsMobile" boolean.

Step 2: Adjust for Mobile

Once you've detected a mobile device, you can make appropriate adjustments :

• Increase button sizes for touch input

• Implement different widget blueprints for mobile and desktop

• Utilize Size Boxes and Scale Boxes for flexible layouts

• Use anchors and alignment for position-independent layouts

• Simplify certain menus for smaller screens

• Implement touch-friendly controls

Step 3: Test with Chrome's Device Mode

To debug and test your mobile layout:

1. Open your game in Chrome

2. Press F12 to open Developer Tools

3. Click the "Toggle device toolbar" icon or press Ctrl+Shift+M

4. Select different device presets or set custom dimensions

5. Test your game's responsiveness in real-time

Result:

By implementing these responsive design techniques, your YOM-powered game will provide a smooth, adaptable experience across a wide range of devices, from high-end desktop computers to smartphones and tablets.

Note: Always test your responsive design on actual devices when possible, as emulators may not perfectly replicate real-world conditions.