Big Space Rocks Tutorial

Part 3

In part 2 we scripted the movement actions for our player scene. One thing you'll notice is that if the player moves off the screen it disappears. It's actually still there just not displayed because it's position is not within the game view. Godot is still moving the player and adjusting its position behind the scenes. What we want is for the player to appear at the opposite side of the screen once it leaves the screen. This can be done easily by utilizing the "wrapf" function. Open up the "Player.gd" script we created in part 2 and go to the "_physics_process" function.

Add the following lines to the end of the function after we set the position.

	# Screen Wrap
	position.x = wrapf(position.x, 0, screen_size.x)
	position.y = wrapf(position.y, 0, screen_size.y)

This will toggle the x and y position values if they reach the border of the game view. Save the script and try running the game again. The player should now wrap around the screen.

Background

Let's make the background a little more interesting. Download the following image and put it in the "img" folder in our project.

We could just add a Sprite node as a child to our "Main" scene but I'd like to do something a little more interesting than a static image. I'd like to image to continually scroll forever. We can use the ParallaxBackground node to help us do this. We could add the node directly as a child of our Main node but instead let's make it its own scene. Add a new scene, click "Other Node", and search for "ParallaxBackground" node. Click "Create". Save the scene.

Add a child node of type "ParallaxLayer" and then select the "ParallaxLayer" node and add a child node of type "Sprite" to that node. The new scene should now look like this.

Select the "Sprite" node and drag the "seamless_stars.jpg" image from the FileSystem pane to the "Texture" property of the Inspector pane.

Also, as sprites default to centered over the upper left corner at position 0, 0, uncheck the "Centered" checkbox in the Inspector.

Save the scene and go back to our "Main" scene.

With the "Main" node selected in our "Main" scene either drag the "ParallaxBackground.tscn" from the FileSystem and drop on the "Main" node or click on the chain link icon next to the + icon above the "Main" node to add an instance to the "Main" node. It should now look like this.

Go ahead and click the "play" button or press F5.

We can see the new background but it does not fill the screen as the image is smaller than our display size.

Close the play window. Go back to the "ParallaxBackground" scene. We want to modify the scene and not the instance that is on the "Main" scene.

Select the root "ParallaxBackground" node and click the "Add Script" icon. In the script window add the following code.

extends ParallaxBackground

export var scroll_speed = 100.0

func _process(delta):
	scroll_offset.x += scroll_speed * delta
	scroll_offset.y += scroll_speed * delta

We add a variable to control the speed of the scrolling background and then during the "_process" function we move the background on both the x and y axis so that it scrolls diagonally towards the lower right corner.

If we run it now we can see it scroll but it still does not fill the entire background. We could try changing the scale property of the Sprite node but then the stars may not look as good if scaled up. What we want is for the image to mirror itself so that it repeats as it scrolls. We need to do a couple of things for this to work. First, select the "Sprite" child node and find the "Region" section in the Inspector pane. Click the "Enable" checkbox and then set the width and height to 1280. The original image is 640 x 640 but we're telling Godot we want to take 1280 x 1280 of the image. Since the image doesn't have data past the 640x640 boundary we get these weird looking lines to the right and bottom of the image as it tries to use that region that doesn't exist.

To fix this we need to go back to the original image and change a property. In the FileSystem pane select the "seamless_stars.jpg" item under our "img" folder. In the "Scene" pane above switch to the "Import" tab. Under the "Flags" section change "Repeat" to "Enabled". Click the "Reimport" button. Can switch back to the "Scene" tab. You'll notice now in the Scene view that the stars background now looks correct.

One last thing, select the ParallaxLayer node in the ParallaxBackground scene. In the Inspector set the "Mirroring" properties to 640 x 640.

Run the game again and now everything should look correct.

In the next part we'll add the ability for the player to shoot lasers. Stay tuned.