Sponsored By

Featured Blog | This community-written post highlights the best of what the game industry has to offer. Read more like it on the Game Developer Blogs.

Creation of a Point & Click screen - PART 1 : The graphics

Some "behind the scenes" on the creation of a room in Demetrios! Here we study the art side.

Fabrice Breton, Blogger

October 29, 2015

13 Min Read

I thought it would be interesting to offer you some "behind the scenes" on how Demetrios is created!

And I figured the most interesting would be the creation of a screen in the game.

I've made it very simple, so you'll understand even if you're not a game developer!


The first step is obvious : drawing the picture of the screen.

For this purpose, I'm using a regular Wacom graphical tablet. (the most basic one, actually!)

At this stage, I'm cheating a bit. The game is a remake, so I use the old screens as a starting point!

How the room looked like in the 1999 version

How the room looked like in the 1999 version


At this stage, I have to think about several things, such as not putting important items too close to the edges of the screen, or having two items too close to each other. (In the first screens of the game, I often made that mistake, and correcting this later resulted in a real pain - better anticipate!)

I will also make some changes, such as adding, removing or moving items and parts of the scenery. Those changes make the game more interactive, and for other various gameplay reasons.

Then I will draw over the old drawing, but on another layer in my picture editing software. Considering I have the old version as reference, I skip the "sketching" part.


I have to be careful to draw some of the objects on different layers. For example, each object that will be animated or picked up by the player is put into its own layer! The reason being that each of them will become separate sprites on the screen.


Then, I start coloring parts of the screen, on separate layers. I have two personal technics for coloring :

For natural elements (most often outdoors : grass, ground...), I fill each part with a single color first. Then I paint over it manually, using shades variations according to the light sources, in order to render depth. Then I use a smudge pencil over it so it looks more soft and natural.

For inanimate / synthetic elements (most often indoors), I also fill each part with a single color. But after that, I create another layer, with a "Multiply" blending mode. This is used to add a shading over the objects, but without changing the coloring itself. 
This has an artificial look to it, which is why I mostly use it on synthetic things. (for example, the parasol here)

Both technics are complementary and gives Demetrios this unique style that fits my needs :)

Animations and last steps

When it's done, I'm also adding shadows to all the elements on the screen with "Multiply" layers in the same way, according to the light sources directions.

Then I repeat the same process for each frame of every animated object on screen. Yes, there are often 3 layers for each frame of each object : the drawing layer, the color layer, and the "shading" layer!

To make the picture slightly better looking, I will actually color over the drawing lines according to the object color (eg : a dark green for the grass edges) This is something you'll often see with Disney art or modern comic books.

Final picture without the animated sprites

Final picture without the animated sprites


When the picture is finished, it's not rare that I end up with over a hundred different layers - for a single room picture!

Finally, I export all of these layers to separate image files, in order to be integrated into the game.

As a reference, I usually spend one day to do the drawing, one day for the coloring, and one day for the animations.

Three days for one room, multiplied by about 50 rooms in the game, and that's about half a year - just for that!

Final picture with everything

Final picture with everything


None were used in that particular example room, but I also often use "Overlay" blend mode layers in order to render light. This is seen for example in the living room at the start of the game : varying the opacity of that layer in-game gives the feeling of real time lighting!

Lighting exampleLighting example


NB : I've never had art lessons and I've learnt pretty much everything by myself, so I don't mean to give lessons - I have a lot to learn yet! :p

This "behind the scenes" will be continued in a next article.

If you liked this, please consider voting for Demetrios on Steam Greenlight!

Stay tuned! :)

Read more about:

Featured Blogs
Daily news, dev blogs, and stories from Game Developer straight to your inbox

You May Also Like