borntofrappe / game-development

Repository for an aspiring game developer, starting from CS50's Intro to Game Development and creating interactive demos. Lots and lots of demos.
10 stars 1 forks source link

Practice game: <i>Excavation</i> #116

Closed borntofrappe closed 3 years ago

borntofrappe commented 3 years ago

Pokemon Diamont and Pearl introduce the underground, where the trainer explores an area hidden below the region. Try to recreate the minigame in which the player digs for fossils with a pick axe or a hammer.

Consider the entry for serebii.net and the paragraph titled Excavation as a reference.

borntofrappe commented 3 years ago

This is not meant to introduce the project, but I designed the spritesheet for the project with GIMP.

excavation

The right half of the picture describes the colors used in the art. I repeated the same hue for the darkest texture and the outline of the gems. For the tools, the pickaxe and hammer, the outline is pure white, #ffffff, to separate the image from the content below.

borntofrappe commented 3 years ago

The push library should help to scale the assets and preserve the pixelated look.

borntofrappe commented 3 years ago

Ultimately I decided to prioritize this game over night driver. in update 0, I set up the game, texture and quads.

Excavation 1.

The visual helps to confirm the quality of the spritesheet, even with a random pattern.

borntofrappe commented 3 years ago

Update 1: created two separate demos to tackle the biggest challenges behind the game:

  1. how to populate a grid with a series of random, but connected values

    Prep - Noise Field

  2. how to position gems of different sizes without overlap

    Prep - Gems

The logic of the first demo is already able to produce a rather pleasing result in the sequence of tiles.

Excavation Textures

borntofrappe commented 3 years ago

Following a few demos in the prep folder I took a step back to re-assess the scope and overall design of the game.

Title State

The player is immediately introduced to the grid of tiles by having a particular configuration render out of the string 'Dig !'.

title-state

Play State

The player selects a tool on the right half of the screen, by clicking between the two available options. With the chosen hammer or pickaxe it is then necessary to dig the interactive grid on the left to find the desired gems. Above this scene, a progress bar highlights the number of times the player has dug the grid.

play-state

State Transition

Between states, it would be nice to have a circle expanding and growing to first hide the existing content and then reveal the new visuals. Consider a state stack (from 07 Pokemon) and Love2D stencil to implement the feature.

GUI

Before the play state it is necessary to describe the number of gems hidden in the grid. Following the game then, as the player either digs every gem or fills the progress bar, it is necessary to relate a congratulatory or failing remark. Consider the text box GUI (from 07 Pokemon) to provide the text in sequence.

borntofrappe commented 3 years ago

This is likely the second to last update, as I finally managed to get some traction and implement most of the game's logic. The title state recreates the grid starting from a string of hard coded characters.

Excavation Title State

The transition state is implemented considering the state stack and stencil feature. Here the title state is about to be replaced by the play state.

Excavation Transition State

The play state adds the grid and the necessary GUI elements.

Excavation Play State

It took me a while to figure out the progress bar, but the idea is to show an increasing number of frames, alternating between two types, and always end with a specific frame. The design of the frames, and specifically their width, guarantees that after a fixed number of steps the progress bar is complete.

borntofrappe commented 3 years ago

I will close the project in 6 to 8 hours. The game is complete and "all" that is necessary is to:

  1. add camera shake
  2. allow to dig for a longer period of time (the progress bar tends to fill up a tad too rapidly)
  3. create a gif
  4. document the game

I am considerably proud of the effort so far. Since the last update I was also able to discover and implement Love2D sprite batch feature, so to render the background of the grid more efficiently 👍 .

borntofrappe commented 3 years ago

First .gif to highlight the game.

excavation

I'd like to take another session to review the code and add the missing features:

borntofrappe commented 3 years ago

Post-pull request update

The game turned out to be a smashing success considering the result I wanted to achieve. I am particularly proud of the transition between states and the shaking of the camera. The inclusion of a state stack instead of a state machine helped to manage the game flow, and the smaller demos in the Prep folder really helped to add a solid level of polish.

The .gif doesn't do justice to the entire package, but at least gives an idea of the overall design and gameplay.

excavation