This PR is a continue of #3265

It contains mainly two important improvements:

1. Moving MVMatrix * a_position calculation from GPU to CPU (Saving a great amount of buffer for auto batching)
2. Provide a global unified buffer for all Sprites to share

There are some details to discuss:

I found a strange result inconsistence between desktop browser and mobile browsers, for the sprites global buffer, I have two option to update them:

1. Whenever a sprite hosted in the global buffer is dirty, use bufferSubData to refresh the WebGL buffer, so probably one gl bufferSubData call with the whole buffer per frame.
2. Separately invoking bufferSubData for each dirty sprite during its rendering function, so multiple (one for each dirty sprite) bufferSubData with small data sections per frame.

~~It turns out on desktop it's faster using option 1 than using option 2, while on mobile (iOS Safari and Android Chrome) it's just the contrary, option 2 is faster (significantly).~~ It turns out on desktop it's faster using option 2 than using option 1, while on mobile (iOS Safari and Android Chrome) it's just the contrary, option 1 is faster (significantly).

Secondly, this PR doesn't bring any performance improvement on desktop Chrome, it's even not as good as before. But it do improve the performance on mobile especially on Android.

Does anyone know what's happening here ?

@dabingnn @JareGuo @1scaR1 @Heishe

I've occured a bug that is present only when drawing with canvas using additional transform. Here is a sample of code wich will draw differently for webGL and canvas:

// Create 2 narrow and long sprites
var rect = cc.rect(1, 1, 2, 52);
var sp1 = new cc.Sprite("mirrow_2.png", rect);
var sp2 = new cc.Sprite("mirrow_2.png", rect);
sp1.setAnchorPoint(0.25, 1);
sp2.setAnchorPoint(0.25, 1);

// Create 2 container nodes for them
var s1 = new cc.Node();
var s2 = new cc.Node();
s1.addChild(sp1);
s2.addChild(sp2);

// Set additional transform for them
var trans1 = { // Works well in both modes
    "a": 0.707,
    "b": 0.707,
    "c": -0.707,
    "d": 0.707,
    "tx": 0,
    "ty": 0
};
var trans2 = { // Works bad in canvas mode
    "a": -0.707,
    "b": 0.707,
    "c": 0.707,
    "d": 0.707,
    "tx": 50,
    "ty": 0
};

s1.setAdditionalTransform(trans1);
s2.setAdditionalTransform(trans2);

// Create and locate root element
var root = new cc.Node();


root.setPosition(300, 200);
this.addChild(root);

// Add containers to the root element
root.addChild(s1);
root.addChild(s2);

The results are following: webGL canvas

Here is a sprite I used 'mirrow_2.png':

The WebGL renderer have been greatly improved ! Again !

It's still a draft implementation, many bugs still hang in there, but anyone wants to review or discuss about the implementation, feel free to do so.

The general idea was to remove all the cache, complicate logic in v3.11, and use a much cleaner implementation to reduce memory usage and CPU cache miss. And it's working, more faster than v3.11 which have monstrous virtual buffer logic. As a result of memory usage reducing, now the engine is performing much better on Android devices, especially low end ones.

To be noted: Camera is removed because I changed from 44 matrix to 32 affine transform matrix. No more camera in Node and no more camera actions. Hope this won't affect many people

Hi, I currently notice that cocos2d-html5 doesn't offer any ability to set text styles: bold, italic, etc. and the pixel height of spacing between text lines.

Bold effect is something I can somewhat replicate through Label's stroke property, but line spacing can't be achieved currently unless I manually take apart strings and hard place each of them.

It would be great if line spacing (vertical space between lines) for label text could be set as a property through code.

An issue here was created back in Februrary asking for similar features, and was given the reply that it would be implemented after March. It's currently almost August - it would be great if this could be done by the cocos2d-html5 team.

cocos2d-x and cocos2d-js use CCGLProgramState to manage their shader uniforms. A CCGLProgramState owns a reference to a CCGLProgram, and manages the uniforms on that shader program.

cocos2d-html does not have an equivalent to CCGLProgramState. This makes it impossible to bind multiple sampler2D uniforms to a single shader. It also makes it difficult to do late binding uniforms across different nodes using the same shader program.

This PR gives an implementation for CCGLProgramState on web, and updates rendering code to use CCGLProgramState instead of a shader program directly.

This is a rather large PR, and I am more then willing to write tests for this if the maintainers want me to. I am going to hold off doing so until I know the maintainers are interesting in merging this work in.

I think api in html5 version is too old to use it in pair with cocos2d-x 3.9 lib(with js-bindings). So i changed it using code base of cocos2d-x classes.

It fixes the missing array brackets in the sequence call and moves the callback to the inScene because outScene can be optional (very first scene) so the engine will miss the callback, with bad consequences like disabled events.

• remove calling of very heavy function gl.GetParameter
• clear depth & stencil buffer by gl.clear
• use stencilOp gl.REPLACE on before draw stencil

This patch improves performance of stencil clipping in web GL Render. It passes all clipping tests.

Here performance compare in scene with ccui.ScrollView and 5 ccui.Layouts with clipping enabled in it(In Google Chrome browser, Core i7 Processor, GeForce 750M graphics):

• Before(first Task Manager of Chrome for game tab, second CPU profiler):

• After(first Task Manager of Chrome for game tab, second CPU profiler):

Right now if i cache a scene with one button widget your listener will be added in the eventMananger and will swallow touch events even if the scene is not running.

In the cocos2d-x (cpp version) the listeners are removed and added in the onExit and onEnter envets, so i added an method called _manageListener to add or remove the listener to be called in these functions, setTouchEnabled now only call _manageListener if the _onRunningScene is seted, but it will always remove the listener.

Hello! There is one bug with #3090 merge(and works also at HEAD of develop branch): after changing position of ccui.Layout with ccui.Text(may be simple cc.Layer with cc.LabelTTF) , text stay at the same position on screen(not moving with layout). But this bug works in case of using specific layer for my game, which uses topological sorting of sprites on it. Sorting is implemented with update() function and callingthis.scheduleUpdate().

Tested on Google Chrome and Safari.

Here is the sample code of reproducing of bug: http://pastebin.com/EehPwt7U and some images:

• Initial positions
• After moving in ccui.ListView

Hi, this is a proposal patch to fix #1266,

It's trying to bind all overridden parent functions as _super_METHOD_NAME. This syntax looks a little ugly but it seems we have to use this string-concatenation approach. Because:

• it's hard to bind 2-depth property into prototype
• if we let the syntax be this._super.method_name. Then the method should be called on this._super instead of this. (Although we can user function.bind trick, but we shouldn't, because it is the JavaScript convention.)

This patch introduced a little incompatibility:

• if any user code tried to extend framework classes, AND used the this._super(...) syntax. It would yield a deprecation error.

update:

• I used Function.caller to polyfill the _super method, any existing user code (using this._super syntax) will still work.

Hi, i get the files using clone in my MAMP server and i have this error when i open the template sample:

cc._addEventListener is not a function

What is the solution?

Thanks

When I use ccs.dataReaderHelper.addDataFromFile to read .csb file like below:

ccs.dataReaderHelper.addDataFromFile('res/myui.csb');

I get error:

cocos2d-js-v3.13.js:57555 Uncaught TypeError: ccs.dataReaderHelper.addDataFromBinaryCache is not a function
    at Object.addDataFromFile (cocos2d-js-v3.13.js:57555)
    at Object.cc.game.onStart (test.html?_ijt=hhnmd6tfcppjnmr010d3db9eub:31)
    at Array.<anonymous> (cocos2d-js-v3.13.js:1259)
    at cocos2d-js-v3.13.js:350
    at cc.AsyncPool.self.flow (cocos2d-js-v3.13.js:146)
    at Object.map (cocos2d-js-v3.13.js:197)
    at Object.loadJs (cocos2d-js-v3.13.js:337)
    at Object.loadJsWithImg (cocos2d-js-v3.13.js:347)
    at Object.prepare (cocos2d-js-v3.13.js:1256)
    at cocos2d-js-v3.13.js:1268

I can not find any implementation about the function addDataFromBinaryCache, some one can help me?

else if(str === ".csb")
            ccs.dataReaderHelper.addDataFromBinaryCache(filePath, dataInfo);

This line :

var cs = locWidget.getContentSize();

should be fixed:

var cs = locWidget.getBoundingBox();

Of course there are some other lines should be fixed in this file (UILayoutManager.js)

Cocos version: 3.8 IOS version: 12.3.1 Devices: IPhone XS, IPhone XS Max

Hi! There is a strange problem with buttons on IPhone XS and IPhone XS Max - cocos buttons are not working only in Landscape mode. Cocos version 3.8.

The same problem is in PIXI js engine, but there is workaround:

canvas.focus(); canvas.tabIndex = 1;

It seems that canvas is not in focus and lost its tabIndex I've tried the same fix in cocos but it doesn't work.

What could be the problem with?

Repo head does not passes layout test for scaled widgets Corrected layout management for widgets to use bounding box instead of content size. Before fix:

After fix: