Godot 3.2.3 Grid Movement Part 2/2

I converted this Godot Grid Movement Video Tutorial into textual tutorial because I feel it is much easier to follow textual tutorial.

This is Part 2, you can view Part 1 here.

What You Will Learn From This Godot Grid Movement Tutorial

  1. How to create player sprite that move in 2D grid
  2. Create Collision walls where the player sprite cannot pass through the wall

Part 2 – Player Sprite Moves within Walls

Create Walls

i. Add child node -> Add TileMap.
ii. Set Tile Set from empty to new Tile Set.
iii. Double click on new Tile Set to change to Resource tab.
iv. Click “+” add texture (add bottom left)
v. Use the default Godot icon as the wall.
vi. Make the Icon editor window bigger by clicking on the up arrow (bottom right)
vii. Zoom in the tile set by clicking “+” at top right.
viii. Click “New Single Tile” and click grid icon to enable the grid.
ix. Select the icon if selected yellow line will appear.
x. Change color to black by clicking the “Modulate”
xi. Change RGB color to 000000

godot grid movement - create tilemap
godot grid movement – create tilemap
godot grid movement - set tile set to new tile set
godot grid movement – set tile set to new tile set
godot grid movement - double click on new tile set to set the resources
godot grid movement – double click on new tile set to set the resources
godot grid movement - add the resource
godot grid movement – add the resource
godot grid movement - use default godot icon
godot grid movement – use default godot icon
godot grid movement - click up arrow bottom rigth to make the icon editor bigger
godot grid movement – click up arrow bottom rigth to make the icon editor bigger
godot grid movement - zoom in the icon
godot grid movement – zoom in the icon
godot grid movement - click new single tile and enable the grid
godot grid movement – click new single tile and enable the grid
godot grid movement - grid enabled
godot grid movement – grid enabled
godot grid movement - change color by clicking on modulate
godot grid movement – change color by clicking on modulate
godot grid movement - change color to black where RGB 000000
godot grid movement – change color to black where RGB 000000

Add Collision to The Wall Tile Set

i. Ensure tile set is still selected (yellow outline)
ii.Click “Collision”
iii. Click the square icon
iv. The select the region within the yellow line.
v. Icon color will change to turquoise if collision is properly set.

godot grid movement - add collision square
godot grid movement – add collision square

Create The Maze

i. Click on player sprite (to go back to player scene)
ii. You will see the TileMap is black now.
iii. Check the TileMap is 64×64
iv. Click on TileMap and start populating the walls to create your own maze.

godot grid movement - wall is black
godot grid movement – wall is black
godot grid movement - ensure size is 64x64
godot grid movement – ensure size is 64×64
godot grid movement - create maze
godot grid movement – create maze

Add RayCast2D to Player Sprite

i. Right click on Player sprite -> Add child node
ii. Select RayCast2D
iii. Set the RayCast2D
– Position x = 32, y = 32 (to make centre (red plus sign))
– Enable is on
– Cast to y = 32 (to make the down blue arrow to just at the edge of the player sprite)

godot grid movement - create raycast2D
godot grid movement – create raycast2D
godot grid movement - set the raycast2D
godot grid movement – set the raycast2D

Update the Player Script

i. Click on the script icon near Player sprite
ii. Update the script based on the code below.
iii. Ensure script indentation is correct.

godot grid movement - open script
godot grid movement – open script
extends Sprite

var speed = 256
var tile_size = 64

var last_position = Vector2()
var target_position = Vector2()
var movedir = Vector2()

onready var ray = $RayCast2D

func _ready():
	position = position.snapped(Vector2(tile_size, tile_size))
	last_position = position
	target_position = position
	

func _process(delta):
	#MOVEMENT
	if ray.is_colliding():
		position = last_position
		target_position = last_position
	
	else:
		position += speed * movedir * delta
		
		if position.distance_to(last_position) >= tile_size - speed * delta:
			position = target_position
			
	
	#DELTA
	if position == target_position:
		get_movedir()
		last_position = position
		target_position += movedir*tile_size
		

func get_movedir():
	var LEFT = Input.is_action_pressed('ui_left')
	var RIGHT = Input.is_action_pressed('ui_right')
	var UP = Input.is_action_pressed('ui_up')
	var DOWN = Input.is_action_pressed('ui_down')
	
	movedir.x = -int(LEFT) + int(RIGHT)
	movedir.y = -int(UP) + int(DOWN)
	
	if movedir.x != 0 && movedir.y != 0:
		movedir = Vector2.ZERO
		
	if movedir != Vector2.ZERO:
		ray.cast_to = movedir * tile_size / 2

godot grid movemen t- update script with raycast2d p1
godot grid movemen t- update script with raycast2d p1
godot grid movemen t- update script with raycast2d p2
godot grid movemen t- update script with raycast2d p2

Run The Game

i. Click Play icon (top right)
ii. Now you can see the player sprite can’t pass through the walls.