When creating 2D applications for mobiles or tablets, we want the app to look the same across all devices: from low-end or old devices (ex. iPhone 3GS with a resolution of 320x480) to the new ones (ex. iPhone 5 with a resolution of 1136x640). However, the huge resolution difference makes the task quite difficult:
Figure 1. Resolution difference between 3 different iPhone generations.
If differences management within iOS platform is difficult, adding others as Android which presents an incredible diversity of existing devices and resolutions, can become extremely complex.
Wave proposes 2 ways to overcome this problem. One is to use different graphic assets for each version. But for those who want to simplify even more this problem, we added a service named “ViewportManager” available since the Wave Engine version 1.0.8. This service enables you to develop the application for one imaginary device with a resolution specified by the developer itself (let’s say 480x800). Then, automatically and in a transparent way for the developer, the engine is able to adapt the app to the device in which it is running.
To use ViewportManager feature, you have to create a Wave project with the VS2012 template, go to the class called Game.cs and set the resolution to be the one of your imaginary device:
Since Wave Engine 1.4, when you create a new game project, this service is activated by default with the same resolution as the window has.
The call to the ViewportManager Activate method includes 3 parameters:
Parameter1: Virtual device width
Parameter 2: Virtual device height
Parameter 3: Real device settings mode. There are 3 modes:
- Fill: Stretch the app to fit the dimensions of the device by deforming the image if necessary.
- Uniform: Stretch the app to fit the dimensions while retaining the aspect ratio. This can result in black bars in the top or bottom part.
- UniformToFill: Stretch the app to fit the dimensions while retaining the aspect ratio AND avoiding the black bars which could lead to losing parts of the screen.
/// The image is scaled to fit the output area. Because the image height and width
/// are scaled independently, the original aspect ratio of the image might not be
/// preserved. That is, the image might be warped in order to completely fill the
/// output container.
///
Fill,
///
/// The image is scaled so that it fits completely within the output area. The
/// image's aspect ratio is preserved.
///
Uniform,
///
/// The image is scaled so that it completely fills the output area while preserving
/// the image's original aspect ratio.
///
UniformToFill,
Bellow are some examples of using ViewportManager and the results for the 3 fit modes:
Figure 2 Resolution: 480x800, Fit mode: Fill
Figure 3 Resolution: 480x800, Fit mode: Uniform
Figure 4 Resolution: 480x800, Fit mode: UniformToFill
Final Notes
- ViewportManager affects all 2D entities in Wave Engine: Sprites, UIComponents or custom entities. However it doesn’t affect 3D entities since these do not need to be fitted when changing the device resolution.
- ViewportManager can help you simplify your 2D app development as it enables you to use the same graphics assets for all platforms and devices and to work at a fixed resolution.
- The use of ViewportManager is not required and needs to be activated to be used.
- ViewportManager resolution selection is a little bit tricky and needs to be well thought. Indeed, if a small resolution is chosen, when fitted to higher resolutions, the app will be displayed at a low resolution but if a high ViewportManager resolution is chosen, then assets will be very (too) large. Our recommendation is to use the most common (or intermediate) size for the device range the app is targeting.
