modular sprite imports

Boots

Following up on a module for dynamic sprites I have begun on the import stage.

Currently the server supplies an array of all files within the asset directory.

The client then recieves the array and creates an object with the filename as the key and relative file path of the sprite image as the value.

It wraps the path in require and passes the object to the spritesheet decorator as the images property.

However since the require contains an expression webpack does not include these files when bundling for the client.

So on client load there is an error in browser console: Uncaught (in promise) Error: Cannot find module './assets/baseSprite/femaleDarkBody.png'

I've tried to load the spritesheet via the regualr engine method as well as engine.addSpriteSheet(Spritesheet)

Here is the sprite sheet:

import { Spritesheet, Animation, Direction } from '@rpgjs/client'
import getAllFiles from './spriteLoader'

const filesToRequire = () => {
    let obj = {}; 
   
    let result = getAllFiles().then(
        (result) => {
            //console.log("before reduce"+result)
            let test = result.reduce((a, v:{filename:string, path:string}) => ({...a, [v.filename]: require(v.path)}), {})
            return test
            
    })
    
    obj =  result.then((value)=> {return value}) 
    return obj
}


const frameY = direction => {
    return {
        [Direction.Down]: 10,
        [Direction.Left]: 9,
        [Direction.Right]: 11, 
        [Direction.Up]: 8
    }[direction]
}

const frameYAttack = direction => {
    return {
        [Direction.Down]:6,
        [Direction.Left]: 5,
        [Direction.Right]: 7,
        [Direction.Up]: 4
    }[direction]
}

@Spritesheet({
    images:  filesToRequire()
        //{maleWhiteBody: require('./assets/baseSprite/maleWhiteBody.png')}
        //femaleDarkBody: require('./assets/baseSprite/femaleDarkBody.png'),
        //femaleGrayBody: require('./assets/baseSprite/femaleGrayBody.png'),
        //femaleWhiteBody: require('./assets/baseSprite/femaleWhiteBody.png'),
        //femaleGreenBody: require('./assets/baseSprite/femaleGreenBody.png'),
        

    
    , // relative path of image
    framesWidth: 13, // number of frames of the image across the width
    framesHeight: 21, // number of frames of the image across the height
    width: 832, // width of image
    height: 1344, // height of image
    spriteRealSize: {width:32, height:60},
    textures: {
        [Animation.Stand]: {
            animations: direction => [
                [{ time: 0, frameX: 0, frameY: frameY(direction) }]
            ]
        },
        [Animation.Walk]:  {    
            animations: direction => [ 
                    [ 
                        { time: 0, frameX: 1, frameY: frameY(direction) },
                        { time: 5, frameX: 2, frameY: frameY(direction) },
                        { time: 10, frameX: 3, frameY: frameY(direction) },
                        { time: 15, frameX: 4, frameY: frameY(direction) },
                        { time: 20, frameX: 5, frameY: frameY(direction) },
                        { time: 25, frameX: 6, frameY: frameY(direction) },
                        { time: 30, frameX: 7, frameY: frameY(direction) },
                        { time: 25, frameX: 8, frameY: frameY(direction) }
                      
                    ]
                ]
         },
         [Animation.Attack]:  {
            animations: direction => [
                    [ 
                        { time: 0, frameX: 0, frameY: frameYAttack(direction) },
                        { time: 3, frameX: 1, frameY: frameYAttack(direction) },
                        { time: 6, frameX: 2, frameY: frameYAttack(direction) },
                        { time: 9, frameX: 3, frameY: frameYAttack(direction) },
                        { time: 12, frameX: 4, frameY: frameYAttack(direction) },
                        { time: 15, frameX: 5, frameY: frameYAttack(direction) },
                        { time: 18, frameX: 6, frameY: frameYAttack(direction) },
                        { time: 21, frameX: 7, frameY: frameYAttack(direction) },
                        { time: 24, frameX: 8, frameY: frameYAttack(direction) },
                       
                    ]
                ]
         }

    }
})
export class BaseCharacter {}

and my client/index.ts

import { RpgClient, RpgModule, RpgClientEngine } from '@rpgjs/client'
import { BaseCharacter } from './characters/base';



@RpgModule<RpgClient>({ 
    engine: {
        onStart(engine: RpgClientEngine) {
            //engine.addSpriteSheet('./characters/assets/baseSprite/femaleDarkBody.png','femaleDarkBody')
            engine.addSpriteSheet(BaseCharacter)
            
         
        }
    },
    spritesheets: [
        //BaseCharacter
    ],
   
})
export default class RpgClientModuleEngine {}

Boots

Following the guide for addSpriteSheet I changed the require statements to URLs and added a static path server side to serve the files.

It's working now when I enter the object manually into images prop. 🎉🎉

However this function which automatically builds the object is returning a promise object instead of the resolved object, I assume that is why it is still not working?

const filesToRequire = () => {
    let obj = {}; 
   
    let result = getAllFiles().then(
        (result) => {
            //console.log("before reduce"+result)
            let test = result.reduce((a, v:{filename:string, path:string}) => ({...a, [v.filename]:('http://'+window.location.host+v.path)}), {})
            console.log(test)
            return test
            
    })
    
    obj =  result.then((value)=> {return value}) 
    return obj
}

Samarium

Hello,

You can make a function aynchronous

export default async function mySprite() {
    @Spritesheet({
        images:  await filesToRequire(),
        // others properties
    })
    class BaseCharacter {}
    return BaseCharacter
}

and

import { RpgClient, RpgModule, RpgClientEngine } from '@rpgjs/client'
import { mySprite } from './characters/base';

@RpgModule<RpgClient>({ 
    engine: {
        async onStart(engine: RpgClientEngine) {
            engine.addSpriteSheet(await mySprite())
        }
    }
   
})
export default class RpgClientModuleEngine {}

Boots

Thank you! I gave this a try and receiving error that onStart cannot be an async function.

Samarium

Try:

import { RpgClient, RpgModule, RpgClientEngine } from '@rpgjs/client'
import { mySprite } from './characters/base';

@RpgModule<RpgClient>({ 
    engine: {
        onStart(engine: RpgClientEngine) {
           mySprite().then(sprites => engine.addSpriteSheet(sprites))
        }
    }
   
})
export default class RpgClientModuleEngine {}