Re-order particles system together with sprites off a batchnode

cocos2d for iPhone » Programming » cocos2d 3rd party extensions

Re-order particles system together with sprites off a batchnode

(64 posts) (8 voices)

Started 1 year ago by itlgames
Latest reply from vikrambhatla

Tags:

12 3 Next »

itlgames
Moderator

Hi Riq, following the comment on this post, I'm very interested to know how we can reorder set of sprites from a batchnode mixed with a particle system.

My case scenario is an isometric engine where I use the particles for effects on some tiles/objects and for shoots, and therefore when I re-oder my movable sprites, I need to be able to include as well the particles. Right now I can do this only if the sprites are not part of a batchnode, so I jsut add the particle as child of my sprite and all works fine.

But obviously the problem is the penalty I get on performance not using a batchnode. At the moment I can say I can run safely at 30fps in most situations without batchnodes, but I really would like to use one and improve performance.

I'm not good when it comes to openGL but if I get the idea I can try to implement the solution.

Posted 1 year ago #
riq
Key Master

How are you reordering the sprites ? by changing vertexZ ? or z-order ?

Posted 1 year ago #
itlgames
Moderator

zorder, so reordering the children of the parent node. I tried with vertex time ago and desisted cos had issues with transparencies.

Posted 1 year ago #
riq
Key Master

using z-order:
- split the TMX map (assuming that you are using TMX) in layers. Each layer uses a sprite batch node. If you have 15 layers, you will have 15 batch nodes.
- your sprite / particle can be reordered.

using vertex Z:
- use "alpha test". See the tilemapTest. It contains an example that shows how to reorder using it.

Posted 1 year ago #
itlgames
Moderator

Thanks Riq, I'm not using a TMX map, cos I did my game before you introduced the isometric support. I cannot split in layers, the way my engine works, the zordering is, not sure how to define, absolute, I can have any sprite of any size on any position, including heights, so I would need a layer for each sprite really, or at least one layer for each sprite on same or near zorder, and would need to move sprites from one batch to another in every frame as they move along the screen.

I'm not good when down to openGL and more low level graphics code, but will see what I can do, last time I experimented with vertexZ I had issues with transparencies, as I think we still need to reorder them properly, and get the same problem of not been able to reorder sprites on a batchnode mixed with particles.

Thanks for the help.

Posted 1 year ago #
araker
Moderator

@itlgames, the changes to CCTextureAtlas/CCSpriteBatchNode I've suggested here, can also be used for drawing your particles between arbitrary sprites in a batch node. It's basically the same as dividing the map into batchnodes, though on a lower level.

Posted 1 year ago #
itlgames
Moderator

Thanks @araker, I've been following that post as well. Will see if I can get something, but looks like it's complicated, proper isometric reordering with map heights is a pain per se, imaging adding more problems!

EDIT: but so far with no batchnodes it works, I mean, I can re-oder properly (well 99%), just the penalty of lot of drawings, but still I can keep an stable 30fps

Posted 1 year ago #
araker
Moderator

@itlgames, I've seen in the other topic that it can get complicated yes. When you get your own tilemap implementation working in a batchNode, adding the ranged drawing of the batchNode wouldn't (and couldn't) interfere with the ordering/sorting of the batchNode sprites. I don't expect it to cause any additional problems.

Posted 1 year ago #
itlgames
Moderator

Thanks, will take a proper look again and see if I can get something.

Posted 1 year ago #

itlgames
Moderator

Ok, sorry guys if the question sounds silly, as I said I'm not good when it's down to openGL, but is this code suppose to work?

// ask director the the window size
CGSize size = [[CCDirector sharedDirector] winSize];

CCSprite *man = [CCSprite spriteWithFile:@"man.png"];
man.position =  ccp( size.width /2 , size.height/2 );
[self addChild: man];

CCSprite *woman = [CCSprite spriteWithFile:@"woman.png"];
woman.position =  ccp( size.width /2 , size.height/2 );
[self addChild: woman];

CCSprite *kid = [CCSprite spriteWithFile:@"kid.png"];
kid.position =  ccp( size.width /2 , size.height/2 );
[self addChild: kid];

[man setVertexZ:106.0f];
[woman setVertexZ:101.0f];
[kid setVertexZ:102.0f];

It seems it doesn't matter what values I set, I always get the default order (so the order I added to the layer)

EDIT: I'm using cocos2d version 1.0.0, Riq's branch.
EDIt: and I have the [[CCDirector sharedDirector] setProjection:kCCDirectorProjection2D];

Posted 1 year ago #

araker
Moderator

Did you initialize the eaglview with a depth buffer?

Posted 1 year ago #
itlgames
Moderator
Oh yeah, forgot that, I added now:
```
EAGLView *glView = [EAGLView viewWithFrame:[window bounds]
		pixelFormat:kEAGLColorFormatRGB565	// kEAGLColorFormatRGBA8
		depthFormat:GL_DEPTH_COMPONENT16_OES	// 0, GL_DEPTH_COMPONENT16_OES
];
```
Now works but then I see the issues of the transparencies, for example I add the man first to the layer, so if I try to put him on top of the other two, it will cover them, so no transparency for the man. So does it mean I still need to re-order the children on the parent later? Is this the only way round?
Posted 1 year ago #

itlgames
Moderator

Ok, so far I have got the particle system to be in between my sprites on a batchnode, that's good! But I have the issue with the transparencies.

The code:

[[CCSpriteFrameCache sharedSpriteFrameCache] addSpriteFramesWithFile:@"vertex_test.plist"];
CCSpriteBatchNode *spritesheet = [CCSpriteBatchNode batchNodeWithFile:@"vertex_test.png"];
[self addChild:spritesheet z:1];

MySprite *man = [MySprite spriteWithSpriteFrameName:@"man.png"];
man.position =  ccp( size.width /2 , size.height/2 );
[spritesheet addChild: man z:1];

MySprite *woman = [MySprite spriteWithSpriteFrameName:@"woman.png"];
woman.position =  ccp( size.width /2 - 15 , size.height/2 );
[spritesheet addChild: woman z:2];

MySprite *kid = [MySprite spriteWithSpriteFrameName:@"kid.png"];
kid.position =  ccp( size.width /2 - 30, size.height/2 );
[spritesheet addChild: kid z:3];

CCParticleFire *fire = [CCParticleFire node];
fire.texture = [[CCTextureCache sharedTextureCache] addImage: @"fire.png"];
fire.blendAdditive = YES;
fire.position =  ccp( size.width /2 , size.height/2 );
[self addChild: fire z:2];

[man setVertexZ:10];
[fire setVertexZ:20];
[woman setVertexZ:30];
[kid setVertexZ:40];

I found somewhere we could add something like this:

@implementation MySprite
-(void) draw
{
   glEnable(GL_ALPHA_TEST);
   glAlphaFunc( GL_GREATER, 0 );
   [super draw];
   glDisable(GL_ALPHA_TEST);
}
@end

But didn't make any difference, see the result:

I'm sure I'm missing something else, I'm surprised how easy was to get that result anyway, I'm very close to what I need!

Posted 1 year ago #

araker
Moderator

I think you need RGBA8 as pixelFormat for the EAGLView, since your current format doesn't have a alpha channel.

Posted 1 year ago #
itlgames
Moderator

Sorry, excuse my stupidity! I'm usign a batchnode, so I need to extend the batchnode, done so, I overwrote the draw CCSpriteBatchNode method, and got something close!!

But still, the transparencies are not right, what am I doing wrong?

Posted 1 year ago #
itlgames
Moderator

Thanks @araker, I think we posted at the same time! I actually was playing with the glAlphaFunc( GL_GREATER, 0 ) and found that using a higher value, in particular 0.7 I get this result:

I think its much better, I can't understand that value and why is affecting, but it does, the image is still not perfect though, so is it something to do with my PNG files?

Posted 1 year ago #
Matz0r
Member

nice job

Posted 1 year ago #
itlgames
Moderator

Thanks @Matz0r

@araker, the kEAGLColorFormatRGBA8 didn't make any difference, I'm still very surprised the results I'm getting, not too bad so far, but still I'm loosing the smoothness on the borders of the original images, here I am comparing with normal sprites:

So I got no more ideas, is it just the way my png files are done? Why GL_GREATER with 0.7 works but 0.5 still leaves some black border?

Thanks for the help guys, I'm pretty close...

EDIT: thanks Riq, now I understand what you meant with "alpha test"

Posted 1 year ago #

Matz0r
Member

Maybe this :

-(void) draw
{
glTexParameterf(GL_TEXTURE_2D, GL_INTERPOLATE, GL_LINEAR);
}

Posted 1 year ago #

itlgames
Moderator

Thanks @Matz0r, will try later today and post result.

Posted 1 year ago #
itlgames
Moderator

Found couple of related posts, but no solution so far:

http://www.cocos2d-iphone.org/forum/topic/12687
http://www.cocos2d-iphone.org/forum/topic/11692

So far the problem seems the borders, not being as smooth as original files, I can get rid of black border, but lose the smoothness.

EDIT: Also seems the glAlphaFunc is pretty expensive, I'm doing all this to improve my iso engine, where I don't use batchnodes and I can reorder sprites with particles, but if the cost is going to be worst or the same maybe is not worth it? I need to do some tests...

Posted 1 year ago #
itlgames
Moderator
Thanks @Matz0r, but that didn't make any difference, it was actually giving me an error:
```
OpenGL error 0x0500 in -[EAGLView swapBuffers]
```
weird!
Posted 1 year ago #
araker
Moderator

@itlgames, I don't think you can do much to compensate for the lack of smoothness. The smoothness around the characters is a few pixels wide with less intense colors (lower alpha). Those will be discarded by the alpha_func. You can try anti-aliasing for the sprites, or CJ's fix for artifacts which also blurs the texture a bit. Though I don't think it'll help much.

@Matz0r, GL_INTERPOLATE isn't supported in ES 1.1.

Posted 1 year ago #
itlgames
Moderator

Thanks @araker, pity, so close to get it!! It was probably too good to be true...

I tried antialiasing and didn't help, though I prefer not to alter the texture. Anyway, it seems there is no way to get this done, not with those kind of graphics, I guess on my old game which uses pixel art it should be fine, since I don't have lower alphas on the borders I guess.

Posted 1 year ago #
itlgames
Moderator

That leaves me only with the drawNumberOfQuads option, to be honest not sure how to apply here, from my code above using the batchnode and the particle, how would we use the drawNumberOfQuads function?

Posted 1 year ago #
Matz0r
Member

Its possible to modify the batchnode to use 1 plist and 2 or 3 textures?

Posted 1 year ago #

araker
Moderator

It would be something like this, though this simple example needs to be made dynamically.

//initialization code stays the same, vertexZ, depth buffer and alpha func aren't needed anymore

//draw of batch node
-(void) draw
{
  //.... other code

 textureAtlas.firstTime=YES;
//draw men
[textureAtlas_ drawNumberOfQuads:1 fromIndex:0];
 //draw fire particle system
 //draw women and kid
 [textureAtlas_ drawNumberOfQuads:2 fromIndex:1];

}

Posted 1 year ago #

itlgames
Moderator

Ok, got it, will have a try.

Posted 1 year ago #
itlgames
Moderator
Tried, but got stuck when it comes to draw the particle system in between, I extended the CCSpriteBatchNode and overwrote the draw method, for now is not dynamic, just doing some tests:
```
-(void) draw
{
	//.... other code

	//draw men
	[textureAtlas_ drawNumberOfQuads:1 fromIndex:0];
	//draw fire particle system
	[fire draw];
	//draw women and kid
	[textureAtlas_ drawNumberOfQuads:2 fromIndex:1];
}
```
Where fire is just a CCParticleFire instance. But is not drawn. I also tried the visit function, same result. If I add the particle to the parent layer, just for trying something, then I get the particle drawn twice actually, but the extra one (the once from the batchnode draw call) is on wrong position (0,0)

I did also test the drawNumberOfQuads mixing from another batchnode and from a single CCSprite and works like a treat!
Posted 1 year ago #

araker
Moderator

I'm not at my development nachine right now, i think this will work.

//add fire to parent of batchnode
//set visible to NO to prevent double drawing
//set position of fire
//in the draw
[fire setVisible:YES];
[fire draw];
[fire setVisible:NO];

Re-order particles system together with sprites off a batchnode

Reply »