Have a way to Flip card ?

Advanced game related topics
User avatar
skinkairewalker
Enthusiast
Enthusiast
Posts: 627
Joined: Fri Dec 04, 2015 9:26 pm

Have a way to Flip card ?

Post by skinkairewalker »

hello guys, i would like to know if anyone has the flip card algorithm, similar to this one: https://www.soqueto.com/videos/flip.mp4
whether with ImageGadget, Canvas or Screen...

Thank you for your attention in advance! :)
User avatar
STARGÅTE
Addict
Addict
Posts: 2067
Joined: Thu Jan 10, 2008 1:30 pm
Location: Germany, Glienicke
Contact:

Re: Have a way to Flip card ?

Post by STARGÅTE »

I am using TransformSprite() for such effect:

Here I wrote a procedure to rotate a sprite in all three axes.
When you want to flip a card, just draw both sprites (front and back) and rotate it.

Code: Select all

Procedure HyperTransformSprite(Sprite.i, Width.f, Height.f, Depth.f, Roll.f, Yaw.f, Pitch.f, AlignX.f=0.5, AlignY.f=0.5)
   
   Protected CosZ.f = Cos(Radian(Roll)), CosY.f = Cos(Radian(Yaw)), CosX.f = Cos(Radian(Pitch))
   Protected SinZ.f = Sin(Radian(Roll)), SinY.f = Sin(Radian(Yaw)), SinX.f = Sin(Radian(Pitch))
   
   Protected A11.f =  CosY*CosZ,                A12.f = -CosY*SinZ,                A13.f =  SinY
   Protected A21.f =  SinX*SinY*CosZ+CosX*SinZ, A22.f = -SinX*SinY*SinZ+CosX*CosZ, A23.f = -SinX*CosY
   Protected A31.f = -CosX*SinY*CosZ+SinX*SinZ, A32.f =  CosX*SinY*SinZ+SinX*CosZ, A33.f =  CosX*CosY
   
   Protected U0.f = -AlignX*Width,  U1.f = (1-AlignX)*Width
   Protected V0.f = -AlignY*Height, V1.f = (1-AlignY)*Height
   
   Protected Z1.f = U0*A31 + V0*A32 + Depth
   Protected Y1.f = ( U0*A21 + V0*A22 ) * Depth / Z1
   Protected X1.f = ( U0*A11 + V0*A12 ) * Depth / Z1
   Protected Z2.f = U1*A31 + V0*A32 + Depth
   Protected Y2.f = ( U1*A21 + V0*A22 ) * Depth / Z2
   Protected X2.f = ( U1*A11 + V0*A12 ) * Depth / Z2
   Protected Z3.f = U1*A31 + V1*A32 + Depth
   Protected Y3.f = ( U1*A21 + V1*A22 ) * Depth / Z3
   Protected X3.f = ( U1*A11 + V1*A12 ) * Depth / Z3
   Protected Z4.f = U0*A31 + V1*A32 + Depth
   Protected Y4.f = ( U0*A21 + V1*A22 ) * Depth / Z4
   Protected X4.f = ( U0*A11 + V1*A12 ) * Depth / Z4
   
   TransformSprite(Sprite, X1, Y1, Z1, X2, Y2, Z2, X3, Y3, Z3, X4, Y4, Z4)
   
EndProcedure



InitSprite()
InitNetwork()

UseJPEGImageDecoder()

Enumeration
   #Window
   #Sprite
EndEnumeration

OpenWindow(#Window, 0, 0, 800, 600, "ScreenTitle", #PB_Window_SystemMenu|#PB_Window_ScreenCentered)
OpenWindowedScreen(WindowID(#Window), 0, 0, WindowWidth(#Window), WindowHeight(#Window), 0, 0, 0)

SpriteQuality(#PB_Sprite_BilinearFiltering)

CatchSprite(#Sprite, ReceiveHTTPMemory("http://data.unionbytes.de/convergence_by_rahll.jpg"))

Repeat
   
   Repeat
      
      Select WindowEvent()
         Case #PB_Event_CloseWindow
            End
         Case #Null
            Break
      EndSelect
      
   ForEver
   
   ClearScreen(0)
   
   HyperTransformSprite(#Sprite, 160, 100, 300, ElapsedMilliseconds()/10, 0, 0)
   DisplaySprite(#Sprite, 200, 150)
   
   HyperTransformSprite(#Sprite, 160, 100, 300, 0, Sin(ElapsedMilliseconds()/1000)*70, 0)
   DisplaySprite(#Sprite, 600, 150)
   
   HyperTransformSprite(#Sprite, 160, 100, 300, 0, 0, Sin(ElapsedMilliseconds()/1000)*70)
   DisplaySprite(#Sprite, 200, 450)
   
   HyperTransformSprite(#Sprite, 160, 100, 300, ElapsedMilliseconds()/10, 0, -40, 1.0, 0.0)
   DisplaySprite(#Sprite, 600, 450)
   
   FlipBuffers()
   
ForEver
PB 6.01 ― Win 10, 21H2 ― Ryzen 9 3900X, 32 GB ― NVIDIA GeForce RTX 3080 ― Vivaldi 6.0 ― www.unionbytes.de
Lizard - Script language for symbolic calculations and moreTypeface - Sprite-based font include/module
User avatar
skinkairewalker
Enthusiast
Enthusiast
Posts: 627
Joined: Fri Dec 04, 2015 9:26 pm

Re: Have a way to Flip card ?

Post by skinkairewalker »

wooow, awesome !!!
User avatar
skinkairewalker
Enthusiast
Enthusiast
Posts: 627
Joined: Fri Dec 04, 2015 9:26 pm

Re: Have a way to Flip card ?

Post by skinkairewalker »

but how do I put another sprite in the back? for when you turn the sprite it will be back as another face of the card?
User avatar
STARGÅTE
Addict
Addict
Posts: 2067
Joined: Thu Jan 10, 2008 1:30 pm
Location: Germany, Glienicke
Contact:

Re: Have a way to Flip card ?

Post by STARGÅTE »

Please find my code how it can work:

Code: Select all

Procedure HyperTransformSprite(Sprite.i, Width.f, Height.f, Depth.f, Roll.f, Yaw.f, Pitch.f, AlignX.f=0.5, AlignY.f=0.5)
   
   Protected CosZ.f = Cos(Radian(Roll)), CosY.f = Cos(Radian(Yaw)), CosX.f = Cos(Radian(Pitch))
   Protected SinZ.f = Sin(Radian(Roll)), SinY.f = Sin(Radian(Yaw)), SinX.f = Sin(Radian(Pitch))
   
   Protected A11.f =  CosY*CosZ,                A12.f = -CosY*SinZ,                A13.f =  SinY
   Protected A21.f =  SinX*SinY*CosZ+CosX*SinZ, A22.f = -SinX*SinY*SinZ+CosX*CosZ, A23.f = -SinX*CosY
   Protected A31.f = -CosX*SinY*CosZ+SinX*SinZ, A32.f =  CosX*SinY*SinZ+SinX*CosZ, A33.f =  CosX*CosY
   
   Protected U0.f = -AlignX*Width,  U1.f = (1-AlignX)*Width
   Protected V0.f = -AlignY*Height, V1.f = (1-AlignY)*Height
   
   Protected Z1.f = U0*A31 + V0*A32 + Depth
   Protected Y1.f = ( U0*A21 + V0*A22 ) * Depth / Z1
   Protected X1.f = ( U0*A11 + V0*A12 ) * Depth / Z1
   Protected Z2.f = U1*A31 + V0*A32 + Depth
   Protected Y2.f = ( U1*A21 + V0*A22 ) * Depth / Z2
   Protected X2.f = ( U1*A11 + V0*A12 ) * Depth / Z2
   Protected Z3.f = U1*A31 + V1*A32 + Depth
   Protected Y3.f = ( U1*A21 + V1*A22 ) * Depth / Z3
   Protected X3.f = ( U1*A11 + V1*A12 ) * Depth / Z3
   Protected Z4.f = U0*A31 + V1*A32 + Depth
   Protected Y4.f = ( U0*A21 + V1*A22 ) * Depth / Z4
   Protected X4.f = ( U0*A11 + V1*A12 ) * Depth / Z4
   
   TransformSprite(Sprite, X1, Y1, Z1, X2, Y2, Z2, X3, Y3, Z3, X4, Y4, Z4)
   
EndProcedure



InitSprite()
InitNetwork()

UsePNGImageDecoder()

Enumeration
   #Window
   #SpriteFront
   #SpriteBack
EndEnumeration

OpenWindow(#Window, 0, 0, 600, 400, "ScreenTitle", #PB_Window_SystemMenu|#PB_Window_ScreenCentered)
OpenWindowedScreen(WindowID(#Window), 0, 0, WindowWidth(#Window), WindowHeight(#Window), 0, 0, 0)

SpriteQuality(#PB_Sprite_BilinearFiltering)

CatchSprite(#SpriteFront, ReceiveHTTPMemory("http://data.unionbytes.de/10.png"), #PB_Sprite_AlphaBlending)
CatchSprite(#SpriteBack, ReceiveHTTPMemory("http://data.unionbytes.de/Deck.png"), #PB_Sprite_AlphaBlending)

Repeat
   
   Repeat
      
      Select WindowEvent()
         Case #PB_Event_CloseWindow
            End
         Case #Null
            Break
      EndSelect
      
   ForEver
   
   ClearScreen(0)
   
   HyperTransformSprite(#SpriteFront, 160, 220, 500, 0, Sin(ElapsedMilliseconds()/1000)*180+180, 0) ; this sprite is rotated 180° more
   HyperTransformSprite(#SpriteBack, 160, 220, 500, 0, Sin(ElapsedMilliseconds()/1000)*180, 0)
   DisplayTransparentSprite(#SpriteFront, 200, 150) ; display both sprites
   DisplayTransparentSprite(#SpriteBack, 200, 150) 
   
   FlipBuffers()
   
ForEver
PB 6.01 ― Win 10, 21H2 ― Ryzen 9 3900X, 32 GB ― NVIDIA GeForce RTX 3080 ― Vivaldi 6.0 ― www.unionbytes.de
Lizard - Script language for symbolic calculations and moreTypeface - Sprite-based font include/module
User avatar
skinkairewalker
Enthusiast
Enthusiast
Posts: 627
Joined: Fri Dec 04, 2015 9:26 pm

Re: Have a way to Flip card ?

Post by skinkairewalker »

thank you so much !!! this is what I need to create my card game...

but I got a doubt, how would it work if I wanted to "pause" the rotation?

an example would be clicking on the image, it rotates one way, if I click again, it rotates the other way. Could you explain to me how I would go about defining breaks like this?
User avatar
STARGÅTE
Addict
Addict
Posts: 2067
Joined: Thu Jan 10, 2008 1:30 pm
Location: Germany, Glienicke
Contact:

Re: Have a way to Flip card ?

Post by STARGÅTE »

In my card game I use one of my includes, called "Slider".
It allows you to change a variable from one value to another value in a specified time (and how).

Here is another example, just click with the cursor onto the screen and the card flips.

Code: Select all

;- Slider inlcude by STARGÅTE

Prototype.f SliderFunction(Time.f)

Structure Slider
	Number.i
	Function.SliderFunction
	OldValue.f
	NewValue.f
	OldTime.i
	NewTime.i
EndStructure

Structure SliderInclude
	List		Slider.Slider()
	Array		*SliderID.Slider(0)
EndStructure

Global SliderInclude.SliderInclude

Procedure.i SliderID(Slider.i)
	If Slider & ~$FFFF
		ProcedureReturn Slider
	Else
		ProcedureReturn SliderInclude\SliderID(Slider)
	EndIf
EndProcedure

Procedure.i IsSlider(Slider.i)
	ForEach SliderInclude\Slider()
		If SliderInclude\Slider()\Number = Slider Or @SliderInclude\Slider() = Slider
			ProcedureReturn @SliderInclude\Slider()
		EndIf
	Next
EndProcedure

Procedure.i FreeSlider(Slider.i)
	Protected *Slider.Slider = SliderID(Slider)
	With *Slider
		If Not \Number & ~$FFFF
			SliderInclude\SliderID(\Number) = #Null
		EndIf
		ChangeCurrentElement(SliderInclude\Slider(), *Slider)
		DeleteElement(SliderInclude\Slider())
	EndWith
EndProcedure

Procedure.i CreateSlider(Slider.i, Function.SliderFunction=#Null, Value.f=0.0)
	Protected *Slider.Slider
	If Slider = #PB_Any
		*Slider.Slider = AddElement(SliderInclude\Slider())
		*Slider\Number = *Slider
	ElseIf Not Slider & ~$FFFF
		*Slider.Slider = AddElement(SliderInclude\Slider())
		*Slider\Number = Slider
		If ArraySize(SliderInclude\SliderID()) < Slider 
			ReDim SliderInclude\SliderID(Slider)
		ElseIf SliderInclude\SliderID(Slider)
			FreeSlider(SliderInclude\SliderID(Slider))
		EndIf
		SliderInclude\SliderID(Slider) = *Slider
	Else
		ProcedureReturn #Null
	EndIf
	With *Slider
		\Function = Function
		\OldValue = Value
		\NewValue = Value
	EndWith
	ProcedureReturn *Slider
EndProcedure

Procedure.f SliderValue(Slider.i)
	Protected *Slider.Slider = SliderID(Slider)
	Protected Timestamp.i = ElapsedMilliseconds()
	With *Slider
		If Timestamp >= \NewTime
			ProcedureReturn \NewValue
		ElseIf Timestamp >= \OldTime
			If \Function
				ProcedureReturn \OldValue + \Function((Timestamp-\OldTime)/(\NewTime-\OldTime))*(\NewValue-\OldValue)
			Else
				ProcedureReturn \OldValue + (Timestamp-\OldTime)/(\NewTime-\OldTime)*(\NewValue-\OldValue)
			EndIf
		Else
			ProcedureReturn \OldValue
		EndIf
	EndWith
EndProcedure

Procedure.f SliderTargetValue(Slider.i)
	Protected *Slider.Slider = SliderID(Slider)
	ProcedureReturn *Slider\NewValue
EndProcedure

Procedure.i ChangeSlider(Slider.i, Value.f, Time.f=0.0, Function.SliderFunction=#Null, Delay.f=0.0)
	Protected *Slider.Slider = SliderID(Slider)
	Protected Timestamp.i = ElapsedMilliseconds()
	With *Slider
		If Value <> \NewValue
			If Function
				\Function = Function
			EndIf
			\OldValue = SliderValue(Slider)
			\NewValue = Value
			\OldTime  = Delay*1000 + Timestamp
			\NewTime  = Delay*1000 + Timestamp + Time * 1000
		EndIf
	EndWith
EndProcedure



;- Example: flipping a card

Procedure HyperTransformSprite(Sprite.i, Width.f, Height.f, Depth.f, Roll.f, Yaw.f, Pitch.f, AlignX.f=0.5, AlignY.f=0.5)
	
	Protected CosZ.f = Cos(Radian(Roll)), CosY.f = Cos(Radian(Yaw)), CosX.f = Cos(Radian(Pitch))
	Protected SinZ.f = Sin(Radian(Roll)), SinY.f = Sin(Radian(Yaw)), SinX.f = Sin(Radian(Pitch))
	
	Protected A11.f =  CosY*CosZ,                A12.f = -CosY*SinZ,                A13.f =  SinY
	Protected A21.f =  SinX*SinY*CosZ+CosX*SinZ, A22.f = -SinX*SinY*SinZ+CosX*CosZ, A23.f = -SinX*CosY
	Protected A31.f = -CosX*SinY*CosZ+SinX*SinZ, A32.f =  CosX*SinY*SinZ+SinX*CosZ, A33.f =  CosX*CosY
	
	Protected U0.f = -AlignX*Width,  U1.f = (1-AlignX)*Width
	Protected V0.f = -AlignY*Height, V1.f = (1-AlignY)*Height
	
	Protected Z1.f = U0*A31 + V0*A32 + Depth
	Protected Y1.f = ( U0*A21 + V0*A22 ) * Depth / Z1
	Protected X1.f = ( U0*A11 + V0*A12 ) * Depth / Z1
	Protected Z2.f = U1*A31 + V0*A32 + Depth
	Protected Y2.f = ( U1*A21 + V0*A22 ) * Depth / Z2
	Protected X2.f = ( U1*A11 + V0*A12 ) * Depth / Z2
	Protected Z3.f = U1*A31 + V1*A32 + Depth
	Protected Y3.f = ( U1*A21 + V1*A22 ) * Depth / Z3
	Protected X3.f = ( U1*A11 + V1*A12 ) * Depth / Z3
	Protected Z4.f = U0*A31 + V1*A32 + Depth
	Protected Y4.f = ( U0*A21 + V1*A22 ) * Depth / Z4
	Protected X4.f = ( U0*A11 + V1*A12 ) * Depth / Z4
	
	TransformSprite(Sprite, X1, Y1, Z1, X2, Y2, Z2, X3, Y3, Z3, X4, Y4, Z4)
	
EndProcedure

InitSprite()
InitNetwork()

UsePNGImageDecoder()

Enumeration
	#Window
	#SpriteFront
	#SpriteBack
	#Slider
EndEnumeration

OpenWindow(#Window, 0, 0, 600, 400, "ScreenTitle", #PB_Window_SystemMenu|#PB_Window_ScreenCentered)
OpenWindowedScreen(WindowID(#Window), 0, 0, WindowWidth(#Window), WindowHeight(#Window), 0, 0, 0)

SpriteQuality(#PB_Sprite_BilinearFiltering)

CatchSprite(#SpriteFront, ReceiveHTTPMemory("http://data.unionbytes.de/10.png"), #PB_Sprite_AlphaBlending)
CatchSprite(#SpriteBack, ReceiveHTTPMemory("http://data.unionbytes.de/Deck.png"), #PB_Sprite_AlphaBlending)


Procedure.f MySlider(Time.f) ; This is an optional definition for the slider behavior. It defines how the value (0.0-1.0) has to change during the time (0.0-1.0).
	ProcedureReturn 0.5-Cos(Time*#PI)*0.5
EndProcedure

CreateSlider(#Slider) ; Create a slider with linear behavior, it is like other PB functions
; CreateSlider(#Slider, @MySlider()) ; Try it, for soft behavior

Repeat
	
	Repeat
		
		Select WindowEvent()
			Case #PB_Event_CloseWindow
				End
			Case #PB_Event_LeftClick
				If SliderTargetValue(#Slider) = 0.0 ; If the new target value is 0.0, flip to 180.0 in 1.0 seconds
					ChangeSlider(#Slider, 180.0, 1.0) 
				Else
					ChangeSlider(#Slider, 0.0, 1.0) ; If the new target value is not 0.0, flip to 0.0 in 1.0 seconds
				EndIf
			Case #Null
				Break
		EndSelect
		
	ForEver
	
	ClearScreen(0)
	
	HyperTransformSprite(#SpriteFront, 160, 220, 500, 0, SliderValue(#Slider)+180, 0) ; this sprite is rotated 180° more
	HyperTransformSprite(#SpriteBack, 160, 220, 500, 0, SliderValue(#Slider), 0)
	DisplayTransparentSprite(#SpriteFront, 200, 150) ; display both sprites
	DisplayTransparentSprite(#SpriteBack, 200, 150) 
	
	FlipBuffers()
	
ForEver
PB 6.01 ― Win 10, 21H2 ― Ryzen 9 3900X, 32 GB ― NVIDIA GeForce RTX 3080 ― Vivaldi 6.0 ― www.unionbytes.de
Lizard - Script language for symbolic calculations and moreTypeface - Sprite-based font include/module
User avatar
skinkairewalker
Enthusiast
Enthusiast
Posts: 627
Joined: Fri Dec 04, 2015 9:26 pm

Re: Have a way to Flip card ?

Post by skinkairewalker »

Awesome !!!
works fine.
Thanks very much :D
Post Reply