Warning: The magic method EDD_Blocks::__wakeup() must have public visibility in /home/wcc1969/public_html/phasergames.com/wp-content/plugins/edd-blocks-master/edd-blocks.php on line 101

Warning: The magic method EDD_Blocks::__wakeup() must have public visibility in /home/wcc1969/public_html/phasergames.com/wp-content/plugins/edd-blocks/edd-blocks.php on line 101

Warning: The magic method GAINWP_Manager::__wakeup() must have public visibility in /home/wcc1969/public_html/phasergames.com/wp-content/plugins/ga-in/gainwp.php on line 78

Deprecated: Optional parameter $filter declared before required parameter $metric is implicitly treated as a required parameter in /home/wcc1969/public_html/phasergames.com/wp-content/plugins/ga-in/tools/gapi.php on line 555

Deprecated: Optional parameter $filter declared before required parameter $metric is implicitly treated as a required parameter in /home/wcc1969/public_html/phasergames.com/wp-content/plugins/ga-in/tools/gapi.php on line 585

Deprecated: Optional parameter $filter declared before required parameter $metric is implicitly treated as a required parameter in /home/wcc1969/public_html/phasergames.com/wp-content/plugins/ga-in/tools/gapi.php on line 617

Deprecated: Optional parameter $filter declared before required parameter $metric is implicitly treated as a required parameter in /home/wcc1969/public_html/phasergames.com/wp-content/plugins/ga-in/tools/gapi.php on line 651

Deprecated: Optional parameter $filter declared before required parameter $metric is implicitly treated as a required parameter in /home/wcc1969/public_html/phasergames.com/wp-content/plugins/ga-in/tools/gapi.php on line 686

Deprecated: Optional parameter $filter declared before required parameter $metric is implicitly treated as a required parameter in /home/wcc1969/public_html/phasergames.com/wp-content/plugins/ga-in/tools/gapi.php on line 745

Deprecated: Optional parameter $filter declared before required parameter $metric is implicitly treated as a required parameter in /home/wcc1969/public_html/phasergames.com/wp-content/plugins/ga-in/tools/gapi.php on line 785

Warning: Cannot modify header information - headers already sent by (output started at /home/wcc1969/public_html/phasergames.com/wp-content/plugins/edd-blocks-master/edd-blocks.php:101) in /home/wcc1969/public_html/phasergames.com/wp-includes/rest-api/class-wp-rest-server.php on line 1831

Warning: Cannot modify header information - headers already sent by (output started at /home/wcc1969/public_html/phasergames.com/wp-content/plugins/edd-blocks-master/edd-blocks.php:101) in /home/wcc1969/public_html/phasergames.com/wp-includes/rest-api/class-wp-rest-server.php on line 1831

Warning: Cannot modify header information - headers already sent by (output started at /home/wcc1969/public_html/phasergames.com/wp-content/plugins/edd-blocks-master/edd-blocks.php:101) in /home/wcc1969/public_html/phasergames.com/wp-includes/rest-api/class-wp-rest-server.php on line 1831

Warning: Cannot modify header information - headers already sent by (output started at /home/wcc1969/public_html/phasergames.com/wp-content/plugins/edd-blocks-master/edd-blocks.php:101) in /home/wcc1969/public_html/phasergames.com/wp-includes/rest-api/class-wp-rest-server.php on line 1831

Warning: Cannot modify header information - headers already sent by (output started at /home/wcc1969/public_html/phasergames.com/wp-content/plugins/edd-blocks-master/edd-blocks.php:101) in /home/wcc1969/public_html/phasergames.com/wp-includes/rest-api/class-wp-rest-server.php on line 1831

Warning: Cannot modify header information - headers already sent by (output started at /home/wcc1969/public_html/phasergames.com/wp-content/plugins/edd-blocks-master/edd-blocks.php:101) in /home/wcc1969/public_html/phasergames.com/wp-includes/rest-api/class-wp-rest-server.php on line 1831

Warning: Cannot modify header information - headers already sent by (output started at /home/wcc1969/public_html/phasergames.com/wp-content/plugins/edd-blocks-master/edd-blocks.php:101) in /home/wcc1969/public_html/phasergames.com/wp-includes/rest-api/class-wp-rest-server.php on line 1831

Warning: Cannot modify header information - headers already sent by (output started at /home/wcc1969/public_html/phasergames.com/wp-content/plugins/edd-blocks-master/edd-blocks.php:101) in /home/wcc1969/public_html/phasergames.com/wp-includes/rest-api/class-wp-rest-server.php on line 1831
{"id":617,"date":"2017-07-02T01:45:08","date_gmt":"2017-07-02T01:45:08","guid":{"rendered":"https:\/\/phasergames.com\/?p=617"},"modified":"2017-07-02T01:54:40","modified_gmt":"2017-07-02T01:54:40","slug":"creating-wrap-around-effect-phaser","status":"publish","type":"post","link":"https:\/\/phasergames.com\/creating-wrap-around-effect-phaser\/","title":{"rendered":"Creating a Wrap Around Effect in Phaser"},"content":{"rendered":"

The Flintstone Effect<\/h2>\n

This blog post is in response to a query by one of my Udemy students. We were discussing wrap-around effects. Originally we were discussing tilemap wraparounds which he had seen in a game. Though I haven’t quite gotten that one figured out yet, I did mention using two groups to create this effect in games. This is what I also call the Flintstone effect. This comes from the cartoon The Flinstones which I spent a good deal of my childhood watching. The main characters\u00a0\u00a0Fred and Barney would run past the same rock over and over.<\/p>\n

The website TvTropes<\/a> describes it like this<\/p>\n

Animated characters running, driving or in a chase scene will pass the same two bushes, three rocks, and four trees over and over again. It is, or was, a cost-cutting measure \u2014 the eternally-looping background saves a lot of time and effort on the part of the animators, no matter where the characters are going and how they’re supposed to get there. It occasionally results in Special Effect Failure if the cut between the end of the loop and the beginning isn’t as smooth as it should be. In the industry, this is known as a “repeat pan.”<\/p><\/blockquote>\n

I had to make a few adjustments to avoid the special effect failure by adding a pixel here and there.<\/p>\n

I couldn’t explain it in words how to do it so I have made this example.<\/p>\n

Here is the effect:<\/p>\n

click the image to open the example in a new window – Use the arrow keys to move the scene left or right<\/p>\n

\"\"<\/a><\/p>\n

And here is how it is done:<\/p>\n

var StateMain = {\r\n    preload: function() {\r\n        \/\/preload the images\r\n        var imageList = ['ground', \"house1\", \"house2\", \"tree1\", \"bg_jungle\"];\r\n        var len = imageList.length;\r\n        for (var i = 0; i < len; i++) {\r\n            var key = imageList[i];\r\n            var path = \"images\/\" + key + \".png\";\r\n            game.load.image(key, path);\r\n        }\r\n    },\r\n    create: function() {\r\n        this.group1 = this.makeGroup();\r\n        this.group2 = this.makeGroup();\r\n        \/\/place group 2 at the end of group 1 \r\n        this.group2.x = game.width;\r\n    },\r\n    \/**\r\n     * make a group and fill it with objects\r\n     * return the group\r\n     *\/\r\n    makeGroup: function() {\r\n        var g = game.add.group();\r\n        var bg = g.create(0, 0, \"bg_jungle\");\r\n        bg.height = game.height;\r\n        bg.width = game.width;\r\n        var ground = g.create(0, game.height - 48, \"ground\");\r\n        var house1 = g.create(10, game.height - 245, \"house1\");\r\n        var house2 = g.create(house1.x + house1.width, game.height - 245, \"house2\");\r\n        var tree = g.create(30, house1.y, \"tree1\");\r\n        g.width = game.width;\r\n        g.scale.y = g.scale.x;\r\n        return g;\r\n    },\r\n    update: function() {\r\n        if (game.input.keyboard.isDown(Phaser.Keyboard.LEFT)) {\r\n            \/\/move the groups to the left\r\n            this.group1.x--;\r\n            this.group2.x--;\r\n            \/\/if the group is all the way off the stage to the left\r\n            \/\/which is the x position plus the width of the group\r\n            \/\/then place it off stage at the right hand side\r\n            \/\/\r\n            if (this.group1.x + this.group1.width < 1) {\r\n                this.group1.x = game.width;\r\n            }\r\n            if (this.group2.x + this.group2.width < 1) {\r\n                this.group2.x = game.width;\r\n            }\r\n        } else if (game.input.keyboard.isDown(Phaser.Keyboard.RIGHT)) {\r\n            this.group1.x++;\r\n            this.group2.x++;\r\n            \/\/if the group is all the way off the stage to the right\r\n            \/\/then place it off stage at the left hand side\r\n            if (this.group1.x > game.width) {\r\n                this.group1.x = -this.group1.width + 1;\r\n            }\r\n            if (this.group2.x > game.width) {\r\n                this.group2.x = -this.group2.width + 1;\r\n            }\r\n        }\r\n    }\r\n}<\/pre>\n\t
\n\n\t\t\n\t\t
\n\t\t\t