preface

There are many posts on the forum, many people say that the big project of Creator is stuck, and they are struggling to find a solution.

This is very uncomfortable for everyone who wants to use Creator to make a big project or is working on a project.

This may cause them to give up their love of Creator and make another choice.

Or when you get on the bus, you can’t fill the hole and the project doesn’t work, which is even more sad.

What to do? I had an idea during the Spring Festival: I wanted to touch the upper limit of Creator. See in the end can solve the problem of big project stuck, but also for your friends to explore the way.

Some time ago the exploration, successful.

That lets me know that Creator has no problem developing big projects.

We can use Creator to cool, always use straight.

Article: I want to touch the upper limit of Creator

A friend in deep trouble came to me last week and asked me to help

I was so happy to help him.

Recently, I was busy with the version of the project, so the progress of improving the solution was slow.

Late but late

Video demo:

www.bilibili.com/video/BV1hh…

Plug-in address:

Store.cocos.com/app/resourc…

What do we feel bad about?

Let’s start with a very comfortable development situation

I change a line of code and immediately see what's going on

What makes people feel bad?

I changed a line of code and waited forever to get it up and running

The shorter the feedback, the more comfortable it is

In fact, there is an interesting concept called immediate feedback, which is one of the conditions for entering a flow state (that is, a euphoric and immersive state) if you are interested.

CocosCreator allows us to get quick feedback as we develop our games

  1. Edit the scene, save it and refresh it to see the result
  2. Change the code, compile it now and see what happens
  3. Shader changes are also immediately visible
  4. If you encounter difficulties or bugs, you can find a solution in the forum

This one is comfortable

But the more resources the project has, the more it changes a line of code, and the longer it gets stuck, the more uncomfortable it gets.

Most of the later part of the project will probably be code changes, which means you’re stuck. It’s like eating shit.

Actually…

In fact, many engines have problems such as lag and long feedback time when there are many project resources. This is a common problem.

If you have a problem, solve it. Let’s find out why

Plus :CocosCreator has done a great job, hasn’t it?

Caton’s roots: the resource management mechanism of the Creator editor

The Creator editor analyzes all the resources and records their dependencies.

Meta files record resource information and dependency information

Resource modification, addition, and deletion may lead to changes in dependency information.

So Creator monitors all assets files, and when a resource changes, the editor iterates over the impact of the change.

This is to ensure that dependencies are accurate and will alert you immediately if they are missing.

Therefore, the processing time becomes longer and longer as more resources are available.

This is also the reason for the following situation

  1. Save the Prefab. It’s stuck
  2. Save the code, it’s stuck for a long time

Is the so-called success is also a failure

Solution: tear down

In fact, there are plans for this idea on the forum, such as

  1. Pre-type an image into an atlas => Reduce the image resource amount
  2. Put resources into the CDN

Creator officially introduced their solution in Creator2.4.x :AssetBundle

I don’t think the lag problem can be solved by dividing assetBundles within a project. Because the amount of resources has not changed, the processing time has not decreased

But if you make the AssetBundle of the resource in another project, then export it. This will solve the problem.

These solutions are useful, but troublesome. How can they be made more convenient and non-perceptive?

And then there’s the question of how to load parsing atlas, keel, Spine, and even fGUI published resources and TileMaps.

Because the official interface, load remote resources: can only load simple images, audio, text

Document portal 🚪:

Docs.cocos.com/creator/man…

My solution

Solution for splitting resources

The first:Custom web preview

I don’t know if you know this exists.

Document portal:

Docs.cocos.com/creator/man…

Create preview-Templates in the project root directory, and the editor’s preview function will start in that directory

You put external resources into this folder, use the remote load interface, and you can load resources into this folder

// Put someres.png directly into preview-templates
var remoteUrl = "someres.png";
cc.assetManager.loadRemote(remoteUrl, function (err, texture) {
    // Use texture to create sprite frame
});
Copy the code

But doing so requires you to handle the resources yourself at build time, copying them to the release directory

The second:Plug-in aswallow (rhymes: Love me)

  1. Development Preview supports the preview server logic in Hook Creator, which allows you to access directories outside of assets. This does not affect the original preview server logic. You can simply put the resources that need to be split into ext-res outside of assets. This ext-res can also be modified by modifying local/aswallow-config.json
  2. Publish build support automatically copies resources to the build output directory when building. MD5Cache is enabled in the build configuration to add MD5 to the file name. Json /custom build-scripts/custom build.js build support for Creator2.3.x and 2.4.x, as well as release build support: Of course, it will be more perfect if it works with the following: PS: Jare said that Assetbundle can be released separately, I did not find it. However, by publishing the resource project to the Ext-res folder, you can load the Bundle resources in it remotely

Complex resource load resolution scheme

This actually quite distressed, there is no official interface.

I found the keel load parsing logic in the forum, and then breakpoint run to see the source code perfect. Atlas, spine, Tilemap is also a breakpoint run to see the source code implementation.

After finding the parsing method, we implemented Aswallow-asset-Manager based on this

It makes it easier to load, parse, and manage external resources (atlas, keel, Spine, TileMap, fGUI published resources)

By loading the version file, you can easily load and parse resources with the MD5 suffix (if the loading logic is unchanged).

Example:

  1. Load the atlas
aswallow.extAssetMgr.load([{ url: "atlas/emoji".assetType: "plist"}].(err, result) = > {
            console.log(result);
            const atlas =  aswallow.extAssetMgr.get("atlas/emoji.plist") as cc.SpriteAtlas;
            console.log(atlas);
            this.emojiSp.spriteFrame = atlas.getSpriteFrame("emoji1")}); }Copy the code
  1. Loading pictures
let asset: cc.Asset;
let index = 0;
this._scheduleCallback = () = > {
    asset = aswallow.extAssetMgr.get(`${iconRoot}/i${index}.png`);
    index = Math.floor(Math.random() * 10);
    this.sp.spriteFrame = null;

    this.sp.spriteFrame = new cc.SpriteFrame(asset as cc.Texture2D);
}
let iconRoot = "fgui-res/Icons";
let resPaths = [];
for (let i = 0; i < 10; i++) {
    resPaths.push(iconRoot + "/i" + i + ".png");
}
// cc.assetManager.preloadAny()
aswallow.extAssetMgr.load(resPaths, (err, result: aswallow.ILoadResult) = > {
    if(! err) {console.log('Load successful')
        console.log(result);

        this.schedule(this._scheduleCallback, 1, cc.macro.REPEAT_FOREVER);


        // this.sp.spriteFrame.ensureLoadTexture();}});Copy the code
  1. Load the keel
const extAssetMgr = aswallow.extAssetMgr; 
extAssetMgr.load([
    { url: "dragonbones/dragon/texture.json".assetType: "DragonBonesAtlasAsset" },
    { url: "dragonbones/dragon/NewDragonTest.json".assetType: "DragonBonesAsset" },
    "dragonbones/dragon/texture.png"].(err, items) = > {
    console.log(items)
    this.dragonBone_json.dragonAsset = extAssetMgr.get("dragonbones/dragon/NewDragonTest.json") as any;
    this.dragonBone_json.dragonAtlasAsset = extAssetMgr.get("dragonbones/dragon/texture.json") as any;
    this.dragonBone_json.armatureName = 'armatureName';
    this.dragonBone_json.playAnimation('stand'.0);
});
// Load binary

extAssetMgr.load({ url: "dragonbones/sword-man/SwordsMan".assetType: "DragonBonesAsset".ext: ".dbbin" }, (err, items) = > {
    this.dragonBone_bin.dragonAsset = extAssetMgr.get("dragonbones/sword-man/SwordsMan_ske.dbbin") as any;
    this.dragonBone_bin.dragonAtlasAsset = extAssetMgr.get("dragonbones/sword-man/SwordsMan_tex.json") as any;
    this.dragonBone_bin.armatureName = 'Swordsman-NestArmature';
    this.dragonBone_bin.playAnimation('walk'.0);
})
Copy the code
  1. Loading has been
const extAssetMgr = aswallow.extAssetMgr;

extAssetMgr.load([{ url: "spines/spineboy/spineboy.json".assetType: "SpineAsset" },
                    "spines/spineboy/spineboy.txt"."spines/spineboy/spineboy.png"].(err, items) = > {
    console.log(items)
    this.spine_json.skeletonData = extAssetMgr.get("spines/spineboy/spineboy.json") as any;
    this.spine_json.animation = 'run';
});
// Load binary
extAssetMgr.load([{ url: "spines/spineRatorBin/raptor-pro.skel".assetType: "SpineAsset" },
                    "spines/spineRatorBin/raptor-pro.atlas"."spines/spineRatorBin/raptor-pro.png"].(err, items) = > {
    console.log(items)
    this.spine_bin.skeletonData = extAssetMgr.get("spines/spineRatorBin/raptor-pro.skel") as any;
    this.spine_bin.animation = 'walk';
    // this.spine._updateSkeletonData
});
Copy the code
  1. Loading fgui
// The interface does not change
Copy the code
  1. Resource release (Taking releasing the spine resource as an example)
aswallow.extAssetMgr.release([
    { url: "spines/spineboy/spineboy.json".assetType: "SpineAsset" },
    "spines/spineboy/spineboy.txt"."spines/spineboy/spineboy.png",
    { url: "spines/spineRatorBin/raptor-pro.skel".assetType: "SpineAsset" },
    "spines/spineRatorBin/raptor-pro.atlas"."spines/spineRatorBin/raptor-pro.png"
])
Copy the code

Temporary support for 2.4.x, release and build test passed platforms: Android native, Web, wechat small games (other small game platforms should also be acceptable)

The last

CocosCreator is pretty powerful, isn’t it?

The caton problem is easy to solve, isn’t it?

I hope everyone who loves Cocos doesn't have to worry about developing big projects with Creator

I hope my friends in the development of big projects will no longer suffer from lag

I hope every CocosCreator project succeeds

I’m really glad I could help you.

If you like my solution and want to play game development together

Welcome to follow my public number

Public number search: play game development

Or scan code:

QQ group: 1103157878

Blog homepage: ailhc.github. IO /

The Denver nuggets: juejin. Cn/user / 306949…

github: github.com/AILHC