How to cut an image by code

cocos2d-x C++
#1

Hi,
i use cocos2d-x V3.3 to develop a jigsaw puzzle game, but i would like to cut an image by code.
Please orient me, how i can do that?
Thanks.

#2

I do that using another image as a model of how to cut a particular piece, using a RenderTexture. In the code below, texture is a RenderTexture, and model and cutzone are Sprite:

    texture->beginWithClear(0, 0, 0, 0);
    model->visit();
    cutzone->setBlendFunc(ccBlendFunc{GL_ONE_MINUS_DST_ALPHA, GL_SRC_ALPHA});
    cutzone->visit();
    texture->end();
    //Now you can use texture->getSprite()
#3

Thanks, but as you know , there are many pieces, so how to do this with all pieces in manner the texture has the same size with cutzone

#4

You need to do one RenderTexture per piece, so that you can easily move them separately. Each texture have the size of the cutzone. The model is larger, and you only cut part of it for each piece (you do that by moving the model before the code I posted above).

#5

@Fradow please i don’t understand you, is the model the big image that i want divided it? how to move the model ?

#6

Yes, the model is the big image.

To move the model, use Sprite::setPosition() method

#7

is there any condition about RenderTexture, model and cutzone, like color or alpha… , and somtime i have this error invalid glprogram
For testing, i have created this code:

void PuzzleBoard::cutSpriteByCode(const std::string &spriteFrameName) {

auto s = Director::getInstance()->getWinSize();
_originalImage= Sprite::createWithSpriteFrameName(spriteFrameName);
_cutZone= Sprite::createWithSpriteFrameName("piece2.png");

// create a render texture, this is what we are going to draw into
_texture = RenderTexture::create(_cutZone->getContentSize().width, _cutZone->getContentSize().height, Texture2D::PixelFormat::RGBA8888);
_texture->retain();
_texture->setPosition(Vec2(s.width / 2, s.height / 2));
 this->addChild(_texture);


_texture->beginWithClear(0, 0, 0, 0);
_originalImage->visit();
_cutZone->setBlendFunc(ccBlendFunc{GL_ONE_MINUS_DST_ALPHA, GL_SRC_ALPHA});
_cutZone->visit();
_texture->end();

  }

The original image :

14705a7ff783a860.png963×646

The cutZone image:

8ba1ee8c476b262e.png663×506

The Result :

#8

@Fradow help me please :frowning:

#9

Which image are you displaying? _texture only right?
What’s the size of your images? What’s the size of your screen?

#10

Yes, i’m displaying only the _texture(s), the size of the big image is 480322 , the size of one piece is 158105, the screen size is 960*640(iphone 4)

#11

My guess is that the cutZone image doesn’t have proper transparency. Could you check how “piece2.png” is loaded, and if it has full transparency? The RenderTexture creation is similar to mine.

Can you try with this image: http://we.tl/KeDlv9Gvdc ? That’s one I use in one of my project.

#12

Thnaks, but i have exception: invalid glprogram

#13

Sorry, I can’t help you with that. I am not very good with OpenGL.

#14

Why don’t you just use a clipping node?

#15

please, tell me how ?

#16

Look at this tutorial: http://www.onemoresoftwareblog.com/2013/12/cocos2d-x-ccclippingnode-triple-c.html

Adopt the new naming scheme by truncation the two CC in the beginning of the names. E.g. ClippingNode instead of CCClippingNode.

Also check out the ClippingNodeTest examples. It will show you how to to clipping with a sprite as a stencil.

#17

Yes Images Is cut are not proper

plz U have any suggestion then give me plz :frowning: