Creating Point and Click Games with Escoria

Scene composition

In this section we will talk about, how can place your artworks in the game to compose your scenes and how the mouse can interact with items.

Composition tools

Let's check the tools we have to place artworks into the scene.

You can use the blue frame in the editor to place your artworks, it will delimit what is printed inside the screen.

You can find in the interface the tree view which is showing the items in the order that they are draw on the screen. The top item of the tree is draw first, then the second… so the first item will be behind all the others. It's the reverse order that you can find in graphics software (like Krita, The Gimp or MyPaint).

Tree view

To scale, move, rotate, lock your pictures or move and zoom in the editor you can use the composition tools above the center panel.

Godot composition tools.

Be sure to select the node in the tree view (click on it) you want to edit before using the tools.

You can find all this parameters (size, rotation, position) in the inspector frame and adjust the values more precisely.

Node inspector item values


How to make an area

To interact on the items with the mouse, you need to use an area. It's a click zone which delimits in space the area we use to consider your pointing on an item. You can create two types of area, a simple one which is just a rectangle around your picture zone, or a customized click mask.

To make a rectangle zone, you need to create a Control child node to your item, you must rename it "area", and then you can adjust the shape of the rectangle that will define the clickable zone.

Simple area click zone


To make a custom clickable zone, it's a little bit tricky, first if your item isn't a TextureFrame node, you need to create a   TextureFrame child node to your item, then you must rename it "area".

Now you need to create a special file (we can call it click mask) to delimit the clickable zone.

To avoid some inconvenience and be sure that the click mask will be aligned with the artwork, be sure to reuse your artwork file and don't crop or move your picture in your canvas, then you just need to do an image only in black an white (no transparency and no gradation), where the white part will be the clickable zone and black part the non clickable.

Now you need to export this picture in .pbm format with raw/binary encoding (The Gimp do it very well).

Click zore map

It will look like that (we choose to do a clickable zone a little bit larger than the artwork).

It remains to load this file into Escoria, to do this you need to load the .pbm file you just created in the Click Mask filed you can find in the TextureFrame node inspector in the Textures part.

Custom click mask

If your artworks are in the TextureFrame, congratulation it's done.

If not, don't panic, you just need to line up the area (which is currently invisible) with your artwork. The easiest way to do this is to temporarily load the current item's artwork in the Normal filed in the TextureFrame node inspector in the Textures part, then line up the two same artwork with the scene composition tools.

Don't forget to remove the picture you have temporarily load in the Normal filed and leave the TextureFrame node visible in the scene tree.

Il y a une erreur de communication avec le serveur Booktype. Nous ne savons pas actuellement où est le problème.

Vous devriez rafraîchir la page.