Welcome!

Join our community of MMO enthusiasts and game developers! By registering, you'll gain access to discussions on the latest developments in MMO server files and collaborate with like-minded individuals. Join us today and unlock the potential of MMO server development!

Join Today!

shroom - HTML5 Room Rendering Engine for Habbo

Newbie Spellweaver
Joined
Jul 27, 2013
Messages
27
Reaction score
41
shroom - HTML5 Room Rendering Engine for Retros [ALPHA RELEASE]

shroom - Room Rendering Engine for Habbo

Johnix1337 - shroom - HTML5 Room Rendering Engine for Habbo - RaGEZONE Forums

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` ( ) is used.

Alpha Release


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:


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.



I would love to hear your feedback and I will see you on discord!
 
Last edited:
Newbie Spellweaver
Joined
Jul 27, 2013
Messages
27
Reaction score
41
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.

hoITD - shroom - HTML5 Room Rendering Engine for Habbo - RaGEZONE Forums


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

Attachments

You must be registered for see attachments list
Newbie Spellweaver
Joined
Jul 27, 2013
Messages
27
Reaction score
41
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
 
Last edited:

pel

Skilled Illusionist
Joined
Jan 27, 2012
Messages
382
Reaction score
343
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
 
Newbie Spellweaver
Joined
Sep 23, 2020
Messages
25
Reaction score
23
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?
 
Newbie Spellweaver
Joined
May 15, 2016
Messages
19
Reaction score
7
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!
 
Newbie Spellweaver
Joined
Jul 27, 2013
Messages
27
Reaction score
41
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.

 
Last edited:
Newbie Spellweaver
Joined
Feb 25, 2018
Messages
30
Reaction score
39
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.
 
Newbie Spellweaver
Joined
Jul 27, 2013
Messages
27
Reaction score
41
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.

Code:
    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

lYDReoN - shroom - HTML5 Room Rendering Engine for Habbo - RaGEZONE Forums


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.

9crYN74 - shroom - HTML5 Room Rendering Engine for Habbo - RaGEZONE Forums
 

Attachments

You must be registered for see attachments list
Last edited:
Initiate Mage
Joined
Nov 30, 2020
Messages
1
Reaction score
0
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
 
Software Engineer
Loyal Member
Joined
Feb 19, 2008
Messages
1,055
Reaction score
492
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.
 
Newbie Spellweaver
Joined
Jul 27, 2013
Messages
27
Reaction score
41
Thanks for the interest in the project guys!


Johnix1337 - shroom - HTML5 Room Rendering Engine for Habbo - RaGEZONE Forums



Alpha Release (v0.1.0-alpha.13)



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:


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.



I would love to hear your feedback and I will see you on discord!
 
Last edited by a moderator:
Newbie Spellweaver
Joined
Jul 27, 2013
Messages
27
Reaction score
41
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.

Code:
x0000
00000
x0000

r6bUN3 - shroom - HTML5 Room Rendering Engine for Habbo - RaGEZONE Forums
Video:

To update/install run
Code:
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

Code:
## [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.
 

Attachments

You must be registered for see attachments list
Last edited:
Newbie Spellweaver
Joined
Jul 27, 2013
Messages
27
Reaction score
41
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.



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

Code:
/* ... */

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:

mlZmCGW - shroom - HTML5 Room Rendering Engine for Habbo - RaGEZONE Forums



Here the entire CHANGELOG for this release

Code:
## [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`)
 

Attachments

You must be registered for see attachments list
Newbie Spellweaver
Joined
Jul 27, 2013
Messages
27
Reaction score
41
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 [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:
npm:
 
Newbie Spellweaver
Joined
Jul 31, 2014
Messages
17
Reaction score
8
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.
 
Back
Top