{"id":675,"date":"2017-12-18T19:35:11","date_gmt":"2017-12-18T19:35:11","guid":{"rendered":"http:\/\/www.netexl.com\/blog\/?p=675"},"modified":"2017-12-18T19:35:11","modified_gmt":"2017-12-18T19:35:11","slug":"black-squares-in-place-of-sprite-images-on-mobile-in-a-phaser-game","status":"publish","type":"post","link":"https:\/\/www.netexl.com\/blog\/black-squares-in-place-of-sprite-images-on-mobile-in-a-phaser-game\/","title":{"rendered":"Black Squares in place of sprite images on Mobile in a Phaser Game"},"content":{"rendered":"<p>I am working on a new game which worked fine on desktop but the moment I opened it on Mobile, I was surprised to see black squares in place of sprite images in the game.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-676 size-full\" src=\"https:\/\/www.netexl.com\/blog\/wp-content\/uploads\/2017\/12\/BlackSquare1.png\" alt=\"Black Square Phaser\" width=\"480\" height=\"255\" srcset=\"https:\/\/www.netexl.com\/blog\/wp-content\/uploads\/2017\/12\/BlackSquare1.png 480w, https:\/\/www.netexl.com\/blog\/wp-content\/uploads\/2017\/12\/BlackSquare1-300x159.png 300w, https:\/\/www.netexl.com\/blog\/wp-content\/uploads\/2017\/12\/BlackSquare1-280x149.png 280w\" sizes=\"auto, (max-width: 480px) 100vw, 480px\" \/><\/p>\n<p>After some troubleshooting it turned out that the tile sprite I was using in the game was quite long (around 4000 px) which mobile was not able to handle so\u00a0the fix was to distribute the tile icons to multiple rows (I kept\u00a0the width around 1200 px this time)\u00a0which fixed the issue. Now everything looks just fine on mobile as well.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-677 size-full\" src=\"https:\/\/www.netexl.com\/blog\/wp-content\/uploads\/2017\/12\/BlackSquare2.png.png\" alt=\"Black Square Phaser\" width=\"480\" height=\"255\" srcset=\"https:\/\/www.netexl.com\/blog\/wp-content\/uploads\/2017\/12\/BlackSquare2.png.png 480w, https:\/\/www.netexl.com\/blog\/wp-content\/uploads\/2017\/12\/BlackSquare2.png-300x159.png 300w, https:\/\/www.netexl.com\/blog\/wp-content\/uploads\/2017\/12\/BlackSquare2.png-280x149.png 280w\" sizes=\"auto, (max-width: 480px) 100vw, 480px\" \/><\/p>\n<p>Go Phaser..<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I am working on a new game which worked fine on desktop but the moment I opened it on Mobile, I was surprised to see black squares in place of sprite images in the game. After some troubleshooting it turned out that the tile sprite I was using in the game was quite long (around 4000 px) which mobile was not able to handle so\u00a0the fix was to distribute the tile icons to multiple rows (I kept\u00a0the width around 1200 px this time)\u00a0which fixed the issue. Now everything looks just fine on mobile as well. Go Phaser..<\/p>\n","protected":false},"author":5,"featured_media":293,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,19,4],"tags":[],"class_list":["post-675","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html5","category-mobile","category-phaser"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/posts\/675","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=675"}],"version-history":[{"count":1,"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/posts\/675\/revisions"}],"predecessor-version":[{"id":678,"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/posts\/675\/revisions\/678"}],"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=675"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/categories?post=675"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/tags?post=675"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}