{"id":16946327,"url":"https://github.com/abritopach/ionic-phaser-demo","last_synced_at":"2026-02-04T16:07:16.042Z","repository":{"id":38676389,"uuid":"212642921","full_name":"abritopach/ionic-phaser-demo","owner":"abritopach","description":"Sample project that shows how to integrate Phaser 3 (current version) in Ionic app.","archived":false,"fork":false,"pushed_at":"2023-01-07T10:21:15.000Z","size":2410,"stargazers_count":2,"open_issues_count":26,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-08T02:52:38.855Z","etag":null,"topics":["angular","game-service","ionic","ionic4","phaser","phaser-component","phaser3","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/abritopach.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-10-03T17:50:41.000Z","updated_at":"2024-05-29T13:13:11.000Z","dependencies_parsed_at":"2023-02-06T22:01:44.291Z","dependency_job_id":null,"html_url":"https://github.com/abritopach/ionic-phaser-demo","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/abritopach/ionic-phaser-demo","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abritopach%2Fionic-phaser-demo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abritopach%2Fionic-phaser-demo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abritopach%2Fionic-phaser-demo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abritopach%2Fionic-phaser-demo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/abritopach","download_url":"https://codeload.github.com/abritopach/ionic-phaser-demo/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abritopach%2Fionic-phaser-demo/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263376023,"owners_count":23457330,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","game-service","ionic","ionic4","phaser","phaser-component","phaser3","typescript"],"created_at":"2024-10-13T21:27:08.538Z","updated_at":"2026-02-04T16:07:11.020Z","avatar_url":"https://github.com/abritopach.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# IonicPhaserDemo\n\nSample project that shows how to integrate Phaser 3 (current version) in Ionic app.\n\nTechnologies: Ionic, Phaser, Phaser Component Library, TypeScript.\n\n## Running\n\nBefore you go through this example, you should have at least a basic understanding of Ionic concepts. You must also already have Ionic installed on your machine.\n\n* Test in localhost:\n\nTo run it, cd into `ionic-phaser-demo` and run:\n\n```bash\nnpm install\nionic serve\n```\n\n## Steps when integrating Phaser in Ionic or Angular\n\n### Create project\n\nCreate an Angular 8 Project using angular cli\n\n```bash\n    ng new angular-phaser-demo\n```\n\nCreate an Ionic 4 Project using ionic cli\n\n```bash\n    ionic start ionic-phaser-demo blank\n```\n\n### Modify package.json\n\nAdd this below lines within script object.\n\n```bash\n    ...\n    \"phaser-typings\": \"curl -o src/phaser.d.ts https://raw.githubusercontent.com/photonstorm/phaser/master/types/phaser.d.ts\",\n    \"postinstall\": \"npm run phaser-typings\"\n    ...\n```\n\n### Install dependencies\n\nInstall the dependency modules and add Phaser and Phaser Component Library.\n\n```bash\n    npm install\n    npm install phaser\n    npm install phaser-component-library\n```\n\n### Modify angular.json\n\nAdd phaser.js file in the script section.\n\n```bash\n    ...\n    \"scripts\": [\n        \"node_modules/phaser/dist/phaser.js\"\n    ],\n    ...\n```\n\n### Ad PhaserModule in the module in which you are going to use Phaser.\n\nExample home.module.ts (Ionic APP)\n\n```bash\n    import { NgModule } from '@angular/core';\n    import { CommonModule } from '@angular/common';\n    import { IonicModule } from '@ionic/angular';\n    import { FormsModule } from '@angular/forms';\n    import { RouterModule } from '@angular/router';\n\n    import { HomePage } from './home.page';\n\n    import { PhaserModule } from 'phaser-component-library';\n\n    @NgModule({\n    imports: [\n        CommonModule,\n        FormsModule,\n        IonicModule,\n        RouterModule.forChild([\n        {\n            path: '',\n            component: HomePage\n        }\n        ]),\n        PhaserModule\n    ],\n    declarations: [HomePage]\n    })\n    export class HomePageModule {}\n```\n\n### Modify tsconfig.json\n\nIn your tsconfig.json file add \"scripthost\" in lib array otherwise ActiveXObject error will encounter.\n\n```bash\n    ...\n    \"lib\": [\n        \"es2018\",\n        \"dom\",\n        \"scripthost\"\n    ]\n    ...\n```\n\n### Create Game Service\n\nNow generate a service to add a game scene. But make sure to game service extends Phaser.Scene.\n\nAngular service\n\n```bash\n    ng generate service services/game\n```\n\nIonic service\n\n```bash\n    ionic generate service services/game\n```\n\n```bash\nimport { Injectable } from '@angular/core';\n\n@Injectable({\n  providedIn: 'root'\n})\nexport class GameService extends Phaser.Scene {\n\n  constructor() { \n    super({ key: 'Scene' });\n  }\n\n  /**\n   * Scene preload handler.\n  */\n  public preload(): void {\n    console.log('GameService::Phaser preload() | method called');\n    // TODO: Code\n  }\n\n  /**\n   * Scene create handler.\n  */\n  public create(): void {\n    console.log('GameService::Phaser create() | method called');\n    // TODO: Code\n  }\n\n  /**\n   * Scene update handler.\n  */\n  /*\n  public update(): void {\n    console.log('GameService::Phaser update() | method called');\n    // TODO: Code\n  }\n  */\n}\n```\n\n### Add Phaser Component in html page / component.\n\n```bash\n    \u003cphaser-component [gameConfig]=\"gameConfig\" (gameReady)=\"onGameReady($event)\"\u003e\u003c/phaser-component\u003e\n```\n\n### Initiate the game from your page.ts / component.ts\n\nExample home.page.ts\n\n```bash\n    import { Component, OnInit } from '@angular/core';\n    import { GameService } from '../services/game.service';\n\n    @Component({\n    selector: 'app-home',\n    templateUrl: 'home.page.html',\n    styleUrls: ['home.page.scss'],\n    })\n    export class HomePage implements OnInit {\n\n    public readonly gameConfig = {\n        title: 'Game Title',\n        version: '1.0',\n        type: Phaser.AUTO,\n        width:  window.innerWidth,\n        height: window.innerHeight\n    };\n\n    constructor(public mainScene: GameService) {\n    }\n\n    ngOnInit() {\n        console.log('HomePage::ngOnInit() | method called');\n    }\n\n    onGameReady(game: Phaser.Game): void {\n        game.scene.add('Scene', this.mainScene, true);\n    }\n}\n```\n\n## Requirements\n\n* [Node.js](http://nodejs.org/)\n* [Ionic](https://ionicframework.com/getting-started#cli)\n* [Phaser](https://phaser.io/)\n* [Phaser Component Library](https://github.com/kidthales/phaser-component-library)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fabritopach%2Fionic-phaser-demo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fabritopach%2Fionic-phaser-demo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fabritopach%2Fionic-phaser-demo/lists"}