Spritesheets breaking change

dominx99

Hello,

Were there breaking changes related to sprite sheets?
On the last version beta-17 everything worked perfectly and now I had problems with the autoloader for sprite sheets.

I have to set the id & image for every spritesheet, before it was not required. Is it deliberate change?
2.. After updating to the latest version, check the image:

EDIT: I suppose that changes to the hitbox broke it because changing the hitbox does nothing.

Samarium

Thanks, I'll look into it

I have to set the id & image for every spritesheet, before it was not required. Is it deliberate change?

Id and image are not mandatory

dominx99

Samarium

I get also this exception to the server console:

TypeError: number 32 is not iterable (cannot read property Symbol(Symbol.iterator))

  - virtual-main-server.ts:29 __vite_ssr_import_5__.default.onConnected
    /workspace/rpg/v4/virtual-main-server.ts:29:26

  - task_queues:95 processTicksAndRejections
    node:internal/process/task_queues:95:5

  - async Promise.all

  - Player.ts:808 ComponentManager.execMethod
    [v4]/[@rpgjs]/server/src/Player/Player.ts:808:19

Where 32 is my hitbox

[start]
    map = 'map1'
    hitbox = [32, 32]

Samarium

That's right,

In the meantime, in the onConnected() hook:

const player = {
     onConnected(player: RpgPlayer) {
        player.setHitbox(32, 32)
    }
}

dominx99

Samarium

I already tried that, but unfortunately, it does not solve the problem.
I have to set id & image I do not know why for the @Spritesheet decorator.
And I see only part of my hero without any errors and with the same configuration as before updating to the latest version

If you won't be able to reproduce it. I will try to prepare steps to reproduce it tomorrow.

Samarium

I updated to an rc.3 version.

I can't quite reproduce the problem otherwise.

dominx99

Samarium

Ok I prepared steps to reproduce because unfortunately on the latest version it does not work for me.

Install the latest version
Add new file characters/heroes/hero.png

Add new file characters/heroes/hero.ts

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

function getFrameYForDirection(direction: Direction) {
    switch (direction) {
        case Direction.Up:
            return 0;
        case Direction.Down:
            return 2;
        case Direction.Left:
            return 1;
        case Direction.Right:
            return 3;
    }
}

const to = (direction: Direction, length: number) => {
    const array: any = []
    let k = 1
    for (let i=0 ; i < length ; i++) {
        array.push({ time: k * 3, frameX: i, frameY: getFrameYForDirection(direction) })
        k++
    }
    return array
}

@Spritesheet({
    framesWidth: 9,
    framesHeight: 4,
    width: 576,
    height: 256,
    rectWidth: 64,
    rectHeight: 64,
    spriteRealSize: {
        width: 48,
        height: 52,
    },
    textures: {
        [Animation.Stand]: {
            animations: direction => [[{ time: 0, frameX: 5, frameY: getFrameYForDirection(direction) }]],
        },
        [Animation.Walk]: {
            animations: direction => [to(direction, 9)]
        },
    },
})
export default class Hero {}

I take only 576x256 pixels from the image

Move female.png & characters.ts to characters/npc/(female.png, characters.ts)
Set any hitbox

Result:
Client console:

RpgClientEngine.ts:278 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'startsWith')
    at RpgClientEngine.getResourceUrl (RpgClientEngine.ts:278:20)
    at _initResource (Resources.ts:36:37)
    at _initSpritesheet (Spritesheets.ts:7:12)
    at RpgClientEngine.addResource (RpgClientEngine.ts:193:9)
    at RpgClientEngine.addSpriteSheet (RpgClientEngine.ts:242:14)
    at RpgClientEngine._init (RpgClientEngine.ts:169:14)
    at async RpgClientEngine.start (RpgClientEngine.ts:303:9)

Then add id & image to hero.ts

    id: 'hero',
    image: './hero.png',

Result:
result

Also there are random exceptions in server console:

TypeError: Cannot read properties of undefined (reading 'boundingMap')

  - AbstractObject.ts:601 ComponentManager.isCollided
    [v6]/[@rpgjs]/common/src/AbstractObject.ts:601:46

  - Player.ts:458 ComponentManager.teleport
    [v6]/[@rpgjs]/server/src/Player/Player.ts:458:20

  - Map.ts:251 SceneMap.changeMap
    [v6]/[@rpgjs]/server/src/Scenes/Map.ts:251:26

  - task_queues:95 processTicksAndRejections
    node:internal/process/task_queues:95:5

  - virtual-main-server.ts:27 __vite_ssr_import_2__.default.onConnected
    /workspace/rpg/v6/virtual-main-server.ts:27:5

  - async Promise.all

  - Player.ts:808 ComponentManager.execMethod
    [v6]/[@rpgjs]/server/src/Player/Player.ts:808:19

I don't know if it is related to the issue.

Changing the hitbox does not help.

I suppose that changing the hitbox is not synced to the Spritesheet (?) because my hero spritesheet is 64x64 and I assume that it is still treated as 16x16

Samarium

In fact, a folder must contain a single format of spritesheets. If there are several types of spritesheet, then you need to create other folders and add the folder in rpg.toml

spritesheetDirectories = []

In some cases, this logic has been implemented to make importing spritesheets easier. I'll look at how to control this.

dominx99

@Samarium

You are right.
After splitting by sizes to other directories then it works.

Id & image properties are required when spritesheet directory has nested directories.

Samarium

dominx99 Thanks, I'll have a look at how to make this structure simpler.

Samarium

On the latest version, it's possible to have a spritesheets folder and set each subfolder containing spritesheets to its own format (one folder = one format).

dominx99

Great, thank you