Composing sprite animations (modular clothes)

welch

Hey all,

Followed along with the Sprite Guide to create some character animation / effects, which was super rad! Had a question pop up though...

I've got a character kit that's modular, meaning different layers for capes / body / clothes / weapons / etc, and I'd like to make those "pluggable" based on equiped inventory. Has anyone done this before? Is there a way to layer multiple png files into an animation?

Any thoughts or suggestions would be appreciated. Happy to provide more info if helpful also. Thanks!

Samarium

Hello,

It is possible. If you have images with the identifiers "body" and "shield", then you can assign an array in the setGrapĥic method

player.setGraphic(['body', 'shield'])

And you can animate them all at once:

player.showAnimation(['body', 'shield'], 'attack', true) // You have to create the "attack" animation on the client side

Since version 3.0.0-rc

welch

I thought I had seen it somewhere! Rad! And thanks for the quick turn around time on an answer!

One last question: if I have like 90 of these images, will Webpack combine them all? Or will there be 90 fetches when the client loads (or at runtime, when first assigned)?

Figure I can track and see in network tab, but worth asking here for any insights / tips (and while I'm stuck at work for a bit)

Samarium

welch

90 fetches and then cached 🙂

welch

Thanks! This worked out great! I feel like my characters are stuttering a bit on the animations but overall super excited!

So is it possible to dynamically create sprites and layer them at runtime? Say, requiring them from a mounted temp folder or something? Or does it need to be there at compile time for webpack

Samarium

Hello,

You can use the addSpriteSheet()method.

You can run it on the client side (you decide when)

Example (in src/modules/main/client/index.ts)

import { RpgClient, RpgClientEngine, RpgModule } from '@rpgjs/client'

@RpgModule<RpgClient>({ 
    engine: {
        onStart(engine: RpgClientEngine) {
            engine.addSpriteSheet('<url>', 'my-id')
        }
    }
})
export default class RpgClientModuleEngine {}

<url> can be a URL to a local folder, or an HTTP request