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

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
• Daisy

Server:

• Nodejs
• Typescript
• Websockets
• Typeorm
• Worker Threads

Showcase

Spoiler:

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

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

Showcase (old version)

Spoiler:

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

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


https://image.ibb.co/irKo6y/zoom.gif


https://www.youtube.com/watch?v=MIYQ7h949zg


https://www.youtube.com/watch?v=KVX03ThMVbI

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

Nice name *u*

2018 - HTML Retro Habbos Age!
Great Job!

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.

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

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!

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

Quote:

---

Originally Posted by Roanoke

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.

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

Quote:

---

Originally Posted by Delight

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.

why have a blur when the player move to diagonals ?

Quote:

---

Originally Posted by Roanoke

why have a blur when the player move to diagonals ?

---

It's because of the screen capturer I used to create the gif. Guess it's to compress the file.

This looks good, man. Looks better than the other developments of the same (or similar) kind on here in recent memory.

For what its worth, Habbo uses 24FPS.

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.

Quote:

---

Originally Posted by The General

For what its worth, Habbo uses 24FPS.

---

That's actually very helpful, thanks!

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

Quote:

---

Originally Posted by FullmetalPride

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:
https://i.imgur.com/MYcjZgu.png
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.

https://i.imgur.com/EidBaFi.png

That explains why most carpets look stupid when stacked..

Do you have a public or private Git repository of some kind?
I'd like to look at how you've done it.

Quote:

---

Originally Posted by Delight

Do you have a public or private Git repository of some kind?
I'd like to look at how you've done it.

---

This is pretty much the same thing but without avatars. Source included.
http://forum.ragezone.com/f353/habbo...ngine-1138227/

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?

Quote:

---

Originally Posted by Konquer

This is pretty much the same thing but without avatars. Source included.
http://forum.ragezone.com/f353/habbo...ngine-1138227/

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?

---

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

Quote:

---

Originally Posted by Delight

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
https://i.imgur.com/4K8w1im.png

It's a temporary solution, but suits my cause for now. Here's the script that generates the spritesheet.

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.
https://i.imgur.com/91hXF1L.jpg

After some back and forth I have decided to use Vue js for the user interface. This allows me to modularize all the different UI components and inject them separately into the dom without the html file becoming a large mess. Another great thing about Vue is that it has its own maintained typeset for typescript, which is what this project is made with now.

​index.html
https://i.imgur.com/EJlfMXE.png


Generates this view
https://i.imgur.com/jDMYjWr.png

Lol, it's looks good, i hope that you create an public git soon :)

Quote:

---

Originally Posted by B3T4T3ST3

Lol, it's looks good, i hope that you create an public git soon :)

---

I am very open to sharing snippets of any code you might be interested in taking a look at. However, I don't want to open up the repo just yet.

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

Have been working on the navigator component today. I really like this design, but i'm probably going to change it up a little bit to get more info in there such as amount of users in room etc.

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

Jabbo pretty much sums up what I want the userinterface to look like, so i'm just grabbing images from there:love:

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

I'd like to get some feedback regarding room'o matic and the inventory. What's your opinion on the original hand vs the new styles inventory?

I want to keep it as oldschool as possible, but perhaps someone would like to hop on with me and try to design an oldschool looking but also more functional and userfriendly inventory and room creator? I'm open to all suggestions!

Maybe the big hand with search option and stackable items :} (like an mix of new inv. and old inv)

Quote:

---

Originally Posted by B3T4T3ST3

Maybe the big hand with search option and stackable items :} (like an mix of new inv. and old inv)

---

Yea, I was thinking that maybe the hand would turn out good if make items stackable in it. But having to scroll through 9 items at a time when you're building with 200 different is probably going to be a pain in the arse.

Entering/Leaving rooms from the navigator now works and users are able to see each other enter, move around and leave rooms.

Animations now look and behave the same regardless of what your fps and monitors refresh rate is.

(The gif is only 10fps)https://i.imgur.com/VvK5eLB.gif

@CUS7OM has been making some concept designs that I really like. I'll let him show them himself if he's ready/wants to.

As @Konquer said, this is just concept and sketching, there's a lot of details to improve.

Here are 4 screenshots of some previews.

The intention is to develop a theme system on the client (long term priority as the core must be done first) that allows the user to switch between the UI Design, I find it interesting and it has even happened on the retro scene with the switch to the 'black UI'.

Cheers and implausible project from this guy.

Very interested in this project, and I want to join to develop with you. I am web developer.

adding/removing tiles on the fly

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

I'll stick to replicating habbo's features for now though. Must resist temptation to implement random shit..

I also love the doors/opportunities that are opened with this kind of development.

Add stairs.

Stairs might be a interesting challenge. Did Jabbo have it?

Been working on furniture and depth mapping lately and am almost done with that so stay tuned for some updates soon. Got a bit sidetracked by the stairs tonight and thought I could get that implemented fairly quickly. Turns out I am not able to find all the stair sprites after a quick search so if anyone's got an idea where they are hidden, please share:love: I'll finish them once I get ahold of the sprites, but here's a little preview

https://i.imgur.com/QbUVD3a.png

I actually don't have the original tile sprites either, which is why they look a little bit choppy on the left edge of the room. Pretty sure I just cut around a screenshot from habbo in photoshop, that's also what I did with the stair sprite i'm using now.

Quote:

---

Originally Posted by Konquer

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
https://i.imgur.com/4K8w1im.png

It's a temporary solution, but suits my cause for now. Here's the script that generates the spritesheet.

---

If you want, I have a similar ActionScript spritesheet generator in my Hadley project on GitHub. Use it as a reference point for your JS rather than PHP!

https://github.com/hqkirkland/Hadley...game/Avatar.as


I think this is the script^

Will be very interesting to see those avatar spritesheets if you plan to implement head direction at some stage.

IMO, javascript should handle more of the sprite drawing. But natural to maybe not think about this right now at this stage of development.

Quote:

---

Originally Posted by FullmetalPride

If you want, I have a similar ActionScript spritesheet generator in my Hadley project on GitHub.

---

Awesome, i'll check it out later!

Quote:

---

Originally Posted by seanrom

Will be very interesting to see those avatar spritesheets if you plan to implement head direction at some stage.

---

Yes, I haven't been very clear on this matter. I can't be using spritesheets for avatars in the long run so i'm hopefully going to end up creating a layering system much like habbo has today. However, this will require a lot of time and tinkering so i'm trying to avoid it for now. I'd much rather focus on making a somewhat playable replica of Habbo in a short amount of time, rather than a best-practice game after a longer period of time.

I do however, with everything I implement, plan ahead to make it easy to integrate stuff later on. Hence why I am able to add stuff like stairs very quickly.

Pretty much done with stairs. Have to add vertical movement transitions and make the hover effect go on the correct height. And yes, i'm still using sprites from a screenshot, hence why it looks awful some places.

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

The stairs in the bottom left are missing a connection going from left to right and the stairs look like 1 pixel thick. You don't want your Habbo to accidentally fall through it :P:

Also Habbo doesn't use sprites for the rooms (Except the door). They're all just polygons being drawn as then its easier to map textures to it.

Quote:

---

Originally Posted by Konquer

Pretty much done with stairs. Have to add vertical movement transitions and make the hover effect go on the correct height. And yes, i'm still using sprites from a screenshot, hence why it looks awful some places.

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

---

this is awesome, keep it up.
tbh though, I think you should try to add the latest navigator and stick to the newest gui.

You really need to get the chairs sprite. The way you are walking from those stairs don't really look nice.


Keep it up you're getting along really nice.

Verstuurd vanaf mijn SM-G930F met Tapatalk

This is very cool! Would love to the the source of this, I've been using Vue.js heavily recently and it would be interesting to see how someone else has approached it. Good luck!

Really impressive work, @Konquer. I really hope this project goes until the end. If you want some help, call me, I would love to help.

But before that, I need finish my own *homework* (aka Chocolatey) oh god.

A really nice development you have going on here.

Nice concept, can't wait for this to be done!

off topic: By any chances, are you Poma from HabboMe? :O

Furniture next?

So.. dead development?

Quote:

---

Originally Posted by B3T4T3ST3

So.. dead development?

---

Enjoying the holidays. Will get back to everyone that have pm'ed me regarding this in a few days.

Cant wait for this :w00t:.. Any news?

Taking a break from this to focus on my professional tetris career. Thread can be closed until further notice o/

Here's the source

@Quackster

This little gem has been dusting on my shelf for half a year now.. time to bring it some much desired love.

• Client now requests rooms from the different navigator tabs properly
• Rounded canvas draw coordinates to the nearest decimal to avoid entities being blurry when applying movement animations
• Added an fps cap to entity movement because moving avatars at 144fps looks unnatural and unlike Habbo
• Prototyping furnitures (more below)

Here's some insight on how i'm planning to do furniture and how it is currently.

1. Most furniture will typically consist of a script file and a spritesheet (both loaded on demand ofc)
2. The scriptfile will be eventbased. This means that future more complex furniture can be made simply by exposing new events to the scripts instead of modifying some global item interface that all furniture depend on. Imagine wanting to create the tent furnitures but we have no way of checking when the user is in the tent to change the sprite to show the inside. No problem, just expose an onAvatarWalkEvent and let the furniture scripts subscribe to it.
3. The scriptfile will have access to the entire application, so your furniture can basically do.. whatever you want them to do. Much like a plugin system would work.

Example of a simple pineapple furniture

https://i.imgur.com/aS0zWfc.png

https://i.imgur.com/j57H8qk.png

Items are made out of itemparts. Each square has a renderstack of entities. Each itempart, like avatars, are added to its respective renderstack (chosen in the furniture script with coordinates relative to the parent items coordinates). This is currently how depth mapping is achieved. Having multiple itemparts is necessary because different sprites have to be rendered from different renderstacks to mimic habbo's rendering style where furniture with a size larger than 1 square can overlap furniture on other tiles.

it's 06am i need sleep, here's a gif for your entertainment. will add some more furniture tomorrow with different sizes

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


oh and yeah decided to ditch typescript for furniture scripts as most people probably prefer plain js. also nice to have more options, now you can create furnitures with whatever language you want as long as it compiles down to js

here's how the pineapple plant script from the gif above looks now

https://i.imgur.com/c5OyDNx.png

Quote:

---

Originally Posted by m.tiago

Woww amazing project bro..

---

thank you :)


made some changes to avatars movement animator to make it work with any type of entity

works the same way as on habbo for avatars, rollers, wired movement etc where the entity flies to the target destination over x milliseconds so the travel speed is relative to distance

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

- - - Updated - - -

Now we're getting somewhere!

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


As the gif shows we now have the desired effect i talked about earlier in the thread where the pineapple can partially overlap the furni it is under if it's a part of a different renderstack:

https://i.imgur.com/MYcjZgu.pnghttps://i.imgur.com/EidBaFi.png


Furniture are pretty much complete whenever I get around to doing "chair logic" (single item with multiple itemparts in the same renderstack) but i believe habbo just uses absolute z indexing for all of those kinds of furniture so it shouldn't be a problem.

here's what a furniture script for the lodge divider looks like. it's basically just saying that we want to create an extra itempart 1 square down relative to the items base coordinate on the x axis

https://i.imgur.com/FJKkWlZ.png

Currently have converted all the plant items and most of the lodge items. Takes about 5 minute per 10 furniture or so, depending on the complexity of the furniture.

Man this is awesome! I really hope this development will be finished and released.

Starts to lag at ~5000 furniture but this is without any kind of optimization so.. life is good.


The delay is for demonstrational purposes, they could all be placed instantly.

https://image.ibb.co/irKo6y/zoom.gif


Script used:

Code:

---

let total = 0;
let x = 0;
let y = 0;
let height = 0;
setInterval(() => {
    if(total < 2000) {
        Habbo.Room.SpawnItem('plants.pineapple', x, y, height / 2);


        if(y >= 20) {
            y = 0;
            height++;
        }


        if(total > x * 500) {
            x++;
            height = 0;
        }


        y++;
        total++;


        console.log('total furniture:', total);
    }
}, 5);

---

Does the framerate go back to normal after you're done placing all the furniture?

Quote:

---

Originally Posted by The General

Does the framerate go back to normal after you're done placing all the furniture?

---

No. All entities gets redrawn every frame even if they're not visible so there's definitely room for improvements.

Even the tiles gets redrawn every frame ¯\_(ツ)_/¯

Awesome job! Hope to see more updates

Did you use any info to generate those furni scripts?

Quote:

---

Originally Posted by Relevance

Awesome job! Hope to see more updates

Did you use any info to generate those furni scripts?

---

Thanks!
By info do you mean documentation on how to create the furniture scripts?

here's the code that runs when a new item is created
https://i.imgur.com/NY48Kba.png

Quote:

---

Originally Posted by Konquer

Thanks!
By info do you mean documentation on how to create the furniture scripts?

here's the code that runs when a new item is created
https://i.imgur.com/NY48Kba.png

---

I mean how to create the furniture scripts :)

https://i.imgur.com/FJKkWlZ.png
Where did those values came from?

Nice code tho

Quote:

---

Originally Posted by Relevance

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

Spoiler:

https://i.imgur.com/4ud6VKo.png

Animator.ts

Spoiler:

https://i.imgur.com/gkOZkwS.png

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.

Quote:

---

Originally Posted by The General

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.

Quote:

---

Originally Posted by Konquer

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:

https://i.gyazo.com/2d85e73e33770822...17ac69fd06.png

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)

Quote:

---

Originally Posted by The General

Was mostly wondering about this:

https://i.gyazo.com/2d85e73e33770822...17ac69fd06.png

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.

Quote:

---

Originally Posted by The General

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)

Quote:

---

Originally Posted by The General

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.

Quote:

---

Originally Posted by The General

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!
https://i.imgur.com/nJ4Bzas.png

Quote:

---

Originally Posted by The General

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.

Quote:

---

Originally Posted by The General

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

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

Repo

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

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.

Quote:

---

Originally Posted by Konquer

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

aside from redoing the server the last couple of days i have made some progress on the login/register part of the client.

https://cdn.discordapp.com/attachmen...60951/zoom.gif

i can't remember what happens when you enter a wrong username and password. where does the error message appear if any?

Quote:

---

Originally Posted by Konquer

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. (https://encrypted-tbn0.gstatic.com/i...dKzWApZBKXf-KQ)

Quote:

---

Originally Posted by streamhotel

When a wrong password/username is entered then you’ll get an alert window. (https://encrypted-tbn0.gstatic.com/i...dKzWApZBKXf-KQ)

---

aha, thanks!

Pfft, looks great! I love the progress I'm seeing :D

login complete

https://i.imgur.com/5oAXzWc.gif

Quote:

---

Originally Posted by Konquer

login complete

https://i.imgur.com/5oAXzWc.gif

---

Progress looking great keep up! Can't wait to see more, definetely one of the more fun developments in the scene.

the new server can load and forward users to rooms now

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


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?


https://i.imgur.com/GoIx6l9.png


https://i.imgur.com/SLLPm6e.png

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.

Quote:

---

Originally Posted by Daniel204

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:

Quote:

---

Originally Posted by Konquer

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

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.

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.

Quote:

---

Originally Posted by seanrom

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.

Quote:

---

Originally Posted by Leonson

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

Quote:

---

Originally Posted by Konquer

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?

Quote:

---

Originally Posted by Leonson

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. :P

Quote:

---

Originally Posted by Leonson

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.

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

Quote:

---

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

---

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

Quote:

---

Originally Posted by Konquer

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:

https://i.imgur.com/NiPgcU2.jpg

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.

https://i.imgur.com/fpKJlam.png

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

maybe this is usefull for you Habbo Standalone Avatar Generator | HABOX LABS

Quote:

---

Originally Posted by tibasic

Here are two concepts I made:

https://i.imgur.com/NiPgcU2.jpg

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.

https://i.imgur.com/fpKJlam.png

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

Quote:

---

Originally Posted by Konquer

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?

Quote:

---

Originally Posted by Navine

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

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