Can't make full screen phaser + webpack + cordova in android

[StevePi]

I using Phaser-ce 2.7.3 and Cordova 6.4.0
My code

import 'pixi'
import 'p2'
import Phaser from 'phaser'

import BootState from './states/Boot'
import MenuState from './states/Menu'
import GameState from './states/Game'
import WinState from './states/Win'

class Game extends Phaser.Game {

  constructor () {
    const width = window.innerWidth
    const height = window.innerHeight
    super(width, height, Phaser.CANVAS, 'content', null)
    this.state.add('Boot', BootState, false)
    this.state.add('Menu', MenuState, false)
    this.state.add('Game', GameState, false)
    this.state.add('Win', WinState, false)

    this.state.start('Boot')
  }

}

window.game = new Game()

Cordova config.xml

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.example.kids" version="1.0.0" 
xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>Kids</name>
    <author email="[email protected]" href="http://cordova.io">
        Apache Cordova Team
    </author>
    <content src="index.html" />
    <preference name="Fullscreen" value="true" />
    <platform name="ios">
        <allow-intent href="itms:*" />
        <allow-intent href="itms-apps:*" />
    </platform>
</widget>

Webpack config

var path = require('path')
var webpack = require('webpack')

// Phaser webpack config
var phaserModule = path.join(__dirname, '/node_modules/phaser-ce/')
var phaser = path.join(phaserModule, 'build/custom/phaser-split.js')
var pixi = path.join(phaserModule, 'build/custom/pixi.js')
var p2 = path.join(phaserModule, 'build/custom/p2.js')

var definePlugin = new webpack.DefinePlugin({
  __DEV__: JSON.stringify(JSON.parse(process.env.BUILD_DEV || 'false'))
})

module.exports = {
  entry: {
    app: [
      'babel-polyfill',
      path.resolve(__dirname, 'src/main.js')
    ],
    vendor: ['pixi', 'p2', 'phaser', 'webfontloader']

  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    publicPath: './dist/',
    filename: 'bundle.js'
  },
  plugins: [
    definePlugin,
    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
    new webpack.optimize.UglifyJsPlugin({
      drop_console: true,
      minimize: true,
      output: {
        comments: false
      }
    }),
    new webpack.optimize.CommonsChunkPlugin({ name: 'vendor'/* chunkName= */, filename: 'vendor.bundle.js'/* filename= */}),
  ],
  module: {
    rules: [
      { test: /\.js$/, use: ['babel-loader'], include: path.join(__dirname, 'src') },
      { test: /pixi\.js/, use: ['expose-loader?PIXI'] },
      { test: /phaser-split\.js$/, use: ['expose-loader?Phaser'] },
      { test: /p2\.js/, use: ['expose-loader?p2'] }
    ]
  },
  node: {
    fs: 'empty',
    net: 'empty',
    tls: 'empty'
  },
  resolve: {
    alias: {
      'phaser': phaser,
      'pixi': pixi,
      'p2': p2
    }
  }
}

And instade of full size screen get black line in buttom

 

 

[mattstyles]

Looks suspiciously like the size of a status bar of some sort.

Could there be any cordova plugin that is changing the size of the window? Or possibly one that sets it correctly but you have to wait for it to initialise?

I'm clutching at straws here but maybe it'll help you narrow down the issue.

[StevePi]

9 hours ago, mattstyles said:

Looks suspiciously like the size of a status bar of some sort.

Could there be any cordova plugin that is changing the size of the window? Or possibly one that sets it correctly but you have to wait for it to initialise?

I'm clutching at straws here but maybe it'll help you narrow down the issue.

I try use cocoon.io and get same results, my game template is https://github.com/lean/phaser-es6-webpack

[mattstyles]

Have you tried other methods of grabbing screen size, i.e.

var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0)
var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0)

[source]

Or, even better, as you know the size of the screen on your test device hard-code the values and see what happens, if the black bar is still there then its something to do with the wrapper, if not then something is interfering with what window.innerHeight returns (or, there is a 3rd option and Phaser is rendering incorrectly, or, you've set some height wrong somewhere in the scenegraph).

 

[StevePi]

9 minutes ago, mattstyles said:

Have you tried other methods of grabbing screen size, i.e.

var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0)
var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0)

[source]

Or, even better, as you know the size of the screen on your test device hard-code the values and see what happens, if the black bar is still there then its something to do with the wrapper, if not then something is interfering with what window.innerHeight returns (or, there is a 3rd option and Phaser is rendering incorrectly, or, you've set some height wrong somewhere in the scenegraph).

 

Same in all changes, but after I hide app in my phone and reopen it, line disappears

[mattstyles]

1 minute ago, StevePi said:

Same in all changes, but after I hide app in my phone and reopen it, line disappears

and you're sure you're waiting long enough before instantiating the Phaser game object? Cordova has some of callback for when it and its plugins are done initialising. if you close it and then reopen it and all is well it just smacks of not waiting long enough for some sort of plugin to finish its init.

[StevePi]

45 minutes ago, mattstyles said:

and you're sure you're waiting long enough before instantiating the Phaser game object? Cordova has some of callback for when it and its plugins are done initialising. if you close it and then reopen it and all is well it just smacks of not waiting long enough for some sort of plugin to finish its init.

import 'pixi'
import 'p2'
import Phaser from 'phaser'
import BootState from './states/Boot'
import MenuState from './states/Menu'
import GameState from './states/Game'
import WinState from './states/Win'


class Game extends Phaser.Game {
  constructor() {
    var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0)
    var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0)
    super(w, h, Phaser.AUTO)
    this.state.add('Boot', BootState, false)
    this.state.add('Menu', MenuState, false)
    this.state.add('Game', GameState, false)
    this.state.add('Win', WinState, false)
    if (window.cordova) {
      document.addEventListener('deviceready', () => {
        this.state.start('Boot');
      }, false);
    } else {
      this.state.start('Boot');
    }

    //this.state.start('Boot')
  }

}

window.game = new Game()

Try this, but no result