Angular에서 Phaser 시작하기

설치하기

npm i phaser

tsconfig.json edit

add "scripthost"

"compilerOptions": {
  ......
  "lib": [
    ......
    "scripthost"
  ]
}

import { Component, OnInit, NgModule, Input, Output,EventEmitter, Injector, ElementRef,  OnChanges } from '@angular/core';

import * as Phaser from 'phaser';
import {GameScene} from './game.scene';

@Component({
  selector: 'app-view,
  template: `<div id="game-scene"></div>`
})
export class StarterComponent extends CommonComponent implements OnInit, OnChanges {

  public readonly gameConfig: any = {
    version: "0.0.1",
    type: Phaser.AUTO,
    width: 500,
    height: 530,
    backgroundColor : '#71c5cf',
    transparent: true,
    scene: [
      // Preloader,
      MyScene
    ],
    scale: {
      mode: Phaser.Scale.FIT,
      autoCenter: Phaser.Scale.CENTER_BOTH,
      parent: 'game-scene', // 실제 게임이 위치할 곳으로 위의  id="game-scene"

      max: {
        width: 500,
        height: 530
      },
    // width: 500,
    // height: 500,
    },

    physics: {
      default : 'arcade',
      arcade: {
        debug: false,
        setBounds: false
      }
    },
  }

  ngOnInit() {
    this.game = new Phaser.Game(this.gameConfig);
    this.game.scene.start('main', {});
  }
}

game.scene.ts

import * as Phaser from 'phaser';

export class GameScene extends Phaser.Scene {
  constructor() {
    super({ key: 'main' });
  }

  private preload () { // 미리 로딩할 aseets
  }

  public create () { // 게임에 필요한 object 생성
  }

  override update () { // 게임 플레이
    console.log('update'); 
  }
}

에러처리

message 1

node_modules/phaser/types/phaser.d.ts:9766:54 - error TS2304: Cannot find name 'ActiveXObject'.
9766         function ParseXML(data: string): DOMParser | ActiveXObject | null;

solution 1

tsconfig.json

"compilerOptions": {
  ......
  "lib": [
    ......
    "scripthost"
  ]
}