Awesome Open Source
Awesome Open Source

IonPhaser Support - Create More Advanced Hybrid Mobile Apps for Modern Devices

Support to IonPhaser directive. Issues of the examples included in the template and any question about this Ionic Project.

Ionicmeets Phaser

Introduction

IonPhaser is an Angular directive to Ionic Framework 1.x, is the best way to integrate Phaser Framework to create more advanced hybrid mobile applications for modern devices.

The CSS Animations have a better performance but WebGL/Canvas is more powerfull. Phaser Framework use the canvas to create dynamic graphics using JavaScript easily.

Demo

  • Download the Ionic View App in your device.
  • Preview the app using the ID: fed7b239
  • That's all, folks!!

Buy

You can buy this product here.

Documentation

You can check the documentation here to see how the project is structured.

Screens

Home Gallery Menu Dragon Draw StarWars Photo Tinder FlappyBird

Ionic Transitions vs Native Transitions (Using ionic-native-transitions plugin)

IonicTransitions NativeTransitions

Take care with the performance

  • On iOS works excellent.
  • On Android you can improve the performance if is required using Crosswalk or Cocoon.

Ionic Framework Links

Phaser Framework Links

Discover Phaser A Guide to the Phaser Scale Manager A Guide to the Phaser Tween Manager Interphase 2 Mobile Development

Credits

  1. Phaser Framework
  2. ngCordova
  3. ion-floating-menu
  4. ionic-ion-swipe-cards. Any issue related with the tinder cards post in this link repository.
  5. Advanced Carousel
  6. Ionic Pull-Up Footer
  7. phaser-state-transition-plugin
  8. Collide

Changelog

  • First Version with examples - 2016-04-05:
  1. Dragon with light effects from Game Mechanic Explorer.
  2. Draw in canvas (Like a signature).
  3. Star Wars animation (It isn't a video!).
  4. Photo with some filters (Like instagram).
  5. Tinder cards with effects.
  6. Flappy bird with Arcade physics and debug option to developers.
  7. Home and Menu screens with CSS animations using Animate.css.
  8. Phaser states using Angular Services (You can interact with the current state of Phaser from Angular Controllers and viceversa!)

License

The images of this project itself is licensed under the Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License

Ionic meets Phaser

Happy coding

Made with <3

Related Awesome Lists
Top Programming Languages
Top Projects

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Angular (54,905
Camera (16,834
Angularjs (11,904
Canvas (10,713
Android App (7,724
Transition (6,103
Mobile App (3,126
Ios App (2,288
Phaser (2,027
Star Wars (821
Css Animations (676
Flappy Bird (487
Angular Directives (234
Phaser Game (70
Phaser Plugin (39
Phaser Framework (14