jjwallace Posted May 2, 2017 Share Posted May 2, 2017 I want to create a mobile simulation landing page for desktop. When a user navigates to the page on mobile they get thrown into the game but when on desktop they get thrown into a simulator, here is a demo image. Link to comment Share on other sites More sharing options...
mattstyles Posted May 2, 2017 Share Posted May 2, 2017 I've actually done something a little similar than this before, I wouldn't say it turned out perfect but it was part of a campaign and it certainly made things easier to develop against a (nearly) consistent screen size. I think saying simulator is confusing. Don't you just want to house a canvas (or game element) inside the screen and then show or hide the surrounds based on screen size? I.e. pick a maximum size and display the canvas/element at that size, if the screen is bigger then position inside your surroundings and show that. If you want the panel on the left to reflect something happening in the game then you'll have to have hooks in your game that fire some code that updates that panel (you could ignore these if the screen size is small enough so that your game becomes full screen). I'm guessing as you're posting in Phaser this is an HTML5 app, not a native app you want in a browser window via a simulator (which is impossible). Link to comment Share on other sites More sharing options...
b10b Posted May 3, 2017 Share Posted May 3, 2017 What @mattstyles says. If you want to borrow any code here's a quick and crude version that does similar to what you want: http://b10b.com/mockup?0-http://b10b.com/poppopcandies It's using an IFrame for convenience, which is not ideal for performance on mobile. So I use a server-side useragent check as well - if "mobile" then skip the surround page and go directly to the game. You may not need that if wrapping the Canvas directly? Link to comment Share on other sites More sharing options...
Recommended Posts