Logo

dev-resources.site

for different kinds of informations.

Building a mini casual game with Next.js

Published at
1/17/2024
Categories
nextjs
framermotion
webdev
firebase
Author
lansolo99
Author
9 person written this
lansolo99
open
Building a mini casual game with Next.js

As a quick reminder: this post is not a step-by-step tutorial on how I built this game, but just a review of how I approached this project during this journey.

The game

First and foremost, here is the playable live game this post is about.

Goal

I took this game as an opportunity to improve on my technical skill and some creative processes.
We (with Pommeclic) decided to communicate early as a way to celebrate the new year by publicly offering a game contest with prizes to win.

Previously

I didn't start from scratch. I previously released a pretty similar game one year ago called Blackout.

Blackout game

The theme was the deep energy concern that occurs in Europe with the Ukrainian/Russian conflict.

It takes the "whac a mole" concept and adapt it to electrical units to turn off as soon as they turn on.

I decided to reuse most of the layout and principles in order to save time and focus more on the design and game logic.

New Concept

I kept the same isometric gameboard to support the action. After a bit, I was inspired by the story of the controversial A69 highway construction.

The idea is to prevent vehicles to arrive on site, to postpone the start as much as possible, so that I can keep the "whac a mole" principle, with moving target this time.

Fin de chantier game - zone centrale

Stack

I used Sveltekit for Blackout. Though I enjoyed its light syntax, I struggled with lacking features, especially having dynamic optimized assets.

I also wanted to refocus on React through Nextjs, to avoid having an overly dispersed knowledge.

I decided to go with the same stack regarding the rest:

  • Firebase as backend (auth + user data)
  • Tailwind as UI framework
  • Vercel as hosting

Design

Environment

I kept modeling using Cinema 4D to get the same low poly look & feel, this time designing a hilly countryside crossed by main roads, as well as tunnels. Those lanes will be the interactive part of the map.

Fin de chantier c4d gameboard

I then adapted predesigned construction vehicles, simplified and uniformized their styles. I rendered them in the 4 perspectives for which they will be used.

Fin de chantier c4d vehicles

I defined the animated flags and smokes and rendered them as GIFs through After Effects.

Fin de chantier c4d smoke
Fin de chantier c4d flag

UI

As usual, I started with some Figma screens, based on the previously designed Blackout UI, and replace the environments. Overall, the UI stays the same. Some light improvements have been made here and there.

Figma screens

Coding

Migration from Svelte

I undertook to migrate the most of my previous Svelte codebase into a NextJs one, using the now established app router. Most of the time, it was just a matter of mirroring structure, replace with the proper framework attributes syntax (class= becomes className=).

Though a lot of functional programing could stay the same, I had to reorganize how the data flows. Stores become separated contexts, and useState enter the game.

I intended to experiment a lot with RSC and server actions, but, I almost any time gave up using the "use-client" directive to be able to use freely all the UI mutation patterns I was used to. I really have to take the mental shift to de-correlate RSCs and CSCs.

I guess it's no big deal as this app is mostly a client side with heavy reactive UI.

Gameboard

I used a single rendered image for the countryside background, and set the vehicles individually into their own components.

Desktop c4d environment

The main game logic consist on generating on the fly vehicles components based on an interval increasing in speed. Each vehicles take some props that define its vehicle's version to pick as well as a lane to run on.

Vehicles animations are handled with Framer-Motion.

I handled the vehicles masking (when entering tunnels) using a single css image-mask.

For the rest, it's a matter of vehicles triggering their situation to a global game context.

Fin de chantier React context

This context is in charge of rendering the whole game status ('ready', 'gameover', 'in progress'...).

Fin de chantier Gameboard component

Next auth and Firebase

I decided to go with Next Auth and found pretty easy to set it, but I didn't make the Firestore adapter work properly (to get the user data part of the Next Auth context).

Instead, I juggled with both Next Auth and FireStore hooks to retrieve bound data given a user auth, when necessary, that is ugly and I'm well aware of it πŸ™.

Github Copilot

I didn't regret to get the Copilot subscription, that helped me in many ways. Sometimes, it misled me, especially providing obsolete import paths (from the Nextjs page router).

Deployment

Not that much to say with Vercel that do an excellent job and eases the process, be it the subdomain binding, preview deployments, error logs...

Wrapping up

To conclude, and as always, working on this kind of side project has been very fun and enriching. Seeing the ideas come to life is very satisfying, while being able to deliver it within a limited time frame.

It also help to underline which part of the process have to be improved, because I consider my codebase as pretty messy at the time, and that gives me a roadmap on what would be interesting to dig in.

Demo

Here is the playable game of "Fin de chantier" (french version only). The contest run until next February 12th. I will then reopen the game without the contest part.

If interested, you can also play the still playable previous Svelte game called Blackout.

Note

This post is also part of my personal blog lansolo.dev where I share most of my experiments.

framermotion Article's
30 articles in total
Favicon
Building a food simulation game with Next.js and generative design
Favicon
How to Create a Flipping Card Animation Using Framer Motion
Favicon
State-of-the-Art Web Design with Remix, Tailwind, and Framer Motion
Favicon
How I Created a Stunning Portfolio with Next.js, Tailwind CSS, and Framer Motion
Favicon
Creating the iMessage Card Stack Animation: The Interactive Layer
Favicon
Creating the iMessage Card Stack Animation: The TimelineΒ Design
Favicon
How to build awesome website with stunning animation?
Favicon
Adding motion to 3D models with Framer Motion and Three.js
Favicon
Creating a Smooth Animated Menu with React and Framer Motion
Favicon
My-Portfolio
Favicon
Watch Out For Broken Links, 404 Page With Framer Motion, TailwindCSS and NextJs
Favicon
Could not find a declaration file for module framer-motion Error in Next.js 14
Favicon
How to add Animations and Transitions in React
Favicon
Creating a text writing animation in React using Framer-Motion
Favicon
Unveiling My Portfolio Website: A Fusion of Tech and Creativity πŸš€
Favicon
React developer portfolio template use framer motion to animate components
Favicon
Building a mini casual game with Next.js
Favicon
Creating a Multi-Level Sidebar Animation with Tailwind and Framer Motion in React
Favicon
Easy Animated Tabs in ReactJS with Framer Motion
Favicon
A Tinder-like card game with Framer-Motion
Favicon
Elevating Web Design with Framer Motion: Bringing Your Website to Life
Favicon
Animating the Web: Route Transitions in Next.js with Framer Motion
Favicon
Enhancing Form Usability with Framer Motion: A Guide to Animated, Chunked Form Transitions
Favicon
How to Build a fully accessible Accordion with HeadlessUI, Framer Motion, and TailwindCSS
Favicon
Build Portfolio Theme in Tailwind CSS & Next.js
Favicon
How to create Scroll-Linked Animations with React and Framer Motion πŸ’ƒπŸ»πŸ•ΊπŸ»
Favicon
How to build 3 simple animation with framer motion
Favicon
How to create an awesome navigation menu using chakra-UI and framer-motion.
Favicon
Make a slide open envelope
Favicon
Animate everything with Framer Motion

Featured ones: