csanyk.com

video games, programming, the internet, and stuff

Category: graphics

Pixel Art: Admiral Ackbar

Here’s a quick Admiral Ackbar that I did at 64×64.

64x64_Admiral_Ackbar_512

This one was a little more interesting to work on. I started out at 16×16, as I always do, and found that there weren’t a lot of details that I could put on him at that resolution. At 32×32, I was able to shift the eyes, which gave me enough room to add the mouth. When I went to 64×64, I realized that the white space suit he wears needed to be given a little bit of color to allow it to stand out against a light background. I also added some spines to the arms, and irises to the eyes, and nostrils, to give a little more detail.

32x32_Admiral_Ackbar_512 16x16_Admiral_Ackbar_512

Pixel Art: Greedo

It’s been a long time since I did any pixel art, and with the new Star Wars film being released this week, I got the itch to do some more characters from a galaxy far, far away. Again, using my quick/easy minimalist style that I’ve found works well for me.

Here’s Greedo, at 64×64, blown up to 512×512. I’ll probably be uploading some more in the next few days.

512x512_Greedo

min.ttf

I have created a font I call min. It’s the first font that I’ve created. I used bitfontmaker. It was easy and fun, and I liked it. I want to do it more. Minimalist pixel art is something I enjoy, and I wanted to try my hand at the glyphs of a typeface, so I created the most minimalist typeface I could that was still legible. I might have been able to go further but I like the size. Most letters are 3×5 px or smaller in their original drawing.

It’s also an asset package in the GameMaker Marketplace. If it does well I’ll probably create a font pack of fonts that I develop over time, and see how that does. So if you’re a GameMaker user, please download it from there so I can get accurate analytics stats.

Update: I’ve added a second font to the collection, submin.ttf.

Download links

  1. Min Font – Free GameMaker Asset Pack
  2. min.ttf
  3. submin.ttf

Pixel art resources

I’ve been spending many hours today and yesterday playing Javel-ein and reading about pixel art. Javel-ein’s creator clued me into a 16-color palette he used to create the graphics resources for the game. Created by someone at pixeljoint.com named Dawnbringer, it opened my eyes to something I hadn’t given much thought to in my pixel art dabbling to date.

In my pixel art method that I’ve been developing, I have not expended much effort at all in choosing colors. My method has been to use the absolute smallest number of colors as possible. To pick the color, I simply pick “the color” — I don’t give consideration to the context, the lighting conditions I want to simulate, or anything else. To draw the Hulk, I said to myself, “The Hulk is green, pick a green that looks like Hulk Green” so I did that, and then I was done.

I don’t pretend at all that my pixel art method is the best. It is merely a method, and one that I’m able to work in quickly, and achieve results that I find acceptable. I deliberately do not concern myself so much with quality, but with speed. I reason that speed serves me best because with speed, I can iterate more quickly, and iterating will give me the experience that in time will yield an improvement in quality. Also, because I do everything in my games, I have to ration my time and distribute it between designing the game, programming, doing graphics, sound effects, testing, etc. So I don’t have a lot of time, and therefore speed is all the more important. But because my time goes to other things, I haven’t iterated as much as I thought I would.

My pixel art method is very primitive and newbie feeling, but I try to use that as a strength. But that’s not to say that understanding color and using it more effectively would not be very valuable. So far my approach to drawing has been more like a very young child than an artist. I take the fewest number of colors possible, use them iconically to represent the subject with what “everyone knows” is the right color — the sky is blue, grass is green, the sun is yellow, no surprises. For standalone subjects, and for the specific style I’m going for, this works. But when I integrate standalone subjects into a composition, if I want it to look cohesive, and minimalist, I need to give more thought to how I select colors.

Seeing the results in Javel-ein from what a well-chosen palette of 16 colors can make possible, I became very interested in using the palette in the color picker more. Until now, I’ve always just picked something in the RGB color wheel that looked right, but from now on I’ll be giving more thought to my palette ahead of time.

As well, I spent a few hours and created a few palettes for Paint.NET so I can select from a collection of pre-defined, general purpose palettes. I have Dawnbringer’s 16- and 32-color palettes, and several that I made for simulating the NES, Atari 2600, and Gameboy. I plan to try to use these for a while, to see how I can adapt to a constraint of a pre-defined palette of so few colors, and what that will teach me as a pixel artist.

From my reading, I know that there is a lot to creating a good palette, and I’m not yet experienced enough to do so, but I now know enough to start trying. It’s encouraging to read that even well-regarded, accomplished pixel artists struggle with selecting just the right colors for their palettes, and that it is not just me because I’m “not really an artist”. This is something I can learn, and get better with, and I just have to work at it.

In the course of learning, I need to keep a notebook for ideas and references. I figure sharing it publicly will only help to improve the quality of what I find. I don’t really have much original to say on the subject yet, so this is mostly a dump of links to interesting articles, discussion threads, and resources.

Pixel art communities

Pixel art tools

There’s a ton of them. I primarily use Paint.NET so far, but there are many others I’ve yet to try. I’m too lazy right now to put hyperlinks for all of them here, but you can find them by google.

  • Paint.NET
  • GraphicsGale
  • Pickle
  • PyxelEdit
  • GrafX2
  • Aseprite
  • GIMP
  • ProMotion

Palette Choices

Some very interesting forum threads on the philosophy and method of building up a palette.

  1. http://www.pixeljoint.com/forum/forum_posts.asp?TID=10695
  2. http://wayofthepixel.net/pixelation/index.php?topic=8110.msg92434

I’ll add more to this as my reading continues.

Product Review: Pickle 2.0

There are a few dedicated bitmap editors out there with features specific to pixel art and sprite animation. One that I like is Pickle. It features a stripped down feature set designed to give the pixel artist just the tools that they need to use.

A full featured image editor like Photoshop or Gimp can just get in the way of the pixel artist, providing too many tools with too many options, most of which are highly un-optimal in their standard configuration for pixel art techniques. By stripping the unnecessary, Pickle gives the user a streamlined interface that they can learn quickly and use very quickly once they’ve learned the handful of keyboard shortcuts to enable them to switch between tools and modes with great efficiency.

I first tried Pickle sometime in the last year, and since then a new version has come out. While I didn’t quite grok the beauty of the interface at the time, I’ve become more experienced with pixel art since then, and decided to give it another try.

License

Pickle is available now only a paid license, no longer a nagware/donationware license. There is a 7-day trial mode, but after that you have to pay to use it.

If it’s the sort of tool you’ll get a lot of use out of, it’s probably worth the price.

For serious sprite animation, I’d recommend Spriter, which is still in beta, but has been coming along nicely in recent releases. But to create the sub-sprite bitmap resources that you’ll import into Spriter, Pickle is still a good tool to consider, especially if your art style is pixel art and you don’t do a lot of work with gradients and filters and the like.

For simpler sprite animations, Pickle has an onion skin feature that shows the previous and next frames in an animation loop so that you can compare the frame you’re working on against them. I find this really speeds up the process of creating simple animations, and removes a lot of the guesswork and trial and error. While it doesn’t have as many features as the built-in Sprite Editor that comes with GameMaker, it makes up for this by providing a well-thought out interface for the tools it does give you, and providing only what is essential to producing pixel art.

Using Pickle

Couldn’t be easier, really. The manual is simple and fits on a single page on the web site, which covers the entire application from start to finish.

All a pixel artist really needs is the pencil, paintbucket, eraser, and selection tools. When you’re manipulating a bitmap at that level, you really don’t need any other tools. Line and shape tools might be useful, but aren’t really necessary, particularly for smaller sprite and tile bitmaps. A text tool would be nice as well, in a more featureful app, but again, for the intended purpose of creating tiles and sprites, not needed.

Pickle shows its strengths in two areas: Tile making, and animation.

For tile making, it provides a means to shift the bitmap so you can more easily discern hard edge transitions in order to smooth them out. There are also mirroring modes which allow you to make symmetrical shapes easily, by mirroring the pixels horizontally, vertically, or both, as you draw them.

For animation, I really like its “onion skin” feature, which overlays the previous and next steps in the animation as a translucent layer, which you can use to guide where you draw the current frame. This helps you make better, smoother animations in less time because you don’t have to flip back and forth between frames for comparison and preview it constantly to make sure it’s right.

Shortcomings

You can only save up to 10 color palettes. This seems arbitrary and way too small. I’d like to be able to develop a palette for any particular project I happen to be working on. 10 is way too small and there’s really no excuse for it to be so low a number. I should be able to browse a directory full of xml files that define custom palettes, however many I need. Pickle does come with a few built-in color palettes that are useful for game development: the GameBoy an Atari palettes are most welcome, but they should keep adding more: NES and Commodore 64 perhaps being the most necessary. In time, I’d like to see every classic console palette emulated.

I also found the palette to be very tiny and hard to click on, and wished that it was quite a bit larger.

Wish List

There’s a lot in this section, but don’t let that mislead you into thinking that I don’t like Pickle as-is. Rather, I’m so enthusiastic about it that I can’t stop thinking of ways that I’d improve it if I could. I forwarded these suggestions to their feedback email, so I’ll be thrilled if the developer decides to incorporate any of these ideas.

Altogether, I admire the minimalism of the Pickle interface and the easy learning curve that the constrained interface permits. I wouldn’t like it to lose that beauty by adding too many new features, but I feel that if the following ideas were incorporated into the interface, it would make for just about the perfect pixel art image editor.

Indexed color/Palette swapping. Switching to a different color palette from the selection of saved palettes doesn’t cause the colors in an image you’re currently editing to change. This might be a desired capability, however. Old game consoles used indexed color and palette swaps to good effect, and an easy way to replicate this in Pickle would be awesome. An “indexed color mode” which changes the colors in the current image when a new palette is selected, instantly re-coloring the image with the new palette, would be a great feature.

Easier palette building. It would also be nice if I could define a new custom palette based off of an existing palette (such as “night colors from the NES palette” for example) — by dragging a color swatch (or a range of swatches) from one palette onto a new palette.

Color switching shortcut. A keyboard shortcut to cycle through the colors in the palette to enable rapid switching would be useful. There is a shortcut (x) to switch between the primary and secondary colors, and that is OK for what it is. But when I have a lot of colors in the palette, I want to be able to switch between any of them easily, maybe though CMD+arrow keys or CMD+scroll wheel or something like that. Mousing over to select the color from the palette, then back over to where I want to draw, is slower.

Better color picker. I find the color picker in Pickle to be a step backward from the color picker in Paint.NET. I like when I can control the exact value of RGB or HSV or alpha and see the result as I change it. I find this helps me to select a color that I like fastest. The advanced color picker in Paint.NET is damn good: I really like being able to switch between using the color wheel, RGB/HSV sliders, and the value boxes to find and select the color I want very quickly.

The Paint.NET color picker

The color picker from Paint.NET provides a better interface for rapidly finding and selecting the color I want. I’d like to see something similar in Pickle.

Another great feature to include in a future iteration of the color picker would be a mode that makes it easy to pick colors schemes based on the theory of coloring presented in this tutorial — for each color added to the palette, the color picker could auto-suggest adjacent and complimentary color wheel suggestions, to enable better shading and highlighting, allowing the user to add them to the palette automatically if desired. This would be an AMAZING feature. The awesome web app Color Scheme Designer does it right.

Canvas and imaging Scaling/resizing! Scaling is a must-have feature which is currently missing. My favorite technique with pixel art is to rough in at very low resolution, then resize the image, doubling the resolution of the image, scaling it using Nearest Neighbor scaling so that no anti-aliasing artifacts are introduced, and then refining the details.

I can work extremely quickly when I work this way — i’ll start out at 16×16, and double a few times until I’m at 64×64, or 128×128, and those single pixels in the 16×16 rough version end up doing the work of a 8×8 block of pixels when I’ve scaled the rough image to 128×128, thereby saving me a factor of 64 pixels worth of work for each pixel that I rough in with the right color by the time I get to 128×128 resolution.

Being able to Select All, then CTRL+plus to double the canvas size, and CTRL+SHIFT+plus to double the canvas size while scaling up the image using Nearest Neighbor would be great. And to marquee-select, then CTRL+SHIFT+plus to scale the marquee selection 2x with Nearest Neighbor. (Essentially it’s like working with a large 8×8 brush tool, then switching to a 4×4, 2×2, and 1×1 brush, but it’s quick and easy for me to work this way.)

 Arbitrary rotation: Currently Pickle only can rotate 90 degrees and mirror the image. Arbitrary rotation of the entire image, and pixel selections, would be extremely helpful. Not strictly necessary, as when you are manipulating pixels one at a time, you often want more precise control. But it can come in handy.

Gearing up for Ludum Dare 28

I’m getting myself ready for LD48-28, deciding my general approach to take to this project. I like to do this ahead of time so I can get certain design considerations of the way, impose creative constraints, and focus on a particular goal within the scope of my project, independent of the theme.

Tools

IDE

GameMaker Studio

As usual, I’ll be making use of GameMaker Studio for my development, and probably only targeting Windows .exe build for the initial release, with a possible HTML5 build eventually if feasible.

I don’t have any particular aim this time around to use any specific features of GameMaker, we’ll leave that up to the theme and game concept to drive those decisions this time.

Graphics

Paint.NET, and Pickle

I’ve given the new Pickle 2.0 a try and while it’s no longer free/donationware, I do think that I at least like it for its onion skin feature that enables easier animations. I can see a lot of potential improvement for Pickle, and to that end I’ve written up a number of feature requests and enhancements and sent them along to the developer. I’ll be really excited if any of them get picked up and implemented.

I am going to use my pixel art minimalism technique, and also I intend to use a tightly constrained color palette. Not sure yet how few colors I want, but maybe a 4-color monochrome palette a la classic GameBoy would be fun. In any case, I’ll be making an effort to use only the smallest number of colors necessary, and paying close attention to how color works in the graphics I develop. I am going to see if Paletton can help me make better palette selections, and if I can apply what I learned from this coloring tutorial that I recently came across thanks to Joe Peacock’s recommendation.

Audio

Bfxr

Bfxr, of course, for sound effects. Maybe also some recorded audio samples for stuff that I can’t do well in bfxr.

Famitracker (maybe)

It’s probably still ambitious for me to try to pick up and learn Famitracker in a weekend and use it to good effect. I’ve been putting off learning it, though, and I want to have some kind of bgm in my game. Whether I end up using it or not in my LD project, I’ll be making an effort over the next few months to figure it out and put together some compositions with it.

Pixel Art: Star Wars characters

After the Ohio Game Dev Expo, I felt like doing some pixel art exercises, so I did these.

The style I’m employing here is chunky minimalism, so I’m not striving for a lot of detail. Rather, I’m going for the least amount of detail and work to make a recognizable character. This style enables me to work very quickly (it took me maybe 20 minutes to do the entire set) and emulate a resolution and palette constrained system like the Atari 2600.

I could definitely add more detail, and especially shading, to improve the depth and likeness. It would slow me down considerably, but would be worth it if I was interested in prettier pixel art, not emulating the look of a classic console. Properly speaking, for a preliminary pass, they are acceptable as far as the recognizability criteria goes, but most of them have palette challenges, mainly due to light color on light colors. If I was going to do something serious with these, I’d work on them more to address those issues.

I did these up at 64×64, and blew them up to 512-wide to display on the web site without having to scale them up.

R2-D2

512x512_R2D2

C-3PO

512x512_C3P0

Luke Skywalker

512x512_LukeSkywalker

Obi Wan Kenobi

512x512_ObiWanKenobi

Han Solo

512x512_HanSolo

Chewbacca

512x768_Chewbacca

Princess Leia

512x512_PrincessLeia

There are so many different characters and costumes that I could keep doing Star Wars pixel art pretty much endlessly.

csanyk.com © 2016
%d bloggers like this: