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!
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
You must be registered to see links
Server:
Nodejs
Typescript
Websockets
Typeorm
Worker Threads
Showcase
Showcase (old version)
Leaving feedback is a great way of contributing as it helps encouraging the developer to keep working on the project.
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.
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!
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.
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.
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.
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:
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.
That explains why most carpets look stupid when stacked..
I'm not sure what exactly you're asking for. The front end part as in how the images are drawn onto the canvas or as in how to get the images in the first place?
I'm not sure what exactly you're asking for. The front end part as in how the images are drawn onto the canvas or as in how to get the images in the first place?
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
It's a temporary solution, but suits my cause for now.
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.