[Phaser] Match 3 Mission with CocoonJS

[korgoth]

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

Thank You.

 

Screens


 

[CaueCR]

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!

[korgoth]

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();

[toto88x]

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?

[plicatibu]

I liked both the game and graphics.

Did you made the graphics yourself or did you hired a professional artist?

[korgoth]

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.

[korgoth]

Update: web version is out. Now you can try it without a phone   url: http://match3.baldricksoft.com/

[soliver]

Well done ... last updated doesn't works in Firefox / Win .. (black background only).

iphone / ipad mini (Chrome) playable ... safari = very very slow

[nikolayku]

Not work on firefox (backgroud image only + music)

 

About music - where you take this beautiful track ?

[korgoth]

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.