How to flip a card with cocos2d-x?

How to flip a card with cocos2d-x?
0.0 0

#1

I need to flip a card to see its back, then side and then front gradually with animation. How I can do this with cocos2d-x? I have took a look on OrbitCamera and RotateBy in 3D tests. They are very close to the one I want to, the only problem is that when the sprite turns around I see not the back (as it should be another texture), but the same spite from back camera. I understand that I should use 2 sprites to get the effect, but how I should do that, I don’t know. Should I position 2 sprite with different Z order?

I am pretty sure that I should replace the texture of the sprite but the problem is that when I rotate with OrbitCamera by 90 degree and replace the texture with back image of the card, then it does remain 90 degree rotated. Instead it turnes so that the whole texture was visible. But it had to be 90 degree turned and see from the side as one line.


#2

or maybe sprite2->setVisible(false) until you flip… then change to true.


#3

Node::setRotation3D is your friend :smile:


#4

@nite Not actually. The problem is that when you rotate the texture should change. If I misunderstood you, please show a code snippet. Thanks.


#5

I will formulate my question in other way. Is there a better way than this http://gameit.ro/2014/04/card-flipping-effect-using-cocos2d-x-without-fisheye-distortion/ ?

@slackmoehrle you are right visibility can help, but in the article above you can see the explanation why OrbitCamera is not a good solution if the card in not in the center of the screen.


#6

Are you using Cocos2d-X 2.x version?


#7

@winipcfg No I use cocos2d-x 3.2, but is you have some solution in cocos2d-x 2.x then it is fine too. Main thing here is the approach.


#8

I tried to flip a box but I had a trouble, so I changed RotateBy to FadeIn/Out actions
It is code from my project, so something can be confusing. Main idea is Sequence of Actions.

void Square::invertWithAnimation()
{
	if (_start_inverting || this->getNumberOfRunningActions())
	{
		this->stopAllActions();
		if (_start_inverting)
		{
			_start_inverting = false;
			_inverted = !_inverted;
		}
		if (_inverted)
			this->initWithFile(BOX_INVERTED);
		else
			this->initWithFile(BOX_NON_INVERTED);
	}	
	auto anim = FadeOut::create(0.2);
	_start_inverting = true;
	auto finish_act = CallFunc::create([&]()
	{
		_inverted = !_inverted;
		_start_inverting = false;

		if (_inverted)
			this->initWithFile(BOX_INVERTED);
		else
			this->initWithFile(BOX_NON_INVERTED);

		auto anim = FadeIn::create(0.2);
		runAction(Sequence::create(anim, nullptr));
	});
	runAction(Sequence::create(anim, finish_act, nullptr));
}

#9

I asked about Cocos2d-x version because the link you referred to seems to be version 2.x. I remember there was issue on 2.x version and fixed on 3.x. Maybe this change fixed that
https://github.com/cocos2d/cocos2d-x/commit/b8b7714431f1a237dcbee6a512c6d9b227a419dc


#10

2D projection works in 3.2 version, but it is not nice. I need a 3D feel solution. I didn’t thought that could be so hard :smiley: .


#11

How about this?


#12

I am not sure if this is the best available variant on cocos2d-x. @rmg_nik is this what you code above does?


#13

Yes, but I replaced FadeIn/Out to RotateBy.
And you can see in the end the trouble about which I have told.


#14

@rmg_nik I see :smile:


#15

I double check the issue you mentioned in my latest published game (Cocos2d-x 3.2 final) and you are right. There is issue if you use OrbitCamera and set the rotation as 90 degree.

But as far as we only care the front/back side of the card, OrbitCamera works nice.
What you need is to display correct sprite by checking eye vector in overrided Update function.


#16

@winipcfg what you mean by saying “you need is to display correct sprite by checking eye vector in overrided Update function”. Maybe you code write a code for us?


#17

You can also check this post.
It’s not a real rotation but I’ve tried it and it it looks good and it can give you some ideas.


#18

@nop actually my whole question is if there is a better whay than that post. I have posted it above too.


#19

Sorry, I did not see that. I tried the effect on that post and was pretty convincing to me.


#20

@naghekyan i have the same issue with you, please did you find any solution ?