I drew all my graphics on a small resolution

Audio and Graphics
#1

Hey Guys,  

About a third through my project, I realized I *probably* made a big mistake doing my graphics, and it’s kinda tough going back.

I didn’t know what’s in my head that time but I started all my graphics in Photoshop using a native resolution of 480x800.   So, everything – backgrounds, player character/ship, objects, etc. were all drawn under this native resolution.

I know it may sound stupid.  I probably didn’t notice it too because as I went on coding/testing the app on my Samsung Galaxy Note 2, 3 and 4… to me they all look fairly crisp and tack sharp considering Note4 is 1440x2560 - three times the resolution I’m working with.  

I haven’t tested my app on an HD tab or Retina (yet), but assuming I had to bump up the graphics for higher scaling (eg. @2, @4 scales), will I be safe using software like TexturePacker, or merely use Photoshop to resize them manually?  If so, then there’s no difference how Corona would enlarge them to fill the HD/Retina display, No?

To be honest, they look considerably sharp on a device with 1440x2560 resolution, which was the reason I didn’t think about working on the graphics at a fairly higher resolution.  Perhaps the decision comes out when I have the change to test it on an HD device… 

What would you suggest/recommend?  

Cheers,

Santi

#2

You’ve only got two options:

  1. Continue on, but know your graphics won’t look their best on high-resolution devices.  (This has a lot to do with the complexity and design of the images, but in general up-scaled images are less crisp and may also suffer aliasing issues.)

  2. Start over and design your graphics at a much higher resolution.  I suggest no less than 1x the target resolution and probably 2x or higher.

Example:

If you want to target an iPhone 5 as your primary device and you don’t care about iPhone 6, AND if you are making an image that should take up one quarter of the screen, you’d choose these dimensions:

  • Designed at 1x target resolution  == < 480 x 568 > (meh!, won’t scale up nicely on higher resolution devices).
  • Designed at 2x target resolution == < 960 x 1136 > (better)
  • Designed at 3x target resolution == < 1440 x 1704 > (even better)
  • Designed at 4x target resolution == < 1920 x 2272 > (could be a problem on some old devices because one dimension is higher than 2048)

Of course, once you start getting into the big images, you’ll want to consider providing multiple versions of the images which are scale appropriate.  However, I generally choose a good middle of the road size that looks good on my target device yet still scales up and down well.  This is cheaper (binary size wise) than doing a lot of scaled versions.  Its also simpler.

I strong suggest collaborating with a mobile artist on this decision.  I’m not an artist, just a code jockey with some other skills.  So, while my opinion has some value, an artist would really know the right answer.

Note: The rule of thumb given to me by artists has always been, "design the image big, then scale down to the size you need.’

#3

Thanks for the feedback @roaminggamer.

Hmmm… now that breaks my heart - the thought of starting all over again  :(

Yes I’m an artist myself, and I do the coding as well as sound and game/level designs.  One man show.  I know I should have considered this beforehand.  While it looks “okay” on the current devices I’m testing on, the sudden thought of upScaling for Retina and HD kicked in, and quite late at that… aarrgh… 

You mentioned about images the size of a quarter of the screen.  I do have a lot of these but they are usually pure BLACK (large chunks of rocks), occasionally with some painted green “vegetation” on top, but the rest of the object is black.  Hmm… I guess for these I can trace to vector to regain sharp edge, upSize, export again as PNG, and hand-paint the top surfaces again… aargh! 

I guess my question now is this:   Supposing I repaint again for 3X target,  is it necessary for me to make downScaled versions for 2x and 1x ?    Or leave the system to scale down and everything would just look okay…  ?   If the latter, will the image use its original  texture memory requirement? 

This is my first project so pls bear with me.  And thanks for taking time.

Cheers,

Santi

#4

On your last question, I only provide down-scaled versions if I run into these issues:

  • … if the image looks back when down-scaled on device(s).
  • …if the larger images cause performance issues on slow device(s)

Other than that, I skip it.

Also, I never create the ‘multiple scales’ of images till I’m pretty much done.  i.e. You can use big images throughout dev and easily add support for down-scaled images late in the effort.

I’m pretty sure, this will use more texture memory than loading a down-scaled version, but maybe I’m wrong here.  I know things have changed with the newer GL implementations.

#5

That’s some useful info there.    Thank you.

I just stumbled across this in Corona docs, under Dynamic Image Selection:

  1. In contrast, if you design all of your images for Retina/HD and allow Corona to scale them down for lower resolution devices, the larger images will require the same amount of texture memory on those devices. This may adversely affect the performance of your app — or worse, those images will not appear if they exceed the maximum texture size on a device.

The docs also says Dynamic Image Selection only works with display.newImageRect()    !!!    I think I’m hitting a brick wall here.  

I’m using Level Director to create my levels and it is there where the assets are “loaded”.  There seem to be no feature or option for Dynamic Scaling.   I have sent this question to the LD developer and awaiting reply.    :(   

#6

You’ve only got two options:

  1. Continue on, but know your graphics won’t look their best on high-resolution devices.  (This has a lot to do with the complexity and design of the images, but in general up-scaled images are less crisp and may also suffer aliasing issues.)

  2. Start over and design your graphics at a much higher resolution.  I suggest no less than 1x the target resolution and probably 2x or higher.

Example:

If you want to target an iPhone 5 as your primary device and you don’t care about iPhone 6, AND if you are making an image that should take up one quarter of the screen, you’d choose these dimensions:

  • Designed at 1x target resolution  == < 480 x 568 > (meh!, won’t scale up nicely on higher resolution devices).
  • Designed at 2x target resolution == < 960 x 1136 > (better)
  • Designed at 3x target resolution == < 1440 x 1704 > (even better)
  • Designed at 4x target resolution == < 1920 x 2272 > (could be a problem on some old devices because one dimension is higher than 2048)

Of course, once you start getting into the big images, you’ll want to consider providing multiple versions of the images which are scale appropriate.  However, I generally choose a good middle of the road size that looks good on my target device yet still scales up and down well.  This is cheaper (binary size wise) than doing a lot of scaled versions.  Its also simpler.

I strong suggest collaborating with a mobile artist on this decision.  I’m not an artist, just a code jockey with some other skills.  So, while my opinion has some value, an artist would really know the right answer.

Note: The rule of thumb given to me by artists has always been, "design the image big, then scale down to the size you need.’

#7

Thanks for the feedback @roaminggamer.

Hmmm… now that breaks my heart - the thought of starting all over again  :(

Yes I’m an artist myself, and I do the coding as well as sound and game/level designs.  One man show.  I know I should have considered this beforehand.  While it looks “okay” on the current devices I’m testing on, the sudden thought of upScaling for Retina and HD kicked in, and quite late at that… aarrgh… 

You mentioned about images the size of a quarter of the screen.  I do have a lot of these but they are usually pure BLACK (large chunks of rocks), occasionally with some painted green “vegetation” on top, but the rest of the object is black.  Hmm… I guess for these I can trace to vector to regain sharp edge, upSize, export again as PNG, and hand-paint the top surfaces again… aargh! 

I guess my question now is this:   Supposing I repaint again for 3X target,  is it necessary for me to make downScaled versions for 2x and 1x ?    Or leave the system to scale down and everything would just look okay…  ?   If the latter, will the image use its original  texture memory requirement? 

This is my first project so pls bear with me.  And thanks for taking time.

Cheers,

Santi

#8

On your last question, I only provide down-scaled versions if I run into these issues:

  • … if the image looks back when down-scaled on device(s).
  • …if the larger images cause performance issues on slow device(s)

Other than that, I skip it.

Also, I never create the ‘multiple scales’ of images till I’m pretty much done.  i.e. You can use big images throughout dev and easily add support for down-scaled images late in the effort.

I’m pretty sure, this will use more texture memory than loading a down-scaled version, but maybe I’m wrong here.  I know things have changed with the newer GL implementations.

#9

That’s some useful info there.    Thank you.

I just stumbled across this in Corona docs, under Dynamic Image Selection:

  1. In contrast, if you design all of your images for Retina/HD and allow Corona to scale them down for lower resolution devices, the larger images will require the same amount of texture memory on those devices. This may adversely affect the performance of your app — or worse, those images will not appear if they exceed the maximum texture size on a device.

The docs also says Dynamic Image Selection only works with display.newImageRect()    !!!    I think I’m hitting a brick wall here.  

I’m using Level Director to create my levels and it is there where the assets are “loaded”.  There seem to be no feature or option for Dynamic Scaling.   I have sent this question to the LD developer and awaiting reply.    :(