A fast, easy to use, free, and community supported 2D game engine
bkervaski
Member
I have an interesting requirement that I can't seem to solve. I have a background image that is covered by a semi transparent image. I need to reveal certain parts of the background image (think flashlight in a dark room) at certain times.
It could probably be done with a large sprite and a transparent cut out but that doesn't seem very efficient.
Any suggestions?
bradparks
Member
this post may help:
http://www.cocos2d-iphone.org/forum/topic/1610#post-10100
and I think you should take a look at the RenderTexture example in the latest releases, as these older posts talk about it as if it isn't part of Cocos, but it is now.
Do you mean an effect similar to this?
I just subclass a CCSprite and in my init I initialize these c style arrays which are just member variables.
vertices = malloc( sizeof(GLfloat)*2*(segs));
coordinates = malloc( sizeof(GLfloat)*2*(segs));
colors = malloc( sizeof(ccColor4B)*(segs));
memset(vertices,0, sizeof(GLfloat)*2*(segs));
memset(coordinates,0, sizeof(GLfloat)*2*(segs));
colors[0] = ccc4(255, 255, 255, 255);
for (int i = 1; i < segs; i++)
{
colors[i] = ccc4(0, 0, 0, 0);
}And then override draw:
//pt is the pt to draw and r is the radius, segs was like 45
int width = texture_.pixelsWide;
int height = texture_.pixelsHigh;
const float coef = 2.0f * (float)M_PI/(segs-2) ;
vertices[0] = pt.x;
vertices[1] = pt.y;
coordinates[0] = pt.x/width;
coordinates[1] = (contentSize_.height-pt.y)/height;
for(int i=1;i<=segs;i++)
{
float rads = i*coef;
float j = r * cosf(rads) + pt.x;
float k = r * sinf(rads) + pt.y;
vertices[i*2] = j;
vertices[i*2+1] = k;
coordinates[i*2] = (j)/width;
coordinates[i*2+1] = (contentSize_.height-k)/height; /* why is this flipped? */
}
glBindTexture(GL_TEXTURE_2D, texture_.name);
glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);
glVertexPointer(2, GL_FLOAT, 0, vertices);
glTexCoordPointer(2, GL_FLOAT, 0, coordinates);
glColorPointer(4, GL_UNSIGNED_BYTE, 0, colors);
glDrawArrays(GL_TRIANGLE_FAN, 0, segs);
glBlendFunc(CC_BLEND_SRC, CC_BLEND_DST);All I do is map out some vertex/texture coords in a circle and make the corresponding color coords have be full color in the center and fade to transparent on the edges.
rroy1590
Member
hi, sorry to necro this thread but I was wondering if there was a way to animate this out, so rather than just drawing out the circle, slowly reveal that circle.
Instinctually i feel like that lends itself to using a sprite to define the transparency rather than hard coding in a circle, and then simply increase the size of the transparent circle through an action but I'm not sure how to define a spirte as the object to use as a transparency mask and then be able to dynamically increase the size of that spirte and have the size of the transparency grow with it without reapplying a the modified gl matrix and redrawing
Well for animating out the code I posted, you'd just need to slowly increase the radius value it uses.
As far as using a sprite and transparency methods, they seemed like they would be more resource hungry... but then again maybe its negligible...
Hi, I used this code to make the gradient circle, which is working great, but I can't figure out how to fill in the rest of the layer to the solid color. I've read a number of threads that talk about cutting a circle out of a layer using alpha blending, but I was just wondering if someone could recommend a different method. Thanks in advance.
I was able to get the dark background using CCRenderTexture as shown in Steve Oldmeadow's example in this thread:
http://www.cocos2d-iphone.org/forum/topic/2473
Here is the code that is working for me:
CCRenderTexture *target;
GLfloat *coordinates, *vertices;
ccColor4B *colors;
int segs;
segs = 45;
vertices = malloc( sizeof(GLfloat)*2*(segs));
coordinates = malloc( sizeof(GLfloat)*2*(segs));
colors = malloc( sizeof(ccColor4B)*(segs));
memset(vertices,0, sizeof(GLfloat)*2*(segs));
memset(coordinates,0, sizeof(GLfloat)*2*(segs));
CGSize s = [[CCDirector sharedDirector] winSize];
target = [CCRenderTexture renderTextureWithWidth:s.width height:s.height];
[target setPosition:ccp(0,0)];
[self addChild:target z:1];
colors[0] = ccc4(0, 0, 0, 255);
for (int i = 1; i < segs; i++)
{
colors[i] = ccc4(0, 0, 0, 0);
}
[target clear:0 g:0 b:0 a:1.0f]; // Set the background to black, this can be any color
float r = 100.0f;
int width = texture_.pixelsWide;
int height = texture_.pixelsHigh;
const float coef = 2.0f * (float)M_PI/(segs-2) ;
CGPoint pt = ccp(240, 160); // This is where the gradient circle will be drawn
vertices[0] = pt.x;
vertices[1] = pt.y;
coordinates[0] = pt.x/width;
coordinates[1] = (contentSize_.height-pt.y)/height;
for(int i=1;i<=segs;i++)
{
float rads = i*coef;
float j = r * cosf(rads) + pt.x;
float k = r * sinf(rads) + pt.y;
vertices[i*2] = j;
vertices[i*2+1] = k;
coordinates[i*2] = (j)/width;
coordinates[i*2+1] = (contentSize_.height-k)/height;
}
// begin drawing to the render texture
[target begin];
glBindTexture(GL_TEXTURE_2D, texture_.name);
glBlendFunc(GL_ZERO, GL_ONE_MINUS_SRC_ALPHA);
glColorMask(0.0f, 0.0f, 0.0f, 1.0f);
glVertexPointer(2, GL_FLOAT, 0, vertices);
glTexCoordPointer(2, GL_FLOAT, 0, coordinates);
glColorPointer(4, GL_UNSIGNED_BYTE, 0, colors);
glDrawArrays(GL_TRIANGLE_FAN, 0, segs);
glColorMask(1.0f, 1.0f, 1.0f, 1.0f);
glBlendFunc(CC_BLEND_SRC, CC_BLEND_DST);
// finish drawing and return context back to the screen
[target end];
free(vertices);
free(coordinates);
free(colors);Thanks Steve and mobilebros for your help in getting this working.
You must log in to post.