pixel art tips?

[mr_malee]

hi people

i'm gonna try something different this time for my next game, i want to start creating the art now rather than later, basically i wanna stay motivated with this project and to do so i think i need to see some graphics of my own.

it will be isometric and pixel style. I haven't really done iso before and dont really have much experience with 2d, but i love the style of pixel art, and really want to produce good results with it.

So out of us programmers/artits who delve into pixel art, got any good tips? I'd love to know some good tips for lighting, texturing, work flow, realism etc. If you want to be realistic and avoid the cartoony side, how best to go about dithering, shading? do you import photos and simple degrade the colour count? Does photoshop have any neat tricks to help keep my mouse clicking to a minimum.

If you've got any advice for a pixel artist wannabe, then please share

thanks

[tonypa]

Digged up some links, maybe you can find something helpful:
http://www.natomic.com/hosted/marks/mpat/index.html
http://www.19.5degs.com/element/836.php
http://www.pixelfreak.com/en/tutorial0.html

[renderhjs]

good resources:
http://www.pixeljoint.com/
tutorials:
http://www.pixeljoint.com/pixels/tutorials.asp

rendering iso style sprites from within max:
http://board.flashkit.com/board/show...ighlight=pixel

can you give any rough description what you want in the end,- like genre, colors, theme, style,...
A good start might be to determine the grid style and size,- weither you have slopes or just blocks and the how the terrain is rendered (bitmap placing, rectangular bitmap transformation (with the matrix class),...)

[fil_razorback]

Great tuts here : http://www.spriteart.com/main.html
Great people here (for critics and comments) : http://pixel-arts.org/pixelation/index.php

[BlinkOk]

from a programmers point of view i reckon it's best to start with a 3d proggy and model your object. then massage the results to get the pixel look.
i have a bit of a process i use with swift3d (the vector output translated well to pixel) but i reckon you could get a similar result with any 3d proggy

[mr_malee]

great, thanks for the links and help guys

Blink, that is a great suggestion didn't think of that, it would be much easier to design the structures in MAX then apply the pixel look i'm after. Who knows, if the 3D object looks good then i might just keep it. I will have to do up the units (anything with animation) in 3D, i just couldn't comprehend all the angles and frames needed

Render, i dont want to give too much away, but its set in many apocoliptic citys, not really open area forest stuff, buildings, streets, parks, even inside buildings. I'm taking a different approach to this RTS. There will be army's just a different type The tile size i'm looking at is 16x16. I want my tiles to look realistic, and not cartoony, examples:



so i really need to nail the textures. I'm trying to go for a very spooky atmosphere, dull, overcast, dark and gloomy. Zombies will play a mid sized part in this game, and we all know zombies hate bright colors. I would love to have sloped tiles, theres no support for them in my engine so it'll have to be flat for now.

The terrain will be bitmaps, yes.

[luxregina]

If I can give any advise :

- Select "to the closest" in your photoshop preference for "scaling" - that will allow you to scale stuff to the pixel with no antialiasing : the result can be crappy, but nothing that resist a little hand-edition, and, from my experience, it's much faster than getting rid of the antialiasing on a tile...

- Use textures : bend them, twist them, correct them, but if you are not a purist, textures will be a time saver : you want to edit them enough to make them your "own", but you will go faster editing them than creating them from scratch

- if you don't have the dream texture handy, you can create it in a square format on photoshop, then use the "tile" option in Image Ready - for "natural" textures, that work quite well, but for other types of textures, the result is really obvious, and I found faster to create them from scratch, directly tilable...

- Color burn/dodge are your friends : once you pick a tint, you can use the two tools to shade them - most of the times, you will have to color-correct with hue and saturation, because, specially the burn tool can have pretty saturated results on some tints, but it's a faster workflow, as you get sort of a preview of what you are working on, even if you are going to refine the result by color correction later

That all I can think for now, please ask questions if you have any

[luxregina]

ho, one last hint : it's not bad to predefine a reduced color palette before you start creating your graphics. You are not going to use it for shading, but that will help you keep your graphics in harmonious tones that you will have predetermined : you can use it for your basic tints, pre-shading, and the end result should be that any tile belonging to that color palette would look good next to any other tile from the same palette

[renderhjs]

warning pimp post ._.

I was actually talking about something like this:

though it shares the same floor tiles with just a simple matrix transformation you automaticly get the iso tiles- without any glitches or seams.
check it out in online swf:
http://www.renderhjs.net/bbs/flashki..._iso/index.htm

the 2 blue square are actually 16² pixels ,- so you can compare how they could look in iso perspective. A 3d realtime perspective like the demo with a camera that can be controlled would be nice as well- but that depends on each taste.
Like the demo says the 2 movieClips from the terrain are the same- with the difference that the left one has a matrix transformation applied.

[Son of Bryce]

I think it's helpful to study games with styles that you'd like to imitate. Try to copy the style by creating textures or props that would fit into the game and eventually you'll get a feel for it.

Trying to come up with a style out of your head without any previous practice can be quite difficult.

[VENGEANCE MX]

Render... any chance you could post the source code for that?

[BlinkOk]

16x16 is a VERY small tile size, you're really in the pixel zone there. I think if you double the size of your tile you will half your pixel work.

[renderhjs]

@ BlinkOk: most SNES & Genesis titles used 16*16 tiles,- e.g Zelda LTTP uses 16*16 tiles as well though a few could be grouped into 32*32 tiles.

@ VENGEANCE MX: I´ll prepare a package by tomorrow and PM it to you- all AS1/2 stuff

[mr_malee]

wow, that looks great render, i see what you mean but while it looks fantastic its not what i'm after, if you look at the canyons they've lost their direction and height. They look more like rocky coast line now, not that its bad.

I must say though the units and buildings there look really awesome with a rotated camera.

blink, good point, raising the tilesize will decrease time needed for pathfinding too, if i keep same map size, i could split tiles up into quads for positioning, 4 units per tile, instead of 1.

thanks all for the help

[renderhjs]

@ mr_malee:
I limited that demo cause you said you were aiming for just 1 height layer with no slopes- multple layers with different heights could be an option there.
Units would look even more impressive in rotation mode if they´d be rendered from multiple angles and display the correct one depending on how the camera is rotated.

Anyway my point was that it might be easier creating block tiles intead of diamond shaped tiles for the terrain.

[mr_malee]

yeah i see your point, it would be nice. If i wanted to create the illusion of height with those cliff's, i would have to mesh up the ground correct?

it seems like a great idea, i just don't want to go down the line and find that all these transformations + objects + script will slow my game down. I'm trying to dedicate as much render time to drawing objects and not terrain.

but anyway, thanks for the input, it has given me some ideas and different options, and thats always a good thing

[luxregina]

arf...I thought it was a "pixel art" thread

[renderhjs]

added height layers- increases depth effect:
http://www.renderhjs.net/bbs/flashki...iso/index2.htm
(click on the map to move the tank)

@luxregina: design follows function() :x
anyway here a little contribution regarding current pixel art development:

started yesterday with the icons on the left menu panel, propably ´ll need alot of pixel optimizing and style optimizing before the final result appears.
Some icons were used using reference images
It helps sometimes using Photos and applying a color palette and pixel optimizations on them but it wont do always the job.

[luxregina]

... design follows function()

Not sure I understand totally what you mean there ?!?

What I was meaning is that pixel-art doesn't nessecerly have to be cartoony, as well as using 3D isn't nessecerly the garantee of a realistic look.
But overall, if "handcrafted" graphics were the original choice of the OP, I would actually support him staying with that and not nessecerly shift his design requierments to 3D - the reason behind that is that pre-rendered 3D, in my opinion, often doesn't look as good in Flash as the majority of people think so, and just because it tries to convey something that it is not - of course, i'm not talking about Flash real 3D polygon-based engines, but more about the static, regular isometric engine ...

and of course, the keyword in my previous sentence is " in my opinion "

[mr_malee]

wow, that looks awesome render, i'm in two states now

i still think i want to do it by hand, mostly because i agree with lux, no matter how fancy the 3D engine is, if your transforming pixels you loose some quality in the image. But the ability to rotate is cool. How possible would it be to rotate iso sprites?

hmm, this kinda raises another question. Do people like seeing crisp graphics or technical achievement, i'm assuming most developers enjoy the technical side but what about the "players" of our games.