Navigation

    CreatiCode Scratch Forum

    • Register
    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • CreatiCode

    3D - Word Art (Difficulty: 2)

    Tutorials
    1
    1
    1439
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • info-creaticode
      CreatiCode last edited by admin

       

      Key Topics Covered

      • 3D Text
      • Image Processing Pipeline
      • Set Camera Properties

       
       

      Introduction

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

      b10.gif

       
       

      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.

      e2e6139d-6436-4639-962d-9a6e0f6cc1dc-image.png

       
       

      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:

      4b8d4940-5be3-4745-b230-213e5ae7923b-image.png

       
      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:

      1851d734-c460-45b6-ae9e-e1de40892373-image.png

       
       

      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.

      d49dc2ac-9737-4a92-a805-dd2d44d471ee-image.png

       
      Here is how the text should look like:

      b5.gif

       
       

      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:

      425f3a64-4a54-444d-8fce-7d948f011a3d-image.png

       
      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.

      b6.gif

       
       

      Step 5 - Add a Horizontal Light

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

      c13fe22c-1c17-4c15-8ad9-e552f341b1d0-image.png

       
      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:

      b7.gif

       
       

      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:

      2acf1854-074d-493f-8328-e8c5103dc6ee-image.png

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

      b8.gif

       
       

      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:

      419fe855-7621-4238-896c-eaec1b1abbfc-image.png

       
      This is what you should get:

      b9.gif

       
       

      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:

      9c63d006-76e0-409b-bb38-e2ae301f74fd-image.png

       
      And here is the final result:

      b10.gif

       
       

      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.

      1 Reply Last reply Reply Quote 0
      • Pinned by  info-creaticode info-creaticode 
      • First post
        Last post