Feb 262016

Yesterday I got a question about creating a quick sketch for a new boulevard in the municipality of Stockholm, naturally, having never done anything like it before, I agreed.

For this assignment I was given a 16 hour deadline and decided to use Unity as a tool to build up the area, I started up with a simple SketchUp model and a plan drawing straight out of AutoCAD.

Sketchup Base 3D Model

Base non-UVed boxes

With most things having to be done in post-production, I still wanted to get some nice lighting out of Unity, additionally, having the main textures already applied and corrected according to perspective when entering post would save a bunch of time.

Having used 3Ds Max for. Wow… This month marks my tenth year anniversary of opening the program for the first time, I went with that.

Look at that, my first finished model, isn’t it lovely… Hah, if I had a penny for every time I got bullied by my friends at Uni for it, I would never have had to start working at all. It’s even copyrighted, one of them still uses it as avatar on Steam… But I digress.

Ten year anniversary

Ten year anniversary

Modeling the street, UVing the parts that needed to be textured, the creation of some nice chamfered edges around all small parts of the environment, as well as the placing of most props was done here.

Finished 3Ds Max

Final 3Ds Max model

Next up was textures, the old classical workflow of tiling images from the area specified wouldn’t work for two reasons, it isn’t built and creating textures that way takes a long long time, therefor I decided to go with Substances, I love working those graphs!

Sadly though, while I would’ve loved to get deep deep into Substance Designer to create all textures, I knew there was no time, as such I used Allegorithmic’s Substance Share and merely adapted the graphs for my own specific needs.

Since the final product was to be a still image, I found that floating geometry can be used for things other than normal maps.

Substance Share

Fake it until you make it!

The area was close to a park and I wanted to have trees with a nice correct lighting throughout the leaf crown of every single tree, while this is certainly doable in Photoshop, finding and cleaning images still takes a very very long time.

Instead I risked a gamble, bought a license for SpeedTree and got started.

Roughly 6 hours into the process.

Roughly 6 hours into the process.

SpeedTree is wonderful, I will make sure to write something on it later on when I start using it for hand painted trees in our game, Eco Tales.

Here’s the final Unity3D scene, my screen shoot tool sadly can’t get any of the post processing in on the capture, so I had to forgo it, but with it activated and a few more hours, I’m sure Unity can measure up to Unreal Engine 4 when it comes to visualization projects.

Base picture from Unity

Base scene from Unity

A tip on layers when working on something like this, make sure you name them, doesn’t have to be spelled correctly or well thought out, but trust me, it saves you a lot of head aches, especially if you have to reopen the file again.

Name your layers

Name your layers

This is the final image after 16 hours of work and a lot of back and forth, more work will be done, the trees need to have a species change and there should be more people lulling about.

If you had to guess, what part of the image do you think this image is trying to sell you, which design element is for sale? Tweet me @Gruckel I’d truly love to know if I’ve managed to sell the correct ting here!

Version 3

Version 3 of project Opp

After initial feedback and some back and forth this is the final image we’ll be taking to the client.

Camera moved for final version

Camera moved for final version

The ease with which SpeedTree allowed for quick iteration of the look of the trees as well as species changes has been truly invaluable.

The pattern was moved to where it will actually be placed in real life, most post effects were reusable with slight changes to masking areas.

With the extra hours I also managed to add some post-rendering to the trees and some improved shading on the people.

Another thing which didn’t stick out enough on the original was the seating wall which will run along the entire boardwalk, with people placed there in a seated position this has become way more obvious.

Most interesting of all in a way was the fact that the original seated tables for cafés were switched out based upon how they looked in the last image, creating this image has in a way already payed for it self!

 Tagged with: , , , , , ,
Feb 182016

Here we are, the 4th recap week of Eco Tales, time sure does fly, we’ve done some work and had some fun, celebrated an old man turning 30 and two cruises having sadly stolen a lot of our time.

J I’ve been painting a lot lately, trying to get better at it, the progress is slow but steady and, in my own humble opinion, things are starting to look rather good!

A new workflow I’m trying out is creating a simple base in substance designer, it may look something like the following image, a simple tiling pattern that has some random rotation and lightness variation, I generally also add some scale variation.

These variations, at least as far as scale and rotations are concerned are extremely subtle, +/- 1-3% in scale and +/- 1-3°. Giving a range from 0.97 – 1.03 and -3° to 3°  respectively.

Substance base

Starting point

Next up as in case of these cobblestones, I select a base color and using the lightness variations from the base texture, I also alter the hue slightly on each stone.

In this case, the texture is of a seemingly grey material, however, nothing in nature is ever really truly without at least some measure of color. Here each stone has a unique hue at an intensity of about 3-5 on a saturation slider in Photoshop.

As you stare at the texture, I doubt you can tell that some of these has a green base and some a pink one, but that’s not the point.

In this case I’ve also laid out some base lighting. For all of my textures, the light will be coming at an angle similar to if the sun had been up but mostly covered by clouds, since, without a light direction, everything will look dull and washed out.

Cobbles Draft

Cobbles draft

Next up is an almost finished piece, a simple brick texture, next I’ll be adding some mid-range details.

Look at the brick second from the bottom on the right side of the texture, see that dent? This would be a mid-range detail.

After that I’ll be adding some surface details, scratches are a good example of this, but not too much, as these will tile, you don’t want anything which will make that too obvious.

In these the hue variations are even more subtle, ranging from slightly more yellow on brighter tiles and generally slightly more red on the darker ones.

EcoTales Bricks

Bricks at 90% done

This here plank texture on the other hand, I’m calling done, this is a level of graphical fidelity that I can feel proud about. There is room for more mid-range details and most definitely some surface details, but sometimes, very often actually, less is more.

KISS, Keep It Simple Stupid, remember this acronym, it’s true within all walks of life.

Another great tip while we’re on kissing, just say “Hi”, if the interest is there s/he will be more impressed by that, than any variation of ; “Hi, I might not be Fred Flintstone, but I can still make your bed rock.”

Aaand… Back to textures, were I to revisit this in the future, I would probably add some hue variations, writing this, I’m fairly sure I will.

Another very likely case is that I will use these textures as a base for broken and or dirty variations which I will “paint” onto my buildings and environments using vertex colors and a custom shader I’ve written.

Eco Tales Planks

Finalized plank texture

Finally we have something that I like to see in games, decals or big broken parts of otherwise perfect buildings etc, painting it like this, makes sure the breakage looks and fits into the background; see how the unpainted plaster leaks into the crevasses between the bricks? Pretty nice isn’t it?

Now consider that the purple plaster part is transparent and we’ve got a recipe for success!

We could even throw our planks and cobblestones under a nice broken plaster and whop, the house is suddenly unique.

Damage to plaster

Damage to plaster


K What can I say, it is that time of the year when students are beginning to care about their grades so I am totally swamped at work which leaves little time for ECO, I have managed to squeeze in a few hours at the expense of my social life but sometimes that is required, ECO deserves it, but I have not much to report I am afraid, hopefully I can squeeze in a few more hours this weekend.

 Tagged with: , ,
Feb 092016

Ok, Global Game Jam 2016 is finished, before we dive into it let us begin with the sweet nectar of our efforts.

How awesome is that?

We agree!

As you can see it is Tommy Wiseau from The Room, but let us take this from the start.

Global Game Jam is as you most likely have figured out a global event, during the last weekend of January every year game developers from around the world gather during 48 hours to create a game based on a common theme, this year the theme was RITUAL!

KJ Interactive (Krister and Jona) came up with The Shakespeare, a game where Tommy previously to making The Room records a pilot in his garage and by the sheer awesomeness and quality of his work… Well you have to watch the above video to find out.

For those not yet initiated into the glory of The Room, let me just tell you this. It is an EPIC movie of love and betrayal.

K Ok, so I’m Krister, the programmer of the group. The Shakespeare game was a nice level of complexity for a jam, the two biggest features code wise is that of the rhythm based gameplay where you have to press the correct button att the right time to score points, regardless the other system will continue to drive the story forward making sure Tommy is at the correct position at the correct time doing what it is he is suppose to do.


Krister, you can show this thing, you coded it!

I don’t really have anything fancy to show as my work is just about code, and even if the code itself can be presented in different nice looking colors I choose not to, but rather link you this fine looking color palette and trust that Jona, the technical artist has plenty to show, and… It is Jona after all and he would not be Jona unless he made some kind of sound, something he can talk endlessly about.


Now, let’s see this from my, Jona’s perspective. For this year’s Game Jam we wanted to create something which would just become a one shoot, something we could just as well show off through a video and not really have to worry about once it was done.

More than that though, we wanted to see if we could get some views and followers to our social networks for our upcoming game @EcoTalesGame on Twitter, always trying to get an extra follower.

Still, more than that we wanted to create something we could laugh at, so when we heard the theme and read the extra challenges, a game about Tommy Wiseau channeling Shakespeare in some sort of ritual felt like an obvious choice.

The first thing I did was create an OST, I got a hold of some piano tunes free with no strings attached and went to writing a song, you can listen to it HERE. It told the entire plot line, in the end the play deviated a bit but, well, no one listens to the lyrics anyway, right?

As this was a game jam, the time limit is the main thing to take into consideration when planning out a project, we wanted a nice character and I decided upon a style I personally love, big heads and small bodies.

I used zBrush to build a base for Tommy, rewatched The Room and took screenshots of him in various poses.


Take special note of the butt, if you’ve seen The Room, I know you remember it, doesn’t it bring back joyous memories?


Here’s the final model, I’m quite happy with it considering it’s my first attempt at a caricature, what do you think, leave me a happy or mad tweet @EcoTalesgame!

Tommy Epic

Knowing beforehand that skinning the character, sculpting, texturing and retoppologizing, not to mention animating it would take quite some time, I decided that the rest of the artwork would be things that Tommy himself could’ve made in his garage.


After creating a small ”room” with a feel I felt matched Tommy himself I set about creating cardboard cut-outs, painting quick sketches of the main environments and characters Tommy would interact with.


I gave Krister a script and he set about making Tommy do the things he had to do, following the player’s inputs, you can think of it as a guitar hero clone without the beat playing into it.

(See the picture I put in Krister’s section of the post.)

After the first draft of Tommy’s act, I created a voice over track with everything Tommy would say as he acted out the play, since this took place in Tommy’s garage, being recorded for the first time in history, I tried to keep the acting on a level suiting the actual movie.

Things still felt empty and I spent a lot of time creating, normalizing and cutting sounds from free sources around the web. Having the cut-outs make sounds as they were raised and lowered, dragged and pulled added a lot to the feel of the game. Finally adding in “Boos” and “Yays” for failed and successful button presses did the rest.

As any full-blood The Room fan knows, there are a lot of things which relate to spoons inside of the The Room, this is why, there is a nice physics particle effect getting activated whenever the player presses the correct button combination.

Make sure to subscribe to the mail list, and again, check out @EcoTalesGame on Twitter.

I made sounds! <- Jona wrote that.


 Tagged with: , , ,