How to flip the card(in guiTexture)

Questions & Answers
1

Hello. I am thinking to create a memory card game. For example, i will have all the cards face down. So when player click on the card, i want the card to flip over. How do i go about doing the effect of flipping the guiTexture?? I hope it is clear. Not good in english.

Thank you

3

As an alternative with GUITextures:

You could animate the GUITexture by scaling it in a horizontal way.

`myCard.pixelInset.width = someAnimatedWidth`

If the card has a width of 0, swap the texture of the card with the front texture: `myCard.texture = theFrontTexture`. And then animate it back to its original size.

UPDATE

To animate your card, you should use the Time class. I don't think I can make it any easier for you than this here. It has been written from scratch, so no compilation ensurance. =)

// save the original width in some variable first on the initialize step
// set a variable called animateSpeed to some number you like for the speed.
// save some state that tells you if we are in the front or in the back.
var originalWidth;
var animSpeed = 5;
var isFront = false;
var isAnimating = false; // set this to true when clicking

function Awake()
{
    originalWidth = myCard.pixelInset.width;
}

function Update()
{
    if(isAnimating)
    {
        if (myCard.pixelInset.width > originalWidth) 
        {
            // do nothing, the card is as big as it should be
            newWidth = 0;
            isAnimating = false; // done animating

            // snap the card to exactly the right size
            myCard.pixelInset.width = originalWidth;
        }
        // check the width of the card
        else if(myCard.pixelInset.width > 0 && !isFront)
        {
            // make smaller, we are still looking at the back
            newWidth = -animSpeed * Time.deltaTime;
        }
        else if(myCard.pixelInset.width > 0 && isFront)
        {
            // make larger, we are looking at the front
            newWidth = animSpeed * Time.deltaTime;
        }
        else if (myCard.pixelInset.width < 0)
        {
            // the turnover point
            myCard.texture = frontTexture;
            isFront = true;
        }            

        // add the new width to the current width
        myCard.pixelInset.width += newWidth;
    }   
}
2

First of all, I like your idea, this is a great idea for a first game, if you’re just starting out with Unity. :slight_smile:

Secondly, you’ll find that this is totally simple if you don’t use guitextures for the cards. Make the cards actual 3D objects instead and scale the mesh to give it a proper size as a card. You should use a Cube mesh and make it really thin for a card, not a Plane mesh. This is because a Plane mesh is a single, 2D-surface, and will not accept a different texture on either side. A thin cube will. Then slap the card-textures onto the cubes’ front and back. You can use a large plane underneath them all and give it a wooden texture to make it look like the surface of a tabletop, then position a camera right on top of the table and have it look directly down.

Once your cards are 3D objects, you can flip them by rotating them around one of its axes, but remember to do this in LOCAL space. You can use transform.Rotate to accomplish that, making sure you pass Space.Self to indicate local space:

    transform.Rotate(new Vector3(0, 180, 0), Space.Self);

That line of code flips a card to its backside around the y-axis.