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
Re: spaghetti html5

After some back and forth I have decided to use 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 , which is what this project is made with now.

index.html
EJlfMXE - [HTML5] Habbo5 [Typescript, Vue, Webpack, WebSocket] - RaGEZONE Forums



Generates this view
jDMYjWr - [HTML5] Habbo5 [Typescript, Vue, Webpack, WebSocket] - RaGEZONE Forums
 

Attachments

You must be registered for see attachments list
Last edited:
Elite Diviner
Joined
Apr 5, 2014
Messages
464
Reaction score
223
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.

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


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!
 

Attachments

You must be registered for see attachments list
Elite Diviner
Joined
Apr 5, 2014
Messages
464
Reaction score
223
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.
 
Elite Diviner
Joined
Apr 5, 2014
Messages
464
Reaction score
223
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)
VvK5eLB - [HTML5] Habbo5 [Typescript, Vue, Webpack, WebSocket] - RaGEZONE Forums


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

Attachments

You must be registered for see attachments list
Last edited:
Initiate Mage
Joined
Apr 16, 2014
Messages
58
Reaction score
29
As @Konquer said, this is just concept and sketching, there's a lot of details to improve.

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.
 
Initiate Mage
Joined
Dec 20, 2012
Messages
22
Reaction score
2
Very interested in this project, and I want to join to develop with you. I am web developer.
 
Elite Diviner
Joined
Apr 5, 2014
Messages
464
Reaction score
223
adding/removing tiles on the fly

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


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

Attachments

You must be registered for see attachments list
Last edited:
☮TAKU????
Member
Joined
Nov 16, 2009
Messages
866
Reaction score
580
I also love the doors/opportunities that are opened with this kind of development.
 
☮TAKU????
Member
Joined
Nov 16, 2009
Messages
866
Reaction score
580
Stairs might be a interesting challenge. Did Jabbo have it?
 
Elite Diviner
Joined
Apr 5, 2014
Messages
464
Reaction score
223
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

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


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.
 

Attachments

You must be registered for see attachments list
Ask me about Daoism
Member
Joined
Nov 6, 2010
Messages
1,560
Reaction score
393
Re: spaghetti html5

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
4K8w1im - [HTML5] Habbo5 [Typescript, Vue, Webpack, WebSocket] - RaGEZONE Forums


It's a temporary solution, but suits my cause for now. .

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!




I think this is the script^
 

Attachments

You must be registered for see attachments list
☮TAKU????
Member
Joined
Nov 16, 2009
Messages
866
Reaction score
580
Re: spaghetti html5

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.
 
Elite Diviner
Joined
Apr 5, 2014
Messages
464
Reaction score
223
Re: spaghetti html5

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

Awesome, i'll check it out later!

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.
 
Elite Diviner
Joined
Apr 5, 2014
Messages
464
Reaction score
223
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.

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

Attachments

You must be registered for see attachments list
Joined
Aug 10, 2011
Messages
7,401
Reaction score
3,299
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.
 
Junior Spellweaver
Joined
Feb 6, 2013
Messages
196
Reaction score
25
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.

cjR4yOu - [HTML5] Habbo5 [Typescript, Vue, Webpack, WebSocket] - RaGEZONE Forums
this is awesome, keep it up.
tbh though, I think you should try to add the latest navigator and stick to the newest gui.
 

Attachments

You must be registered for see attachments list
Initiate Mage
Joined
Dec 19, 2017
Messages
20
Reaction score
4
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
 
Back
Top