triptych

does Phaser work with Ludei?

Recommended Posts

Reading from cocoon's site, I would assume Phaser would be a good choice -

 

CocoonJS does not constrain your games to any proprietary APIs or SDKs. Code your games using plain JavaScript and HTML5 using any engine you want. CocoonJS will run it with no code changes.

 

 

Seems like so long as its html & javascript, cocoon will wrap it for you. Since Phaser supports both canvas and webGL (I believe?), its probably even more robust than some.

Share this post


Link to post
Share on other sites

Can someone help me out, i'm trying to add my game(consist of image folder, src folder and .html) to a zip to test and run on the cocoon mobile ipad app but it keeps saying that i have to add my .html into the zips root.  Im seriously lost.

Share this post


Link to post
Share on other sites

@Ludei:
 

I did a small test with latest CocoonJS launcher and the following code:

<!DOCTYPE html><html>    <head>        <title></title>        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">    </head>    <body>    <script type="text/javascript" src="js/phaser.js"></script>    <script type="text/javascript">    (function () {            // WebGL does work but no scaling            var game = new Phaser.Game(320, 480, Phaser.WEBGL, '', { preload: preload, create: create, update: update });                        // CANVAS does not work - throws exception. no canvas created.            //var game = new Phaser.Game(320, 480, Phaser.CANVAS, '', { preload: preload, create: create, update: update });                        game.canvas.style.cssText="idtkscale:ScaleAspectFill;";                        function preload() {                game.load.image('mushroom', 'assets/sprites/mushroom2.png');            }            function create() {                var test = game.add.sprite(200, 200, 'mushroom');                                }            function update() {            }    })();    </script>    </body></html>

I wasn't able to use Phaser with a normal canvas element. Using WebGL I have some scaling issue.

 

The screenshot you posted looks like you do not have those issues. Would you mind to post some example code.

 

Thanks in advance.

Share this post


Link to post
Share on other sites

Hi Benny

 

I didn't tested with Phaser but with Pixi I made some tests and the only solution that allways worked for me was by creating the canvas programmatically then passing it to Pixi initialisation (I don't know if Phaser allow this).

 

and btw, Cocoonjs have an optimised canvas to accelerate 2D drawing see here :http://wiki.ludei.com/cocoonjs:extensions:basic:screencanvas

this one is not created with the standard <canvas> object, so it's allways a good idea to create the canvas first then pass it to the constructor.

Share this post


Link to post
Share on other sites

Hi Benny

 

I didn't tested with Phaser but with Pixi I made some tests and the only solution that allways worked for me was by creating the canvas programmatically then passing it to Pixi initialisation (I don't know if Phaser allow this).

 

and btw, Cocoonjs have an optimised canvas to accelerate 2D drawing see here :http://wiki.ludei.com/cocoonjs:extensions:basic:screencanvas

this one is not created with the standard <canvas> object, so it's allways a good idea to create the canvas first then pass it to the constructor.

 

Hi Ezelia - thanks for your answer.

 

I did some tests with Pixi, too. Also, used the screencanvas and passed it to Pixi. Refer to my post I made in the Pixi forum.

 

Unfortunately, I could not solve the scaling issue with in a WebGL context. My guess is to modify the glViewport somehow and just set the canvas dimension to window.innerWidth/window.innerHeight. But I do not know how easy this would be with Pixi.

 

That said - I am not sure if it is worth the effort - since Pixi is 2D - and as you already mentioned - CocoonJS uses its screencanvas for 2d acceleration. So, maybe it does not really matter performance wise.

 

But it would be of course be cool to know.

Share this post


Link to post
Share on other sites

Played around with simple full screen background image scrolling and some particle effects to test Phaser and Cocoon mix yesterday, worked well on my personal Nexus 4 and Nexus 7.

Also asked one of the testers to run it on lower end Android in office just for kicks - it was running well on HTC Desire HD with Android 2.3.5 - loading times were slightly longer and it did not get the screen size right, but that is probably down to me not doing any clever screen resolution checks. Overall test application was still running smoothly.

I like Cocoon auto-hides OS navigation.

There are some downsides.

You can only compile app with compressed ZIP size up to 30Mb, but with ZIP compression set to max and graphics and audio properly optimised, JS, CSS and HTML minimised, it should not be an issue.

Also, while compile process was not too bad (around 2-3 minute wait until I got email with download link), it requires few manual steps to test your package on real device.

If you are happy to work in desktop browser and test your code on real devices couple of times a day and are willing to be mindful of project size on disk, for now, I really like Cocoon JS and it has hiked my motivation to work on my next HTML5 / mobile project!

Share this post


Link to post
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...

  • Recently Browsing   0 members

    No registered users viewing this page.