Screen Size for Pixel Art, Theory, correct me if I am wrong.
RossmanBrothersGames
Member Posts: 659
So my recent release Jump Jack was made with an iPHONE 5 landscape project with RI turned on to get crisp pixel art.
IPHONE 5 in GS is 568x320, with RI making the total pixel 1136x640. My tiles that were 32x32 were doubled in photoshop to 64x64 to fit this.
This means that all my images were twice the size they needed to by since I was using a retro pixel art style. We would design a character at 50x50, then just double the image to 100x100 for RI.
Now this resolution looks just as good upscaled as it does on the iphone5. It looks good on the larger 6 and an iPad, and a computer screen.
Here is where my question lies moving forward. 568x320 is a good resolution for the 16-bit style we are shooting for. Would it make sense to manually change the camera size to 284x160, and RI would make the game plat at 568x320.
Now instead of doubling my 32x32 tiles to 64x64 for no good reason, I could leave them at their actual resolution and the actors they exist in would be 16x16. Thus file sizes would be smaller and the game should preform even better, am I right?
Looking through the forums I am surprised this hasn't been asked. Is there something I am missing that would make this not work well? Has anyone tried it.
If my iPhone 5 resolution looks fine on an iPad and TV for pixel art, shouldn't a smaller resolution using RI work fine as well?
GS team, is there a reason I shouldn't attempt this for future projects?
Comments
Wait for gamesalad to support Nearest Neighbor Interpolation. Hopefully when this feature is available, we can set up a very small display and camera size to archive an effect like in this image.
interesting, however we are starting our project now.
@GeorgeGS @BlackCloakGS is there any reason I shouldn't just lower the camera size for a game using pixel art, to force a lower resolution?
www.rossmanbrosgames.com
Forcing a lower resolution will mean your images will look blurry when on a Retina device (which is basically any device these days).
@Socks thanks for responding. However I finally got around to testing this. Here is an ad hoc build where I forced the camera size down to 480x270 (1/4 1080) with RI on so running at half of 1080. And the graphics look nice and crisp. Screen shot taken from my iPhone 6. Not sure why we haven't tried this, seems like a viable option for pixel art games. Shouldn't this make games run smoother?
(Edit click on the picture to view it full size, can see that it is not blurring)
www.rossmanbrosgames.com
To be honest I don't know what your process is, these figures are different from the ones in your orginal question, you'd need to supply more details, forcing a camera to 480x270 doesn't tell us much other than your camera is around 75% the size of the standard camera size in an IPhone 6 project (essentially you zoomed in a little), it would be useful to know, for example, things like the image asset's resolution.
Yeah sorry for not giving details. For our newest game we are trying to hit the right resolution to get the look we want. Our character is 32 by 32. In testing around in photo shop we found that character looks best size wise in a 270 resolution, 1/4 of 1080p. Meaning if I use RI and want to double the image till it fits well with something of that size the closest thing would be to use the 6 plus screen size and make the actors image x4 at 128x128. If I use an iPad resolution I would need to go even higher to get close to the actor size on screen that we want.
I tried doing a camera size at 240x135 (1/8 1080p) with RI and keeping my actor at 32x32 but it looked strange on the device. So I tried at 480x270 with the actor doubled to 64x64 and it looked great and was the exact size we wanted for the screen ratio.
I'm just hoping that if I start the project this way I'm not doing something that won't run well in Gamesalad. I would assume this would help file size and performance not having to quadruple my images but just double them. However does zooming in like this put more stain on the engine? I'm not sure.
www.rossmanbrosgames.com
Just checked your image (see copy attached here), it is exactly how I'd expect it to be, the pixels have been interpolated, I've scaled up your image (with no interpolation / NN) to 1,000%, and you can clearly see the effects of the interpolation.
There's really nothing going on here out of the ordinary, the pixels have been scaled up (and blurred in the process) exactly as you might expect.
But, if it looks good to you, then that's all that's important at the end of the day.
I'm afraid that's all just gone over my head !
I think I need more coffee, you know sometimes when a bunch of numbers just merge into a giant lump !! Not sure why you are referencing 1080p ? You may as well say 270 is 1/10 of 2700 ? Unless I misunderstand the point being made.
I was hoping you'd say something a little more straightforward like:
The image in my example is AA x AA, it is applied to an actor which is BB x BB, this is in an iPhone 6 project - and the camera has been zoomed into XX.
From that kind of information we can tell whether the process (of zooming in) really offers any advantages (or gives you control over how the image is scaled - which is basically the theory here) over working at the standard non-zoomed size.
Sorry, that didn't get into my brain either, I'm still confused by the reference to 1080p ?
Yes, smaller file sizes (with certain caveats) will place less strain on the processor and improve load times.
No, not at all, zooming will not introduce new data, it will just change where that data is displayed - but like I say the idea that zooming offers any advantage when it comes to controlling image quality is - in my humble opinion - mistaken.
Yeah, however when I zoom in on screen shots of Jump Jack which was made at retina display, it also has the slightest bluring around the edges.
Sorry for being confusing in my explanation. Overall I was considering making the game with the smallest sized images for the purpose of better performance and file size. If I use one of the iPhone or iPad resolutions I will need to multiply my original image sizes by 4 or more to make the actors a good size on the screen and create the pixel look we desire.
No need for all the other info I gave, just my thinking process laid out, haha.
Thanks for your input @Socks I'll most likely just do the game at one of the preset retina device resolutions, but might run a few more tests first.
www.rossmanbrosgames.com
I don't know what 'at retina display' means in this context ?
Without any kind of details (what is the project size, what is the size of the actor containing the image, what is the image size, how and on what device are the screenshots taken, how are you zooming in on the screenshots . . . and so on) it's difficult to make any kind of comment.
Smaller assets will (with certain caveats) given better performance, but like I say they will be blurred as they are interpolated to the size being used on the target device.
I'm not sure what this means, too many arbitrary terms for me ('good size' 'orginal image sizes' ‘4 or more' etc)
but basically the process of getting a sharp, non-blurred/interpolated image from GameSalad to the target device is pretty straightforward, on an iPad project for example you simply need to make your image assets x2 the resolution of the actor they are being applied to, anything lower that x2 will result in interpolation and blurring, anything higher than x2 will also result in blurring as they are scaled down to the right size.
Reducing the resolution of your image assets and zooming in on the scene is the same as reducing the resolution of your image assets and then increasing the size of your actors, both methods will introduce blurring (aliasing).
A test !
(these test images have been scaled up x10 - no interpolation)
The two images on the left:
Top - a 48 x 48 pixel image - each pixel has been doubled, so the blue and black vertical lines are 2 pixels wide (x2) in the original asset - applied to a 24 x 24 pixel actor.
Bottom a 24 x 24 pixel image - so the blue and black vertical lines are 1 pixel wide - applied to a 24 x 24 pixel actor.
This is how these two same sized actors display on a Retina iPad screen.
. . . . . . . . . . . . . . .
The two images on the right:
Top - the 48 x 48 pixel image applied to 12 x 12 pixel actor.
Bottom the 24 x 24 pixel image applied to a 12 x 12 pixel actor.
The camera is then zoomed in 200% (change camera width and height to half of the screen size)
. . . . . . . . . . . . . . . .
Haha. That is cool a test
@RossmanBrothersGames I have always scaled my images up to about 5 times the needed size and they look great! @Socks thanks for showing me that! Tis really cool! And the top left looks VEEEERY, slightly blurrier compared to the top right.
Making your images larger than the needed size will reduce the image fidelity as they will need to be scaled down to the correct size, an odd multiple (5) is worse than an even multiple (except in the case of the iPhone 6+).
Neither are blurry at all (you need to click on the image to see the full-res file).
The two images completely null, so are identical.
Here's a small section chopped out of the full-res files, top left (left) and top right (right):
And here they are nulling to (pretty much) 50% grey:
@Socks Okay thanks for showing me that
thanks @Socks that makes it very clear. Now I am wondering if it creates a problem to make the camera larger. Reason being for the size my original character is being made in (32x32) I don't like how it looks when I double it or quadruple it and put it into the GameSalad preset resolutions for different devices. It either looks to large or too small. So I just made my own camera size at 960x540, somewhere in-between the 6plus and the iPad, and the size of the character on screen looks great (I took the 32x32 and made it 128x128)
www.rossmanbrosgames.com
Again it's so not clear what you are saying, sorry if I'm being a bit stupid, but I'll make some guesses.
_ I am wondering if it creates a problem to make the camera larger._
Zooming out (making the camera larger) will simply shrink the size of your actors / scene, this offers no advantages with regard to image fidelity over simply reducing the size of your actors.
Reason being for the size my original character is being made in (32x32) I don't like how it looks when I double it or quadruple it and put it into the GameSalad preset resolutions for different devices.
The phrase 'double it / quadruple it' is a bit too vague for me, if the 'character' (image ? actor ?) is too big or too small then you can simply alter its size to the size you want, there is no real need to use the camera to attempt to change the character's size (unless of course you prefer to work this way), but - the point of this thread - changing the camera size to change the size of a actor does not offer a different interpolation method compared to simply changing the actor's size . . . that is to say doubling the size of an actor will give you an identical result to halving the size of the camera, neither will increase or decrease image fidelity, the results will null to mid grey.
So I just made my own camera size at 960x540, somewhere in-between the 6plus and the iPad, and the size of the character on screen looks great
If it looks great, then it is great, and if quadrupling your image assets doesn't noticibly effect performance then it sounds like you have found a good compromise that works for your game !
Thanks for your patience and responses, I think this might be where you are missing what I am saying.
If my image is 32x32, and I am using RI, I can't simply alter the size to the size I want. I can only alter it in even multiples. (Just as you told someone in an earlier post not to use a multiple of 5, they should use even multiples) So my only choices if I don't want to distort my original image is to double it to 64x64 or quadruple it to 128x128. The problem is I don't like how either of those sizes look size wise with any of Gamesalad's preset resolutions. So I need to make my own resolution, in this case 960x540 (1920x1080 with RI). Just hoping that it shouldn't reduce image quality doing so.
www.rossmanbrosgames.com
I've never told anyone to not do something (or to do something), I've explained how scaling an odd value into an even value will produce a more compromised image quality than if it were an even value to start with - sharing this information is not the same telling someone what to do !
Your image is 32 x 32 pixels, what size would you like it to be, and why can you not alter its size to this preferred size ?
Again, maybe I'm misunderstanding what is going on here, but I don't understand why your only options with a 32 x 32 pixel image is to double it to 64 x 64 pixels or quadruple it to 128 x 128 pixels ? Could it not be, for example, 48 x 48 pixels if you wanted ?
< The problem is I don't like how either of those sizes look size wise with any of Gamesalad's preset resolutions.
I think we are talking a different language
I don't know what 'look size wise' means, maybe we just work different ways, with different needs, different design approaches and so on, but personally I just make my images at the size I want them to be, and make sure their resolution is twice that of the actor if the target decive is - for example - a Retina iPad that is expecting x2 assets to perfectly match 1 image pixel to 1 display (physical) pixel and therefore suffer no interpolation artefacts.
Also when you say you don't like how 64 x 64 or 128 x 128 pixel assets look . . . . if you were to prepare your assets correctly (in your '8bit' style that would mean simply doubling or quadrupling the pixels using nearest neighbour) then 32 x 32, 64 x 64 and 128 x 128, applied to the same actor, will look identical, in fact they will null each other, so it's not clear why they should look any different ?
It will do to some extent, for example 960 is not evenly divisible with 2048 (x2.13), but like I say if it looks good on screen to you, then it is good, the people buying it will be seeing the same thing so it should be fine.
I've just had an epiphany of sorts (or I've just woken up
)
Are you doing this . . . (or something like this)
. . . . .
I want my '8 bit' design to be 32 x 32 pixels
But when I bring it into GameSalad, 32 x 32 pixels is too small for the scene.
I cannot scale it up because the neat '8 bit' design will be ruined.
Unless I scale it up to exactly 64 x 64 or 128 x 128 (etc).
But then the image is too big when I bring it into GameSalad.
And I cannot scale the 64/128 version down because the '8 bit' design will be ruined.
. . . . . .
So . . . . instead I leave it as a small 32 x 32 pixel image and simply zoom the camera in so the actor looks larger.
. . . . . .
Is that what's going on here ?
That is correct. For example if I made the image 48x48 it wouldn't have the 8bit look Im going for.
The problem is I want the actor to look a specific size on the screen (not the 128x128 is too big for gamesalad)
Here are four images of my actor at 128x128 in different preset resolutions on game salad. (screenshots taken from the creator so not best quality)
iphone6
Actor takes up more of the screen than I want.
iphone6plus
Camera is still to close to the camera
Custom camera I made by changing the size
The size on screen I am going for
Ipad
Actor is smaller on the screen than I want
I'm just wondering if image quality is lost by forcing your own camera size
www.rossmanbrosgames.com
Yep !
If you are attempting to resize your actor (and the image applied to it) by zooming the camera in and out - then you are still working with the same pixel grid . . . . that is to say if a 32 pixel actor looks bad when enlarged so those 32 pixels are spread across 40 pixels . . . then it will also look bad if you instead use the camera to enlarge the actor from 32 pixels to 40 pixels.
There is not a second method of interpolation used by the camera that is not used when scaling actors up.
They are identical, like I say above, a 64 pixel image/actor enlarged to 128 pixels will produce an identical result to the same 64 pixel image/actor zoomed into (by halving the camera size) so it is 128 pixels, the two images will null each other and give you a 50% grey image.
thanks @socks that makes sense
www.rossmanbrosgames.com
@RossmanBrothersGames is that your next proj? if so that gun looks awesome!
POLAR ROLLOUT (New Line-Drawing Physics Puzzler!) - FREE Download
@supafly129 thanks! yeah thats the first mock up for the main character
www.rossmanbrosgames.com