Wrapping Promises in PhaserJS

Useful for managing asynchronous operations in HTML5 game dev


2 min read

Wrapping Promises in PhaserJS can be a dead useful tool for your game dev arsenal.

One of the major advantages is many function calls in Phaser occur over a set amount of time, and fire events and stuff when they complete.

Nothing wrong with this approach, it's just sometimes being able to chain .then() calls, and use async / await to make asynchronous operations, synchronous, can be very helpful.

Here's a simple example of a function that can be chained and will fire it's .then() or pass a return value into an awaiting variable:

syncYoyoAnim(animKey) {
  this.animationOverride = true;

  return new Promise((resolve) => {
      key: animKey,
      yoyo: true,
      repeat: 0

    this.once('animationcomplete', () => {
      this.animationOverride = false;


This function can then be used in situations such as this:

collectFruit(player, fruit) {
  if (!fruit.getData('isCollected')) {
    fruit.setData('isCollected', true);

      targets: fruit,
      alpha: 0,
      y: fruit.y - 75,
      duration: 300,
      onComplete: () => {
        player.syncYoyoAnim('death').then(() => {
          // Do other stuff

Let me know in the comments where you find useful little places to introduce Promises into PhaserJS!

PS: I'm working hard on my entry to the thirdweb x Hashnode hackathon. It's coming together super well I'm hyped. Also writing an article describing the development process.

As always, keep coding!