Component editor tutorial 3: Box with QR-code


New component

Let’s start by creating a new component in the Library page. If you don’t know how to do it, please take a look to Creating a new component. We are going to re-use the initial cube generated for this tutorial.

Apply a texture

A texture is just an image that Simumatik uses as a pattern to cover a visual. Let’s start by downloading a cardboard texture, as an example, and uploading it as an asset in the component editor.

Now, switch to the Editor tab and expand everything in the tree until the visual element is visible and then open the options menu. There, click on material to add the element.

Next, open the options menu on material and click on the texture option. As you can see, you need to choose between having a color property or a texture one.

Select the texture element and then click on the value property, located at the bottom.

A popup window will be shown. Pick your texture asset and click on OK.

Now your cube will have a cardboard texture!

Add a friction coefficient

One of the possible base_link children is the surface element. It will allow you to define the bounciness and then friction coefficients of your component. To add it, let’s open the options menu on the base_link and click on surface.

Select the friction child of surface and then click on the value property, located at the bottom.

A popup window will be shown. Let’s put 0.9 and click on OK.

In order for the friction to be applied, an inertia and a collision must be added to the base_link. Otherwise, the component would be floating and it wouldn’t collide with other components or even the floor.

Let’s open the options menu on base_link to add them with their default values. The mass will be 1kg by default and the collision will be a cube of 1m x 1m x 1m, which is the same as our current visual cube.

Second visual

A body (base_link) can have multiple visuals with different positions (origin). This is useful for combining several parts in a unique element, for example in a button (case + proper button).

In our case, we will have a box plus the qr-code. Open the options menu on base_link and pick visual to add another one.

Let’s start by downloading the qr-code image (you can use your own one too), and upload it as an asset.

As the barcode is a 2D image, let’s use a plane as visual. Open the options menu on the geometry inside the new visual and choose box2d. Then, inside box2d change the size property to (0.5, 0.5) to make it smaller.

The plane is still not being shown as it is inside the cube. Therefore, click on the origin property of the visual and click on the Value field at the bottom to set the Z-position to 0.51 in order to move the plane on top of the cube.


To display the image in the plane (box2d), let’s add a texture to the visual as we did at the beginning of the tutorial:

First, add a material to the visual and open it’s options menu it to select texture. Next, left-click the texture element and then click on the Value field located at the bottom. Finally, on the popup window displayed, choose the qr-code asset.

The box with qr-code is now ready! You can save it now and start playing with it.