A fast, easy to use, free, and community supported 2D game engine
Finally cocos2d supports mutable textures natively.
does that mean?
You will be able to implement filters of modify textures without modify official code or overwrite all CCTexture2D code in your own class.
I have published several SAMPLE CODES:
- Full gaussian blur
- Partial blur filter
- Text shadow
And it works in all iDevices even OpenGL ES 1.1.
Source code: https://github.com/manucorporat/AWTextureFilter
Download URL: https://github.com/manucorporat/AWTextureFilter/tarball/master
Thanks, such an amazing helper might come in handy :)
Hey @manucorporat, that was awesome.
Thanks for sharing.
thank you guys!!
@zombie
It's very slow if the texture is large, because the filter must process pixel by pixel and the gaussian blur is the slowest blur algorithm.
I have implemented it in the pause menu to create a blurred background and in some texts to create a smooth shadow.
This is the best solution to apply blur to static textures because it spends CPU resources once, not in each frame.
I have updated the sample right now and I am very surprised!!
You can apply AWTextureFilter 60 times per second in a iPod Touch 2gen without problems
Try the "Text shadow" test!!
@manucorporat, great, thanks for sharing.
I'm sure it will be much nicer than my CCTexture hack using your previous code :-)
sure :)
BTW, Currently I am improving the Gaussian blur algorithm, I think it could be a 25% faster.
Great work!
Did you get anywhere with the Gaussian blur speed? I've been playing with a variation of this for the displacement code I'm working on.
Btw: for the partial blur the tests to check that you are within the rect bounds are causing the dark border around the blurred area, was this intentional? Removing the tests;
if (read>=position.x && read<size.x){and
if (ri<size.y && ri>=position.y){will go someway to removing it.
edit: I'm still getting a thin border top and bottom which I need to look into
Trying to eliminate the dark lines above I ended up reworking the blur (at least in the RGBA8888 version)
if(format == kTexture2DPixelFormat_RGBA8888){
int cr, cg, cb, ca;
const ccColor4B *originalData = (ccColor4B*)input;
ccColor4B *data = (ccColor4B*)output;
ccColor4B *temp = malloc(wh*4);
ccColor4B *pixel;
//Horizontal blur
for (yl = position.y; yl<size.y; yl++){
for (xl = position.x; xl<size.x; xl++){
cb = cg = cr = ca = 0;
ri = xl-radius;
for (i = 0; i<kernelSize; i++){
read = yi + ri + i;
// need to add a check that we're in the bounds here
pixel = &originalData[read];
cr+= pixel->r*kernel[i];
cg+= pixel->g*kernel[i];
cb+= pixel->b*kernel[i];
ca+= pixel->a*kernel[i];
}
pixel = &temp[yi+xl];
pixel->r = cr/sum;
pixel->g = cg/sum;
pixel->b = cb/sum;
pixel->a = ca/sum;
}
yi+=width;
}
yi = position.y*width;
//Vertical blur
for (yl = position.y; yl<size.y; yl++){
for (xl = position.x; xl<size.x; xl++){
cb = cg = cr = ca = 0;
ri = yl-radius;
for (i = 0; i<kernelSize; i++){
if((ri + i) >=0 && (ri + i) < height)
{
read = (ri + i) * width + xl;
pixel = &temp[read];
cr+= pixel->r * kernel[i];
cg+= pixel->g * kernel[i];
cb+= pixel->b * kernel[i];
ca+= pixel->a * kernel[i];
}
}
pixel = &data[yi+xl];
pixel->r = cr/sum;
pixel->g = cg/sum;
pixel->b = cb/sum;
pixel->a = ca/sum;
}
yi+=width;
}
//Free temp data
free(temp);
} else if ....However I still got the same problem. It was only when I set the blur radius to zero ;
[AWTextureFilter blur:mutableTexture radius:0 rect:CGRectMake(20, 40, 200, 250)];That I noticed something was going wrong somewhere between the horizontal blur into the memory and the vertical blur (see the dark lines on the right hand panel at the top and bottom).
Any ideas?
Doh! it was the edge case that was causing the issue. As the kernel approached the edges (and left the bounds) it was messing up and causing some transparency, the dark lines are the background showing through. I've gone for a fudge fix, which works when the radius is small. When the kernel leaves the bounds I just stick in the edge value as it is unweighted.
I'd welcome a neater approach :D
int sum2;
if(format == kTexture2DPixelFormat_RGBA8888){
int cr, cg, cb, ca;
const ccColor4B *originalData = (ccColor4B*)input;
ccColor4B *data = (ccColor4B*)output;
ccColor4B *temp = malloc(wh*4);
ccColor4B *pixel;
//Horizontal blur
for (yl = position.y; yl<size.y; yl++){
for (xl = position.x; xl<size.x; xl++){
cb = cg = cr = ca = 0;
ri = xl-radius;
for (i = 0; i<kernelSize; i++){
read = yi + ri + i;
pixel = &originalData[read];
cr+= pixel->r*kernel[i];
cg+= pixel->g*kernel[i];
cb+= pixel->b*kernel[i];
ca+= pixel->a*kernel[i];
}
pixel = &temp[yi+xl];
pixel->r = cr/sum;
pixel->g = cg/sum;
pixel->b = cb/sum;
pixel->a = ca/sum;
}
yi+=width;
}
yi = (position.y)*width;
//Vertical blur
for (yl = position.y; yl<size.y; yl++){
for (xl = position.x; xl<size.x; xl++){
cb = cg = cr = ca = 0;
ri = yl-radius;
for (i = 0; i<kernelSize; i++){
if((ri + i) >=position.y && (ri + i) < size.y)
{
read = (ri + i) * width + xl;
pixel = &temp[read];
cr+= pixel->r * kernel[i];
cg+= pixel->g * kernel[i];
cb+= pixel->b * kernel[i];
ca+= pixel->a * kernel[i];
sum2 = sum;
}
else {
read = yl * width + xl;
pixel = &temp[read];
cr= pixel->r;
cg= pixel->g;
cb= pixel->b;
ca= pixel->a;
sum2 = 1;
break;
}
}
pixel = &data[yi+xl];
pixel->r = cr/sum2;
pixel->g = cg/sum2;
pixel->b = cb/sum2;
pixel->a = ca/sum2;
}
yi+=width;
}
//Free temp data
free(temp);
}else if(format == ...Result of
[AWTextureFilter blur:mutableTexture radius:6 rect:CGRectMake(20, 40, 200, 250)];
Tidied up the vertical blur bit;
//Vertical blur
for (yl = position.y; yl<size.y; yl++){
for (xl = position.x; xl<size.x; xl++){
cb = cg = cr = ca = 0;
ri = yl-radius;
for (i = 0; i<kernelSize; i++){
if((ri + i) >=position.y && (ri + i) < size.y)
{
read = (ri + i) * width + xl;
}
else {
read = yl * width + xl;
}
pixel = &temp[read];
cr+= pixel->r * kernel[i];
cg+= pixel->g * kernel[i];
cb+= pixel->b * kernel[i];
ca+= pixel->a * kernel[i];
}
pixel = &data[yi+xl];
pixel->r = cr/sum;
pixel->g = cg/sum;
pixel->b = cb/sum;
pixel->a = ca/sum;
}
yi+=width;
}Grab the screen into a texture or UIImage using code here (thanks again to manucorporat);
http://www.cocos2d-iphone.org/forum/topic/1722/page/2
and then pass it into the blur function e.g of UIImage;
CCTexture2DMutable *mutableTexture = [[[CCTexture2DMutable alloc] initWithImage:myUIImage autorelease];
[AWTextureFilter blur:mutableTexture radius:6];hey abitofcode, I am here again.
Great!! I knew that issue with the border but I didn't try to fix it!! thank you! I will merge it in the github page.
BTW: I hope AWTextureFilter / Screenshot code works fine for you.
Applied changes in github:
https://github.com/manucorporat/AWTextureFilter/commit/9b633132129a41ab38528ef6ae4f4a7666bf36fe
thanks again @abitofcode
Good job!!
Magic, nice to have it all in one place. :D
The clamping on the vertical pass is using the temp area created, the horizontal pass uses the originalData. As the kernel approaches the edge of the originalTexture area it will use the values from the opposite side of texture so these should really be clamped as well, it doesn't show here as the texture is fairly similar across, I'll stick up a fix a bit later when I get some time.
@manucorphorat
I've been doing some research, and I came across the "Accelerate Framework" that was introduced in iOS 4. It provides optimized matrix and vector operations, as well as convolution built in. If you are still looking for ways to improve the efficiency of your filter, I'd check it out. Just an idea.
EDIT:
Out of curiosity for how fast it would work, I implemented the filter using the vDSP part of the Accelerate framework:
...bunch of stuff...
if(format == kTexture2DPixelFormat_RGBA8888){
const unsigned char *originalData = (unsigned char*)input;
unsigned char *data = (unsigned char*)output;
float *originalFloatData = malloc(wh*4*sizeof(float));
float *floatData = malloc(wh*4*sizeof(float));
vDSP_vfltu8 (originalData, 1, originalFloatData, 1, wh*4);
/* Carry out a convolution. */
int filterStride = -1;
int signalStride =1;
int resultStride = 1;
vDSP_conv(originalFloatData, signalStride, kernel + kernelSize-1,
filterStride, floatData, resultStride, wh*4, kernelSize);
vDSP_vfixu8(floatData, 1, data, 1, wh*4);
}else if(format == kTexture2DPixelFormat_A8){
...More stuff...This is just what I've been able to figure out so far, it almost works, I just got to figure out how to just convolve the individual colors with themselves... Here is what it did:
meaty
Member
This looks amazing! I'm really keen to get this integrated into my project, but I'm having a little trouble. I copied the AWTextureFilter folder into my XCode project, but it's coming up with compile errors of the sort:
CCTexture2DMutable.m:60: error: 'format_' undeclared (first use in this function)
I searched for where format_, size_, width_ etc were defined but I couldn't find it. Could somebody please point me in the right direction? I'm using cocos 0.99.5.
Looks like you should update cocos2d.
Look the CCTexture2D interface (latest version)
https://github.com/cocos2d/cocos2d-iphone/blob/master/cocos2d/CCTexture2D.h
you were talking about screenshotting here as well, and the mac, so to be slightly off topic (but its a huge issue i have been having) How do you save the picture as a .png on the mac or a screenshot?
this is what i have tried so far: http://www.cocos2d-iphone.org/forum/topic/12282
Ive been looking through the related treads - http://www.cocos2d-iphone.org/forum/topic/6315/page/2
Its left me a bit confused on the current support for AWTextureFilters in 0.99.5, and if any of the cocos2D source needs updating also.
Is it possible to blur a CCRenderTexture, if so what is the correct way to init the CCTexture2DMutable?
Thanks,
David
Wow, I'm very impressed!
I've been way too busy on my own end to be able to visit the forums as much as I'd like to. I'm a lot more free now and seeing awesome ideas like this brings tears of joy to my eyes.
Keep up the great work.
diremage123
Member
Looks fantastic, but I could only run it once then it crashes.
-(void) displayMessage:(NSString*)message
{
paused = true;
CGSize s = [[CCDirector sharedDirector] winSize];
[game_ pauseSchedulerAndActions];
//[game_ unschedule: @selector(tick:)];
//*************** blur
blur2 = [[CCDirector sharedDirector]screenshotUIImage];
//Create mutable texture
CCTexture2DMutable *mutableTexture = [[[CCTexture2DMutable alloc] initWithImage:blur2]autorelease];
//Copy the mutable texture as non mutable texture
//CCTexture2D *noMutableTexture = [[mutableTexture copyMutable:NO] autorelease];
//AWTextureFilter *aw = [[AWTextureFilter alloc]init];
//Apply blur to the mutable texture
blur = [CCSprite spriteWithTexture: [AWTextureFilter blur:mutableTexture radius:6]];
//Create sprites to show the textures
//CCSprite *original = [CCSprite spriteWithTexture:noMutableTexture];
//[original setPosition:ccp(winSize.width/2-original.contentSize.width/2-1, winSize.height/2)];
[blur setPosition:ccp(s.width/2, s.height/2)];
//[self addChild:original];
[self addChild:blur];
//*******************
}This is the code for the pause menu. It works magnificently whenever I press the pause button, but when I resume and pause again it crashes mysteriously. I remember changing some part of AWTexture because there came up an error, about "discarding qualifiers," and solved it by deleting the "const" in front of ccColor4B *originalData.
.......
if(format == kTexture2DPixelFormat_RGBA8888){
int cr, cg, cb, ca;
/*FIXED BY DELETING CONST HERE*/ ccColor4B *originalData = (ccColor4B*)input;
ccColor4B *data = (ccColor4B*)output;
ccColor4B *temp = malloc(wh*4);
ccColor4B *pixel;
//Horizontal blur
for (yl = position.y; yl<size.y; yl++){
for (xl = position.x; xl<size.x; xl++){
cb = cg = cr = ca = 0;
ri = xl-radius;
for (i = 0; i<kernelSize; i++){
read = yi + ri + i;
pixel = &originalData[read]; //ERROR IS HERE
cr+= pixel->r*kernel[i];
cg+= pixel->g*kernel[i];
cb+= pixel->b*kernel[i];
ca+= pixel->a*kernel[i];Is this supposed to happen?
You must log in to post.
