• Introduction
• What is a point-and-click Game?
• What is Escoria?
• Requirements
• Basic Concepts in Godot
• Basics Concepts of Escoria
• About this book
• First Quick Game with Escoria
• About the example game
• Our project planning
• How to start your Escoria project
• Create your first scene
• Testing your Game
• Create Actions
• Escoria Fundamentals
• The Items
• Main Scene
• The Esc scripting language
• Inventory
• Verbs & Actions
• Speech Text
• Dialog interface
• Main Player
• What you need to know as an artist
• Artwork Import
• Scene composition
• Animations
• Music and sound effects
• Terrain: Light and Perspective
• What you need to know as a game designer
• Global states and saving
• Structure
• Booleans and conditions
• Instructions and commands
• Dialog trees
• Internationalization
• Audio speech files
• What you need to know as a programmer
• Game menus
• Implementing savegames
• Optimization
• How to publish
• Export your game

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).

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

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.

 

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.

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

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.

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.