How to Optimize Loading Speed, CPU, and Memory in Cocos Creator Games

Recently I used Cocos Creator to develop some interactive classroom games. Although the engine runs cross‑platform with JavaScript, the initial builds suffered from long black‑screen loads, overheating, crashes, and stutters, prompting a deep performance optimisation effort. After several days of tweaking I finally met the performance targets, and I’m documenting the pitfalls and solutions I discovered.

Although Cocos is a game engine, many of its performance issues resemble those in frontend development: loading speed, CPU usage, and memory consumption.

1. Loading Speed Optimization

Cocos startup can be divided into five stages (see image).

The engine loading and execution phases are immutable, so black‑screen time can only be reduced by optimizing static resource loading.

Static resource loading can be improved in two ways:

Resource Compression

Compress image assets with tools like tinify , which reduces PNG/JPG size by up to 75% without noticeable visual loss. Cocos Creator also offers built‑in compression for PNG/JPG with adjustable quality.

Resource Caching

Cache resources on disk (via HTTP cache or PWA) for web builds, and in memory for frequently reused scenes. Only cache persistent assets to avoid excessive memory usage and potential leaks.

2. CPU Optimization

Games perform many calculations and draw calls, making CPU a bottleneck. High CPU load leads to overheating, frame drops, and crashes.

Major CPU consumers include draw calls, physics, collision detection, node creation/destruction, and per‑frame

update

logic.

Draw Call Reduction

The most effective way to lower draw calls is batching via texture atlases. Combining multiple sprites into a single atlas reduces three separate draw calls to one.

After adding an atlas, the draw call count drops from four to two, confirming successful batching.

Font Rendering

Labels can use Bitmap Font (pre‑rendered glyph atlas) or FreeType (runtime rasterization). Bitmap fonts are fast but memory‑heavy; FreeType saves memory but adds CPU cost.

Using Cocos’

Cache Mode

on a label controls font caching:

NONE

: each label creates its own texture, no atlasing.

BITMAP

: textures are generated and participate in dynamic atlasing.

CHAR

: a shared character atlas is built for reuse.

Keep atlased nodes contiguous; inserting unrelated sprites breaks the batch and raises draw calls.

Mask Component Impact

Using a mask adds extra draw calls because the masked node cannot be batched with its neighbours, even if they share the same atlas.

The underlying OpenGL steps involve template testing: clearing the stencil, drawing the mask shape, then rendering the masked geometry.

Widget Update Frequency

Setting the widget’s

ALWAYS

mode forces position/size recalculation every frame, which is costly. Use

ON_WINDOW_RESIZE

or manually call

widget.updateAlignment

when needed.

Node Pooling

Frequent node creation/destruction hurts performance. Reuse nodes via Cocos’

NodePool

to cache and recycle objects such as enemies or bullets.

Collision Detection

Prefer simple box or circle colliders over complex polygon colliders to reduce CPU load.

3. Memory Optimization

Memory is dominated by cached textures. Distinguish between static resources (loaded at scene start) and dynamic resources (loaded asynchronously via

cc.loader.load

or

cc.loader.loadRes

).

Inspect the current cache with

cc.loader._cache

or the

ccc-devtools

plugin, which also shows texture sizes.

Reduce memory by eliminating unnecessary assets, loading platform‑specific resources only when needed, and avoiding large background images when a solid color or procedural background suffices.

Texture compression (ETC1, ETC2, PVRTC) shrinks memory and offloads decoding from CPU to GPU. Choose algorithms based on platform support (ETC1 for most Android, PVRTC for iOS). Note that compression is lossy and may require different formats for alpha‑enabled textures.

Release unused memory promptly: enable automatic scene resource release, or call

cc.assetManager.releaseAsset

for manual disposal. Dynamic resources need explicit handling via

cc.setAutoReleaseRecursively

or

cc.loader.releaseRes

.