Advertisement

Sprites question

Started by February 13, 2015 12:08 PM
7 comments, last by Volnaiskra 9 years, 10 months ago

Hello,

I'm new to this forum so please let me know if I'm posting in the wrong place or whatever. Today I have a quick question regarding sprites. I've recently been working on some 2D pixel art for an iOS game that I'm making. Ideally I would like the game to be playable on all iPads including the retina display ones and perhaps each of the iPhones. Obviously this means that I need to choose a size that can work with all of these devices. Therefore I've read a number of articles and watched numerous videos on youtube about how to approach this task. The medium that I plan on working with will be photoshop, since it seems to be one of the better programs out there to use. Anyway a lot of the resources that I've found so far seem to prefer the 32x32 sprite size with a resolution of 72. I tried that out on photoshop but that size seems a bit too small for sprite design. My artwork tends to be quite detailed in nature so I'm wondering if a bigger size like 64x64 with a resolution of 72 would be better? Also I plan on having a very dark/moody sort of setting to my game and I've read that in order for this to work then you should have big sprites anyway. Can someone explain why this is the case? Finally I was wondering if anyone had ever done a sprite comparison which looks at the most common sizes and how they would appear on the actual device. Cos everyone just says that it's basic maths but it would make more sense to me to actually see what the finished product would actually look like on the screen itself... even if the image was just a quick sketch. Sorry for all the questions here, but this is completely new ground for me.

Make what you like.

Advertisement

Make what you like.

That doesn't really answer my question. Is 64x64 a good place to start though for iPhone & iPad? or is it too small/big? I just don't want to spend heaps of time working on a detailed sprite only for it to not work with the intended devices.

Well, I would make a low detail placeholder graphic to test how things look on your test device. I develop on Android and the resolutions and pixel densities vary ridiculously and I'm not familier with iDevices. I tend to make my graphics the way I like and scale them based on the percentage of the screen I intend to use with my spites.

I would guess a comparable functionality in term of sprite handling is available in iOS API's.

Well, I would make a low detail placeholder graphic to test how things look on your test device. I develop on Android and the resolutions and pixel densities vary ridiculously and I'm not familier with iDevices. I tend to make my graphics the way I like and scale them based on the percentage of the screen I intend to use with my spites.

I would guess a comparable functionality in term of sprite handling is available in iOS API's.

I suppose I can try that. Still it would be interesting to see how others have handled it.

If you're going to succeed at this, you're going to have to get comfortable with getting your hands dirty. Trial and error is unavoidable. Try placeholders out, like latch says. Also, open some successful iOS games and see what they use. Extract the actual graphics files if possible, or else take screenshots and measure them in photoshop.

But I'll try and get you started. Though please note that I'm not actually in iOS user, so I might have gotten something wrong.

First off, as a general rule, bigger is safer. If you change your mind down the track, it's easier to shrink your graphics than it is to enlarge them. In normal (non-pixel-art) graphics, it's totally trivial to shrink them when exporting, and I usually like to work at huge sizes, because it's easier, and gives me more flexibility.

But since you're doing pixel-art graphics, that complicates it a bit, as you can't just shrink sprites arbitrarily without losing the pixel-art look. However, if you shrink a sprite by a factor of exactly 2 (eg. 128--->64) using "nearest neighbour" filtering, that might give satisfactory results.

Also, I'm a big Photoshop fan, but I doubt it's the best tool for pixel graphics, due to the automatic anti-aliasing of many of its tools.

As for your question about dark/moody sprites, I think that's just a subjective issue rather than a hard rule. Though I do imagine that a tiny 32px sprite would be too cartoony and cute to be able to convey much moodiness (or much of anything, really - 32px is miniscule).

Anyway, let's look at sizes.

Remember that different iOS phones have different resolutions and pixel densities. www.screensiz.es is a good resource that outlines all the different formats. So, your game will always look different depending on what version of the iphone the user has. For example, the newer iphones have double the pixel density of the older ones. But, let's take the iPhone 6 as an example, as that seems a logical place to start. Though in reality, by the time your game is finished, there will probably be newer and higher-res iphones available.

The iphone 6 is 750 x 1334px. I've made a mockup for you. which shows exactly how big 32px, 64px, 72px, and 128px graphics would look on a 750x1334px screen. This forum won't let me link to a png file, so please paste this address into your browser, but replace the asterisk with a dot: pasteboard.co/17MFF8Up*png Personally, even 72px looks too small to me.

If you want the PSD, you can PM me. But I don't come here that often so you'll probably get a quicker response if use this form to contact me.

It's important to distinguish here between what size you work at, and the final output. The iphone has very dense pixels (though not as much as Android phones). So for a pixely look, you'll have to double, quadrouple, or even octuple your graphics, so that the pixels look like big visible squares. So, you might design a sprite at 32x32, but then you might quadruple it (using nearest neighbour to avoid antialiasing), so that you end up with a 128px x 128px file that looks like a 32x32px sprite.

Now, a word about "72 pixel per inch" (which is what you mean when you write resolution of 72 - take a closer look at the Photoshop new file dialog, to the right you'll see the dropdown that specifies whether you mean 72 pixels per inch or centimetre). Forget about it. This 72 ppi nonsense doesn't mean anything, and never did. It's something invented by print designers who couldn't get their head around the fundamentally different paradigm of the screen. You need to think only in terms of pixels.

What you type into that "pixels per inch" field in Photoshop doesn't really matter. You could type 1, or 5000, and it wouldn't actually affect how it's displayed on the iphone. But you may as well type 326 there, because that's the actual "pixels per inch" of the iphone 6, as you can see on www.screensiz.es. Again, typing 326 doesn't change how it'll display (an iphone 6 will always display at 326ppi no matter what), but it will change what you see in photoshop when you choose View\print size.
If you tell Photoshop that you're using a ppi of 326, then doing View/print size will try to display your file at the actual size of a real-life iphone 6. That's handy, though it's only an approximation, since Photoshop has no way of knowing how large your monitor is (and therefore how large each pixel is), so it can't actually calculate the pixel density with precision.

Advertisement

The iphone 6 is 750 x 1334px. I've made a mockup for you. which shows exactly how big 32px, 64px, 72px, and 128px graphics would look on a 750x1334px screen. This forum won't let me link to a png file, so please paste this address into your browser, but replace the asterisk with a dot: pasteboard.co/17MFF8Up*png Personally, even 72px looks too small to me.


Nothing's wrong with linking to a PNG file:

d24643db_ebd1_4ff3_b971_1066487f6183.png

The forum software does allow linking to PNGs (and .gif and jpegs), you just didn't actually link to one - the website you used was lying to you. ohmy.png

[spoiler]
Despite your url ending ".png", the website you are linking to is lying in the URL. It doesn't actually send you to a .png file, it sends you to a webpage that has an image embedded in it. See the stuff all around the image, such as the buttons on the right-side of the image? That means it's a webpage, not a PNG file - again, the website was lying to you, the URL is not a PNG file (despite ending ".png") - it's actually an HTML file that they renamed to '.png'. rolleyes.gif
The image you uploaded to the site was a PNG file - you didn't do anything wrong; but the link the site gave you to post was a lying, dumb, idiotic, non-standard URL. When you accidentally gave the dumb improper mistaken URL to this forum's software to embed as an image file, it wasn't actually an image file. It's that weird trickery on the part of the website you used that the forum software didn't understand and, properly, rejected.

I've ran into the problem with a few other websites. The websites do this intentionally to stop people from directly linking to the images and embedding them, because they want people to visit the site instead of sapping their bandwidth. It's not a virus or anything malicious, just a site (the image-hosting site you are using) not behaving the way it's supposed to. This is zero fault of the GameDev.net forum, and 100% the fault of the website you used. All I had to do to display your image was upload it on a site that does allow normal, standardized, proper, linking. And bam! It works as it's supposed to. happy.png

Just to be clear. This is an image URL: postimg.org/...%5Bsnip%5D...183.png See? The image is all alone in the browser, because it's just an image.
This is the URL the website gave you: pasteboard.co/17MFF8Up.png The image is NOT alone - it's embedded in a webpage. It's not an image link, it's a webpage link.
They took a webpage (a .html file), and renamed it '.png'. Renaming the extension of a file doesn't actually change the file type. Trying to embed a webpage in this forum, and telling the forum it's an image when it's really not, that is what the forum didn't allow you to do. You said to the forum, "Here's an image.", and the forum told you, "Uh, no it's actually not."

Pardon any seeming anger on my part - it's not directed at you. The internet is duck-taped together and broken enough without some websites intentionally breaking stuff just to be clever. It's not actually anger either - it's my eye-rolling condescending amusement at the website's expense. laugh.png

Anyway, why not try puush.me? Yes, it requires an email and password, and you install a tiny app on your PC or Mac or iPhone, but it works fantastically well and does what it says it does. If you don't want to give away an email address (I gave one of my sign-up specific addresses, not my main address), consider using one of the other dozens of free imagehosts that don't lie to you and make you think you (or the forums you visit) are doing something wrong.
[/spoiler]

Also, you could link to the bad link with a normal hyperlink just fine: http://pasteboard.co/17MFF8Up.png - no need for funky asterisk nonsense. wink.png

Thanks guys, I think that I like the look of 128x128 for the iPhone 6. I'll try 326 for the resolution and see how that goes.


........
I trust you feel better now that you got that out of your system :)

This topic is closed to new replies.

Advertisement