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!
Have a way to Flip card ?
- skinkairewalker
- Enthusiast
- Posts: 635
- Joined: Fri Dec 04, 2015 9:26 pm
Re: Have a way to Flip card ?
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.
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 more ― Typeface - Sprite-based font include/module
Lizard - Script language for symbolic calculations and more ― Typeface - Sprite-based font include/module
- skinkairewalker
- Enthusiast
- Posts: 635
- Joined: Fri Dec 04, 2015 9:26 pm
Re: Have a way to Flip card ?
wooow, awesome !!!
- skinkairewalker
- Enthusiast
- Posts: 635
- Joined: Fri Dec 04, 2015 9:26 pm
Re: Have a way to Flip card ?
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?
Re: Have a way to Flip card ?
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 more ― Typeface - Sprite-based font include/module
Lizard - Script language for symbolic calculations and more ― Typeface - Sprite-based font include/module
- skinkairewalker
- Enthusiast
- Posts: 635
- Joined: Fri Dec 04, 2015 9:26 pm
Re: Have a way to Flip card ?
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?
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?
Re: Have a way to Flip card ?
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.
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 more ― Typeface - Sprite-based font include/module
Lizard - Script language for symbolic calculations and more ― Typeface - Sprite-based font include/module
- skinkairewalker
- Enthusiast
- Posts: 635
- Joined: Fri Dec 04, 2015 9:26 pm
Re: Have a way to Flip card ?
Awesome !!!
works fine.
Thanks very much
works fine.
Thanks very much