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

Page 1 of 3 123 LastLast
Results 1 to 15 of 42
  1. #1
    Enthusiast Matheeus is offline
    MemberRank
    Feb 2018 Join Date
    30Posts

    Project Igloo: Habbo in HTML5 [Phaser3/VueJS/Bootstrap/WebSockets/Java/Jetty/Postgre]


    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

    Spoiler:




    Last edited by Matheeus; 12-02-19 at 10:11 PM.


  2. #2
    Developer Quackster is offline
    DeveloperRank
    Dec 2010 Join Date
    AustraliaLocation
    3,471Posts

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

    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.

  3. #3
    Enthusiast Matheeus is offline
    MemberRank
    Feb 2018 Join Date
    30Posts

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

    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.

  4. #4
    PM for free snacks! Hoshiko is offline
    MemberRank
    May 2013 Join Date
    сикаLocation
    279Posts

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

    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 websockify.

  5. #5
    Member Rubber is offline
    MemberRank
    Apr 2015 Join Date
    ValkenburgLocation
    91Posts

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

    Good luck with the development!

  6. #6
    Enthusiast Matheeus is offline
    MemberRank
    Feb 2018 Join Date
    30Posts

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

    Quote Originally Posted by Hoshiko View Post
    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 websockify.
    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

  7. #7
    PM for free snacks! Hoshiko is offline
    MemberRank
    May 2013 Join Date
    сикаLocation
    279Posts

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

    Quote Originally Posted by Matheeus View Post
    ... 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.

    Quote Originally Posted by Matheeus View Post
    Also, I want to make a creative work, not an Habbo-client reverse engineering.
    Wrong forum, mate.

  8. #8
    HabboFont.net Cankiee is offline
    MemberRank
    May 2013 Join Date
    North KoreaLocation
    978Posts

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

    Good luck with the development!

  9. #9
    Enthusiast Matheeus is offline
    MemberRank
    Feb 2018 Join Date
    30Posts

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

    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

  10. #10
    Enthusiast Leonson is offline
    MemberRank
    Apr 2012 Join Date
    27Posts

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

    Hi Mattheus! By some googlimg i came across ths from 2014

    https://twitter.com/IndieVault_en/st...144360448?s=09

    Is this the inspiration/base of thia current project? Love to here how that story got to end! Is it finshed even?
    Last edited by Leonson; 28-01-19 at 02:07 AM.

  11. #11
    Enthusiast Matheeus is offline
    MemberRank
    Feb 2018 Join Date
    30Posts

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

    Quote Originally Posted by Leonson View Post
    Hi Mattheus! By some googlimg i came across ths from 2014

    https://twitter.com/IndieVault_en/st...144360448?s=09

    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.

  12. #12
    Enthusiast Relevance is offline
    MemberRank
    May 2018 Join Date
    30Posts

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

    Nice project! Good luck with development. Hope to see updates soon!

  13. #13
    Check http://arcturus.pw The General is offline
    DeveloperRank
    Aug 2011 Join Date
    7,602Posts

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

    Quote Originally Posted by Hoshiko View Post
    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 websockify.
    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.

  14. #14
    Enthusiast Matheeus is offline
    MemberRank
    Feb 2018 Join Date
    30Posts

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

    Quote Originally Posted by The General View Post
    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

  15. #15
    Enthusiast Matheeus is offline
    MemberRank
    Feb 2018 Join Date
    30Posts

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

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



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




    The Habbo's sprites are generated via a local Avatarimage and they already walks



Page 1 of 3 123 LastLast

Advertisement