problem rendering with cc.SpriteBatchNode vs cc.Layer

problem rendering with cc.SpriteBatchNode vs cc.Layer
0.0 0


Hello Cocos2dx forum,

I’ve been stuck for hours attempting to figure out my mistake. I am attempting to do a simple testing case drawing a grid of 32x32 terrain tiles.

A quick run down of my test environment:

  • Chrome Version 32.0.1700.76 m
  • Cocos2dx HTML 5 version 2.2.2
  • WEBGL Rendering mode

I have included 2 screen shots. The first screen shot shows my problem, which is the Sprite tiles do not appear to be lining up/drawing correctly when added as children of a cc.SpriteBatchNode. When I use the same grid offset logic for a cc.Layer containing the same set of sprites, they appear to line up just fine.

Code snippet in my code for rendering with cc.SpriteBatchNode:

  // Get my resource object
  var tilesetRes = mc.ResourceLibrary.get("img_tileset_test");

  // Get the plist for the resource and add it to the frame cache

  // Create a batch node with the resource image and space for children nodes
  this.tileLayer = cc.SpriteBatchNode.create(tilesetRes.getImg(), 128 * 128);

  // Add SpriteBatchNode to parent cc.Layer

  //... Loop through grid
  // Create and add next sprite
  nextSprite = cc.Sprite.createWithSpriteFrameName("grass32.png");
  nextSprite.setPosition(this.getTileOffsetWorld(new cc.Point(c, r)));

  //... End loop

Any suggestions? I appreciate any responses. I also want to note I am aware of Tiled/TMX but am not looking to solve this using those APIs at the moment for project-specifc reasons.

Thank you.

grid_ccbatchnode.png (206.6 KB)

grid_layersprites.png (225.6 KB)


Sorry I don’t have a clue on why the batch appears like that,

but you should give tile/tmx a shot, not only it is a working solution, it is also optimized, so the result map gets cached and drawn like a single sprite, instead of single draw call but thousands of transformation of the spriteBatch solution, or thousands of draw calls from the sprite/layer solution


Hi, Nicolas

As Hao has said, you can try cc.TMXLayer
For the problem you have met with sprite batch node, it’s possibly due to the transformation. The calculation of transformation is a little bit different than layer sprite structure, and even worse, the precision of the float calculation in javascript is insufficient, I think this is the reason of the problem.

I strongly recommande you to use cc.TMXLayer too, it’s much easier to use.



Hi Nicholas,

This is a known issue, you can modify cc.FIX_ARTIFACTS_BY_STRECHING_TEXEL to 1 in CCConfig.js to turn on this item to solve this problem.

Hopes to help.


Thank you for the responses.

I tried ‘cc.FIX_ARTIFACTS_BY_STRECHING_TEXEL = 1’ in CCConfig.js. This helped alleviate the dark borders around each tile, although they are still barely visible (more so when the parent ccSpriteBatchNode is scaled to be larger).

I will take your advice on the TMXLayer and try to integrate that into my level editor. Interesting insight on the optimizations, I didn’t realize the performance would be much better than the batch node.

Thanks again for the help all.