Hello and welcome to another episode on the Godot basics tutorial series. In this episode we're going to take a look at viewport No. So far we've been dealing with projects that only have one viewport that viewport would in fact be their root viewport. And again the root viewport is the window to our game world. In many cases this default setup is generally all you need. However there may be a point where your game needs functionality that is provided to you by the viewport. Node. Those circumstances what happened to be when you need another window added to your current window into the game world or multiple game worlds. Now why exactly do we need multiple viewport. Well for one if you'd like to have multiplayer split screen co-op you would use the viewport node on top of that if you want to add a mini map onto your game the viewport is one solution. One thing to keep in mind is that we can mix and match viewport types for example we can have a 3D world with a 2D scene. In In this example your 3d world would have a flat 2D mini map. In our same tree we may have multiple viewport subclasses to the root viewport. Now keep in mind a viewport creates a different view onto the screen. In the case of a viewport that is subclass to the root viewport your subclass the viewport will have its own. In a sense game world will have its own origin. It will have its own width and height dependent on its size.

Now just like the root viewport a viewport node can have multiple cameras but only one camera may be active at a time for each individual viewport. So in a sense you can have multiple cameras on a scene if you have multiple viewpoints. That means you can have different cameras shown on the screen for a single game world. Now the basic general setup of viewport in 2D are the following at the highest level you want a control node and subclass to the control node. You want a viewport container node and subclass to the viewport container node you want your viewport node and it will generally look something like this. So again at the highest level a control node a viewport container being the child of the control node and your viewport node. A child of viewport container node. Make sure the viewport size matches its parent control node. Rectangle size. So in this case our viewport node has a size of 256 by 150 and its parent control node the viewport container has a size of 256 by 115.

And so they are the same. You're going to get different results if these values differ. On top of that the size of viewport container does not care about the size of the control node as long as the control node has a size that is equal to or larger than the viewport container node a viewport without another instance seen and or camera will be of its own world. This means that view ports that are subclass to the root viewport will have their own origin and their own width and height. Take the get viewport method as an example. When you call in a script the get viewport method the script will retrieve the first viewport node it reaches in the seam tree hierarchy. In most cases since you normally wouldn't use viewport outside of special cases they get viewport naturally gets the root viewport. Let's take a look at an example. In this case you can see we have a viewport subclass to the root viewport. In this case the viewport happens to be this image right here in green and we have two scripts for two individual icons. I can too happens to be a child of the viewport and so you can see that icon sprite here. It happens to be in red and the second sprite has the same exact script as the one attached to icon 2 and icon happens to be the regular blue colored sprite Gordo image right here.

Now both of these do the same thing they move left in right in the viewport node. However they're only going to move within the bounds of the width value provided to us by our viewport nodes in this case. Ah I come we'll just move left and right in the bounds of the green viewport whereas our top level icon will move left and right. Based on the width of the root viewport and as you can see here as we play the video you can see that they're moving left and right within its bounds. ICON TO MOST left and right within the bounds Of the viewport node where as the sprite named. Icon moves left in right. Based on the width of the root viewport These again are these same exact scripts however because the value they are getting from their parent or rather their closest parent to viewport node they move differently. Now the second thing you may want to do is add split screen or a mini map. Keep in mind that split screen and many maps are a little harder to implement because you're going to need at least at minimum to separate scene files one scene failed to hold the game scene where objects will move interact and behave and another scene to hold the view ports and cameras to show the player. If you're dealing with split screens and perhaps another camera that's zoomed out. If you want a mini map implemented again you're going to need extra code for your split screen and many map. In this example if you want a mini map you're going to need extra code to get these zoomed value provided to you by the camera node to get that sort of pixel by pixel rendition of the main playable screen. And of course you're going to need extra code for the split screen to make sure that your screens are aligned perfectly divided based on the root viewport node or the operating systems game screen width and height. And

And if you would like individual players moving separately you're going to need to attach a camera that follows each individual player and you're going to need to write code that does that. So a basic example of a split screen or mini map is usually the following. You're going to again have your control node you're going to have a viewport container and you're going to have them based on what you want. If you have four players and you would like for individual game screens for each individual player then you would have four viewport. In this case I'm going to have an example of a mini map up and so I have to view ports one for the main playable screen and the second viewport to have the zoomed out camera to show the player at a smaller scale. Now keep in mind that this is one scene we still need a second scene and that second scene has to be where our game objects are going to move. In this case the second scene is just a simple no 2D scene with an icon a script attached to it that moves the icon and so notice here that we need to instance our scene on to our viewport. And so this scene called Node 2 Dean as you can see here we're instant saying no 2D scene onto viewport or rather the viewport node that is a child of viewport container or two and we have another no 2D instance scene attached to a viewport. That's the child of a viewport container. As you can see here though it's a little hard down here in red. You can see when we move up our bottom moves in relation to it. Now I'm gonna upload the video examples up to get up there very rudimentary basic level code. However they do get the job done in showing you the power of viewport. And on top of that it can go even beyond what I've shown you. You can use a for example a 3D scene and maybe your main character is playing a gameboy game and it zooms into the gameboy and you attach a viewport node that shows a 2D scene and so now in your 3d world your main character is in fact playing a 2D game.

And so again viewport can help you implement game ideas that require you to do something outside the bounds of your main game scene. Again I'm going to upload the video examples to get help so please feel free to download that and check it out. Very basic code but again. Play around with the viewport nodes and see how they behave. And check out their settings. Well that's all I have for you in this episode. Thank you so much for joining me. Thank you for clicking the Like button and thank you for clicking the Subscribe button. If you have any questions or comments please feel free to leave them in the comments Section down below. I look forward to seeing you in the next episode. Have. An amazing day.