Custom Node / Custom Renderer

Two (somewhat related) questions.

There is a “Custom Nodes” tab in the node library that is empty, and looking through the extension store and documentation I can find no hint how I would go about populating it. Is it possible?

The custom node I’d like to put there is a custome javascript class that performs its own rendering using webgl. Is it possible/supported to add my own custom renderer as a cc.Component of some kind?

Hi!
About custom render components:
In short - yes, you can do them, but you’ll have to implement them in both JavaScript and C++ to cover all platforms;
All cc.Components are written in JS - both yours and engine’s. However, all renderable components use underlying layer of _ccsg.Node classes - that’s where all rendering is done. This _ccsg layer uses different implementations for different platforms:

On web it’s all JavaScript:
JS components <-> JS _ccsg.Nodes

On all other platforms C++ engine core + JSB is used:
JS components <-> JSB <-> C++ _ccsg.Nodes

To implement your own renderers (in a proper way) you’ll have to go down to _ccsg.Node and _ccsg.RenderCmd classes.
That’s simple for web: you can just add your JS classes inherited from these to your project and it’ll work. For my current project I’m using such homemade renderer components and I’m pretty happy with them, I can show you some examples if you like.
On other platforms it gets worse: you’ll need to implement your own C++ _ccsg.YourNode and _ccsg.YourRenderCmd, add them to C++ engine and make them work with your JS component through JSB

I would absolutely love a simple example. All I need is the JS - we have no motivation at this time to target c++/JSB - our output is HTML5 only.

I presume that all your knowledge of _ccsg.Node and _ccsgRenderCmd is reverse engineered from source? I can’t find any documentation that talks about these things. The cocos2d-js that ships with CocosCreator is a single compiled/merged .js file. And If I download the latest Cocos2d-x distribution I can get all the CCxxx.js files separately, but (despite current/active updates on the git project) seems to be a different version of cocos2d-js that still uses cc.Node._renderCmd - which is entirely wrong. If I could find the “good” full sources for the cocos js that Creator uses I might be able to figure out more stuff for myself. :confused:

CC’s github:


Win versions (at least up to 1.5.1) also have unminified engine code in CocosCreatorInstallPath/resources/engine/

Yeah, I believe there are no open docs on CC render cycle, and it doesn’t surprise me cause it’s source is still pretty raw, has some cocos2d-js leftovers and some minor changes pop on every major update. Also cocos team have to maintain C++ counterpart, so it’s predictable that they don’t want us to go deeper than cc.Component :smile:

Here’s some little demo with custom RenderTexture component and shaders that work with sprites, spines and render textures. Should work with CC 1.6.1
Check out my fancy outlines working right in the editor like they’re not some homebrew mess :stuck_out_tongue:

4 Likes

Wow. Thats awesome. So much to dig through. Thanks a lot for sharing that.

The upgrade to CC 1.9 seems to have broken this project. No fault of its own that I can see.

TypeError: Cannot read property ‘getContentSize’ of undefined
at callonEnableInTryCatch (eval at misc.tryCatchFunctor_EDITOR (/Applications/CocosCreator.app/Contents/Resources/engine/cocos2d/core/utils/misc.js:107:16), :8:20)
at CCClass.cc.Class.statics.invokeOnEnable.compScheduler [as _invoke] (/Applications/CocosCreator.app/Contents/Resources/engine/cocos2d/core/component-scheduler.js:293:21)
at CCClass.invoke (/Applications/CocosCreator.app/Contents/Resources/engine/cocos2d/core/component-scheduler.js:153:14)
at CCClass.activateNode (/Applications/CocosCreator.app/Contents/Resources/engine/cocos2d/core/node-activator.js:227:27)
at cc_Scene._activate (/Applications/CocosCreator.app/Contents/Resources/engine/cocos2d/core/CCScene.js:96:36)
at TheClass.runSceneImmediate (/Applications/CocosCreator.app/Contents/Resources/engine/cocos2d/core/CCDirector.js:615:19)
at /Applications/CocosCreator.app/Contents/Resources/engine/cocos2d/core/CCDirector.js:822:34
at CCLoader. (/Applications/CocosCreator.app/Contents/Resources/engine/cocos2d/core/platform/CCAssetLibrary.js:110:17)
at /Applications/CocosCreator.app/Contents/Resources/engine/cocos2d/core/load-pipeline/CCLoader.js:255:38

Yeah, sorry to say, I don’t keep up with newer CC versions, out team is still sticking to 1.6.2 so I don’t have enough motivation to keep this thing up to date :frowning_face:

Hello,

  1. I am trying to add a custom node to the custom node Tab.
    However, the custom node the I created shows only on the current project.
    Can I add custom Node that appear every time I creates new project?

  2. Is there a way to create (drag & drop) an empty Node?
    Currently I am dragging a Sprite Node and removing its components… :frowning: