• Register

Wave Engine was born on February 21, 2013 with the exciting mission of developing an engine to help the mobile game developers’ community.

Post tutorial Report RSS Viewport Manager in Wave Engine 1.4

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 320×480) to the new ones (ex. iPhone 5 with a resolution of 1136×640). However, the huge resolution difference makes the task quite difficult...

Posted by on - Basic Client Side Coding

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:
Figure1
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.
csharp code:

csharp code:
///
/// 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:
Figure3
Figure 2 Resolution: 480x800, Fit mode: Fill
Figure4
Figure 3 Resolution: 480x800, Fit mode: Uniform
Figure5
Figure 4 Resolution: 480x800, Fit mode: UniformToFill
Final Notes

  1. 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.
  2. 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.
  3. The use of ViewportManager is not required and needs to be activated to be used.
  4. 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.
Post a comment
Sign in or join with:

Only registered members can share their thoughts. So come on! Join the community today (totally free - or sign in with your social account on the right) and join in the conversation.

Follow Report Profile
Contact
Send Message
Homepage
Waveengine.net
Licence
Proprietary
Release date
Engine watch
Follow
Tutorial
Browse
Tutorials
Report
Report
Share
Related Engines
Wave Engine
Wave Engine Proprietary
Related Groups
Wave Corporation
Wave Corporation Developer