Card flipping?

SLotman

Active member
3rd Party Module Dev
Joined
Jul 3, 2017
Messages
173
Let me ask you guys a question: using purely mojo1, is it possible to achieve an animation or a card flipping like the one in REIGNS?

Reigns%202.gif

(Image from REIGNS article on Gamasutra.com)

I know I can use SetScale to mirror any image, but that looks kind of 'flat', not like a true 'card turning' thing. Is there any other way to implement that?
 

Phil7

Administrator
CX Code Contributor
3rd Party Tool Dev
Joined
Jun 26, 2017
Messages
602
I guess using Transform() or SetMatrix() should do the trick. I didn't use it so I don't know how to set the values, but maybe you can look into how Scale() is implemented and experiment from there.

code_language.cerberus:
Function Scale( x#,y# )
    Transform x,0,0,y,0,0
End Function
 

SLotman

Active member
3rd Party Module Dev
Joined
Jul 3, 2017
Messages
173
Hmmm. Using the Transform seems to just 'skew' the image. But I saw it has a "transform(matrix)" function - I tried using that but it didn't work.

Looking deep into Mojo, unfortunately neither SetMatrix or Transform gives access to fiddle with the Z axis (actually rotation on the Y axis that I need...), you can just change the scale/rotation/translation on some parts of the matrix. You can't even access the matrix itself, "SetMatrix(array)" will only take some of the values and not the whole array :(

Code:
Function SetMatrix( m#[] )
    SetMatrix m[0],m[1],m[2],m[3],m[4],m[5]
End
 

SLotman

Active member
3rd Party Module Dev
Joined
Jul 3, 2017
Messages
173
Yup, no way to do it :(

I've looked even into the 'drawimage' function into mojo.glfw.cpp and it only takes a few parameters to draw the image, ignoring a third axis. So, a LOT would have to be changed in order for this to function :(
 

SLotman

Active member
3rd Party Module Dev
Joined
Jul 3, 2017
Messages
173
If you like the effect there I can upload the source for it.
It looks like it just uses SetScale to flip the cards, right?

I'm almost getting the effect right over here. I can calculate the (x1,y1)-(x2,y2)-(x3,y3)-(x4-y4) and actually draw the lines on screen.
The thing is to 'texturemap' an image into it. If I can just find out the height on every step I draw a column, I think it will work.

The routine I have (to draw a 256x256 image):
Code:
    Method drawTexture(x1:Float, y1:Float, x2:Float, y2:Float, x3:Float, y3:Float, x4:Float, y4:Float)

        Local curX:Float = x1
            If x2 < curX Then curX = x2
            If x3 < curX Then curX = x3
            If x4 < curX Then curX = x4

        Local startX:Float = curX

        Local maxX:Float = x1
            If x2 > maxX Then maxX = x2
            If x3 > maxX Then maxX = x3
            If x4 > maxX Then maxX = x4

        Local sw:Float = (maxX - curX) / 256.0
        If sw = 0 Then Return

        Local ys:Float[4]

        ys[0] = y1
        ys[1] = y2
        ys[2] = y3
        ys[3] = y4

        ' yuck! LAME sort...
        For Local i:Int = 0 To 2
            If ys[i+1] < ys[i] Then
                Local f:Float = ys[i]
                ys[i] = ys[i+1]
                ys[i+1] = f
                i-=1
            End If
        Next

        Local minY:Float = ys[0]
        Local minY2:Float = ys[1]
        Local maxY:Float = ys[3]
        Local curY:Float = minY
        Local sh:Float = (minY2-minY) / 256.0

        ' draw it one (scaled) column at a time.
        For Local curX:Int = 0 To 255
            PushMatrix()
            Translate startX + curX*sw, curY
            Scale sw, 1
            DrawImageRect Resources.imgCard.image, 0, 0, curX, 0,1,256
            PopMatrix()
            curY+=sh
        Next
    End Method

And this is the result I have now...

upload.png

The black lines are the correct perspective. The image scaling on X is correct too... just need to implement Y scaling, but I haven't figured it out yet.
 

MikeHart

Administrator
Joined
Jun 19, 2017
Messages
3,042
To bad you can't use mojo2, it is so easy to achieve there.
Anyway, did you had a look at the mojo/skn/Monkenstein example? Might give you a hint.
 

SLotman

Active member
3rd Party Module Dev
Joined
Jul 3, 2017
Messages
173
Hah! I've made it! :D

It's ugly as hell, probably will need improvements... but it is working ;)

Here is the code, if it may help someone, someday ;)
Code:
    Method drawTexture(x1:Float, y1:Float, x2:Float, y2:Float, x3:Float, y3:Float, x4:Float, y4:Float)
        Local curX:Float = x1
            If x2 < curX Then curX = x2
            If x3 < curX Then curX = x3
            If x4 < curX Then curX = x4
            
        Local startX:Float = curX
            
        Local maxX:Float = x1
            If x2 > maxX Then maxX = x2
            If x3 > maxX Then maxX = x3
            If x4 > maxX Then maxX = x4

        Local sw:Float = (maxX - curX) / 256.0
        If sw = 0 Then Return
        
        Local ys:Float[4]
        ys[0] = y1
        ys[1] = y2
        ys[2] = y3
        ys[3] = y4
        
        'yuck!
        For Local i:Int = 0 To 2
            If ys[i+1] < ys[i] Then
                Local f:Float = ys[i]
                ys[i] = ys[i+1]
                ys[i+1] = f
                i-=1
            End If
        Next
        
        Local minY:Float = ys[0]
        Local minY2:Float = ys[1]
        Local maxY:Float = ys[3]
        Local curY:Float = minY
        Local curY2:Float = maxY
        
        Local sh:Float = (minY2-minY) / 256.0
        If angle>90 And angle<=180 Or angle>=270 Then curY = ys[1]; curY2 = ys[2]

        For Local curX:Int = 0 To 255
            PushMatrix()
            Translate startX + curX*sw, curY
            Local sy:Float 
            sy = (curY2 - curY) / 256.0            
            Scale sw, sy
            
            If angle>90 And angle<270 Then
                DrawImageRect Resources.imgCard.image, 0, 0, 255-curX, 0,1,256
            Else
                DrawImageRect Resources.imgCard.image, 0, 0, curX, 0,1,256
            End If
            
            PopMatrix()
            If angle<=90 Or (angle>=180 And angle<270) Then
                curY+=sh
                curY2-=sh
            Else
                If angle<=180 Or angle>=270 Then
                    curY-=sh
                    curY2+=sh
                End If
            End If
        Next
    End Method
 

Attachments

  • turn.gif
    turn.gif
    4.4 MB · Views: 76

SLotman

Active member
3rd Party Module Dev
Joined
Jul 3, 2017
Messages
173
Yup, for this one I've used GIFcam. Sometimes I also use just OBS to capture the video, then I have a .bat file that I use with FFMPEG to convert any video into a GIF:

Code:
ffmpeg -i %1 -vf scale=-1:-1 -sws_dither bayer -y %1.gif
 

MikeHart

Administrator
Joined
Jun 19, 2017
Messages
3,042
I think if you need to have focus on your app to make key input, then Gifcam might not work, or?
 

SLotman

Active member
3rd Party Module Dev
Joined
Jul 3, 2017
Messages
173
It works. You just start the capture on GIFCam, then you click on your program. It gets the focus and start running normally while GIFcam keeps recording in the background.
 

SLotman

Active member
3rd Party Module Dev
Joined
Jul 3, 2017
Messages
173
If any of you speaks Portuguese, the game I've made using this code above is online: https://www.icongames.com.br/quarentena

If you don't want to see that link, here is a small 'teaser' I've made during development. It's a small joke, the newscaster is saying "Urgent! Icon Games is going to make a ZOMBIE GAME!!! ... Wait, I've been informed that this is FAKE NEWS, the game does not have any zombie!"

The game is a parody of 'reigns', but during this quarentine we're all going through. You're stuck on a loop, you die, you start all over :)

My next goal is to add more stories into the game, make it also in english and release it on mobile :)
 

Attachments

  • quaqua.gif
    quaqua.gif
    4.8 MB · Views: 47
Top Bottom