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

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!

Drawing

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

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.

Coloring

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

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

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 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! :)