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

[Leonson]

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.

Could you later on the process give us an example on how to add furniture with a handy dandy tutorial? And regarding to the clothing, does this mean people can only have preselected clothing combos? Or can they actually change their looks shoes, for example? If so, does this get changed any time in the future?

 

[spreedblood]

Could you later on the process give us an example on how to add furniture with a handy dandy tutorial? And regarding to the clothing, does this mean people can only have preselected clothing combos? Or can they actually change their looks shoes, for example? If so, does this get changed any time in the future?

This is a development not a release. He's focusing on the things he wants, eventually (hopefully) he'll be working changing clothes. He's trying to replicate Habbo, it's not really a small task. Give him a break.

 

[Konquer]

Could you later on the process give us an example on how to add furniture with a handy dandy tutorial? And regarding to the clothing, does this mean people can only have preselected clothing combos? Or can they actually change their looks shoes, for example? If so, does this get changed any time in the future?

Sure can do. Later on you will be able to change clothes like in Habbo, it just hasn't been a priority yet and to do it right is a big task.

 

[Leonson]

Will the clothing changing be apart of the big demo you want to get done asap? Or will it be less of an priority?

 

[Konquer]

Will the clothing changing be apart of the big demo you want to get done asap? Or will it be less of an priority?

Not sure. I want to do registration for the demo so will probably look into some cheesy way of doing avatargeneration then.

 

[tibasic]

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?

Here are two concepts I made:

In the first concept, I used the room-o-matic as a starting point. At step 1, you now get the option to change the maximum amount of visitors. At step 2, I changed the UI so that it is a scrollable list now. It's much faster to get to the layout you want this way.

This is the second concept using the UI layout from the flash client. The colour palette has been changed to match that of the room-o-matic. The title of the window has also been swapped out for the room-o-matic logo.

Both could work, but the old colour palette and style looks better in concept 1 (the old room-o-matic) in my opinion. Hope this helps with your decision-making.

 

[Troll Hotel]

maybe this is usefull for you

You must be registered to see links

 

[Konquer]

Here are two concepts I made:

In the first concept, I used the room-o-matic as a starting point. At step 1, you now get the option to change the maximum amount of visitors. At step 2, I changed the UI so that it is a scrollable list now. It's much faster to get to the layout you want this way.

This is the second concept using the UI layout from the flash client. The colour palette has been changed to match that of the room-o-matic. The title of the window has also been swapped out for the room-o-matic logo.

Both could work, but the old colour palette and style looks better in concept 1 (the old room-o-matic) in my opinion. Hope this helps with your decision-making.

Wow that's amazing! Thanks for taking the time to do that!

I think the bottom one would look really good with the "frame" of the old one (the yellow part)

can't wait to see what other people prefer between the two

 

[Emily]

Wow that's amazing! Thanks for taking the time to do that!

I think the bottom one would look really good with the "frame" of the old one (the yellow part)

can't wait to see what other people prefer between the two

To be honest I prefer the upper one. Just like the old look. I know you used the colors in the second one but for me it doesn't change much. Isn't it possible to make them 2 and being able to switch between both so people can choose what they want to use?

 

[Konquer]

Isn't it possible to make them 2 and being able to switch between both so people can choose what they want to use?

this is just a base really so people can change the design however they like very easily

 

[spreedblood]

this is just a base really so people can change the design however they like very easily

What about something like this?

Thanks to tibasic for the part in inside the frame.

 

[Konquer]

What about something like this?

Thanks to @tibasic for the part in inside the frame.

yeah something like that is exactly what i had in mind!



I'm also considering using this design for the bottom bar:

 

[spreedblood]

yeah something like that is exactly what i had in mind!



I'm also considering using this design for the bottom bar:

I personally enjoy the shockwave versions bottom bar.

 

[Konquer]

Once the core stuff is working we can redo the ui in

You must be registered to see links

or some other system so that it's super easy for someone to release a certain component e.g. the room o matic with a new style and then have people wanting to use it just download and drag and drop replace the component they already have for the new one.

No need to modify any code, simply just replace a folder/file and the style of only that component should be changed. Might be a fun little something that people with design skills in the community can contribute with.

Imagine how cool it would be to be able to change between oldschool, modern and custom UI's in real time through the client settings! or if the owner wants to limit it to a certain style that should be possible too

 

[Leonson]

Im so damn hyped for this! Any new improvements so far!?

 

[Emily]

This is probably the best development I've seen in a while. Hands down. Huge respect. I love the design of the screen, looks really good!

 

[Galago]

Are you planning to put the client on Github as well? I am really interested in how you code this.

 

[Konquer]

Avatars now disappear from rooms when they leave or disconnect

Are you planning to put the client on Github as well? I am really interested in how you code this.

Yes. As soon as the demo is up I will clean up the client a bit and open the repo.

I have a one week vacation the first week of September so I will probably try to get quite a bit done then

 

[nietsche]

I'm very curious, how do you get the images for the furniture? And the GUI?
You retrieve everything from SWFs or DCR files? How do you do this - and more importantly - how do you automate it?
Are there any existing forum threads about this?

Also, what emulator is the best for studying old versions of Habbo?
Any other recources you're using for building this HTML 5 clone?

Thanks a bunch!

 

[Konquer]

I'm very curious, how do you get the images for the furniture? And the GUI?
You retrieve everything from SWFs or DCR files? How do you do this - and more importantly - how do you automate it?

You must be registered to see links

has almost all the images extracted from the old dcr files so I get most of the images for e.g. the navigator there. For newer things I use an swf decompiler such as

You must be registered to see links

to extract individual images from the flash files. There's no automation.

Are there any existing forum threads about this?

There's some info on how to extract images with a decompiler here and there but i'm not aware of any dedicated tutorials or infoguides on it.

Also, what emulator is the best for studying old versions of Habbo?

If you want to specifically see how the packets etc are handled in the older versions you should probably use Kepler or another recent oldschool server as reference. If you just want look at an emulator to understand how they handle the core habbo functionality you can pretty much look at any well written emulator regardless of what version it's for.

Any other recources you're using for building this HTML 5 clone?

Don't look too much at the retro scene. Read up on how to create isometric games and browsergames in general, best practices for rendering, use of inheritance vs composition for your entity handling etc (if you're into that stuff ofc)

You must be registered to see links

is the article that got me started with it all, I suggest checking it out