How to get card tilt effect like MTG arena/marvel snap?

bigstinky

I have been trying to replicate the effect of a card tilting in the direction you drag it, similar to games like marvel snap and MTG arena. At first I thought it would be as simple as getting a vector for the mouse's acceleration and then converting that to the rotation on the card.
However that last part was much easier said than done as this is the first time I have done anything in 3D. After much trial and error (and failing to understand quaternions), the best solution I could come up with is defining a rotation for left, right, up, down, and center and then interpolating between them based on the acceleration.
While my solution gets the job done (sort of), I would love to know how a proper card game gets this effect.
This is what my solution looks like

var up: Quaternion = Quaternion(0.0871557, 0.0, 0.0, 0.9961947)
var down: Quaternion = Quaternion(-0.0871557, 0.0, 0.0, 0.9961947)
var left: Quaternion = Quaternion(0.0, 0.0, -0.0871557, 0.9961947)
var right: Quaternion = Quaternion(0.0, 0.0, 0.0871557, 0.9961947)
var center: Quaternion = Quaternion(0.0, 0.0, 0.0, 1.0)
var acceleration: Vector2 = Vector2.ZERO

func _physics_process(delta: float) -> void:
	acceleration = get_mouse_acceleration()
	var card_basis: Quaternion = Quaternion(Card3D.transform.basis)
	
	if (acceleration == Vector2.ZERO):
		card_basis = card_basis.slerp(center, delta)
	elif (abs(acceleration.x) > abs(acceleration.y)):
		if (acceleration.x < 0.0):
			card_basis = card_basis.slerp(right, delta)
		else:
			card_basis = card_basis.slerp(left, delta)
	else:
		if (acceleration.y < 0.0):
			card_basis = card_basis.slerp(down, delta)
		else:
			card_basis = card_basis.slerp(up, delta)
	
	Card3D.transform.basis = Basis(card_basis)

IceBergyn

Do you have a video of the effect ? I am not aware of this game.

bigstinky

IceBergyn
[
this video shows kind of what I'm looking for. It has the card as a physics object, and uses some property called angular drag. He turns the card's velocity into a quaternion, and I don't see how that works.

IceBergyn

I would try to get this effect with out physics just with the mouse moviment and lerp ... But I am not sure if it would get the same effect ( nice effect by the way ). Did you try to just move the object with the mouse moviment ?
I have a similar kind of thing with camera following car, that follows the car but let the car moves right or left when it goes with the enough force.

IceBergyn

This is the code I use for the following car camera, hope it helps, let me know if you need the intire code or some explanation ok :

func get_rotation_from_direction( look_direction : Vector3 ) -> Basis:
	look_direction = look_direction.normalized()
	var x_axis = look_direction.cross(Vector3.UP)
	return Basis( x_axis , Vector3.UP , -look_direction )

func _process(delta):
	if(positionNode!=null):
		self.set_position ( positionNode.get_position() )

# Called every frame. 'delta' is the elapsed time since the previous frame.
func _physics_process(delta):
	if(physicBody==null): return
	var current_velocity = physicBody.get_linear_velocity()
	current_velocity.y = 0
	if(current_velocity.length_squared()>1):
		direction = lerp( direction , -current_velocity.normalized() , smooth_speed*delta )
	global_transform.basis = get_rotation_from_direction(direction)

bigstinky

Using some of the math from that video, your advice to use the mouse movement, and interpolating the rotation with a rotation based on the velocity this is the solution I came up with

var last_position: Vector2 = Vector2.ZERO
var mouse_velocity: Vector2 = Vector2.ZERO
func _physics_process(_delta: float) -> void:
	position = get_global_mouse_position()
	var next_velocity: Vector2 = (get_global_mouse_position() - last_position)
	mouse_velocity = next_velocity.clamp(Vector2(-0.5, -0.5), Vector2(0.5, 0.5))
	last_position = get_global_mouse_position()
	var new_rotation: Quaternion 
	new_rotation = Quaternion.from_euler(Vector3(mouse_velocity.y, 0, -mouse_velocity.x))
	var card_basis: Quaternion = Quaternion(Card3D.transform.basis)
	card_basis = card_basis.slerp(new_rotation, 0.1)
	Card3D.transform.basis = Basis(card_basis)

Compared to my first attempt, this works much better