Good Day, I'm new to Phaser and still learning about it to. I am challenging my self to create a simple animation of a card flip somewhat realistic rather that making use of a scale.

This is something that I already started, But having trouble to attain what i need.

See this link http://sopronioli713.github.io/card_masking.

Here is my source code

    <title>Card Masking Flipping Card</title>
    <div class="canvas"></div>

    <script type="text/javascript" src="jquery-2.1.3.min.js"></script>

    <script type="text/javascript" src="phaser.js"></script>

    <script type="text/javascript">


            var game = new Phaser.Game(1024, 768, Phaser.AUTO, 'canvas', {
                init : init,
                preload : preload,
                create : create,
                update : update

            function init() {


            function preload() {
                game.load.image('back', '--.png');
                game.load.image('front', 'XRC.png');
                game.load.image('de', 'de.jpg');

            function create() {

                game.add.sprite(550, 100, 'de');

                var cardfront = game.add.sprite(400, 250, 'front');

                var cardback = game.add.sprite(150, 250, 'back');

                var tlx = cardback.x - (cardback.width / 2);
                var tly = cardback.y - (cardback.height / 2);
                var blx = tlx;
                var bly = cardback.y + (cardback.height / 2);
                var rtx = cardback.x + ((cardback.width / 2));
                var rty = tly;
                var rbx = cardback.x + (cardback.width / 2);
                var rby = bly;

                var mask = game.add.graphics(tlx, tly);


                    mask.lineStyle(2, 0xffd900, 1);
                    // draw a shape
                    mask.lineTo(0, cardback.height - 100);

                    mask.lineTo(100, cardback.height);

                    mask.lineTo(cardback.width, cardback.height);

                    mask.lineTo(cardback.width, 0);


                    cardback.mask = mask;

                // mask for front card
                var draw_front = game.add.graphics(tlx, tly + (cardback.height - 100));
                    draw_front.lineStyle(2, 0xffd900, 1);
                    draw_front.lineTo(100, 0);
                    draw_front.lineTo(100, 100);

                var txt = game.add.text(5,0, 'What i want to attain is that \n i want to draw portion of the front card \n to the orange area', {
                    font: "24px arial", 
                    fill: "#FFF", 
                    anchor: '0.5,0.5'

                var txt = game.add.text(600,50, 'Output that i want to attain', {
                    font: "24px arial", 
                    fill: "#FFF", 
                    anchor: '0.5,0.5'


            function update() {




1 Answer 1


It looks like you can do this using alpha masking with the bitmapdata type


    //  Here we add a Sprite to the display list
sprite = game.add.sprite(0, 0, 'chaos');

//  A mask is a Graphics object
mask = game.add.graphics(0, 0);

//  Shapes drawn to the Graphics object must be filled.

//  Here we'll draw a circle
mask.drawCircle(100, 100, 100);

//  And apply it to the Sprite
sprite.mask = mask;

In their example they draw dynamically so it's entirely possible to have the full card reveal be driven by this technique. Good luck!


You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .