why this same image(BMFont, exist in png too) are different drawn in WebGL and canvas mode?
see the attachments
this is canvas
this is webgl
in canvas it’s correct
ps. the background is not same one. just care the bm font
Hi @Inshua,
Could you give us some codes or a demo to produce the problem?
I think this problem maybe caused by blendFunc.
Best regards
David
Hi， David
i’d made a simple sample here:
test.zip (708.9 KB)
the sample page is test/webgl_and_canvas.html,
the difference maybe not obvious like the first post, but still can see that in webgl it’looks fuzzy.
thank you
i change to v3, and modify projection in CCDirectorWebGL.js and set projection default to cc.Director.PROJECTION_2D, then the fuzzy problem gone, but since the lightening still not changed, their sizes are different yet.
see below
and how can i set up PROJECTION_2D by pass config argument?
Hi @Inshua,
There isn’t a config argument to set up PROJECTION_2D , you can call this code at program:
cc.director.setProjection(cc.Director.PROJECTION_2D);
I have tested this problem at cc.Texture2d, if I changed the code
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
to
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
The effects like this
The left side is canvas Mode, other side is WebGL mode.
You can use setAliasTexParameters and setAntiAliasTexParameters to turn off/on the AntiAlias, like this:
testSprite.getTexture().setAliasTexParameters();
Hi @ludingping
thank you very much
i have changed cc.DIRECTOR_PROJECTION_DEFAULT to PROJECTION_2D, and change LINEAR to NEAREST, but they are still drawn in diffrent sizes. any suggest?
here test code to make 6 sprites:
var test = cc.Sprite.createWithSpriteFrame(frameCache.getSpriteFrame('remainTimeLabelBg'));
test.setAnchorPoint(0, 1);
test.setPosition(0, cc.canvas.height);
this.addChild(test);
var test = cc.Sprite.createWithSpriteFrame(frameCache.getSpriteFrame('remainTimeLabelBg'));
test.setAnchorPoint(0, 1);
test.setPosition(0, cc.canvas.height / 2);
this.addChild(test);
var test = cc.Sprite.createWithSpriteFrame(frameCache.getSpriteFrame('remainTimeLabelBg'));
test.setAnchorPoint(0, 0);
test.setPosition(0, 0);
this.addChild(test);
var test = cc.Sprite.createWithSpriteFrame(frameCache.getSpriteFrame('remainTimeLabelBg'));
test.setAnchorPoint(0.5, 1);
test.setPosition(cc.canvas.width/2, cc.canvas.height);
this.addChild(test);
var test = cc.Sprite.createWithSpriteFrame(frameCache.getSpriteFrame('remainTimeLabelBg'));
test.setAnchorPoint(0.5, 1);
test.setPosition(cc.canvas.width/2, cc.canvas.height / 2);
this.addChild(test);
var test = cc.Sprite.createWithSpriteFrame(frameCache.getSpriteFrame('remainTimeLabelBg'));
test.setAnchorPoint(0.5, 0);
test.setPosition(cc.canvas.width/2, 0);
this.addChild(test);
this wont occurpy if only one sprite at the center and middle of the screen.
Best Regards
erh, the “different sizes” is an illusion… i have compared the pixels size, they are aboslutely equal
thank you again
Hi @ludingping,
Now a new problem come , after use 2d projection, the OrbitCamera doesnot work.
i think the best way is, let the ui elements such as label, button etc, use projection 2d, and other elements in 3d.
any suggestion?
Hi @Inshua,
You needn’t set the projection to PROJECTION_2D, set the setAliasTexParameters only.
My screenshot of my reply is only call setAliasTexParameters .
Hopes to help.
David
if you are using texture packer, also experiment with “premultiplied alpha” setting
Hi @ludeping,
thank you very much, it works now.
since the alias means alias, these elements cannot rotate or skew, but anyway it works fine for my case.
Thanks
Hi @Wuhao,
can you show me a short piece of this kind of plist? i am making plist myself, i havn’t texture packer
thanks
im talking about this setting
This fixes the issue for blured sprites but breaks others. The problem is on WebGL only …on canvas all works great.
I have this problem with blured sprites:
I used the approach proposed by @ludeping and it fixėd the problem for scrolls:
But this approach breaks other sprites in the game. Some of them look normal but some of them totally broke.
Before using this approach:
After using this approach:
I am using cocos v 3.2.
The “premultiplied alpha” setting in Texture Packer does not affect the problem.
All sprites look good only scroll sprites are blured.
This is the third game that I am developing using cocos engine and I have never got this problem with blured sprites before, so I am really confused about this issue.
Does anyone have the same issue or know what can cause this problem or how to fix it?
Nobody have the same issue ?
I have the same issue 
Anybody knows a solution?