GregP Posted November 22, 2013 Share Posted November 22, 2013 Hi Guys, Just wanted to share with you the result of my recent struggling with Phaser and CocoonJS - I finally managed to scale my game properly while running in WebGL mode! I spent some time digging in Phaser and Pixi.js source codes, also this thread was really helpful. And here's the code:(function () { 'use strict'; var width = navigator.isCocoonJS ? window.innerWidth : 320, height = navigator.isCocoonJS ? window.innerHeight : 480, game, nanoha; game = new Phaser.Game(width, height, Phaser.WEBGL, '', { preload: preload, create: create, update: update }); function preload() { game.load.image('bg', 'assets/bg.png'); game.load.image('nanoha', 'assets/nanoha.png'); } function getRatio(type, w, h) { 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; } function create() { var ratio = getRatio('all', 320, 480); if (navigator.isCocoonJS) { game.world._container.scale.x = ratio.x; game.world._container.scale.y = ratio.y; game.world._container.updateTransform(); } else { game.stage.scaleMode = Phaser.StageScaleMode.SHOW_ALL; game.stage.scale.minWidth = 320; game.stage.scale.minHeight = 480; game.stage.scale.pageAlignHorizontally = true; game.stage.scale.setScreenSize(true); } game.add.sprite(0, 0, 'bg'); nanoha = game.add.sprite(160, 240, 'nanoha'); nanoha.anchor.x = 0.5; nanoha.anchor.y = 0.5; } function update() { nanoha.angle -= 2; }})();All the magic happens at the top of the create function - scaling world._container does the trick - the scale factor is applied to all it's children. As a result I came from this:https://dl.dropboxusercontent.com/u/30342997/Screenshot_2013-11-22-23-10-20.png To this:https://dl.dropboxusercontent.com/u/30342997/Screenshot_2013-11-22-23-08-55.png I also tested touch events and these work as expected Complete sample app can be downloaded here: https://dl.dropboxusercontent.com/u/30342997/scale_test.zip Please let me know what you think about such approach, maybe there's a better way around? By the way, it would be soooo great to have Phaser supporting CocoonJS by default with no additional hacks... just tellin' korgoth, iShellz, Arlefreak and 5 others 8 Link to comment Share on other sites More sharing options...
plicatibu Posted November 22, 2013 Share Posted November 22, 2013 Thank you for sharing. Link to comment Share on other sites More sharing options...
shawnbless Posted November 23, 2013 Share Posted November 23, 2013 GregP, Thank you for sharing! I zipped this up, put it on my phone, and tried launching it with the CacoonJS Launcher. I recieved a black screen only??? I'm using a Samsung Galaxy S 4 to test on. This is similiar results to what I am seeing with my own app. I was hoping you had solved it! Any ideas? Thanks,Shawn BlessRocket Star Link to comment Share on other sites More sharing options...
GregP Posted November 23, 2013 Author Share Posted November 23, 2013 Huh, that's weird.I just reuploaded the .zip package to my Dropbox account and tested in on my old Nexus 7 and Samsung Galaxy Ace 3 and it worked on both like a charm...Any logs on the debug console? Link to comment Share on other sites More sharing options...
shawnbless Posted November 23, 2013 Share Posted November 23, 2013 My bad dude. I had zipped the basic folder, instead of its contents. Tried your zip file from your dropbox directly and it worked fine. Great job man. Sorry about being an idiot. LOLShawn Link to comment Share on other sites More sharing options...
GregP Posted November 23, 2013 Author Share Posted November 23, 2013 Glad to hear that.Besides, “one who makes no mistakes makes nothing”... Cheers Mike and shawnbless 2 Link to comment Share on other sites More sharing options...
acott Posted February 13, 2014 Share Posted February 13, 2014 I'm using this method for scaling up, but for some reason sprites are off screen? Anyone know why this might be happening? Link to comment Share on other sites More sharing options...
jotaSe Posted February 14, 2014 Share Posted February 14, 2014 I'm using this method for scaling up, but for some reason sprites are off screen? Anyone know why this might be happening? That happens to me too, In web browser works really fine, but when i tried to play it on a device, the sprites are off screen Link to comment Share on other sites More sharing options...
tmshu1 Posted February 26, 2014 Share Posted February 26, 2014 That happens to me too, In web browser works really fine, but when i tried to play it on a device, the sprites are off screen Yep, same here. On a device, not only are some of the sprites off screen (even when game dimensions are set to the device window width and height), but the collisions do not work properly (e.g. sometimes not happening at all, sometimes happening when sprites are already overlapping). Does anyone have any ideas? Is what was recommended above not a good way to scale phaser games?game.world._container.scale.x = ratio.x;game.world._container.scale.y = ratio.y;game.world._container.updateTransform();I am trying to scale my phaser game to fit the screen of an android device (using cocoonjs). Link to comment Share on other sites More sharing options...
Hsaka Posted February 26, 2014 Share Posted February 26, 2014 Hi, with the 1.4.7 CocoonJS release, you need to take into consideration the device pixel ratio. Here's how I do it: index.html:<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> <meta charset="utf-8"/> <script src="libs/phaser.js"></script> <script src="game.js"></script></head><body> <script type="text/javascript"> var width = navigator.isCocoonJS ? window.innerWidth : 640; var height = navigator.isCocoonJS ? window.innerHeight : 960; var dips = window.devicePixelRatio; width = width * dips; height = height * dips; var myGame = new Phaser.Game(width, height, Phaser.AUTO, ''); myGame.state.add('boot', Screen.Boot, true); myGame.state.add('preloader', Screen.Preloader); myGame.state.add('splashscreen', Screen.SplashScreen); myGame.state.add('mainmenu', Screen.MainMenu); myGame.state.add('gamescreen', Screen.GameScreen); </script></body></html>Boot.js: (Note - written for the latest Phaser 1.2 release)Boot = function (game) { this.game = game;};Boot.prototype = { getRatio: function (type, w, h) { var width = navigator.isCocoonJS ? window.innerWidth : w, height = navigator.isCocoonJS ? window.innerHeight : h; var dips = window.devicePixelRatio; width = width * dips; height = height * dips; 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; }, setupScaling: function () { if (navigator.isCocoonJS) { var ratio = this.getRatio('fill', 640, 960); this.game.world.scale.x = ratio.x; this.game.world.scale.y = ratio.y; this.game.world.updateTransform(); } else { if (this.game.device.desktop) { this.game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; this.game.scale.pageAlignHorizontally = true; this.game.scale.pageAlignVertically = true; this.game.scale.setScreenSize(true); } else { this.game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; this.game.scale.pageAlignHorizontally = true; this.game.scale.pageAlignVertically = true; this.game.scale.forceOrientation(false, true, 'orientation'); this.game.scale.setScreenSize(true); } } this.game.world.setBounds(0, 0, 640, 960); }, create: function () { this.setupScaling(); this.game.state.start('preloader'); }}; SignalSin and Jirka1111 2 Link to comment Share on other sites More sharing options...
Jirka1111 Posted September 21, 2014 Share Posted September 21, 2014 Hsaka: Oh my god... Stupid Android. Everything works great on iPhone 4S, but Zopo C2 (Android 4.2.2) has screen wider (owl is bouncing from the screen width + approx 10 pixels on both sides). Link to comment Share on other sites More sharing options...
Jirka1111 Posted November 11, 2014 Share Posted November 11, 2014 Could someone rewrite example from GregP for Phaser 2.2 and with proper files (like Boot.js, Preloader.js, etc.)? This is the only solution which is working for me. This template could be very useful. plicatibu 1 Link to comment Share on other sites More sharing options...
jdnichollsc Posted January 14, 2015 Share Posted January 14, 2015 Hi guys! I need to display in landscape mode with CocoonJS, ¿How do you recommend I do this with Phaser? Regards, Nicholls Link to comment Share on other sites More sharing options...
Recommended Posts