Thinking About Locations and Characters

by Gary Winnick
Jan 19, 2015

Although we've pretty well established our approach to the game's visual style, the first few months of design and development has a lot to do with figuring out how things will actually look and work within those constraints.

Aside from basing a location's look on a real-life counterpart, the design of its' specific puzzles and their place in the story really drives a location's visual design. In some cases we already know we need an important puzzle that does X, and we're designing a location around that, or we've decided on a location and need to come up with a good reason for it.

As we create locations and associated characters, it's important that each have their own peculiar aspect. We tend to begin with a very stereotypical/iconic concept approach to the design then try to layer on an appropriate unique twist. That way the player starts out with image they can easily identify with and understand... "I recognize that's a clown, but I don't know why he's carrying a pineapple that has a steering wheel attached to it..."

The above is an early animation test, back when we were being more faithful to the C64 palette and everyone looked orange. One of the main reasons we decided to relax our palette constraints is to be able to have more realistic and varied skin tones.

Although we'll be spending a lot of time in the near term working primarily on static images, we're also starting to think about animation as well.

We're beginning to look at 2D animation tools that run on the Mac (both Ron and I work on Macs), I'd like to find something that supports a good old-school style bitmap approach (as opposed to Flash), that might have similarity to the kind tools we used on Maniac Mansion and Monkey Island. When working on Maniac Mansion, I animated on the C64 using an in-house tool called Skedit.  By the time Monkey Island came about, we were using DPaint Animator.

Any new editor should have layers, reasonable drawing tools and be able to save into an easily parseable file format. So far we're haven't found anything we like, so if anyone can recommend a good 2D animation program that runs on the Mac, please let us know.

- Gary



Walt - Jan 19, 2015 at 14:27
I have no constructive suggestions... just wanted to say that the updates on this project are very enjoyable.  Thanks guys.

Brian - Jan 19, 2015 at 17:21
I wholeheartedly agree with that sentiment.

hdort - Jan 19, 2015 at 14:30
Did you take a look at Pixen?

Claudio Wieland - Jan 19, 2015 at 14:36
Have you considered 'Spriter' from Brash Monkey?   http://www.brashmonkey.com

AFAIK, 'Spriter' also allows for bitmap animation style. It's a very cool program, running on Mac and a number of other platforms. Try contacting them, could be worth it. I know one of the makers, Mike Parent.

Christopher Griffin - Jan 19, 2015 at 14:37
I second the recommendation for Pixen.  Clean and easy interface, layers, import/export sprite sheets, tiling previews, change the timing of frames, etc.

Aseprite is another one, and it happens to have the only thing I feel that Pixen is missing -- which is layer/selection rotation.

hoerry - Jan 19, 2015 at 15:21
I've done some sprites on my doom mod with GIMP 2. For a free program GIMP is quite versatile and in addition has a variety of plugins  but also bit of a clusterfuck. You should nevertheless take a look at it if you haven't already.

Tomimt - Jan 19, 2015 at 17:45
Personally I wouldn't recommend Gimp for any serious professional endeavour. It's nice for what it is, but the last time I tried it was just a disappointment, as it tends to do even the simplest task a tad more complicated. Gimp still has a lot of maturing to do.

Ron Gilbert - Jan 19, 2015 at 17:59
We both have Photoshop, so Gimp isn't really needed. Photoshop can do animations, but there is no way to export them other than as .gif files, which I'd have to write a tool to pull apart and build into sprite sheets.

Ideally, a good animation tool would allow for several animations (walk left, walk front, walk back, reach high, reach low, etc) that could then be packed into a single sprite sheet with a json/xml file that controls the animation.  Run-time layers are nice for things like talking or optional accessories like a hat.

Asesprite looks promising (love the retro ascetic), but it doesn't seem to be able to manage several animations in a single file, which makes combining into a single sprite sheet cumbersome. It's also a little "laggy" when editing very quickly (yes, I have a fast computer).

There is a lot to like about it, but it feels like it's 90% there and the other 10% might be very frustrating.

NeilC - Jan 19, 2015 at 21:59
Since aseprite is open source, how much of a pain would it be hack it so it outputs the xml, at least for something like frame duration? And anyway, what actually is the downside of having separate sprite sheets for different animations? Seems like it would make it easier if you needed to change artwork, extend animations, etc.

Ron Gilbert - Jan 19, 2015 at 22:51
I was just looking at the source. It's pretty big, so it will take me a bit to see if I can change the save/load code.  

I'd like multiple animations to be in the same sprite sheet because they will often share frames. Also, if Gary makes a change, it would be nice if it was propagated to all the animations with having to edit multiple files.

Bobe - Jan 19, 2015 at 23:38
I obviously don't know the entire workflow, but my initial thoughts are to use a combination of ImageMagick, the shell, and awk or Python to do this.  All Gary would have to do is keep his animations in the native format of the raster editor he's using, and export the frames/layers as separate image files into folders.  Then you could recursively combine all the images into a single (or multiple) texture map(s) while generating the JSON files.  e.g. ~/ron/twp/animations/walk_left/[1-10].bmp and ../walk_right/[1-10].bmp becomes ../spritesheet.png and ../spritesheet.json

http://blog.tube42.se/?p=1342

http://aftnn.org/post/79547282738/generate-json-index-of-images-with-awk-and

http://www.imagemagick.org/script/identify.php

That first link definitely deserves a view, and if you're convinced, check out the other two.  Well, no matter what you choose, I'd like to figure this out for myself someday.  As a matter of preference, I like to store everything in folders, plain text, and bitmap/png.

Manuel Quiñones - Jan 21, 2015 at 06:08
Ron I'm sure aseprite developer will be more than happy to help you. Go have a deal with him, discuss this feature with him.

Manuel Quiñones - Jan 21, 2015 at 06:08
Ron I'm sure aseprite developer will be more than happy to help you. Go have a deal with him, discuss this feature with him.

v3to - Jan 20, 2015 at 05:46
well, for pixelart and esp animation i am using pro motion by cosmigo for almost 15 years. the user interface and logic is similar to deluxe paint. it doesn't support layers the way photoshop does, it is more like a reinterpretation of the dpaint lighttable. it also has tile-support which might be handy for using a free defined but constant sprite matrix.
http://cosmigo.com/promotion/index.php

in comparison using photoshop for pixelling is kinda complicated and also has some issues depending working with 8bit depth color tables.

iLKke - Jan 21, 2015 at 07:10
Shoebox is a gamedev swiss army knife: http://renderhjs.net/shoebox/
One of its functions is exporting animations as sprite sheets.

v3to - Jan 21, 2015 at 08:04
hey ilkke
oh. this is quite useful. thanks for the link :)
cheers.

Ron Gilbert - Jan 21, 2015 at 20:26
If I'm going to export images from PS, I use Slicy. It's amazing.

http://macrabbit.com/slicy/

ithinkitsnice - Jan 21, 2015 at 19:06
That's not correct re: PS only exporting animations as GIFs. It can export layers or layer comps (probably better) to any file format.

File -> Scripts -> Export Layers (or Layer Comps) to Files

Obviously you have to define the layer comps for the latter.

e.g http://i.imgur.com/oMHvL0a.png

Megazver - Jan 19, 2015 at 15:44
I've heard good things about asprite. Don't know how suited it is to your needs.

Pietz - Jan 19, 2015 at 16:05
did you mean aseprite oder asprite? i can only find http://www.aseprite.org/ .. which seems like I found it ;-)

megazver - Jan 19, 2015 at 18:05
Sorry, you got it right.

longuist - Jan 19, 2015 at 16:03
Thx for the update. I second Aseprite.
Good choice to go for more colors. But it may be a good idea to limit it to +/- 256 per screen to resemble that olds-cool look. Here i speak specifically of the caravan scene as seen in the kickstarter. The gradient of the sky background was too smooth (for my likes).

Furthermore, looking back at some of the kickstarter screens, sometimes you used a higher resolution noise/relief/paperlike effect. Do you intend to use it in the final design?
Don't get me wrong. Experimenting is good and it don't have to look like in the old days in every aspect. Personally i haven't decided yet if i fancy it or not. While it works quite good on environments, it looks a little odd on faces.

Pietz - Jan 19, 2015 at 16:07
I think for background or buildings smooth gradients or at least more colors than 265 are nice as long as the rest for interaction is pixeligish.

Sam - Jan 19, 2015 at 16:10
Hey if you want the full Dpaint experience there is Pro Motion. It even has the same Dpaint keyboard commands (1,2) to move back and forth though the frames etc. It is windows only BUT people have got it to run on *nix via Wine (there is always Parallels or VMWare as well). If you used Dpaint on an Amiga like me, this program will supply warm fuzzies as well!

S.

Ron Gilbert - Jan 19, 2015 at 16:12
The one thing DPaint Animator really lacked were layers. Not only to help the artist, but also layers the game could turn on and off at run-time. That is almost a requirement for us.

Sam - Jan 19, 2015 at 18:29
Pro Motion added layers and a bunch of other mode modern features to the base Dpaint toolset. Modern file formats for one :) LBM  might be a bit long in the tooth now hehe.

Bobe - Jan 19, 2015 at 16:22
grafx2 is a cross-platform DPaint clone with animation and layer capabilities:  https://code.google.com/p/grafx2/

Blender 2.73 has new grease paint tools for quick storyboard animations:  http://vimeo.com/channels/greasepencil

Blender can also do 2D animation with bones (think Southpark).  You basically load a transparent image into a plane, and subdivide it where you want it to bend.  The bones do the rest of the work.  Here's an example:  https://www.youtube.com/watch?v=NFlGN7TLjHU

I don't think you'd want to build your entire game this way, but it would be great, for example, spinning the wheels on a car or what have you.  Draw the car and wheels on separate layers, and then export them as separate images.  Load the car on a plane, and the wheel on another plane.  Duplicate the wheel to get two wheels (assuming this is a flat angle from the side).  Then just rotate the wheels, and export the animation.  Maybe do Chuck the Plant or a tumbleweed in this way?  At this point, you can use several third-party products to assemble it into a sprite, or write a script using ImageMagick:  http://www.imagemagick.org/

Ron already owns TexturePacker according to this testimonial:  https://www.codeandweb.com/texturepacker

:-D

And with the built-in Freestyle rendering engine, your low-poly 3D models can get you instant pixel shading:  http://i.imgur.com/3lOBv08.gif

It is a compelling technique, for sure.  The animation is done, if I recall, by adding a lattice to the mesh and moving some of its points around to make the object wiggle.  I'd personally add life to every scene using this technique.  A cactus or plant swaying, for instance.

Maybe this will give you some ideas, if nothing else.

Bobe - Jan 19, 2015 at 16:43
One last thing:

Here's a cool tutorial that could be used for Chuck the Plant:  https://www.youtube.com/watch?v=fn0cFJW1ZdY

The result:  https://www.youtube.com/watch?v=KdjR3s24t7Y

I guess if you have to learn Blender it's not worth your time, because of the steep learning curve.  But if you could somehow manage, you can get practically free results in no time at all.  It's amazing.

I probably wouldn't use this for walk cycles, though.  I'd do those by hand or using rotoscoping.  

This guy explores a great technique for homebrew rotoscoping:  http://agwspeakeasy.blogspot.com/2013/05/rotoscoping-tutorial-part-2-side-walk.html

Maybe it was this guy or someone else, but they did their entire game with rotoscoping.  It was very compelling.  The Last Express famously used it as well as Prince of Persia and many others.

That said, if the animations are going to be like in Maniac Mansion, this is all overkill.  :-)

Marco Lizza - Jan 19, 2015 at 17:06
Ron, have you already tried PixelEdit (http://pyxeledit.com/)? I've been using it for I while and I'm pretty satisfied.

Davide - Jan 19, 2015 at 19:23
Pyxeledit. I second this.

Liran - Jan 19, 2015 at 17:08
TVPaint is a solid 2D animation program that runs on the mac, it's not designed exclusively for pixel art like Pro Motion but it might still do the job.

Marcos A. Romero - Jan 19, 2015 at 17:32
Aseprite is your tool. it is awesome for making graphics with pixelart style. With layers of course!

DuphusDigital - Jan 19, 2015 at 17:32
Why does that cola machine not say Grog? I'm disappointed in you.

Brian - Jan 19, 2015 at 23:35
I was also wondering/looking for GROG.

Pascal - Jan 19, 2015 at 17:35
I've heard good things about spriter and aseprite, too.

  One more suggestion:
Synfig Studio, which runs on Mac http://www.synfig.org/cms/

Leandro - Jan 19, 2015 at 20:14
Hi guys,

What about Spine? http://www.esotericsoftware.com/
We use it on our game Infamous Machine and it's really awesome!

Alfred G. - Jan 20, 2015 at 04:01
I second Spriter ( http://www.brashmonkey.com/ ).
It's a versatile tool and I backed it on kickstarter ;)
You should at least give it a try!

PrinzJohnny99 - Jan 20, 2015 at 06:25
Gary, I really love the way you draw a starry sky, especially in Loom. It has something magical.

Gary Winnick - Jan 23, 2015 at 19:47
Thanks- however most of the backgrounds in Loom were rendered by Mark Ferrari- who will likely doing some (special guest star :-) work on Thimbleweed.

Jeffry Houser - Jan 20, 2015 at 07:28
For the record; Flash Pro can export Sprite Sheets.

The design tools are raster based, though, not bitmap based, so I have no idea how easy it'd be to create your pixelated look

http://www.adobe.com/devnet/flash/articles/using-sprite-sheet-generator.html

Yuri Brunetto - Jan 20, 2015 at 08:16
Maybe you guys can check the work of this dude:
http://pixelshuh.tumblr.com
It's a really cool 16-bit work. But he uses Photoshop...

longuist - Mar 05, 2017 at 13:44
Was this the time you learned of Octavis skills and decided to make him a team member?

Philipp - Jan 20, 2015 at 10:56
you may want to check out pickle, it´s a pretty straight forward sprite editor. i played around with it some time last year at it was fun to use. no layers though if i remember correctly:
http://www.pickleeditor.com/

schwunsgau - Jan 21, 2015 at 02:33
tvpaint.com is the commercial New-Gen-DPaint version

Hedge - Jan 21, 2015 at 03:17
You should be able to just use Photoshop. Check out "Export video files or image sequences" at http://helpx.adobe.com/photoshop/using/saving-exporting-video-animations.html it says you can export as MOV or image sequences (using video export).

Sebastien - Jan 23, 2015 at 05:13
Spriter would be the one I think. However it only reached 1.0 recently and I think all the planned pro features are not already implemented (not sure).

They provide documentation on the format and there are sample plugins for some common engines si it should be easy to figure out how to load them and convert them in your proprietary format.

longuist - Jan 23, 2015 at 09:51
Have you already found a program what fit your needs?
Again i want to say thanks for using good ol pixel arts. While i certainly like the scanned comic style of DOTT, the slightly cleaner yet more colorful looks of direct pixel sculpting is more to my liking. This is why i prefer MI1 over MI2. The style mixture of MM and MI1 in TP is just great! (abbr. ftw)

Gary Winnick - Jan 23, 2015 at 19:43
Ron and I are still reviewing a couple of the programs (Thanks to all the folks who responded- all the suggestions have been very helpful!) , as it looks like we're going to be needing to adapt one way or another. We're running a number of different tests working out the animation system over the next several weeks. When we have a clearer decision- we'll post an update-
-Gary

Jonas Lund - Jan 23, 2015 at 19:09
Regarding multiple animations in ASEprite, what you can do is selecting active ranges of frames to preview particular subsections.

Number47 - Jan 26, 2015 at 10:31
Have you looked at Spine by Esoteric Software http://esotericsoftware.com/ It runs on Windows, MAC and Linux.

Ken - Mar 09, 2015 at 15:29
Is there any way to sign up for your blog so that it comes to my email inbox?

Artisa - Mar 09, 2015 at 18:22
I understand nothing of the nerdy stuff, but can I just say... this looks absolutely delicious. Loving the progress so far, so exciting!! >_<

Puma Dias - Feb 28, 2016 at 03:28
use: http://www.aseprite.org

Cheers,

Puma

Christophe De Zan - Nov 24, 2016 at 15:19
I dream for the end of the game,  meet Rihanna to the Mêlée Island (TM) ^^