Written by: Munkhdelger | Software Engineer 

So, yeah, like what I said in the title, here is how we created a 2D game in a month in a nutshell. ba dum tss… 

I figured this might be helpful for fellow novices like me, So, here it is—the first part of a series where I explore the process of building games.

Let's start with the project requirements. The initial requirement was to create a game for elderly people in a Japanese care home, designed to evoke memories of their youth, especially the summer festivals. With this *brief* info, my teammate and I had to brainstorm, envision the user story, and develop proposals for the game. This involved defining the key features/functionalities, gameplay mechanics, and overall aesthetic. 

Here's a sneak peek at the concept and requirements.

As an elderly person in a care home, 
I want to play a Matsuri-themed shateki(target shooting) game

So that I can relive nostalgic memories of festivals from my youth, escape boredom, and have fun in a user-friendly digital environment (Tablet, Web)

Oh! fun facts! You might be wondering why we chose warm-toned colors for the game. After reading several articles and papers on how elderly people perceive colors, we learned that as people age, their eyes become less sensitive to contrast. This means they have difficulty distinguishing cool-toned colors. To address this, we decided to use high-contrast warm tones to make the visuals clearer and more distinct for our elderly players.

As with any software project, we had to research Game Engines before we started the development. At first, it was daunting for me and my teammate to learn Unity or Godot for beginners, given to limited time. We only had 3-4 weeks to complete the first demo, whether the idea was possible or not. So we narrowed it down to use Typescript/Javascript, which we were much more comfortable with. The research involved reviewing recent articles, user forums, and professional opinions to identify game engines that align with the project's specific requirements. Emphasis was placed on ease of use for beginners, community support, documentation, and compatibility with web and tablet platforms.

Here is a little glimpse into the research we did: 

What is a Game Engine?

A game engine is a software framework designed to streamline the game development process. It provides a set of tools and features such as graphics rendering, physics simulation, audio management, and scripting capabilities. Game engines enable developers to focus on game design and logic, without the need for building basic functionalities from scratch.

Popular Game Engines

Comparison and Compatibility

JS-based Game Engine Comparison:

In selecting the most popular JavaScript-based game engines, we referred to the list available on GitHub's collection of JavaScript game engines. From this collection, mostly focused on the engines best suited for developing a 2D, web-tablet-friendly game. The engines considered are Phaser, PixiJS, and Babylon.js.

Non-JS based Game-Engine Comparison:
For a comprehensive view, we will consider two popular non-JS based game engines, Godot and GDevelop, which are well-regarded in the game development community.

Comparison between JS and Non-JS Engines:

• JS-Based Engines like Phaser, PixiJS, and Babylon.js are generally more aligned with web and tablet development. They offer good performance on these platforms and are a great choice for developers focused on web-based games.
• Non-JS Engines such as Godot and GDevelop provide broader capabilities, especially for projects that might expand beyond web and tablet platforms. They offer a wider range of features but typically require a more substantial investment in learning.

Conclusion  

Considering our team's proficiency in Javascript/Typescript and our familiarity with web development principles, focusing on Phaser as our chosen game engine for the development of a web-tablet-friendly 2D game appears to be the most appealing decision. 

Here’s why Phaser stands out as an ideal choice for our project: 🤓 ☝️:

Alignment with Our Skills: Phaser's core language is JavaScript, which aligns perfectly with our existing skill set. Which means a smoother learning curve. 

Ease of Use: Phaser is known for its user-friendly approach to game development. It offers extensive documentation and a large, active community.

Web and Tablet-Friendly Development: Given Phaser's strong focus on HTML5, it naturally caters to web and tablet platforms. This means we can efficiently develop a game that is not only accessible on web browsers but also performs seamlessly on tablet devices.

Community and Support: Phaser's robust community support and wealth of learning resources will be a significant asset.

To sum up the research, Phaser not only complements our existing knowledge but also meets the project's requirements for a web-tablet-friendly game. Its ease of use, strong community support, and alignment with our JavaScript proficiency make it an optimal choice for our game development venture. 

Now, once we’ve decided on the game engine, we immediately jumped right into development, testing out different game mechanics until we were satisfied with the results.

With the game mechanics finalized, we shifted our focus to design. We pondered and created a few several design options in Figma, and ultimately decided on the one that best fit our vision. After that, we started adding small features that, while not essential for our initial goal with this first game.

Not gonna lie,  it made me proud of the work and eager to share it with others. This process also inspired me to start documenting my entire game development journey!

Here is the final product: Enjoy 

Link: https://2d-shateki-game.vercel.app/