Jump to content

[TOPIC: topicViewTemplate]
[GLOBAL: userSmallPhoto]
Photo

Sprite animation correct scaling for IOS devices
Started by jkappes01 Aug 04 2018 01:25 PM

2 replies to this topic
sprite animation
[TOPIC CONTROLS]
This topic has been archived. This means that you cannot reply to this topic.
[/TOPIC CONTROLS]
[modOptionsDropdown]
[/modOptionsDropdown]
[reputationFilter]
[TOPIC: post.html]
#1

jkappes01

[GLOBAL: userInfoPane.html]
jkappes01
  • Observer

  • 7 posts
  • Corona SDK

I have a sprite animation as a background. However, I cannot get the scaling right on the IOS devices. A sprite that fits just right in the Iphone 4s, will not fit the whole screen for the Iphone X. Setting the sprite x and y coordinate to display.actualContentWidth (/Height) does not show anything. Using display.contentCenterX (/Y) has given me the best results, although the scaling is still off. Is there anyway to detect the model of the Iphone so I could fix the scaling problem individually? Is there a way to declare the size of the sprite or imagesheet to make it scale for all IOS devices correctly? Thankyou.



[TOPIC: post.html]
#2

Lava Level

[GLOBAL: userInfoPane.html]
Lava Level
  • Contributor

  • 264 posts
  • Corona SDK

You can use Dynamic Image Selection  to specify those image sheets.

To detect the model of the phone this works for that.

 

There are a lot of ways to determine the orientation. I generally start from the center as well. However, different devices now have widely different ranges. I'm not the best with math to determine the edges but I also rely on multiple 'configuration files'(that contain table of coordinates or basic points) for multiple phone widths or heights. Based on aspectRatio I pull a specific config. Takes a lot of tweaking to get set up, but generally works out well. Plus it allows me to easily ad new configurations.

 

So for instance I hardly Object.x= 30 instead I always Object.x=MyTableXY.MainObjects[1] 

 

(but sometimes at the start of a program, i give myself room to drop in numbers, and replace a layout with a table later)



[TOPIC: post.html]
#3

Rob Miracle

[GLOBAL: userInfoPane.html]
Rob Miracle
  • Moderator

  • 25,243 posts
  • Enterprise

Corona uses a defined content area using the config.lua file where you set the width and height of the virtual area you want to use. Then you let Corona handle scaling to the device for you. If you use something like "letterbox" scaling you define how wide you want the screen to be and create your images to that size.

 

Then to handle the large difference between lower resolution screens and today's high-resolution screens, you can also in config.lua define breakpoints to use different sized images.

 

So lets say you use values of width = 400, height = 600 in your config.lua, then your base image should be designed to work on a 400 point-wide screen. But if you want to run the app on an iPad that's 768 pixels wide, Corona is going to have to upscale the image nearly 200% which will make for soft images. So you can provide an image that is 2X as big as your base, name it somefile@2x.png for instance then Corona will choose to use your @2x image instead of the base image, so it only has to scale it up a few percent. Then if you have a retina iPad that's 1536px wide, you can provide an image that is 4x the size (@4x suffix) and then Corona will see that it has s to scale the image up that large and know to get the bigger of the three options.

 

You control the breakpoints on when Corona will use the larger image vs. the smaller images in your config.lua.

 

Rob




[topic_controls]
[/topic_controls]