Hello dear game artists.

I want to start designing 2D games (noob coder here) with the help of my wife who is a talented painter with little Photoshop experience. She promised me to help in art side of the game and wiling to start learning digital part of the art.

Now my question is about 2D animation concepts:

I know how pixelart sprite system is working, all clear there, but what about games like Outland http://www.youtube.c...h?v=MYQUFFR3KkQ I don't think it's just simple pixelart made in MS paint.




I read lot of similar forum posts about this. Some are suggesting using flash and third party libraries like gameswf, some use various 2d skeletal animation apps, some use Maya 3DMax to create 3D models and then convert them to 2D, etc... Now my problem is I can't just tell to my wife to start learning dozens of 2D, 3D, vector, animation and photo software.

Can anyone tell me what path we should take to achieve smooth, dynamic and colorful animation in 2D games? what graphical programs and what method will be most effective -Flash? 3Dmax? 2D animation software? plain Photoshop vectors layers? did I miss anything?

Thank you

Wow, that game has the most absurdly complicated use of 2D art I've ever seen. They are using a Japanese shadow play style for the base graphics, that's straight forward enough, it's just animating silhouettes, but then there are several filters in use to create all the glowing stuff, and dappled light, and maybe a particle system for the clouds. Not really what I'd suggest a beginner at digital art aim for initially, unless it's quite similar to the style she usually paints in.

If you have money to throw at this project, I'd invest in a tablet PC. This is the most intuitive interface for anyone with a background in painting or drawing, because it allows you to draw directly on the screen, and the pressure-sensitive screen converts the varying pressure of the stylus on the screen into varying line width or opacity in a graphics program. For software, Adobe Photoshop and Corel Painter are the two big names - I believe it is possible to get a 1-month free trial of both, she could see which she preferred. Or the free alternative is Gimp. These are all bitmap/raster/pixel 2d art programs, they do not really address the animation side of things.

Unless your wife is a fan of cartoons and not a big fan of realism, she will probably not be interested in vector art. Flash is mainly aimed at vector art, although I believe it can also use pixel sprites to build a game out of. Flash is also more of a programmer's tool than an artist's tool. I personally am mainly a vector artist, but that's because I love cartoons and prefer their semi-abstract shapes to anything more realistic. Vector art is well suited to animation but not well suited to anything more realistic than a Disney or anime style. But if she's interested, Adobe Illustrator is the main commercial vector art program, and Inkscape is the main free one.

Similarly, unless your wife likes sculpture, carving, and drafting, she will probably not be interested in 3D art; 3D art really uses a different mindset than painting. Blender is the main free 3D program, although personally I found it as counter-intuitive as if it had been designed by aliens. There are several respected commercial 3D art programs.

Animation is a separate field of art entirely. Regardless of what you want to animate, anyone with no animation experience should first check the local library and used book store for intro to animation books. Muybridge's photo books of people and animals in motion may also be helpful. Then, google can be used to find example animated gifs and sprites, and they can be examined frame by frame in a graphics program. (Alternatively, examples of vector animation are swfs, which need to be examined in a vector program.) Also, any video clips can be viewed frame by frame. To practice traditional animation it is helpful to buy several pads of post-it notes. The post-its are used to make flip-books, the most low-tech form of animation. For an artist more comfortable with a pencil than a tablet, a light box and scanner are necessary to create drawn frames of animation, scan them into the computer, and practice them animating them there. For an artist comfortable with a tablet the frames can be drawn directly in the animation of choice. The overall goal of animation self-study is to be able to produce 'pencil tests' (uncolored sketches) which animate smoothly.

Thank you for a detailed answer. Yeah maybe that Outland game published by a major game company Ubisoft was a bad example for a beginner game designer, I just liked the main character smooth and dynamic animation.

Quick question - you mentioned Tablet PC, we were thinking about drawing pad because it's cheaper, is there big difference?


We are aiming more for vector graphics so I guess we will go for Illustrator (we already have Photoshop).

Post-it pad is a nice trick, never thought of it in a digital age

Thanks again

Thank you for a detailed answer. Yeah maybe that Outland game published by a major game company Ubisoft was a bad example for a beginner game designer, I just liked the main character smooth and dynamic animation.

Quick question - you mentioned Tablet PC, we were thinking about drawing pad because it's cheaper, is there big difference?


We are aiming more for vector graphics so I guess we will go for Illustrator (we already have Photoshop).

Post-it pad is a nice trick, never thought of it in a digital age

Thanks again

The big difference between tablet and tablet PC is that with a tablet you can't directly see what you are drawing. If your wife has experience with a skill like playing the piano while looking at sheet music and not looking at the keys, or touch-typing while looking at the screen and not looking at the keys, then she may have no problems using a tablet. Many people use tablets successfully. But me personally, I find that disorienting to the point where I can't use a tablet.

You want to do vector graphics? Ok then. It's nothing like painting though. Your wife may be familiar with the pen tool aka bezier curve tool in Photoshop - this tool is the basis of all vector graphics. Rather than storing color for each pixel the way bitmap programs do (historically based on pointilism and screen printing) vector art stores numeric values for points, line thicknesses, curves, colors, and opacities (historically based on stencils, drafting, cad programs, graphing calculators). Using the pen tool (or whatever the basic vector tool is called in whatever program you are using) you start by clicking to place a dot. If you click-hold-drag you add infromation to that point about how the line coming from it should curve. Then you click again to place a second point, and now you have a line segment. Perhaps it is the leg of a stick figure, in the first frame of animation. Once you have drawn your stick figure you can copy and paste him 4 or 8 times to get enough frames for a walk cycle. Then you can select the leg in frame 2 and rotate it a bit, and select the leg in frame 3 and rotate it a bit more, and make your stick figure walk. The major advantages of vector art are that it is very easy to duplicate and modify, which are the major things you do when animating. A secondary advantage is that vector art is not subject to resolution, so it's not a problem if you want to use larger and smaller versions of the same art, unlike pixel art which gets blurry or pixellated when resized.

Inkscape is really pretty good, it's what I regularly use. But Illustrator is a bit more full-featured if you don't mind the price tag. I haven't used the current version of Illustrator, but the version I used in college had gradient mesh coloring, a feature I sometimes miss when using Inkscape. Illustrator might have more animation support than Inkscape but again I'm not sure. Those are the only two major differences as far as I'm aware, unless Illustrator grew significant new features since I used it last (unlikely since Photoshop hasn't grown any in the same amount of time). If you want to go vector, though, you definitely want to look into Flash/actionscript for the animation and programming end of things. There are some alternatives, Silverlight for example, and some of the multiplatform development systems aimed for releasing the same software for window/mac/handhelds, but I think Flash still has the biggest market share.

Two well-known online games which use vector graphics are zOMG and Dofus, so they are good examples of what you can aim for in terms of art style. Plants vs. Zombies is another example, it's an award winning single-player tower defense game from Popcap games, you can buy it as a download for pc, or it's available for some types of handheld and I think Nintendo DS.

Thanks again. Really helpful tips. Your posts can be used as a reference material for beginners.