Shape painter object

A shape painter object allows us to draw shapes in our game. It can be useful for making simple User Interface (UI) elements. The Shape Painter can even be used to create a selection box.

Add a shape painter object

To add a “Shape painter” object, create a new object from the Properties Editor list on the right of the Scene Editor Interface. Then select-click on the new object, select “edit object”. In the list that is displayed, click “Shape painter”. You may need to scroll down in the list to find it.

Edit properties

Next we want to edit the object properties. Again, from the Properties list on the right, click on the object. Select “Edit object” from the popup list that is displayed. A new window opens. It displays the properties for the Painter Object.

Change the colour and opacity

The Shape painter properties window presents us with options that allow us to change the outline colour/color of the objet, the fill colour/color of the object, the opacity of each colour/color, and the outline size of our object.

Relative object position

By default, the position of the shapes that we draw on the screen is relative to the “Shape painter” object.

In the case of a relative position, when we draw the shape on our screen, that relative is position 0 on the X and Y axis. It will be the position of the Shape painter object. That is, if we want to draw a shape where the screen position will be 100 pixels on X and 100 pixels on Y. The position is going to be 100 pixels from the shape painter object wherever it is on the screen.

When the box is unticked/unchecked, the position 0 on the X and Y axis is going to be at the top left corner of our scene regardless where the object is located.

Draw a shape

To draw a shape, as usual, create a new object using the Objects Editor. Add the “Shape painter” object to our scene. If we run the preview now we won't see anything. The Shape painter object basically just adds the functionality for the object. For now it only holds the “Shape painter” properties/parameters. To draw a shape, we need to use the Scene (Events) Editor. If you are not familiar with events, I recommend to check out the events page on the wiki.

Let's go to the Scene Events Editor to add an event. Once you have added a new event, click the “add action” text. Find the events for Primitive drawing.

We can choose from 3 different types of shapes to draw. Circle, Line, and Rectangle. We are going to draw a rectangle on the screen. Select the Rectangle under the drawing properties.

On the right side select the shape painter object to use. For the top left position enter 0 for both X and Y. For the bottom right position enter 100 for both X and Y.

Now, if we launch a scene preview, a rectangle will be drawn in the scene/screen that is 100 pixels wide and 100 pixels high.

If we left the relative position enabled, you may notice our rectangle is in the the same position as the shape painter object even though it origin point is 0. Now if we disable that option and launch the preview again, you going to see our object is drawn in the top left corner of our scene.

Using events we can also change any properties of a shape on the fly.

Examples

See it in action! 🎮
Open these examples online.