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
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
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:
You must be registered for see links
Install with npm
The shroom package is published on npm.You can find it here:
You must be registered for see links
Documentation & Installation Instructions
If you want to use shroom in your project check our documentation here:
You must be registered for see links
Discord
We have a development discord where we can give support and notify you about new releases.You can join it here:
You must be registered for see links
I would love if you try it out and and give your feedback
I would love if you try it out and and give your feedback
