Fuguo's
Media Space

Week 3: Starting Game Development

Feb 18, 2025

Blog series: Bazaar.log (IDM Thesis Project)

This week, I updated my game UI based on feedback from my friends, classmates, and professors. After UI modifications, I learned the basics of numerical planning and planned the progression of variables based on the game storyline. Then, I started game development using Next.js framework and deployed it on the Vercel platform.

Try my game online (work in progress)
Link to numerical planning Google Sheets
GIF image of the game in web browser.
GIF image of the game in web browser.

UI Update

Prototype image of the previous interface.
Prototype image of the previous interface.
Screenshot of the current interface.
The current interface moves all the data and text to the left and leaves plenty of space to the right for data visualization.

I updated the UI based on feedback gathered from friends and classmates. When showing my preliminary prototype, people thought in general that 1) the previous UI is text-heavy, and 2) it is hard to find the important information from the text. To avoid the confusion caused by text, I decided to move all the text together, and designed the "News" section as a scrolling panel and "Decision" section appear only when there is a decision to make.

I reserved a large space for p5.js canvas because I realized from professors' feedback that data visualization has great potential in this game -- this data-heavy game can also generate algorithmic art. Therefore, I want the canvas to occupy most of the interface to create a greater visual impact. For now, there is only a button at the canvas center, which intends to attract player's attention and to invite button clicking.

Numerical Planning

In order to make the game process reasonable and drive players to continue playing, numerical planning is necessary and critical. In the game industry, numerical planning is a job that requires professional knowledge and experience.

Compared with other game, numerical planning is the core of an incremental game. Therefore, I learned the basics of numerical planning and used the knowledge to design numerical increments. Below are some useful knowledge for my game.

  • In general, there are three kinds of numerical growth: linear, exponential, and logarithmic. For example, tool productivity scales linearly with the number of contributors in my game. Personal influence scales logarithmically with the information transmission speed, growing quickly at first but then slowing down.
  • The progression logic can also be categorized as time-based, state-based, and player-action-driven. For example, the progression of the "era" in my game is time-based, the information transmission speed is state-based (i.e., based on the current "era"), and the initial incrementing of lines of code is player-action-driven (i.e., clicking on the button to accumulate lines of code).

Next Steps

  • After finishing all the logic, fine tune the logic so that the numerical increments are reasonable.
  • Research visual reference for the visualization of the game data.
  • Implement visualization in p5.js.
  • Try to stylize UI based on "era" variable.