mikeelindsay Posted November 11, 2016 Share Posted November 11, 2016 I'm looking for a way to scale a game down from desktop to mobile and as it scales down I'd like it to show less of the game similar to how some of the mobile cross platform rpgs are. I'm probably just over thinking it or not using the correct search terms but could someone point me in the correct direction? I've included screenshots from a game that appears to do something similar to what I want to achieve. Mobile the first, tablet is the second, desktop is the third Link to comment Share on other sites More sharing options...
mikeelindsay Posted November 11, 2016 Author Share Posted November 11, 2016 bumpity bump Link to comment Share on other sites More sharing options...
samme Posted November 12, 2016 Share Posted November 12, 2016 Maybe https://github.com/photonstorm/phaser/tree/master/resources/Project Templates/Responsive Link to comment Share on other sites More sharing options...
mikeelindsay Posted November 12, 2016 Author Share Posted November 12, 2016 I'm looking for the game world to get less visible as it gets smaller. Link to comment Share on other sites More sharing options...
samme Posted November 12, 2016 Share Posted November 12, 2016 http://codepen.io/anon/pen/bBpWMv?editors=0010 Link to comment Share on other sites More sharing options...
samme Posted November 12, 2016 Share Posted November 12, 2016 Also if you don't care about viewport resizing I guess you could just use new Phaser.Game({ height : window.innerHeight , resolution : window.devicePixelRatio || 1 , width : window.innerWidth , }); Link to comment Share on other sites More sharing options...
mikeelindsay Posted November 13, 2016 Author Share Posted November 13, 2016 Hmm... I've tried resizing but it doesn't give me the desired effect on mobile. It just resizes the entire game to fit. The strange thing is no matter what I try, everything is more visible on mobile and i'm trying to acheive the opposite of that Link to comment Share on other sites More sharing options...
mikeelindsay Posted November 14, 2016 Author Share Posted November 14, 2016 Bump for further suggestions : ) Link to comment Share on other sites More sharing options...
samme Posted November 14, 2016 Share Posted November 14, 2016 http://s.codepen.io/samme/debug/NbNJxO Link to comment Share on other sites More sharing options...
samme Posted November 14, 2016 Share Posted November 14, 2016 You need <meta name="viewport" content="width=device-width, initial-scale=1"> scaleMode NO_SCALE, RESIZE, or USER_SCALE to position objects relative to the camera or game dimensions mikeelindsay 1 Link to comment Share on other sites More sharing options...
mikeelindsay Posted November 14, 2016 Author Share Posted November 14, 2016 That did it, thank you : ) Link to comment Share on other sites More sharing options...
Recommended Posts