\n
![\"\"](\"http:\/\/davikingcode.com\/blog\/wp-content\/uploads\/2017\/01\/PC-Web-Screen.png\")
<\/a><\/p>\n <\/p>\n What kind of technologies would you use if you were asked to build a full-page 2D game, available on the web by PCs and smartphones ?<\/p>\n Here at Da Viking Code we chooses the famous Pixi.js<\/a> ! Unfortunately the JavaScript language isn’t the most comfortable one to use, mistake can be made because of the lack of type and compilation. If you feel comfortable with JavaScript that’s okay, but at Da Viking Code we prefer the strictly-typed and compiled Haxe<\/a> language for our Web projects :). Using Pixi.s with Haxe isn’t hard, we use the well maintained Adireddy’s Haxe extern for Pixi.js<\/a> ! Making a web game accessible on a huge variety of screens seize (from the small iPhone 4S to the big 27″ screen some PC possess) require to be thought from the start.<\/p>\n We choose to build the game as if it was to be displayed on a FullHD screen and at first frame call a onResize()<\/em> function (onResize function is also call on screen resize). This function will call smaller resize function across the project, resulting in an easy to build and easy to resize well-organized solution.<\/p>\n Sometime rescaling elements at runtime is not enough to get something good and light on devices, so we decided that the game will behave a little differently. The first thing is UI scaling, if we are on mobile all UI button are slightly bigger and some UI are just totally different.<\/p>\n An other change, is the use of different level of quality for the game. Depending the starting resolution, we load a different texture pack resulting in faster loading and performances for smaller devices while preserving the best possible quality for high-end devices.<\/p>\n To achieve different texture resolutions than will still appear at the same scale on the game, we need to tell Pixi at witch scale our textures are. In our project we have a full resolution texture pack (@1x) and an half resolution texture pack (@0.5x). Putting our texture in folders named as following will make Pixi.js understand the normal scale of a texture. For example a 1024 x 1024 texture in a @1x folder will have his scale on screen equal 1024 * 1 = 1024. A 512*512 in a @0.5x folder will have his scale on screen equal 512 * 2 = 1024. And finally, a 2048 x 2048 in a @2x folder will have his scale on screen equal to 2048 * 0.5 = 1024. The last difficulty we faced was achieving Fullpage on iOS. Our canvas was inside an element with an absolute<\/strong> position which cause iOS devices to overlap a part of the game with their browser navigation bar on landscape orientation. To conclude, choicing Pixi.js with Haxe was coherent with the ambition of the project: On a side note, we’d some trouble loading a XML file with Pixi.js loader. Here is a reminder:<\/p>\n ADN 250 is a serious game around relationship marketing, like a Tupperware meeting. You must learn about different product by using them, then you can start selling theses products to different people and convince them to do the same extending your sellers network and making loads of money. The principal requirement for the project was … Continue reading Pixi.js, Haxe and browser’s fullpage cross-platform experiences<\/span><\/a><\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_discordance_state":"","_discordance_checked":true},"categories":[4],"tags":[27,42,31,30,28],"_links":{"self":[{"href":"https:\/\/davikingcode.com\/blog\/wp-json\/wp\/v2\/posts\/621"}],"collection":[{"href":"https:\/\/davikingcode.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/davikingcode.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/davikingcode.com\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/davikingcode.com\/blog\/wp-json\/wp\/v2\/comments?post=621"}],"version-history":[{"count":84,"href":"https:\/\/davikingcode.com\/blog\/wp-json\/wp\/v2\/posts\/621\/revisions"}],"predecessor-version":[{"id":752,"href":"https:\/\/davikingcode.com\/blog\/wp-json\/wp\/v2\/posts\/621\/revisions\/752"}],"wp:attachment":[{"href":"https:\/\/davikingcode.com\/blog\/wp-json\/wp\/v2\/media?parent=621"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/davikingcode.com\/blog\/wp-json\/wp\/v2\/categories?post=621"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/davikingcode.com\/blog\/wp-json\/wp\/v2\/tags?post=621"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}<\/a><\/p>\n
\nThis HTML5 javascript library using WebGL enable us to easily build 2D game on canvas.<\/p>\n
\n<\/p>\n<\/a>The game running on a extra-wide PC screen, player just reach a new level.<\/em><\/p>\n
\n<\/a><\/p>\n
\nAt the end, we have 3 different qualities of texture, but the same scale on screen regardless their original width and length.<\/p>\n<\/a>In this panel, the player can recruit people to sell his products.<\/em><\/p>\n
\nAfter many searches on the web and multiple test, the solution was finally to use fixed<\/strong> positioning for the container of our game combined with a scrollTo(0, 0)<\/strong>.<\/p>\n<\/a><\/p>\n
\n– Pixi has all you want to make your responsive web game on PC and mobile devices, resizing with the browser and managing different resolutions for texture packs.
\n– Haxe is a good friend of Pixi.js thanks to awesome externs, offering both a typed, secure environment for your application and the possibility to break out its logic to do some more js-like coding thanks to dynamic type and untyped line.
\nThanks to these technologies the project goes well and we were able to pass all difficulties we came across, comforting us in our technological choice.<\/p>\n\r\nvar xmlTextString:String = new js.html.XMLSerializer().serializeToString(loader.resources.text.data.childNodes[0]);\r\nvar XML = Xml.parse(xmlTextString);\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"