problem rendering with cc.SpriteBatchNode vs cc.Layer

cocos2d-x JavaScript
#1

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
  cc.SpriteFrameCache.getInstance().addSpriteFrames(tilesetRes.getPlist());

  // 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
  this.addChild(this.tileLayer);

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

  this.tileLayer.addChild(nextSprite);
  //... 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)

#2

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

#3

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.

Huabin

#4

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.
David

#5

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.