https://github.com/TLmaK0/phaser-mvc

MVC for phaser [Deprecated in favour of Witcase]
https://github.com/TLmaK0/phaser-mvc

mvc phaser

Last synced: about 2 months ago
JSON representation

MVC for phaser [Deprecated in favour of Witcase]

• Host: GitHub
• URL: https://github.com/TLmaK0/phaser-mvc
• Owner: TLmaK0
• License: mit
• Created: 2017-10-15T10:54:21.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2018-02-07T16:12:15.000Z (over 6 years ago)
• Last Synced: 2024-05-07T16:20:56.359Z (2 months ago)
• Topics: mvc, phaser
• Language: TypeScript
• Homepage:
• Size: 652 KB
• Stars: 6
• Watchers: 5
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Lists

• awesome-phaser - Phaser MVC - MVC for phaser (Uncategorized / Uncategorized)

README

        
[Deprecated] Please use more general solution provided by [Witcase](https://github.com/TLmaK0/witcase/)

## phaser-mvc

An MVC framework for Phaser.

note: this is only for testing purposes

## install

```npm install phaser-mvc```

## Take a look to examples at [/examples](./examples)

![Pong](examples/pong/pong.png)

![Circus](examples/circus/circus.png)

## How to use

```javascript

// app.ts

import { Bootstrap } from 'phaser-mvc';

import { StartupController } from './controllers/startup_controller';

/*

 * Bootstrap game

 */

window.onload = () => {

  let witcase = Witcase.create();

  witcase.start((baseEngine: BaseEngine)=> {

    const game = new Phaser.Game(

      1000,

      750,

      Phaser.CANVAS,

      'content',

      {

        preload: () => {

          game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;

          game.physics.startSystem(Phaser.Physics.P2JS);

          game.physics.p2.gravity.y = 100

          //wait until Phaser is ready to create first controller

          witcase.defaultAction = Container.get(GameController).startGame;

          baseEngine.preload();

        },

        create: () => {

          baseEngine.create();

        },

        update: baseEngine.update,

        render: baseEngine.render

      }

    );

    return game;

  });

};

```

```javascript

// controllers/startup_controller.ts

import { IViewMap } from 'phaser-mvc';

import { Controller } from 'phaser-mvc';

import { StartupView } from '../views/startup_view';

/**

 * Startup controller

 */

export class StartupController extends Controller {

  private startupView: StartupView;

  constructor(){

    super();

    this.startupView = new StartupView(this);

    this.startupView.welcomeMessage = 'Hello world!';

  }

  public welcome = () => {

    this.startupView.show();

  }

}

```

```javascript

// views/startup_view.ts

import { View } from 'phaser-mvc';

import { Controller, ViewComponentAdder } from 'phaser-mvc';

/**

 * Startup View

 */

export class StartupView extends View {

  public welcomeMessage: string;

  public create(_componentAdder: ViewComponentAdder) {

    this.game.add.text(100,

                       100,

                       this.welcomeMessage,

                       { fill: '#fff' });

  }

```

Update view on model change:

```

  public updateOnModelChange(watchFactory: WatchFactory){

    watchFactory.create(() => this.cannon.angle).subscribe(this.rotateCannon);

  }

  private rotateCannon = (angle: number) => {

    this.cannonSprite.angle = angle;

  }

```

Subscrive controllers to views input events:

```

// view

import { View, ViewComponentAdder, WatchFactory, ViewNotifier } from 'phaser-mvc';

/**

 * Players Keys View

 */

export class PlayerKeysView extends View {

  rotateCannon: ViewNotifier = new ViewNotifier();

  rotateCannonStop: ViewNotifier = new ViewNotifier();

  launchHuman: ViewNotifier = new ViewNotifier();

  public updateOnModelChange(watchFactory: WatchFactory){

    watchFactory.create<[boolean, boolean]>(() => [

      this.game.input.keyboard.isDown(Phaser.Keyboard.LEFT),

      this.game.input.keyboard.isDown(Phaser.Keyboard.RIGHT)

    ]).subscribe(this.moveCannon);

  }

  private moveCannon = (areKeysDown: [boolean, boolean]) => {

    if (areKeysDown[0]) this.rotateCannon.publish('clockwise');

    else if (areKeysDown[1]) this.rotateCannon.publish('counter-clockwise');

    else this.rotateCannonStop.publish();

  }

}

```

```

// Controller

    this.playerKeysView.rotateCannon.subscribe(this.rotateCannon);

    this.playerKeysView.rotateCannonStop.subscribe(this.rotateCannonStop);

    this.playerKeysView.launchHuman.subscribe(this.launchHuman);

```

## License

MIT license; see [LICENSE](./LICENSE).

(c) 2017 by Hugo Freire