embedding a phaser 3 game into an existing mithril website

Question

I have been trying to get phaser 3 to work in an existing mithril website. All of the existing phaser 3 examples seem to work 'by magic'. There is no javascript code that mounts the phaser game into your DOM. Searching gets me nowhere. Even the 'modern' tutorial seems to just load the js and boom there's a game.

How do I incorporate a phaser game into an existing mithril framework? I can mount a pixi canvas as simply as this:

import * as PIXI from 'pixi.js'

app = new PIXI.Application 800, 600,
  backgroundColor: 0x1099bb

basicText = new PIXI.Text('Basic text in pixi')
basicText.x = 30
basicText.y = 90

app.stage.addChild basicText

export class BPScreen
  view: ->
    m '#balloon-pop',
      oncreate: ({ dom })->
        dom.appendChild app.view

Can I accomplish this with Phaser 3?

Note this is in CoffeeScript. – Jim Hessin Aug 18 '18 at 19:50 — Jim Hessin, Aug 18 '18 at 19:50

score 0 · Accepted Answer · answered Aug 19 '18 at 06:55

0

In the config for the phaser game there is a property called parent where you can pass the id of a parent element, such as a div.

So an example config is:

const config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    ...
    [other config options]
};

then in the HTML you would have something like

<div id="gameDiv"></div>

answered Aug 19 '18 at 06:55

Fabadiculous

554
6
11

I went with the CE version and this works great. The docs are a bit sketchy for V3. – Jim Hessin Aug 20 '18 at 18:06
The above should also work for V3. Phaser 3 docs are here: https://photonstorm.github.io/phaser3-docs/index.html – Fabadiculous Aug 20 '18 at 20:55
I know but I didn’t realize sounds wouldn’t work in V3 yet. Kind of an important feature. – Jim Hessin Aug 21 '18 at 00:02

embedding a phaser 3 game into an existing mithril website

1 Answers1