Cocos Web Game: Grimer's Adventure (alpha)

Cocos Web Game: Grimer's Adventure is an online web game I developed during my probation as a full-time Frontend Developer in Growild Technology Inc. after I graudated from the University of Melbourne.

Project Introduction

It is almost a convention that every developer who tries to learn Cocos Creator for game development will start with an open source project called Star Catcher, which can be accessed via this link (click here) .

Players of this game need to manipulate an obtuse monster that never stops jumping to touch the continuously appearing stars. The dazzling acceleration will bring great challenges to players. Play with your friends and see who can obtain the most stars.

The main reason why people choose this project as their first Cocos Creator beginner project is because in the process of implementing the preset functions of this game, developers need to use almost all commonly used editor functions, so they can become familiar with the functions and operation interface as quickly as possible.

Play It Yourself

It is also deployed on my website, please click here

Key Techonlogies

  • Cocos Creator v2.4.7
  • TypeScript & JavaScript
  • VSCode Extension: Eslint & Prettier

Key Features

Feature 1: Pokémon Theme

The problem which the most game development starters will face is not a lack of creativity or technical skills, but the shortage of desired art materials, including diagrams, background musics, videos, etc, or assets in professional terms.

In a professional game development company, there is usually at least one artist team responsible for producing the corresponding game assets for game development. This dedicated assets supply will not only make development more efficient, but also save costs.

Because this is my personal project, I couldn't think of a good reason to ask the company's art team for help, so I faced the same dilemma.

Looking for open source/free assets is the only solution, but aimlessly searching by keywords is not only too inefficient, but also easy to miss the right ones. However, I found some shortcuts, which I believe are also suitable for some other game development beginners, that is, open source game asset collections. For example, I have played a few unofficially developed Pokémon GBA games, but they all use the same game materials as the official ones, such as pictures and sound effects of characters/Pokémon/scenes. Therefore, it can be a clue that the assets of early Pokémon games should have been open source.

This is indeed the case. The biggest advantage of using open source game assets is that it can give your game a unified theme, and the quality of these assets will not be uneven, such as extremely low-resolution characters appearing in an extremely clear and well-designed background.

Feature 2: Buttons & Usability

After completing the advanced starter project (polished_project in the GitHub repo), I couldn't wait to make some changes based on the Star Catcher game. One of them was to replace all the assets with Pokemon-themed assets. Well, to be frank, this was not very creative on the technical level, but just satisfied my personal aesthetics. More importantly, I added some usability improvements.

For starters, I added pause and resume buttons to allow players to stop and rest midway, and also allow users to actively exit the game when they don't want to play anymore. Of course, the original game can also do that if you just wait until Game Over, and the game will naturally end, but I think this is not easy for some people with a strong competitive spirit (like me) to accept.

For the same purpose, I added a score settlement panel. When Game Over, if the player's score exceeds the user's own record (this feature is delivered in the later leaderboard feature), the panel will not hesitate to praise.

Personally I really like these buttons because they give me a much better gaming experience and simplify my testing process. Thus, I've added similar buttons in all my games for the sake of usability.

Feature 3: Endless Game Maze

Actually, I prefer puzzle games, such as mazes and board games, over action games like Star Catcher, so I developed this maze game after extending the Star Catcher game.

From my perspective, this maze game is far superior to Star Catcher in technical level, because maze games not only have to solve the problems of character movement control and collision, but I also put a lot of thought and energy into designing the generation of the maze and how to ensure that there will be a reachable path.

In my original design, I would generate a maze by reading a preset configuration file. Although this is simple, it can only generate a limited number of mazes. However, I made a breakthrough when exploring the reachable destination problem. I chose to use a non-recursive BFS algorithm to generate a maze. It is worth mentioning that I use BFS to generate a path instead of the wall of the maze, because this can directly solve the accessibility problem, as long as you randomly select a certain endpoint as the exit. In addition, the maze generated by the BFS algorithm can randomize the maze generation as long as randomness is added during the dequeue process. This advanced method can completely replace the solution of generating a maze through a configuration file. Not only does it not require people to manually write configuration files, but it can also automatically generate an infinite number of different mazes.

BTW, if you are interested in the maze game, the source code will be posted on GitHub soon.

Feature 4: Relaxing Homepage

After I finished developing the maze game, I began to realize that I needed a homepage where players could decide which game to play. After 15 minutes, a boring homepage was born, with only two buttons on a monochrome interface, which would start two games respectively. I never underestimated the importance of the homepage, after all, it would directly determine people's first impression of the application. Later, I began to slowly add more special effects to make the homepage lively.

I added a forest-themed background to the interface to soften the color of the interface, and placed Grimer in the center of the screen to highlight the protagonist of the game, and a big game title was also placed on the screen.

This is not enough, because when a static character appears, people will subconsciously think that they can control its movement, which will give the illusion that the game has a bug. So I decided to make the homepage animated, but the final visual effect of making Grimer repeatedly jump left and right looked very unnatural. I decided to do the opposite, making Grimer jump up and down on the same spot and let the background move backwards at a constant speed, which made the effect look a lot lighter and more agile.

In addition, for the purpose of experimenting with the animation of Cocos Creator, I made an animation of the Zubat Pokémon flapping its wings. On this basis, I added a special effect of randomly generating a certain number of Zubats flying across the screen to the homepage, making the homepage more lively.

Feature 5: Friendly Beginner Tutorial

After letting my colleagues play the game, I found that they could not quickly understand the operation and purpose of the game without my explanation, so I decided to add a tutorial to help new players to get familiar with the game. Similar to the tradition of Pokémon games, there will be a professor to explain the background of the game and guide you to play two games by achieving some simple goals.

The tutorial itself does not count as a new game, but the development difficulty is no less than a new game, because I need to modify the first two games so that they can distinguish the different modes of "normal game" and "tutorial", and give different effects in the picture and game rules. In order to make the tutorial more vivid, I added cutscenes and designed a story background of the game.

The Game Preview of the Star Catcher

In addition, in order to let players understand the role of the Tutorial and avoid misunderstandings, I also added instructions on the homepage to inform them of the purpose of the Tutorial game.

Feature 6: Leaderboard

Leaderboard is a feature I have always wanted to try. Although there is no way to make a complete user management system like the server, it does not prevent me from using localStorage for simple storage. The only difficulty is when the scores are settled, but this has been considered when developing other games, so there is no obstacle in the implementation. After the implementation, I also optimized the management of LeaderBoard in the runtime through the singleton mode to reduce the overhead of frequent IO.

Feature 7: BGM & Audio Control Panel

When the development was almost complete, I realized that my game had no sound effects at all except for some bouncing and scoring effects from the original Star Catcher project, so I picked a BGM for the homepage and two games respectively. It is not difficult to loop playing the BGM at all, but a responsible developer cannot just develop effects, but also needs to allow users to control. Therefore, I also added a sound control panel to each interface, where users can choose whether to turn on BGM, and can also control the volume of BGM by adjusting the slider.

Disclaimer

Sharing my work that based on an open-source project without implanting any company-owned resources & technologies does not violate the Non-Disclosure Agreement I signed with Growild Technology Inc.

Projects #Tech #JavaScript #Cocos Creator
Cocos Web Game: Grimer's Adventure (alpha)
https://billyjojojobulidogithub.io/2024/09/20/Cocos/
Author
Baocheng Wang
Posted on
September 20, 2024
Licensed under