Jump to content

Destroying States (Or: how to fuse two phaser games in one game.js)


Recommended Posts

By a client's request, I'm supposed to make two phaser games launch from a single html. I decided to do this via the game.js that (our) phaser template spits out because the games trade data between each other. Here's my code for game.js:

import GameOneBoot from './states/GameOne/boot';
import GameOnePreload from './states/GameOne/preload';
import GameOneTitle from './states/GameOne/title';
import GameOneGameplay from './states/GameOne/gameplay';
import GameTwoBoot from './states/GameTwo/boot';
// etc, etc...
class Game extends Phaser.Game {
    constructor() {
        super(config.gameWidth, config.gameHeight, Phaser.AUTO, 'game');
    startGameOne() {
        this.state.add('GameOneBoot', GameOneBoot);
        this.state.add('GameOnePreload', GameOnePreload);
        this.state.add('GameOneGameplay', GameOneGameplay);
        this.state.add('GameOnePostgame', GameOnePostgame);
    startGameTwo() {
        // Same as GameOne, but GameTwo
    destroyStates() {
        document.getElementById('mainOverlay').style.display = 'block';
        console.log("States destroyed!");
var phaserGame = new Game();
window.globalGame = phaserGame;

The functions startGameOne and startGameTwo are triggered by an HTML menu, so the player can pick what he wants to play right there.

However, I've hit a snag. The function destroyStates (called after a game over screen) does indeed return the player the HTML menu (with a blackened-out-but-still-visible empty game screen behind it), but clicking the menu to play either game again triggers this error:
game.js:3368 Uncaught TypeError: Cannot read property 'stage' of null
    at c.StateManager.a [as start] (game.js:3368)

I thought about just restarting the state, but part of the games change (such as assets) depending on objectives completed from the other one. I also tried not destroying the states, which worked, but the game is still in the background, and I'm not sure running


this.state.add('GameOneBoot', GameOneBoot);

over and over again is any good. Anything else I can try? Perhaps a way to restart game.js itself?

Link to comment
Share on other sites

  • 2 weeks later...

Why don't you create differents states corresponding to your  two games ?





Boot[0] and Boot[1]

I use a parameter.js who stock the variables and parameters at the first position in my index.html. Like this, all my states have access to this data. When is possible I avoid the use of "this" (ambiguous) and prefer object parameter => it's powerfull. Have you understood ? (Not Englishmen ! :) )


Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...