Original inspiration for the game. This image would have been modified to create the post-level item collection screen.
One of the original designs for the raccoon based off of retro 8-bit designs.
Stock image used to create final sprite.
Pixelized stock image used to create final sprite.
Piskel UI showing final tail design.
Final raccoon sprite.
Godot animation tool being used on skeleton generated from sprite anatomy to create a walking motion.
House sprite created in Piskel. This sprite indicates the end of the level.
'Purple Dawn' background created in Piskel.
'Green Day' background created in Piskel.
'Orange Sunset' background created in Piskel.
'Pink Dusk' background created in Piskel.
'Blue Twilight' background created in Piskel.
'Mint Midnight' background created in Piskel.
'Green Day' in the level editor
'Orange Sunset' in the level editor
Level Editor in Godot
The inspiration for this game was the 24 hour lofi/chillhop streaming channels on Youtube. In particular, lofi hip hop radio- chill/study beats by Chillhop Music. This channel is our team's favorite because of it's well recognized raccoon mascot. The extra cozy aesthetic of his room combined with the laid back lofi hip hop creates a feeling of nostalgia and warmth. We wanted to try to capture this feeling in a 2D platformer reminiscent of the original Super Mario games. The game's name 'SLOfi 24/7' is a reference to the original channel as well as SLOHacks 2019. The 24/7 refers to the channel streaming music 24/7 as well as the team members working sleepless nights to complete the game. It also refers to the fact that we hope that the game can provide enjoyment to our audience anytime they need a break from the stresses of life and work.
What it does
Our game SLOfi 24/7 incorporates smooth lofi hip hop and a rich color based environment to engage the player while provided an aesthetic visual and auditory experience. We hope that the game reminds players of retro platformers while still adding a refined modern twist. The object of the game is to get the raccoon back to his house before it begins to rain so he can be cozy in bed. The various in game environments are meant to represent the various stages in a day to show the passing of time. The changes in scenery represent the ever changing landscape of the Earth and how simply beauty can be found in both natural and human made landscapes.
How we built it
Sprites The sprites in this game were created in Piskel, an free online sprite and pixel art editor. The design of the raccoon went through several iterations before we arrived at our final design. Initially we wanted to channel the original vibe of the raccoon with a more organic hand drawn art style. However, this was an unrealistic standard due to the time constraints of SLOHacks. We eventually turned to pixel art since it is a relatively simple way to convey characters and environments while providing a nostalgic vibe. Our main raccoon pixel sprite went through around 3 or 4 iterations until we converged on our final design. We started with an iconic 8-bit sprite but ultimately decided that we wanted more small details. Creating a 32x64 pixel sprite provided this level of detail for us while still maintaining a somewhat retro look. The sprite was created from a stock image of an anthropomorphized raccoon which was converted into a 32x64 pixel image using Pixelator. This image was cut up into individual body components which allowed us to use Godot's cutout animation function. Each part was layered into Godot to create the final sprite. Once the sprite was assembled, it was animated by setting the desired rotation and Cartesian location of each body part with respect to the torso of the body. Godot's built in 'bones' allowed for joints to easily be identified and analyzed to provide natural looking motion.
Environment The environment was also created in Piskel. The grass and dirt blocks were simply made by creating a repeatable pattern on a 32x32 pixel element. These blocks were turned into a tile set in Godot which allowed us to create our custom platforms and terrain. In addition to these blocks, custom layered backgrounds were created. The purpose of breaking the background up into separate layers allowed us to experiment with Godot's parallax background options. This allows for the various layers to move independently of each other, adding depth to flat scene.
Code SLOfi 24/7 is built using a free, open source, community driven game engine called Godot. Godot provides a useful code editor based around object-oriented programming, a key point in their coding philosophy. With choices such as C# and C++, we decided to try out GDScript, Godot's own scripting language mostly based off of Python. Despite our initial knowledge of Python, GDScript still provided some challenges that we have managed to overcome. With Godot's heavy emphasis on object-oriented programming, we used several classes, such as their KinematicBody to implement our functions for user control, and tile-based maps with their designated collisions. In the case of our player character, the KinematicBody was designed to not be affected by physics of the environment but rather our own functions to control its behavior. We adjusted values such as acceleration, speed, gravity, and collision detection in order to have tighter controls and create new actions such as the raccoon being able to climb walls by using ray casting and collision detection.
Challenges we ran into
One of the major challenges we ran into was the implementation of animated sprites. The sprites were created and animated, but we discovered the minimal amount of documentation available for implementing time dependent animations as opposed to the more traditional frame driven animations.
Accomplishments that we're proud of
Maya "The thing I am the most proud of is our perseverance with this project. It had a rough start and tested the limits of our game development skills and cooperation. Even though there were many points where we wanted to give up, we pushed through from the sheer determination we had to see our idea come to life. A personal accomplishment I am proud of is the animation of the raccoon. As someone with no prior experience in animation I was overwhelmingly excited when I got my walking animation to run smoothly for the first time. It was a nice confidence boost that allowed me to become more confident with my technical abilities."
Noah "I'm most proud of getting the animations to run. I had to really go into the small details of the Godot engine to understand how they work before I could implement the animations." Mapping animations to key actions and sprites came to be harder than expected because of the cutout animation technique we used. Because of this I garnered a foundation knowledge of GDScript and Godot, which I needed to make the animations work.
David "Perhaps one the more prouder moments I had was the choice that I even went here in the first place. Large, organized, and challenging events such as these aren't something common in my spare time. Getting out of my comfort zone to code with tools such as Godot was a refreshing thing to do. However, joining my friends in something as strenuous as this proved to be something very memorable and also precedent to perhaps even more hack-a-thons to come."
What we learned
Through this project we learned how to make and animate sprites in Godot's engine as well as create our own tile sets and in game environments. We learned about some of the ins and outs of pixel art and cutout animation. We learned more about how a game development tool allows the developer to focus more on mechanics and graphics of a game, and less on the code that makes every tiny piece work. We also learned that it's crucial to learn the basics before trying to dive head first into more advanced applications.
What's next for SLOfi 24/7
In the future we would like to continue working on the game to make it fully complete. A major addition would be a well developed story line that is compelling to players but does not take away from the simplicity and relaxed vibe of the game. One of the original goals for the game was to have an interactive post-level screen that allows the player to see and interact with various in-game collectibles. Items would be added to the iconic bedroom scene as they were collected in the game. These items would contribute to the overarching story line as well as provide the player with special in game abilities unique to each item. We would also like to continue working on adding more levels and game modes to suit a wider range of users. We would also like to continue working on the fluidity of movement and controls by adding more intermediate motions that allow for seamless transitions between actions.