cc.Drawnode 移动时会发生闪烁的问题

Cocos2d-x JavaScript
#1

环境:

cocos2d-x 3.14.1
cocos2d-x 3.15
Mac OSX 10.11.1
Version 57.0.2987.133 (64-bit)

重现方式十分简单，首先绘制一条，竖着的，黄色线段:

var draw = new cc.DrawNode();
draw.drawSegment(cc.p(200, 200), cc.p(200, 400), 1, cc.color.YELLOW);
this.addChild(draw);

然后使用 runaction，让它向右水平移动:

draw.runAction(cc.MoveBy.create(2.0, cc.p(400, 0)));

当速度肯快的情况下，不会看出任何问题。

但是当速度变得很慢:

draw.runAction(cc.MoveBy.create(100.0, cc.p(400, 0)));

可以看到，移动过程中，线段不停的闪烁 (粗细变化，换色的亮度变化，忽明忽暗)。

尝试了下 cc.DrawNode + cc.RenderTexture 倒是可以避免这种问题，但是还是想要问一下，为什么单纯使用 cc.DrawNode 的时候，会出现这样的闪烁问题。

sss.gif670×512 13.5 KB

希望官方解答，谢谢。

#2

在英文论坛搜索到了很多关于 Flicker 问题的帖子，其中有提到使用 cc.director.setDepthTest 来解决问题，但是尝试以后还是没有任何的效果 …

#3

可能是光栅化过程中的像素对齐问题导致的，也可能是 JS 浮点运算导致的，使用 RenderTexture 的时候，相当于把 Drawnode 结果当作一张稳定的贴图，所以贴图尺寸恒定的原因把

#4

那就是说暂时没有解决的方案了是吧，只能将其贴图化 …

我没有进行贴图化有个原因，因为我的应用场景 :

是每帧计算，生成需要绘制的的线段(假设数量 100+)，范围布满全屏区域。

在仅仅使用 cc.DrawNode 的情况下，只需要:

drawNode.clear();
drawNode.drawSegment(......);
drawNode.drawSegment(......);
drawNode.drawSegment(......);
....

就行了。

在配合 RenderTexture 使用的情况下，我需要创建一个全屏的 RenderTexture，然后每帧 :

renderTexture.clear(0, 0, 0, 0);
renderTexture.begin();
drawNode.clear();
drawNode.drawSegment(......);
drawNode.drawSegment(......);
drawNode.drawSegment(......);
drawNode.visit();
renderTexture.end();

记得早期的版本中，后者的效率是低于前者，现在不知道如何了 …

#5

请问有js box2d中 var canvas=document.getElementById(“gameCanvas”); var context=canvas.getContext(‘2d’);context为null的方法吗？我想在js的物理引擎中显示刚体的区域；

#6

你好，请问这个问题 现在有好的解决方案吗？移动物体闪烁的问题？