How to Import Assets in Godot

Instantiating Scenes as Nodes

Create another new scene using the plus icon at the top of the scene view. Use 3D Scene as the root node again. Save the scene as Warehouse.tscn.

Before you add your imported models to the scene, it’s worth doing a little set up. Right-click the root node and select Add Child Node (shortcut Command+A). You’ll need a camera to render the scene, so add a Camera3D node.

In the Inspector view, set the Camera3D Transform values to Position: {1, -1, -5} and Rotation: {0, -90, 0}. If you toggle on the Preview in the scene view, it will lock the scene view to the camera’s perspective.

The next node to add will give the scene a bit of atmosphere. Add another child node to the root, this time of type World Envrionment. This node lets you set some global lighting and background settings for the scene.

In the Environment section, add a New Envrionment. Fold out this Environment to adjust its settings. Set the Background mode to Sky. Then, in the Sky settings, add a new Sky. For the Sky Material add a new Procedural Sky Material and set its Top Color to a reddish color, something similar to #bd411c and the Horizon Color to a more yellow, around #e6a766.

This should give you a nice red, eerie sunset look. You can also try enabling Volumetric Fog and tweak the settings until you have something you like. You can always click the Reset icon to go back to the default setting for any field.

Now it’s time to add your imported scenes. Save your progress in the Warehouse.tscn. Right-click on the root node and select Instantiate Child Scene.

Select the Environment scene you saved earlier. With the camera position you set earlier, the Environment should be in the perfect position. Select the Camera3D node and toggle on the camera preview to check. You should have a scene that now looks something like this:

Now, repeat the same steps to import the Demo scene. To get the model into view, set the Transform Position around {4.75, -2.8, -4.75} and the Rotation to {0, -90, 0}.

Save the scene again and press the Play icon in the top-right of the editor to play your scene. It should be looking good by now!

There’s only one problem, the model isn’t animating again!

Setting Up the Animation Node for Playback

In order to get the animations playing at runtime, you need to initialize the actual animation player. For this, right-click on the Demo node, select Add Child Node, and add an Animation Tree node. Take a look at some of the properties of this node.

• Tree Root: This will be the type of Animation Tree you want to use.
• Animation Player: The Animation Player node that this Animation Tree will act upon.
• Root Node: The Node3D that the animation will play on.
  • This is automatically set to the Demogorgon because you instantiated the Animation Tree as a child of that node.

You can explore the other settings in your own time. For now, select a New AnimationNodeAnimation from the Tree Root drop-down. This will expose some new settings for the animation resource. But to get the resource you need an Animation Player set first. Click the Assign… button for the Anim Player and a dialog will open for you to select the Animation Player Node to use. The only problem is that it’s empty, even if you toggle on the Show All setting, all the nodes are grayed out as none of them match the correct type.

But you know that there’s an Animation Player Node as part of the Demo scene, you edited its properties earlier!

Close the dialog, and then right-click the Demogorgon node in the scene view. Toggle the Editable Children option like you did earlier. This will instantiate all the child components of the Demogorgon scene into the working scene, including the Animation Player Node.

Go back to the Animation Tree node and click the Assign… button once more. Now you’ll have the option to select the Animation Player that’s part of the Demogorgon scene. With the Animation Player set, you can go back to the Animation field under the Tree Root and select the IdleHunt animation from the drop-down.

Save the scene and play it once more. The Demogorgon should now be animating, ready to hunt!

Creating a UI

Time to give the scene a very simple title logo. Download a suitable transparent title image, or use the one from the materials folder. The format isn’t hugely important, as long as it’s one of the supported formats. The asset in the materials folder is a SVG, but you could just as easily use PNG, assuming you want transparency.

Importing Textures

Create a new folder in the FileSystem view called Textures. Copy your image into the folder and allow Godot to import it. There’s nothing you need to change to use the image in this tutorial, but if you did want to edit anything, you would look at the Import panel to change settings before clicking Reimport to apply the changes. An imported texture will remain read-only unless you make changes to its import settings.

Setting Up Base UI

Time to set up a really simple UI. Create another new scene, but, this time choose User Interface as the root node. Add a child node to the root container of type Panel Container. This node allows you to anchor the UI to a set part of the screen. In the Inspector for the Panel Container set the Layout Mode to Anchors and the Anchor Preset to Center Top. In the Transform, set the X Position to -500, or half the width of your texture if you used your own image.

Then, add a child node to the Panel Container of type Texture Rect. In the Texture field select one of the Load options to load your title texture into the UI.

Save this scene as UI.tscn and return to the Warehouse scene. Right-click the Camera3D node and select Instantiate Child Scene to add the UI scene as a child of the Camera.

Save the Warehouse scene and play it once more. You’ll now see your title logo sitting top-center of the screen!

Spooked by the fact that your title logo isn’t centered on the screen? In that case, you may have run into a little bug in Godot. This happened when you instantiated the UI scene. The Layout option of the Control node was reset to FullRect. Change that back to CenterTop and all will be grand.