Jump to content
Search Community

Card Drag Effect (Similar to Hearthstone)

Stone test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi,

I have a card game which currently handles the cards dragging by simply editing the rotationX and rotationY depending on the mouse movement direction. Then in the onEnter loop I "force" the rotationX and rotationY to move towards 0 by slightly increasing/decreasing their value on each frame. This results in a quite poor 3D effect movement since the transition isn't smooth enough, plus it doesn't feel like a 3D transition (since it's obviously only 2D). We are using plain Flash for this, so no CSS or JS can be involved, we only use GSAP tweens. Our aim, is to create something like hearthstone achieved, a very smooth movement which depends on the position of the mouse-center of the card, as implemented here by @dstnation. 

See the Pen pyqGbN by dstnation (@dstnation) on CodePen

 

We do handle the smooth transition of the card from its position to the mouse cursor by using just one line of code on the 'onEnter' function, basically:

 

protected function onEnterFrame(e:Event):void
{
	if(mMouseTarget && mMouseDown)
	{		
		//Handle the position of the card 'x' and 'y'				
		TweenLite.to(this, 0.2, {x:mMouseTarget.x, y:mMouseTarget.y});
	}
}

 

mMouseTarget's position is filled on the onMouseDown, along with the mMouseDown variable.

 

We are nevertheless, having a hard time trying to figure out how to do something similar with the rotationX, rotationY and (perhaps?) skewX/skewY to achieve a 3D effect? Does anyone have any idea on what could we try?

 

Thanks beforehand

 

Link to comment
Share on other sites

That's ok. No need to re-post. Our AS3 forum is archived and made available for people to search for answers. We haven't actively developed or supported AS3 for many years. 

 

Unfortunately this isn't the type of thing we can devote much time towards. AS3 does support rotationX and rotationY so you really shouldn't worry about faking the 3D aspects. In the demo you provided the amount of rotation is directly related to the speed of the mouse movement, so a tween (which has a fixed duration and end values) isn't really a good solution.  Use a mousemove event and use the same approach as the JS version. I'm confident the AS3 solution will appear 95% identical to the JS version with some very minor syntax variations.

 

 

  • Thanks 1
Link to comment
Share on other sites

1 hour ago, Carl said:

Use a mousemove event and use the same approach as the JS version. I'm confident the AS3 solution will appear 95% identical to the JS version with some very minor syntax variations.

 

 

 

I understand, that's exactly what I'm doing right now. Shouldn't be tough to reach a similar level of precision. Thanks!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...