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
I mean how to create the furniture scripts :)

Where did those values came from?


They are properties/methods of the item class. The onCreate function in each furniture script is ran on item instantiation and gives the script access to the Item instance. The item instance has the method createItemPart which instantiates and returns a new object of the ItemPart class which again has an animator assigned to it that the script can access and add frames to.


ItemPart.ts
4ud6VKo - [HTML5] Habbo5 [Typescript, Vue, Webpack, WebSocket] - RaGEZONE Forums

Animator.ts
gkOZkwS - [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
Can't you re-use the image objects? Just draw them at different locations. Like for Habbo it only loads the SWFs once.

//I dont know vue / javascript.

Having a cache for the Image object on a per furniture basis is a nice idea. Webpack already caches the furniture script and the spritesheet png so those never gets downloaded more than once but your suggestion would indeed save a bit of memory by not instantiating a new Image object for every item spawned and is definitely better practice.
 
Joined
Aug 10, 2011
Messages
7,401
Reaction score
3,299
Having a cache for the Image object on a per furniture basis is a nice idea. Webpack already caches the furniture script and the spritesheet png so those never gets downloaded more than once but your suggestion would indeed save a bit of memory by not instantiating a new Image object for every item spawned and is definitely better practice.

Was mostly wondering about this:

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


Because then every furniture object gets the same image imported probably eating up a lot of memory. If you say make a Furniture class like this:

Code:
class Furni
    prop ImageSet* <- Pointer to the imageset for the furniture, load once
    prop x
    prop y
    prop z
    prop state
    prop rotation

   func draw()
        use Imageset->getImages(state, rotation) to draw on x/y/z location.

You don't need to import the images everytime you make a new instance of the furniture.

I am assuming you are sticking to Habbos 24fps?
Have you tried loading in bigger furniture (say the schoolbus) and see how well that performs?
Is there an easy way to see CPU time for functions?
Is this using OpenGL & GPU rendering? If so how does it perform on CPU only?

If you are running 60fps and you're already having issues at 5k furniture, I feel like you should see if you can improve that. I'm sure you can get a much better results than flash. (I can make the Flash client run 60fps, which looks really great)
 

Attachments

You must be registered for see attachments list
Elite Diviner
Joined
Apr 5, 2014
Messages
464
Reaction score
223
Was mostly wondering about this:

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


Because then every furniture object gets the same image imported probably eating up a lot of memory. If you say make a Furniture class like this:

Code:
class Furni
    prop ImageSet* <- Pointer to the imageset for the furniture, load once
    prop x
    prop y
    prop z
    prop state
    prop rotation

   func draw()
        use Imageset->getImages(state, rotation) to draw on x/y/z location.

You don't need to import the images everytime you make a new instance of the furniture.

Webpack compiles all furniture assets (scripts and sprites) into module files (javascript format) so when a a dynamic import is made like in the image above it checks "is a module with this path already loaded?" if it is use that, if not download and load it. Webpack is really smart so when i write import "furniture/container/sprites/id.png" it actually looks up something like public/build/module18.js because that's the module that was generated from that url upon module compilation.



I am assuming you are sticking to Habbos 24fps?

The fps is uncapped so whatever your monitors refreshrate is will be your max potential fps. However the update cycle handling which frame of the avatars/furnis to use is currently running ~58 times a second. Uncapping that cycle made the avatars glide around with no jitter like we see on Habbo. The fps is not capped to the same amount as that cycle because you should still be able to drag the UI and see chatbubbles move etc with as good fps as you can get. (144hz monitor makes a big impact on the UI experience)




Have you tried loading in bigger furniture (say the schoolbus) and see how well that performs?

I'm not sure how the schoolbus is but as a rule any furni that has separate images for separate squares will always be more heavy than a 1x1 furni. 1 Lodge divider = 2 pineapples in terms of performance so schoolbus would probably be 6 pineapples or so unless it's all one big image.



Is there an easy way to see CPU time for functions?

Chrome has a neat profiling devtool that let's you record frames over a period of time and shows time spent on each function execution etc both at a specific frame or as an average over the time period spent recording. The great part is that even though the typescript is transpiled to js and the js is bundled and minified we can still get references to the actual typescript file and line number due to source mapping!
nJ4Bzas - [HTML5] Habbo5 [Typescript, Vue, Webpack, WebSocket] - RaGEZONE Forums





Is this using OpenGL & GPU rendering? If so how does it perform on CPU only?

No WebGL/GPU boost but it could be possible to benefit from GPU's in the future by using libraries like gpujs with webworkers. For now it's only CPU based.



If you are running 60fps and you're already having issues at 5k furniture, I feel like you should see if you can improve that. I'm sure you can get a much better results than flash. (I can make the Flash client run 60fps, which looks really great)

I understand your concern and I agree it's not optimal atm. However I am not currently using any rendering techniques to boost performance, everything that exists gets handled and rendered even if it's out of screen or hidden from view or doesn't need rerendering. There's lots of optimizations that can be made so i'm not worried about spending a lot of time on this and then realizing that the performance can't be improved, it most certainly can :)

With that said tho.. I am really impressed that it can handle this amount of load before decreasing in performance at this stage in development and I feel like I can focus on implementing core features of the game rather than spending time trying to improve the renderer at this point in time. I'm sure most people would be more stoked to have a fully functional demo with room creation, chatting etc than less features but better performance seeing that most rooms will not reach the threshold for performance loss anyway.

Thanks for showing interest! :)
 

Attachments

You must be registered for see attachments list
Last edited:
Elite Diviner
Joined
Apr 5, 2014
Messages
464
Reaction score
223
Will be redoing the server again, this time in coffeescript. No great explanation behind it, I just like coffeescript and it is something I won't grow bored of.

It will be using mongodb in the cloud so that I can do continous deployments of the demo to heroku



---------------

Current plan is to get a demo with the following features up and running asap

  • Authentication
  • Registering
  • Room navigation
  • Room 'o matic (room creation)
  • Chatting
  • Walking
  • Furniture

I hope that with these features done someone would actually want to pick up the development or create their own version of it if I grow bored and take a long break again. Last time it didn't really get used at all but it was pretty much only an engine at that point.

And I hear you.. "if you wan't someone to pick this up at some point why not create the server in something the community is familiar with?". Ya'll are emulator developers, you can make your own version of the server in a couple of days in whatever language you prefer. It's way less complicated than creating (heck, even editing) an emulator for Habbo.
 
Joined
Aug 10, 2011
Messages
7,401
Reaction score
3,299
I hope that with these features done someone would actually want to pick up the development or create their own version of it if I grow bored and take a long break again. Last time it didn't really get used at all but it was pretty much only an engine at that point.

Write down what you want to do in as small tasks as possible. Once you are you done with a task you can strike it through and this will help you motivate to continue.
By keeping these tasks as small as possible you will give yourself the idea that you get a lot done and it will help you to continue :):
 
Elite Diviner
Joined
Apr 5, 2014
Messages
464
Reaction score
223
aside from redoing the server the last couple of days i have made some progress on the login/register part of the client.

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


i can't remember what happens when you enter a wrong username and password. where does the error message appear if any?
 
Joined
Apr 17, 2012
Messages
508
Reaction score
77
aside from redoing the server the last couple of days i have made some progress on the login/register part of the client.

i can't remember what happens when you enter a wrong username and password. where does the error message appear if any?
When a wrong password/username is entered then you’ll get an alert window. ( )
 
Elite Diviner
Joined
Apr 5, 2014
Messages
464
Reaction score
223
the can load and forward users to rooms now

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



I have been going back and forth on how I want the room 'o matic to be. I for sure want it to look like the oldschool one but i'm not sure if it should be exactly the same or different in the same style. Could be cool to make it more like how it is on Habbo today but with the old green and yellow style. What do you think?


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



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

Attachments

You must be registered for see attachments list
Initiate Mage
Joined
Jul 30, 2018
Messages
24
Reaction score
0
There are lots of information about latest technology and how to get trained in them, like this have spread around the web, but this is a unique one according to me.
 
Elite Diviner
Joined
Apr 5, 2014
Messages
464
Reaction score
223
There are lots of information about latest technology and how to get trained in them, like this have spread around the web, but this is a unique one according to me.
thanks, i think :ehh:
 
Junior Spellweaver
Joined
Jun 8, 2008
Messages
174
Reaction score
24
thanks, i think :ehh:

Judging by the signature looks like it's just spam in order to get backlinks to their website :sneaky2:

But yeah, I think a new-but-old style would be quite cool. Getting it to look right is going to be a pain though.

Can't wait to see what you come up with :D
 
☮TAKU????
Member
Joined
Nov 16, 2009
Messages
866
Reaction score
580
Very cool to see this development running agian. And some great progress too. An idea to get the community to work on completing all the furni classes? That way you can focus more on the logic/core stuff? I'm willing todo some.
 
Initiate Mage
Joined
Apr 30, 2012
Messages
26
Reaction score
0
I may be a total noob but,

If I were to use this, could you possibly explain me how to add new furniture and clothing on this project? Because I really, really seem to be interested.
 
Elite Diviner
Joined
Apr 5, 2014
Messages
464
Reaction score
223
Very cool to see this development running agian. And some great progress too. An idea to get the community to work on completing all the furni classes? That way you can focus more on the logic/core stuff? I'm willing todo some.

Hey, nice to see you back here again too :) Yeah for sure would be cool if this could be a bit community driven down the line.

I'm a bit hesitant to add loads of furni at this point just in case i want to change how it works later but maybe sometime in the near feature we can start adding most of the classic furnitures. Probably not a superhard task to create a tool that converts swf furnis into compatible ones too.



I may be a total noob but,
If I were to use this, could you possibly explain me how to add new furniture and clothing on this project? Because I really, really seem to be interested.

To add a furniture you would create a spritesheet containing all the images for that furni and a javascript file with some definitions of where to find the sprites, when and where to draw them (examples of that js file can be found a bit back in the thread)

As for clothing there's no way to do anything with that yet. It's currently giving users a random figure out of 10 pregenerated spritesheets (script for the spritesheet generation can also be found further back in the thread)


---------------------------


the new server is ahead of the old one now, time to add new stuff :)
 
Back
Top