shroom - HTML5 Room Rendering Engine for Habbo

[Johnix1337]

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

shroom - Room Rendering Engine for Habbo

Hello guys,

after a long hiatus in Habbo development, I want to introduce to you my latest project.
It's a habbo room rendering engine made in and for PIXI.JS.

You may know me because of the Apollo Project of 2014 (which aged pretty badly) by iExit and me (http://forum.ragezone.com/f353/apollo-habbo-html5-base-cms-1086191/), or because of rCMS (http://forum.ragezone.com/f353/rcms-version-2k15-roomcreator-raresets-1102740/)

What is shroom?



Shroom is a Room Rendering Engine Library for Habbo.
The scope of this project is primarily the correct rendering of avatars and items in a room.
It offers an easy API, which abstracts the whole logic of rendering a Habbo room correctly, so developers can focus on creating a unique and beautiful product.


Why a Room Rendering Engine instead of another HTML5 Habbo Client?

When I look into the development section of the forum, there are many promising HTML5 Habbo projects.
Many of them are fully reimplementing the same logic used in other projects and are focusing mainly on UI and new features.

Instead of doing that and investing too much time in a project too large for one person, I want to provide the Retro development community with the tools to create a HTML5 Habbo Client on their own.

Correct display of the room is a challenge

The major issue I saw the projects struggle with was rendering furniture and avatars in a room properly. So thats the issue I want to primarily fix with this project.

Separate Client Implementation and Server

The benefit of a separate room rendering library is, that the server communication and emulation part is completly left open to the developers. You can use an existing emulator with the original packet encoding or code your own protocol.

Allow developers to create their own UI

Developers are also completly open to create their own UI and and give their Retro a unique and beautiful look.

Other use cases intended

Since the library exists completly separate from any real Client, it can be used for other use cases. One I could think of is a Furni Editor with a Real-Time Preview. The benefit is that you can see your furniture existing next to other furniture and avatars to ensure it renders properly.


Goals

• Room, Furniture and Avatar rendering which is exactly like Habbo
• Easy to use API
• Provide a Habbo Asset Dumper to download the required assets
• Provide full interopability for the original Habbo assets

Technologies

This project mainly uses TypeScript & PIXI.JS.
For dumping existing habbo assets `swftools` (swfextract) is used.

Alpha Release
https://www.npmjs.com/package/@jankuss/shroom

I am releasing the project under the LGPL-3.0 license. I think this license is one where the community benefits the most from it, as improvements to the library itself have to be shared. If you are a user of the library, you won't need to worry about anything.


GitHub
The repository can be found here:
https://github.com/jankuss/shroom

If you want to show you support, I would appreciate if you star this project.

Installation Instructions
Everything related on how to install & use shroom can be found under the following url.

https://jankuss.github.io/shroom/docs/

I would love to hear your feedback and I will see you on discord!

 

[Johnix1337]

Small Update

The last few days I spent my time making furniture animations, states and colors work. Here a small demo. Sorry for the bad quality.

Right now, I'm primarily implementing correct floor and wall rendering with textures.

 

[pipitt05000]

Hello dude ! Really Nice work ! Do you use 2D drawing API library, or that's only DOM ?

 

[Johnix1337]

Hello dude ! Really Nice work ! Do you use 2D drawing API library, or that's only DOM ?

Hi pipitt,
your work is epic too!
Thankfully I moved on from doing things with DOM

I use PIXI.JS.

Small Update
- Improved performance of furniture animations
- Improved hit detection by checking the alpha value of the pixel at the interaction position

 

[pel]

Lmao what are u doing here hahaha.
Project's looking good as usual. Personally not a fan of the name, I'm not too big of a fan of shrooms but each to their own. Hope you're enlightened now tho lol

 

[FusionDev]

I think that's a really good project. Im waiting to see what will come out.
Have you any idea of how much time the project will require to be released?

 

[LukeOx]

This sounds really cool, seems like the kind of thing that would be really useful for PeakRP, where we don't use half of Habbo's UI and we could create our own much easier

Looking forward to seeing more about this!

 

[Johnix1337]

I think that's a really good project. Im waiting to see what will come out.Have you any idea of how much time the project will require to be released?

Absolutely no idea
I want to open source the project it as soon as it is in a reasonable state. So let's say a month?

Keep in mind this will be a in-dev version.
The first major release is probably few months away from today. This is only a side project of mine, so I can't invest my life into this..

Small Update
Because of performance issues, I refactored the project a bit. I removed react-pixi as a dependency and I am now doing my own rendering logic in native pixi.js.

I also worked on the correct rendering of walls and floors, which turned out to be a pain in the butt.
Another new thing is rendering of stairs.

 

[Matheeus]

Absolutely no idea
I want to open source the project it as soon as it is in a reasonable state. So let's say a month?

Keep in mind this will be a in-dev version.
The first major release is probably few months away from today. This is only a side project of mine, so I can't invest my life into this..

Small Update
Because of performance issues, I refactored the project a bit. I removed react-pixi as a dependency and I am now doing my own rendering logic in native pixi.js.

I also worked on the correct rendering of walls and floors, which turned out to be a pain in the butt.
Another new thing is rendering of stairs.

Good thing you removed React, as this give us the freedom to select the most appropriate Frontend Framework to build the GUI (React, Vue or Angular) and personally I would really like to integrate this with a Vue powered UI.

 

[Johnix1337]

Good thing you removed React, as this give us the freedom to select the most appropriate Frontend Framework to build the GUI (React, Vue or Angular) and personally I would really like to integrate this with a Vue powered UI.

Yeah I think it is the best long term solution. I don't want to force any frontend framework upon anybody. And wrapping this library for React or any other framework should be trivial.

Update

Tilemap Parsing

I improved my tilemap parser, and it's pretty close to perfection.

    xxxxxxxxxxxxxxxxxxxxxxxxx
    xxxxxxxxxxx33333333333333
    xxxxxxxxxxx33333333333333
    xxxxxxxxxxx33333333333333
    xxxxxxxxxxx33333333333333
    xxxxxxxxxxx33333333333333
    xxxxxxxxxxx33333333333333
    xxxxxxx333333333333333333
    xxxxxxx333333333333333333
    xxxxxxx333333333333333333
    xxxxxxx333333333333333333
    xxxxxxx333333333333333333
    xxxxxxx333333333333333333
    x4444433333xxxxxxxxxxxxxx
    x4444433333xxxxxxxxxxxxxx
    x44444333333222xx000000xx
    x44444333333222xx000000xx
    xxx44xxxxxxxx22xx000000xx
    xxx33xxxxxxxx11xx000000xx
    xxx33322222211110000000xx
    xxx33322222211110000000xx
    xxxxxxxxxxxxxxxxx000000xx
    xxxxxxxxxxxxxxxxx000000xx
    xxxxxxxxxxxxxxxxx000000xx
    xxxxxxxxxxxxxxxxx000000xx
    xxxxxxxxxxxxxxxxxxxxxxxxx

yields the following room

Wall Items (Draft)

Another thing you can already see in the screenshot is that wall items (kind of) work.
Here I might have a question to the community: How are positions of wall items defined? I want to stay as close to the way Habbo handles this as possible.

Last for the day: Performance Demo

Since I recoded my rendering logic, here is a small demo of how performant it now is.



Shroom handles the above scene while still maintaining the targeted average 24fps.

 

[BurakDev]

Very nice progress, good luck ! :thumbup1:

 

[math]

Hey, any plans for pre-launching or launching? with the end of the flash player now in December I would like to use its engine

 

[Moogly]

Nice one, having done a bit of React myself I'm getting PTSD (project lead was a mobile dev with 0 web experience) but this looks nice.

 

[Johnix1337]

Thanks for the interest in the project guys!

Alpha Release (v0.1.0-alpha.13)
https://www.npmjs.com/package/@jankuss/shroom
​

The last few weeks I've been getting shroom ready for an alpha release. Now I would say it is in a testable state, where I need the input of the community.

Feature List

• Standalone Avatar Rendering
• Furniture Rendering with Animations
• Furniture Event Handling
• Room Textures for floors and walls
• Room Rendering based on a Habbo Tilemap
• Pixel Perfect Hit Detection
• Tile Cursor
• Furniture Placeholder when loading

and probably some more..

I am releasing the project under the LGPL-3.0 license. I think this license is one where the community benefits the most from it, as improvements to the library itself have to be shared. If you are a user of the library, you won't need to worry about anything.


GitHub
The repository can be found here:
https://github.com/jankuss/shroom

If you want to show you support, I would appreciate if you star this project.

Installation Instructions
Everything related on how to install & use shroom can be found under the following url.
https://jankuss.github.io/shroom/docs/


I would love to hear your feedback and I will see you on discord!

 

[Johnix1337]

Alpha Release (v0.1.0-alpha.14)

Shroom version v0.1.0-alpha.14 has been released.

A new feature that was added is the door visualization in rooms. The following tilemap yields the room in the video.

x0000
00000
x0000

Video: https://i.imgur.com/kS3ZAhg.mp4

To update/install run

npm install  @[I][B][URL="http://forum.ragezone.com/members/412437.html"]jan[/URL][/B][/I]kuss/shroom@0.1.0-alpha.14

Here the entire CHANGELOG for this version

## [0.1.0-alpha.14] - 2020-12-09

### Added

- Door visualization for room

### Changed

- Figure assets dumping behavior

### Fixed

- Furniture & Avatar textures when display is scaled

**Breaking Change**: Figure images now get dumped into a separate subdirectory corresponding to the library name. You will need to delete your old `figure` folder and rerun the `shroom dump` command to regenerate those resources.

 

[HangoutHotel]

What emulator does it support?

 

[Johnix1337]

What emulator does it support?

None, since that is not the scope of this project. This projects goal is to provide a library for developers to make it easier to create their own habbo retro clients. In this way, developers can focus on creating their own look and feel they need for their client.

Release v0.1.2

This version primarily releases the ability to have landscapes which can be seen through windows.
Here an example of it in use:

/* ... */

const landscape = new Landscape();
landscape.color = "#42474f";
landscape.leftTexture = loadRoomTexture("./images/b1.png");
landscape.rightTexture = loadRoomTexture("./images/b2.png");
room.addRoomObject(landscape);

/* ... */

Results in the following room:

Here the entire CHANGELOG for this release

## [0.1.2] - 2020-12-13

### Added

- Ability to set landscapes, which are seen through windows

### Fixed

- Click handling on furniture when a sprite is mirrored
- Furniture loading of colored items (i.e. `rare_dragonlamp*4`)

 

[oddzag]

Feel like this doesn't get enough love. Looks amazing, I hope you keep going with it.

 

[Johnix1337]

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.

### 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 [USER=2000290150]mtwzim[/USER])
- Highlight State for Furniture
- Ability to fetch furniture by id
- Furniture property for alpha (thanks [USER=53717]Sindre[/USER]slungaard)
- **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: https://github.com/jankuss/shroom
npm: https://www.npmjs.com/package/@jankuss/shroom

 

[Holyfuture]

finally a project with a public git repo AND top of it with a documentation - thats the spirit we need and none of the unfinished projects thats tease us a public release when its finish.