I want to display a sprite (1280X720) and i want this sprite take all the space of the screen and keep its aspect ratio (without stretch and without cut the picture). Do you know how can i do that, for that works on all cellphones sizes ?
Imagine you have your sprite and wanted to display it on a screen 1280x360
Width is the same but height of screen is smaller - so you must either change the aspect ration of the sprite so it is the same width but half the height, or halve the height and width to 640 x 360 (and so have black bars top and bottom), or just display it at 1280x720 and lose 1/2 the height ‘off screen’.
cocos2d-x is clever. Very clever. but it can’t do the impossible
"
If you know you can get black borders when you resize, design your backgrounds to be bigger than your current screen.
The recommendation is to work with an aspect ratio of 3:2. If you scale
to 4:3 you will have your borders at the top/bottom and if you scale to
16:9 they will be left/right . Those will be your worst case scenarios
and you will design your background image to fit it.
Knowing that all you have to do is calculate how much bigger your
background will have to be in each direction. The calculations are
simple, just do the following:
For X axis you have that your worst case is 16:9, that being an
aspect ratio can be reduced to a fraction: 16/9 = 1.777777. Having that
3:2 = 3/2 = 1.5 we can conclude that 16:9 is 1.185185 times bigger than
3:2 ( 1.777777/1.5 ). What this implies is that for your supported
resolution (ie. 480x320) your X axis will have to be 1.185185 times
larger. This is something as simple as 4801.185185=568.88 (round it to
570px). You will need a background with an X axis of 570px in the worst
case, so create your regular 480px background and add it some pretty
borders or something to cover the missing 90px (45px in each side). For the Y axis the procedure is exactly the same but with an aspect
ratio of 4:3. In this case 4:3 aspect ratio is 1.125 times bigger than
3:2 (apply the same reasoning as X axis) so you will need to make your Y
axis at least 3201.125=360px
Try to round your calculations to the next higher pair number, so you
can add the same number of pixels at both sides and avoid errors on your
centering.
Repeat this for every resolution you are going to support (For obvious
reasons it is better to start at a high resolution and then scale down
because the distortion is not noticeable, but i am doing it this way for
the sake of clarity).
If we used 16:9 instead of 3:2 as our design aspect ratio, we would have
a worst case of 1.333 times when converting to 4:3, which is worse than
using an intermediate aspect ratio as 3:2, so we would have more wasted
space to fill."