Wireframing the Game

by Gary Winnick
Mar 23, 2015

Ron and I are now in the throes of what we call "wireframing the game", which really is just another word for prototyping a playable walkthrough.

This is a first pass at putting in preliminary art for all the rooms and their associated puzzles, then connecting everything so we can walk through all the contiguous locations to get an idea of what the game's really going to feel like. How long it takes to walk from one location to another and does the game give the player the right mental map of the world?

This is something we want to do fairly quickly. In the old days, with Maniac Mansion, we actually created a version on paper to give us a rudimentary feel of how everything was connected, but now we have the tools to do it all digitally.

We've always called these "wireframe rooms" because they just need to be laid out in flat color and composed with their most prominent necessary features in place. All the rendering detail, as well as a lot of additional window dressing (plants, non-essential objects, patterns, dither, and the like) will be added as we move into more final versions. I think we also call these 'wireframes' because at this point they can now actually be "wired-up" into the game engine.

Fast quick versions are good because we might not like how they feel once in the game, and we don't want a lot of time invested. We need to be able to throw out a room and the art with no investment. We don't want to keep a room that is wrong just because we've spent time on it.

Here's a little progression on the Diner exterior and interior, doing a bit of a take on the classic 1950's diner.  At this stage I stay with a number of basic geometric shapes: circles, rectangles, triangles, etc. As things evolve, we look at different positions for the camera, scales, and layouts, but right now I like to keep things pretty basic

When we first started working through the design back in January, I spent about a month sketching some of the more well defined game locations out on paper. Once I had a rough image I went ahead and blocked it out, trying to retain the flavor of the associated graphical approach we developed for Maniac Mansion and the rest of those first Lucasfilm games.

In those days, given the C64 character set constraints, I'd literally just block everything out with rectangles of different basic colors, a solid brown rectangle for a wall with smaller blue rectangles for windows and doors, like I was cutting it out of colored paper, then start layering details on that, window and door frames, bricks, etc. The most repetitive details at first, followed by a few unique ones to iconically reinforce location and function.

Here's what the bathroom looks like, taking the concept to a first blocked-in pass:

Once the design process for Thimbleweed Park got underway and brainstorming began in earnest (and David Fox became involved), it really geared up the list and functionality of the 'rooms/locations'.

As we quickly added more rooms, I stopped roughing out all but the most complex room layouts on paper and went entirely digital, cranking these out directly in Photoshop. At this point these are mostly out of my head, although I'm referring to the internet via google image search for some of the more specific and iconic details.

At the wireframe stage it's really like looking at iconic game tokens.......Monopoly anyone?

Rooms will ultimately come in a variety of sizes, scales and potential camera angles (most likely for larger, more impressive expansive areas such as the factory and hotel lobby, etc.) .

As we get deeper into figuring all this out, I start by working my way through some of the more obvious and straight-forward locations so we can both get a feel for how things will actually work and feel in the game.

Once I'm done with the room's wireframe, I give the art to Ron and he wires it up in the game. We might have some videos of a game walk-though in the near future.

- Gary

Iron Curtain - Mar 23, 2015 at 11:39
Will we get to play the playable demo when you're done with it? :-D

Mattias Cedervall - Mar 23, 2015 at 11:56
Gary, it looks great! :-) Gary, who is your all time favorite painter (Leonardo da Vinci for example)?

Gary Winnick - Mar 24, 2015 at 19:09
Da Vinci is certainly one of may favorite grand renaissance masters- but on many levels due to the overall amazing level of his genius- inventions, notebooks, drawings, paintings, etc. However, given I tend to work more in the commercial art world (beginning in comics and animation)- my major influences tend to be more contemporary- certainly Pyle, Parrish, Rockwell and Leyendecker to name a few -before Kirby, Adams and Steranko- I'm also pretty partial to Eyvind Earle from his design perspective and obviously a big fan of Frazetta as well- the list goes on- You can take a look at my personal art website garyart.net to see a bit more on my more artistic approach (not just pixel art).

Mattias Cedervall - Mar 24, 2015 at 21:24
I see. Thank you so much for your reply, Gary! :-)

Christopher Griffin - Mar 25, 2015 at 09:04
Since you mentioned a history in comics, if you're looking for something new to read, can I recommend my friend Kyle Starks' new trade paperback, Sexcastle?  He has had a couple of successful Kickstarters, and his writing/drawing style are impeccable and highly entertaining!  https://imagecomics.com/comics/series/sexcastle

Joseph K. Garrahan - Jul 31, 2015 at 12:49
Hi Gary, thanks for the link to your personal website! Love the blog, keep it up guys!

Bertram Sludy - Mar 23, 2015 at 13:18
How do you feel about doing this kind of work so publicly, knowing that people like me will come along and ask stupid questions like this one?

Andreas - Mar 23, 2015 at 13:35
I love the files in the diner. That is a very nice detail for such a simple sketch.

I still feel like Zak & Co. need to be in this world somehow. At least the two Martian Girls. Occult Books seems to be good place for em? No?

Tomimt - Mar 23, 2015 at 13:50
It'll be interesting to see where these particular scenes go from here. I'd actually love to see at least one full scale "from sketch to finished game-screen" kind of a video, or at least a blog spot where a scene is taken from sketch to finished state.

Ron Gilbert - Mar 23, 2015 at 15:13
We plan on doing that at some point. Problem is, none of these rooms will be taken to final for many many months. Everything is done in slow layers. Each rooms will get a little more detail, but not all at once.  That way, if we cut a  room 6 months from now, we haven't done a lot of work on it.

Tomimt - Mar 23, 2015 at 16:46
That's understantable, and expected of course. I'm looking forward seeing the post when the time is right.

Damian - Mar 23, 2015 at 13:55
Really nice!
Mecking-up locations really gives you a sense of the word around you. :)
Will eagerly wait for that walk-though!

Christopher Griffin - Mar 23, 2015 at 14:05
Awesome post, Gary!  I love the Quickie Pal bathroom wireframe, as it's evoking a strong C-64 era vibe (Spy vs. Spy, anyone?).  Are the wacky items and scene details usually the product of a drunken/slap-happy night of talking and being ridiculous, or is it usually more methodical than that?  Also, if that's a question better suited for Ron, I can direct it his way.

Dennis Bratz - Mar 23, 2015 at 15:49
I already love this game! I'm curios if the two characters running the Diner have an interesting back story involving a meteor or something like that...

Brian S - Mar 23, 2015 at 15:52
It's exciting to see the locations starting to take shape.  Thank you so much for this post, Gary.

The neon DINER sign brought back some memories.  Thinking of the Hair Salon in Zak.  Hmm.. you could have the letters N and R flickering.

I'm finally playing Zak (for the first time), so don't be surprised if I make more Zak references...

Juan Ferreyra - Mar 23, 2015 at 15:54
Looking Sharp Gary!! it's awesome seeing these! keep 'em coming!

Walt - Mar 23, 2015 at 17:00
Looks awesome Gary, thanks!

Gv - Mar 23, 2015 at 19:05
You can keep this images, as they look already great.

Peter Campbell - Mar 23, 2015 at 19:06
Upon scrolling down to the gallery of buildings and glancing at the names, I initially misread the occult shop's name as "Adult Books" instead of "Occult Books" lol.  I mean every town has at least one right?

Alex - Mar 24, 2015 at 03:19
Is it possible to buy coffee in the diner?

PrinzJohnny99 - Mar 24, 2015 at 11:07
Is it a decent tanned Dave, or the secret half-brother of Dave and Michael?

Brian S - Mar 24, 2015 at 13:46
Are those .. *flies* over the hot dogs in the diner?   I'm sensing a puzzle in the making.

Ron Gilbert - Mar 24, 2015 at 14:06
You would be correct.

vegetaman - Mar 24, 2015 at 20:22
Wow, I love the art design and how it has the feel of the old Maniac Mansion. Seems like you guys have a really good foundation and game plan (tee hee) for this. Very nice!

Thimblebrush Threepweed - Mar 24, 2015 at 21:41
Ron, Gary, David, thank you for doing this crowd-funded, classic adventure thing right! The updates so far have been really insightful and shed real light on the inner workings of game development! So far, it's been the most transparent, most fulfilling and entertaining 'classic' adventure game development documentation of all the Kick-Starter projects I've seen! (Surely most would agree with this! :) )

Ron, that video with your sultry-radio voice narration was awesome! You did a terrific job explaining the features in a natural, intuitive manner. Really looking forward (as most probably are!) to future videos documenting the development!

Any chance you might share little video snippets demonstrating nifty scripted workflows, thought process when solving some particular coding problem, or explanation/rundowns of raw code?( like how a co-ordinate system, sprite animation or event system might work?) For the swarms of us new to programming/game development (and those experienced), seeing a true master at work in his craft would be a real, inspiring, treat!

Also, Gary's obviously pretty busy,  but would he possibly be willing to do a screen-cast of his work-process while producing assets?  

Again, I'm sure I speak for many... we would LOVE to see the raw game development in process in video form with full talkies! Blog posts are super awesome nonetheless, though there's a different, more authentic depiction of what's going on when the process is done  in video/audio format!
/2 cents

PS. Could you poach 2 Player Productions from DF? :P

Thimblebrush Threepweed - Mar 24, 2015 at 21:58
PSS. Not sure if this has been thought of/suggested, but would you guys consider maybe doing a weekly/bi-weekly podcast of the development? Like a round-table banter of general dev talk?

A regular podcast would draw many new folks in and keep supporters excited and feeling more intimately connected with the project! It also might serve as a means for your own ideas to cross-polinate and develop further!

Ron Gilbert - Mar 24, 2015 at 22:26
That's not really the way we work. Anything like that would just be "staged" and we're trying to keep this all real. A lot of our communications is done via email and IM.

I have always wanted to do a podcast, but more with me talking to other indie developers. I was going to try and start that, but got side tracked on this Kickstarter.

It's also amazing how much time all that stuff takes. We're a team of two (soon to be three) and we spend all of our time making the game.  But, we'll try and do some stuff.

Walt - Mar 25, 2015 at 17:25
I don't think ANYBODY could be disappointed by the lack of communication and transparency from you guys as far as this project and this development blog goes.

I'm pretty sure the way you're doing it is exactly the way all these "crowd funded" project sites wish the projects would go.

Its really a cool thing to see, and I'm glad I signed on as a supporter.... I don't see myself supporting many projects since I'm poor (I'll be in for Super Troopers 2, but that's about it)

You guys are going above and beyond, and I get the feeling when all is said and done, your campaign will be one that many others aspire to be like.

Thimblebrush Threepweed - Mar 24, 2015 at 23:07
Ya! A Ron Gilbert Indie Dev Cast would be a hit for sure! Great idea.

(What I meant by a round-table general dev talk podcast, was more along the lines of a 10-15 min phone/skype call, retrospective take on the past week. Just a casual convo, maybe answering comments/questions, touching on blog posts, nifty tidbits that come to mind...just whatever really... As you said though, these sorts of things take time, and with the written blog... that's a bit of an undertaking for sure...)

PS. (If you're ever looking for volunteers to assist with any audio/video production/editing... :) )

Ron Gilbert - Mar 25, 2015 at 00:18
What I meant by a round-table general dev talk podcast, was more along the lines of a 10-15 min phone/skype call

OK, that's kind of an interesting idea. Maybe a micro-podcast of sorts.

Salty Ride - Mar 25, 2015 at 10:38
Gary, what tools are you using to make the pixel style? I always use a grid on illustrator, but in photoshop I have no idea how to do it.

Dan - Mar 25, 2015 at 12:59
Isn't it real low-res?

Mathias Berglund - Mar 26, 2015 at 06:31
Just create a small 320x200 image. If its too small later -scale it up but without antialiasing so that individual pixels maintain their cubic form.

Andy - Mar 26, 2015 at 15:23
Flies around the skewer ;-)