Daniel Belohlavek Posted May 24, 2014 Share Posted May 24, 2014 I've been trying without success to get a simple prototype (just a background) to scale on my mobile with Phaser using Typescript after reading this post http://www.html5gamedevs.com/topic/5949-solution-scaling-for-multiple-devicesresolution-and-screens/ I've asked both on the post and on IRC but I'm starting to feel that approaching this issue in TS is different from doing so in vanilla JS. So my question is: How can I:Detect 5 different screen sizes (small, normal, large, xlarge, xxlargge) and load assets accordingly.Scale my game in a way that works for PC (without it going 100% and looking blurry), Tablets and Mobile phones.Scale both horizontally (landscape) and vertically (portrait).Hide the address bar in as many devices as possible....in Typescript? I'm sorry if these are too many questions to ask at once but I feel that it would also be helpful to other newbies starting out with Typescript. While Typescript is very useful in the long term (and helps me to keep my code very tidy), learning the basics and trying to get tutorials or code snippets is a lot harder than with JS. The two tutorials posted on Photonstorm allowed me to create a couple of desktop-only prototypes, but they do not cover how to do it on Mobile. The structure I'm using for my TS projects contains the following core files:app.tsGame.tsBoot.tsPreloader.tsMenu.tsBaseLevel.tsThank you for reading! Link to comment Share on other sites More sharing options...
lokhmakov Posted May 25, 2014 Share Posted May 25, 2014 I've been trying without success to get a simple prototype (just a background) to scale on my mobile with Phaser using Typescript after reading this post http://www.html5gamedevs.com/topic/5949-solution-scaling-for-multiple-devicesresolution-and-screens/ I've asked both on the post and on IRC but I'm starting to feel that approaching this issue in TS is different from doing so in vanilla JS. So my question is: How can I:Detect 5 different screen sizes (small, normal, large, xlarge, xxlargge) and load assets accordingly.Scale my game in a way that works for PC (without it going 100% and looking blurry), Tablets and Mobile phones.Scale both horizontally (landscape) and vertically (portrait).Hide the address bar in as many devices as possible....in Typescript? I'm sorry if these are too many questions to ask at once but I feel that it would also be helpful to other newbies starting out with Typescript. While Typescript is very useful in the long term (and helps me to keep my code very tidy), learning the basics and trying to get tutorials or code snippets is a lot harder than with JS. The two tutorials posted on Photonstorm allowed me to create a couple of desktop-only prototypes, but they do not cover how to do it on Mobile. The structure I'm using for my TS projects contains the following core files:app.tsGame.tsBoot.tsPreloader.tsMenu.tsBaseLevel.tsThank you for reading! It's may be good start point for you. app.tsgame.tsboot.tspreloader.ts I see no reason to post menu and levels. Daniel Belohlavek 1 Link to comment Share on other sites More sharing options...
Daniel Belohlavek Posted May 25, 2014 Author Share Posted May 25, 2014 Thank you lokhmakov, I'll give it a try ASAP and mark as solved if I can get it to work Link to comment Share on other sites More sharing options...
Daniel Belohlavek Posted May 25, 2014 Author Share Posted May 25, 2014 It's may be good start point for you. app.tsgame.tsboot.tspreloader.ts I see no reason to post menu and levels. I keep getting The property 'NO_BORDER' does not exist on value of type 'Phaser.ScaleManager'. How did you solve that? Link to comment Share on other sites More sharing options...
Daniel Belohlavek Posted May 27, 2014 Author Share Posted May 27, 2014 bump Link to comment Share on other sites More sharing options...
lokhmakov Posted May 27, 2014 Share Posted May 27, 2014 bower_components\phaser-official\build\phaser.d.ts...class ScaleManager { constructor(game: Phaser.Game, width: number, height: number); static EXACT_FIT: number; static NO_SCALE: number; static SHOW_ALL: number; static NO_BORDER: number;...And index.html:<!doctype html><html><head> <meta charset="utf-8"> <title>slash-system</title> <!-- build:css main.min.css --> <link rel="stylesheet" href="css/main.css"> <!-- /build --> <script src="bower_components/jquery/dist/jquery.js"></script></head><body> <div id="game"></div> <div id="orientation"></div> <!-- build:js main.min.js --> <script src="bower_components/phaser-official/build/phaser.js"></script> <script src="js/ScaleManager2.js"></script> <script src="js/atom.js"></script> <script src="js/natom.js"></script> <script src="js/boot.js"></script> <script src="js/preloader.js"></script> <script src="js/sector.js"></script> <script src="js/game.js"></script> <script src="js/app.js"></script> <!-- /build --></body></html> Link to comment Share on other sites More sharing options...
Daniel Belohlavek Posted May 27, 2014 Author Share Posted May 27, 2014 I hate to be such a pain in the ass: While the error was solved, the code seems to be focused to work on landscape rather than portrait mode. What modifications should I apply to solve this? If you could briefly explain to me the logic behind the system that would be great! Which variable(s) control whether the game is in landscape or in portrait? Thanks for the help, it is REALLY appreciated Link to comment Share on other sites More sharing options...
lokhmakov Posted May 28, 2014 Share Posted May 28, 2014 this.scale.forceOrientation(false, false); Link to comment Share on other sites More sharing options...
Recommended Posts