jankuss / shroom Goto Github PK
View Code? Open in Web Editor NEWRoom Rendering Engine for Retros
Home Page: https://jankuss.github.io/shroom/docs
License: GNU Lesser General Public License v3.0
Room Rendering Engine for Retros
Home Page: https://jankuss.github.io/shroom/docs
License: GNU Lesser General Public License v3.0
Need an option to convert a screen pixel position to the room tile
e.g. for use in on mouse move when placing furni
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.
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.
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.
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.
When updating the BaseAvatar lookOptions after loading a first avatar, different parts get merged and the figure is wrong.
Left to right:
hr-3163-39.hd-180-2.lg-3202-1322-1329.ch-215-1331
lg-3202-1322-1329.hr-3163-39.ch-215-93.ha-1009-93.hd-180-2
Then in the 3rd column:
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);
});
}
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
.
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 Furnitures which have horizontally flipped Sprites, the click events are not handled properly.
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.
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.
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
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.
Avatar rendering needs a separate head rotation option from the whole body rotation.
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.
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.
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.
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.
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
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?
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
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):
const avatar = new Avatar();
const camera = new RoomCamera();
camera.avatar = avatar;
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.
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"
});
BaseAvatar
already have a way to receive a onload
callback to get notified when the avatar is loaded.
BaseFurniture should have this ability aswell.
In habbo, if you keep pressed alt you can drag item through room tiles to change furni position
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
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.
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?
It would be useful if the display height and width of the FloorFurniture.
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
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.
Developers need a way to access which wall the cursor is over and the position, so wall placement can be implemented.
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)
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.
Make furniture directions exposed so that you can get which the next directions would be.
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.
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));
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.