Update Object Textures

CreatiCode

Prerequisite

Description

Textures are pattern images. They can be painted on the surface of objects to make them look more realistic.

For example, given this scene below, probably it is not easy to tell what these objects represent:

However, after we apply some textures, it becomes clear we have a brick wall and a wooden box on the floor:

The “Update Texture” Block

Texture Type Selection

When you click the “Please select” input box, a library window will pop up, which displays all the textures provided by the CreatiCode platform. You can search for a texture by part of its name as well. For example, if you search for “pixel”, you will get all the pixel-formatted textures that are similar to Minecraft cube textures. Click on any item to select it.

Repeating the Texture for Rectangle Faces

Each texture is a square image. So when we try to use it to cover the faces of an object, we would need to repeat the pattern image a few times. You can control how many times the texture is repeated in each direction using the “unit size” input.

For example, if a rectangle face of a box is 400 wide and 300 high, and we set the unit size to 100, then the texture image will be repeated 4 times along the X direction and 3 times along the Y direction. This way, each texture image is still a square with no distortion, and the repeat count is calculated automatically. This method works for any face that is a rectangle.

Repeating the Texture for Non-Rectangle Faces

When the face of an object is not a rectangle, such as a sphere or a box with rounded edges, we can not use its width and height to calculate the number of times to repeat the texture image automatically. Instead, you will need to specify the repeat count using the next 2 input boxes “non-box repeat h ( ) and v ( )” (“h” for horizontal and “v” for vertical). Note that the “unit size” input will be ignored for non-rectangle faces.

Texture Rotation

You can rotate the texture image by a degree number. For example, when you change the rotation from 0 degrees to 90 degrees, the arrows change from pointing down to pointing sideways.

Area of a Model or Avatar

You can apply textures to models and avatars as well. Similar to how you update colors, you can specify to update all areas in the model or one of the areas. The specific meaning of each area depends on the model itself.

For example, you can change the avatar to wear a “lava” shirt and “grass” pants:

Some Textures Also Provide Shadows

Some textures not only add a color pattern to the object’s faces, but also allow the game engine to simulate shadows. For example, under a directional light, we can observe the “Brick03” texture adds some dark shadows at the cracks between the bricks.

Updating Texture Colors

After applying some textures, you can still update its color to get a different look. For example, the “Floor02” texture is white, but you can update its color to get floors of different colors:

Using A Costume as the Texture

Sometimes you cannot find the exact texture you need in the texture library. You can use a costume of the sprite as the texture instead, using this block:

The only new input here is the costume selection dropdown, where you can select which costume you want to use as the texture.

For example, you can upload any image file into the costume editor, then use that costume as the texture. Note that you need to convert the costume to the “Vector” format.

For another example, you can draw your own costume to be used as the texture. You need to first draw a square background, then draw anything inside the square.

Demo: A US Dollar Bill

Sometimes, you want to set the repeating times for rectangle faces as well. You can easily do that by setting the “unit size” to 0. For example, suppose we want to create a 100-dollar bill. We can create a plane, and add a costume image of 100 dollars. Now we just need to set the “unit size” to 1, and the repeating time to be 1 for both “h” and “v” directions:

https://play.creaticode.com/projects/8a108de3cf219ff25801a819

Using An Image File URL as the Costume

For another option, you can use the URL of an online image directly as the texture with this block:

The only new input is the first input box for you to specify the image URL. You can find any image online, right-click on that image, and select “copy image address”. Then you just need to paste that URL into the input box. Here is an example with the default image:

And you will get a box covered by flowers: