pixel art

There are lots of problems with getting it right, but my way to do it, which works 100% for me. is you have the 1px transparent border, you place it at 0,0.

Then you need to be in low quality, and Stage.scaleMode("noScale");

Everything works fine when your in that mode, however, to use it in High Quality you must do what that other guy specified, but that is quite hard when trying to get tile engines set up etc.

Nevertheless, for games, you should be in low quality anyways, the speed increase is extremely noticeable

What about heliAttack? Is it low quality? And some other things I've wanted to ask:
1) Do you use the png/gif or jpeg?
2) Do you use smoothing?
3) If jpeg, what quality?

I don't ever use .jpg since it's got no transparency. Previously i've used .gif but now use .png. I'd be interested to hear what settings everyone else exports their .png files at though! There's so many different options that i'm not quite sure which is the best.

If you prefer a pixelated look, don't use smoothing as it gives the images an Anti-Aliased look. No point using high quality either, when using rasters, since having it on high wont make the image look better/worse. Best to just have it on low for the performance increase.

StenFlash, I ment the jpeg quality :)

png,
smoothing no,
if I must, I use jpeg with 100 quality. 80 for bg's

For things like small weapons, png compression is better than jpeg.

Actually, I think PNG has generally larger file size than GIF. So why go PNG? It has alpha transparency, but who needs that? It slows the game down, and in pixel-art games it has no use...

I always find png a lot better size wise to be honest ( When saving it out as a 256< image ).

Hmmm watch this turn into a "this format is better than that" discussion now :)

Squize.

You asked for it! ;)

Both images saved with 256 colors, transparency and no dither.

zee.gif - 397 bytes
zee.png - 445 bytes

Check them out, there's absolutely nothing different about them whatsoever!

The difference is not much, but when there's a lot of images, and long animations with lots of colors, it has something to say.

*sigh*

I'm really not going to get dragged into this mate, in all my previous experience saving a 256 colour or less image using an optimised octree png, 90% of the time the file is smaller than the same gif file.

Squize.

Neither is faster in display speed, infact, I would say that gif may be slower, as the pallette must be converted from 256 color to true color.

The alpha channel is the reason I use PNG, you say noone uses Alpha transparency, then you are mistaken =D

Additionally, larger sprites are usually smaller with PNG, check the PNG website to see the stats.

But as Squize said, filesize isnt the biggest concern, especially not 50 bytes.

I meant in pixelart games, I cant see any use for Alpha transparency there?

but anyway, you have convinced me.. hehe..

Yeh i have that same problem with tiles in my games.
So you guys are saying that to solve this problem i have to increase the original tile size by one pixel on every side so 20X20 goes to 22X22 and make that area transparent, then export it as a png at what settings?

Then when i import them into flash what do i do with them their.

Ow and 2 quick questions.

1/I have tried and tried but i cant get that allow smoothing stuff to turn off. I uncheck the button and click update and it works in the library but when i run the game all my tiles are still smoothed?

2/ What size doyou guys traditionally do your tiles. Ive always done them as 16X16 ?

Hey,

Will png be faster as gif when using fully transparent parts?

I would say the speed difference would be so miniscule its not talking about.

I would assume however PNG would be faster, as you dont need to do pallette conversions.

Here's my contribution:

Very good tutorials:

rhysd.syntesis.org/tutorial/
(also can be found on goToAndPlay.it)
www.drububu.com/tutorial/

I always use gif, always have and always will.

Quote:

---

Originally posted by SaphuA
Omg how old is this threat?!
I was still mosterdfles_flash there :rolleyes:
...
Who dug this up anyway?

---

Another dig-up eh? :)

Come to think of it, wit the 900 posts from my mosterfles_flash account, I'm already over the 2000 post-count. How cool is that? :p

Ironclaw, gif is not always the best option to choose, I don't know exactly when, but sometimes png is a better choice.

SaphuA

caution: stupid questions ahead

i've been a huge fan of pixel art for years, but not knowing how to create it, i would draw things in photoshop and use the "mosaic" effect to pixelate them. i just finished reading through some of the tutorials posted here, and as i have the day off from work i am about to pixel crazy re-designing my game. but i want to ask some questions just to be more clear -

1) i see there are various programs you can use to draw pixel art. if i use photoshop, do i alter the quality of the image before i draw so it'll be pixelated? or do i zoom in to like x400, and draw there, then when i export increase the image size?

2) my game is done design wise, so it would be a waste to start from scratch. i drew everything in flash, so is there a way to pixelate it now? like can i export it, bring it into photoshop, scale it way down, then blow up the size so it'll be pixelated? or is there an effect like "mosaic" in photoshop i can apply to it?

3) i know there's the tile approach to making isometric games. i'm hesitant to use it, as it seems more math-based, less art-based, as you don't draw anything isometrically, but write the code so it places your square image into an iso tile. so is there a happy medium between tile and art based iso games? i've been doing art-based isometric, but it's a little sloppy, and the bg moves at 45 degrees, not 26.whatever, so the hero walks at a funny angle.

sorry for stupid questions, but i'm really excited to re-think the way i've been approaching things. thanks for the help and all the great links.

astrocalder

Im glad i found this thread cause pixel art is my job, hobby, and life. That is one thing bout flash i dont like, you cant get a pixeled look if its made in flash.

Ok your questions.

1) I would say make them in MS Paint. Its the best program out there for pixel art.(there is only one thing i dont like about paint. Its hard to change the color pallete.) But if you do use Photoshop then zoom in and do it. If you do it big enough you wont have to increase the size which will most likely screw it up.

2) I dont think you can pixilate your flash art so if I were you i'd just redo everything.

3) hmm. Isometric isnt my strong point, but i would say use the tile approach. And if your guy doesnt look right he may not be drawn right.

Tip for pixel artists: Practice, take your time and dont rush your work, zoom in and do it pixel by pixel.:mrpimp:

thanks for your suggestions. two other things -

is doing pixel art in photoshop "cheating"? because i imagine in old-school pixel art, you needed to assign pixel by pixel, you couldn't just use the paint bucket to fill a box, right? so do you think the guys at eboy, or other pixel artists do it the old-fashioned way, or is that too crazy?

and i'm a mac user, so i can't use MS paint. does anyone out there know of a similar program for mac?

anyway i think i'll finish the first game with the flash art, as it is almost done, and start my next game with pixel art. i can't wait...

astrocalder