GameSalad

Resolution Independence confusion

Hello! So I finally submitted my first app a few days ago, and its still waiting to be reviewed. I was looking back over it again today and playing it on my device (iPhone 4S) and i noticed that when i unticked Resolution Independence, which I've been thoughtlessly ticking on all of my projects, the graphics suddenly got much clearer. Ive been reading up on this, and people are saying to make you're graphics 2x the size they should be (so in my case, 2x the size for iPad?) Ive just been making my graphics at random sizes, just as long as they are bigger than they have to be, so that they don't blur if I want them bigger in game. Should i even bother ticking Resolution Independence?

Comments

  • SlickZeroSlickZero Houston, TexasPosts: 2,870Member, Sous Chef

    Yes you should. R.I. is for apple devices that use retina displays, which is pretty much all of them now. If you were just submitting to the Android market, then you wouldn't need it, but for Apple, you do.

    It will use your image that is 2X the normal size for retina devices, and make a copy that is half that size, and use it for older, non retina devices. That's why you want them double the size of the actor you use.

    I have no friends. I'm a loser that makes video games all day. Will you be my friend?

  • SocksSocks London, UK.Posts: 12,698Member, PRO

    @MarpCark said:
    Should i even bother ticking Resolution Independence?

    Only if you want to support older pre-Retina devices (and if you are targeting the iPad you need to tick RI in GameSalad and Legacy RI when publishing) - this will create a set of half-res image assets for older devices.

    If you don't tick RI (in your creator project) then older pre-Retina devices will have to use your high-res image assets, which depending on your game might be too much for something like an iPad1.

  • SocksSocks London, UK.Posts: 12,698Member, PRO
    edited February 2015

    @SlickZero said:
    Yes you should. R.I. is for apple devices that use retina displays, which is pretty much all of them now. If you were just submitting to the Android market, then you wouldn't need it, but for Apple, you do.

    It will use your image that is 2X the normal size for retina devices, and make a copy that is half that size, and use it for older, non retina devices. That's why you want them double the size of the actor you use.

    Although I agree with all of that, I'd say this line might be a little confusing "R.I. is for apple devices that use retina displays" . . . I kind of see it as the opposite to that, you tick RI so that your hi-res Retina project supports lower end (non-Retina) devices, so I'd say "R.I. is for apple devices without retina displays", does that kinda' make sense, or have I just made it even more confusing ! :smile:

  • SlickZeroSlickZero Houston, TexasPosts: 2,870Member, Sous Chef

    Yeah, that's it. You are correct.

    I have no friends. I'm a loser that makes video games all day. Will you be my friend?

  • MarpCarkMarpCark Posts: 121Member

    @Socks @SlickZero Ok i get it now, so basically always tick RI. So when making my graphics, because you should always make everything for iPad, does that mean i should always design using a 2048x1536 sized Photoshop/Illustrator project? Cheers guys.

  • SocksSocks London, UK.Posts: 12,698Member, PRO

    @MarpCark said:
    Socks SlickZero Ok i get it now, so basically always tick RI.

    Well not quite, I'd say only tick RI if you want to support pre-Retina devices, which as @SlickZero alluded to is not many devices these days.

    Example . . . . let's say you have a word game, looks really cool, nice graphics, sound and all that - there would be little issue supporting older pre-Retina devices, as a word game typically doesn't place an emphasis on fast moving graphics or loads of processor heavy physics action or enormous amounts of real time code loading with timers and dozens of constrains (and so on) . . . there are unlikely to be hundreds of asteroids hurtling towards a spaceship, which is firing dozens of missiles, and loads of explosion animations and sound effects (and so on) in a word game.

    Whereas if you do have a animation/graphics/sound/code-heavy game with all that stuff in then you might be tempted to drop pre-Retina device support as early devices are going to struggle to keep up with the action (who wants bad reviews from iPad1 owners unable to run you game at more than a sluggish 12fps!).

    Also, when you tick RI, you enlarge your file size as extra versions of all your assets are created (to support pre-Retina devices), so your svelte mobile download compatible app suddenly jumps up in size . . . . so ticking RI is not an always-do-it situation.

    So . . . it's a choice you have to make yourself based on your game.

    @MarpCark said:
    So when making my graphics, because you should always make everything for iPad

    You don't have to always make everything for iPad ! These are only general recommendations, if you have a great idea for an iPhone game that relies on the size or portability or demographic of iPhone users then make your project for the iPhone.

    @MarpCark said:
    does that mean i should always design using a 2048x1536 sized Photoshop/Illustrator project? Cheers guys.

    Yes, for iPad projects . . . and once done you can normally adjust the iPad project to fit iPhones.

  • MarpCarkMarpCark Posts: 121Member
    edited February 2015

    @Socks ok i think im starting to understand it now, and now im thinking about all the graphics im going to have to redo :( The game that I've just released isn't really graphically intense, so will have to think about whether to use RI or not on it. That would explain why the graphics are blurry when RI is ticked; they are not 2x the image size, probably more like 1.5x the size. Thanks for all of the help :) Im aware have been asking a lot of questions and starting a lot of discussions recently, im just eager to improve and only post to the forums when i can't find the answer anywhere else.

    On a separate, completely off-topic note. I don't suppose you would know how to make the cannon in Creator template 'Big Top Blaster' so that the user drags his finger BEHIND the cannon the fire it, rather that in front of it? Like the catapult in angry birds?
    I just didn't want to start yet another discussion. Thanks.

    EDIT: Oh hang on think I've solved it. Ill put how just in case other people want to know:
    I just reorganised some of the coding in the 'constrain rotation of cannon' attribute:

    Constrain Attribute - self.Rotation
    to
    vectorToAngle(self.position.x - game.mouseposition.x , self.position.y - game.mouseposition.y)

  • MarpCarkMarpCark Posts: 121Member

    @Socks Hello again! So i pulled my build out of review, which is annoying cos I've been waiting a week for it to go through, but these graphics need to get sorted. Its a small game though, so it shouldn't take me too long. So for the graphics, should i literally just double up everything? Say i have a button that is 191x191 pixels, should i make it 382x382? I just read somewhere about them needing to be divisible by 4 or something? Cheers :)

  • RowdyPantsRowdyPants Posts: 182Member, PRO

    @Socks i<3u

    You've helped me understand so many concepts from RI to 3D and bump maps to high level trig functions. Whenever I have a question I search around and usually find a discussion where you have answered someone's question with clarity, brevity, and sometimes even a demo video or two. You're an incredible asset to this community of developers. tyvm!!

  • RossmanBrothersGamesRossmanBrothersGames Posts: 648Member, PRO

    it also depends on your art style, if you are making a low res game, like pixel art or 8 bit style, you can make your art at the regular resolution and not twice the resolution and just leave RI unchecked. No reason to make huge artwork scaled up.

  • RowdyPantsRowdyPants Posts: 182Member, PRO

    @RossmanBrothersGames If you make art - pixel or not - and don't address all the screen pixels individually (i.e. don't make your art show per pixel at the screen's resolution) then won't the image look aliased/burry? Even if ever so slightly. I think the only way to show crisp graphics using GS is to create at the target resolution (meaning have a 64x64 pixel square on the screen displaying a 64x64 image and not a smaller/smallest version - 32x32 stretched across those pixels)

    Am I correct or way off?

    Right now I'm making a pixel art game and while I wanted to create everything the smallest it could be (least computation) I'm having to use 4 or even 8 pixels in the art to look like one big retro pixel on screen to keep it looking super sharp.

  • RossmanBrothersGamesRossmanBrothersGames Posts: 648Member, PRO

    @rowdypants hmm never thought of it that way, would love to hear others thoughts. I never really thought that the pixel games you play on ios games where playing in hd, would seem better for performance to have it at their actual resolution. Similar to playing 720p game on a 1080p tv

  • RossmanBrothersGamesRossmanBrothersGames Posts: 648Member, PRO

    However maybe what your saying is true for how gamesalad displays images

  • RowdyPantsRowdyPants Posts: 182Member, PRO
    edited April 2015

    @RossmanBrothersGames Well, 'their actual resolution' is what I'm saying. Checking 'Resolution Independence' tells GS to create different sized versions of your art to more closely match the actual screen resolutions. So you initially make an image that GS will use for iPhone 6+/iPad but then scale down to 2/3 and 1/2 sized versions for use on the smaller screens.

    But creating a say 16x16 pixel image and showing it across many more pixels on the screen won't look crisp and that's the reason we have to do it the seemingly-unnecessary-for-pixel-art computationally expensive way (per pixel) and draw 2 or 4 or 8 or whatever pixels in the art where we're wanting it to look like 1 big sharp pixel on the screen.

    I don't know the math for this (it's vector-ish and might use .svg images) but I wish GS had a special drawing mode for pixel games that allowed us to create the art at the actual teeny sizes and then could show it crisply without aliasing. Since devices are vastly more powerful now it's not really an issue. Now we can do 'modern pixel art' styles which allow cool things like having a pixel-ish look but also having fluid motion because the graphics are actually being drawn many more times than they would be using the tiny amount of pixels we're pretending to show.

  • WyrdGuitaristWyrdGuitarist Posts: 91Member, PRO

    This is a very helpful post - I'm also confused though.

    If I add a 100 x 100 image with RI turned on it would create a 50 x 50 actor - if I resize back to the original 100 x 100 it appears blurry on a retina device.

    If I add the same 100 x 100 image with RI turned off it's sharp on a retina device (and looks fine on legacy to my eyes).

    Are we better off having RI turned off these days to get the best results across retina and legacy devices?

  • SocksSocks London, UK.Posts: 12,698Member, PRO
    edited March 2016

    @WyrdGuitarist said:
    If I add a 100 x 100 image with RI turned on it would create a 50 x 50 actor . . . .

    Yes.

    @WyrdGuitarist said:
    if I resize back to the original 100 x 100 it appears blurry on a retina device.

    The actor has no 'original' size.

    Doubling the size of an actor (stretching the image's pixels over twice as many pixels as there are in the image) will result in aliasing (blurring/softening of the image).

    @WyrdGuitarist said:
    If I add the same 100 x 100 image with RI turned off it's sharp on a retina device (and looks fine on legacy to my eyes).

    Turing RI off will have no effect on a Retina device and will force a legacy device to use images at twice the needed resolution.

    @WyrdGuitarist said:
    Are we better off having RI turned off these days to get the best results across retina and legacy devices?

    What do you mean by 'results' ? Memory usage, image fidelity, processor strain (etc) ?

  • WyrdGuitaristWyrdGuitarist Posts: 91Member, PRO

    Thanks @socks.

    I'm looking for the best image fidelity across devices.

    If we're saying that RI stores the original image and also a copy at half the res for legacy devices - I don't quite understand what I'm seeing in actor sizes. If the image is 100 x 100 - shouldn't the actor be 100 x 100 and also store a 50 x 50 image for use on a legacy device?

    I suppose it's not done that way to allow for the actor placement through X and Y values on the stage.

    I'm missing something fundamental here aren't I...

  • SocksSocks London, UK.Posts: 12,698Member, PRO
    edited March 2016

    @WyrdGuitarist said:
    If we're saying that RI stores the original image and also a copy at half the res for legacy devices - I don't quite understand what I'm seeing in actor sizes. If the image is 100 x 100 - shouldn't the actor be 100 x 100 and also store a 50 x 50 image for use on a legacy device?

    If an image is 100 x 100 pixels then the actor should be 50 x 50 pixels - and if RI is checked then - at the publishing stage - a 50 x 50 pixel copy of the original 100 x 100 pixel image will be generated for use on pre-Retina (legacy) devices.

    @WyrdGuitarist said:
    I suppose it's not done that way to allow for the actor placement through X and Y values on the stage.

    I don't know what that means. You might have to expand on the idea.

  • The_Gamesalad_GuruThe_Gamesalad_Guru Posts: 9,878Member
    edited March 2016

    You should read up on what a retina screen is. It has nothing to with size as much as it has to do with the number of pixels per inch. So on a retina device there are twice the number of pixels in a square inch. We fill these pixels properly by doubling the size of the image to fit in an area. All 100x100 actors will be 100x100 on all devices as this relates to the area it takes up on the screen. Since a retina screen has 2x the number of pixels in the same area as a non retina device, we double the image size so all the pixels properly display the original image instead of stretching it across pixels blurring the image. It's pretty simple. Check RI to start your project and work in it. This will auto size all the actors for retina. When you go to publish uncheck RI and this will stop the publishing system from adding the duplicate scaled images for non retina Apple devices as there is no longer a need for them as nearly all Apple devices are retina.

    I should do a video on this.

  • WyrdGuitaristWyrdGuitarist Posts: 91Member, PRO

    Thanks for the help guys.

    Yup, I get what a retina screen is - just not how GS Creator handles the images with RI enabled.

    I think I've been thinking about it the wrong way around. So it's not so much that there's an image stored at half the size of the actor or the original image. It's more that the actor is automatically scaled appropriately for placement on the scene and the higher res image which the actor is based on is stored for when it's needed (i.e. for use with a retina screen).

    Makes sense if that's all it is - basically GS Creator sorts it all out and we don't need to worry.

  • The_Gamesalad_GuruThe_Gamesalad_Guru Posts: 9,878Member

    @WyrdGuitarist said:
    Thanks for the help guys.

    Yup, I get what a retina screen is - just not how GS Creator handles the images with RI enabled.

    I think I've been thinking about it the wrong way around. So it's not so much that there's an image stored at half the size of the actor or the original image. It's more that the actor is automatically scaled appropriately for placement on the scene and the higher res image which the actor is based on is stored for when it's needed (i.e. for use with a retina screen).

    Makes sense if that's all it is - basically GS Creator sorts it all out and we don't need to worry.

    Close. You load in 2x images and when you publish GS creates copies of your 2x images scaled down for non retina devices. This will increase the size of your project so it's now best to uncheck RI when you publish so your package does not include those scaled down images that are really not needed anymore. This feature was added when Apple first came out with Retnia devices but now most all Apple devices have Retnia screens.

  • SocksSocks London, UK.Posts: 12,698Member, PRO

    @WyrdGuitarist said:
    I think I've been thinking about it the wrong way around. So it's not so much that there's an image stored at half the size of the actor or the original image.

    'Size', I'd be careful with the word 'size', a 10,000 x 10,000 pixel image can be the same 'size' as a 40 x 40 pixel image, or a 2 x 2 pixel image can be the same 'size' as a 2,000,000 x 2,000,000 pixel image.

    Images have no size, that can be whatever you want, a 16 x 16 pixel image can fill an iPad screen, while a 512 x 512 pixel image can be the size of an icon.

    If an actor is 100 x 100 pixels - ideally the image you are applying to it should be 200 x 200 pixels - if you check RI this means an additional 100 x 100 pixel image will be generated for low resolution devices.

  • tmanntmann Posts: 278Member

    @socks sometimes you just seem to stretch the size of a point for the sake of it or interject statements and qualifications that do little more than confuse the issue :)

    Sure the pixel dimensions of an image do not define the size of an actor that uses it or the size it is displayed when rendered but if your are talking about bitmap images then the whole world considers a 10,000 x 10,000 pixel image to be of far greater size than a 40 x 40 pixel image. The fact that you can arbitrarily zoom in and out of an image is surely understood by almost every computer user.

  • SocksSocks London, UK.Posts: 12,698Member, PRO
    edited March 2016

    @tmann said:
    @socks sometimes you just seem to stretch the size of a point for the sake of it or interject statements and qualifications that do little more than confuse the issue :)

    I spend time making my posts as clear as possible, you can interpret that however you like.

    @tmann said:
    . . . if your are talking about bitmap images then the whole world considers a 10,000 x 10,000 pixel image to be of far greater size than a 40 x 40 pixel image.

    Well, they'd be wrong :smile: Assuming the two images are the same in all other respects, the 10k image would have a higher resolution, than the 40 x 40 pixel image, but would not be 'of far greater size'.

    Like I say, images have no size, I don't think it's unreasonable to point that out, all I am saying is "I'd be careful with the word 'size", interpret that as a plot on my part to deliberately confuse and 'stretch the size of a point' for the sake of it if you want :) but the point remains regardless and I think it's a good thing to clarify these points, an image's size is arbitrary in a dynamic system, a 16 x 16 pixel image can fill an iPad screen, while an icon can be 512 x 512 pixels . . . etc.

    A good example here might be an iPad 1 screen vs an iPad 3 screen, both screens are 9.7inchs, but whereas the iPad 1 has a resolution of 1024 x 768 pixels the iPad 3 has a resolution of 2048 x 1536 pixels . . . so should we say the iPad 3 screen has a greater size than the iPad 1 screen, even though they are both 9.7 inches ? The same is true of a 1:1 pixel image on each screen (so a 1024 x 768 pixel image on the iPad 1 and a 2048 x 1536 pixel image on the iPad 3) would we say one image has a far greater size (even though both images have the same physical dimensions ?

    I think it's best to avoid 'size' here, and say one has a higher resolution.

    And this approach would get even stranger if we were to take something like an iPhone6 or iPhone6+, with a screen resolution of 1920 x 1080 and compare it to an iPad 1 (1024 x 768) and say the iPhone6+'s screen (or image on that screen) is much bigger / of greater size than the iPad 1 ?

    tl;dr I'd personally avoid terms like size and stick to absolute values like pixel count.

  • WyrdGuitaristWyrdGuitarist Posts: 91Member, PRO

    Yup, see where you're coming from - you're right 'size' is vague, particularly when I was talking about images and actors in the same breath :/

    @Socks said:

    If an actor is 100 x 100 pixels - ideally the image you are applying to it should be 200 x 200 pixels - if you check RI this means an additional 100 x 100 pixel image will be generated for low resolution devices.

    That was the bit I wasn't getting my head around, now need to go and put it into practice :).

    Thanks for the advice @socks and @Lost_Oasis_Games, it's much appreciated.

  • SocksSocks London, UK.Posts: 12,698Member, PRO

    @WyrdGuitarist said:
    That was the bit I wasn't getting my head around . . .

    When working on - for example - an iPad project you will be presented with a project that is 1024 x 768 pixels.

    Retina iPads are 2048 x 1536 pixels.

    So you are effectively working at half resolution.

    So when you place a - for example - 140 x 140 pixel actor into your scene, the area of that 140 x 140 pixel actor would cover (on a Retina iPad) 280 x 280 pixels.

    So you'd need to make the image for this 140 x 140 pixel actor 280 x 280 pixels if you want to use all the resolution of a Retina iPad.

    Non-Retina (legacy) iPads are 1024 x 768 pixels

    This is half the resolution of a Retina iPad, so your 140 x 140 pixel actor will only need a 140 x 140 pixel image - this can be automatically generated for you at the publishing stage (from your 280 x 280 pixel image) by checking the RI option.

    Hope that makes sense !

  • SocksSocks London, UK.Posts: 12,698Member, PRO

    Here, I made you a picture that shows the pixels for Creator, Legacy and Retina.

  • WyrdGuitaristWyrdGuitarist Posts: 91Member, PRO

    Yup, got it now - that's great. Thanks again for your time!

  • WyrdGuitaristWyrdGuitarist Posts: 91Member, PRO

    OK, so having just worked our way to agreeing that 2x the image size would work well for retina and legacy - should we be using 3x the image size to get the best overall device coverage? The post below seems to indicate it would be worthwhile for universal builds:

    forums.gamesalad.com/discussion/73348/notes-on-resolution-independence-on-0-12-x/p1

    :ducks for cover :/ :

  • SocksSocks London, UK.Posts: 12,698Member, PRO
    edited March 2016

    @WyrdGuitarist said:
    OK, so having just worked our way to agreeing that 2x the image size would work well for retina and legacy . . . .

    Yes. x2 works best for Retina, x1 for legacy (x1 being automatically generated from x2 if RI is checked).

    @WyrdGuitarist said:
    should we be using 3x the image size to get the best overall device coverage?

    No. There is a single situation where x3 would be a good choice - and that's the iPhone6/6s-Plus, in this situation you would be working to 2208 x 1242 (x3 GameSalad's iPhone6/6s-Plus project size) . . . this is then downsampled (in hardware) on the device to 1920 x 1080.

    All other devices would have their image fidelity compromised to a greater or lesser degree - as well as the processor having to deal with larger than needed (or able to be displayed) images.

    @WyrdGuitarist said:
    The post below seems to indicate it would be worthwhile for universal builds:

    If you read through that thread the general consensus changes as the thread progresses, what was suggested in the initial post is not what we end up with (a good thing!).

Sign In or Register to comment.