{"id":160,"date":"2017-04-21T11:12:01","date_gmt":"2017-04-21T11:12:01","guid":{"rendered":"http:\/\/www.netexl.com\/blog\/?p=160"},"modified":"2017-04-21T16:13:53","modified_gmt":"2017-04-21T16:13:53","slug":"card-flip-animation-in-phaser","status":"publish","type":"post","link":"https:\/\/www.netexl.com\/blog\/card-flip-animation-in-phaser\/","title":{"rendered":"Card Flip Animation in Phaser"},"content":{"rendered":"<p>The code example below shows how a simple card flip animation can be achieved in Phaser. In order to flip or rotate a card around x-axis we need to set the scale to zero, change the sprite frame and then set the scale back to one.<\/p>\n<pre class=\"lang:default decode:true\">TheGame.MyGame.prototype = {\r\n    preload: function () {\r\n    },\r\n    create: function () {\r\n\t\tthis.card = this.add.sprite(this.world.centerX, this.world.centerY, \"card\")\r\n\t\tthis.card.frame = 0;\r\n\t\tthis.card.anchor.setTo(0.5);\r\n\t\t\/\/ roll the dice when a mouse button is clicked\r\n\t\tthis.game.input.onDown.add(this.flipCard, this);\r\n    },\r\n\tflipCard: function () {\r\n\t\tvar tween1 = this.game.add.tween(this.card.scale);\r\n\t    tween1.to({ x: 0 }, 300, Phaser.Easing.Linear.None, false, 0);\r\n\t    tween1.onComplete.addOnce(function (sprite, tween) {\r\n\t\t\tif(this.card.frame == 0)\r\n\t            this.card.frame = 1;\r\n\t\t    else\r\n\t\t        this.card.frame = 0;\r\n\t    }, this);\r\n\t    var tween2 = this.game.add.tween(this.card.scale);\r\n\t    tween2.to({ x: 1 }, 300, Phaser.Easing.Linear.None, false, 0);\r\n\t    tween1.chain(tween2);\r\n\t    tween1.start();\t\r\n\t}\r\n};\r\n<\/pre>\n<p>This example flips the card around x-axis. In order to flip it around y-axis, change as following<\/p>\n<pre class=\"lang:default decode:true \">\tflipCard: function () {\r\n\t\tvar tween1 = this.game.add.tween(this.card.scale);\r\n\t    tween1.to({ y: 0 }, 300, Phaser.Easing.Linear.None, false, 0);\r\n\t    tween1.onComplete.addOnce(function (sprite, tween) {\r\n\t\t\tif(this.card.frame == 0)\r\n\t            this.card.frame = 1;\r\n\t\t    else\r\n\t\t        this.card.frame = 0;\r\n\t    }, this);\r\n\t    var tween2 = this.game.add.tween(this.card.scale);\r\n\t    tween2.to({ y: 1 }, 300, Phaser.Easing.Linear.None, false, 0);\r\n\t    tween1.chain(tween2);\r\n\t    tween1.start();\t\t\r\n\t}\r\n<\/pre>\n<p>Click <a href=\"https:\/\/www.netexl.com\/blog\/demo\/6\/index.html\" target=\"_blank\">here<\/a> to run\u00a0the example on your system.<\/p>\n\n<!-- iframe plugin v.5.2 wordpress.org\/plugins\/iframe\/ -->\n<iframe loading=\"lazy\" src=\"https:\/\/www.netexl.com\/blog\/demo\/6\/index.html\" width=\"200px\" height=\"200px\" scrolling=\"yes\" class=\"iframe-class\" frameborder=\"0\"><\/iframe>\n\n","protected":false},"excerpt":{"rendered":"<p>The code example below shows how a simple card flip animation can be achieved in Phaser. In order to flip or rotate a card around x-axis we need to set the scale to zero, change the sprite frame and then set the scale back to one. TheGame.MyGame.prototype = { preload: function () { }, create: function () { this.card = this.add.sprite(this.world.centerX, this.world.centerY, &#8220;card&#8221;) this.card.frame = 0; this.card.anchor.setTo(0.5); \/\/ roll the dice when a mouse button is clicked this.game.input.onDown.add(this.flipCard, this); }, flipCard: function () { var tween1 = this.game.add.tween(this.card.scale); tween1.to({ x: 0 }, 300, Phaser.Easing.Linear.None, false, 0); tween1.onComplete.addOnce(function (sprite, tween) { if(this.card.frame == 0) this.card.frame = 1; else this.card.frame = 0; }, this); var tween2 = this.game.add.tween(this.card.scale); tween2.to({ x: 1 }, 300, Phaser.Easing.Linear.None, false, 0); tween1.chain(tween2); tween1.start(); } }; This example flips the card around x-axis. In order to flip it around y-axis, change as following flipCard: function () { var[&#8230;]<\/p>\n","protected":false},"author":5,"featured_media":85,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,3,4],"tags":[],"class_list":["post-160","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-framework","category-html5","category-phaser"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/posts\/160","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/comments?post=160"}],"version-history":[{"count":4,"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/posts\/160\/revisions"}],"predecessor-version":[{"id":166,"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/posts\/160\/revisions\/166"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/media\/85"}],"wp:attachment":[{"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/media?parent=160"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/categories?post=160"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/tags?post=160"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}