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]

Elite Diviner
Joined
Apr 5, 2014
Messages
464
Reaction score
223
What is H5

H5 is a recreation of Habbo Hotel using modern technologies. It has been an on and off project for 2 years and have been started from scratch 3 times after every major break i've had from the project.


Cool, what does the stack look like?

Client:

  • Typescript
  • Vue
  • Vuex
  • Class & Property Decorators
  • Websockets
  • WebGL

Server:

  • Nodejs
  • Typescript
  • Websockets
  • Typeorm
  • Worker Threads


Showcase

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


jPJa5BU - [HTML5] Habbo5 [Typescript, Vue, Webpack, WebSocket] - RaGEZONE Forums
Showcase (old version)

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


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



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









Leaving feedback is a great way of contributing as it helps encouraging the developer to keep working on the project.
 

Attachments

You must be registered for see attachments list
Last edited:
Elite Diviner
Joined
Apr 5, 2014
Messages
464
Reaction score
223
Re: spaghetti html5

Some minor changes:

Due to the client handling all avatar rotations, unlike habbo, there was an issue with users facing the wrong way when you entered a room. Fixed by retrieving the rotation of other players in the room when you enter.

Users are now blocking the square that they stand on.

I'm fiddling a lot with the delay between the frames of walk animations to make it more like on habbo. Currently at 105ms delay per frameupdate, still not sure if it's too slow or too fast.

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


Going to work on some ui stuff later. Been thinking a lot about whether or not to have it all in canvas or dom and ended up with dom simply because I believe people would want to customize it to their likings, which would be fairly hard to do if not through dom. Everything else will be in canvas though!
 

Attachments

You must be registered for see attachments list
Initiate Mage
Joined
Nov 11, 2017
Messages
31
Reaction score
13
Re: spaghetti html5

using dom in the ui instead of canvas isn't like use dotnet forms in a directx application ? >.>
GL with the project looks very 'smooth' =3
 
Elite Diviner
Joined
Apr 5, 2014
Messages
464
Reaction score
223
Re: spaghetti html5

using dom in the ui instead of canvas isn't like use dotnet forms in a directx application ? >.>
GL with the project looks very 'smooth' =3

It's fairly common for browser games to have the user interface made in the dom while the core gameplay that actually requires good performance and lots of redrawing in canvas. There wouldn't be any performance gains from having the ui in canvas.

The common reason people have for creating the ui in canvas and not dom is that it will be easier to port it into a native application to have it run other places than on the web. But I have no plans for that, so i'd rather just make it in dom which will also take up less time and make it more asthetically pleasing.

When starting this off i was planning to have it all in canvas with no exceptions, but there just really aren't any benefits from it other than being able to brag about it.
 
Initiate Mage
Joined
May 30, 2017
Messages
36
Reaction score
10
Re: spaghetti html5

How did you manage to get all the frontend part done?
Did you decompile the SWFs and use the images, or how?
 
Elite Diviner
Joined
Apr 5, 2014
Messages
464
Reaction score
223
Re: spaghetti html5

How did you manage to get all the frontend part done?
Did you decompile the SWFs and use the images, or how?

The tile sprite is from google images and the avatars are spritesheets generated from a standard avatar imager atm. It's projected onto a canvas with (canvas context).drawImage.
 
Initiate Mage
Joined
Nov 11, 2017
Messages
31
Reaction score
13
Re: spaghetti html5

why have a blur when the player move to diagonals ?
 
Elite Diviner
Joined
Apr 5, 2014
Messages
464
Reaction score
223
Re: spaghetti html5

My current plan of action is room creation -> room chatting -> furniture. I have not been able to push any cool updates the last two weeks because i'm currently redoing everything with actual thought in mind. After some back and forth I have settled with creating the server in c# simply because i'm so bored of js.

The frontend ui will probably be component based to keep it as simple as possible for others to customize the design.


For what its worth, Habbo uses 24FPS.

That's actually very helpful, thanks!
 
Elite Diviner
Joined
Apr 5, 2014
Messages
464
Reaction score
223
Re: spaghetti html5

Do you think you could post code that demonstrates how avatars are depth-sorted?

There is none atm. I plan to use the same system for furniture and avatars, but haven't thought the furniture part completely through yet. Currently the first one to enter gets drawn first.

It would be fairly simple to just draw the avatars from back to front based on their current coordinate. This however, would not work with furniture.


EDIT:
Turns out I have overthought the furniture part quite a bit. Up until now i've thought they cut off some of the multitile sprites manually to achieve overlapping top-part furniture. Example:
MYcjZgu - [HTML5] Habbo5 [Typescript, Vue, Webpack, WebSocket] - RaGEZONE Forums

But in reality, all the furniture that allows for this behaviour is split up into multiple sprites for each tile. I've always thought lodge dividers and similar furniture to be a single image.

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


That explains why most carpets look stupid when stacked..
 

Attachments

You must be registered for see attachments list
Last edited:
Initiate Mage
Joined
May 30, 2017
Messages
36
Reaction score
10
Re: spaghetti html5

Do you have a public or private Git repository of some kind?
I'd like to look at how you've done it.
 
Elite Diviner
Joined
Apr 5, 2014
Messages
464
Reaction score
223
Initiate Mage
Joined
May 30, 2017
Messages
36
Reaction score
10
Elite Diviner
Joined
Apr 5, 2014
Messages
464
Reaction score
223
Re: spaghetti html5

Both, but most how you got the images in the first place.
I'm trying to code my own, just using WebGL instead.


I got the floor tile images from google I think, you can download them from the thread i linked to in the last reply. The avatar images are spritesheets that looks like this
4K8w1im - [HTML5] Habbo5 [Typescript, Vue, Webpack, WebSocket] - RaGEZONE Forums


It's a temporary solution, but suits my cause for now. .
 

Attachments

You must be registered for see attachments list
Elite Diviner
Joined
Apr 5, 2014
Messages
464
Reaction score
223
Re: spaghetti html5

Needless to say there hasn't been many new additions here lately, but i'll have some cool new stuff to show the coming week hopefully. I am currently rewriting the client. Once that is done I can start adding in new stuff.

Here's some random animation math i was fiddling with on paper to get the avatars distance in pixels between two coordinates.
91hXF1L - [HTML5] Habbo5 [Typescript, Vue, Webpack, WebSocket] - RaGEZONE Forums
 

Attachments

You must be registered for see attachments list
Last edited:
Back
Top