Jump to content

Phaser 1.0.7 with Ludei Cocoon.js - Error with Canvas, Scaling problems with WebGL

Rex Rhino

Recommended Posts

Hello everyone,


I am new to Phaser, and I am having trouble using it with Ludei's CocoonJS on the iPad. I am using Phaser 1.0.7 (although I had the same problem with 1.0.6 as well).


When I use Phaser.CANVAS for rendering, I get the following error from CocoonJS: 

JavaScript Exception (Line: 1 Tag: 'DOMContentLoaded'): Error: Phaser.Game - cannot create Canvas or WebGL context, aborting.

When I use Phaser.WEBGL or Phaser.Auto, the program seems to run OK, but isn't properly scaled (it runs in a small square on the bottom left of the screen).


Is anyone successfully using Phaser with Ludei CocoonJS and able to get it to scale correctly (or run in canvas mode). Any help would be greatly appreciated!




Link to comment
Share on other sites

Sorry to take so long to reply to this thread, I was out of town for a little while. I will post my source code, and forward this thread to Ludei. (Hopefully they can give the answer on this thread, so that it can be of use to other people... if not I will ask them permission to post their response).


Here is my source code.



<!DOCTYPE HTML><html>	<head>		<meta charset="UTF-8" />		<title>HTML5 Game Template</title>		<!-- CSS Reset -->		<link rel="stylesheet" type="text/css" href="css/cssreset-min.css">		<script src="js/phaser.min.js"></script>		<!-- Main Game Files -->		<link rel="stylesheet" type="text/css" href="css/game.css">		<script src="js/game.js"></script> 	</head>	<body>	</body></html>


(function () {	var game = new Phaser.Game(800, 600, Phaser.WEBGL, '', { preload: preload, create: create, update: update, render: render });	function preload() {		game.load.image('logo', 'assets/sprites/mullusc.jpg');	}	function create() {		logo = game.add.sprite(game.world.centerX, game.world.centerY, 'logo');		logo.anchor.x = 0.5;		logo.anchor.y = 0.5;	}	function update() {		logo.angle++;	}	function render() {	}})();

game.css (it is entirely commented out... but I thought I should repost for completeness)

/*html {	background: #000000;}canvas {	background: #FFFFFF;	height: 100%;}*/

Here is a link to the files:



I will update this thread as soon as I find out more!

Link to comment
Share on other sites

There is a workaround on this thread:



It doesn't address the canvas rendering error... But when using the webgl rendering, they suggest making the canvas the size of the innerWidth and innerHeight of the window, then making the stuff you want to draw a child of an element that is scaled to the quotient of the window dimension divided by the desired resolution. From their example:

scaler.scale.x = window.innerWidth / appWidth;scaler.scale.y = window.innerHeight / appHeight;

They are using Pixi, and not Phaser... but I will rewrite it with Phaser and post the source code and my results.

Link to comment
Share on other sites

  • 2 weeks later...

Sorry for not updating this in a while. Ludei replied to me almost immediately, but I have been so busy I haven't had time to post their response until now:



Hi Jason,

We expose width and height this way:

var width = window.innerWidth;
var height = window.innerHeight;
var game = new Phaser.Game(width, height, Phaser.WEBGL, '', { preload: preload, create: create, update: update, render: render });

Hope this helps. And share it, please :-)

Kind regards

Link to comment
Share on other sites


  • Recently Browsing   0 members

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