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!

[HTML5] Habbo5 [Typescript, Vue, Webpack, WebSocket]

Newbie Spellweaver
Joined
May 15, 2016
Messages
19
Reaction score
7
This is very cool! Would love to the the source of this, I've been using Vue.js heavily recently and it would be interesting to see how someone else has approached it. Good luck!
 
git bisect -m
Loyal Member
Joined
Sep 2, 2011
Messages
2,171
Reaction score
916
Really impressive work, Konquer. I really hope this project goes until the end. If you want some help, call me, I would love to help.

But before that, I need finish my own *homework* (aka Chocolatey) oh god.
 
Newbie Spellweaver
Joined
Dec 28, 2017
Messages
6
Reaction score
1
A really nice development you have going on here.
 
Initiate Mage
Joined
Dec 28, 2017
Messages
2
Reaction score
1
Nice concept, can't wait for this to be done!

off topic: By any chances, are you Poma from HabboMe? :O
 
Elite Diviner
Joined
Apr 5, 2014
Messages
464
Reaction score
223
Taking a break from this to focus on my professional tetris career. Thread can be closed until further notice o/

Here's the source
 
Elite Diviner
Joined
Apr 5, 2014
Messages
464
Reaction score
223
This little gem has been dusting on my shelf for half a year now.. time to bring it some much desired love.

  • Client now requests rooms from the different navigator tabs properly
  • Rounded canvas draw coordinates to the nearest decimal to avoid entities being blurry when applying movement animations
  • Added an fps cap to entity movement because moving avatars at 144fps looks unnatural and unlike Habbo
  • Prototyping furnitures (more below)

Here's some insight on how i'm planning to do furniture and how it is currently.

  1. Most furniture will typically consist of a script file and a spritesheet (both loaded on demand ofc)
  2. The scriptfile will be eventbased. This means that future more complex furniture can be made simply by exposing new events to the scripts instead of modifying some global item interface that all furniture depend on. Imagine wanting to create the tent furnitures but we have no way of checking when the user is in the tent to change the sprite to show the inside. No problem, just expose an onAvatarWalkEvent and let the furniture scripts subscribe to it.
  3. The scriptfile will have access to the entire application, so your furniture can basically do.. whatever you want them to do. Much like a plugin system would work.


Example of a simple pineapple furniture

aS0zWfc - [HTML5] Habbo5 [Typescript, Vue, Webpack, WebSocket] - RaGEZONE Forums


j57H8qk - [HTML5] Habbo5 [Typescript, Vue, Webpack, WebSocket] - RaGEZONE Forums
 

Attachments

You must be registered for see attachments list
Elite Diviner
Joined
Apr 5, 2014
Messages
464
Reaction score
223
Items are made out of itemparts. Each square has a renderstack of entities. Each itempart, like avatars, are added to its respective renderstack (chosen in the furniture script with coordinates relative to the parent items coordinates). This is currently how depth mapping is achieved. Having multiple itemparts is necessary because different sprites have to be rendered from different renderstacks to mimic habbo's rendering style where furniture with a size larger than 1 square can overlap furniture on other tiles.

it's 06am i need sleep, here's a gif for your entertainment. will add some more furniture tomorrow with different sizes

FlP3JPE - [HTML5] Habbo5 [Typescript, Vue, Webpack, WebSocket] - RaGEZONE Forums



oh and yeah decided to ditch typescript for furniture scripts as most people probably prefer plain js. also nice to have more options, now you can create furnitures with whatever language you want as long as it compiles down to js

here's how the pineapple plant script from the gif above looks now

c5OyDNx - [HTML5] Habbo5 [Typescript, Vue, Webpack, WebSocket] - RaGEZONE Forums
 

Attachments

You must be registered for see attachments list
Last edited:
Elite Diviner
Joined
Apr 5, 2014
Messages
464
Reaction score
223
Woww amazing project bro..
thank you :)


made some changes to avatars movement animator to make it work with any type of entity

works the same way as on habbo for avatars, rollers, wired movement etc where the entity flies to the target destination over x milliseconds so the travel speed is relative to distance

iGo3qFh - [HTML5] Habbo5 [Typescript, Vue, Webpack, WebSocket] - RaGEZONE Forums




Now we're getting somewhere!

GhNc0KY - [HTML5] Habbo5 [Typescript, Vue, Webpack, WebSocket] - RaGEZONE Forums



As the gif shows we now have the desired effect i talked about earlier in the thread where the pineapple can partially overlap the furni it is under if it's a part of a different renderstack:

MYcjZgu - [HTML5] Habbo5 [Typescript, Vue, Webpack, WebSocket] - RaGEZONE Forums
EidBaFi - [HTML5] Habbo5 [Typescript, Vue, Webpack, WebSocket] - RaGEZONE Forums



Furniture are pretty much complete whenever I get around to doing "chair logic" (single item with multiple itemparts in the same renderstack) but i believe habbo just uses absolute z indexing for all of those kinds of furniture so it shouldn't be a problem.

here's what a furniture script for the lodge divider looks like. it's basically just saying that we want to create an extra itempart 1 square down relative to the items base coordinate on the x axis

FJKkWlZ - [HTML5] Habbo5 [Typescript, Vue, Webpack, WebSocket] - RaGEZONE Forums


Currently have converted all the plant items and most of the lodge items. Takes about 5 minute per 10 furniture or so, depending on the complexity of the furniture.
 

Attachments

You must be registered for see attachments list
Last edited:
Junior Spellweaver
Joined
Aug 15, 2011
Messages
167
Reaction score
15
Man this is awesome! I really hope this development will be finished and released.
 
Elite Diviner
Joined
Apr 5, 2014
Messages
464
Reaction score
223
Starts to lag at ~5000 furniture but this is without any kind of optimization so.. life is good.


The delay is for demonstrational purposes, they could all be placed instantly.

Konquer - [HTML5] Habbo5 [Typescript, Vue, Webpack, WebSocket] - RaGEZONE Forums



Script used:
Code:
let total = 0;
let x = 0;
let y = 0;
let height = 0;
setInterval(() => {
    if(total < 2000) {
        Habbo.Room.SpawnItem('plants.pineapple', x, y, height / 2);


        if(y >= 20) {
            y = 0;
            height++;
        }


        if(total > x * 500) {
            x++;
            height = 0;
        }


        y++;
        total++;


        console.log('total furniture:', total);
    } 
}, 5);
 
Elite Diviner
Joined
Apr 5, 2014
Messages
464
Reaction score
223
Does the framerate go back to normal after you're done placing all the furniture?

No. All entities gets redrawn every frame even if they're not visible so there's definitely room for improvements.

Even the tiles gets redrawn every frame ¯\_(ツ)_/¯
 
Newbie Spellweaver
Joined
May 7, 2018
Messages
30
Reaction score
52
Awesome job! Hope to see more updates

Did you use any info to generate those furni scripts?
 
Elite Diviner
Joined
Apr 5, 2014
Messages
464
Reaction score
223
Awesome job! Hope to see more updates

Did you use any info to generate those furni scripts?

Thanks!
By info do you mean documentation on how to create the furniture scripts?

here's the code that runs when a new item is created
NY48Kba - [HTML5] Habbo5 [Typescript, Vue, Webpack, WebSocket] - RaGEZONE Forums
 

Attachments

You must be registered for see attachments list
Newbie Spellweaver
Joined
May 7, 2018
Messages
30
Reaction score
52
Thanks!
By info do you mean documentation on how to create the furniture scripts?

here's the code that runs when a new item is created
NY48Kba - [HTML5] Habbo5 [Typescript, Vue, Webpack, WebSocket] - RaGEZONE Forums

I mean how to create the furniture scripts :)


Where did those values came from?

Nice code tho
 

Attachments

You must be registered for see attachments list
Back
Top