How to encapsulate construction of complex sprite collections?

Phaser 3
1

It looks like I’ll be creating a lot of GameObjects.Containers to manage small collections of sprites. Creating and assembling those by hand is clunky and error-prone, so I’m hoping for some advice or inspiration as I plan tools.

Each of the 'toons in my game will be a collection of separate raster graphics, so that the different parts of each avatar can be layered properly and animated independently.

So, a baseball player (seen from the front) might be composed of two images:

  • a human silhouette
  • a baseball bat

Or, a sailing ship (seen from above) might be three images:

  • the ship’s hull
  • the sail
  • the crow’s nest (not animated, but superimposed on the sail)

And so on, with more sophisticated avatars being composed of many more individual images.

I’m constructing these collections by creating physics sprites and adding each to a GameObjects.Container, with one container per avatar.

As I said, doing it by hand is clunky. And the positioning math, although not hard, is a persistent pain, in part because each Container introduces a new local coordinate space. I think that will be really helpful at runtime, but it means that when I first assemble each of these little “paper doll” avatars I have to transform the raw pixel coordinates from my graphics editor if the avatar’s proper origin is not the exact center (which it often will not be).

The process should be the same no matter how many images the avatar uses, so what I think I want is a function that will construct and return one of these things from a list of image assets along with optional positioning info copied raw from any raster editor. The computer should do the math, and some kind of loop should do the assembly, and then return the construct along with any rigging aids.

Maybe that would look something like:

new ActionFigure(
    assetName [, customPosition] [, customCenterpoint]
    [, ...] // repeat for each asset
)

let batter = new ActionFigure(
    'player-jersey',
    // numbers are raw pixel values taken directly from the graphics editor's grid system
    'player-hat', new Point(0, -10),
    'bat', new Point(-5, 3), new Point(1, 2)
)

let { container, ...orderedSprites } = batter

Complicating all of this is that Phaser Scenes have some magic mixed into them such that we can do thisScene.physics.add.sprite(...) and thisScene.add.container(...), and the scene reference is provided to those constructors for us. I like that, but I’m not sure how we’re supposed to continue along those lines. I don’t know how to install a new scene-linked capability, like thisScene.add.actionFigure(...). And I’m going to need to use some of those capabilities in this new tooling. For example, it’d be nice if I could new-up an ActionFigure in my create method, and it would automatically add all the needed images to the scene’s preloader.

Is everyone just subclassing Phaser.Scene and loading it up with their custom tooling?

Thanks for any feedback or suggestions.

2

Look at http://labs.phaser.io/edit.html?src=src/game%20objects/images/custom%20game%20object.js and https://github.com/photonstorm/phaser/blob/v3.51.0/src/gameobjects/container/ContainerFactory.js.

1 Like