shroom - HTML5 Room Rendering Engine for Retros [ALPHA RELEASE]

Johnix

Member
Dec 14, 2020
3
27


Hello guys,

I want to introduce you to a library I created for the browser.
The library is called shroom, and it enables the users of the library to render everything surrounding Habbo rooms.
This includes the Room itself, Avatars, Furniture & Animations.

Why not another HTML5 Client?​

Shroom is intentially not another full client implementation which works with emulators. The scope of shroom is to provide developers the ability to create a HTML5 client by their own, without the hassle of implementing their own room rendering logic, as this is by far the hardest part. Developers can focus on making their client feel unique and focus on new features.

Other use cases intended​

Since shroom is without any client specific code, you can use it for whatever.
What I could think of are the following use cases:
  • Catalog Furniture Preview
  • Furniture Editing Tool with a preview
  • Cool and unique registration page
and I'm not really a creative person. So I'm curious on what you guys can come up with :)

Features​

  • Standalone Avatar Rendering
  • Furniture Rendering with animations
  • Furniture Event Handling
  • Room Textures (Floors, Walls & Landscapes)
  • Room Rendering based on Tilemap
  • Pixel perfect hit detection
  • Tile Cursor
  • Furniture Placeholder while loading
and probably some more.

Demo​

Here a room rendered with shroom.


Example Code​

Here how a really simple room would be declared
JavaScript:
import * as PIXI from "pixi.js";

import { Room, FloorFurniture, Avatar, Shroom } from "@jankuss/shroom";

const view = document.querySelector("#root") as HTMLCanvasElement;
const application = new PIXI.Application({ view });

const shroom = Shroom.create({ application, resourcePath: "./resources" });
const room = Room.create(shroom, {
  tilemap: `
    0000
    0000
    0000
   `,
});

const furni = new FloorFurniture({
  roomX: 0,
  roomY: 0,
  roomZ: 0,
  direction: 4,
  type: "club_sofa",
});

const avatar = new Avatar({
  look: "hd-180-1.hr-100-61.ch-210-66.lg-280-110.sh-305-62",
  direction: 4,
  roomX: 0,
  roomY: 0,
  roomZ: 0,
});

avatar.action = "sit";

room.addRoomObject(furni);
room.addRoomObject(avatar);

room.x = 100;
room.y = 200;

application.stage.addChild(room);

Technologies​

Shroom is made in and for PIXI.JS. The project is fully written in TypeScript.

Goal​

My personal goal is to see some HTML5 clients popup with shroom at their core. With the end of flash and the release of shroom, we have the best opportunity to innovate retros and make them stand out from the vanilla version.

Fully Open Source​

Shroom is fully open source and in active development right now. There is still a lot of stuff to be done.
The good news is: It is already released and published.

The project is released under a LGPL 3.0 license, which means when you make changes to the project itself, you have to make them publicly available.
I want this to be a community effort and want everybody to benefit from the core code.
If you are just a library user and just consume the package, you don't have to worry about the license. Your code stays yours.

GitHub​

I would greatly appreciate if you star and contribute to the project on GitHub.
The repository can be found here:


Install with npm​

The shroom package is published on npm.
You can find it here:


Documentation & Installation Instructions​

If you want to use shroom in your project check our documentation here:


Discord​

We have a development discord where we can give support and notify you about new releases.
You can join it here:



I would love if you try it out and and give your feedback​

 

CosmoPeak

PeakRP.com
May 15, 2016
269
257
Glad to see it here! This is one of the most promising projects in my opinion. Glad there's still developers willing to work open source, and I've seen a lot of good come from it already. Looking forward to seeing where this goes and what the community can do with it.
 

Sledmore

Chaturbate Livestreamer
Staff member
FindRetros Moderator
Jul 24, 2010
5,148
3,786
Hands down one of the most exciting developments I've seen for the last couple years. Love the approach too, extremely easy to get working with - implemented it into a project for testing and had no issues with it as of yet.

Will following this closely!
 

Parsov

Member
May 18, 2016
301
188
I love how everything is well documented so people can learn to use it easier and quicker. Code is neat and understandable even for someone who has never used the language.
Very easy to setup. Definetly will be putting this to use properly in the nearest future.
Thanks for this awesome contribution everything is in order as it is supposed to be very professional.
 

Berk

berkibap#0738
Developer
Oct 17, 2015
855
184
As I have stated in your DMs and server, this is truely amazing. I love it, and there's no such thing left to say. Good job!
 

Johnix

Member
Dec 14, 2020
3
27
Release v0.2.0

Today we release shroom v0.2.0.
In this release, we have a lot of new additions and improvements.

Thanks to all the people, who created issues, pull requests and donated to the project. Without you the project would be a lot harder!

Some of the new features:

Avatar Rendering

The avatar rendering process had to be refactored. Now it is almost identical to the original flash client rendering of avatars. Here an example of avatars with multiple different actions and items.



Item Selection

The visualization of selected items has been added.



Here the changelog relative to the last post I made.

Code:
### Added

- `Room` improvements
  - `removeRoomObject` method to remove an object from a room
  - `roomObjects` to access all present room objects
- Ability to dump and use furniture when revision is not set
- Add `move` method for moving `FloorFurniture` and `Avatar` objects
- Add `RoomCamera` class for handling drag, drop & snapback for a `Room` (thanks @mtwzim)
- Highlight State for Furniture
- Ability to fetch furniture by id
- Furniture property for alpha (thanks @sindreslungaard)
- **Avatar Refactor**

  Large parts of the avatar rendering has been refactored to match the vanilla flash rendering of avatars.
  This means:

  - Easy handling of **all** actions through `addAction`, `removeAction` and `hasAction`
  - Loading and display of avatar items

- Expose `MouseEvent` in hit detection through the `mouseEvent` property
- Expose data in `index.bin` through `extradata` on furniture
- Expose valid directions through `validDirections` on furniture

### Changed

- `roomHeight` & `roomWidth` now return the actual height and width of the room
- **BREAKING:** Tile Map Parsing behavior
- Improve furniture movement animations performance

### Fixed

- Cross Origin issue with `HitTexture`
- Regression where landscapes for some walls don't work
- Z-Ordering of furniture on the same tile
- Furniture fetching by id differentiates between wall and floor items
- Fixed cache issue when loading colored furniture
- Tile Map Parser: Allow doors in first column of tilemap
- Cause of random crashes during asset extraction
- Parsing of walls

Last but not least: Example of a big room

Big thanks to @jooas for providing the items for this room.


GitHub:
npm:
 

Markshall

Русский Стандарт
Contributor
Dec 18, 2010
2,621
2,363
I’ve no idea what I’m witnessing here, but it looks cool.

I’m so out of touch with Habbo, what is this project actually achieving? And I mean that in the least possible patronising way, I’m genuinely curious because I’ve not dealt with Habbo in probably over a decade now.
 

Benden

maging ang maganda mamatay
Jun 4, 2010
2,245
1,431
I’ve no idea what I’m witnessing here, but it looks cool.

I’m so out of touch with Habbo, what is this project actually achieving? And I mean that in the least possible patronising way, I’m genuinely curious because I’ve not dealt with Habbo in probably over a decade now.
I'm sure he'll reply with the rundown but from what I can see I think he's building the logic needed to render the rooms with the ability to walk in them etc then what you'll do with this is build your client around it (UI and the works)
 

Johnix

Member
Dec 14, 2020
3
27
I’ve no idea what I’m witnessing here, but it looks cool.

I’m so out of touch with Habbo, what is this project actually achieving? And I mean that in the least possible patronising way, I’m genuinely curious because I’ve not dealt with Habbo in probably over a decade now.
It basically makes it easy for developers to create their own HTML5 client, without them knowing much about how habbo renders avatars, furniture and rooms. Since flash is dead now, this is a good starting point for developing a new retro client.

Version v0.5.1​

Since my last post, a few new minor versions were released.
A lot of new features have been added, and I really can't go into detail for every one.
Thanks for all the contributions and feedback by the community!

I want to highlight one though, which has been released in todays version v0.5.1.
In the new version, an extra command has been added to the CLI. It is called shroom proxy.

This is a utility, so your HTML5 client can talk to your emulator smoothly, without implementing WebSocket handling on the emulator itself.

This works by creating a WebSocket server, which forwards and mirrors all connections and messages to the emulator and vice versa.

Bash:
shroom proxy --target-port 30000 --port 30003

This code would create a WebSocket server for the client at port 30003 and proxies all connections to the emulator at 30000.
Here a grahic hopefully visualizing a bit how the setup will work.
You must be registered for see images attach

You can get this command by running.
Code:
npm install -g @jankuss/shroom


Here the rest of the additions, fixes and changes since my last post:

Code:
### Added

- `shroom proxy` command: Proxy & translate WebSocket messages to something the emulator will understand
  This enables you to communicate with the emulator through websockets, without making any adjustments to
  the emulator itself.
- Option to hide tile cursor in a room with `room.hideTileCursor`
- BaseFurniture now has a onLoad callback, which gets called after the furniture is fully loaded
- Add `headDirection` option for `avatar.walk()`
- Add corner stairs (thanks @tuttarealstep)
- Add `skipCaching` option to `BaseAvatar` to skip unnecessary caching from the AvatarLoader (thanks @somekindadude)
- Customizable furniture visualizations through `furniture.visualization = /*...*/`
- Option to not render body when using `BaseAvatar` (thanks @somekindadude)
- Option to specify `headRotation` for avatars (thanks @somekindadude)
- Add Avatar placeholder when loading
- Furniture will now only use valid directions
- `screenPosition` property for `Avatar`
- Add `BaseAvatar` for rendering avatars without a room
- Add `BaseFurniture` for rendering furniture without a room
- Add `onActiveTileChange` events for detecing hovered tile (useful for furniture placement preview)
- Add ability to share a shroom instance with multiple applications through `Shroom.createShared`
- Furniture will now only use valid directions

### Changed

- Providing no direction in `avatar.walk()` doesn't modify the avatars direction now
- Improve tilemap parsing to handle carriage return in string
- Change default wall color to use the original
- Improve asset dumping behavior (thanks @thereis)

### Fixed

- Display of furniture with special layer offsets for a direction
- Fix coloring of clothing when changing the look
- Avatar displaying behind bed while laying
- Furniture default coloring not being applied
- Fix some furniture layers not showing
- Fix furniture not displaying at all when one asset fails to load
- Furniture animations getting stuck
- Avatar zIndex not respected for HitDetection
- Fix directions for furniture with out of order directions in `visualization.bin`
- Fix behaviors called before `BaseFurniture` initialized
- Fix tile cursor displaying above furniture
- Avatar `onClick` and `onDoubleClick` not firing
- Wall border hiding for some room models where they shouldn't
- Fix bug in AvatarSprites when updating without being mounted
- Fix wall display for some room models
- Fix alpha for furniture
- Tile Cursor now shows above flooring items
- Fix `RoomCamera` drag stopping when going over dom elements
- Fix `RoomCamera` drag passing through other PIXI elements
- Fix Avatar hair clipping through hats
- Fix Avatar sleeves for some T-Shirts because library wasn't detected
- Fix animations for some furnitures
- Fix wall border showing for tiles on a higher level than the wall (thanks @tuttarealstep)
 

Haid

Festive Donator
Dec 20, 2011
350
414
I use it, really cool. Good luck, Johnix.
I hope u dont stop working and it doesnt die
He's very contactable via discord and continues to work on the project and take on suggestions daily but, should this change for whatever reason, it's the benefit of an open source project that anyone can contribute to and work on.

With the situation Habbo is in hopefully we'll see more of this to come, it really could revitalize what was a very stale scene.
 

Pirate

New Member
Apr 25, 2020
7
1
He's very contactable via discord and continues to work on the project and take on suggestions daily but, should this change for whatever reason, it's the benefit of an open source project that anyone can contribute to and work on.

With the situation Habbo is in hopefully we'll see more of this to come, it really could revitalize what was a very stale scene.
Dude, I totally agree with you. This project has enormous potential even if Jonix stops working on it.
Soon more players will play retro. And that is, those who joined through the Habbo commercial. Most of them will go into the big retro.
For they will not be satisfied with the Habbo system, which only forces them to give money, do not provide a quality product in return, for players.
 

Users who are viewing this thread

Top