In Furnitures which have horizontally flipped Sprites, the click events are not handled properly.

Using the same floor map in both clients, the Flash client considers 3,5 in to be in the doorway, however Shroom's implementation decides it is where the avatar appears in this image.

Then, using the onTileClick function, clicking the avatar's square has position roomX: 4, roomY: 5 (not the same coordinates as specified to create the avatar).

Room map (model_a):
xxxxxxxxxxxx xxxx00000000 xxxx00000000 xxxx00000000 xxxx00000000 xxxx00000000 xxxx00000000 xxxx00000000 xxxx00000000 xxxx00000000 xxxx00000000 xxxx00000000 xxxx00000000 xxxx00000000 xxxxxxxxxxxx xxxxxxxxxxxx

Trying to use certain clothing items in the figure string throws an error.

Using ch-215-1331, for example as the chest item (short sleved t-shirt) will cause Invalid library h_std_ls_2_0_0 ls

Is it possible to be able to create a single Shroom instance and use that one for multiple PIXI applications?

By passing the PIXI application to the Room create function instead of the Shroom create function means we can use multiple canvas without having to re-create Shroom for other instances such as preview in catalog or inventory, as well as being able to use Shroom to get furnidata information (such as file path for icon?) without creating a PIXI application.

In some models, unnecessary walls are generated. I attach photos of some models where this happens.

https://prnt.sc/w6hvlx (model_m)
https://prnt.sc/w6hwpx (model_p)

We should provide an object which handles furniture placement in the room.

There should be the following new classes

• PlacementFloorFurniture (for placement of FloorFurniture)
• PlacementWallFurniture (for placement of WallFurniture)

when the item is dropped on the floor/wall, an event with the placement position should be called.

When a furniture changes position, in certain cases it animates to the next position (pretty much like the Avatar right now).

So we need a method which is called move which takes the new position in the room, and animates the furniture to it.

Some actions on Avatars have minor additions called ExpressionAddition.
These are for example: A floating heart for the Blow action, or for the Idle action zZz.

When updating the BaseAvatar lookOptions after loading a first avatar, different parts get merged and the figure is wrong.

See here:

Left to right:

• 1st avatar is figure hr-3163-39.hd-180-2.lg-3202-1322-1329.ch-215-1331
• 2nd avatar figure is lg-3202-1322-1329.hr-3163-39.ch-215-93.ha-1009-93.hd-180-2

Then in the 3rd column:

• top is starting as avatar 1's figure then changing to avatar 2's figure,
• bottom is starting as avatar 2's figure and changing to avatar 1's figure.

Replicable with the following story:

export function BaseAvatarBroke() {
  return createShroom(({ application, shroom }) => {
    let avatar1 = BaseAvatar.fromShroom(shroom, {
      look: {
        look: 'hr-3163-39.hd-180-2.lg-3202-1322-1329.ch-215-1331',
        actions: new Set<AvatarAction>().add(AvatarAction.GestureSmile),
        direction: 3,
      },
      position: {
        x: 0,
        y: 150
      },
      zIndex: 0,
      onLoad: () => {
      }
    });
    let avatar2 = BaseAvatar.fromShroom(shroom, {
      look: {
        look: 'lg-3202-1322-1329.hr-3163-39.ch-215-93.ha-1009-93.hd-180-2',
        actions: new Set<AvatarAction>().add(AvatarAction.GestureSmile),
        direction: 3,
      },
      position: {
        x: 100,
        y: 150
      },
      zIndex: 0,
      onLoad: () => {
      }
    });
    let avatar3 = BaseAvatar.fromShroom(shroom, {
      look: {
        look: 'hr-3163-39.hd-180-2.lg-3202-1322-1329.ch-215-1331',
        actions: new Set<AvatarAction>().add(AvatarAction.GestureSmile),
        direction: 3,
      },
      position: {
        x: 200,
        y: 150
      },
      zIndex: 0,
      onLoad: () => {
        avatar3.lookOptions = {
          look: 'lg-3202-1322-1329.hr-3163-39.ch-215-93.ha-1009-93.hd-180-2',
          actions: new Set<AvatarAction>().add(AvatarAction.GestureSmile),
          direction: 3,
        }
      }
    });
    let avatar4 = BaseAvatar.fromShroom(shroom, {
      look: {
        look: 'lg-3202-1322-1329.hr-3163-39.ch-215-93.ha-1009-93.hd-180-2',
        actions: new Set<AvatarAction>().add(AvatarAction.GestureSmile),
        direction: 3,
      },
      position: {
        x: 200,
        y: 250
      },
      zIndex: 0,
      onLoad: () => {
        avatar4.lookOptions = {
          look: 'hr-3163-39.hd-180-2.lg-3202-1322-1329.ch-215-1331',
          actions: new Set<AvatarAction>().add(AvatarAction.GestureSmile),
          direction: 3,
        }
      }
    });

    application.stage.addChild(avatar1);
    application.stage.addChild(avatar2);
    application.stage.addChild(avatar3);
    application.stage.addChild(avatar4);
  });
}

Avatars to be able to hold hand items like so:

Currently none of the original MouseEvent data is included in the HitEvent dispatched by shroom when clicking on furniture and avatars. It would be useful to have access to this data, especially to check whether or not it was a left, middle or right mouse button click.

Could we just add the original MouseEvent as a property to HitEvent?

Since the current habbo emulators don't send the furniture className but the sprite id, it would be nice to be able to create furnitures by id instead.

new Furniture({
id: 13
});
Or
new Furniture({
type: "shelves_norja"
});

Binary files are not getting dumped by the asset dumper for a user.
This was reported by @mtwzim

SWFTools:

$ swfextract --version
swfextract - part of swftools 0.9.0

$ swfdump --version
swfdump - part of swftools 0.9.0

Operating System: Windows 10

Avatar rendering needs a separate head rotation option from the whole body rotation.

BaseAvatar already have a way to receive a onload callback to get notified when the avatar is loaded.
BaseFurniture should have this ability aswell.

Landscapes are beside wall and floor textures another way to customize the look of the room.
Landscapes can be seen through windows.

By inspecting the assets of a window, I could find a mask image. This is used to mask the landscape of the room so parts not contained by a window will not render.

https://i.gyazo.com/3e45c97c76bab750af990f8818e9ba9b.mp4

I'm using a Container class to build the "Create Room" window, the Create Room Container and the Room are in a main container.

It would be handy if we periodically upload the result of the command shroom dump to an external server.
This should make the installation process easier, since the user doesn't need swftools to create their own dump and should also be much faster.

Need an option to convert a screen pixel position to the room tile
e.g. for use in on mouse move when placing furni

We should provide the meta data in index.bin so developers can add behaviors of furniture.

Example:
edice has a logic attribute with furniture_dice. This means that the furniture should have the dice behavior.
The behavior itself should be coded by developer, since this would be out of scope for this project.

In the future it would be convenient to add the function to apply the gray tint to a selected object. It would be useful for Wired.
This is what I mean: https://prnt.sc/w39ykn

According to the new standards preferred by git and github, which are considering using main instead of master, because "it’s short, it keeps your muscle memory intact, and it translates well across most languages", it would be interesting to rename your main branch of master to main.

You can find the documentation of what I'm talking about here - click

Currently when you use the RoomCamera to drag the room around, if your mouse goes over a dom element such as chats, inventory etc. it stops dragging. I think it should keep letting you drag the room while the mouse is over dom elements.

Viewport allows the drag and drop effect present in habbo rooms to be executed, but as pointed out by @jankuss it may be unnecessary in some cases. As in the "Furni Editor with a Real-Time Preview" or in the catalog.

Basically an encapsulation of the Room would be done as suggested:

const room = Room.create(/* ... */);

app.stage.addChild(new RoomCamera(room));

In habbo, if you keep pressed alt you can drag item through room tiles to change furni position

Make furniture directions exposed so that you can get which the next directions would be.

Shroom:

Flash:

(The tile cursor is a different image)

To improve the experience of initializing a shroom project I would like to add the command.

shroom init

Which initializes a shroom project boilerplate in the current directory (if empty) or in the specified directory.
We can provide the boilerplate in a sub directory of this repository. When shroom init is called, this directory will get cloned and npm install will be run.

Colorable items have a problem with the *0 state.

rare_elephant_statue

rare_elephant_statue*1

rare_elephant_statue*2

There are a variety of effects with different effects on the avatar, such as holding arms up, moving the avatar's position slightly, and often involving animated images.

It would be convenient to pass a texture (already loaded) to the engine to be used to show the user waiting for the look to load.

There should be something to know the real position of the elements in the canvas for create our userstand and chat bubbles positioned correctly according to the room position.

Right now, the WebSocket Server created by shroom proxy only supports normal ws:// protocol. It would be good if we also support the wss:// protocol.

It would be useful if the display height and width of the FloorFurniture.

Some furniture interaction data is stored in the index.bin file (the logic argument). This is required for handling interaction with furniture and parsing extradata correctly. Is it possible to allow access to the item type data from the Floor/Wall Furniture classes?

Just like the rooms of the habbos, the camera moves so that the avatar is in the center of the screen, it is currently possible to just place the room in the center of the screen.

Considering the following challenges (@jankuss):

1. Simple api:

   const avatar = new Avatar();
   const camera = new RoomCamera();
   camera.avatar = avatar;
   

2. Should be optional. RoomCamera should also work with no avatar provided

When certain combination of avatar clothing items are worn, they clip through. e.g. A hat has hair coming through.

Developers need a way to access which wall the cursor is over and the position, so wall placement can be implemented.

In some SWF files, there are tags for assets, which define other resources to load. Right now, due to limitations through swftools, we are not able to extract those.

The way the flash client handles visualization of furniture differs how we do it at the moment.
In the flash client, furniture have a visualization attribute, which specifies which visualization should be used for that furniture.

This approach would be good for special furniture, where the visualization differs from the base furniture.
Also this enables a good support for extensibility, as new visualizations can be added by the user which modify rendering behavior of the furniture.

All animations pause when the tab enters the background, meaning that when the tab is re-opened, all animations queue up and execute.

If, say, a server is sending to move an avatar each 500ms, you get all the queued up movements execute rather than just seeing where the avatar should be at that moment in time.

Right now an important missing piece in the visualization of the room is the door.

A door is a cutout in the wall with a tile, and Avatars can be rendered on it.
The avatars and the Tile should be rendered behind the walls of the room.

Here the Z-Ordering might become an issue, since the walls are part of the background layer and get cached through cacheAsBitmap to increase performance.

So my guess right now is that a new layer behind the Wall & Tile visualization of the room has to be introduced.