Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • CreatiCode
Skins
  • Light
  • Brite
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse
Brand Logo

CreatiCode Scratch Forum

  1. CreatiCode Forum
  2. Knowledge Base
  3. 3D Blocks
  4. Update Object Textures

Update Object Textures

Scheduled Pinned Locked Moved 3D Blocks
1 Posts 1 Posters 1.4k Views
  • 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.
  • CreatiCodeI Offline
    CreatiCodeI Offline
    CreatiCode
    wrote on last edited by admin
    #1

     

    Prerequisite

    • Adding Boxes to a 3D Scene
    • Update Object Colors

     

    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:

    https://cdncreaticodecom.b-cdn.net/scratch-gui-projects/forum/feb4ec20-0458-409d-9475-22cf66bbb7a3.gif" width="400" style="border-radius: 5px; border: 1px solid #29622d;">

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

    https://cdncreaticodecom.b-cdn.net/scratch-gui-projects/forum/2b3ea785-30ec-4080-b433-6e4f341c7fa4.gif" width="400" style="border-radius: 5px; border: 1px solid #29622d;">

     

    The “Update Texture” Block

     
    https://cdncreaticodecom.b-cdn.net/scratch-gui-projects/forum/d385f529-ca61-4c00-9f95-9b0681d8562f.png" width="950" style="filter: drop-shadow(0.35rem 0.35rem 0.4rem rgba(0, 0, 0, 0.5));">

     

    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.

    https://cdncreaticodecom.b-cdn.net/scratch-gui-projects/forum/df3ea125-17fe-40af-abc0-fe09a17873c7.gif" width="1000" style="border-radius: 5px; border: 1px solid #29622d;">

     

    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.

    https://cdncreaticodecom.b-cdn.net/scratch-gui-projects/forum/3639c771-6c62-4ced-a63a-1727fb3bf8d3.gif" width="900" style="border-radius: 5px; border: 1px solid #29622d;">

     

    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.

    https://cdncreaticodecom.b-cdn.net/scratch-gui-projects/forum/a0648c7d-ebb2-4517-96df-bd65855019ca.gif" width="960" style="border-radius: 5px; border: 1px solid #29622d;">

     

    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.

    https://cdncreaticodecom.b-cdn.net/scratch-gui-projects/forum/b3468b64-fba7-45bb-a61f-7a4aa9b51608.gif" width="1000" style="border-radius: 5px; border: 1px solid #29622d;">

     

    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:

    https://cdncreaticodecom.b-cdn.net/scratch-gui-projects/forum/f6bb8d29-2a19-44f4-a1ba-e6e107d3613c.gif" width="1000" style="border-radius: 5px; border: 1px solid #29622d;">

     

    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.

    https://cdncreaticodecom.b-cdn.net/scratch-gui-projects/forum/51aa9924-e75b-47cc-ba64-707b877a39db.gif" width="980" style="border-radius: 5px; border: 1px solid #29622d;">

     

    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:

    https://cdncreaticodecom.b-cdn.net/scratch-gui-projects/forum/b162bdcc-33e7-4744-afef-91b17f7d1702.gif" width="1000" style="border-radius: 5px; border: 1px solid #29622d;">

     
     

    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:

    https://cdncreaticodecom.b-cdn.net/scratch-gui-projects/forum/4ccd4f46-99b5-4329-a640-8ab475a86d0e.png" width="1000" style="filter: drop-shadow(0.35rem 0.35rem 0.4rem rgba(0, 0, 0, 0.5));">

     
    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.

    https://cdncreaticodecom.b-cdn.net/scratch-gui-projects/forum/8d1047bc-e15d-44d1-8abc-5627b8dbc44a.gif" width="1000" style="border-radius: 5px; border: 1px solid #29622d;">

     
    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.

    https://cdncreaticodecom.b-cdn.net/scratch-gui-projects/forum/e54fad48-57e7-434a-8b17-7a33dfdbf0b9.gif" width="1000" style="border-radius: 5px; border: 1px solid #29622d;">

     
     

    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://cdncreaticodecom.b-cdn.net/scratch-gui-projects/forum/a498077b-0915-4c89-ba05-c9235c151df8.png" width="1000" style="filter: drop-shadow(0.35rem 0.35rem 0.4rem rgba(0, 0, 0, 0.5));">

    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:

    https://cdncreaticodecom.b-cdn.net/scratch-gui-projects/forum/7c6862b0-e28d-42aa-ab30-be9d56690502.png" width="800" style="filter: drop-shadow(0.35rem 0.35rem 0.4rem rgba(0, 0, 0, 0.5));">

    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:

    https://cdncreaticodecom.b-cdn.net/scratch-gui-projects/forum/de20373b-1754-4c42-8e6f-5d52bad0c9a3.png" width="800" style="">

    And you will get a box covered by flowers:

    https://cdncreaticodecom.b-cdn.net/scratch-gui-projects/forum/f294cffe-b215-4f22-ab93-fdab4dcd888a.gif" width="470" style="border-radius: 5px; border: 1px solid #29622d;">

    1 Reply Last reply
    1
    • CreatiCodeI CreatiCode pinned this topic on

    Hello! It looks like you're interested in this conversation, but you don't have an account yet.

    Getting fed up of having to scroll through the same posts each visit? When you register for an account, you'll always come back to exactly where you were before, and choose to be notified of new replies (either via email, or push notification). You'll also be able to save bookmarks and upvote posts to show your appreciation to other community members.

    With your input, this post could be even better 💗

    Register Login
    Reply
    • Reply as topic
    Log in to reply
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes


    • Login

    • Don't have an account? Register

    • Login or register to search.
    • First post
      Last post
    0
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • CreatiCode