Retina display question

Monkey Targets Forums/iOS/Retina display question

Raul(Posted 2013) [#1]
Hello all,

I was already searched the forums but I think that might be a problem:

I made all images @2x and put them near the original one. I started the Retina Simulator but the images are not correct. I still have black portions.
Tomorrow I will test on a real device but I was wondering why is not correctly working on the Simulator?

R.


Raul(Posted 2013) [#2]
solve that! it seems the "simulator" was not rotated. so the images are the good one. full screen, BUT there is still a problem.

I have all the coordonates hard coded. the buttons are still drawn at the old coordonates. Should I * the values with 2?


rIKmAN(Posted 2013) [#3]
See this thread: http://www.monkeycoder.co.nz/Community/posts.php?topic=4517

edit
See you solved it, with regards to the button positions etc you might want to take a look at autofit which will scale and manage your game to work on different devices/resolutions, and you can just use hardcoded values to a set virtual resolution like you have been doing - autofit will do the rest.

autofit: http://www.monkeycoder.co.nz/Community/posts.php?topic=1500#28006


Raul(Posted 2013) [#4]
hmm, using autofit didn't resolved my issue.

it took my @2x pictures and double them again...


rIKmAN(Posted 2013) [#5]
At the point where you had it working full screen but the button co-ordinates were hard coded, all you need from there is autofit.

Say you work to a resolution of 1024x768, hard code all your buttons to the correct position for this resolution, and then when it is run on an iPad 3 autofit will scale it up to 2048x1536 and also scale the hardcoded button x/y positions with it so they will still work.

One thing to watch for is that you will need 2 sets of assets to allow full screen across (1)iPhone/iPod and (2)iPad as they are different aspect ratios.

I have just come across this problem, and now detect the device/resolution at startup and use different assets depending on the resolution/device.


Raul(Posted 2013) [#6]
I only programmed for iPad (1024 x 768)

I added @2x resources.

Without using autofit I have the @2x images rendered correctly but at the old coordotnates.

After integrating autofit, I have the same @2x images scaled to 200% :(

I used UpdateVirtualDisplay() at the start of the OnRender and SetVirtualDisplay 1024, 768 at the start of OnCreate()


rIKmAN(Posted 2013) [#7]
If you are only working on iPad then you can either:

1) Use 1024x768 as your virtual res and have autofit scale up for iPad 3/4
or
2) Use 2048x1536 as your virtual res and have autofit scale down for iPad 1

Also, have you changed any Touch commands to use VTouch?


Raul(Posted 2013) [#8]
as I said earlier, I added @2x resources - it's this necessary now? using autofit?


"Use 1024x768 as your virtual res and have autofit scale up for iPad 3/4"

how exactly to do that?

I already tried:
SetVirtualDisplay 1024, 768

but it is still not working correctly..

"Also, have you changed any Touch commands to use VTouch? "
not yet... for now I am trying to render my menu correctly..


rIKmAN(Posted 2013) [#9]
I don't think you need the @2x images (might be wrong, but I am not using them except in xCode for loading screens, icons etc) as autofit will be doing all the scaling for you.

A more experienced person might explain better, but basically have your background image at 1024x768, set all your co-ords, buttons etc using this resolution.

Then when it is run on an iPad with double the resolution, autofit will scale the images and all your co-ordinates up as well.

Make sure you call VTouchX/Y rather than TouchX/Y so that the inputs are scaled too, if you don't use VTouch then your x/y touch co-ords will not be scaled by autofit so this could be what you are seeing.

If you want to use a 2048x1536 image then do the same as above for that resolution, and when run on an iPad 1 (1024x768) autofit will scale down your images and the VTouch commands so they work on the smaller resolution.


Raul(Posted 2013) [#10]
maybe I am crazy but this is not working fine.
I tried the followings:

Case 1: all resources original: 1024 x 768. Using autofit. When simulating a normal ipad (1024 x 768) everything went fine.

Case 2: when using a Retina iPad, all the images were zoomed in up to 400%

I am pretty sure I am doing something wrong but I am tired now. I will start over in a few hours!!


ElectricBoogaloo(Posted 2013) [#11]
Here's my advice.

-=-=-

Warning
Taking my advice tends to cause annoying issues further down the line. What might work today, might not work tomorrow, especially in the world of iOS

-=-=-

It's probably the @2x that's doing.
In "Proper" iDev, the OS loads the different images, then scales the display up, so everything fits snuggly.

In Monkey iDev, Monkey's display changes to the resolution that it's given, but iOS still loads the @2x.
This "should" give a nice result, but in actual fact it leads to you drawing one thing, when your code is expecting another.

I first came across this issue when the iPad was first released, but used a "None-Retina" (ie none-@2x) display.
I'd coded a megaload of stuff to deal with @2x when >x pixels, but then the iPad turned up, and it loaded the small images, but had a big display.
grrr!
Broke all my lovely code.

It's now even more complex, now that iPad3+ does have Retina, so will load the @2x, even though the smaller big display doesn't.. What?!
Grr!

Back then, it was annoying and frustrating, so I switched to Cocos2D.
Cocos2D taught me not to use Apple's "@2x" conventions, and instead to use their "-hd" methods instead.
Essentially, this meant that it was their code deciding which graphics were being loaded, not iOS.
I've kept to this methodology, and carried it over to Monkey, and am now drawing with 3 sets of sprites.
normal.png for little devices, normal-hd.png for iPad and iPhone Retina, and normal-hd2.png for iPad Retina.

Since it's my code which decides which one I'm loading, it's up to me to draw it at the right scale, which means I don't have to second guess which assets the device has decided to load for me.
It's a LOT easier.

It'll probably bite me in the ass, later, but so far so good.


Raul(Posted 2013) [#12]
I see..

for now I will use @2x to load images and I am going to multiply by 2 all the coords if I am on Retina..


rIKmAN(Posted 2013) [#13]
What is the resolution of your @2x image, is it 2048x1536?

If so it sounds like that is the problem, as the @2x image is being loaded, and then autofit is also scaling that 2x again?


Raul(Posted 2013) [#14]
@rIKmAN: yes and yes.

my @2x images are for 2048x1536 (I doubled all of my originals) and yes when using autofit this doubled images are doubled again...:D


rIKmAN(Posted 2013) [#15]
Use the @2x image as your standard image, and let autofit scale it down for iPad 1 (1024x768), no need for you to use any @2x etc, even in the filename.