shroom - HTML5 Room Rendering Engine for Habbo

[Johnix1337]

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/apoll...e-cms-1086191/), or because of rCMS (http://forum.ragezone.com/f353/rcms-...esets-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!

[MentaL]

[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 ass.
Another new thing is rendering of stairs.

https://i.imgur.com/FScXbHv.mp4

[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 ass.
Another new thing is rendering of stairs.

https://i.imgur.com/FScXbHv.mp4

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.

https://i.imgur.com/ox6Uo2V.mp4

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

[BurakDev]

Very nice progress, good luck !

[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  @jankuss/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.