{"id":190,"date":"2017-04-26T16:23:38","date_gmt":"2017-04-26T16:23:38","guid":{"rendered":"http:\/\/www.netexl.com\/blog\/?p=190"},"modified":"2017-11-11T19:04:46","modified_gmt":"2017-11-11T19:04:46","slug":"optimizeminify-html5-game-assets","status":"publish","type":"post","link":"https:\/\/www.netexl.com\/blog\/optimizeminify-html5-game-assets\/","title":{"rendered":"Optimize\/Minify HTML5 Game Assets"},"content":{"rendered":"<p>After I wrote <a href=\"http:\/\/www.netexl.com\/games\/blockdominoes\/\" target=\"_blank\">Block Dominoes<\/a> game I decided to look into optimization of the assets, compress whatever could be done and make the game as lightweight as it could be.<\/p>\n<p>I had designed and made the assets at a resolution of\u00a01920&#215;1080. The first logical step was\u00a0to go search what other developers were doing and surprisingly 1920&#215;1080 seemed quite a big resolution to choose for a game.<\/p>\n<p>There was an older discussion on \u00a0<a href=\"http:\/\/www.html5gamedevs.com\/topic\/1112-what-is-the-best-resolution-for-a-html5-game\/\" target=\"_blank\">HTML5GameDevs.com<\/a> which suggested using\u00a0a lower resolution such as 320&#215;480\u00a0which many devs have been using successfully. \u00a0I decided to go for half of what I initially designed so I reduced all game assets to half of the original\u00a0size which was\u00a0960&#215;540. The size of all graphical assets were reduced by 40% which was a very good saving. Interestingly there was no visible difference on look and feel of the game when I tested it on iPhone6, Nexus 5 and Lenovo Tablet in addition to the\u00a0desktop. This is the\u00a0most important step in a game development. Choose the most appropriate\u00a0resolution for a particular\u00a0game. Going for higher resolution does not make any noticeable difference to look and feel of the game on mobile devices so\u00a0if the game is primarily being targeted for mobile, we may just get away with going for a lower resolution. Sometimes a certain texture would look exactly same on most resolutions so its something to ponder over when\u00a0the game is still at design phase.<\/p>\n<div style=\"height:250px;\"><script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script>\r\n<ins class=\"adsbygoogle\"\r\n     style=\"display:inline-block;width:300px;height:250px\"\r\n     data-ad-client=\"ca-pub-0810934084049672\"\r\n     data-ad-slot=\"8927903874\"><\/ins>\r\n<script>\r\n(adsbygoogle = window.adsbygoogle || []).push({});\r\n<\/script><\/div>\n<p>Another hint while\u00a0deciding on game size is to look at viewport meta tag in your game HTML. If you are not using this meta tag then on mobile you will get the actual pixel size and in that scenario devicePixelRatio has no impact on how the game looks on mobile. If viewport meta tag width is set to <span style=\"text-decoration: underline;\"><em>device-width<\/em><\/span>, then you get CSS size in your responsive game which means you are scaling down all assets to a much smaller size. In that scenario it makes sense to design game for smaller\u00a0resolutions such as 320&#215;480 or may be slightly higher resolutions for latest devices. Another option is to load different assets for\u00a0desktop and mobile. There is no need to necessarily differentiate between desktop or mobile, it actually comes down to what width and height do you see in your responsive game and can accordingly load different set of assets (in my case assets optimized for lower size such as 480&#215;320).<\/p>\n<p>Once we have fixed the resolution, next\u00a0few important things to optimize would be<\/p>\n<ol>\n<li>Compress images &#8211; This saves a lot of space and again with very little visible difference. I use\u00a0<a href=\"http:\/\/tinypng.com\" target=\"_blank\">tinypng.com<\/a>\u00a0but there are many good compressors available online.<\/li>\n<li>Compress audio files &#8211; A lot of times we just ignore optimizing audio files, or probably are not even aware that such a thing can be done. I would advise to go through this <a href=\"https:\/\/gamedevelopment.tutsplus.com\/tutorials\/4-simple-techniques-for-optimizing-your-games-audio--cms-23658\" target=\"_blank\">tutorial<\/a>. This explains a lot of things game devs should know about optimizing audio assets.<\/li>\n<li>Compress JS files &#8211; A lot of times we just obfuscate the code and forget to minify. A lot of obfuscators would also minify the code. I was able to reduce size of my game code by almost 30% by compressing the obfuscated code on\u00a0<a href=\"https:\/\/jscompress.com\" target=\"_blank\">https:\/\/jscompress.com<\/a>\u00a0so we need to remember obfuscation and compression are two different things and its always a good idea to compress an already obfuscated code which might just save some more bytes.<\/li>\n<\/ol>\n<p>Now I am going to throw some numbers on what exactly did I achieve by doing all this.<\/p>\n<p>Original size of all images\u00a0I used for 1920&#215;1080 version of the game was 739 KB. After I compressed the images on tinypng.com, it came down to 289 KB. Quite a lot of saving without much visible difference. After I reduced the resolution to\u00a0960&#215;540 and reduced the size of the images, the final size of all images came down to 125 KB so quite a lot of bandwidth saved here.<\/p>\n<p>Audio assets were compressed from initial size of 190 KB to 100KB.<\/p>\n<p>JScompress brought down size of the code from 118KB to 83KB.<\/p>\n<p>Final game size was 1.06 MB for\u00a0960&#215;540 resolution and it seems like phase.min.js is taking almost 70% of everything else I have. Off course there is an option to go for modular build in Phaser where I could remove a few modules which are not used in the game\u00a0but that will come later when I have a thorough understanding of all modules in Phaser. \u00a0Until then I am happy with the space saved which is almost 50%.<\/p>\n<p>I shall\u00a0update this blog further if I ended up using custom built Phaser lib\u00a0after removing certain modules (I am thinking may be one of the physics engines not used in the game).<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>After I wrote Block Dominoes game I decided to look into optimization of the assets, compress whatever could be done and make the game as lightweight as it could be. I had designed and made the assets at a resolution of\u00a01920&#215;1080. The first logical step was\u00a0to go search what other developers were doing and surprisingly 1920&#215;1080 seemed quite a big resolution to choose for a game. There was an older discussion on \u00a0HTML5GameDevs.com which suggested using\u00a0a lower resolution such as 320&#215;480\u00a0which many devs have been using successfully. \u00a0I decided to go for half of what I initially designed so I reduced all game assets to half of the original\u00a0size which was\u00a0960&#215;540. The size of all graphical assets were reduced by 40% which was a very good saving. Interestingly there was no visible difference on look and feel of the game when I tested it on iPhone6, Nexus 5 and Lenovo[&#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-190","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\/190","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=190"}],"version-history":[{"count":5,"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/posts\/190\/revisions"}],"predecessor-version":[{"id":612,"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/posts\/190\/revisions\/612"}],"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=190"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/categories?post=190"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/tags?post=190"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}