In this tutorial, we will be developing a simple RPG style tile grid for player movement. This tutorial builds off of some things used in the "How to Develop a Game for the TinyArcade" tutorial, so be sure to check it out! 

Materials

In this tutorial we will be using either a TinyArcade, TinyScreen+, or a TinyScreen. However, if using the TinyScreen, a TinyZero will have to be used in order to run the program due to its size.

Hardware:

• Micro USB Cable
• One of the following:
• TinyArcade
• TinyScreen+
• TinyScreen AND TinyZero

Software: 

• Arduino IDE
• Configure Arduino IDE for use with TinyScreen (tutorial)

Background:

• Be sure to have the Arduino IDE prepared for use with the TinyScreen! This must be done even if you are using a TinyArcade!
• This tutorial will include two different movement systems.
• A system in which the player moves around the map
• A system in which the map moves in relation to the player
• This tutorial can be built upon to create entire interactive maps for the player to explore.

Step 1: Assembly

Luckily, there is very little setup required for this tutorial. The TinyArcade and TinyScreen+ can simply be plugged into your computer with a Micro USB cable and they're all ready to program! If you're using a TinyScreen and TinyZero, the assembly is as simple as plugging the TinyScreen into the TinyZero and once again plugging in a Micro USB cable from the assembly to your computer.

Step 2: Software (Setup)

Make a mention of the libraries and the IDE that will be used. Describe or show screenshots of the library manager page to give users a picture of what they're looking for. 

If there might be issues in between Windows or MacOS, make mention of this. 

For the processor board used in this tutorial, show a picture of the selections made in the Tools tab so they can visually see the selections as this is one of the most common errors. 

Step 3: The Code!

Both of the mentioned movement systems are shown here. The primary focus of this tutorial lies within the first half of the drawBuffer() function where the background map grid is drawn, and in the movePlayer() function in the logic of player movement.

The RPGSprites.h file holds all of the different player sprites as well as a sample wall sprite to set up some walls. This header file also has a two dimensional array set up for the map.

Be sure to use the correct #define statements at the beginning depending on what hardware you're using. Simply comment out the ones you don't need.

System Which Moves the Player:

System Which Moves the Background:

Note that there are several constants defined globally within both files. These variables are used in several places throughout the code. However, the main constants are xTileSize and yTileSize which hold the value of 16, along with the colors defined in the TinyScreen.h library.

If you take a look at the movePlayer() function, you'll notice a statement checking the testMap to see if the value at a specific coordinate is less than 70. What is going on here is dependent on the player's coordinate and the desired location. In this instance, all tiles with values 70 and above will be walls and those less than 70 will be able to be walked on. In the image below, the grid is visualized. Note that the positive Y direction is downwards and the positive X direction is to the right.

In this instance, the player is only capable of moving West or North. Let's look into what happens when the game receives some input. Suppose the player pressed the down button. In this case, the game would do the following check:

if (testMap[player.yMap + 1][player.xMap] < 70 && downButton && !moving)

The game checks the tile below the player to see if it is less than 70 (if it can be walked on). The expression changes slightly with each direction, as the tile looked at is different under each circumstance. Here, the game is checking at the player's current X-coordinate in the map and the Y-coordinate in the map below the player, which would be the player's Y-coordinate in the map plus one. Since this is not a valid movement location for the player, nothing happens. However, if the player tried to move West or North, the condition would be true and the target coordinates would be set accordingly and the player would move.

Contact Us

As always, if you have any questions or feedback, feel free to email us at info@tinycircuits.com.

Show us what you make by tagging @TinyCircuits on instagram, twitter, or facebook so we can feature it!

Thanks for making with us!