How it all started
Highly acclaimed as the Creative Director behind the Star Wars Galaxies, Raphael “Raph” Koster is a professional in the game market and is widely recognized as a world-class game designer and speaker. Raph’s book, A Theory of Fun for Game Design, is a classic that is implemented in game design programs at universities worldwide.
I was intrigued by this novel’s friendly tone as I learned more about the psychological approach to designing games. This article will highlight the main points of Raph’s book, so I hope you enjoy this short and sweet read.
Introducing Raph’s Three Definitions of Fun:
Fun is all about our brains feeling good — the release of endorphins into our system. Fun is just another word for learning. Our brain is seeking new data to refresh the experience. If a game can keep updating data while maintaining the existing experience pattern our brain will be satisfied and we will feel fun. Fun is the act of mastering a problem mentally.
The “Flow State” often occurs when players are in the mode of having fun, meaning that the game isn’t too hard or too easy. Players strive for the flow state because the easy games can appear dull and hard games can cause players to build anxiety due to their difficulty. Both extremes will trigger players to feel they are unable to continue the game.
Migrating to Next.js
I believe our society today is growing to accept that games can be used as an effective educational tool. For those still in speculation whether this is true or not, I’d like to open a discussion. What exactly do games teach us then? Coming from someone who is a player herself, I find that games help me survive by becoming a problem solver in the real world more so than my previous self before I played games. At a more high-level example, Olympic games encourage us to embrace competition, such as running even just 0.01 seconds faster, aiming at an archery target with keen focus, and taking any necessary precautions to avoid danger. Similar to what our ancestors (i.e. cavemen) have done to protect themselves, like hunting animals for food, we also strive to do what we can to solve our own problems by identifying how we can overcome our limitations.
Games help simplify the overall process and quantify the result. A classic example is chess games where they are most commonly referred to represent military strategies. Chess is considered an abstract way to display strategy with no physical dangers involved, eliminating the unnecessary violence that often occurs in combat.
Not all smooth sailing
For the most part, the migration was pretty straight-forward. The way I has structured the site with React Router lent itself well to conforming with Next.js's file-based routing, and I was already using postcss for styling. I did, however, encounter a couple of problems:
1. Route transitions
There was a bit of a conflict when it came to animated route transitions. Next.js will immediately yank out all of the styles for the previous page when navigating to a new one. This works great when you're not animating between pages because it cleans up any unused styles form hanging around. When you are animating the page transition though, all of a sudden the previous page becomes jarringly completely unstyled as it transitions out. This problem one of the most commented and reacted to issues on the Next.js repo, so hopefully there's a fix soon, but for now I've dropped in a hack to fix things from the issue's comments.
2. Scroll restoration
Somewhat related to the route transitions, I had to opt out of both Next.js's and the native browser's scroll restoration in order to prevent the browser immediately scrolling to the top when the page started transitioning out. Next.js also doesn't appear to handle shifting focus when linking to the id of an element within the page, so I added that in for accessibility.
Looking back, and forward
It's been pretty neat to see how popular the site's been on Github, with 500 stars (as of writing this post). It's also neat seeing how people adapt it to their own style and modify it, which is part of the reason I made it open source. I want others to be able to take it apart and see how it's made, learn from and improve upon it. That's what inspect element used to be like on the web, but with modern sites compiling and minifying and injecting garbled strings into css classes that's not as simple these days. The next best thing I could do was to open source it.
I look forward to continuing to use this site as a playground, and it'll be interesting to compare the next iteration to where it is today.