Working on game 1 - Sliding puzzle

By now it was very apparent that what I'm doing is very, very difficult. before this module I had very little knowlege of GameMaker Studio 2, and it really showed in this. Learning a whole new engine as I'm building the game I am to be marked on, was stressful. Looking back, I should have used an engine I was more familiar with, but the recent events around the unity scandal had pushed me to use something else.

 

So, I was very fortunate to find an official tutorial on how to make a sliding puzzle game. I went through the tutorial and created the game, once it was working, I exported it as a package and added it to the main game. I used the assets provided by the tutorial when making the sliding puzzle, so now it was about replacing assets with my own, and create more art for the project. I needed clean, clear images that could translate into a sliding puzzle. I looked at multiple styles, one of the earliest sliding puzzles I played was on the GameBoy, with Pokemon Crystal. With that inspiration in mind, I looked at perhaps re-creating that same style and feel in my own design.

Pokemon ruins of alph Kabuto puzzle (1996)

Early design ideas had one big issue: Some squares would innevitably end up blank. A new design was needed if the image was to be easy enough to figure out, but not so simple that it would have blank squares.

 

When starting the project, I assumed this would be fairly simple... Well, we all make mistakes. After a week of getting nowhere, I decided to check out the official tutorials and would you believe it? They had an example of a sliding puzzle game. So I downloaded the assets and started work. Some of these assets would stay in the game, mostly buttons, but I did make sure to replace the art at every point where I could.

 

Coding the sliding puzzle meant needing to make sure the pieces randomly swapped places at the start, and would allow the player to move a piece if clicked while near an empty square. I kept the //notes that were in the tutorial so I could go back and change things if needed without needing to find the tutorial again.

 

Spawning:

// This randomises our seed to make sure the
// puzzle is different every time
randomize();

_particle = part_system_create();

global.move_list = ds_list_create();

global.current_move = 0;

global.won = false;
global.won2 = false;
global.won3 = false;

global.tile_grid = ds_grid_create(grid_size, grid_size);

ds_grid_clear(global.tile_grid, undefined);

// We loop for as many times as there are tiles
// in the puzzle
for(var _i = 0; _i < ((grid_size*grid_size) -1); _i += 1) {
// We create the tile
var _tile = instance_create_layer(x, y, "Instances", obj_tile);

var _temp_sprite = tile_sprite;

// We assign it a sprite and use the frame
// to change which piece of the picture it is
with(_tile) {
sprite_index = _temp_sprite;
image_index = _i;
}

// This value calculates which column of the puzzle
// grid this tile should be in.
// e.g for i = 2 and grid_size = 3, 2 % 3 gives us the remainder of 2
// so the tile with index 2 (the 3rd tile) should be in the column
// with index 2 (the 3rd column).
var _grid_x = _i % grid_size;

// This value calculates which row of the puzzle
// grid this tile should be in.
// e.g for i = 2 and grid_size = 3, floor(2/3) gives us 0 so the
// tile with index 2 (the 3rd tile) should be in the row with
// index 0 (the 1st row).
var _grid_y = floor(_i / grid_size);

// Multiplying the sprite width by the grid position gives
// us the x screen position of the tile.
var _tile_x = _tile.sprite_width * _grid_x;

// Multiplying the sprite height by the grid position gives
// us the y screen position of the tile.
var tile_y = _tile.sprite_height * _grid_y;

with(_tile) {
x += _tile_x;
y += tile_y;
}

ds_grid_set(global.tile_grid, _grid_x, _grid_y, _tile);

with(_tile) {
grid_x = _grid_x;
grid_y = _grid_y;
}
}

// This loop will shuffle the puzzle by moving the tiles
// at random
for(var _i = 0; _i < 1000; _i += 1) {
var _temp_x = floor(random_range(0, grid_size - 1 + 1));

var _temp_y = floor(random_range(0, grid_size - 1 + 1));

var _chosen_tile = ds_grid_get(global.tile_grid, _temp_x, _temp_y);

if(_chosen_tile != undefined)
{
with(_chosen_tile) {
move_tile();
}
}
}

// If the music is not already playing, play the in game music
if (!audio_is_playing(music_ingame))
{
audio_play_sound(music_ingame, 0, 1);
}

 

The spawning code allowed for the sprites, which was one image cut into as many slices as needed for the grid, to be randomly placed on the grid, with one blank square. This allowed me to easily swap out the image on the sprite for something else and have it be sliced and placed on the grid without any coding.

 

Movement:

if(!instance_exists(obj_menu_exit) && !global.won)
{
var _moved = move_tile();

// We only want the following to happen if a tile
// actually moved
if(_moved)
{
audio_play_sound(sfx_move_piece, 0, 0);

global.moves += 1;

// We add the tile we just moved at the
// current point in our move list
ds_list_insert(global.move_list, global.current_move, self);

var _length = ds_list_size(global.move_list);

// We then want to remove all the tiles
// beyond this point from the move list , making
// this the latest move in the list.
for(var _i = _length - 1; _i > global.current_move; _i -= 1) {
if(ds_list_size(global.move_list) > _i)
ds_list_delete(global.move_list, _i);
}

global.current_move += 1;

obj_button_undo.image_index = 0;
obj_button_redo.image_index = 1;
}

else
{
audio_play_sound(sfx_invalid, 0, 0);
}
}

 

The code above allowed for the left mouse click to make tiles slide into position if a slot is available, this could easily be used on every level and would not need additional code or to be duplicated for each level. With this code, the simple button codes to change rooms, and the main menu code which was very simple to do, I have a game I could easily add to without needing to code anything else. So in a way it was a simple game to code, I just did not know how at first.

Screenshots of my sliding puzzle game with placeholder images. The game currently only uses the front cover of my book, I will be changing it to show multiple different images. You have a difficulty selector, and winning a level gives you the option to quit, or play the next level which has more slides. At the moment the game has a 3x3 grid, a 4x4 grid and a 5x5 grid. I believe going any further will make it too difficult for children, and too tedious for anyone else.

It took some time but after finishing the other games, I decided to go back to this one and finish some pieces for the sliding puzzle. This is my favourite one, with plenty of colour and every square being easily identifiable. I didn't want it to be too detailed or cluttered as I was concerned it would make the puzzle too difficult for younger players, so I kept the shading simple and the colours unique enough to be spotted even when seperated.