3D - Word Art (Difficulty: 2)

CreatiCode

Key Topics Covered

Introduction

In this tutorial, you will create a beautiful 3D WordArt using 3D text and image processing pipelines.

Step 1 - Create A New Project

Please create a new project in the CreatiCode playground. Remove the “Sprite1” sprite, and then add the following blocks in the “Empty1” sprite to initialize an empty scene.

Step 2 - Set Up the Background

Now let’s prepare a nice background with your favorite color. Also, use an image processing pipeline to add some dark corners. Here are the 2 blocks you need to add:

Note that for the image processing pipeline, we are using “antialiasing” and 'sharpening" effects to make our 3D text smoother. Also, the bloom effect is enabled with a strength of 55, so that the text will shine brightly under lights.

You should get something similar to this after this step:

Step 3 - Add the 3D Text

We’ll be using the “3D thick text”, which has a thickness to it, and supports many interesting font types.

You can pick any text and any font type. Here is an example block using the “Happy Holidays” font. Note that we are naming the text as “c”, so that we can remove it later.

Here is how the text should look like:

Step 4 - Give the Text an Emissive Color

To make the text emit lights, we need to give it an emissive color, such as white color. You can use the “update color” block like this:

Now the entire text is brighter, especially when we look from above or below. That’s because the “empty” scene has 2 light sources at the top and bottom.

Step 5 - Add a Horizontal Light

To make the text brighter in the front, we need to add another horizontal light:

Now the text will shine lights when we look at it from the front side as a result of the “bloom effect” we added before:

Step 6 - Rotate the Camera Around

To view the lights on the text from different angles, we can add some animations to our camera by setting its properties. Here are 3 blocks that start the camera at the horizontal angle of 210, pan the camera to the right for 4 seconds to the angle of 150, then bring the camera back to the center at angle of 180:

As a result, we get a rotating and shining text like this:

Step 7 - Zoom in the Camera

Lastly, let’s zoom the camera toward the text, so the text becomes larger and larger. We can easily achieve this by setting the camera’s distance to 0 in a few seconds:

This is what you should get:

Step 8 - Remove the Text

At the end of the previous step, though the camera is at a distance of 0, we can still see some parts of the text. We can get rid of it by removing the text at the end. Here is the complete program:

And here is the final result:

Creative Ideas

Now please try to build some new word art yourself. Here are some example ideas:

Adjust the Color/Texture/Font: you can make the text look different by applying different colors, textures or font types.
Different animations: You can change how the camera moves around the text, or make the text move or rotate.
Break the word into letters: Instead of using one 3D text object for the entire word, you can create individual text objects for each letter, then combine them with different animations.