11

Just to let you know (in case someone wants to develop).

I developed a game app using Phaser.js. I sort of put the code into Ionic blank starter app. So basically the view is rendered using Ionic app and then Phaser picks up the div by the id and displays the game.

Problem:

Its a simple flappy bird clone. Its working fine but the blocks movement is a bit shaky (as though they were shivering). Since Phaser uses WebGL, could it be the reason for slow rendering or is it due to the ionic framework (/angularjs) ?

Should I have used some other tools to build the game app?

Thanks in advance.

Edit:

You can checkout the code here: https://github.com/vamshisuram/ionic-flappybird-clone.git I uploaded all code into Git. So, I guess you can directly install platforms/ant-build/Hello-Cordova-debug.apk into your mobile and test it. Or try build again and install.

Vamshi Suram
  • 850
  • 1
  • 9
  • 19
  • Can you post a link to the app? WebGL is rather sensitive to graphic hardware, driver and browser implementation, maybe the results may vary on our computers. – Simone Gianni Sep 06 '14 at 14:43
  • Sorry, I wish to publish the app. The game specs are very very simple. Just like flappy bird. It was working good in medium spec laptop browser. But when I tried the app in a high end phone (Galaxy S3), I am facing the problem. Wondering what it would be in low/medium spec mobiles. – Vamshi Suram Sep 06 '14 at 14:54
  • @VamshiSuram How can anyone help you if you won't share relevant code? – Charlie Sep 06 '14 at 15:49
  • @Charlie Sorry if I was rude. I added the code and posted the link. Please check the edit. – Vamshi Suram Sep 06 '14 at 17:59

1 Answers1

26

You can make it work. BUT ... there is no support for WebGL on any Android device using the stock webview (Ionic uses Cordova to package the app which is then being run inside a webview on the device): http://caniuse.com/#feat=webgl

Phaser.js is built on top of Pixie.js which will fall back to 2D canvas rendering. That's why your game is running slow.

If you want to use Ionic and WebGL you should build your app using CrossWalk. I have done that and it is awesome: https://crosswalk-project.org/

There's other options such as CocoonJS to get WebGL going, but I haven't used those myself.

krik
  • 539
  • 4
  • 6
  • 4
    +1 for CrossWalk (or Cocoon, but for Android CrossWalk is lovely) – PhotonStorm Sep 06 '14 at 18:43
  • @krik Thanks for the suggestions. Crooswalk is cool. But the apk size is big. Game is working fine. I tried cocoonjs too. Need to take care on resolutions. I wonder what do they mean by webview there (in the launcher) because the zip file contains just the html, js, assets (no Ionic/angular..). Does it mean cocoonjs is similar to Ionic ? – Vamshi Suram Sep 07 '14 at 17:39
  • CocoonJS has two flavors. WebGL only for games. And Webview with WebGL (like CrossWalk) for regular apps. Would be interesting how much overhead the CocoonJS container is adding on Android compared to CrossWalk. – krik Sep 09 '14 at 09:15
  • 2
    If I use CrossWalk and Ionic together is it possible to write games for iOS? – schirrmacher Aug 31 '15 at 13:53
  • @PhotonStorm, CrossWalk for Android really works great. But I forced such a problem that for some sprites json animation works with a 60fps, but when I change the sprite on a sprite with a much lighter size I have a stable 5fps. Why does it happen? Thank you for your answer) – weratius Dec 11 '15 at 21:39
  • Guys, see my directive to integrate Phaser & Ionic of the best way!  https://market.ionic.io/plugins/ionphaser – jdnichollsc May 24 '16 at 16:59