Elysium…a slice of (online) heaven


Elysium…a slice of (online) heaven

Elysium is a concept project that has been created to feature various strengths of Electrotank Universe Plateform (EUP), an integrated package providing turn-key solutions for Virtual Worlds.

Jobes Book, available in all the good bookstores...

Jobe's Book, available in all the good bookstores...

Some elements of Elysium were also provided as part of a start package, with the excellent Jobe Makar’s book “ActionScript for Multiplayer Games and Virtual Worlds“. This book covers setting up ElectroServer and EUP, as well as coding and designing Virtual Worlds. If you want to step in the delicate task of creating Mulitplayer Worlds, I can’t recommend it enough!

The following post cannot just cover every Art task for creating a Virtual World. Instead, it will focus on a few useful tips for artists, that should make creating these assets a little bit easier, streamlined process.

I am going to focus particularly on world assets design for this post. The rest (character design, UI, etc) will most likely be topics for future posts.

World and Items design

One of the first things players will enjoy in your game is the environment they will be playing it. This should be the “star” of the show: players are going to spend a lot of time in these “maps”, so you want to make sure that they are compelling and never boring.

The style chosen for Elysium was a colorful, upbeat cartoonish feel. To achieve this, artists obviously have a lot of choice in the production techniques – cell-shaded 3D, vector-based approach, pixel-based approach, or even more traditional freeform drawing.

I decided that digitally colored assets based on traditionally drawn items would give a lot of character to the game, be fast to produce (*well, granted that you like to hand draw stuff :))

So, all the world assets in Elysium where hand drawn on paper, scanned and then colored/modified/corrected in Photoshop.

A few samples of these hand drawn items, recolored in photoshop.

A few samples of these "hand drawn" items, recolored in photoshop.

This method has its perks and downfalls: unfortunately, there’s no “control+Z” on paper (yet!), so it’s good if you have a good vision of what you want right away. Once the sketches are in photoshop, however, it’s a very flexible method to iterate quickly. I could have chosen to overwrite all the pen strokes by cleaner vector lines, but I did liked the “handcrafted” feel of the pen sketches, so I kept them in. I believe it really sets the look and feel of the world away from the usual, cleaner, vector based Flash worlds.

The handrawn feel gives some character to our environment and objects, outside, but also inside buildings.

The handrawn feel gives some character to our environment and objects, outside, but also inside buildings.

Modularity == clever!

One of the most important thing to keep in mind when creating these assets is “how can I reuse them as much as possible“. This becomes even more important when you start the level design (each single assets has a bandwidth cost, so the less the player has to stream, the better it gets) but it stays true even at the asset creation phase: if I have 10 houses with 3 windows each, do I want to create 30 windows? or will I reuse the same assets with some color correction and sligth tweaks to create the illusion of diversity, while saving me 30 times more work? – I think the answer is rather obvious.

In Elysium, for example, most of the buildings are composed of core elements – doors, windows, decorative elements, etc, everything is “stand-alone” and a great amount of diversity can be achieved by combining these various elements together.

As an example, here is how the Inn is built, combining various elements to create a building that looks different from the regular town house, although it reuses most of its core elements.

Here is how the "Inn" is built, combining various elements to create a building that looks different from the regular town house, although it reuses most of its core elements.

The buildings are still exported as “whole”, for map integration comfort, but the production time was significantly cut with this approach.

Variation, attention to detail: the “One screenshot anywhere” rule.

Whatever game I design, but particularly for very large environments, I have a rule I set-up for myself, and that I try to always follow: once I’m done with my first iteration on a world, I put a cache the size of my player screen size (most Flash game are fixed width/heigth) and randomly position it in the world …several times. I make sure that whatever the player sees in this “window” is always pleasant, varied and not boring. If it is not, I’ll re-arrange the different assets, create new ones to break the monotony, give that portion of screen a sense of “purpose” or “uniqueness“. Basically, any section of your world should be promotional screenshot material: if it isn’t, then it needs to be refined 🙂

Various screenshot of Elysium exterior environment

Various screenshot of Elysium exterior environment

As these screenshots (hopefully) show, even with using a rather small palette of world items, a lot of variety can be achieved. Using background color variation, rays of light and illusion of randomness was instrumental into making the whole map feel “real” and natural, with always something pretty to look at: Map design, just like nature, hates emptiness! 🙂

A few words about Interior design

All the techniques described above do apply to interior design as well: Re-using assets, introducing diversity through controlled randomness, etc.

There are however a few things that become dramatically more important than for exterior design.

First, the sense of purpose: while nature’s organization isn’t always “purposeful” (or at least, to our uneducated eyes), everything man-made usually carries much more sense of purpose. A carpenter’s shop needs to look like an actual carpenter is working in there. An Inn will need to feel welcoming and cozy, etc…

This can be a delicate task when you are working with a restricted amount of assets to map with.

My advice is to take advantage of what’s in the background versus the assets mapped in the engine ( and this calls for a longer blog post about “baking assets in a background…oh well, another time :))

A few samples of various Elysium Interior maps

A few samples of various Elysium Interior maps

To make it short, everything you can see on your map isn’t always mapped in the map editor: a lot of assets are actually part of the bigger background image (this isn’t valid of course for pure, 100% tile based worlds, but these become more and more rare anyway). whether your background image is richely detailed or almost naked isn’t going to make a big bandwidth difference: so take the advantage of the background to “integrate” (bake) as much detail as possible – this is where much of the little details can be placed, at almost no cost – it’s like a free ride, guys! 🙂

Another useful tip, when dealing with interior maps, is to pay extra attention to the lighting: this will go a long way to making your map “attractive”. Usually, interior lighting is much more complex than outside lighting, so play with rays of light coming of the windows, lamps, candles, etc. Balance shaded areas and lighten areas to create rhythm in your interior, much like if you were decorating your own house/apartment.

I find interior mapping to be slightly more difficult than exterior mapping, because randomness is rarely a viable option to make things look varied (interiors are usually more organized and controlled). Interior are also more challenging in the fact that to make them “purposeful”, one will tend to accumulate specific items that will end up hindering player pathing, already delicate in small, contained spaces.

Practice makes perfect: no one needs a working engine: it’s very easy to train in photoshop, on a grid, to place objects, learn what to bake, what to keep as mapable assets, etc.

That concludes my post on World environments. I’m aware that I barely scratched the surface of “what’s to know” when starting designing Worlds, but I hope some of my tips were helpful, and all I have to add is “good mapping to you all!” 🙂

Leave a comment


Recently made

cover2 cover cover2 cover2 cover2 cover2 cover2 cover2

Enter your email address to subscribe to this blog and receive notifications of new posts by email.