How the Hex-A-Gone game is created

In this tutorial, you will learn how the Hex-A-Gone game is created and configured. In the Hex-A-Gone game, players compete on a series of hexagonal tiles that fall away as they step on them, with the objective of being the last player standing on the remaining tiles. Players must jump, dive, and strategically move around the board to avoid falling through the gaps and being eliminated.

Note that this tutorial does not aim to walk you through creating this game step by step. Instead, you will learn how the main part of the game is created.

Preparation

• Find the Hex-A-Gone template in YAHAHA Studio. This gameplay template is a completed game, but any adjustments and modifications are welcome.

  

• Community components, including:

  • Level_GameState
  • UI_GameState
  • Behavior_HoneyCellSpawn
  • Behavior_SpawnableObjectMarker
  • Behavior_HoneycombCellConfig
  • Level_HoneycombManager
  • UI_Honeycomb
  • UI_CustomRankPanel

Setting the spawn points

In the Hex-A-Gone game, players will be spawned on honeycomb cells.

1. Duplicate and position hexagonal cells above the honeycomb.

   

2. Create an empty object, name it "Spawn point", and make it a spawn point by adding the Respawn Point component and ticking the box of Spawn point.

   

3. Duplicate the spawn points and place them on the honeycomb cells respectively.

   

Adding and configuring states of the single game

1. In Objects Explorer, create an empty object named "GameManager".

2. Attach Level_GameState to GameManager and set game states using this Component. Before you set game states, read the document of Level_GameState to understand them.

   

3. In Settings Explorer, set the game mode to none. Level_GameState works when the game mode is none.

   

4. To provide UI for game states, attach the UI_GameState Component to GameManager.

Generating the honeycomb structure

1. Create an empty object and name it HoneycombCenter. This object marks the center of each honeycomb layer.
2. Attach the Behavior_HoneyCellSpawn Component to HoneycombCenter so it can generate honeycomb cells around the center.

3. To prepare the cell to construct the honeycomb, find a hexagonal honeycomb cell in Asset Libray, attach the Behavior_SpawnableObjectMarker Component to you, and fill in the name "cell".

   

4. Customize the shape of the honeycomb by adjusting the following properties of the Behavior_HoneyCellSpawn Component:

   • Play mode: Set it to Normal Floor.
   • Cell name: Fill in the name of the honeycomb cell to construct the honeycomb. Click Add Cell if you want to use more cells to generate the honeycomb structure.
   • Map length: Determines the length of the hexagonal side. Fill in 8 and the hexagonal side consists of 8 cells.
   • Layer number: Determines the number of the layers in the honeycomb.

Note that the honeycomb structure is generated when entering the Play mode and it disappears when you go back to the Edit mode.

Adjusting the colors of the honeycomb cells

1. Attach Behavior_HoneycombCellConfig to a honeycomb cell.

2. Adjust the appearance of the cell by configuring the Behavior_HoneycombCellConfig Component. You can choose the color we preset for you or customize one for yourself.

   

Adding the main gameplay logic

The main gameplay logic for the Hex-A-Gone game includes:

• When the game starts, players are spawned on the spawn layer above the honeycomb structure. Players won't fall to the honeycomb until the pre-game timer runs out.
• The game allows a minimum of 2 and a maximum of 12 players to participate.
• During gameplay, each honeycomb cell that a player occupies will disappear exactly one second after being stepped on. If a player is unable to move to a different cell before the disappearance of their current cell, they will fall to the layer below.
• If a player falls to the bottom layer, they are eliminated from the game. The game concludes when only one player remains standing on a honeycomb cell.

To implement the above logic:

1. To prepare the visual effect when a player steps on a honeycomb cell, find a VFX in Asset Library, place it in the scene, and attach Behavior_SpawnableObjectMarker to it.

   

2. To create a spawn layer, group all the spawn points you create and the default one and give it a name.

   

3. Attach the Level_HoneycombManager Component to GameManager and specify the vfxName and Spawn Layer in this Component.

4. vfxName is the name of the visual effect to be spawned when a player steps on a honeycomb cell.

5. Spawn Layer is the name of the spawn layer you just created in the previous step. The spawn layer is where players stand before the game starts.

   The Level_HoneycombManager Component implements other logic mentioned above.

6. Attach UI_Honeycomb to GameManager to provide the UIs related to the gameplay UIs.

Creating the observation deck

We will set an observation deck to respawn dead players. Players on this deck can view other players playing the game, while they are not able to participate in the game.

To create an observation deck:

1. Find a board or platform in Asset Library and place it in the scene.

2. Adjust its position and make sure it's neither too close to the honeycombs, nor too far. If the deck is positioned too closely, your players may just jump to the deck and forgo the honeycombs altogether. Conversely, if the deck is too far, players may find it difficult to view the game situation clearly.

3. Place the GameManager on the deck as it is where the players will be respawned after they die in the game.

Setting up a leaderboard

To track and display your players' performance in the game, you can set up a leaderboard for the Hex-A-Gone game. To set up a leaderboard:

1. Find and add the Leaderboard (Playtime) assembler from Asset Library.

   

2. Complete the leaderboard settings and click Assemble.

   

For more information on leaderboard settings using assemblers, see Leaderboard.

Alternatively, you can add a leaderboard using the UI_CustomRankPanel component and set the Rank mode to time.