Ways to improve UI and loading from a 430k+ downloaded app developer

Previously, there was “The Strongest Snail” and “Traveling Frog” exploded in social circles, and then there was “Sword and Expedition” with monthly revenue of more than 100 million yuan. Idle mobile games have been bred one after another amid some people’s doubts that they are “not fun” and “do not understand.” There have been several explosions. Recently, another new game is placed on TapTap, which has won 450k downloads and a high reputation of 9.3 points within four months of its launch.

The casual idle card game " Reincarnated as a Monster " takes “another world” as the background and combines card development + light simulation management gameplay. Players transform into a monster in the game, accumulate resources by fighting monsters, recruit more mutant monsters, and load up on the best equipment.

In today’s idle games, the themes range from the Three Kingdoms to the love and cultivation of villages with gods, and fusion gameplay has long abounded. How to make differentiation has become the key to breaking through. “Reincarnated as a Monster” has added a mechanism to allow monsters to reproduce offspring. Players can cultivate their favorite monsters through potions so that their children and grandchildren will be endless and gain the sense of accomplishment of “professional monster households.”

As the game progresses, players can also unlock the buildings in the “Monster Village” and obtain various rewards according to the rules of each building. For example, investing in the “Goblin Bank” will receive “dividends” and get more diamonds, and upgrading the bank level can increase the return on investment. The addition of simulation management makes the gameplay more diverse and enriches the player’s experience.

“Reincarnated as a Monster” was developed by a small team of fewer than ten people in Shenzhen Chuangxiang Mobile Games. All team members face players with monster code names, such as snoring pig, fat fish, cotton rabbit, shaking legs, confused sheep, and so on - it’s not hard to see the team’s intentions and fun from the name change.

The game’s producer/programmer, Xiong Xiong, drew inspiration from such genre crossovers as “Overlord,” “So what if you turn into a spider,” “Turning into a Slime,” and “I’m too afraid of pain, so I’m all about defense.” In his opinion, this kind of type of game will generally have players fight all the way to upgrade to become a dragon aura, which is very suitable for the game setting: "plus I play more personal hero theme games, thinking ‘if I become a magic creature, that should be more interesting, right?’ So there is this game’s beginning. "


The “Monster Continent” set in the story

The game’s introduction on TapTap puts out the slogan “simple and does not hurt the pocketbook.” No money, many benefits, and a good experience are important reasons why many players praise this game. Most players are seeing the harvest without investing too much time and energy. “Reincarnated as a Monster” has captured the preferences of this part of players. After its exclusive launch on TapTap in early March, its popularity has skyrocketed, and it has recently launched a WeChat mini-game version. Currently, the team maintains a total of 23 player groups and keeps close to users, exchanging conversations with them.

“Second-day engagement has always been our optimization goal. It stayed at around 30% in the beginning, and now it has reached 43%+ .” Xiong Xiong told us that the team’s primary focus is developing the follow-up to the “Reincarnated as a Monster” version and further optimizing the early user experience. "We will launch the reincarnation system shortly and have formulated a long-term operation plan, and the overseas version is also in production."

The gameplay and mode of placing cards determine that it needs to continuously introduce new content to maintain user stickiness, which makes the game’s performance in the market very dependent on the long-term operation of the developer. From this perspective, “Reincarnated as a Monster” has just set sail.

“Reincarnated as a Monster” uses Cocos Creator for research and development. In Xiong Xiong’s opinion, “Cocos will be lighter and more convenient in 2D game production. Our team is also more familiar with Cocos and accumulated past research and development. With some tools, it’s easier to use.”

Xiong Xiong also shared with us some of the game’s experience in resource loading optimization and UI rendering optimization, hoping to inspire you:

Resource loading optimization

1. Resource subcontracting management

Starting from version v2.4, Cocos Creator provides AssetBundle resource modularization tools. To speed up the resource loading speed of the game, we have customized three resource subpackages: basic, loadOnPlay, and scripts. Among them, the basic subpackage is used to store general resources, the loadOnPlay subpackage is used to store dynamic resources, and the scripts subpackage is used to store the core code of the game. We define the subpackage name for the game in the project code:

2. Resource loading process optimization

When the game starts, we first load the initial lightweight scene and then preload the scripts subpackage and login scene. When the initial scene plays, and the splash screen starts, the game will load the general resource package (basic subpackage) and related configurations and then enter the login interface.

After the player logs in, we will preload the atlas resources, character resources, and some combat-related special effects of the main scene in the game Loading interface to avoid dynamic instantiation during the game battle and cause the game to freeze. To facilitate loading resources, we encapsulate a resource loading class LoaderManager for loading AssetBundle resources:

UI rendering optimization

1. UI panel management

We implemented the UIManager class in the project for UI panel management. This class layers the interface in the game caches the loaded panel resources and instances and releases the corresponding resources when the interface is destroyed.

2. Layered batch optimization

There are a large number of long list interfaces and grid interfaces in our project. We also have targeted integration to solve the problem of freezing when opening these interfaces and using the ListView component to realize item reuse and frame loading in the visible area. Batch optimization.

After reading the article “Using PostRender to achieve layered batch rendering” ( 【分享】利用PostRender实现分层合批渲染(附 Demo 和引擎源码解读) - Creator 2.x - Cocos中文社区 ), combined with the idea of ​​group rendering, we adjusted the implementation of the LayeredBatchingAssembler class and renamed the adjusted class to GroupBatchingAssembler. The LayeredBatchingAssembler class can implement the rendering traversal method from depth first to breadth-first. On this basis, GroupBatchingAssembler can support the hierarchical management of rendering according to groups and realize the custom rendering layering of items in the list.

To make it easier to adjust the rendering level of nodes in the editor, we define 19 groups in the editor, which are 15 fixed depth levels (FixZ1~FixZ15) and 4 basic depth levels (BaseZ50, BaseZ100, BaseZ150, BaseZ200). The level of each item is equal to the base depth level + fixed depth level/default depth level.

Thanks to the R&D team of “Reincarnated as a Monster” for sharing! The goal of Cocos has always been to help developers realize their creative ideas more easily, whether it is native 3D mobile games or 2D mini-games. I hope more and more developers use Cocos to create exciting works!

1 Like

Thank you