itch.io is community of indie game creators and players

Devlogs

Basic Level Blocking

Stellar Flapper
A browser game made in HTML5

Basic Level Blocking

This is the second progress DevLog for my game, with a focus on implementing the level/scene .

Stellar Flapper only has one main level/scene and that is the whole game. To implement this a background and a foreground had to be made. Similar to how the player was made, the spritesheet for the original Flappy Bird was used and edited. Only the foreground was changed from the spritesheet and implemented, the background is complete original art with inspirations from Astroneer featuring a planet that looks similar to what was covered in the Game Concept DevLog. 

The following GIF shows the player flapping through the background:

To make this a background, the background image had to be imported into Unity and dragged into the scene to have the image there. The background then had to be resized to fit the game size and then layered in the Unity inspector window to be below every other layer so it can actually be a background. The layer that I used is --1 to ensure it is below all the rest of the game objects. 

The foreground was implemented into Unity the same way as the background, however it required some tweaks. To make it span across the bottom of the screen without the sprite stretching out, setting it's tile mode to continuous makes it so it duplicates the sprite along the bottom of the screen without stretching it. Once the size was ideal, it needed a BoxCollider2D tightly wrapped around the sprite so it has an interactable surface.

We also do not want the player to be able to fly out of the camera view. As the movement is only up and down, an invisible BoxCollider2D was able to be used for the top boundaries ensuring the player cannot fly away.  The original Flappy Bird had the foreground be animated so then it looked like the player was actually moving through the world. This was replicated by adding an animator to the foreground and keyframes were added that animated the position of the object. By dragging the foreground towards the player makes it so the animation looks like the ground is moving. 

The following GIF shows the player flapping and interacting with the boundaries:

To make the level into an actual level, the pipes had to be implemented. This was done by adding the two different pipe sprites, giving them both a BoxCollider2D, they were both aligned on the X axis and given different Y axis so the gap was made. Then the two objects had to have a parent object, called PipeSpawner. The two seperate sprites were dragged onto the PipeSpawner so they become children of the object. This made it so then when the pipes are 'spawned' they spawn where the parent is rather then independently of each other.  A script which handled the movement of the pipes, and the spawning of the pipes was then needed. This was then attached to the parent object.

The following gif shows the pipes incoming:

Currently, the pipes do not actually interact with the player in a way that makes the game a game. For the purpose of this DevLog we did not add this. We will fix this in the next DevLog Enemies and Interaction. 

References:

Version 1.2 Flappy Bird (2026). Spriters-Resource.com. https://www.spriters-resource.com/mobile/flappybird/asset/59894/

The Game Dev Cave (2022). YouTube. 

Used for randomness of the pipe spawns.  (18:13). 

‌AI was not used in any form while making this devlog. 

Files

  • Build V03.05.26 LVLBLOCK.zip 12 MB
    96 days ago
Leave a comment