Open Dev Kit Documentation :: Demo - Shape Stacker

The Shape Stacker demo is a 2D game about stacking randomly generated geometric shapes (squares and circles) on a platform, built using OpenGL for rendering and Box2D Physics for physics. Randomized sizes, colors, and oscillating movement patterns are used to make gameplay more dynamic. The game ends when a shape falls below a certain height, with the final score reflecting how quickly the player was able to stack as many shapes as possible.

How it Works

• Game Initialization
  Upon starting the game, the Start function is triggered. This initializes the camera view based on the Window's height dimension (UpdateCamera) and spawns the first shape using the SpawnShape function.
• Shape Spawning Mechanics
  The SpawnShape function selects a shape (either a square or circle) randomly. Shapes are resized (uniformly if a circle, to retain a 1:1 ratio), given a random color, and their orientation is set at random. The shape then starts oscillating horizontally across the platform, guided by a placement Timer (gPlacementTimer). As the Timer runs, the total score gradually decreases, making the gameplay more engaging this way.
• Player Controls
  Interaction with the game is done by pressing the left mouse button. A script located in the Pressed Event of the Keybinds Resource is then executed. If a shape is currently active and oscillating, pressing the button makes it drop. The shape's Physics Type changes to "Dynamic," enabling gravity and collision physics. Dropping a shape successfully onto the platform increases the score.
• Tick System and Game Over
  The PositionTick function runs periodically (every 15ms) to monitor for game-over conditions. If any shape's Y-position drops below a predefined threshold, it is considered to have fallen off the platform, the EndGame function is called, which then transitions to the Game Over Scene and the game ends.

Adding a New Shape

Follow these steps to add a new shape to the demo:

1. Create the New Shape:
   1. Open Tools > Resources.
   2. Double-click the Shapes Sprite Resource.
   3. Copy the square tile and paste it over to the blank tile beside the circle, as we'll be using that as a base for the new shape.
   4. Click on the imported square image to select it.
   5. Click anywhere on the sequencer to place it. You can confirm you have added it by seeing a new entry on the timeline sequencer located right below the sprite sequencer.
   6. Click on the newly placed square, which should be right on top of where the first one is.
   7. On the Properties panel find the box beside Orientation.
   8. Click and drag the arrow 2 notches either to the left or right to form the new shape: an octagon.
   9. Now click the Add Box Collision icon ("Shared with whole Tile") to add a new collision box to the sequencer.
   10. Set its Size to the same as the other collision box.
   11. Line it up with the other box.
   12. Rotate it like you did with the Sprite, except using the arrow beside Axis Orientation this time.
2. Set up the New Shape:
   1. Open Tools > Globals / API and select the gDefaultShapes variable.
   2. Since there is now a new shape, we will increase the Default Object count by clicking + once beside Default Object
   3. Head down until you find the new entry (labeled "[3]") and add a new layer to it by clicking + once beside Layers.
   4. Set the new Sprite entry to Shapes, since that's the name of the Sprite Resource the new shape is located in.
   5. If the new shape was created on the 3rd tile, type 2 as a value for Tile. The count starts from 0, therefore the 3rd tile's # would be 2.
   6. Set the Placement Score value to any number similar to the other shapes above, and when configuring its Min Scale, make sure the first two values (X & Y) are the same as we want uniform scaling for the octagon to properly use 1:1 scaling. Ignore the 3rd value (Z) since the project does not make use of the 3rd dimension.
   7. Lastly, be sure to check Square Scaling.
3. Increase Platform Size:
   1. Although this is not a necessary step, it would still be a good idea to make the platform bigger so as to accommodate for the octagon being a more volatile shape.
   2. Load the GameScene Scene, select the Floor actor and in the Properties panel set its Scale to something like 6.
   3. With the platform being wider, it would now be a good idea to increase the horizontal oscillating distance when spawning a shape. Open Tools > Globals / API, select the gPlacementSpread variable and set its Default value to about 300. Depending on what size you gave the platform you may need to experiment somewhat with values to find something that works.
4. Test the Game:
   Run the project to verify the new shape spawns and works as expected.

If you think anything is missing, please feel free to: submit documentation feedback on this page