8-Bit Warrior Games + Design + Tutorials + Random

[Game Maker] Grid Movement -PART 2- Collision Detection

Accompanying video tutorial. Suggested to watch in fullscreen at quality of 480p or higher:

NOTES
***
If you have not already done so, I highly suggest going through Part 1 of this tutorial series as what follows will be based upon its existing code. Links to other lessons can be found here:
Part 1: The Basics
Part 3: Character Animation

An editable gmk for this lesson can be downloaded here: Part 2 Download
***

1) Create a new object, naming it obj_grid

2) Create a new object, naming it obj_block

3) Assign obj_block a 32x32 sprite

Our obj_grid instance is going to manage our grid's collision information. It will initialize and hold a 2-dimensional array for storing locational information in our rooms. We will use the number 0 to represent an empty location, and the number 1 to represent a wall

4) Inside obj_grid, Add Event -> Create , then add a piece of code  containing:

var i, j; // Not required but helps speed up 'for loop'

// Use the room's height and width divided by grid size (32) to
// initialize grid with 0
for (i = 0; i <= (room_width div 32); i += 1)
{
   for (j = 0; j <= (room_height div 32); j += 1)
   {
      cells[i,j] = 0;
   }
}

// This 'with()' statement will cycle through all obj_block instances
// within our rooms and use their relative x/y properties
with(obj_block)
{
   // Use block's x/y divided by grid size to set relative location
   // in cells[x,y] array to 1
   other.cells[x div 32, y div 32] = 1; // 'other' refers to obj_grid

   // For performance, we can remove the instance
   instance_destroy();
}

Now we are going to add some conditionals to our keyboard_check() blocks from part 1 to see if the corresponding direction next to our player is free. The code to be added will be marked by the comments '// <- ADD'

5) Inside obj_player -> Step  -> piece of code , modify to match:

if (isMoving == false)
{
    if (keyboard_check(vk_right))
    {
        if (obj_grid.cells[(x div 32) + 1, y div 32] == 0) // <- ADD
        {
            isMoving = true;
            moveTimer = gridSize;
            speedX = moveSpeed;
            speedY = 0;
        }
    }

    if (keyboard_check(vk_up))
    {
        if (obj_grid.cells[x div 32, (y div 32) - 1] == 0) // <- ADD
        {
            isMoving = true;
            moveTimer = gridSize;
            speedX = 0;
            speedY = -moveSpeed;
        }
    }

    if (keyboard_check(vk_left))
    {
        if (obj_grid.cells[(x div 32) - 1, y div 32] == 0) // <- ADD
        {
            isMoving = true;
            moveTimer = gridSize;
            speedX = -moveSpeed;
            speedY = 0;
        }
    }

    if (keyboard_check(vk_down))
    {
        if (obj_grid.cells[x div 32, (y div 32) + 1] == 0) // <- ADD
        {
            isMoving = true;
            moveTimer = gridSize;
            speedX = 0;
            speedY = moveSpeed;
        }
    }
} 

With this work done, we can now set up our room with walls to run into. Before doing so, make sure you have a 32x32 background tile to represent as a wall.

6) Go ahead and add the wall tiles to our test room, anywhere you like, making sure to use a 32x32 grid size in the room editor's settings.

7) Place obj_block instances on top of the tiles you just placed

8) After selecting the room's 'Settings' tab near the top, find and click the button titled 'Creation code'. Once doing so, add this code:

instance_create(0,0,obj_grid);


There! Making sure you have obj_player in the room, go ahead and run your level. Your player should now properly detect the walls you have set out. Notice that the actual wall instances are removed, and only the more efficient background tiles remain.

Again, feel free to contact me with any comments or questions.
Happy coding!