Optimized FXG graphics in Adobe Illustrator - Part 2

In our previous post we described possibility of usage vector textures in FXG format and how to create optimized FXG graphics. That approach underlines vector textures management in Firefly framework. In this post we will go through the procedure of creating vector textures with appropriate aspect ratio.





When screens are considered, two factors are taken into account when it comes to measurements: the size and the resolution. The size is generally measured in inches by diagonal and the resolution is the number of pixels displayed on the screen. Here’s few examples of how companies today refer to resolution (read more).
QVGA: quarter VGA (240 x 320 pixels)
HVGA: half VGA (320 x 480 pixels)
WVGA: wide VGA (480 x 800 pixels)
FWVGA: full wide VGA (480 x 854 pixels)
nHD: one-ninth high definition (360 x 640 pixels)
qHD: one-quarter high definition (540 x 960 pixels)
XGA:  (768 x 1024 pixels)

When you are designing game or application you should remember about that variety of screen sizes and resolutions. Taking into account approach we use in the Firefly framework you can forget about all these variety of resolutions and move on with a following steps:

- create vector texture for screen size 1024x768 px as the most close to square. Actually you can predefined any size for your vector textures you want.

- fit main elements in places to be sure they will be visible on different devices. We suggest you to take the smallest one (the most narrow) resolution and place all most important elements (menus, buttons and other game controls) according to that minimum screen size. We call that area a Safe Area. In our applications we use qHD 540x960 px screen resolution as the smallest and most narrow one.

By default, device will cut design from top and bottom (in landscape orientation) so you'll see only the middle part of app. According to your needs it can be cut only from one side. For example, in our game "Zombie: Rising Up" the main elements placed in the bottom, so the top part can be cut with no major losses.

In case of portrait orientation the application will cut left and right sides of design.

As a summary, you should keep in mind variety of screen sizes and resolutions of devices during UI design creation to avoid major visual losses of your game scene while textures cutting.