Content Scaling For Multiplayer Games?

Solar2D General Questions/Discussion
#1

I am creating a multiplayer beat em up game for android devices and want to use autoscaling for different screen resolutions. What makes my situation more complicated is that the players will be online from different phones with different resolutions and i will be using collision to know if players hit each other or not so they must be in the same position in all devices…I am not good at explaining things so i will try to describe the situation through images…

Samsung Galaxy s3 - 2 players online from 2 different phones

galaxy_S3.png

Sensation - 2 players online from 2 different phones…

sensation.png

Now how do i scale the characters so they fit in all devices but still show up in the same position in all devices. I hope i could explain it and it is my first time creating games for mobiles so count me as a beginner when describing a soution :slight_smile:

Thanks

#2

Normally you would use one sized content area for all devices and let Corona manage the device scaling.

#3

And for the game objects (players, weapons etc)? or it is auto scaled as well?

And for content area, how do i set my config.lua so that all background images fit on all android devices?

my config.lua…

application = { content = { fps = 60, width = 768, height = 1024, scale = "letterbox", xAlign = "center", yAlign = "center", }, }
#4

Please somebody guide me how to set the background images to fit in all devices with my current config.lua settings.

I will be very thanks full to you!!!

#5

You need to have a virtual fixed size for the area where the matches are held. You can either stretch the graphics to fit the devices (but it won’t look that great), or fill the empty space with graphics that don’t actually matter to the actual game play.

#6

I would recommend reading these two tutorial’s in order.  The 2nd one builds upon the first one and the first one has information you need to understand background sizing and positioning:

http://www.coronalabs.com/blog/2012/12/04/the-ultimate-config-lua-file/

http://www.coronalabs.com/blog/2013/09/10/modernizing-the-config-lua/

The general principle is that you define a content area (what ever you want, it’s a virtual size) and using some tricks you can make that content area fit the shape of the device’s screen in question.  But you have a constant size you work with.  Then you build your art work so that it is sized right for the content area  you defined and Corona SDK will do the rest.

Now there are a couple of different strategies to handle larger vs. smaller screen sizes. 

  1. Use one sized image and let Corona SDK scale it up and down.
  2. Use multiple sized images that Corona SDK will pick from depending on the screen size.

Most people use the latter, because while it’s more work and means a larger bundle size when uploading your app, it has the trade off of being more memory efficient on low memory, low resolution devices as well has providing higher quality images for high resolution devices.

I’m going to use Apple devices just as a talking point because they make life easy.   If you need to support a low-res device like an Apple iPhone 3 series, it has a screen size of 320 x 480.  The new phones iPhone 4 and 5 are double that size at 640 x 960 (exactly double the pixels) and 640 x 1136 (this is where the automatic screen selection in those blogs come into play).   So traditionally you would define your content area as 320x480 and build your art for that, but have a version that was twice as big typically with an @2x suffix on the name:

         monster.png   50x50

         monster@2x.png  100x100

With the right settings in your config.lua, Corona would detect that you were on a higher resolution screen and use the better graphic since scaling images up makes them fuzzy.   Now thinking about the iPads.  There is a 768x1024 screen and the retina displays which are exactly twice that size at 1536x2048.   So the idea of the two images sort of still holds, but if you want to build one app that handles all four of those devices then we get into some additional problems.  But if you think about it 640x and 768x are pretty close in size.  You can use your @2x graphics for both of these devices since the scaling up/down isn’t that drastic.  Then to support the big tablet screens you would then add an @4x graphic.

         monster@4x.png  200x200

With all of this in place, you build your app for the 1x size, so your 50x50 monster will fit into your 320x480 content area and Corona handles everything else.  When you factor in Android, the fact that the iPhone3/4, iPhone 5 and iPad families all have different screen shapes, this is where the automatic content area sizing kicks in.  In the first blog post, there is a discussion on how to size your backgrounds so that they work regardless of the device.  Don’t gloss over that part.

When you get into the 2nd part of the 2nd tutorial, we suggest that you break out of the mindset of device pixels and just pick a content area that works for you and your art.  We also suggest that it’s time to no longer support the small devices and just let Corona SDK scale down to them and make the medium sized devices your base.

Rob

#7

Thanks for the tips!!!

Since i am targeting medium to heigh-end mobiles (i don’t think my game would work in low-end phones anyway), I went for creating a single Image with resolution 1024x768 with “zoomStretch” and i think it would fit all medium to high end mobiles? without much noticeable quality lose?

Or do you recommend any 2 resolutions for medium and high resolution android phones?

#8

Your images are going to be blown up 2x size, which is quite a bit.  Also zoomStretch will make any circular objects look weird.

#9

Normally you would use one sized content area for all devices and let Corona manage the device scaling.

#10

And for the game objects (players, weapons etc)? or it is auto scaled as well?

And for content area, how do i set my config.lua so that all background images fit on all android devices?

my config.lua…

application = { content = { fps = 60, width = 768, height = 1024, scale = "letterbox", xAlign = "center", yAlign = "center", }, }
#11

Please somebody guide me how to set the background images to fit in all devices with my current config.lua settings.

I will be very thanks full to you!!!

#12

You need to have a virtual fixed size for the area where the matches are held. You can either stretch the graphics to fit the devices (but it won’t look that great), or fill the empty space with graphics that don’t actually matter to the actual game play.

#13

I would recommend reading these two tutorial’s in order.  The 2nd one builds upon the first one and the first one has information you need to understand background sizing and positioning:

http://www.coronalabs.com/blog/2012/12/04/the-ultimate-config-lua-file/

http://www.coronalabs.com/blog/2013/09/10/modernizing-the-config-lua/

The general principle is that you define a content area (what ever you want, it’s a virtual size) and using some tricks you can make that content area fit the shape of the device’s screen in question.  But you have a constant size you work with.  Then you build your art work so that it is sized right for the content area  you defined and Corona SDK will do the rest.

Now there are a couple of different strategies to handle larger vs. smaller screen sizes. 

  1. Use one sized image and let Corona SDK scale it up and down.
  2. Use multiple sized images that Corona SDK will pick from depending on the screen size.

Most people use the latter, because while it’s more work and means a larger bundle size when uploading your app, it has the trade off of being more memory efficient on low memory, low resolution devices as well has providing higher quality images for high resolution devices.

I’m going to use Apple devices just as a talking point because they make life easy.   If you need to support a low-res device like an Apple iPhone 3 series, it has a screen size of 320 x 480.  The new phones iPhone 4 and 5 are double that size at 640 x 960 (exactly double the pixels) and 640 x 1136 (this is where the automatic screen selection in those blogs come into play).   So traditionally you would define your content area as 320x480 and build your art for that, but have a version that was twice as big typically with an @2x suffix on the name:

         monster.png   50x50

         monster@2x.png  100x100

With the right settings in your config.lua, Corona would detect that you were on a higher resolution screen and use the better graphic since scaling images up makes them fuzzy.   Now thinking about the iPads.  There is a 768x1024 screen and the retina displays which are exactly twice that size at 1536x2048.   So the idea of the two images sort of still holds, but if you want to build one app that handles all four of those devices then we get into some additional problems.  But if you think about it 640x and 768x are pretty close in size.  You can use your @2x graphics for both of these devices since the scaling up/down isn’t that drastic.  Then to support the big tablet screens you would then add an @4x graphic.

         monster@4x.png  200x200

With all of this in place, you build your app for the 1x size, so your 50x50 monster will fit into your 320x480 content area and Corona handles everything else.  When you factor in Android, the fact that the iPhone3/4, iPhone 5 and iPad families all have different screen shapes, this is where the automatic content area sizing kicks in.  In the first blog post, there is a discussion on how to size your backgrounds so that they work regardless of the device.  Don’t gloss over that part.

When you get into the 2nd part of the 2nd tutorial, we suggest that you break out of the mindset of device pixels and just pick a content area that works for you and your art.  We also suggest that it’s time to no longer support the small devices and just let Corona SDK scale down to them and make the medium sized devices your base.

Rob

#14

Thanks for the tips!!!

Since i am targeting medium to heigh-end mobiles (i don’t think my game would work in low-end phones anyway), I went for creating a single Image with resolution 1024x768 with “zoomStretch” and i think it would fit all medium to high end mobiles? without much noticeable quality lose?

Or do you recommend any 2 resolutions for medium and high resolution android phones?

#15

Your images are going to be blown up 2x size, which is quite a bit.  Also zoomStretch will make any circular objects look weird.