Rex Rhino Posted October 10, 2013 Share Posted October 10, 2013 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! Thanks,Rex Link to comment Share on other sites More sharing options...
rich Posted October 10, 2013 Share Posted October 10, 2013 It sounds to me like Phaser needs a start-up option to not wait for a DOMContentLoaded event, as it sounds like the Cocoon wrapper doesn't provide one. But it'd be neat if Ludei could confirm this. Link to comment Share on other sites More sharing options...
triptych Posted October 10, 2013 Share Posted October 10, 2013 Just tweeted Ludei @ludei can you offer any insight getting PhaserJS working with CocoonJS? http://t.co/j4ldYDw1UU and got this response: @triptych Hi Andrew, if you send us a simple testcase to devsupport@ludei.com, we'll check it out and see what's going on Link to comment Share on other sites More sharing options...
Rex Rhino Posted October 16, 2013 Author Share Posted October 16, 2013 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. index.html<!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>game.js(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:http://rexrhino.com/game/ I will update this thread as soon as I find out more! Link to comment Share on other sites More sharing options...
Rex Rhino Posted October 16, 2013 Author Share Posted October 16, 2013 There is a workaround on this thread:http://www.html5gamedevs.com/topic/1613-cocoonjs-webglrenderer-scaling-question/ 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 More sharing options...
Rex Rhino Posted October 25, 2013 Author Share Posted October 25, 2013 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 bkurtz13 1 Link to comment Share on other sites More sharing options...
Recommended Posts