Jump to content
This forum will be closing down. Please move to the respective dedicated project forums.

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


StevePi
 Share

Recommended Posts

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="dev@cordova.apache.org" 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

 

 

Screenshot_2017-01-22-19-25-16.png

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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).

 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 :(

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...