Subscribe to GameFromScratch on YouTube Support GameFromScratch on Patreon
18. September 2017

Click here for the previous tutorial section.

Now it’s time to create our bowling lane. If you are a Patreon, the resources we are using are located in the GFS Dropbox in the GameKits\Bowling folder. Godot works a bit different from other game engines in that complex models are imported as scenes. Simply select Import->Scene

clip_image002

At a minimum select the DAE (COLLADA) file location, then the location within your project to import into, then finally click import.

clip_image004

One thing that is very important to realize here is this process will import the entire scene from the model file. This includes lights, cameras, etc… so be sure when you export to DAE, you only export the items you want imported. Of course, you’ve got the option of deleting unneeded items in Godot if needed.

It is possible that the import process doesn’t always bring in the textures, so we will cover doing this part manually. If your model imported fully textured, you can skip ahead and ignore this section. First import that texture object into your scene. The bowling lane has two textures, a diffuse (color) and normal (depth) map. Select Import->Texture.

clip_image006

Then select the texture, where to import it and finally hit the import button.

clip_image008

Repeat this process for each texture file you need to import. Now we need to define a material on our BowlingLane node. Select the BowlingLane, locate MeshInstance->Material->0, click the drop down and select New FixedMaterial.

clip_image010

This will create a new material. Drop it down again and this time select Edit.

clip_image012

Now locate Diffuse, drop down the pull down and select Load.

clip_image014

Select your newly imported Diffuse texture. Now repeat the process for Normal

clip_image016

You can control the strength of the normal map using the Normal Depth setting:

clip_image018

Your Bowling Lane should now look a lot more like a bowling lane than before!

clip_image020

Now we need to add some Physics nodes to our lane. In the Scene graph, select the BowlingLane mesh instance, right click and select Add Child Node.

clip_image022

Select StaticBody.

clip_image024

This will make our lane part of the physics simulation, but as the name suggests, it wont be affected by it. So basically, a static body can be hit, but nothing will happen to it. Finally, we need to define the geometry of physics object. Right click your newly created StaticBody, select Add Child Node Again and this time select CollisionShape.

clip_image026

With the newly created CollisionShape selected, locate Shape, drop down and select New BoxShape.

clip_image028

Now select the Shape drop down again and select Edit

clip_image030

Now modify the Extents until it tightly wraps the underlying shape.

clip_image032

We are now done with the lane. Save the scene file and close it.

Creating the Bowling Pin

Now we repeat the exact same process, except this time with our bowling pin. The process is actually identical, except instead of creating a StaticBody, we create a PhysicsBody. However, in this case the RigidBody needs to be the parent of the Pin. Don’t worry, its pretty simple. Be sure to make the RigidBody node a child of the Root “BowlingPin” node, then drag the Pin node onto the newly created RigidBody. So we can identify the node in code later, also rename it from RigidBody to PinRigidBody. The end result should look like:

clip_image034

In the properties of our RigidBody, we also want to set Can Sleep off and Contact Monitor on, like so:

clip_image036

Creating our Bowling Alley

Now it’s time to put it all together. Go back to GameScene in the editor and we need to create some instances of our lane and pins. Simply locate the lane in the assets view, right click and select Instance.

clip_image038

Now repeat the process for the bowling pin. Your scene should now look something like:

clip_image040

Next reposition the bowling pin and so it’s above the lane and down a bit. Now it’s the moment of truth… are you a 5 pin or 10 pin fan? Either way, duplicate the first pin. Locate it in the Scene panel, right click and select duplicate ( or select and hit Ctrl + D ).

clip_image042

Then move the pin into position and repeat the process. If you want, now is your chance to create 7 pin bowling! Personally, I went with 5, and it looks like this:

clip_image044

5 pin for life! We are certainly getting there! It’s at least starting to feel like a bowling game. It would be a good time to check out our work, but press play and you’ll notice a problem… nothing shows up! That’s because we need to create a camera! With the root node selected, create a new node and select Camera:

clip_image046

Now position the camera in your scene using the transform manipulator. With a camera node selected, you can hit the Preview button at any time to, well, preview the camera.

clip_image048

Now when we press play…

clip_image050

Hmm, a bit dark in here isn’t it? Well that makes sense, we have no lights in our scene. We have two options here… we can add some lights or we can add ambient lighting. Getting the later right is probably a bit easier, so lets take that approach. With the camera selected, located the Environment setting, drop it down and select New Environment

clip_image052

Now drop it down again, this time selecting Edit. Now turn Ambient lighting on and select a color close to white.

clip_image054

One thing you might find is that the results are really blurry and undesirable. There are two ways to address this… first, select the texture, locate the flags propert and turn off MipMap and Filtering:

clip_image056

Finally, in the mesh of an imported scene, you can turn off baked lighting:

clip_image058

Both of these steps are completely optional. At this point our game should look like:

clip_image060

And our scene should look like:

clip_image062

Now all we need is a ball!  Click here for the next tutorial section.

Programming


18. September 2017

Click here for the previous section in this tutorial.

Time for the exact same process as pin and lane, except this time rename the RigidBody to BowlingBallRigidBody. The major differences are we used a SphereShape for our collision shape.

clip_image002

Plus, in physics, in addition to setting Sleep off, and Contact Listener on, we increase the Mass to 3. The value doesn’t really matter, this just means our bowling ball is 3x heavier than the pins.

clip_image004

Just for now lets get things rolling (ugh… the puns) and give our ball some initial velocity, so when we play our game, things happen. We will override this in a bit when we implement user control. Simply set the velocity to -15 or so on the Z axis:

clip_image006

Now when you play the game, if you’ve done everything correctly, the ball should roll down the lane and hit the pins.

clip_image008

Almost there! Now let’s add some audio that happens when the ball hits a pin. It’s the exact same process as back when we created our title screen, so I’m not going to go over it again. Just be sure to add the SamplePlayer to the bowling ball like so:

clip_image010

Then go in and create a sample library and add our bowling ball sound effect, in my case Hit.wav.

Now it’s time to do a bit of coding. The BowlingBall is going to be the heart of our game, so let’s add the script to it. Using the same process as back in the title screen, select the BowlingBall root node and attach a new script. Now select the child BowlingBallRigidBody node, switch to the Node tab, select body_enter and hit the Connect button at the bottom right hand corner.

clip_image012

Another window will pop up asking you which node to connect to. Select our BowlingBall node then click Connect.

clip_image014

This will open up the script editor and create a new function for us. Inside the function enter the following code:

func _on_BowlingBall_body_enter( body ):
	var name = body.get_name()
	if name == "PinBody":
		self.get_node("SamplePlayer").play("Hit")

Now when you play the scene, when the bowling ball hits the pins, audio should play!

Handling User Input

** Before you continue… go back to the bowling ball and remove the Linear velocity we added earlier! We are going to handle that manually from this point on! **

Next we need to give the user some control over the bowling ball. First off, we need to create an Input map. We are going to use left and right arrows for moving the ball, well… left and right. Additionally, the space bar will be used to throw the ball.

Go to the Scene -> Project Settings Menu, then switch to the Input Map tab. Now we are going to add an entry. Simply enter LEFT in the text box, then click Add:

clip_image016

Click the + Icon, then select Key

clip_image018

When prompted, press the Left arrow key

clip_image020

Now repeat this process for Right and Space. You can of course map multiple keys to a single ID, so if you wanted LEFT to also trigger when the A key is pressed, or on Left mouse click, you can. Now lets wire our script up to handle input. Simply add or replace the following in your BowlingBall script:

func _ready():
	set_process_input(true)

func _input(event):
	if(event.is_action_released("LEFT")):
		self.get_node("BowlingBallRigidBody").apply_impulse(Vector3(0,0,0),Vector3(-1,0,0))

	if(event.is_action_released("RIGHT")):
		self.get_node("BowlingBallRigidBody").apply_impulse(Vector3(0,0,0),Vector3(1,0,0))
		
	if(event.is_action_released("SPACE")):
		self.get_node("BowlingBallRigidBody").apply_impulse(Vector3(0,0,0),Vector3(0,0,-35))

Great, we can now control our ball, have collisions with pins and audio plays. We are 99% of the way toward a finished game… only one catch… you can only play once… that’s a bit of an issue no? Let’s do a quick and direct reset by reloading the scene when the user presses the R key. Add RESET to the InputMap and append the following code to your _input() function:

	if(event.is_action_released("RESET")):
		get_tree().reload_current_scene()

And our final complete code should look like:

extends Spatial

func _ready():
	set_process_input(true)
	set_process(true)

func _input(event):
	if(event.is_action_released("LEFT")):
		self.get_node("BowlingBallRigidBody").apply_impulse(Vector3(0,0,0),Vector3(-1,0,0))

	if(event.is_action_released("RIGHT")):
		self.get_node("BowlingBallRigidBody").apply_impulse(Vector3(0,0,0),Vector3(1,0,0))
		
	if(event.is_action_released("SPACE")):
		self.get_node("BowlingBallRigidBody").apply_impulse(Vector3(0,0,0),Vector3(0,0,-35))

	if(event.is_action_released("RESET")):
		get_tree().reload_current_scene()

		
func _on_BowlingBallRigidBody_body_enter( body ):
	var name = body.get_name()
	if name == "PinRigidBody":
		self.get_node("SamplePlayer").play("Hit")


And all done, one complete if primitive bowling game!  Once again, here is the video version.

Programming


7. August 2017


With the upcoming release of Godot 3.0, Visual Programming is now officially part of the game engine.  In this tutorial we are going to look at the basics of programming using the new Visual Programming interface.


To get started using Visual Programming, just like using GDScript or other options, you have to attach a script to an object in Godot, like so:

image


In the script creation dialog, you can now select the programming language to use:

image


It will now bring you to the following programming interface:

image


To get started, we need to implement one of the available Godot callbacks.  These are exactly the same as GDScript and represent various different functions that will be called over time by the game engine.  To get started, in the Members section, click the following icon:

image


The various different callback functions available for the selected object type are available:

image


The most commonly used callbacks are _process() which is called every pass through the game loop, _ready() which is called when the object has been created, _init() which is called to create the object (think constructor), and _input() which is called when input is received.  We are going to create an exceedingly simple example here that moves our sprite each from, so select _process.  Now you should see:

image


White arrows represent program flow.  Connections on the right represent output, while connections on the left represent input.  This is the entry point for our code and is going to be called each frame.  You can see we are passed a floating point value “delta” as a parameter.  Now we need to get a reference to our object, we use a “self” node for this.  You can locate notes via search:

g1


This gives us access to the Sprite object our script is attached.

image


Now click on the blue/green ball output from the Sprite and drag a connection out, selecting Get as the option:

g2


This will now give you access to all of the data of a sprite object and all other inherited classes:

image


Locate and select position, which is a Vector2 object.  Now lets create a variable we are going to use to define our move amount.  In the variables section, click +:

image


Now right click and select Edit Variable:

image


Select type as Vector2 and value of (1,0)

image

Finally click the variable name and rename it to moveBy.  Now drag our newly created variable onto the canvas:

image


Now we want to create an Add node and add our two vectors together, like so:

image


Now we use another Self (or the same one we created earlier) and this time do a Set and select position.  We now pass in the added Vector2 result, also we attach program flow from _process, like so:

image


This simple program will cause the sprite to move by 1 pixel per update.


Video Version

Programming


5. July 2017


There are a wealth of great add-ons for the Godot game engine, such as Add_Primitives, which adds several geometric primitives to the Godot editor, such as capsules, spheres and more.  This quick tutorial (including a video) goes step by step through the process of enabling an add-on in your Godot project.


First, you need to download the add-on you wish to enable, that or git clone it.  In this tutorial we are going to simply download it.  This link will download the add_primitives add-on zip.


Next, create a project.  Add-on’s are now located at the project level, not in the %APPDATA% folder.  In the project directory, create a folder called Addons.  In that folder, extract the zip file you downloaded earlier.  Next be sure to rename it from add_primitives-master to add_primitives, so the folder name matches the add-on name.  If you cloned using git, you wont have to perform this step.


Now load Godot.  Select the Scene Menu->Project Settings.

image


Switch to the Plugins tab

image


Next change Status to Active.

image


And done!  If you are using the Add_Primitives add-on from this example, you should now see an additional icon in the 3D view:

image


The Add-on will also be shown in your project view:

image


You can watch the above process in video form below.

Programming


29. June 2017


In this section of our Bowling with Game Engines series, we will be implementing our bowling game in Unity. The idea is straight forward, implement the same simple 3D game across a number of game engines.  The Unity game engine is a logical place to start, as it is perhaps the most popular game engine in use today.  We will go step by step through the process of creating our game, both in text as well as a video version available here.   I am not a regular Unity user, so please do keep in mind, a lot of what I am about to show may not be best practice!  All of the assets used in this tutorial are available for Patreons as part of the bowling game kit, along with project files and this document in PDF form.  Don’t worry, these aren’t needed to follow along.

Let’s jump in.  Fire up Unity and create a new project.  In this example I am using Unity 5.6.1, however any recent version should work.


First, let’s start by dragging all of our required assets into Unity.  Simply select all of the game assets you will be using (FBX models, textures, audio files) and drag and drop them from Explorer or Finder into the assets folder.  If you are using the Patreon assets, simply copy the contents of Raw Assets in the Unity project folder.

clip_image002[4]


Unity does an extremely good job of importing assets and you should require no additional steps.  We now have all of the assets we are going to need to create our game, let’s get started.




Creating the Title Screen


First, we are going to start by creating a simple title screen with some awful looping background music.  We will be using our default scene for the splash screen and later we will create another scene for our actual gameplay.  We start off by saving our untitled scene.  Simply select File->Save Scene As…

clip_image004[4]

I saved it as TitleScreen. You should now have a new item in your assets list:

clip_image006[4]


We now have a few setup tasks to take.  We are going to be showing our title image and this requires us to alter the Main Camera entity. In Hierarchy panel select Main Camera, then in Inspector we change Clear Flags to Don’t Clear.

clip_image008[4]

This causes our camera to no longer have perspective ( things aren’t drawn smaller the farther away they get from the camera ).  Generally an Orthographic camera is what you use when working in 2D in a 3D world. Setting Clear Flags to don’t clear simply causes the default skybox to not be drawn, we could have optionally defined a background clear colour if we preferred. 


Now in Hierarchy panel, click the Create button, select UI->Canvas.  Next, with the newly created Canvas selected, click Create again and this time select UI->Panel.  At this point we should have this hierarchy.

clip_image010[4]


Next we have to make a slight modification to our imported Titlescreen image.  Select the Tilescreen.png image file in the assets view, then in Inspector change Texture Type to Sprite (2D and UI).  Then scroll down in the Inspector and click the Apply button.

clip_image012[4] 


Next select Panel in the Hierarchy view, and drag our newly created Sprite over to the Source Image section in the Image (Script) section.

clip_image014[4]


If you press Play now, you should see your Title screen in the viewport.

clip_image016[4]


Now let’s add a looping music file to our title screen.  In the Hierarchy view, select the Canvas entity.  Then in inspector scroll down and click Add Component, then Audio->Audio Source.

clip_image018[4]


In the newly created Audio Source in Inspector, drag our imported audio file over to the audio clip section.  Down below, make sure Play on Awake is set and then tick the box next to Loop.

clip_image020[4]


Ok, we now have a title screen and a sound track playing!  Good work so far… now let’s add a simple script that changes scenes on click. Let’s create our script.  Right click in the Assets area, select Create-> C# Script.

clip_image022[4]


Name it PanelScript.cs.

clip_image024[4]


Double click the newly created script file and it will open in your editor of choice.  Now enter the following code:

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.SceneManagement;

public class PanelScript : MonoBehaviour {

   // Use this for initialization
   void Start () {
      
   }
   
   // Update is called once per frame
   void Update () {
        if (Input.GetMouseButtonUp(0))
            SceneManager.LoadScene("GameScene");
    }
}


Here we are simply checking every single pass through the game loop if the Left (0th) mouse button (or touch) is clicked, and if it is, we load the scene named “GameScene”.


Hmm… guess we should make a scene called GameScene now shouldn’t we?  Once again right click the Assets panel, then select Create->Scene.

clip_image026[4]


Rename the newly created Scene to GameScene.

clip_image028[4]


We are now done with our title screen scene.  Make sure you save.  Before we open our newly created GameScene, we have one last step to perform.  In the File menu, select Build Settings…, then select Add Open Scenes.

clip_image030[4]


Now double click our newly created GameScene to open it up.  If prompted to save, do so.  Now it’s time to create our game!


Click here to continue to part two!

Programming


GFS On YouTube

See More Tutorials on DevGa.me!

Month List