7 ms·
Pixel art and the art of preserving pixel size
- crazygringo 14y ago> committing the grave sin of mixed pixel sizes. Never thought about that before, but I completely agree!
- thekungfuman 14y agoOnce the article pointed it out I couldn't un see it. Mixed pixel art will forever look off to me now!!
- coroxout 14y agoMixed 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.
- city41 14y agoI'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 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 https://github.com/Pixen/Pixen [1]http://www.humanbalance.net/gale/us/ http://www.humanbalance.net/gale/us/ [2]http://pyxeledit.com/ http://pyxeledit.com/ [3]https://github.com/city41/LoveToPixel https://github.com/city41/LoveToPixel
- sillysaurus 14y agoWhy are they better than Photoshop for creating pixel art?
- city41 14y agoPhotoshop is chock full of tools and features that a pixel artist wouldn't care about, and they can get in the way. On top of that pixel editors tend to have features only pixel artists would care about: mirrored output (pick one or two planes on the canvas and your work will be mirrored around them), ability to define simple, finite palettes and quickly move between the 5 or so colors you're using often. Also the ability to tweak colors in your palette and have the image adjust automatically (ie replace all of a certain color with another one), but not force you into an indexed color palette. Ability to zoom in very close but still maintain a 100% view, etc. Most also offer nice animation tools such as looping your animation in real time allowing for effective tweaking. Even other simple niceties like they are always hard edged, always scale with a nearest neighbor algorithm, having both the right and left mouse button be full fledged tools, etc. The canonical tool was Deluxe Paint on the Amiga, and most tools still around today emulate it at least to some degree.
- coroxout 14y agoI 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 14y ago
- lygaret 14y agoI hope it's not inappropriate, but that is now one of my favorite things ever. Fantastically done.
- city41 14y agoThanks :) There's also a zombie mode easter egg which was fun to make: http://yaysarahandmatt.org?zombie http://yaysarahandmatt.org?zombie
- rsaarelm 14y agoOld people who are still hung up on Deluxe Paint may appreciate grafx2: http://code.google.com/p/grafx2/ http://code.google.com/p/grafx2/
- arketyp 14y agoDeluxe Paint was the first painting software I used as a kid. In retrospect I've always regarded it as especially "hackerish", and though I TBH can't really tell the fidelity to the original in much detail, trying out grafx2 now only confirms this. I think the fact that the default background color is black and not white epitomizes it. So bad-ass! Thanks.
- ben0x539 14y agohttp://www.lovetopixel.com/ http://www.lovetopixel.com/ seems to be defunct, fyi.
- city41 14y agoyeah its temporarily down, but will be back soon. thanks for the heads up.
- EyeballKid 14y agocough http://evilpixie.scumways.com http://evilpixie.scumways.com cough </selfpromotion kind="shameless">
- city41 14y agoI didn't know about this one, I'll check it out. Especially looking forward to an OSX package, as OSX is really lacking in pixel editors.
- 89a 14y agoReally wish there would be something as good as GraphicsGale on a Mac. Glad people are working on Pixen again, but it's got a long way to go.
- deleted 14y ago[deleted]
- dag11 14y agoAnother 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 http://minipenguin.com/?cat=32
- awolf 14y agoInteresting 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 14y agoMy 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.
- bendmorris 14y agoAlso, 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.
- deleted 14y ago[deleted]
- usea 14y agoThose are some of the worst things you can do to pixel art. Truly horrible.
- tsahyt 14y agoIt 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.
- 89a 14y agoActually the worst thing is just linear interpolation. Why so many emulators default to that is mind boggling.
- adunk 14y agoThere was a cool SIGGRAPH 2011 paper from Johannes Kopf from Microsoft Research and Dani Lischinski from The Hebrew University that presents a new pixel scaling algorithm that really takes pixel scaling to a whole new level. Check it out here: http://research.microsoft.com/en-us/um/people/kopf/pixelart/ http://research.microsoft.com/en-us/um/people/kopf/pixelart/
- jeffpersonified 14y agoIt'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 14y agoI'm always completely shocked when people design pixel art games and they can't grasp this concept.
- Luc 14y agoIf 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 14y agoResampling without filtering like that is really fast.
- Luc 14y agoOh, 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 14y agoI'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 14y agoThe 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.
- pubby 14y agoNo, 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 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 14y ago> 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 http://itunes.apple.com/us/artist/disasterpeace/id411023239