{"id":736,"date":"2017-12-26T06:38:26","date_gmt":"2017-12-26T06:38:26","guid":{"rendered":"http:\/\/www.netexl.com\/blog\/?p=736"},"modified":"2018-01-04T22:15:52","modified_gmt":"2018-01-04T22:15:52","slug":"compile-phaser-game-to-windows-10-store-app","status":"publish","type":"post","link":"https:\/\/www.netexl.com\/blog\/compile-phaser-game-to-windows-10-store-app\/","title":{"rendered":"Compile Phaser Game to WIndows 10 Store App"},"content":{"rendered":"<p>In previous articles we started building an Android mobile app using Phaser.\u00a0Check out the articles &#8211;\u00a0<a href=\"https:\/\/www.netexl.com\/blog\/making-of-a-responsive-mobile-game-app-using-phaser-introduction\/\" target=\"_blank\">Introduction<\/a>, <a href=\"https:\/\/www.netexl.com\/blog\/making-of-a-responsive-mobile-game-app-using-phaser-calculation-for-game-size\/\" target=\"_blank\">Calculation<\/a>, <a href=\"https:\/\/www.netexl.com\/blog\/making-of-a-responsive-mobile-game-app-using-phaser-game-screen\/\" target=\"_blank\">Game Screen<\/a>, <a href=\"https:\/\/www.netexl.com\/blog\/making-of-a-responsive-mobile-game-app-using-phaser-fps-problem\/\" target=\"_blank\">FPS Problem<\/a><\/p>\n<p>Now since windows\u00a0has native support for javascript and HTML5, it makes sense to distribute our Phaser games to windows app store to reach new audience. The steps required to compile Phaser game to Windows 10 App is pretty straight forward with no need\u00a0 for any change in the code.<\/p>\n<p>You would need windows 10 to develop and debug the application. If you do not have windows 10 yet, go and download evaluation version of windows and install it in a VM. Microsoft is also providing evaluation version of readymade VMs supporting various technologies such as VMWare, HyperV, Parallels etc which comes pre-loaded with development tools such as Visual Studio 2017 Community edition which you can try for evaluation.<\/p>\n<p><a href=\"https:\/\/developer.microsoft.com\/en-us\/windows\/downloads\/virtual-machines\" target=\"_blank\">https:\/\/developer.microsoft.com\/en-us\/windows\/downloads\/virtual-machines<\/a><\/p>\n<p>If you already have windows 10 then download and install Visual Studio 2017 and get rolling. All editions work for creation of windows store app. We are going to create a Windows Universal Javascript App for our Phaser game. The steps are as following:<\/p>\n<p>Open Visual Studio<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-737\" src=\"https:\/\/www.netexl.com\/blog\/wp-content\/uploads\/2017\/12\/Win10App_1.png\" alt=\"\" width=\"800\" height=\"368\" srcset=\"https:\/\/www.netexl.com\/blog\/wp-content\/uploads\/2017\/12\/Win10App_1.png 800w, https:\/\/www.netexl.com\/blog\/wp-content\/uploads\/2017\/12\/Win10App_1-300x138.png 300w, https:\/\/www.netexl.com\/blog\/wp-content\/uploads\/2017\/12\/Win10App_1-768x353.png 768w, https:\/\/www.netexl.com\/blog\/wp-content\/uploads\/2017\/12\/Win10App_1-280x129.png 280w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/p>\n<p>Go to New -&gt; Project<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-738\" src=\"https:\/\/www.netexl.com\/blog\/wp-content\/uploads\/2017\/12\/Win10App_2.png\" alt=\"\" width=\"800\" height=\"369\" srcset=\"https:\/\/www.netexl.com\/blog\/wp-content\/uploads\/2017\/12\/Win10App_2.png 800w, https:\/\/www.netexl.com\/blog\/wp-content\/uploads\/2017\/12\/Win10App_2-300x138.png 300w, https:\/\/www.netexl.com\/blog\/wp-content\/uploads\/2017\/12\/Win10App_2-768x354.png 768w, https:\/\/www.netexl.com\/blog\/wp-content\/uploads\/2017\/12\/Win10App_2-280x129.png 280w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/p>\n<p>Select Windows Universal under Javascript which will show you all available templates. Select Blank App. Type Name and Location for the project and click ok.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-739\" src=\"https:\/\/www.netexl.com\/blog\/wp-content\/uploads\/2017\/12\/Win10App_3.png\" alt=\"\" width=\"800\" height=\"370\" srcset=\"https:\/\/www.netexl.com\/blog\/wp-content\/uploads\/2017\/12\/Win10App_3.png 800w, https:\/\/www.netexl.com\/blog\/wp-content\/uploads\/2017\/12\/Win10App_3-300x139.png 300w, https:\/\/www.netexl.com\/blog\/wp-content\/uploads\/2017\/12\/Win10App_3-768x355.png 768w, https:\/\/www.netexl.com\/blog\/wp-content\/uploads\/2017\/12\/Win10App_3-280x130.png 280w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/p>\n<p>On next step it will ask for target and minimum platform version for your app. Keep it to default value and click ok.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-740\" src=\"https:\/\/www.netexl.com\/blog\/wp-content\/uploads\/2017\/12\/Win10App_4.png\" alt=\"\" width=\"800\" height=\"371\" srcset=\"https:\/\/www.netexl.com\/blog\/wp-content\/uploads\/2017\/12\/Win10App_4.png 800w, https:\/\/www.netexl.com\/blog\/wp-content\/uploads\/2017\/12\/Win10App_4-300x139.png 300w, https:\/\/www.netexl.com\/blog\/wp-content\/uploads\/2017\/12\/Win10App_4-768x356.png 768w, https:\/\/www.netexl.com\/blog\/wp-content\/uploads\/2017\/12\/Win10App_4-280x130.png 280w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/p>\n<p>On next step you will see a blank project created with default folders and files.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-741\" src=\"https:\/\/www.netexl.com\/blog\/wp-content\/uploads\/2017\/12\/Win10App_5.png\" alt=\"\" width=\"800\" height=\"370\" srcset=\"https:\/\/www.netexl.com\/blog\/wp-content\/uploads\/2017\/12\/Win10App_5.png 800w, https:\/\/www.netexl.com\/blog\/wp-content\/uploads\/2017\/12\/Win10App_5-300x139.png 300w, https:\/\/www.netexl.com\/blog\/wp-content\/uploads\/2017\/12\/Win10App_5-768x355.png 768w, https:\/\/www.netexl.com\/blog\/wp-content\/uploads\/2017\/12\/Win10App_5-280x130.png 280w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/p>\n<p>Import your game assets into the project by right clicking the Solution Explorer on right hand side and choose all files you want to import. You can copy your html code as it is in the index.html file in Visual Studio solution. Hit F5 and see the magic. We have our Phaser game up and running as windows 10 app which can be published to windows store for distribution. We will look at publishing requirements in the next article.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-742\" src=\"https:\/\/www.netexl.com\/blog\/wp-content\/uploads\/2017\/12\/Win10App_6.png\" alt=\"\" width=\"800\" height=\"391\" srcset=\"https:\/\/www.netexl.com\/blog\/wp-content\/uploads\/2017\/12\/Win10App_6.png 800w, https:\/\/www.netexl.com\/blog\/wp-content\/uploads\/2017\/12\/Win10App_6-300x147.png 300w, https:\/\/www.netexl.com\/blog\/wp-content\/uploads\/2017\/12\/Win10App_6-768x375.png 768w, https:\/\/www.netexl.com\/blog\/wp-content\/uploads\/2017\/12\/Win10App_6-280x137.png 280w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-743\" src=\"https:\/\/www.netexl.com\/blog\/wp-content\/uploads\/2017\/12\/Win10App_7.png\" alt=\"\" width=\"800\" height=\"370\" srcset=\"https:\/\/www.netexl.com\/blog\/wp-content\/uploads\/2017\/12\/Win10App_7.png 800w, https:\/\/www.netexl.com\/blog\/wp-content\/uploads\/2017\/12\/Win10App_7-300x139.png 300w, https:\/\/www.netexl.com\/blog\/wp-content\/uploads\/2017\/12\/Win10App_7-768x355.png 768w, https:\/\/www.netexl.com\/blog\/wp-content\/uploads\/2017\/12\/Win10App_7-280x130.png 280w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/p>\n<p>Till then happy coding&#8230;<\/p>\n<p>Links:<\/p>\n<p><a href=\"http:\/\/www.netexl.com\/games\/traindominoes\/\" target=\"_blank\">Train Dominoes Online<\/a><\/p>\n<p><a href=\"https:\/\/play.google.com\/store\/apps\/details?id=com.algotgames.traindominoes\" target=\"_blank\">Train Dominoes on Android Store<\/a><\/p>\n<p><a href=\"https:\/\/www.microsoft.com\/store\/apps\/9PMCL12HWCS3\" target=\"_blank\">Train Dominoes on Windows\u00a0Apps Store<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In previous articles we started building an Android mobile app using Phaser.\u00a0Check out the articles &#8211;\u00a0Introduction, Calculation, Game Screen, FPS Problem Now since windows\u00a0has native support for javascript and HTML5, it makes sense to distribute our Phaser games to windows app store to reach new audience. The steps required to compile Phaser game to Windows 10 App is pretty straight forward with no need\u00a0 for any change in the code. You would need windows 10 to develop and debug the application. If you do not have windows 10 yet, go and download evaluation version of windows and install it in a VM. Microsoft is also providing evaluation version of readymade VMs supporting various technologies such as VMWare, HyperV, Parallels etc which comes pre-loaded with development tools such as Visual Studio 2017 Community edition which you can try for evaluation. https:\/\/developer.microsoft.com\/en-us\/windows\/downloads\/virtual-machines If you already have windows 10 then download and install[&#8230;]<\/p>\n","protected":false},"author":5,"featured_media":746,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,4,21],"tags":[],"class_list":["post-736","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html5","category-phaser","category-windows-store-app"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/posts\/736","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=736"}],"version-history":[{"count":4,"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/posts\/736\/revisions"}],"predecessor-version":[{"id":798,"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/posts\/736\/revisions\/798"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/media\/746"}],"wp:attachment":[{"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/media?parent=736"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/categories?post=736"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/tags?post=736"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}