shroom - HTML5 Room Rendering Engine for Habbo

Results 1 to 12 of 12
  1. #1
    Registered Johnix1337 is offline
    MemberRank
    Jul 2013 Join Date
    23Posts

    config shroom - HTML5 Room Rendering Engine for Habbo

    shroom - HTML5 Room Rendering Engine for Habbo
    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 React.

    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 React, TypeScript & PIXI.JS.
    React enables the users of this library to write expressive and simple code to render their room.
    For dumping existing habbo assets `swftools` (swfextract) is used.


    Examples

    Example: Simple avatar and furniture rendering

    Code:
    const tilemap = parseTileMapString(`
        00000
        00000
        00000
        00000
        00000
    `);
    
    return (
      <Room tilemap={tilemap}>
        <Avatar
          action="sit"
          roomX={0}
          roomY={2}
          roomZ={0}
          look={"hd-180-1.ch-255-66.lg-280-110.sh-305-62.ha-1012-110.hr-828-61"}
          direction={2}
        />
    
        <Furni roomX={0} roomY={1} roomZ={0} direction={2} type="club_sofa" />
      </Room>
    );
    Result



    And with only 20 lines of code, you've got a perfectly rendered room.

    Please note in this example, that the avatar is correctly rendered behind the arm rest of the club sofa. In many other HTML5 Habbo Clones without proper depth sorting, the following example would look like the this.





    Example: A more complex example

    Complex example with multiple overlapping furniture and multiple avatars.

    Code:
    const tilemap = /* ... */;
    
    return (
      <Room tilemap={tilemap}>
        <Avatar
          action="sit"
          roomX={0}
          roomY={2}
          roomZ={0}
          look={"hd-180-1.ch-255-66.lg-280-110.sh-305-62.ha-1012-110.hr-828-61"}
          direction={2}
        />
    
        <Avatar
          action="sit"
          roomX={1}
          roomY={0}
          roomZ={0}
          look={"hd-180-1.ch-255-66.lg-280-110.sh-305-62.ha-1012-110.hr-828-61"}
          direction={4}
        />
    
        <Furni roomX={0} roomY={1} roomZ={0} direction={2} type="club_sofa" />
        <Furni roomX={1} roomY={0} roomZ={0} direction={4} type="club_sofa" />
        <Furni roomX={0} roomY={0} roomZ={0} direction={0} type="stand_polyfon_z" />
        <Furni
          roomX={0}
          roomY={0}
          roomZ={0.5}
          direction={0}
          type="stand_polyfon_z"
        />
        <Furni roomX={1} roomY={1} roomZ={0} direction={0} type="table_polyfon" />
        <Furni roomX={0} roomY={0} roomZ={0} direction={2} type="african_patch" />
        <Furni roomX={2} roomY={0} roomZ={0} direction={2} type="african_patch" />
        <Furni roomX={2} roomY={2} roomZ={0} direction={2} type="african_patch" />
        <Furni roomX={0} roomY={2} roomZ={0} direction={2} type="african_patch" />
      </Room>
    );
    Result



    Note here, that the grass patch overlapping over the table is intended. This is exactly how the real Habbo Client would render in this situation.

    Here a picture of a real Habbo Client rendering the same scene





    Example: Avatar animation on position change

    In case the avatar changes its position, a walk animation will be played.


    Code:
    const [state, setState] = React.useState({ x: 0, y: 2, action: "sit" });
    
    const tilemap = /* ... */;
    
    return (
      <Room
        tilemap={tilemap}
        onTileClick={() => setState({ x: 1, y: 2, action: "std" })}
      >
        <Avatar
          action={state.action}
          roomX={state.x}
          roomY={state.y}
          roomZ={0}
          look={"hd-180-1.ch-255-66.lg-280-110.sh-305-62.ha-1012-110.hr-828-61"}
          direction={2}
        />
    
        <Furni roomX={0} roomY={1} roomZ={0} direction={2} type="club_sofa" />
      </Room>
    );
    Result





    This project is still a major work in progress

    The code will be released under a appropriate Open Source License in the future once it is in a resonably useable, production ready state. Once it is publicly released, I'd be happy to welcome contributors to this project.

    Feedback wanted

    I would really appreciate your feedback and features to consider. This would really help me organize my Todos.
    Last edited by Johnix1337; 22-10-20 at 01:34 AM.


  2. #2
    Registered Johnix1337 is offline
    MemberRank
    Jul 2013 Join Date
    23Posts

    Re: shroom - HTML5 Room Rendering Engine for Habbo

    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.

  3. #3
    CHIBRE ! pipitt05000 is offline
    True MemberRank
    Feb 2009 Join Date
    FranceLocation
    316Posts

    Re: shroom - HTML5 Room Rendering Engine for Habbo

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

  4. #4
    Registered Johnix1337 is offline
    MemberRank
    Jul 2013 Join Date
    23Posts

    Re: shroom - HTML5 Room Rendering Engine for Habbo

    Quote Originally Posted by pipitt05000 View Post
    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, specifically https://github.com/inlet/react-pixi, which implements PIXI.JS for React.
    With this project, I wanted to try if React is suitable for Game development as it makes synchronization of the application data to the canvas trivial. The Component Architecture of React is also a great fit for this project, as it makes code (in my opinion) pretty easy to understand.

    This example is for a component which handles furniture with toggleable states (rare_dragonlamp, divider_arm3, etc.). Please note this is only client side.

    Code:
    export function MultiStateFurni({
      roomX,
      roomY,
      roomZ,
      type,
      direction,
      interactionCount,
      initialState = 0
    }: Props) {
      const [state, setState] = React.useState(initialState % interactionCount);
    
      return (
        <Furni
          roomX={roomX}
          roomY={roomY}
          roomZ={roomZ}
          onDoubleClick={() => setState(prev => (prev + 1) % interactionCount)}
          animation={state.toString()}
          type={type}
          direction={direction}
        />
      );
    }
    
    interface Props {
      roomX: number;
      roomY: number;
      roomZ: number;
      type: string;
      direction: number;
      interactionCount: number;
      initialState?: number;
    }
    Small Update
    - Improved performance of furniture animations
    - Improved hit detection by checking the alpha value of the pixel at the interaction position

  5. #5
    shroom - HTML5 Room Rendering Engine for Habboshroom - HTML5 Room Rendering Engine for Habbo pel is offline
    True MemberRank
    Jan 2012 Join Date
    Munich, GermanyLocation
    379Posts

    Re: shroom - HTML5 Room Rendering Engine for Habbo

    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



  6. #6
    Newbie FusionDev is offline
    MemberRank
    Sep 2020 Join Date
    3Posts

    Re: shroom - HTML5 Room Rendering Engine for Habbo

    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?

  7. #7
    Registered LukeOx is offline
    MemberRank
    May 2016 Join Date
    19Posts

    Re: shroom - HTML5 Room Rendering Engine for Habbo

    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!

  8. #8
    Registered Johnix1337 is offline
    MemberRank
    Jul 2013 Join Date
    23Posts

    Re: shroom - HTML5 Room Rendering Engine for Habbo

    Quote Originally Posted by FusionDev View Post
    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
    Last edited by Johnix1337; 4 Weeks Ago at 02:26 AM.

  9. #9
    Member Matheeus is offline
    MemberRank
    Feb 2018 Join Date
    30Posts

    Re: shroom - HTML5 Room Rendering Engine for Habbo

    Quote Originally Posted by Johnix1337 View Post
    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.

  10. #10
    Registered Johnix1337 is offline
    MemberRank
    Jul 2013 Join Date
    23Posts

    Re: shroom - HTML5 Room Rendering Engine for Habbo

    Quote Originally Posted by Matheeus View Post
    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



    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.

    Last edited by Johnix1337; 4 Weeks Ago at 02:45 AM.

  11. #11
    Developer BurakDev is offline
    True MemberRank
    Mar 2013 Join Date
    ParisLocation
    376Posts

    Re: shroom - HTML5 Room Rendering Engine for Habbo

    Very nice progress, good luck !

  12. #12
    Newbie math is offline
    MemberRank
    Nov 2020 Join Date
    1Posts

    Re: shroom - HTML5 Room Rendering Engine for Habbo

    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



Advertisement