HabboTML5 - A new generation of Habbo

Status
Not open for further replies.

JynX

Posting Freak
Feb 6, 2016
710
438
HabboTML5
"A new generation of Habbo"

HabboTML5 was started on the belief that there should be some attempt at creating a version of Habbo even after the final goodbye of Flash and to also not require us as developers to rely on Sulake's development to further ourselves. This project has been done to expand upon the contributors knowledge in the field and to also give something back to the community after all it has done for us. And most importantly of all this, fuck Sulake, we can do it better than they can. :)

- Provide something "stable" before Flash's final goodbye
- Utilize modern libraries and standards
- Keep organization for further developers down the road

-
-
-
-


  • Loading screen
    • NEW: Loads all assets prior to landing being shown (obviously.. how else would it work?)
    • NEW: Authenticates the user using a single sign on token
  • Landing screen
    • NEW: Loads all statistics for the user (excluding avatar currently)
    • NEW: Hotbar at the bottom renders properly & works properly
  • Room screen
    • NEW: Generates room layouts the same way Habbo does
      • Generates floors and walls
      • Does not generate stairs (yet)
      • 64x64 empty room generated in 1.5s
    • NEW: Room camera drags
    • NEW: Hovering over a tile does work
    • TODO: Change renderer to draw tiles and walls instead of utilizing images to assist with dynamic floor/wall sizes




(GIF's frames make it seem laggy, sorry!)
(mobile view)
JavaScript:
    this.loadingText = new PIXI.Text('Loading funny message... please wait.', { fontFamily: 'Diodrum', fill: 'white', fontWeight: 800 });
    this.loadingPercentage = new PIXI.Text('0%',  { fontFamily: 'Diodrum', fill: 0x999999, fontSize: 16, fontWeight: 800 });
    this.loadingLoader.load((loader, resources) => {
      this.loadingImages = {
        frame: new PIXI.Sprite(resources.loading_frame.texture),
        stack: new PIXI.Sprite(resources.loading_stack.texture),
        image: new PIXI.Sprite(resources.loading_image.texture),
        bar_frame: new PIXI.Sprite(resources.loading_bar_frame.texture),
        bar: new PIXI.extras.TilingSprite(resources.loading_bar.texture, 1, 18)
      };
      this.loadingContainer.position.set(-this.loadingImages.frame.width / 2, -this.loadingImages.frame.height / 2);
      this.loadingContainer
        .addChild(this.loadingImages.stack)
        .addChild(this.loadingImages.image)
        .addChild(this.loadingImages.frame)
        .addChild(this.loadingImages.bar_frame)
        .addChild(this.loadingImages.bar)
        .addChild(this.loadingText)
        .addChild(this.loadingPercentage);
                             
      this.loadingImages.stack.position.set(-9, 0);
      this.loadingImages.frame.position.set(-95, -51);
      this.loadingImages.image.position.set((this.loadingImages.frame.width / 2 - this.loadingImages.image.width / 2) + 5, (this.loadingImages.frame.height / 2 - this.loadingImages.image.height/ 2) - 6);
      this.loadingImages.bar_frame.position.set((this.loadingImages.frame.width / 2 - this.loadingImages.bar_frame.width / 2) + 9, (this.loadingImages.frame.height / 2 - this.loadingImages.bar_frame.height / 2) + 300);
      this.loadingImages.bar.position.set(4,4);
     
      this.loadingText.anchor.set(0.5);
      this.loadingText.position.set(this.loadingImages.bar_frame.width / 2, -40);
     
      this.loadingPercentage.anchor.set(0.5);
      this.loadingPercentage.position.set(0, 80);
    });

      this.mainLoader.on('progress', (loader, resources) => {
        this.loadingPercentage.text = Math.ceil(loader.progress) + '%';
        this.loadingImages.bar.width = Math.ceil(loader.progress / 100 * 393);
      });
  • Room screen
    • NEW: Redrawing tiles instead of utilizing images, view Codepen for more information
N/A
 
Last edited:

JayC

Always Learning
Aug 8, 2013
5,493
1,398
I would like to see something of this project, as the need is definitely there. However, most retros can continue as they are without requiring to be remade or restarted with the new technologies. The reasoning is you can create an installer and just download the game, and then execute it from your desktop or what have you and be able to play. Still, goodluck!
 

JynX

Posting Freak
Feb 6, 2016
710
438
Thread has been approved. Great to see more of these projects popping up. Can I request that you add some code snippets to your thread?
Updated.

I would like to see something of this project, as the need is definitely there. However, most retros can continue as they are without requiring to be remade or restarted with the new technologies. The reasoning is you can create an installer and just download the game, and then execute it from your desktop or what have you and be able to play. Still, goodluck!
With retro owners these days that can't even be trusted not to take part in malicious events using passwords/IP's found within their database, the last thing I'd be doing would be downloading a client and allowing them to run on my computer. Hell, you can hardly trust some of the bigger names in programs at times with their adware. On top of this, most people don't want to have to download a program to take part in their childhood addiction. Nevertheless, thanks for the support!
 

LaPatron

Smile, because it confuses people.
Nov 23, 2017
72
155
Goodluck with the project, really nice to see more people actually caring enough to do something about the whole flash thing.

Just wanted to know what database server are you planning on using?

Cheers
 

JynX

Posting Freak
Feb 6, 2016
710
438
Goodluck with the project, really nice to see more people actually caring enough to do something about the whole flash thing.

Just wanted to know what database server are you planning on using?

Cheers
We are currently using MySQL as a database server, however the library we utilize for the database side of things (Bookshelf) has compatibility for PostgreSQL and SQLite3 so those are both options as well. I debated going the MongoDB route but changed my mind due to simplicity down the road with new users setting things up, MySQL is a little more known to people.
 

AlexJz

New Member
Apr 15, 2019
1
0
Code Snippet Update
Quick little update because the current code snippet we have is relatively pointless if I do say so myself, I've written a little codepen that will demonstrate the method we will employ to render our roomtiles, this does not include our mapping system or optimisations.

 

Vik

Member
Feb 2, 2019
31
15
There is a huge need for projects like these rising up as there is just less than a year for the death of Flash... Keep up the great work, my man and be sure to keep us up to date with it all!
 

harambe

Donator
Dec 3, 2018
154
115
There is a huge need for projects like these rising up as there is just less than a year for the death of Flash... Keep up the great work, my man and be sure to keep us up to date with it all!

I believe we have till the end of 2020
 

Tivum

https://adify.us/
Apr 18, 2019
23
7
I believe we have till the end of 2020
“We will stop updating and distributing the Flash Player at the end of 2020 and encourage content creators to migrate any existing Flash content to these new open formats,” Correct.
 

Lotus

Legacy, it's all anyone leaves behind.
Jun 8, 2012
1,637
501
Simple thread a little informative, is there any updates currently?
 

JynX

Posting Freak
Feb 6, 2016
710
438
Simple thread a little informative, is there any updates currently?
This week has been slightly slow just due to Alex being in holiday and myself doing side work and working a full-time job, but in my free time I've been slowly working towards creating a self-hosted imager to handle all of the assets for the client (Kinda like a CDN I suppose). I've recently had to slightly rewrite how the avatars are drawn as I have completely and utterly messed up frames (which are what create the walking animation for example). Hoping to get that situated and get it into a somewhat stable state.

As for what has happened since the latest changelog (oops, forgot to update it since the 17th). We've been working towards making our room renderer fully function after moving from using image sprites to just manually drawing them. The problem with drawing them has been getting them to properly emulate Habbo and look the same. As the above said we decided to slowly move towards working on an imager to move towards doing some actual user interaction such as the catalog (which would cascade into furniture placement in rooms), room settings, floorplanning, and other such things. Apologies for not updating this as frequently as I should, but I hope this sums up what's been done since.

Edit; My dumb ass read informative as uninformative, oops.
 
Last edited:

JynX

Posting Freak
Feb 6, 2016
710
438
Hey guys!

With summer time rolling around and other activities beginning to eat away at the time we have to do any sort of development, Alex and myself have made a mutual decision to temporarily postpone this project and all things related to it. We have learned quite a bit about HTML5 development (even though we swapped languages probably 40 times) as well as how Habbo does function in some ways with its packet structure and other such things. We're sad to have to say this, but it's better to actually officially postpone it than to leave everyone hanging and wondering what has happened to the project. With all that said, thank you to those who provided guidance, assistance, or had some part in HabboTML5, we greatly appreciate it and will not forget it.

Again, thank you!
 
Status
Not open for further replies.

Users who are viewing this thread

Top