How To Make Cool And Efficient 3D Skill-based Special Effects

Want to have a cool and efficient performance of special skill effects? This time, iwae brought a 3D special skill effects manager, which provides rich special effects and optimizes their operating efficiency. See the end of the article on how to download.

Demonstration of some effects

640 (2)

In RPGs, MMOs, and other games, we often use a large number of particles to make special skill effects. In production, we know that it is not easy to achieve cool particle effects quickly. Using a large number of particles also puts higher requirements for performance optimization.

This 3D skill special effects manager contains a variety of features:

  • Ten stunning AOE skills
  • Character Simple Toon unlit shader supports instancing edge photosynthesis batch, ablation batch
  • A skill management system that supports crit, dodge, combo, etc.

Developers can quickly access and adjust parameters according to actual needs, achieving the desired effect with half the effort. At the same time, this set of resources has been optimized for special effect loading, material performance, text batching, frame number, sound effects, etc., to improve the performance quality and operating efficiency of 3D skill special effects.

Let me share some of the following key optimizations.

Effect loading optimization

Optimizing particle map size

When loading special effects for the first time, it is necessary to load the texture used in parsing special effects.

It is recommended to control the resolution of special effects textures within 128x128 - 512x512 and reuse special effects textures as much as possible to save memory and video memory.

Particle Mesh Optimization

It is recommended to use the mesh after surface reduction as much as possible for particle effects.

Take the sphere that comes with Cocos as an example before subtracting:

After surface reduction, particle rendering time will be reduced:

GPU and CPU resource swapping

At present, mini games and casual games often encounter bottlenecks in the CPU. It is recommended to use the GPU material for the particle material since the GPU material does not support gravity parameters. The particle effect of gravity must be made using the curve of the GPU material + ForceOverTime to simulate gravity.

Use burst to create multiple particles

How to avoid the repeated creation of frequently used particles? You can use the number of repetitions of burst + interval to generate repeatedly within a single particle to ensure batching.

Multiple pattern combination + textureanimation random

The commonly used snowflake and rock effects can be combined with one texture, and texture animation can be used to generate different patterns and reduce the number of particles randomly.

640 (3)

Mixed Mesh use

Some of the more used effects can be simulated using Mesh + UV animation to reduce particle overhead. The animation editor is used here. If the number is large, you can use instancing + instancedarribute controls.

640 (4)

Particle preload

In the resource loading stage, the particles can be instantiated in advance, thrown into the sky, or played outside the field of view. Since some particles have a start delay, there will be a playback delay. Here, it is uniformly set to 0.65s before playing and recycling. This can ensure that when using the skill for the first time, there will be no lag caused by texture loading and parsing.

Of course, you can also use prewarm directly, record the delay first, then restore and recycle.

Role optimization

When the skill hits the character, we set the rim light to the character as feedback.

A custom material is used here, using the unlit + edge light + dissolve effect + shadow that comes with the engine. The material effect is controlled by instancedarribute.

Both dissolve and instancdarribute are controlled through the MeshCtrl script.

When using it, you can get the MeshCtrl Class and control the dissolution range through tween.

640 (5)

Harm text batch optimization

All the damaged texts are hung under the blood bar, and bmfont is used to reduce drawcalls. In this way, only the blood bar needs to follow the character’s position, and a local space coordinate transformation is required.

AOE effect damage text demo:

640 (6)

Drop frame

There are many particle effects in the game. Here the game.frameRate is reduced to 30FPS. Each frame has more time processing overhead.

Blunt frames and screen shake

640 (7)

At the beginning of the game, the director.tick was overwritten, and every time a skill is released, the camera will be notified of screen vibration (here is the overall zoom and some skills can also set the effect of shaking the ground up and down) and blunt frames (slowing down the game time), reducing the player’s Caton perception, notifications increase the sense of game impact.

  • The overall zoom is modified here, and you can also tween the x-axis or y-axis separately.

Vibration and dullness are obtained through the configuration file:

Physics optimization

The physics here uses the built-in that comes with the engine. If you are looking for performance, you can also consider the Bullet physics engine or the collision detection that encapsulates the tree structure yourself. The collision body of the skill should try to use a ball to achieve the highest detection performance.

Combo optimization

The combo is written in the configuration file, and the skill will only be detected once (you can add a collision body to leave the parameter if you need continuous detection).

Sound optimization

To avoid centralized playback of the same sound effect, you can use the track sound effect to control the number of sound effects and record the playback time, such as hitting the sound effect. Here, a playback limit of 50ms is set to avoid repeated playback of a sound effect within 50ms.


3D Skill Effects Manager

Cocos Store

Experience link

Forum Post

3D技能系统优化(送源码)|征稿活动V5 - Creator 3.x - Cocos中文社区

1 Like