Full Screen Mobile Template

[cheapdevotion]

Hey all,

I have been lurking the forums for a while now, and have finally decided to throw a game together in Phaser. The prototype is pretty much complete, so I spent quite a few hours yesterday on the forum looking for the correct way to scale the game for desktop and fullscreen mobile. Eventually I came across the Full Screen Mobile Template on GitHub, and adapted the Boot scene to be the first scene my game loads. 

 

Here is the code:

class Boot      # Here we've just got some global level vars that persist regardless of State swaps     score: 0    # If the music in your game needs to play through-out a few State swaps, then you could reference it here     music: null    # Your game can check BasicGame.orientated in internal loops to know if it should pause or not     orientated: false    constructor: (game) ->    preload: ->    create: ->        @input.maxPointers = 1        @stage.disableVisibilityChange = true        if @game.device.desktop          @scale.scaleMode = Phaser.ScaleManager.SHOW_ALL          @scale.minWidth = 480          @scale.minHeight = 260          @scale.maxWidth = 1024          @scale.maxHeight = 768          @scale.pageAlignHorizontally = true          @scale.pageAlignVertically = true          @scale.setScreenSize true          @scale.setShowAll()        else          @scale.scaleMode = Phaser.ScaleManager.SHOW_ALL          @scale.minWidth = 480          @scale.minHeight = 260          @scale.maxWidth = 1024          @scale.maxHeight = 768          @scale.pageAlignHorizontally = true          @scale.pageAlignVertically = true          @scale.forceOrientation true, false          @scale.hasResized.add @gameResized, this          @scale.enterIncorrectOrientation.add @enterIncorrectOrientation, this          @scale.leaveIncorrectOrientation.add @leaveIncorrectOrientation, this          @scale.setScreenSize true          @scale.setShowAll()        @state.start "game"    gameResized: (width, height) ->    #  This could be handy if you need to do any extra processing if the game resizes.    #  A resize could happen if for example swapping orientation on a device.    enterIncorrectOrientation: ->        console.log 'incorrect orientation'        orientated = false        document.getElementById("orientation").style.display = "block"    leaveIncorrectOrientation: ->        orientated = true        document.getElementById("orientation").style.display = "none"module.exports = Boot

The issue on mobile is that the scene is not resized, and you can only see about a quarter of the scene anchored to the top left. Also, the orientation events are not being fired. I used Safari's remote debugger to watch the console, but I am not seeing any errors - the scene is just not scaling. Any ideas?