How to Create for iPhone Display

Monkey Targets Forums/iOS/How to Create for iPhone Display

c.k.	(Posted 2011) [#1]

I want to create a program for the iPhone. When I test it locally on my Windows 7 PC, of course the dimensions of the HTML5 display are not the same as the iPhone, so what I see will not be what I get.

How do you guys simulate the iPhone display for development when you can't use an iPhone?

xzess

(Posted 2011) [#2]

Hi,

when i use a html5 build for simulating an iphone display,
simply navigate to your /monkey/templates/html5 folder

edit monkeygame.html and replace the resolution with:

(SDK 3 Devices and lower):
Portrait
320x480
Landscape
480x320

(SDK 4 Devices with Retina Display)
Portrait
640x960
Landscape
960x640

For Ipad use
Portrait
768x1024
Landscape
1024x768

c.k.	(Posted 2011) [#3]

Thanks, xzess! I kept trying to modify the .js file. :/

And it looks like the MonkeyGame.html does not get overwritten when running the project again, so that's a delight!

There's gotta be an easy way to specify the display resolution from within the Monkey code. Some kind of compilation directive...?

c.k.	(Posted 2011) [#4]

Okay, so if I set my resolution to simulate Retina Display, how do I get it to use my @2x graphics?

Again, this seems like it could be managed with a compiler directive:

#IPHONE4=True

which would then use @2x images (if available) and a 960x640 display area.

Easy! :)

xzess

(Posted 2011) [#5]

You can do something like

..
Field ViewMode:Int
Field Retina:Bool

Const Modus_Portrait = 0
Const Modus_Landscape = 1

#IF(TARGET = "iOS")
If(DeviceWidth() = 320) And (DeviceHeight() = 480)
Retina = False
ViewMode = Modus_Portrait
ElseIf(DeviceWidth() = 480) And (DeviceHeight() = 320)
Retina = False
ViewMode = Modus_Landscape
End
If(DeviceWidth() = 640) And (DeviceHeight() = 960)
Retina = False
ViewMode = Modus_Portrait
ElseIf(DeviceWidth() = 960) And (DeviceHeight() = 640)
Retina = False
ViewMode = Modus_Landscape
End
#End

Im currently hard working on my iMonk module which has device and display recognition.

c.k.	(Posted 2011) [#6]

What I meant was, how would I simulate it in Flash/HTML5?

If I use

#IF(TARGET="HTML5")

instead of

#IF(TARGET="iOS")

then it seems I would have to modify my graphics lib to do something like

If Retina = False then
   graphicsRes = "@2x"
Else
   graphicsRes = ""
End

and in my graphics loading code

image.Load( graphicName + graphicsRes + graphicsExt )

or somehow insert the "@2x" into the graphics filename/path.

I wonder if a currently devised framework helps in this regard.

xzess

(Posted 2011) [#7]

Sorry for misunderstanding.

i workaround with testing in non retina on html5 and do the retina testing on my real device on ios.

so if you set your display to 320x480 or 480x320 in html5 it will load the non retina images

Otherwise i would write my own LoadImage function or modify the mojo loadimage function.

you could do this:
#IF(TARGET = "html5")
iLoadImage(..)
#ELSEIF (TARGET = "ios")
LoadImage(..)
#End

and then do something like:

Function iLoadImage:Image(filename:string,frames,flags)
'filename without extension!

Local img:Image
If(Retina = True)
filename = filename + "@2x.png"
Else
filename = filename + ".png"
End

return LoadImage(filename,frames,flags)
End

But its a really good idea to develop an Iphone Simulator for html5/flash

c.k.	(Posted 2011) [#8]

You could even use images of the iPhone/iPad in the MonkeyGame.html file. :)

Do it! :D

xzess

(Posted 2011) [#9]

Sorry, i could say if i have time for, but that wouldn't be really honest :)

Rob Pearmain

(Posted 2011) [#10]

I use this (where images are background1024.png or background480.png etc)

Local displaysize:String = "480"
Local dh:Int = DeviceHeight() + DeviceWidth()
			
Select dh
    Case 800	'480 + 320
	displaysize="480"
    Case 1600 '960 + 640 RETINA
	displaysize="960"
     Case 1792	 '1024x768
	displaysize="1024"
End Select
			
Local filename:String = ""
			
filename = "background" + displaysize + ".png"
menu = LoadImage (filename)

I add them together, because the iOS device sends back a different height or width depending on orientation (Landscape or Portrait)