ymobe / rapanui

High level API for MOAI framework
185 stars 48 forks source link

Screen isn't being auto scaled #45

Closed Sylph closed 12 years ago

Sylph commented 12 years ago

I thought if the config is set properly, then an image following the first 2 values of config.sizes would get upscaled to the last 2 values. I have config.stretch set to true and config.graphics Design set to 960 640. I tested it with an image of 960 640 size.

My config is

config = {}
config.sizes = {}

config.sizes["iPadDev"] = { 768, 1024, 384, 512 } -- shrunk for easier viewing
config.sizes["iPad"] = { 768, 1024, 768, 1024 } -- 1:1 pixel iPad
config.sizes["iPhone3G"] = { 320, 480, 320, 480 }
config.sizes["iPhone4Full"] = { 640, 960, 640, 960 }
config.sizes["iPhone3G_500_750"] = { 320, 480, 500, 750 } -- 3G screen ratio upscaled to 500x750
config.sizes["AcerLiquidMetal"] = { 480, 800, 480, 800 }
config.sizes["test"] = { 700, 1024, 700, 1024 }
config.sizes["test2"] = { 200, 400, 200, 400 }

config.landscape = true
config.device = "iPhone3G_500_750"

config.stretch = true
config.graphicsDesign = { w = 960, h = 640 }

return config

The result of print ("bg size:", mainMenuBG:getOriginalWidth(), mainMenuBG:getOriginalHeight()) print ("screen size", RNFactory.screen.width, RNFactory.screen.height) are bg size: 960 640 screen size 480 320

MattiaFortunati commented 12 years ago

Hi Sylph,

I thought if the config is set properly, then an image following the first 2 values of config.sizes would get upscaled to the last 2 values.

I'm sorry, you are right, this is not working any more, but you don't need this no more, too. Just ignore last two values and set them as the same of the first ones.

Let me explain you better how this config works right now (sorry for the lack of documentation):

config.landscape = true

simply sets landscape mode.

config.device = "DEVICE"

This will simple open a MOAI window with the size you set above using:

config.sizes["DEVICE"] = { WW, HH, WW, HH }

As written above, first values should be the same as last ones.

config.stretch = true

This will tell RapaNui we want to use letterboxing mode so our game will be automatically stretched for any device size or MOAI window size, using "black lines" to fill the screen, maintaining game aspect ratio.

config.graphicsDesign = { w = 960, h = 640 }

This will tell RapaNui that your graphics to be letterboxed is originally designed for 960x640 screens, so letterboxing functions will use those two values to complete the resize activated by config.stretch=true and maintain this aspect ratio.

Example: So if your graphics is for 960 x 640 devices and you want to test it in a WW x HH window, just set your config like this:

config.sizes["DEVICE"] = { WW, HH, WW, HH } config.device = "DEVICE" config.stretch = true config.graphicsDesign = { w = 960, h = 640 }

This examples will correctly letterbox your game for any device size, too.

I hope this can help you, let me know!

Have a nice day,

Mattia

Sylph commented 12 years ago

Sounds good. I'll do that. Thanks. :)

Seems to work perfectly. Interesting that the positioning is based on the original width/height that the graphics is designed for though.

mainMenuBG.x, mainMenuBG.y = screenW, screenH
print ("bg size:", mainMenuBG:getOriginalWidth(), mainMenuBG:getOriginalHeight())
print ("bg pos:", mainMenuBG.x, mainMenuBG.y)
print ("screen size", RNFactory.screen.width, RNFactory.screen.height)

results in a centered bg with the following values bg size: 960 640 bg pos: 480 320 screen size 480 320

So, on a 960:640 config.graphicsDesign, for the bg to center i need to position x:y to 480:320. I don't need to worry about the RNFactory.screen.width, and RNFactory.screen.height. I can see why that works that way. ^^

Just leaving that little bit of info here.

Thanks. I guess you can probably close this now? :)

MattiaFortunati commented 12 years ago

Seems to work perfectly. Just leaving that little bit of info here. Thanks. I guess you can probably close this now? :)

Great to hear! :D