• Dear Cerberus X User!

    As we prepare to transition the forum ownership from Mike to Phil (TripleHead GmbH), we need your explicit consent to transfer your user data in accordance with our amended Terms and Rules in order to be compliant with data protection laws.

    Important: If you accept the amended Terms and Rules, you agree to the transfer of your user data to the future forum owner!

    Please read the new Terms and Rules below, check the box to agree, and click "Accept" to continue enjoying your Cerberus X Forum experience. The deadline for consent is April 5, 2024.

    Do not accept the amended Terms and Rules if you do not wish your personal data to be transferred to the future forum owner!

    Accepting ensures:

    - Continued access to your account with a short break for the actual transfer.

    - Retention of your data under the same terms.

    Without consent:

    - You don't have further access to your forum user account.

    - Your account and personal data will be deleted after April 5, 2024.

    - Public posts remain, but usernames indicating real identity will be anonymized. If you disagree with a fictitious name you have the option to contact us so we can find a name that is acceptable to you.

    We hope to keep you in our community and see you on the forum soon!

    All the best

    Your Cerberus X Team

Card flipping?

SLotman

Active member
3rd Party Module Dev
Tutorial Author
Joined
Jul 3, 2017
Messages
261
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?
 
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.

Cerberus:
Function Scale( x#,y# )
    Transform x,0,0,y,0,0
End Function
 
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
 
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 :(
 
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.
 
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.
 
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: 153
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
 
I think if you need to have focus on your app to make key input, then Gifcam might not work, or?
 
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.
 
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: 139
Back
Top Bottom