Jump to content
GameMonetize.com © The leading broker of high quality cross-platform HTML5 games ×

why this index.html works with webview+ and not webview in cocoon

espace

By espace,
in Coding and Game Design

 Share

Recommended Posts

espace Newbie

espace

Posted
Posted

hi,

my game works very well on webview + with cocoon.js, and also on chrome and firefox.

But when i switch to canvas+ or webview in cocoon, i have a lot of errors.

I would use a single file 'main.js' to load my game.

i think that my problem is in the index.html file....below a capture.

what must i change to works ? where is my error ? thanks for your help. 

<!DOCTYPE HTML>
<html>
	 <head> 
		<title>BubX</title>
		<link rel="shortcut icon" href="assets/favicon.png" type="image/x-icon" />
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="chrome=1, IE=9">
		<meta name="format-detection" content="telephone=no">
		<meta name="HandheldFriendly" content="true" />
		<meta name="robots" content="noindex,nofollow" />
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="apple-mobile-web-app-status-bar-style" content="black" />
		<meta name="apple-mobile-web-app-title" content="Phaser App"> 

		<script src="cordova.js"></script>
		<!--script src="cordova.js"></script-->
		<!--script src="src/live.js"></script-->
		<script src="src/dat.gui.min.js"></script>
		<script src="phaser.min.js"></script>
		<script src="src/other.js"></script>
		<script src="src/util.js"></script>
		<script src="src/level.js"></script>
		<script src="src/main.js"></script>

<style>
	body {
		margin: auto;
		display: table;
		position: absolute;
		border:0px;
		top: 0px;
		left: 0px;
		padding: 0; margin: 0;
		background-color: #0d1018
	}
</style>
	 </head> 
	</body>
</html>

 

Link to comment
Share on other sites
espace Newbie

espace

Posted
  • Author
Posted

when i run with webview mode i have this message 

gap_init:3 and after a lot of messages

and with canvas+ 

attempt to invoke virtual method 'intjava.io.InputStream.read(byte[])' on an null object reference

in fact i think that the problem is due to phaser. In another game i have different file with states. My phaser begin in the index.html file.

In this example (above) my phaser begin in the main.js file...

 

 

 

Link to comment
Share on other sites
espace Newbie

espace

Posted
  • Author
Posted

i have write a little example based on phaser example with no image in preload https://phaser.io/examples/v2/geometry/circle-random-point and it is wat i'm thinked :

Phaser must be call outside  > in the index.html and now it works ... the attached file is below in zip.file.

exept for the canvas+ my game is not fullscreen : i have a black border a the bottom.

In webview+ and webview i have fullscreen without black border.

is someone have an advice to avoid this black border in canvas mode ? it would be great :)

my index.html 


<!DOCTYPE HTML>
<html>
	 <head> 
	<style type="text/css">
		body{
		margin: auto;
		display: table;
		position: absolute;
		border:0px;
		top: 0px;
		left: 0px;
		padding: 0; margin: 0;
		background-color: #494b4c
		}
	</style>
		<title>Example test</title>
		<link rel="shortcut icon" href="assets/favicon.png" type="image/x-icon" />
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="chrome=1, IE=9">
		<meta name="format-detection" content="telephone=no">
		<meta name="HandheldFriendly" content="true" />
		<meta name="robots" content="noindex,nofollow" />
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="apple-mobile-web-app-status-bar-style" content="black" />
		<meta name="apple-mobile-web-app-title" content="Phaser App"> 
		<script src="phaser.min.js"></script>
		<script src="main.js"></script>
	 </head> 
	<body>
		<script type="text/javascript">
(function() {
	game = new Phaser.Game(1280,1920,Phaser.CANVAS,'' )
	game.state.add("Boot",boot);
	game.state.add("Launch",launch);
	game.state.start("Boot");

})();    
		</script>
	</body>
</html>

my main.js 

	var bmd;
	var circle;
	var colors;
	var i = 0;
	var p = null;

var boot= {
	create: function(){
		this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL
		this.scale.pageAlignHorizontally = true
		this.scale.pageAlignVertically = true
		this.scale.refresh()
		this.game.stage.backgroundColor = '#494b4c'
		game.state.start("Launch",launch);
	},
}

var launch ={
	create: function(){

		colors = Phaser.Color.HSVColorWheel();

		//  Create a Circle
		circle = new Phaser.Circle(game.world.centerX, game.world.centerY, 500);

		//  Create a BitmapData just to plot Circle points to
		bmd = game.add.bitmapData(game.width, game.height);
		bmd.addToWorld();

		//  And display our circle on the top
		var graphics = game.add.graphics(0, 0);
		graphics.lineStyle(1, 0x00ff00, 1);
		graphics.drawCircle(circle.x, circle.y, circle.diameter);

		p = new Phaser.Point();

	},

	update :function(){

		for (var c = 0; c < 10; c++){
			circle.random(p);

			//  We'll floor it as setPixel needs integer values and random returns floats
			p.floor();

			bmd.setPixel(p.x, p.y, colors[i].r, colors[i].g, colors[i].b);
		}

		i = game.math.wrapValue(i, 1, 359);

	},
}

 

template.zip

Link to comment
Share on other sites
BdR Newbie

BdR

Posted
Posted

Do you mean your game scales correctly, but it doesn't fill the entire screen? I mean like in the image in the attachement. If so, I think you need to set the ScaleManager to USER_SCALE and then implement the "game.scale.onSizeChange" and "game.scale.setResizeCallback". Btw also see this topic.

Here is an example of resizeCallback I've used in my game to adjust for either the width or the height, based on the display window size (i.e. the browser window size or the cocoon windowsize). 

    resizeCallback: function(manager) {
        console.log('resize_Update - common function');
        
        // only adjust when really needed
        if (this.resize_old_width != window.innerWidth || this.resize_old_height != window.innerHeight) {
            console.log('resize_Update - ACTUAL RESIZE!!');
            // save values for next time
            this.resize_old_width = window.innerWidth;
            this.resize_old_height = window.innerHeight;

            // do the actual resizing
            var t = window.innerHeight / window.innerWidth;
            if (GAME_WIDTH * t > GAME_HEIGHT) {
                this.scale.setGameSize(GAME_WIDTH, Math.floor(GAME_WIDTH * t)) // too tall, adjust height resolution
            } else {
                this.scale.setGameSize(Math.floor(GAME_HEIGHT / t), GAME_HEIGHT); // too wide, adjust width resolution
            };
        };
    }

You also need to implement a resize event for each State/scene, to adjust and arrange the sprites, buttons etc. correctly for the new canvas size.

phaser_scale.png

Link to comment
Share on other sites
espace Newbie

espace

Posted
  • Author
Posted

hi @Bdr

Sorry for this late response, but I was trying to understand your code.

> webview+ works as me

>webview don't work as me :) (black screen with errors) and canvas+ don't work also

  • after i try directly with your code in my game 
 resizeCallback: function(manager) {
        console.log('resize_Update - common function');
        
        // only adjust when really needed
        if (this.resize_old_width != window.innerWidth || this.resize_old_height != window.innerHeight) {
            console.log('resize_Update - ACTUAL RESIZE!!');
            // save values for next time
            this.resize_old_width = window.innerWidth;
            this.resize_old_height = window.innerHeight;

            // do the actual resizing
            var t = window.innerHeight / window.innerWidth;
            if (GAME_WIDTH * t > GAME_HEIGHT) {
                this.scale.setGameSize(GAME_WIDTH, Math.floor(GAME_WIDTH * t)) // too tall, adjust height resolution
            } else {
                this.scale.setGameSize(Math.floor(GAME_HEIGHT / t), GAME_HEIGHT); // too wide, adjust width resolution
            };
        };
    }

Maybe a stupid question but what is the argument 'manager'...I suppose that is the 'game' ?

Result  : is the same, always a black border at the bottom screen.

What i doesn't understand:

  • In the index.html file when i specify : 
<style type="text/css">
		body{
		margin: auto;
		display: table;
		position: absolute;
		border:0px;
		top: 0px;
		left: 0px;
		padding: 0; margin: 0;
		background-color: #494b4c
		}
	</style>
  • normally the game must be center to the screen and the background is grey , => it's the case for the webiew+ mode but not for the canvas+ mode ...Why ? 
  • Furthermore :
		this.game.stage.backgroundColor = '#494b4c'
  • must specify the background color as grey => it's also the case for the webiew+ mode but not for the canvas+ mode ...Why ?

Thanks for your light and thanks simply for your first post ;)

PS : when i was young, i have this console mario bros with luigi, it remember me good memory...

 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
 Share
Go to topic listing

  • Recently Browsing   0 members

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