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!

Project Igloo: Habbo in HTML5/Canvas [Pixi.JS / VueJS / Bootstrap4 / WebSockets]

Initiate Mage
Joined
Feb 25, 2018
Messages
30
Reaction score
39
Project Igloo: Habbo in HTML5 [Phaser3/VueJS/Bootstrap/WebSockets/Java/Jetty/Postgre]

XoV2Wqv - Project Igloo: Habbo in HTML5/Canvas [Pixi.JS / VueJS / Bootstrap4 / WebSockets] - RaGEZONE Forums

What is Igloo?
Igloo is an hobby project I'm developing in my free time: is an Habbo-game client reproduction made in HTML5/CSS3/JS. The purpose of this project is, for me, the opportunity to learn new and modern web technologies, and second to make my version of Habbo, where finally we're free to edit client functions and extend the game with many functions and concepts that would otherwise be impossible to implement in the original client.

What technologies are you using?
Actually I'm using these frameworks and libraries to help the development:

  • Phaser.io for the Isometric engine (renders in Canvas)
  • Vue.JS+Bootstrap4+FontAwesome for the User Interface (rendered as DOM)
  • Java+Jetty+PostgreSQL for the Server part

I don't have definitive plans for the Server part of the game, because I don't have much experience in the backend side (probably I will search someone to help me in this) but my plans are to use WebSocket (via a library like Socket.IO or similars) and make a Node.JS or Java+Netty server. Not true anymore.

State of the development
Actually, the isometric engine is at good point, I've made already many modifications to Traviso to get similar to how Habbo renders it's game.

There's objects, movable characters, map generation but there's to implement :
  • Height/stacking
  • Dynamic wall generation (actually defined in the roommap)
  • Better sprite assets loading (actually I'm using the default Pixi.js assets loader, that loads every object from a single sprite image, I need to make it load from multiple sprite images, one for every object)

I've started the GUI only some days before, so actually we have only the userbar and the Windowing system: I'm already learning Vue, so I'm going slow also because I'm attempting to have the best structure for the game, actually I'm struggling with the events because I've modularized every part of the GUI, splicing them into Single File Components, so now I'm thinking about using a Global Bus for child component events.

Screenshots

5ea37f569b699335d33f729d066c0fe2 - Project Igloo: Habbo in HTML5/Canvas [Pixi.JS / VueJS / Bootstrap4 / WebSockets] - RaGEZONE Forums


bd9628941ddb081e2ef4f27553c06bb4 - Project Igloo: Habbo in HTML5/Canvas [Pixi.JS / VueJS / Bootstrap4 / WebSockets] - RaGEZONE Forums
 

Attachments

You must be registered for see attachments list
Last edited:
Developer
Developer
Joined
Dec 11, 2010
Messages
2,955
Reaction score
2,685
Not sure how I didn't see this, I apologise. Good luck! :):

Although this thread is already 2 weeks old, I'd like to see more updates soon.
 
Initiate Mage
Joined
Feb 25, 2018
Messages
30
Reaction score
39
Hi,
thank you for approval.

In the last weeks I've found another guy that is helping me with the Server part of the game.

As architecture choice, we've decided to make the Server in Java (using Eclipse Jetty library) because of JVM multiplatform support (and because I know Java, so I could also help on Server part).

Small progress on the Client part, because I'm waiting to complete some aspects of Server/Client JSON communication so I could make some tests with Vue receiving async data.

We're only thinking about if to switch from Traviso (which could limitate us because is already a complete Isometric library) to something entirely written from us, only using Pixi.js or Phaser as framework, so avoiding to working with raw Canvas.
 
Experienced Elementalist
Joined
May 30, 2013
Messages
288
Reaction score
242
I recommend not implementing a server and instead building on what we already got. Implement Sulake's FUSE protocol (either binary or text form, or both) on the client side, then communicate TCP to an emulator via .
 
Initiate Mage
Joined
Feb 25, 2018
Messages
30
Reaction score
39
I recommend not implementing a server and instead building on what we already got. Implement Sulake's FUSE protocol (either binary or text form, or both) on the client side, then communicate TCP to an emulator via .
Tbh, I think that sticking to an old packets structure/protocol, conceived and developed into 2000's for Shockwave/Flash sockets and when connections were slower is only a waste of work when we can use a modern notation like JSON that is JS native, more powerful and speeds up the development, because is widely supported as a standard also on Servers libraries.

Also, I want to make a creative work, not an Habbo-client reverse engineering.

Inviato dal mio SM-G950F utilizzando Tapatalk
 
Experienced Elementalist
Joined
May 30, 2013
Messages
288
Reaction score
242
... is only a waste of work when we can use a modern notation like JSON that speeds up the development ...
A waste of work would be reimplementing all game-logic and reinventing an protocol.

Also, I want to make a creative work, not an Habbo-client reverse engineering.
Wrong forum, mate.
 
Initiate Mage
Joined
Feb 25, 2018
Messages
30
Reaction score
39
As going on with the development, we understood that Traviso was becoming an obstacle because of poor documentation.
So we decided to write a little Isometric engine that was tailored on our needs.

So we switched from Pixi.js to Phaser, because we wanted anyway the support of a framework (working with raw canvas is really a pain).

Phaser is also more complete than Pixi.js, so our work should go on really fast. More screenshots soon.

In any case, Vue.js will continue to be our framework for the GUI.

Inviato dal mio SM-G950F utilizzando Tapatalk
 
Initiate Mage
Joined
Apr 30, 2012
Messages
26
Reaction score
0
Hi Mattheus! By some googlimg i came across ths from 2014



Is this the inspiration/base of thia current project? Love to here how that story got to end! Is it finshed even?
 
Last edited:
Initiate Mage
Joined
Feb 25, 2018
Messages
30
Reaction score
39
Hi Mattheus! By some googlimg i came across ths from 2014



Is this the inspiration/base of thia current project? Love to here how that story got to end! Is it finshed even?

This was a precedent project I was working on, but I stopped it because at that time the HTML5 technologies weren't ready to be used to make a complex multiplayer game like Habbo (and I also had less experience in web developing than now).

I trashed that code because it was literally a procedural mess with jQuery functions everywhere, in fact when the GUI started to became more complex, it ended to be an impossible thing to maintain.
 
Initiate Mage
Joined
May 7, 2018
Messages
30
Reaction score
52
Nice project! Good luck with development. Hope to see updates soon!
 
Joined
Aug 10, 2011
Messages
7,401
Reaction score
3,299
I recommend not implementing a server and instead building on what we already got. Implement Sulake's FUSE protocol (either binary or text form, or both) on the client side, then communicate TCP to an emulator via .

This. So. Much. Just make it compatible with another emulator. If your client can handle that properly, then you know you implemented everything correctly.

Emulator is another story.

If you just focus on the client, you even just port parts of the client logic. All that is different is the UI that needs to get re-implemented.
 
Initiate Mage
Joined
Feb 25, 2018
Messages
30
Reaction score
39
This. So. Much. Just make it compatible with another emulator. If your client can handle that properly, then you know you implemented everything correctly.

Emulator is another story.

If you just focus on the client, you even just port parts of the client logic. All that is different is the UI that needs to get re-implemented.
I repeat: we're not making a Habbo client 1:1 clone.

We're making something similar to Habbo (about graphics and concepts) but that is going to take his own road (we want to introduce new functions, concepts and UI made by us).

Making a project like this when thinking to stick only with what Sulake made translates in a lose of time. The potential about making an Habbo-like game in HTML5 is about giving new life to the game community by introducing new things (and old that Sulake deleted from his game).

Inviato dal mio SM-G950F utilizzando Tapatalk
 
Initiate Mage
Joined
Feb 25, 2018
Messages
30
Reaction score
39
We have rewritten the isometric engine, now based on Phaser.io (already needs some tweaking about the walls, because we're working with the depth to implement the layered furni like the HC Sofa that covers the user), now we're working on the InteractionManager, because we need to make the GUI and the Engine to communicate in order to make the actions like clicking a furni or moving it (this is probably the most delicate thing, because all the future work is based on this) but we're at a good point (fortunately Vue and his EventBus is really useful for these things).

528e4a19f7d71e78e377b5acd67902e6 - Project Igloo: Habbo in HTML5/Canvas [Pixi.JS / VueJS / Bootstrap4 / WebSockets] - RaGEZONE Forums


Actions are dinamically rendered through an Array which contains the available actions for the clicked object and binded with an "action id" (so we let the Server decide which actions the user can do with the selected item).


af712e8b9e403105379817b0d71c1681 - Project Igloo: Habbo in HTML5/Canvas [Pixi.JS / VueJS / Bootstrap4 / WebSockets] - RaGEZONE Forums


The Habbo's sprites are generated via a local Avatarimage and they already walks
155194cea3a02f61453a55fe22004bc3 - Project Igloo: Habbo in HTML5/Canvas [Pixi.JS / VueJS / Bootstrap4 / WebSockets] - RaGEZONE Forums
 

Attachments

You must be registered for see attachments list
Initiate Mage
Joined
Feb 25, 2018
Messages
30
Reaction score
39
Messenger and Catalogue almost finished, just started Changelook

9c0983c5c17df691d305d36a23ba90cb - Project Igloo: Habbo in HTML5/Canvas [Pixi.JS / VueJS / Bootstrap4 / WebSockets] - RaGEZONE Forums
 

Attachments

You must be registered for see attachments list
Back
Top