xstate in game dev

[Handzo]

Hello!

What I am trying to do:

I want to make platform for different games based on xstate.
The root machine responsible for errorHandling, loading, starting, stopping specific game instance.
Game is another machine with nested ones.

Workflow example:
platform_machine:

{
    id: 'platform_machine',
    initial: 'loading',
    states: {
        loading: {
            invoke: {
                src: 'loadingService',
            },
            onDone: 'running'
        },
        running: {
            invoke: {
                src: 'gameService'
            },
            onDone: 'exit',
        },
        exit: {
            type: 'final'
        },
    }
}

Starting service

const service = interpret(platformMachine.withConfig({
    services: {
        loadingService: loadingService,
        gameService: gameService
    }
}))
.start()

Platform machine loading resources, then run specific game.
loadingService can be promise or callback, gameService - another machine with actions.

Simplified game machine config:

{
    id: 'game',
    initial: 'idle',
    states: {
        idle: {
            on: {
                START: 'game'
            }
        },
        game: {
            entry: 'onGameStart'
        },
        exit: {
            type: 'final'
        }
    }
}

Game

import { createMachine } from 'xstate';

export default class Game extends DisplayObject {
    buildMachine() {
        return createMachine(config, {
            actions: {
                onGameStart: this.onGameStart.bind(this)
            }
        });
    }

    onGameStart() {
        /// ....
    }
}

1. Does xstate suites for my goals?
2. How should I change machine configs?
3. How can I send 'START' event and other ones out of Game class?

[Andarist]

Does xstate suites for my goals?

Yes, XState can be used to design games - we know several ppl using it this way.

How should I change machine configs?

I dont understand your question - this is specific to the project you are working on.

How can I send 'START' event and other ones out of Game class?

A machine in XState is like a template for a running services. You could compare it to being a class and to make its instances you can use the interpret API which will return an Interpreter instance to u which has a send method. Its possible to use transition method of the Machine but its a pure function so no actions etc will be fired and u would end up reimplementing the interpreter

[Handzo]

Runnable demo what I want to do

import { createMachine, interpret, assign } from 'xstate';

const mainConfig = {
    id: 'platform_machine',
    initial: 'loading',
    states: {
        loading: {
            invoke: {
                src: 'loadingService',
                onDone: 'running'
            },
        },
        running: {
            invoke: {
                src: 'gameService',
                onDone: 'exit',
            },
        },
        exit: {
            type: 'final'
        },
    }
};

const gameConfig = {
    id: 'game',
    initial: 'idle',
    states: {
        idle: {
            entry: () => console.log('entry idle state'),
            on: {
                START: 'game'
            }
        },
        game: {
            entry: 'onGameStart'
        },
        exit: {
            type: 'final'
        }
    }
};

class Game {
    buildMachine() {
        return createMachine(gameConfig, {
            actions: {
                onGameStart: this.onGameStart.bind(this)
            }
        });
    }

    onGameStart() {
        console.log('game started');
    }

    startGame() {
        console.log('how to send START event to make transition to game state');
    }
}

const game = new Game();

const mainMachine = createMachine(mainConfig);

const service = interpret(mainMachine.withConfig({
    services: {
        loadingService: (context, event) => new Promise((resolve, reject) => resolve()),
        gameService: game.buildMachine()
    }
}));
service
    .onTransition(state => console.log(state))
    .start();

setTimeout(() => {
    game.startGame();
}, 2000);

[Handzo]

Your Game class should probably hold an instance of the service:

class Game {
  constructor() {
    this.service = interpret(this.buildMachine());
  }
  // ...

  startGame() {
    this.service.send('START');
  }
}

Thanks, I although thought about it. I was trying to achieve this in fancy way)
But what if Game class has a button based on another machine config. I saw examples for react, vue... they are using hooks 'useMachine'.

function Toggle() {
  const [current, send] = useMachine(toggleMachine);

  return (
    <button onClick={() => send('TOGGLE')}>
      {current.matches('inactive') ? 'Off' : 'On'}
    </button>
  );
}

How can I get similar behaviour for my WebGL UI?

[Handzo]

May be i shouldn't use options.services for my game. Another solution is to make gameService as a hierarchical state nodes. Would it be a good practice?

[davidkpiano]

I was trying to achieve this in fancy way

Don't try to achieve this in a fancy way. Do it in the way that works first, like what I showed you.

Another solution is to make gameService as a hierarchical state nodes.

This doesn't make sense; a service is not a state node.

[Handzo]

Thank you all! I think I get the point.