A fast, easy to use, free, and community supported 2D game engine
peanutman
Member
Hi!
Is it possible to make parts of a sprite transparent at runtime? Let me explain.
I have 2 sprites that fill the screen, the second covering the first. I would like to make pieces of the covering sprite transparent so that the bottom layer can be seen through those "holes".
The problem is that I would like the holes to be moving, so I can't simply use a png with static transparent areas.
Is there any way to achieve this?
Reinout
Steve Oldmeadow
Administrator
See this post on the old forum:
Robert Hayes
Member
I hate to necro a post but I have a question regarding the solution posted in the link. I would like to clip the top layer texture using just a polygon not a PNG. I found out how to get the polygon to draw but it looks to make the top layer a slightly different color.
I am trying to draw rectangles of different sizes so using a PNG does not work well as the scale could be way off and I am worried the overhead of using a small image and repeating it would be to much.
[mBurnLayer begin];
glColorMask(FALSE, FALSE, FALSE, TRUE);
glBlendFunc(GL_SRC_ALPHA, GL_ONE);
glColor4ub(1, 1, 1, 0.5);
glLineWidth(10);
CGPoint vertices[] = { ccp(100,100), ccp(100,200), ccp(200,200), ccp(200,100) };
drawPoly( vertices, 4, YES);
glColorMask(TRUE, TRUE, TRUE, TRUE);
[mBurnLayer end];
I can see it drawn but the mBurnLayer texture does not go transparent. Any ideas?
Robert Hayes
Member
I figured it out, here is the code for future reference by anyone needing it.
RenderTexture *bigBackgroundLayer = [RenderTexture renderTextureWithWidth:512 height:512];
Sprite *bigBackgroundSprite = [Sprite spriteWithFile:@"big_bg.png"];
[bigBackgroundSprite setPosition:cpv(240,150)];
[bigBackgroundLayer setPosition:ccp(240,150)];
[bigBackgroundLayer begin];
glColorMask(TRUE, TRUE, TRUE, TRUE);
[bigBackgroundSprite visit];
glColorMask(TRUE, TRUE, TRUE, FALSE);
[bigBackgroundLayer end];
[self addChild:bigBackgroundLayer z:0];
RenderTexture *gameBoardLayer = [RenderTexture renderTextureWithWidth:512 height:512];
Sprite *gameBoardSprite = [Sprite spriteWithFile:@"bg-new.png"];
[gameBoardSprite setPosition:cpv(480/2,320/2)];
[gameBoardLayer setPosition:cpv(256,256)];
[gameBoardLayer begin];
glColorMask(TRUE, TRUE, TRUE, TRUE);
[gameBoardSprite visit];
glColorMask(TRUE, TRUE, TRUE, FALSE);
[gameBoardLayer end];
[self addChild:gameBoardLayer];
[gameBoardLayer begin];
glColorMask(FALSE, FALSE, FALSE, TRUE);
glBlendFunc(GL_ONE, GL_ZERO);
glColor4ub(1, 1, 1, 0.0);
glLineWidth(10);
CGPoint vertices[] = { ccp(100,100), ccp(100,300), ccp(300,300), ccp(300,100) };
drawPoly( vertices, 4, YES);
glColorMask(TRUE, TRUE, TRUE, TRUE);
[gameBoardLayer end];This blends gameBoardSprite to bigBackgroundSprite. Using built in drawPoly function this will only draw the rectangle as lines, I modifed the function to take an extra parameter for GLEnum mode(not in this code) and set it to GL_TRIANGLE_FAN to fill in the poly.
Hope this is helpful to someone else.
I have been trying this all day but i don't really understand how to use renderTexture... :(
What i need to do is this:
http://www.beta-games.net/ex.png
the grey bar is an sprite and the red circle is an Atlassprite. I want to show the portion of the red circle only when it is over the grey bar, thus only showing that portion.
The gray bar will stay still but i should be able to move the circle around and also animate it.
If i am not mistaken i should draw the circle to the target that would be the grey sprite?
I tried following the example posted above (and the test of course) but i can't follow it...
Would this be my grey sprite?
to create a burnable layer do something like the following:
mBurnLayer = [RenderTexture renderTextureWithWidth:512 height:
512];
Sprite* burn = [Sprite spriteWithFile:@"back02.png"];
[burn setPosition:cpv(320/2, 480/2)];
[mBurnLayer setPosition:cpv(256, 256)];
[mBurnLayer begin];
glColorMask(TRUE, TRUE, TRUE, TRUE);
[burn visit];
glColorMask(TRUE, TRUE, TRUE, FALSE);
[mBurnLayer end];
Would i do this to my circle sprite?
Then use my handy blendSprite class to create a sprite that supports
different blending modes; you'll use this to draw into the alpha
channel:mBurnSprite = [[BlendSprite spriteWithFile:@"splat.png"] retain];
[mBurnSprite setBlendModeSrc:GL_ZERO dst:GL_ONE_MINUS_SRC_ALPHA];
Now.. when exactly do i do this?
now, when we want to draw into the render texture and only affect the
alpha, we do something like this:[mBurnLayer begin];
glColorMask(FALSE, FALSE, FALSE, TRUE); // only draw into alpha
channel
[mBurnSprite setPosition:cpv(100,100)];
[mBurnSprite visit];
// reset color mask to default settings; to be nice, we should have
read these first and restored them
glColorMask(TRUE, TRUE, TRUE, FALSE);
[mBurnLayer end]; </bloquote>Sorry for that many questions, maybe i don't understand what is renderTexture used for at all... :P
Thanks
Sama7
Member
Hah, same boat as you Pablo. The original post Steve links talks about a custom class (blendSprite) which isn't a part of cocos2d-iphone, while rendertexture is.
Then robert posts code that never mentions it.
After reading it a few times I think Roberts code executes as soon as its hit. Which was throwing me off (that and the examples use of BlendSprite then no BlendSprite.
I will try it later tonight and get back to you Pablo. I intend to write it as a model to setup the blending "burn" effect, then a let the controller active the affect when it needs it.
Steve Oldmeadow
Administrator
The BlendSprite referred to in Slipster216's original post is redundant now. TextureNode and its derivatives (e.g. Sprite) can now have the blending function specified so there is no need for BlendSprite.
Hi sama7, did you manage to get something working?
What i am trying to achieve is something as used in touchcopter http://www.cocos2d-iphone.org/forum/topic/290#post-4063.
I would need a black sprite that covers all the screen and then a sprite that clips out the black sprite where it is, so it acts as a "light source".
The problems i encounter is that i don't have the slightest idea on how to get this working. I have tried this many times but i don't get any result and the framerate drops like 20 fps without any noticeable change.
I have been able to work something out but i run into several problems:
What i intend: http://www.cocos2d-iphone.org/forum/topic/290#post-4063.
What i do:
i created a black sprite to cover the entire screen. and a white circle that should be the only part of the screen that shows.
in my init:
// create a render texture, this is what we're going to draw into
renderTarget = [RenderTexture renderTextureWithWidth:s.width height:s.height];
[renderTarget setPosition:ccp(s.width/2, s.height/2)];
// note that the render texture is a cocosnode, and contains a sprite of it's texture for convience,
// so we can just parent it to the scene like any other cocos node
[self addChild:renderTarget z:20];
// create a brush image to draw into the texture with
darkness = [[Sprite spriteWithFile:@"dark.png"] retain];
brush = [[Sprite spriteWithFile:@"blanco.png"] retain];
[darkness setBlendFunc: (ccBlendFunc) { GL_DST_COLOR, GL_ZERO }];now in my update function:
[renderTarget begin];
[darkness setPosition:ccp(240,160)];
[brush setPosition:ccp(240,160)];
[brush visit];
[darkness visit];
[renderTarget end];The problems i face:
1- The mask is inverted... the white part s the only thing that i see where it should be the opposite, (i think the blending should be set differently, but don't know which one to use instead)
2- The drawing happens over itself, so it is as if i was painting, i suppose i should draw and clear the texture every update to erase the previous content... (i tried using the clear funtion of the renderTexture but i don't know if this is right, and what values to pass to it).
3- It makes my game go awfully slow... so i suppose i am doing something really wrong...
Any ideas?
Steve Oldmeadow
Administrator
^ Firstly I don't see where you are setting up the blend function for the brush appropriately, see this line in Slipster216's original post:
[mBurnSprite setBlendModeSrc:GL_ZERO dst:GL_ONE_MINUS_SRC_ALPHA];Second, I don't see where you are limiting drawing to the alpha channel only for the brush, e.g.
glColorMask(FALSE, FALSE, FALSE, TRUE);Third, you should draw the brush after the darkness layer. Since you are limiting drawing to the alpha channel and have the blending set appropriately the alpha of the brush will "punch out" a hole in the darkness layer.
Finally, you could simply use a ColorLayer for the darkness - I would imagine that would perform better than using an image based sprite.
Hi! Thanks Steve, i changed my code and now the mask masks the other way around, thanks!
Now... i changed the black sprite to a colorlayer but i still experience a masive drop in my fps... it doens't have to do with the size of the sprites since using an small or big sprite doesn't make a difference...
Ohh and how would i reset what i drawed? Right now if i place my mask sprite at (100,100) and then move it to (150,200) i still can see a hole at both positions... i think at every call i should reset the drawing and then draw the mask. i just don't know how to do that...
Thanks!
Steve Oldmeadow
Administrator
For the sort of effect that you want you need to redraw the darkness where the prior position was. I would start by just drawing the ColorLayer each frame and then experiment with just drawing the minimum amount of "darkness" to cover over the last position.
When you say "massive drop in fps" what kind of figures are you seeing? What else are you doing? What device are you testing on?
I have solved the redrawing part, i just do [renderTarget clear:0 g:0 b:0 a:255]; before each call.
Regarding the slowdowns: My game runs at 50-60 fps normally, using renderTexture, it runs at 12-15 fps.
I am using an iphone 3G OS3.01
I don't know if this is normal, but if i just do this (which makes the mask stuff work perfectly)
(on my layer init):
renderTarget = [RenderTexture renderTextureWithWidth:s.width height:s.height];
[renderTarget setPosition:ccp(s.width/2, s.height/2)];
[self addChild:renderTarget z:20];Now my game is running at 40-50 fps.
if after that i do:
darkness = [[ColorLayer layerWithColor:ccc4(0,0,0,255)] retain];
[darkness setPosition:ccp(240,160)];
brush = [[Sprite spriteWithFile:@"blanco.png"] retain];
[brush setBlendFunc: (ccBlendFunc) { GL_ZERO,GL_ONE_MINUS_SRC_ALPHA }];
[renderTarget begin];
glColorMask(TRUE, TRUE, TRUE, TRUE);
[darkness visit];
glColorMask(TRUE, TRUE, TRUE, FALSE);
[renderTarget end];Now my game is running at 25-35 fps.
And if in my update call (or draw) i do:
[renderTarget clear:0 g:0 b:0 a:255];
[renderTarget begin];
glColorMask(FALSE, FALSE, FALSE, TRUE);
[brush setPosition:arrow->arrowBody->p];
[brush visit];
glColorMask(TRUE, TRUE, TRUE, FALSE);
[renderTarget end];now my game is running at 10-15 fps...
So, what i see is that, just creating and placing the renderTexture and then drawing a colorlayer(or sprite) to it causes me a +- 30 fps drop...
As for "what else am i doing"? a lot of stuff... i am trying to add this to my full game, i don't know if i am doing something "wrong" but if it runs at 60fps and just by adding renderTexture and drawing something to it i get a 30fps drop i think there must be something wrong in there or the way i am doing it...
Another thing i notice (that mostly sure doesn't have anything to do with this) is that whatever size i assign to the renderTarget, the rightmost part of the screen does not get masked...
here is an screenshot of this:
http://www.beta-games.net/IMG_0071.PNG
http://www.beta-games.net/IMG_0072.PNG
Steve Oldmeadow
Administrator
I hadn't noticed the clear function on RenderTexture. It shouldn't be necessary to draw the darkness ColorLayer if you are clearing the RenderTexture to black. Try commenting out the glColorMask and see what impact that has on the fps (even though it won't work properly any more). I'm wondering if something is causing the graphics pipeline to get flushed - the glColorMask would be the likely candidate.
No, commenting every glcolormask call does not change anything, i still get a 12-15 fps.
I have removed the "darkness" part since you are rightif i am clearing the screen with black color i achieve the same effect.
Anyway, doing this still doesn't result in ani improvement regarding the frame rate...
I am left with this:
on init:
CGSize s = [[Director sharedDirector] winSize];
renderTarget = [RenderTexture renderTextureWithWidth:(s.width) height:(s.height)];
[renderTarget setPosition:ccp(s.width/2, s.height/2)];
[self addChild:renderTarget z:5];
brush = [[Sprite spriteWithFile:@"blanco.png"] retain];
[brush setBlendFunc: (ccBlendFunc) { GL_ZERO,GL_ONE_MINUS_SRC_ALPHA }];in my update call:
[renderTarget clear:0 g:0 b:0 a:255];
[renderTarget begin];
glColorMask(FALSE, FALSE, FALSE, TRUE);
[brush setPosition:arrow->arrowBody->p];
[brush visit];
glColorMask(TRUE, TRUE, TRUE, FALSE);
[renderTarget end];
Steve Oldmeadow
Administrator
I had a look into this and it is the glBindFramebufferOES command that flushes the pipeline which is kind of obvious in retrospect. Therefore the timing of where you call renderTarget begin is critical. You want to ensure that you draw the darkness overlay before any drawing is done to the screen's frame buffer.
However, do you want your darkness layer to be fully opaque (alpha = 255) as you currently have it now? If so I think there are much better strategies for doing what you want as the only part of the game you need to render is the tiny bit under the "spotlight".
I think your problem with the right part of the screen not being masked is because of the way the projection is set up. Basically it is being truncated at 320 because the projection is set up for a portrait view. I'm sure someone fixed this recently and the changes were checked in - are you using the latest version of RenderTexture?
Hi Steve,
I think your problem with the right part of the screen not being masked is because of the way the projection is set up. Basically it is being truncated at 320 because the projection is set up for a portrait view. I'm sure someone fixed this recently and the changes were checked in - are you using the latest version of RenderTexture?
I think i do, i downloaded from svn like 2-3 days ago, i am going to download it again to check that, thanks.
Regarding the framerate problem, i am still trying to solve this but to no avail, i know nothing of opengl so it turns out to be very difficult...
However, do you want your darkness layer to be fully opaque (alpha = 255) as you currently have it now? If so I think there are much better strategies for doing what you want as the only part of the game you need to render is the tiny bit under the "spotlight".
Right now i am leaving the dark part totally black, but i think that if i get this working i would like to see at least a little of the rest of the screen, so the dark layer wont reamin fully opaque.
I had a look into this and it is the glBindFramebufferOES command that flushes the pipeline which is kind of obvious in retrospect. Therefore the timing of where you call renderTarget begin is critical. You want to ensure that you draw the darkness overlay before any drawing is done to the screen's frame buffer.
The latest code i posted shows that i am not drwaing the darkness overlay anymore, just calling clear on the render target.
I moved the code in my update to an scheduled methos that runs every 1 second, what i notice is: an slowdown due to the presence of the rendertarget (as written above) Which in the test it does not happen... In the test if you don't touch anything it runs at 60 fps while in my game doing the same does not...
Anyway, every time the scheduled method is called, the mask is drawn and there is a noticeable bump just before. Efectively this is what is causing my game to run at 15 when this is called every update.
I am going to try later using instruments to see what is happening when the drawing of the mask occurs, i don't know if this will help at all.
Steve Oldmeadow
Administrator
Sorry, when I was referring to the darkness overlay I meant the render texture. What you are doing at the moment (with the scheduled method) is a bad idea. Every time you call that you are interrupting the GPU and forcing it to redo work it has already done.
You want that update code that you are calling in the scheduled method to go in a draw method and, as I said before, ensure that it is the first code that is executed in the draw cycle. There are various strategies for doing that, probably the easiest is a layer with a custom draw that you know will be called before any other drawing e.g top of the stack with a low z order.
Steve, sorry to keep bothering, i have just tried this but still does not work.
I did the following: Moved this darkness/mask stuff to another layer just above my game layer. And moved the code from the update to the draw call...
I still experience the same framerate... it is running at 12-15 fps
The thing is, if i ONLY add this new layer which just contains the mask thing it still runs at the same low fps...
@implementation DarknessLayer
-(id) init
{
self = [super init];
if (self != nil) {
CGSize s = [[Director sharedDirector] winSize];
// create a render texture, this is what we're going to draw into
renderTarget = [RenderTexture renderTextureWithWidth:480 height:320];
[renderTarget setPosition:ccp(s.width/2, s.height/2)];
// note that the render texture is a cocosnode, and contains a sprite of it's texture for convience,
// so we can just parent it to the scene like any other cocos node
[self addChild:renderTarget z:0];
brush = [[Sprite spriteWithFile:@"blanco.png"] retain];
[brush setBlendFunc: (ccBlendFunc) { GL_ZERO,GL_ONE_MINUS_SRC_ALPHA }];
}
return self;
}
-(void)draw
{
[renderTarget clear:0 g:0 b:0 a:255];
[renderTarget begin];
glColorMask(FALSE, FALSE, FALSE, TRUE);
[brush setPosition:ccp(240,160)];
[brush visit];
glColorMask(TRUE, TRUE, TRUE, FALSE);
[renderTarget end];
}
-(void)dealloc
{
[super dealloc];
[brush release];
[RenderTexture release];
[ColorLayer release];
}
@end
Steve Oldmeadow
Administrator
^ You've just got the same problem in a different format. I said the [renderTarget begin] must occur before any other drawing - how does adding it to a layer that is above your game layer achieve that? You have achieved the opposite of what I suggested.
The updating of the renderTarget and the drawing of the renderTarget are two separate steps. You want to update the renderTarget before any other drawing occurs but then obviously you need to draw the renderTarget after your game scene has rendered so that it is on top.
Having said all that, if you only want a single spotlight as in your example then this technique is overkill. Why don't you just use the same technique as TouchCopter - i.e. create a sprite that has an image with the spotlight/beam area cut out. The simplest approach is just create a 1024x1024 image with the beam in the centre and then set the position of the associated sprite so that the spotlight/beam appears where you want. If that approach isn't acceptable from a memory or fps perspective then try just creating an image for the spotlight region and then fill the surrounding regions with ColorLayers.
I tried what you suggested but i really don't know how to this
The updating of the renderTarget and the drawing of the renderTarget are two separate steps. You want to update the renderTarget before any other drawing occurs but then obviously you need to draw the renderTarget after your game scene has rendered so that it is on top.
I tried with a giant image with a hole and it works OK, although if i wanted later more light sources i won't be able to do it...
What i don't understand is, if i just draw the darkness layer it would be the first (and only) thing to get drawn... so shouldn't it work ok?
Anyway, for the time being i have what i need, so thank you very much!
^ I am trying to produce the spot light effect using cocos2d iPhone library. I found the discussion above really helpful and interesting. My need for the moment is that there will be black colored image layer at the top and i want to change the opacity of some parts of the image such that I am able to see the lower layers through them. I tried the sample code given above, but there are some things unclear. Could you help me out in that?
Thank you.
rbdavis
Member
I got stuck implementing Robert Hayes code above. I could draw a transparent outline polygon but not the filled one and didn't understand his comment ""modifed the function to take an extra parameter for GLEnum mode(not in this code) and set it to GL_TRIANGLE_FAN to fill in the poly".
Anyway, I found a solution that I thought I would share in case anyone else had the same problem.
Instead of using Cocos2d drawPoly, you can modify it or use the following code to draw a solid poly:
void drawSolidPoly( CGPoint *poli, int points )
{
glVertexPointer(2, GL_FLOAT, 0, poli);
glEnableClientState(GL_VERTEX_ARRAY);
glDrawArrays(GL_TRIANGLE_FAN, 0, points);
glDisableClientState(GL_VERTEX_ARRAY);
}
You then change the drawPoly line in Robert's code as follows:
drawSolidPoly(vertices, 4);
I found this solution here:
http://www.mailinglistarchive.com/cocos2d-iphone-discuss@googlegroups.com/msg04641.html
Cheers,
Rob
You must log in to post.
