Graphical Style: Pixels allowed?

[ZeHa]

Hey there,

I would like to discuss different graphical styles and the thoughts of our customers :)

First of all, to make things less confusing: "Pixels allowed" is NOT about obvious oldschool designs (let's say 320x240 or something).

Well, so what I'm talking about?
It should be pretty easy, I think. At the moment, we're developing a smaller and a larger game, both 2D, but they shouldn't be too oldschool really. We're using 800x600 and 1024x768, so pixels are pretty tiny. But nonetheless, if I simply draw a character with a black border (consisting of single pixels), you can see them. If everything is colourful and such, it looks nice, but still, the pixels are there.

Another way to do it is to make the graphics vectorbased, then shrink 'em down to the correct size with some kind of anti-aliasing etc. I tried this, but with our dimensions, it's not THAT easy to get good results (main character is 32x64 pixels), and another problem that occurs is that the smooth stuff is only on the inside of the character, because on the outside, there is the "transparent color" which shouldn't get messed up (and I haven't tried "real" alpha channels yet).

At the moment, we try to stick with the first way, and try to improve the looks by adding some shadows (cel-shading-like) and so on. But the pixels won't disappear. Personally, I like pixels, but then I prefer the "320x240" style ;) - in higher resolutions, I would rather wish to find a way to make them disappear a little.

What would you suggest? Do you think, customers might regard a game as "dated" because of non-smooth outlines? Or won't they care, if besides the graphics are nice and detailed enough? Would you try to switch to the smooth way? Or do you think it doesn't really matter?

(btw, sorry for not posting screenshots, but at the moment it's not representable enough yet)

[JoKa]

I'd say it depends on the people you're targeting. For example retro or casual gamers should like nice pixel gfx. The first group has nostalgic feelings, the second simply has other priorities than the most shiny gfx. I know people (including myself, although mainstream gamer) who don't like the special fx overload in Fairies or Luxor2, because it's too distracting.

[ZeHa]

Well as I said, I don't think it's a "retro" thing. It's a kind of mixture between oldschool and modern, but I wonder if it's a "good compromise" or might look odd for some people?

Your game "Frutti Freak" is a good example, its main character is in pixel style but everything is in a high resolution - that's not exactly oldschool to me. But your platforms and such are a little more smooth actually. In our case, there isn't anything smoothed yet.
In your Fairy Game, the characters aren't pixel style anymore, they are very smooth, also at the borders.

[oNyx]

Well, use a full alpha channel and nice antialiasing. Or use at least selective outlines ("selout"). Basically you use some outline color which is a darker version of the color it surrounds. Just google up some tutorials. It's a lot nicer than black outlines.

[JoKa]

People like Frutti, especially kids or older players. In direct sales, Frutti does better than Penguin vs. Yeti, although the penguin game has much better gfx. In the end, the fun you provide is the most important factor :)

There's one point where pixel gfx definitely suck. While you still have a chance to be accepted by some portals, retail publishers will most likely reject your game (as stand-alone title, game collections are an option, but much less valuable). At least that's my experience.

[PoV]

Or use at least selective outlines ("selout").
Hehe, don't use that word on Pixelation today. It's blasphemy by today's standards. ;)

[oNyx]

Hehe, don't use that word on Pixelation today. It's blasphemy by today's standards. ;)

How is it called nowadays then? (It's still a nice googleable term tho.)

[PoV]

I'm not really sure if there is a fancy name anymore, short of anti-aliasing. Dark bits near edges are apparently just not cool anymore. You outline the edge, or you don't. The half-assed in between gets you shot. ;)

[Bad Sector]

I like pixels (obviously (http://www.slashstone.com/more/nikwi/screenshots.html)) and i believe that they are a distinct art style. Pixelart alone won't make your game look dated, dated pixelart will.

But even then, whatever you chose -pixelled or antialiased graphics- make sure you stick with it. The worst thing you can do is to mix pixelled and antialiased graphics - each one alone may look good, but together they simply suck :-).

A game with only pixelart can look good. Take Bud Redhead (http://www.space-ewe.com/bud_redhead.html) as an example. It has very good (and somewhat complex) graphics.

Btw, without a shot we can't offer much help. It's hard to find those 1000 words that each screenshot is worth :-P. Everytime i tried to use 'blocky -but with some kind of gradient- pixelled graphics with a background glow and nice -but blocky again- particles' to describe Titan Attack's graphical appearance, i failed to make others understand what i'm talking about.

[electronicStar]

If you want to make 2D without obvious pixels, my suggestion would be to use a "2D in 3D" framework.
That means using textured polygons to draw your sprites, this way you'd be able to access the openGL or DX texture-smoothing methods.

[Bad Sector]

If you want to make 2D without obvious pixels, my suggestion would be to use a "2D in 3D" framework.
That means using textured polygons to draw your sprites, this way you'd be able to access the openGL or DX texture-smoothing methods.

OpenGL or DirectX won't make a pixellized image to appear less pixellized. All it can do is to use bilinear filtering when the image is enlarged to avoid aliasing. Attached is an image with a monster from Nikwi which has a black outline. It is enlarged 4x with bilinear filtering. This is what you'll get if you enlarge a tile. However if you don't enlarge or shrink the tile, the image will remain as is.

[ZeHa]

Thanks for your answers!

"Bud Redhead" is not exactly the style I mean, because it's not obviously pixelated.
But I made a little screenshot of our game to show you:

http://www.dr-wuro.de/games/theo.jpg

Important: This is not a full screenshot, of course. The real resolution is 800x600.

Well as you can see, the outlines are clearly pixelated, they are clean of course but everyone notices the pixels. And as the resolution is high, I don't think you could say it's "oldschool style", so that wouldn't be an excuse in my opinion.

One thing that will be improved is that the main character will get a "hard" shadow on him, a darker variation of his body color, let's say for every 2 pixels from the left (I think you know what I mean, it's the same on the bushes). Our other game is isometric and has much larger sprites, but the style is the same, black 1-pixel-borders and hard shadows.

But do you think this might be a "nice style"? I like it, of course, but I don't know if the audience would like it more with smoother borders?

@ Bad Sector, I second that, just using a simple anti-aliasing on a sprite won't give good results. The only solution would be to make a huge vector version of the sprite, then export it as a bitmap and then resize it to the small size. Then everything gets smoothed perfectly.

@ oNyx: I haven't tried AlphaChannels yet, but perhaps it will work. I should really give it a try ;)

[Anthony Flack]

To me, that does look quite old-school, or at least kind of sitting in a slightly awkward space that's halfway towards retro but not quite stylishly retro. It reminds me of the Amiga trying to imitate a cartoon, a la Dragon's Lair.

I do like the flat-shaded look, but I think to pull it off effectively you would do better to shoot for an authentic cartoon-style look rather than an old videogame-style one.

My suggestion would be to draw everything by hand and import it at high-res, colour it and cut everything out, and then at the last minute scale it down (bicubic). This will give you a nice smooth cartoony look with proper antialiasing (you will need to make use of the alpha channel to pull it off properly though).

I also think that this sort of thing works best with very fluid animation. Then it looks great.

[Christian]

I think it all depends on what you do with those pixels, i mean, if you draw your sprites as if they where pixel art at such a big resolution as 800x600 it will be very very hard, because the pixels are not big enough so you would need to do extremelly big sprites to fit well in a resolution like that, it happened to me before, if you want to use that resolution you should draw your sprites without thinking in pixel art but thinking them as low resolution images, that way you can work comfortably in big sizes with good detail.

In case you didnt understand me, pixel art is best suited for very low resolutions like less than 640x480. It is very important to have in mind the size of the sprites on the monitor, because i have seen many times that people make too small sprites wich make difficult the play and the visualization of the UI. For example, you need to have the avatar of the player at 3x3cm on the monitor, you can draw it in a resolution of 640x480, that will mean that you will need to draw a sprite of 100x100 pixels (not the actual number, just as an example), no big deal, you just have to know where to place those pixels to get a beautyfull picture, but, change the resolution to 800x600 and you will need to draw a sprite of 300x300 pixels, a huge job if you are doing pixel art, its just too much work to fill such a large surface with pixels, its better to paint that surface instead of doing pixel art.
As has been said before, i also think that if you do pixel art in such a big surface its best suited for cartoony look, because you really cant focus on adding details with such small pixels, its better to fill large surfaces with colors instead of focusing on details, if you want details in big resolution go for painting.

So, paint them at the desired resolution to be able to see the end result as you paint and dont scale so that you wont end up with a blurry image, wich i think is a very common problem, its better to have a water clear image, crisp, detailed, than a blurry low quality image.

Personally, i dont think it looks good the way you propose because 800x600 is not good at all for pixel art, its best suited for well designed high res images, if you want you can add an outline but it would be best not to make them 1 pixel in width but to paint them or maybe using a filter.
I would also recommend, dont worry about the style, worry on the quality of the design as a whole, also, aim for unique identity, not style, aim for unique characters, unique palette, unique concepts, unique gameplay, dont worry about style too much, but design is the most important. Style wont help you, uniqueness in identity and good quality will.
The correct use of alpha channels is a must for anti-alieased borders.
Good luck.

[Bad Sector]

Well, first of all i must say that the shot looks cute but the art looks unfinished. I'll disagree with Christian on the resolution: 800x600 can look good with pixelart. But with the current monitor sizes, it's possibly the maximum you should go. Personally i prefer 640x480.

Also unlike Anthony, i like one-pixel the black outlines. Although using them all over the place isn't a good idea because the characters don't stand out from the background. In Nikwi (http://www.slashstone.com/more/nikwi/screenshots.html) i used a simple idea: i colored the outlines of the background/level tiles using a slightly darker version of the interior. I did the same for objects and hazards, but the outline was a little darker. Last for enemies and the hero i used plain black outline.

However i highly recommend to make your interiors more rich (shading-wise, etc).

[SculptureOfSoul]

Personally, I think it would look better as stylized vector art...the following took me about 1 minute to do in Inkscape (gotta love the trace bitmap command :)

http://i2.photobucket.com/albums/y33/SculptureOfSoul/spritetovector2.png

http://i2.photobucket.com/albums/y33/SculptureOfSoul/spritetovector1.png (I didn't touch this guy up at all, obviously, but even so the amount of work needed is trivial.)

[Anthony Flack]

I don't dislike straight black pixel-art-style outlines, as I quite like a bit of pixel art myself. Just the way it is presented here (with very plain, flat-coloured surfaces) doesn't quite work. Basically you are caught half-way between a cartoony and retrogamey style. Bad Sector's suggestion of filling in the details would work as well; taking it in the other direction towards really nice pixel art. However this may be a more difficult thing to pull off convincingly, depending on your level of skill.

[edit] And it looks like SculptureOfSoul has nicely demonstrated just how simple it would be to take the cartoon-style option.

[ZeHa]

Well our goal would be more the comic/cartoon style. And SculptureOfSoul, your "reworks" really look interesting!

But the problem is the size of the resulting images. I also converted the green character into a vector graphic, and it looked really cool (though my outlines were always the same width), but when I shrinked it down to 32x64, it looked a bit "muddy". And as I said, it's always a problem with the transparency, but I will check out the alpha channel stuff :)

You really make me think over it again... I think I'll continue with the current style to build the game, but everytime I feel like it, I should make vector doubles out of those sprites and then try to integrate them.

Another option would be to change to 1024x768, so the sprites could be at least a little bigger (resolution-wise, of course). But then again, I chose 800x600 to have a broader possible audience.


EDIT: Well here's my vector version in the resulting size:
http://www.dr-wuro.de/games/theo2.bmp
I don't really know if it's better. Of course, it's smoother, but the lines aren't sharp anymore. Though, if I try to re-sharpen them, it won't look good either.

Another question to alpha channels: Which color should I choose as the background before shrinking? 50% gray? And then, what would be the quickest solution to add the alpha channel values to the surrounding "smoothing" pixels?

[Bad Sector]

If you go with smooth edges, in order to avoid artifacts, you should either use an opaque background and use this background color for the sprite's background or use an engine that (or make your engine to) supports alpha blending.

[SculptureOfSoul]

If you insist on keeping the main sprite so small, I think you'll have to make a hard choice between pixelated art or slightly non-descript vector art. It's not at all possible to make your main character bigger?

Anyways, the question remains then as to which would look better. I've no doubt that a pixel art direction game could look as good or better then the vector art equivalent in this case, but you have to question how much work that would take and if it would be worth the extra time/money invested. If you only have X hours or dollars to invest in the art, in this case I think you'd get alot more return on your investment by putting it towards the vector art. Really awesome pixel work is going to much longer.

[ZeHa]

Well the only possibility to make the character "bigger" would be to set the resolution higher, but that's bad for some customers maybe.
The other one would be to really make it bigger and then add scrolling to my gameplay - but this would be fatal, because the gameplay has got a very special principle (which won't be revealed right now :D ) that just can't deal with scrolling.

But anyway, I will think over it again. To compensate the "non-scrolling" environment, I could try to split a level into three screens or something.

As for costs, well, we don't do external art, we do everything by ourselves and want to keep it like that. And we are not full-time-indie, so we don't have certain release dates to deal with. But on the other side, we want to finish it as soon as possible, but also as good as possible (it's a compromise really). It's supposed to be our first shareware game, and we created it because our huge project just takes too much time and we want to release a smaller game for the beginning, just to take a first step in to shareware marketing and so on. So yes, it shouldn't take too long, but of course it should be good enough to please our customers ;)

[ZeHa]

@ Bad Sector:

Of course my background is NOT just one color, so my question was intended to be: How should I prepare the sprites for good anti-aliasing by alpha blending? Would it be enough to, let's say, create the vector sprite on a 50% gray background, then shrink that down to a bitmap sprite using anti-aliasing, and then assign alpha values to every pixel that is not black and outside the outline? If so, is there an efficient way to do that last step, or a good tool?

Or is there a better solution to this problem?

[PoV]

Something fun to do with that vector version. Duplicate it, so there's 2 copies perfectly stacked on top each other. And on the copy below, fatten up the outline. So if that's a thickness of 1, make it, ... oh ... 4 should do.

The point is to make the outer edge stronger, while still maintaining the details inside.

[Anthony Flack]

Save it with the alpha channel intact, like in a PNG file for example.

[ZeHa]

That's not the problem, the problem is, how to get a good image?

I've got the full vector version in huge size, which steps should I go through, to get a nice little sprite that is ONLY semi-transparent on the outer aliased pixels? The inside should be completely opaque of course, only the outline has got those messy anti-alias pixels, and they need to get semi-transparent, depending on their color.

How can I achieve that? Assuming that I'll use Gimp for alpha-stuff?

[oNyx]

So you want to keep the inside aliased and the outside should be anti-aliased?

Well, with that art style I would create em in Inkscape completely. Set the document size to sprite size... draw... export document as png. The inside would be obviously anti-aliased as well then.

For crispy straight lines set the grid size to 1x1px and use a 1px wide line.

[ZeHa]

No, I meant anti-alias on both the inside and outside, but the outside with transparency... but now I know how, a friend of mine helped me out ;)

The answer is to open the huge version of the picture in gimp, then remove the surrounding background color, so that transparency shows through, and THEN shrink the picture to the resulting size. That way, the anti-alias-pixels get their alpha-channel-values automatically and it can be displayed over any background perfectly ;)

EDIT: But I'll try Inkscape, at the moment I only tried Corel Draw and I'm not very satisfied with it. Perhaps I can do everything in Inkscape, so I won't need Gimp for the alpha channel stuff?

[ZeHa]

This is a little mockup, showing the new character standing beneath the old one:

http://www.dr-wuro.de/games/theo3.jpg

You were right, I think it really looks better, though I'm a very big pixel fan. But as I said, I think pixels look cool in low resolutions, but for higher resolutions, it doesn't work too much. So I'll stick with those aliased sprites from now on.

Thanks for your help ;)


EDIT: Do you think it would be good to re-touch the walls, too? Of course the bushes and ladders will get their share, but what about the walls? I think they look perfect now, but perhaps they won't fit anymore when everything else is replaced with smoother sprites?

[SculptureOfSoul]

I think the walls will stick bit if you don't stylize them a bit, but I'm having a hard time visualizing how it will look with the bushes and ladder vectorized, for some reason.

My opinion is that cartoon styled graphics benefit a lot from varying width outlines. But really, it all comes down to what you think looks best - download Inkscape (hey, it's free!) or use Corel Draw and just mess around and experiment. Then, if you want the opinions of the masses post'em here and I'm sure you'll get feedback. ;)

[oNyx]

[...]
The answer is to open the huge version of the picture in gimp, then remove the surrounding background color, so that transparency shows through, and THEN shrink the picture to the resulting size.[...]

Yes, you can get some anti-aliasing this way. However, the result is a bit more smeary/blurry then it needs to be. The reason for that is you're decrease the sampling accuracy, if you're using an image with limited accuracy as source instead of some mathematical thingy (vector art or some 3d model) which basically has infinite accuracy (well, as far as we're concerned).

Drawing cartoony stuff is a lot easier with a vector drawing program (such as Inkscape) then with pixel pushing apps (such as Gimp or Photoshop). Drawing the initial shape takes a bit longer perhaps, but adjusting/tweaking it is way easier.

I also think that being able to do vector art is a very useful skill. Getting your art done and obtaining some handy experience on the way is surely something desirable.

[ZeHa]

I think you got me wrong, of course I drew the big version as a vector image. But then I copied that as a huge bitmap (let's say, 10 or 20 times as big) into Gimp and then shrinked it down.

But I'll try if I can do that in Inkscape as well, but I'm not sure if it's possible with the transparency.

For not getting it too blurry, I'll also try shrinking it to double size first, and then shrink it to the resulting size without additional anti-aliasing. That way it might get a little sharper but still anti-aliased.

[oNyx]

No, I understood what you mean just fine. For each pixel you have then X*X pixels, which only give you some rough idea of the actual value.

>But I'll try if I can do that in Inkscape as well, but I'm not sure if it's possible
>with the transparency.

The empty parts are transparent by default. You can change the background to something else via document properties. Note that thats for export only and not part of the svg spec. If you want some background in real svg documents you have to create some giant background rect.

>For not getting it too blurry, I'll also try shrinking it to double size first, and
>then shrink it to the resulting size without additional anti-aliasing. That way it
>might get a little sharper but still anti-aliased.

Yes, you can strip some of the anti-aliasing by exporting in 2x or 4x and shrinking it down with some pixel repeat algo. With 8x you remove almost all anti-aliasing. However, I think that the results aren't all that great. I would always pick the 1:1 exported image.

Well, you can always touch em up here and there with Photoshop/Gimp if you like.

[GolfHacker]

Interesting thread. I've always worked with pixmaps, not vector-based graphics so this is new to me.

I'm starting to redo the graphics for our Fashion Cents game, which I'm rewriting using SDL/OpenGL, and I've been thinking it would be nice to offer higher resolutions than 800x600. But I don't want to pre-render a different set of bitmap graphics for each resolution - that would make the game download pretty big. And I'm not sure I want to generate a super high-res graphics set and dynamically scale it down for lower resolutions.

Does anyone have any experience with importing vector-based graphic files (like SVG) into OpenGL textures? It seems like I could run the game at any resolution if I did that, and the graphics would always look nice and crisp. Are there any code examples or tutorials on how to do this (cross-platform only)?

[oNyx]

Well, you need some lib which you can use from whatever language you're using. If you're using something like C you could take a look at Cairo (http://cairographics.org/) (LGPL). It's supposed to be pretty decent.

[Jesse Hopkins]

Pixels definitely allowed! Pixels can be a beautiful thing under the skilled hand of a great pixel artist. I'm glad we're past trying to push low res/low color to look "real" but I am also glad that many indies have kept pixel art alive. Nintendo also kept it going with GBA/NDS. I'm glad we're not in a totally smooth world for games.