

Pixel art and the art of preserving pixel size - thisisblurry
http://mrgan.tumblr.com/post/28589961638/

======
pubby
No, pixel art is not at all about "big blocky pixels" - that's some silly
8-bit retro movement. Pixel art is about a crisp, distinctive look and
intricate detail. For instance, this piece:
<http://www.pixeljoint.com/pixelart/29178.htm>

Keep in mind that bad graphics are not retro! This is seen a lot in indie
games - the creator isn't very artistic and so they use low-quality sprites to
make up for it and call it retro (this is also happening with chiptunes/module
scene).

Also, here's a wonderful guide/explanation on pixel art - a very very good
read:
[http://forum.wesnoth.org/viewtopic.php?f=13&t=32273](http://forum.wesnoth.org/viewtopic.php?f=13&t=32273)

~~~
lloeki
> No, pixel art is not at all about "big blocky pixels" - that's some silly
> 8-bit retro movement.

At not point the article claims that pixel art should be _all about_ big
blocky pixels, only that understanding of pixel art is _typically about_ (i.e
what the layman knows about it), and even more typically in the context of
video games. The only thing argued is that if any scaling is to be applied, it
has to take place in the code, not in the image, which actually goes in your
sense: the source image, although small, has to stay crisp.

So if you wish to really make a distinction, let's call it chip art then, or
low-fi, or low-res, but there's no denying that _this is pixel art_ , with the
added constraint of resolution.

Calling this "retro", "8-bit", whatever movement "silly" is a bit
disingenuous. From The Incident to The Last Rocket to Fez, the visuals are
gorgeous. And not just the visuals, but from sound effects to music, the audio
experience is fantastic. Disasterpeace [0] — the artist behind the Fez
soundtrack — created rich electronic music, perfectly in line with my
definition of quality (I enjoyed _Rise of the Obsidian Interstellar_ way
before Fez was known).

[0] <http://itunes.apple.com/us/artist/disasterpeace/id411023239>

------
city41
I'm a big fan of pixel art. I've created a WebGL based low res pixel engine, a
simple example of it is here: <http://yaysarahandmatt.org> (celebrating my
wedding engagement)

I'm surprised he mentioned Photoshop. There are many dedicated pixel art
programs that are far better for the task such as [Pixen][0], Graphics
Gale[1], the new Pyxel Edit[2] and my own LoveToPixel[3] (done in HTML5
Canvas)

[0]<https://github.com/Pixen/Pixen> [1]<http://www.humanbalance.net/gale/us/>
[2]<http://pyxeledit.com/> [3]<https://github.com/city41/LoveToPixel>

~~~
sillysaurus
Why are they better than Photoshop for creating pixel art?

~~~
coroxout
I used to use Paint Shop Pro for (among other things) pixel art. Somewhere
around version 6 JASC decided it was no longer a generic graphics package but
should be a Photoshop-rivalling photograph editor. From then on, selections no
longer had crisp edges along a pixel boundary but took the edge pixel at half
alpha and the next pixel over even more transparent. I couldn't find an option
to turn this off anywhere. Goodbye, ability to do pixel art in PSP.

I don't think Photoshop does this (I haven't used it for several versions and
my art days are more or less over) but the above has made me forever slightly
wary of attempting pixel art in a package primarily sold for photo editing.

Plus, Photoshop is expensive. If you have it anyway and it works for you,
that's cool. If you're looking to install something just to make pixel art,
you're spending a lot of money on a lot of features which are irrelevant to
you and may make it harder to find the functions you actually need.

~~~
stan_rogers
I still use PSP 9 for bitmapped/raster graphics (other than photos), and had
used all of the versions from 3 on _except_ 8\. All you needed to do was to
uncheck the "antialias" option box (and make sure that the feather value was
at zero) to get a crisp (no alpha) selection. The setting were persistent,
like a preference, so once you deselected the "antialias", it became the
default until you selected it again.

------
crazygringo
> _committing the grave sin of mixed pixel sizes._

Never thought about that before, but I completely agree!

~~~
thekungfuman
Once the article pointed it out I couldn't un see it. Mixed pixel art will
forever look off to me now!!

~~~
coroxout
Mixed sizes of scaled-up pixels bug me, especially pixels not at power-of-2
scalings to each other, but I think the contrast between obviously scaled-up
pixel graphics and native resolution antialiased graphics can sometimes be
useful, e.g. smooth for text and UI elements, pixel for the actual game
graphics.

I guess as with many things the rule is: try it and see what works. That or
I'm just a pixel philistine.

------
bendmorris
Also, if you draw your pixel graphics pre-scaled, you're locking yourself into
nearest-neighbor interpolation. There are plenty of other cool interpolation
algorithms that you might want to use to use, like scale2x or hq2x.

~~~
usea
Those are some of the worst things you can do to pixel art. Truly horrible.

~~~
tsahyt
It kills the "pixelness" of it, yes. Personally I do like them though. Those
algorithms do create interesting looking graphics. Last year, me and my
girlfriend decided to play some classic Mario again, and since we didn't have
any old Nintendos nearby we used SNES9X which uses, I think, hqx. It's
different but quite neat.

For making a dedicated pixel art game they're unusable though.

------
dag11
Another reason for doing this is motion. If the images themselves have double-
pixels, then the game can still render moved/rotated images within the
device's pixels and not the image's pixels. So scaling up your canvas makes
development easier, in addition to the artwork creation.

I used this method with a little platform game I was creating, with the
exception of text: <http://minipenguin.com/?cat=32>

------
awolf
Interesting that designing for iOS non-games is the opposite: design @2x and
then scale down.

The scaling down can be tricky though. I'd love to see a similar post to this:
a pro's take on retina graphics.

~~~
_frog
My workflow has always been to create everything as vector artwork starting at
the 1x resolution and then scaling up and tweaking for the retina display.
However I could see the process reversing if I were creating artwork on a
retina display.

------
Luc
If you render everything to a small canvas which gets scaled up for display,
movement will be less and less smooth the larger the display is...

~~~
aw3c2
Resampling without filtering like that is really fast.

~~~
Luc
Oh, sure, but I'm referring to something else. If you have a slow-moving
object rendered on a 160x120 pixel screen, it may move 1 pixel, say, every 8
frames. Now scale this up to 1280x960, and your object will be 'jumping' 8
hardware-pixels every 8 frames, instead of smoothly moving 1 hardware-pixel
every frame.

Of course, that can be an artistic choice, as long as you're aware of it.

~~~
roc
I'm not sure I follow. It's all logical pixels. Let's say our example is a
galaga-type game and the moving object is a missile fired down toward the
player.

The goal is to have the missile move 1 logical pixel per frame regardless of
hardware resolution.

At higher resolutions (without commensurate higher PPI) the logical pixel will
become physically large and begin to look pretty weird/potentially undesirable
at certain viewing distances. But the missile should always still move
precisely 1 logical pixel per frame. It will pass the same amount of
background art each frame. It will approach the player just as fast. etc

~~~
Luc
The example you give (1 pixel of movement per frame) is the only case in which
there is no difference. Anything faster or slower will show smoother movement
by using all the available hardware pixels.

In my example, the larger screen has e.g. 8 times the number of pixels
horizontally to show movement in. Instead of waiting 8 frames and skipping
ahead 8 hardware-pixels, you can render the sprite 1 hardware-pixel further
along every frame.

~~~
roc
I still don't follow why you're saying "waiting 8 frames". But I think I get
what you're talking about -- essentially interpolation.

The problem would come from anything other than simple movement of a static
sprite. If there's some much as a wispy smoke trail animation off the back end
of the rocket as it flies through the air, the sprite data isn't going to give
you any indication where those particles should be waving about during your
interpolated frames.

~~~
Luc
You'd model the rocket exhaust as individual particles or suffer the blocky
animation. But it's not rocket science :)

'Realm of the Mad God' works this way, with the added affront to purity of
having rotated pixels. I think it works rather well:
<http://www.youtube.com/watch?v=hpMdFFxFbY4>

------
jeffpersonified
It's so funny: I just saw an article on the Turf Geography Club and was
wondering this very thing in their own design. Thanks for the post!

------
89a
I'm always completely shocked when people design pixel art games and they
can't grasp this concept.

