nuxtjs-phaser
TypeScript icon, indicating that this package has built-in type declarations

3.0.17 • Public • Published

Nuxt Phaser

workflow

This plugin empowers your game using Vue/Nuxt.

Why Vue and Nuxt?

With Vue/Nuxt you can make web development simple and powerful, using these features:

  • Build
  • Tests
  • Plugins (like Workbox, GTM, Adsense, ...)

Setup

  • Add nuxtjs-phaser dependency using yarn or npm to your project
npm install nuxtjs-phaser --save
yarn add nuxtjs-phaser
  • Add nuxtjs-phaser to plugins section of nuxt.config.js
  plugins: [
      { src: 'node_modules/nuxtjs-phaser', mode: 'client' }
  ],

Usage

Loading phaser manually

You can load phaser on your component, where and how you want:

const myGame = new Phaser.Game()
this.$phaser.initialize(myGame)

Loading phaser by component

You can load phaser using vue component:

import PhaserGame from 'nuxtjs-phaser/phaserGame.vue'

<div>
    <PhaserGame :createGame="createGame" />
<div>

Phaser Events

Phaser uses has own Event Emitter, this plugin allows you to emit and listen to events between Vue (Nuxt) and Phaser.

// listen events
this.$phaser.eventEmitter.addListener('jump', ({ superJump = false }) => {
  myPlayer.jump(superJump)
}, this)

// emit events with args
this.$phaser.eventEmitter.emit('jump', { superJump: false })

Built-in Events

  • pause

Pause a scene.

// emit events with args
this.$phaser.eventEmitter.emit('pause', 'level')
  • resume

Resume a scene.

// emit events with args
this.$phaser.eventEmitter.emit('resume', 'level')
  • restart

Restart a scene.

// emit events with args
this.$phaser.eventEmitter.emit('restart', 'default')

Project sample

Check out this project sample.

Nuxt example

Nuxt example

Articles

Readme

Keywords

Package Sidebar

Install

npm i nuxtjs-phaser

Weekly Downloads

36

Version

3.0.17

License

MIT

Unpacked Size

5.87 kB

Total Files

15

Last publish

Collaborators

  • williampsena