Distort rendered output?

cocos2d-x
#1

Hi Folks,

I’m looking for suggestions on how I can distort the rendered output of my scene. Essential I want to take a scene like this

Undistorted.jpg736×434 71.5 KB

and distort it into something like this

Distorted.jpg736×434 89.6 KB

I did this in Unity by having a camera render to a texture and then mapping that texture to a quad whose vertices I manipulated to get the desired effect.

Any ideas on how to achieve the same in Cocos?

Thanks in advance,

Dan

#2

No idea about producing a texture from the camera, but cocos2d-x has the node RenderTexture which allows you to render any number of nodes, or the entire screen, to a texture. Works like

auto winSize = Director::getInstance()->getWinSize();
auto rt = RenderTexture::create(winSize.width, winSize.height);
rt->begin();
nodeA->visit();
nodeB->visit();
rt->end();

You can render the entire scene using Director::getInstance()->getRunningScene()->visit();

The RenderTexture can be added to the scene to function like a Sprite node, but you can also get the resulting texture through rt->getSprite()->getTexture(), if you wanted to use the texture for your purposes.

Not sure how to use it with a quad, though.

#3

Thanks a ton grimfate. (Love the handle, btw).

I was wondering about using a RenderTexture, but the specific example is super helpful.

Seems like a normal sprite is rendered as two triangles. Does anyone know how to get the poly or texture coordinates and modify them?

Dan

#4

Your question got me looking into this topic yesterday and I found this: http://fedoraus.livejournal.com/25026.html (referenced in Texture polygon tutorial)

So it appears Sprites have something called PolygonInfo which defines their vertices/polygons. You can get a Sprite's PolygonInfo using auto info = sprite->getPolygonInfo(); and then set it using sprite->setPolygonInfo(info);. Or you could create a PolygonInfo from scratch, such as in that link, and set that to a Sprite. (If you are using JavaScript, I’m sure the syntax is very similar.)

Hopefully this is the best way to do it :smiley:

#5

Hey Grimfate,

Apologies for the long delay. Thanks again for all the help.

I finally got around to seeing if I could tie all of these piece together.

I concluded it’s not really a good or complete solution for my problem, because if the quad is distorted very much, it becomes clear that it’s being rendered as two triangles, with a clear seam at their boundary. There’s probably some way to do a more appropriate texture interpolation–i.e. across both triangles–but I’ll leave that for someone else.

Anyway, I thought I’d leave this here in case it’s somehow useful for folks in the future.

Note that TL are abbreviations for TopLeft, etc.

Also, “top” and “bottom” are, confusingly, really the visible bottom and top, respectively when rendered on a sprite in Cocos.

void DistortSprite(Sprite *spr, Vec3 posTL, Vec3 posTR, Vec3 PosBR, Vec3 posBL)
{

V3F_C4B_T2F_Quad quad;
PolygonInfo  polyInfo;

quad.bl.colors = Color4B::WHITE;
quad.br.colors = Color4B::WHITE;
quad.tl.colors = Color4B::WHITE;
quad.tr.colors = Color4B::WHITE;

float texleft = 0;
float texTop = 0;
float texRight = 1;
float texBottom = 1;

quad.tl.texCoords.u = texleft;
quad.tl.texCoords.v = texTop;
quad.tr.texCoords.u = texRight;
quad.tr.texCoords.v = texTop;
quad.bl.texCoords.u = texleft;
quad.bl.texCoords.v = texBottom;
quad.br.texCoords.u = texRight;
quad.br.texCoords.v = texBottom;

quad.tl.vertices = posTL;
quad.tr.vertices = posTR;
quad.bl.vertices = posBL;
quad.br.vertices = PosBR;

polyInfo.setQuad(&quad);

spr->setPolygonInfo(polyInfo);

}

Dan