Creating Point and Click Games with Escoria

Scene composition

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

Composition tools

Let's check the tools that help placing 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.

In the interface, you can find the tree view which shows the items in the order they are draw on the screen. The top item of the tree is drawn 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 you want to edit (click on it) before using the tools.

You can find all these 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: it delimits the area that reacts when you're 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, rename it "area", and then 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 in black and white only (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 does it very well).

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

Click zore map

The last step is loading this file into Escoria. You need to load the .pbm file you just created in the Inspector panel, TextureFrame > Textures > Click Mask field.

Custom click mask

If your artwork in within 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 TextureFrame > Textures > Normal field, then line up the two identical artworks with the scene composition tools.

Don't forget to remove the picture you have temporarily loaded in the Normal field 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.