Shadows Game – Introduction to Interactive Media

Game concept

Shadows is a pathfinding game, where your goal is to find a treasure in an ancient labyrinth. The problem with that is, that no one was there for hundreds of years and it’s buried deep underground so there is no light in there. Surrounded by shadows you enter the labyrinth hoping to find its treasure.

Mechanics

The most important part of the game is the light mechanics. I decided that it would be super fun to create an actual labyrinth game, where you do not see the whole board from the very beginning and just navigate through it. In my game you will have to actually explore the labyrinth, memorize the paths and hopefully find the treasure.

Graphics

I used some tile sets for DnD found on the internet to create the labyrinth board.

Then I added the light layer and created the light source at my mouse coordinates:

Tomorrow I’m going to work on my character, the intro menu as well as the labyrinth hit boxes. Probably they will be the hardest part of the project after the lighting, but I’m sure I’ll figure something out.

Update

Having finished the game I might say that creating it was easier than I expected. The issue that I was concerned by the most was creating the hitboxes. Having such a complicated map with all the bending corridors would be horrendous to hardcode (as almost everything is lol).

In order to solve the hitbox issue I made use of the pixels array. Before the game begins an extra graphic is loaded, where all the pathways are white and all the rest is black. That simple graphic is then stored in pixels. During the game the only thing to do to check for hitboxes is simply checking the color value on the corresponding x,y in the presaved pixels array. If it is not black, the character can move. If it’s black it means they are in front of a wall.

Here is the graphic I prepared for the hitboxes function:

By this small chunk of code I managed to check the hitboxes for the whole map. It compares the x and y coordinates of the character with the corresponding color in the preloaded pixels array (it remains loaded with the above image). if the corresponding pixel is black, the character doesn’t change its position, as only when the pixel is white, dx and dy are added to its location correspondingly. I also took into account the dimensions of the character itself and the perspective of the 2.5D graphics. ScaleX and scaleY variables are responsible for proper scaling to lower screen sizes.

void didTouchHitbox() {
  if ((pixels[x+(y+1)*width-int(scaleX*20)]!=color(255, 255, 255) || pixels[x+int(y+20*scaleY)*width-int(scaleX*20)]!=color(255, 255, 255)) && dir==2) {}
  else if ((pixels[x+(y+1)*width+int(scaleX*20)]!=color(255, 255, 255) || pixels[x+int(y+20*scaleY)*width+int(scaleX*20)]!=color(255, 255, 255)) && dir==3) {}
  else if ((pixels[x+y*width-int(5*scaleX)]!=color(255, 255, 255) || pixels[x+y*width+int(5*scaleX)]!=color(255, 255, 255)) && dir==1) {}
  else if ((pixels[x+(y+int(30*scaleY))*width-int(5*scaleX)]!=color(255, 255, 255) || pixels[x+(y+int(30*scaleY))*width+int(5*scaleX)]!=color(255, 255, 255)) && dir==0) {}
  else {
    x+=dx;
    y+=dy;
  }
}

I do not want to post more graphics not to spoil the labyrinth for you guys, so I will just leave a screen from the menu 🙂