Rosetta is a small town nestled in the mountains, caught between the modern world and antiquity. Its natural places remain largely untouched, even when civilization brushes up against them.

We wanted an environment that depicted the place where the city of Rosetta met the forests of Rosetta. It was natural that this would be a transition environment, a place the characters pass when moving from one area to another. For this we chose a simple road on the mountain’s edge.

“Simple” is one of those famous last words.


(1) Rough design sketch

The sketch has some traffic lights, some earth walls, and a road that forks into the upper forest.


(2) Layout sketch #1

This version brings the viewer closer to the road, as if they were standing on or near the sidewalk. While it captures the essence, there are a few technical problems with the feasability of the design, such as the road being wider on one side and the tributary road being too small. The scale of the traffic lights is also off.


(3) Layout sketch #2

For this version we added some details, including some rock walls. The roads were widened and the side road became two lanes.


(4) Layout sketch #2 edits

This is the proverbial red pen for marking up edits to a design. Here trafic details are being added, the side walk is getting connected, and the road is being brought into a consistent width.


(5) Layout sketch #3

And here the edits were added, though perhaps a little too literally. The disc that was added is a convex mirror used to show oncoming traffic around corners.


(6) Layout sketch #4

Here is where things start to go downhill, starting with the road leading into the forest. We decided we didn’t really like that part of the drawing and attempted a few variations.


(7) Layout sketch #5

Frustrated with the way the road curved up, this version removed it almost completely.


(8) Layout sketch #5 edits

… and here, in addition to trying to straighten out the road again, the bend in the road was re-added. This was deemed “too complicated,” as we had already spent more time on this background than any other.


(9) Line art WIP #1

This is the version we stuck with, and you can see us in the midst of creating the line art. I don’t remember why it was blue at this stage; perhaps it reflected our mood after going back and forth for so long over this. This version brought a whole host of edits along with the line art, including the traffic light turning into a very long street lamp for some reason.


(10) Line art #1 edits

There were several problems with the technical details of the road, including the configuration of the traffic lights. We were tired of making edits, especially ones that later get arbitrarily changed, lost in the pile, or re-edited later. The horizontal flip was a compromise to allow the traffic to remain on the right side of the road while not having to redraw the traffic lights. A, B, and C show the traffic lights and the lanes they service.


(11) Alt. line art #1 edits

Here’s another solution that involves removing the strange siamese twin traffic light and adding a second visible traffic light, with a third implied offscreen. The street lamp also gets a make-over.


(12) Line art WIP #2

Finally, we made up our minds and the line art is in progress. Some of the details are still missing but it’s looking better.


(13) Coloring WIP #1

Work in progress coloring job. Oops, the lighting isn’t coming from the upper right like it’s supposed to to match our pose sets.


(14) Coloring WIP #1 edits

This is a gentle reminder that you need more than one traffic light at an intersection.


(15) Coloring WIP #2

Another work in progress, this time with correct lighting. The road no longer slopes downhill to the left but extends straight.


(16) Coloring WIP #3

Progress. I believe Toi was sick this week; this is her coloring work.


(17) Final candidate

Finally complete. We were ecstatic that it came out so well, but horrified about how long we’d spent on it. Each new version and edits delayed this piece by an additional week. We had to prevent this kind of thing from happening again, so we decided to go over the issues we ran into.

We sat down and talked it out. While the original sketch was nice, it was just a rough plan and wasn’t at the proper perspective for what we needed. Furthermore, once we got away from the initial sketch, we lost sight of what exactly we were trying to accomplish. Our process became “I think this would look nice” or “let’s just change this to make it easier,” and we lost our direction.

When you do not have a clear goal in mind, it is easy to overlook details. This is what lead us to searching for photograph references for backgrounds. “We need a similar street to get the details out of,” we said. So much time was lost on technical details such as the width of an intersection or the configuration of a traffic light. We set out to find photographs for the remaining backgrounds, and this choice would be our salvation.

I lied earlier when I said this was done. We still have some technical details that need to be corrected to make a realistic intersection. However, it was at a nice stopping point at this version, and we already intend to revisit all of our art before release and do touch ups. Knowing when to take a break is important for morale, the lifeblood of a weekend project.

8 Responses to “Designing realistic environments from scratch”

  1. winternight119 Says:

    Amazing… thanks alot =O

  2. Moogs Says:

    Winternight,

    Did we help you out in some way? I’d like it if you could give us more information for future blog posts.

  3. Doomfest Says:

    … Another week delayed, per edit?!

  4. Moogs Says:

    Doomfest,

    We work on several things at once. Our 2 hour weekly art meeting is a status meeting. We plan edits and come back with them the next week. So we didn’t spend 3 months working on this alone.

  5. Doomfest Says:

    Well, that’s a bit comforting. Do you guys meet over an IRC channel or forum to discuss development? I’m a bit curious as to how the assets are managed efficiently, especially with this many comments flying back and forth.

  6. Moogs Says:

    We use MSN Messenger for IM, additionally we maintain a private Wiki for group note taking and a Subversion repository as a data store. If needed we have a PaintChat server too, but we’ve found that it’s less of a hassle to do sketches individually and upload them to the wiki.

    We are really blessed that everyone understands the group’s goals and can act fairly autonomously. This BG was a rare exception, but just this one time it was such a bad experience that we decided it wasn’t worth the risk of it ever happening again.

  7. winternight119 Says:

    Hey Moogs! Thanks for the reply/e-mail.

    Well what I liked about the post is that it provides a great basis not only for designing backgrounds and artwork, but the organization and thought process that is helpful to projects as a whole (namely, like projects and visual novels). Your concluding paragraph is what really brought it together.

    Also, at the time I was wondering about background art, the sketches and the processes that an art team would go through to make them, etc. and so it was quite helpful to see someone else record the process so elaborately because it was exactly what I was looking for. (It isn’t an art tutorial, but I found it helpful as a reference for the process.)

    ~Night

  8. Dex Says:

    Yo! I love this post. It shows the pain of art, and the creative process, all the hard work behind the shiny prettiness. LOTSOFIT

    I appreciate you guys! *thumbs up*