Lessons From "Hero Village" Developer On Graphic Optimizing

Top 4 free game! 3D pixel style + 5 ways to play, how does this simulation business mobile game become so popular overseas?

Due to the limitation of getting an ISBN in China recently, many mobile games have chosen to go overseas while waiting for the ISBN to develop and optimize overseas first. The 3D pixel simulation management game “Hero Village” developed by Hangzhou Daily Power is also one of them. The game has been launched in Malaysia, Singapore, Taiwan, Hong Kong, and other countries or regions since March this year. So far, it has reached 4th place on the App Store free list in Taiwan. The team has not yet done a large-scale rollout, instead focusing on optimizing stability and product content based on player feedback.

In “Hero Village,” players will build their homes from scratch, build farms on deserted islands, produce materials, hunt for treasures in caves, and at the same time build fortifications to defeat monsters trying to invade. The game adopts fusion gameplay, with building a home as the core experience, and also includes gameplay elements such as RPG + tower defense + combat + development + placement. The rich game content, exquisite graphics, and smooth experience are why this game is loved by players overseas.


640 (1)

This time, we invited the producer of “Hero Village,” "Mai Mai Ti, to share with us the development process and technical highlights of this game.

Cocos: Can you briefly introduce the project background of “Hero Village”?

Mai Mai Ti: The project was launched in November 2020. In the context of domestic mobile games, we wanted to do a medium-to-heavy project, attract attractive art styles and themes, and retain users with moderately easy-to-use but deep gameplay. Because I have a bit of farming plot (Like some Chinese have), I have done this kind of small business game in the past, and I have also done a mobile game, so I have simulation management skills (retention and user base) and the idea of ​​combining card development (payment model).

In terms of art style, we chose 3D pixel style to save money - of course, this is not the only reason. After some purchase verification process, we finally adopted 3D pixels and optimized the color matching to suit users’ aesthetics.

After determining the critical points of the project, I started demo research and development with a team of 3 people from the main programmer and the primary art teams. In more than one year of research and development, the team has expanded its personnel, and now it has a scale of about 20 people. After many iterations, the product has also stabilized and embarked on the correct operation path.

C: “Hero Village” contains a variety of gameplay. How would you define its type?

MTT: Merging gameplay is a current trend. Personally, I think the core of “Hero Village” is one sentence: "I have a home, and I want to build and guard this home with my friends."

In the home, we want to satisfy players’ imagination as much as possible and add various functions that make players feel alive, such as farming, fishing, raising animals, player interaction, business construction, etc. In the future, we will gradually add interior decoration. Features such as friend-exclusive plots bring players into the game worldview and live with their friends.

C: What are the differences or highlights of the game’s gameplay design?

MTT: The RPG elements and companion function of “Hero Village” are some of the contents we have put much thought into building. We designed cave explorations with more organs, puzzle-solving elements, powerful and different bosses, and hidden secret rooms that must be carefully searched to find. As for partners, there are not only partners who can fight together but also “tool people” who can work at home. After assigning residences and jobs, the partners work at sunrise and sunset, bringing more vitality to the house. At the same time, it can significantly reduce the manual operation of the player - protecting the liver is also my priority when designing various functions.

C: Why did the game choose to go overseas and be the first to launch in Singapore and Malaysia? What is the feedback from overseas players?

MTT: On the one hand, the reason for going overseas is to wait for the ISBN in China and, more importantly, to optimize the product. We want to start operations in the overseas simplified Chinese market first. Simplified Chinese can also avoid some translation problems, so we chose Singapore and Malaysia. When the game was established, global distribution was considered, so the choice of art style and themes were also considered from a global perspective.

After the launch, most of the players’ feedback was very good, and most of the bad reviews were due to game performance problems. Because the current level of mainstream mobile devices in Southeast Asia lags far behind that of China, many of them are still using cheaper mobile phones from four or five years ago. For these users, more targeted optimization of game performance is required. This is also our recent work focus.

From our experience, it is very important to carefully read and comply with the regulations of various platforms when operating overseas.** We have been suspended because the old version violated the privacy policy of Google Play. But fortunately, the follow-up communication has resolved this issue.

C: What do you think is the most important thing for a game to be successful overseas?

MTT: I think the most important thing is the art style and subject matter. You need to find the right one for the market you want to operate in and use the purchase volume data as verification. In terms of gameplay, players all over the world are common, and there is no localization problem.

C: What are the criteria for the technical selection of “Hero Village”? Why choose to use Cocos Creator for development?

MTT: The game is developed using Cocos Creator 3.3.1. When selecting technology, we consider that we need a mature 3D editor layout scene, an efficient programming language, a convenient debugging environment, and a cross-platform tool that can be developed by artists, planners, and technicians. In summary, we finally chose Cocos Creator. Cocos Creator supports Typescript script development, which can be debugged through the Chrome browser and can generate Android and iOS clients through a set of codes.

The performance of the engine in 3D is not bad. In addition, the design of custom plug-ins allows us to expand plug-ins to improve R&D efficiency freely. Componentized scripts are also very efficient. We designed tools such as prefab loader, NPC loader, and scene preview through componentized scripts.

C: The screen performance of the game is very delicate. What experience can you share with us in terms of custom materials?


MTT: First of all, the standard material that comes with the engine is PBR, and we don’t need to use such a complex material. On the one hand, in order to optimize performance, on the other hand, we hope that the material can be more controllable so that we can do some customized operations. Secondly, we did not choose the common Blinn-Phong material because its material performance is average and greasy after polishing. So, in the end, we chose GGX highlights and optimized them.


640 (2)
Day → Dusk → Night in the game

The day-night switching effect in the game is achieved by adjusting the main light source and ambient light, but simply dimming the light source will cause the scene to be too dark overall due to the lack of moonlight. So we simply do a light change in height using smoothstep, y > 1.5 bright and y < 0.3 dark.

Waist Light/Spot Light

Before optimization

640 (3)
After optimization

We designed a waist light for the protagonist, realized by sphere + GGX, as the main light source at night. The edge of the Spot Light that comes with the engine is too sharp. We want the light transition to be softer. Since penumbraCos can’t be found in the shader, a 1 is forced here.

High fog

In the cave exploration scene, we used height fog to achieve some scene fog to enhance the scene’s atmosphere. The implementation of height fog here is similar to “Moonlight,” which is also based on the world height of model vertices.

C: How are the game’s water surface and coastline achieved?

640 (4)

MTT: The water surface rendering mainly does the following processing:

Sampled caustics maps for simple displacement stacking.

Decrease the brightness according to the screen height.

When crafting the coastline, we evaluated several technical options:

Real-time depth map sampling: The performance consumption is high, the depth map accuracy of different models is different, and the performance is unstable.

Non-real-time depth map sampling: It can be used to represent a large range of depth gradients, but it is not accurate enough to represent a small range of coastlines.

Vertex Shading: Not editable within the engine scene.

Swing point method: easy to edit, good, and stable performance.

We finally adopted the pendulum method to achieve the effect of the following figure.

C: How is the 3D automatic pathfinding in the game implemented?

MTT: Due to the fixed perspective of the game, we used Astar’s pathfinding in 2D space and developed a custom editor for drawing walkable areas.

C: The game takes into account high-quality rendering and a smooth running experience. Can you share your experience in game performance optimization?

CPU performance

MMT: Mainly through the camera Transform to change the dynamic display of hidden nodes.

  • Leverage node pools to reduce instantiation overhead.

  • Localize pre-baking data to reduce the overhead of pre-baking skeleton data when instantiating a skeleton model for the first time.

  • Custom vertex data and bone data use protobuf.

GPU performance

  • Batch the same model through GPU Instance to reduce DrawCall.

  • Regarding UI, adjusting the node level, merging atlas, and reducing DrawCall.

  • The 3D camera does not render when opening the full-screen interface.

  • Reduce the number of vertices in a screen and reduce the overhead of vertex shaders.

  • The precision of shader floating point numbers is changed to low precision mode.

  • Streamline these effects on low-end machines by adding effects reduction components.

Thank you, Hangzhou Daily, for sharing with the R&D team of “Hero Village”! 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