Menu
Forums
All threads
Latest threads
New posts
Trending threads
New posts
Search forums
Trending
What's new
New posts
New profile posts
Latest activity
Members
Current visitors
New profile posts
Search profile posts
Upgrades
Log in
Register
What's new
Search
Search
Search titles only
By:
All threads
Latest threads
New posts
Trending threads
New posts
Search forums
Menu
Log in
Register
Navigation
Install the app
Install
More options
Contact us
Close Menu
Forums
Server Development
Habbo Retros
Habbo Development
shroom - HTML5 Room Rendering Engine for Retros [ALPHA RELEASE]
JavaScript is disabled. For a better experience, please enable JavaScript in your browser before proceeding.
You are using an out of date browser. It may not display this or other websites correctly.
You should upgrade or use an
alternative browser
.
Reply to thread
Message
<blockquote data-quote="Johnix" data-source="post: 466049" data-attributes="member: 97825"><p><img src="https://i.ibb.co/51x6NC4/shroomtext.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /></p><p></p><p>Hello guys,</p><p></p><p>I want to introduce you to a library I created for the browser.</p><p>The library is called shroom, and it enables the users of the library to render everything surrounding Habbo rooms.</p><p>This includes the <strong>Room</strong> itself, <strong>Avatars, Furniture & Animations.</strong></p><p></p><h3>Why not another HTML5 Client?</h3><p>Shroom is intentially <strong><u>not</u></strong> 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.</p><p></p><h3>Other use cases intended</h3><p>Since shroom is without any client specific code, you can use it for whatever.</p><p>What I could think of are the following use cases:</p><ul> <li data-xf-list-type="ul">Catalog Furniture Preview</li> <li data-xf-list-type="ul">Furniture Editing Tool with a preview</li> <li data-xf-list-type="ul">Cool and unique registration page</li> </ul><p>and I'm not really a creative person. So I'm curious on what you guys can come up with <img src="/styles/default/xenforo/smilies/emojione/smile.png" class="smilie" loading="lazy" alt=":)" title="Smile :)" data-shortname=":)" /></p><p></p><h3>Features</h3> <ul> <li data-xf-list-type="ul">Standalone Avatar Rendering</li> <li data-xf-list-type="ul">Furniture Rendering with animations</li> <li data-xf-list-type="ul">Furniture Event Handling</li> <li data-xf-list-type="ul">Room Textures (Floors, Walls & Landscapes)</li> <li data-xf-list-type="ul">Room Rendering based on Tilemap</li> <li data-xf-list-type="ul">Pixel perfect hit detection</li> <li data-xf-list-type="ul">Tile Cursor</li> <li data-xf-list-type="ul">Furniture Placeholder while loading</li> </ul><p>and probably some more.</p><p></p><h3>Demo</h3><p>Here a room rendered with shroom.</p><p></p><p>[MEDIA=imgur]sqKFFVZ[/MEDIA]</p><p></p><h3>Example Code</h3><p>Here how a really simple room would be declared</p><p>[CODE=javascript]import * as PIXI from "pixi.js";</p><p></p><p>import { Room, FloorFurniture, Avatar, Shroom } from "@jankuss/shroom";</p><p></p><p>const view = document.querySelector("#root") as HTMLCanvasElement;</p><p>const application = new PIXI.Application({ view });</p><p></p><p>const shroom = Shroom.create({ application, resourcePath: "./resources" });</p><p>const room = Room.create(shroom, {</p><p> tilemap: `</p><p> 0000</p><p> 0000</p><p> 0000</p><p> `,</p><p>});</p><p></p><p>const furni = new FloorFurniture({</p><p> roomX: 0,</p><p> roomY: 0,</p><p> roomZ: 0,</p><p> direction: 4,</p><p> type: "club_sofa",</p><p>});</p><p></p><p>const avatar = new Avatar({</p><p> look: "hd-180-1.hr-100-61.ch-210-66.lg-280-110.sh-305-62",</p><p> direction: 4,</p><p> roomX: 0,</p><p> roomY: 0,</p><p> roomZ: 0,</p><p>});</p><p></p><p>avatar.action = "sit";</p><p></p><p>room.addRoomObject(furni);</p><p>room.addRoomObject(avatar);</p><p></p><p>room.x = 100;</p><p>room.y = 200;</p><p></p><p>application.stage.addChild(room);[/CODE]</p><p></p><h3>Technologies</h3><p>Shroom is made in and for PIXI.JS. The project is fully written in TypeScript.</p><p></p><h3>Goal</h3><p>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.</p><h2>Fully Open Source</h2><p>Shroom is fully open source and in active development right now. There is still a lot of stuff to be done.</p><p>The good news is:<strong> It is already released and published.</strong></p><p></p><p>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.</p><p>I want this to be a community effort and want everybody to benefit from the core code.</p><p>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.</p><h3>GitHub</h3><p>I would greatly appreciate if you <strong>star</strong> and <strong>contribute</strong> to the project on GitHub.</p><p>The repository can be found here:</p><p></p><p>[URL unfurl="true"]https://github.com/jankuss/shroom[/URL]</p><p></p><h3>Install with npm</h3><p>The shroom package is published on npm.</p><p>You can find it here:</p><p></p><p>[URL unfurl="true"]https://www.npmjs.com/package/@jankuss/shroom[/URL]</p><p></p><h3>Documentation & Installation Instructions</h3><p>If you want to use shroom in your project check our documentation here:</p><p></p><p>[URL unfurl="true"]https://jankuss.github.io/shroom/docs/[/URL]</p><p></p><h3>Discord</h3><p>We have a development discord where we can give support and notify you about new releases.</p><p>You can join it here:</p><p></p><p>[URL unfurl="true"]https://discord.gg/SazkYzhsru[/URL]</p><p></p><h3><p style="text-align: center"></p> <p style="text-align: center">I would love if you try it out and and give your feedback</p> </h3></blockquote><p></p>
[QUOTE="Johnix, post: 466049, member: 97825"] [IMG]https://i.ibb.co/51x6NC4/shroomtext.png[/IMG] 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 [B]Room[/B] itself, [B]Avatars, Furniture & Animations.[/B] [HEADING=2]Why not another HTML5 Client?[/HEADING] Shroom is intentially [B][U]not[/U][/B] 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. [HEADING=2]Other use cases intended[/HEADING] Since shroom is without any client specific code, you can use it for whatever. What I could think of are the following use cases: [LIST] [*]Catalog Furniture Preview [*]Furniture Editing Tool with a preview [*]Cool and unique registration page [/LIST] and I'm not really a creative person. So I'm curious on what you guys can come up with :) [HEADING=2]Features[/HEADING] [LIST] [*]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 [/LIST] and probably some more. [HEADING=2]Demo[/HEADING] Here a room rendered with shroom. [MEDIA=imgur]sqKFFVZ[/MEDIA] [HEADING=2]Example Code[/HEADING] Here how a really simple room would be declared [CODE=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);[/CODE] [HEADING=2]Technologies[/HEADING] Shroom is made in and for PIXI.JS. The project is fully written in TypeScript. [HEADING=2]Goal[/HEADING] 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. [HEADING=1]Fully Open Source[/HEADING] 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:[B] It is already released and published.[/B] 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. [HEADING=2]GitHub[/HEADING] I would greatly appreciate if you [B]star[/B] and [B]contribute[/B] to the project on GitHub. The repository can be found here: [URL unfurl="true"]https://github.com/jankuss/shroom[/URL] [HEADING=2]Install with npm[/HEADING] The shroom package is published on npm. You can find it here: [URL unfurl="true"]https://www.npmjs.com/package/@jankuss/shroom[/URL] [HEADING=2]Documentation & Installation Instructions[/HEADING] If you want to use shroom in your project check our documentation here: [URL unfurl="true"]https://jankuss.github.io/shroom/docs/[/URL] [HEADING=2]Discord[/HEADING] We have a development discord where we can give support and notify you about new releases. You can join it here: [URL unfurl="true"]https://discord.gg/SazkYzhsru[/URL] [HEADING=2][CENTER] I would love if you try it out and and give your feedback[/CENTER] [/HEADING] [/QUOTE]
Insert quotes…
Verification
Post reply
Forums
Server Development
Habbo Retros
Habbo Development
shroom - HTML5 Room Rendering Engine for Retros [ALPHA RELEASE]
Top