Jump to content

[Phaser] Match 3 Mission with CocoonJS


korgoth
 Share

Recommended Posts

My first game with the awesome Phaser framework! Its a classic match 3 game with levels and worlds so nothing new because it was my

"learning phaser" project :)

The hardest part was the CocoonJS integration like scaling and bitmap font xml parsing :)
You can try or check the video and images here: https://play.google.com/store/apps/details?id=com.baldricksoft.match3mission

I only have one android phone so i can only hope the CocoonJS scaling works on every resolution.

If you have any suggestions or comments please let me know :P

Thank You.

 

Screens

m3m.png
 

Link to comment
Share on other sites

Nice game! Liked it a lot!

You said you used CocoonJS, could you post a topic about how you did it? After the new CocoonJS release, things are not working like they used to. I tought it was just me but it seems more people are having trouble with it.

 

Hope your game is a success!

Link to comment
Share on other sites

Hello,

 

if you have problems with the scaling then the key was this:

var width = navigator.isCocoonJS ? window.innerWidth : 600;var height = navigator.isCocoonJS ? window.innerHeight : 1000;var game = new Phaser.Game(width, height, Phaser.AUTO, '');

then in boot:

getRatio: function(type, w, h) {        var width = navigator.isCocoonJS ? window.innerWidth : 600;        var height = navigator.isCocoonJS ? window.innerHeight : 1000;                var scaleX = width / w,            scaleY = height / h,            result = {                x: 1,                y: 1            };        switch (type) {        case 'all':            result.x = scaleX > scaleY ? scaleY : scaleX;            result.y = scaleX > scaleY ? scaleY : scaleX;            break;        case 'fit':            result.x = scaleX > scaleY ? scaleX : scaleY;            result.y = scaleX > scaleY ? scaleX : scaleY;            break;        case 'fill':            result.x = scaleX;            result.y = scaleY;            break;        }        return result;    },
var ratio = this.getRatio('all', 600, 1000);this.world._container.scale.x = ratio.x;this.world._container.scale.y = ratio.y;this.world._container.updateTransform();
Link to comment
Share on other sites

Nice game, and thanks for the info!

 

I'm also trying to port my game with cocoonJS, and I have issues with displaying simple text label that are replaced by black rectangles.

Did you do anything specific for this?

 

Do you use bitmap font or regular fonts? I had no problems with bitmap fonts in cocoon, but for exmaple arial is not working.

Link to comment
Share on other sites

  • 2 weeks later...
  • 2 weeks later...

Another update: Game is up on chromeexperiments.com :)  "Chrome Experiments is a showcase of web experiments written by the creative coding community. All of them are built in HTML5 and JavaScript using open web technologies such as Canvas, WebGL and WebRTC. Each experiment is submitted by the creator."

 

If you have something to show just send them and if you are lucky it will be up in a few week.

 

http://www.chromeexperiments.com/detail/match-3-mission/

 

Music is from  http://www.matthewpablo.com/   He is a very nice guy.

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

  • Recently Browsing   0 members

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