{"id":632,"date":"2017-11-20T21:03:54","date_gmt":"2017-11-20T21:03:54","guid":{"rendered":"http:\/\/www.netexl.com\/blog\/?p=632"},"modified":"2017-11-20T21:07:23","modified_gmt":"2017-11-20T21:07:23","slug":"repeating-or-tiled-background-in-phaser","status":"publish","type":"post","link":"https:\/\/www.netexl.com\/blog\/repeating-or-tiled-background-in-phaser\/","title":{"rendered":"Repeating or Tiled Background in Phaser"},"content":{"rendered":"<p>Creating tiled or repeating background is pretty straight forward in Phaser by using tileSprite.<\/p>\n<p>Let say we have an image or a texture such as\u00a0<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-635\" src=\"https:\/\/www.netexl.com\/blog\/wp-content\/uploads\/2017\/11\/repeatxy.png\" alt=\"\" width=\"34\" height=\"34\" \/>\u00a0which we want to use to create a background by repeating\u00a0it in entire game area. Check out the highlighted line in the example below which is all that is required to create a nice tiled background in Phaser.<\/p>\n<pre class=\"lang:default mark:50 decode:true\">var TheGame = {\r\n};\r\n\r\nTheGame.Params = {\r\n\tbaseWidth: 200,\r\n\tbaseHeight: 200\r\n};\r\n\r\nTheGame.Boot = function (game) { };\r\n\r\nTheGame.Boot.prototype =  {\r\n    init: function () {\r\n        this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;\r\n\t\tthis.game.scale.pageAlignHorizontally = true;\r\n        this.game.scale.pageAlignVertically = true;\r\n    },\r\n    preload: function () {\r\n        this.load.image(\"background\", \"repeatxy.png\");\r\n        this.load.image(\"loading\", \"loadingback.png\");\r\n    },\r\n    create: function () {\r\n        this.state.start(\"Loading\");\r\n    }\t\r\n};\r\n\r\nTheGame.Loading = function (game) {\r\n};\r\n\r\nTheGame.Loading.prototype = {\r\n    init: function () {\r\n    },\r\n    preload: function () {\r\n        var loadingBar = this.add.sprite(this.world.centerX, this.world.centerY, \"loading\");\r\n        loadingBar.anchor.setTo(0.5);\r\n        this.load.setPreloadSprite(loadingBar);\r\n    },\r\n    create: function () {\r\n       this.state.start(\"TheGame\");\r\n    }\r\n};\r\n\r\n\r\nTheGame.MyGame = function (game) {\r\n};\r\n\r\nTheGame.MyGame.prototype = {\r\n    preload: function () {\r\n    },\r\n    create: function () {\r\n        var background = mygame.add.tileSprite(0, 0, this.game.width, this.game.height, \"background\");\r\n    },\r\n};\r\n\r\nvar mygame;\r\nwindow.onload = function () {\r\n\tmygame = new Phaser.Game(TheGame.Params.baseWidth, TheGame.Params.baseHeight, Phaser.AUTO, \"mygame\");\t\r\n\tmygame.state.add(\"Boot\", TheGame.Boot);\r\n\tmygame.state.add(\"Loading\", TheGame.Loading);\r\n\tmygame.state.add(\"TheGame\", TheGame.MyGame);\r\n\tmygame.state.start(\"Boot\");\r\n}\r\n<\/pre>\n<p>The example below demonstrates the code.<\/p>\n\n<!-- iframe plugin v.5.2 wordpress.org\/plugins\/iframe\/ -->\n<iframe loading=\"lazy\" src=\"https:\/\/www.netexl.com\/blog\/demo\/9\/index.html\" width=\"200px\" height=\"200px\" scrolling=\"yes\" class=\"iframe-class\" frameborder=\"0\"><\/iframe>\n\n","protected":false},"excerpt":{"rendered":"<p>Creating tiled or repeating background is pretty straight forward in Phaser by using tileSprite. Let say we have an image or a texture such as\u00a0\u00a0which we want to use to create a background by repeating\u00a0it in entire game area. Check out the highlighted line in the example below which is all that is required to create a nice tiled background in Phaser. var TheGame = { }; TheGame.Params = { baseWidth: 200, baseHeight: 200 }; TheGame.Boot = function (game) { }; TheGame.Boot.prototype = { init: function () { this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; this.game.scale.pageAlignHorizontally = true; this.game.scale.pageAlignVertically = true; }, preload: function () { this.load.image(&#8220;background&#8221;, &#8220;repeatxy.png&#8221;); this.load.image(&#8220;loading&#8221;, &#8220;loadingback.png&#8221;); }, create: function () { this.state.start(&#8220;Loading&#8221;); } }; TheGame.Loading = function (game) { }; TheGame.Loading.prototype = { init: function () { }, preload: function () { var loadingBar = this.add.sprite(this.world.centerX, this.world.centerY, &#8220;loading&#8221;); loadingBar.anchor.setTo(0.5); this.load.setPreloadSprite(loadingBar); }, create: function () { this.state.start(&#8220;TheGame&#8221;); } }; TheGame.MyGame =[&#8230;]<\/p>\n","protected":false},"author":5,"featured_media":293,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[14,4],"tags":[],"class_list":["post-632","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-how-to","category-phaser"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/posts\/632","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=632"}],"version-history":[{"count":5,"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/posts\/632\/revisions"}],"predecessor-version":[{"id":645,"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/posts\/632\/revisions\/645"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/media\/293"}],"wp:attachment":[{"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/media?parent=632"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/categories?post=632"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/tags?post=632"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}