4
\$\begingroup\$

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

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

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

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

    <script type="text/javascript">

        $(document).ready(function(){

            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');
                    cardfront.anchor.setTo(0.5,0.5);

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


                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.beginFill(0xFF3300);

                    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);

                    mask.endFill();

                    cardback.mask = mask;


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


                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", 
                    align:'right', 
                    fontWeight:'bold', 
                    anchor: '0.5,0.5'
                });


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

            };

            function update() {

            };
        });
    </script>

</body>

</html>
\$\endgroup\$

1 Answer 1

1
\$\begingroup\$

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

https://phaser.io/examples/v2/sprites/mask

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

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

//  Shapes drawn to the Graphics object must be filled.
mask.beginFill(0xffffff);

//  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!

\$\endgroup\$

You must log in to answer this question.

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