StevePi Posted January 22, 2017 Share Posted January 22, 2017 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 Link to comment Share on other sites More sharing options...
mattstyles Posted January 22, 2017 Share Posted January 22, 2017 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. Link to comment Share on other sites More sharing options...
StevePi Posted January 23, 2017 Author Share Posted January 23, 2017 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 More sharing options...
mattstyles Posted January 23, 2017 Share Posted January 23, 2017 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 More sharing options...
StevePi Posted January 23, 2017 Author Share Posted January 23, 2017 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 More sharing options...
mattstyles Posted January 23, 2017 Share Posted January 23, 2017 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 More sharing options...
StevePi Posted January 23, 2017 Author Share Posted January 23, 2017 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 More sharing options...
Recommended Posts