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

Quote:

---

Originally Posted by Konquer

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

---

What about something like this? :P
https://i.imgur.com/4fq1ryM.jpg

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

Quote:

---

Originally Posted by spreedblood

What about something like this? :P
https://i.imgur.com/4fq1ryM.jpg

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:

http://i.imgur.com/iHf5G.png

Quote:

---

Originally Posted by Konquer

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



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

http://i.imgur.com/iHf5G.png

---

I personally enjoy the shockwave versions bottom bar.

Once the core stuff is working we can redo the ui in webcomponents 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 :)

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

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!

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

Avatars now disappear from rooms when they leave or disconnect

https://i.imgur.com/mFkZ8WJ.gif

Quote:

---

Originally Posted by Galago

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

---

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 :)

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!

Quote:

---

Originally Posted by 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?

---

This project 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 Trillix to extract individual images from the flash files. There's no automation.

Quote:

---

Originally Posted by nietsche

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.

Quote:

---

Originally Posted by nietsche

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.

Quote:

---

Originally Posted by nietsche

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)


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

Quote:

---

Originally Posted by Konquer

This project 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 Trillix to extract individual images from the flash files. There's no automation.

---

I've got a specific question about furniture: when you extract the images from the flash files, how does the client know how to place them correctly - I mean, not too high, not too far to the left etc. Is this info somwhere in the swfs?

EDIT: i've tried Trillix on an SWF and this info seems to be there, but do you know how to read the values?

Also do you plan on adding the shadows? And how does colouring the furniture work?
Lots of questions :P

Quote:

---

Originally Posted by Konquer

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.

---

Is this the most advanced emulator? I mean, does it have photos and battleball for example?

Thanks for your swift reply!

Quote:

---

Originally Posted by nietsche

I've got a specific question about furniture: when you extract the images from the flash files, how does the client know how to place them correctly - I mean, not too high, not too far to the left etc. Is this info somwhere in the swfs?

---

Here's a tool that lets you see (and edit) the positional values of furniture. I don't use it for this but i did use it back when i ran hotels to edit furniture and works like a charm.

What I did for the furniture that are in habbo5 currently is
1. extract the images from the swf
2. throw them in some spritesheet/atlas generator (i use this one)
3. create the furniture script and guesstimate the position values. it's not too hard to guess what offsets they should have because you can sort of tell by looking at the width/height differences etc and then after 2-3 changes they usually have the correct positions.

probably worthwhile to create a tool for this though.. that's just how i did it to get a few furnis in to test them

Quote:

---

Originally Posted by nietsche

Also do you plan on adding the shadows?

---

they can already be added in the furniture script by setting their position relative to the tile coordinate. i was just lazy :P

Quote:

---

Originally Posted by nietsche

And how does colouring the furniture work?

---

can also be done in the furniture scripts as the imagedata is exposed there. it also wouldn't hurt anyone to add 10 colored dragons to the same spritesheet, since it's a single image and not 10 different images it's only like 2kb extra or something

Quote:

---

Originally Posted by nietsche

Is kepler the most advanced emulator? I mean, does it have photos and battleball for example?

---

Haven't got a clue. It has the camera but i don't think it has battleball. Don't really know anything about it other than what people say about it on the forums. Seems to be really good though :)

Quote:

---

Originally Posted by Konquer

Here's a tool that lets you see (and edit) the positional values of furniture. I don't use it for this but i did use it back when i ran hotels to edit furniture and works like a charm.

What I did for the furniture that are in habbo5 currently is
1. extract the images from the swf
2. throw them in some spritesheet/atlas generator (i use this one)
3. create the furniture script and guesstimate the position values. it's not too hard to guess what offsets they should have because you can sort of tell by looking at the width/height differences etc and then after 2-3 changes they usually have the correct positions.

probably worthwhile to create a tool for this though.. that's just how i did it to get a few furnis in to test them

---

Cool!
Are you familiar with this thread? Just found out about it.

http://forum.ragezone.com/f353/furni...ormat-1143616/

Seeing this really intrigues me to pick up on my own project (http://forum.ragezone.com/f331/pixel...xi-js-1022627/). I also built a Habbo version in HTML5 with Joery. We used plain javascript for everything, not even a framework. Also, the whole UI Was in the canvas. There are still some old pictures online in the thread. The videos and most gifs are dead though. The server was written in NodeJS, but wasn't near to finished when we left the project 3 years ago.


I'd like to join this project if that'd fit for you. Please contact me via PM or Telegram (@ankilo)

Whats the FPS if you disable hardware acceleration?