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

Matheeus

Amministratore
Autore del topic
Amministratore
Redattore
28 Dicembre 2006
3.844
157
Miglior risposta
0
MPGHW2z.png

Ma guarda un po' chi si vede: saranno probabilmente anni, pur essendo admin, che io non posto dentro questa sezione qualcosa di concreto, questo perché sostanzialmente sono anni (come sapete) che ho abbandonato la scena dei Retro per tanti motivi, prima di tutto la noia che ormai mi da il gioco in sé, poiché Sulake sono anni che non riesce più a riproporre un'esperienza appagante per i miei gusti (sotto tanti aspetti, anche se ormai sono 10 anni che Habbo Beta è stato introdotto, il gioco ha preso delle pieghe inaspettate e non è più tornato sui propri passi, quelli che mi hanno fatto apprezzare il gioco da quando mi sono iscritto, fino alla fine dell'epoca Shockwave).

Cos'è Project Igloo?
Ne abbiamo già parlato decisamente a lungo: anche se potrei sembrare l'ultimo arrivato, sono stato il primo a teorizzare sul forum, anni addietro, la possibilità di replicare Habbo utilizzando linguaggi moderni e tutti i potenti strumenti messi a disposizione dall'HTML5, CSS3 e Javascript (insieme ai relativi framework che si sono diffusi e sviluppati negli ultimi anni) ed in questo topic ne abbiamo parlato a lungo.
Più di una persona (sia qui che in altri forum esteri) ha dimostrato, dopo che io l'ho teorizzato (ed in parte sviluppato) che ciò è possibile, ma assolutamente non facile o banale, un gioco come Habbo si compone di tanti elementi che messi insieme aumentano esponenzialmente la complessità di sviluppo, soprattutto quando si comincia ad andare oltre le fondamenta e si va nei particolari.

Igloo è la mia concretizzazione di ciò che teorizzai ai tempi: parte come un piccolo progetto/esperimento personale per occupare il tempo libero, che sto utilizzando come scusa per approfondire un po' alcuni framework JS interessanti. Dunque al momento, non è qualcosa che avrà uno sviluppo costante, soprattutto perché al momento lo sto realizzando da solo e soprattutto avendo una scarsa conoscenza del lato backend/Server (quelli che solitamente si scrivono in C#, Java, Node.js, etc...) abbastanza sicuramente arriverò a bloccarmi quando dovrò implementare la componente multiplayer.

Dunque al momento è un divertente esperimento client-side, ma che è già realtime-ready appena ci sarà l'opportunità (da parte mia o di altri) di realizzare l'implementazione backend.

Tecnologie utilizzate
Al momento il Client è una composizione di alcuni Framework e library JS che mi permettono di facilitare e velocizzare lo sviluppo delle diversi componenti del gioco:
  • Pixi.JS + Traviso: framework col quale è stato realizzato l'engine isometrico e che si occupa del rendering del Canvas (il cuore del gioco praticamente)
  • VueJS 2 + Bootstrap 4: framework col quale sto realizzando l'interfaccia grafica del gioco
Ovviamente tutto ciò è contornato da alcune library come ad esempio Font Awesome.
VueJS in particolare è stata una bella scoperta, in quanto si tratta di un Framework che segue le orme di Angular e mi sta permettendo di realizzare una GUI modulare (ogni finestra è un "componente") ed in cui ogni campo si aggiorna istantaneamente appena vi sono nuovi dati nelle variabili (per questo considero il gioco già realtime-ready).

Per l'implementazione multiplayer la scelta lato frontend (client) ovviamente saranno i WebSocket (probabilmente utilizzerò Socket.IO come library) mentre lato backend sarebbe interessante provare un implementazione del server in Node.JS, per quanto non mi ispiri troppa fiducia per incarichi così pesanti, altrimenti la scelta sarebbe di realizzare un server in Java+Netty (per la questione multipiattaforma, deve poter assolutamente girare su Linux per questione di costi server).

Stato dello sviluppo
Al momento Pixi+Traviso renderizza una stanza isometrica specificata attraverso una mappa e permette di inserire oggetti e controllare un personaggio, Traviso inoltre già possiede delle API che permettono di fare tante azioni (nell'ottica di implementare la parte multiplayer).
Mancano il concetto di altezza (per lo stacking di oggetti), le scale e andrebbe scritto del codice apposito per le mura, dato che al momento sono sostanzialmente delle Tile specificate nella room map.

La GUI è ciò su cui mi sono concentrato nell'ultima 1/2 settimane (nei momenti in cui ho avuto tempo) ed ho gettato le basi, sono andato a rilento in quanto mi sono dovuto scontrare con qualcosa di completamente nuovo come VueJS, ma una volta che entri nell'ottica, ti da grosse soddisfazioni e soprattutto ti agevola un sacco il lavoro di sviluppo, soprattutto in combinazione con Bootstrap (che già conosco ed ho usato ampiamente in passato).

Al momento mi sto concentrando sulla GUI, poiché non penso sia il caso di toccare ulteriormente l'engine isometrico sin quando non si inizia a scrivere un Server di gioco (probabilmente Traviso potrebbe essere sostituito tranquillamente con qualcosa di scritto ad-hoc e più focalizzato sul multiplayer, però non sarebbe immediata come cosa).

Screenshots

4ec7c87c445ed758e4d60785252ed187.gif
 
Un progetto a dir poco stupendo! Non potrà che uscirne qualcosa di figo. Se ti servisse un aiuto per il server (C# o Java) ti aiuto volentieri.

Pure io sto lavorando ad un "remake" di Habbo in HTML5 ma le mie conoscenze client-side non sono un granche rispetto a quelle del server :emoji_pensive:
 
Un progetto a dir poco stupendo! Non potrà che uscirne qualcosa di figo. Se ti servisse un aiuto per il server (C# o Java) ti aiuto volentieri.

Pure io sto lavorando ad un "remake" di Habbo in HTML5 ma le mie conoscenze client-side non sono un granche rispetto a quelle del server :emoji_pensive:
Ho visto ora il tuo progetto, sarebbe interessante fare 4 chiacchiere per confrontarci :emoji_slight_smile:

Inviato dal mio SM-G950F utilizzando Tapatalk
 
Progetto fantastico, interessante l'implementazione del server in node.js.
Ho l'impressione che tra un po di tempo ci sará una nuova era per gli habbo retroserver e che siano una cosa a parte allo stesso Habbo, che diventi tutto legale ma ci vorrá molto lavoro
Buona fortuna :emoji_slight_smile:
 
Ultima modifica:
Bel progetto, ottima iniziativa. Il client è sicuramente molto più fluido e veloce. Aspetto altri screen ?
 
Salve ragazzi,
vi avviso che entrato a far parte del progetto F FusionDev che mi aiuterà nel velocizzare il processo di sviluppo e darà un apporto fondamentale alla parte Server, compensando le mie mancanze di conoscenze tecniche in quell'ambito.

Welcome!
 
Mi sembra un ottima idea!
Purtroppo non posso aiutarvi con la parte tecnica..!

Però, se posso dire qualcosa, vi consiglio di non "prendere" troppo da Habbo. Un'idea è rivoluzionaria se ha elementi nuovi.
Buon lavoro!

Attendiamo aggiornamenti.
 
In quest'ultimo periodo stiamo lavorando nel riscrivere l'engine isometrico, in quanto il vecchio engine con Pixi.js e Traviso ci limitava parecchio.

Il nuovo framework che abbiamo scelto è Phaser 3. Attualmente stiamo quindi riscrivendo il codice e l'engine isometrico.

Attualmente abbiamo terminato il client side delle seguenti funzioni:
-Generazione delle stanze (con muri, porte, furni e utenti)
-Spostamento / rotazione / cambio stato dei furni
-Movimenti dei giocatori
-Caricamento look dei giocatori

Tutto questo deve ancora essere accompagnato dall'emulatore ovviamente.
Vi lascio in allegato qualche gif.

Movimenti:
Perfavore, Entra oppure Registrati per vedere i Link!

Rotazione / cambio stato / spostamento furni:
Perfavore, Entra oppure Registrati per vedere i Link!
 
Vi rilascio alcuni aggiornamenti riguardo la GUI (Vue.js):

Infostand a buon punto (è uno dei punti cruciali del gioco dato che permette la maggior parte delle interazioni), l'Engine (Phaser.io) gli passa i dati e si aggiorna o sparisce automaticamente in base a dove si clicca.

528e4a19f7d71e78e377b5acd67902e6.gif


Le azioni sono dinamiche e recuperate da un Array.

af712e8b9e403105379817b0d71c1681.gif


Ho iniziato anche a scrivere le altre finestre del gioco

32bdc0edfc6a7f920b2e4f1aa5f80178.png
 
Vi rilascio alcuni aggiornamenti riguardo la GUI (Vue.js):

Infostand a buon punto (è uno dei punti cruciali del gioco dato che permette la maggior parte delle interazioni), l'Engine (Phaser.io) gli passa i dati e si aggiorna o sparisce automaticamente in base a dove si clicca.

528e4a19f7d71e78e377b5acd67902e6.gif


Le azioni sono dinamiche e recuperate da un Array.

af712e8b9e403105379817b0d71c1681.gif


Ho iniziato anche a scrivere le altre finestre del gioco

32bdc0edfc6a7f920b2e4f1aa5f80178.png
Ciao Mattia! Davvero un ottimo lavoro.

Qual è il senso di copiare la grafica, lo stile, gli oggetti ecc di Habbo?

Non sarebbe meglio studiare, sviluppare un design nuovo esclusivo?
 
Vi rilascio alcuni aggiornamenti riguardo la GUI (Vue.js):

Infostand a buon punto (è uno dei punti cruciali del gioco dato che permette la maggior parte delle interazioni), l'Engine (Phaser.io) gli passa i dati e si aggiorna o sparisce automaticamente in base a dove si clicca.

528e4a19f7d71e78e377b5acd67902e6.gif


Le azioni sono dinamiche e recuperate da un Array.

af712e8b9e403105379817b0d71c1681.gif


Ho iniziato anche a scrivere le altre finestre del gioco

32bdc0edfc6a7f920b2e4f1aa5f80178.png
Ciao Mattia! Davvero un ottimo lavoro.

Qual è il senso di copiare la grafica, lo stile, gli oggetti ecc di Habbo?

Non sarebbe meglio studiare, sviluppare un design nuovo esclusivo?

Quando (e se) ci passerete in un'esperienza del genere, capirete quanto sia complicato creare un design proprio, non di per sé immaginarlo, ma quanto realizzare tutti gli elementi grafici, soprattutto nella Pixelart che è molto più dispendiosa da realizzare in termini di tempo (ed anche di competenze).
Realizzare da zero tutti i personaggi con i relativi sprite, animazioni e vestiti (ognuno di queste immagini poi realizzate in 8 direzioni differenti) insieme ai furni (in questo caso almeno 2 direzioni per ruotarli e se ti va male 4) è sostanzialmente impossibile senza un team di grafici dietro.

Ma ad oggi trovare grafici disposti a farlo e soprattutto con esperienza nella Pixelart è impossibile, soprattutto in maniera gratuita.

Per il momento, dunque, mi accontento di creare "un Habbo tutto mio" dove poter decidere realmente cosa deve esserci e cosa no, senza più la limitazione di poter decidere solo lato Server, ma ora posso personalizzare anche il client (che effettivamente è il gioco vero e proprio).
 
  • Like
Reactions: #Vincè
Vi rilascio alcuni aggiornamenti riguardo la GUI (Vue.js):

Infostand a buon punto (è uno dei punti cruciali del gioco dato che permette la maggior parte delle interazioni), l'Engine (Phaser.io) gli passa i dati e si aggiorna o sparisce automaticamente in base a dove si clicca.

528e4a19f7d71e78e377b5acd67902e6.gif


Le azioni sono dinamiche e recuperate da un Array.

af712e8b9e403105379817b0d71c1681.gif


Ho iniziato anche a scrivere le altre finestre del gioco

32bdc0edfc6a7f920b2e4f1aa5f80178.png
Ciao Mattia! Davvero un ottimo lavoro.

Qual è il senso di copiare la grafica, lo stile, gli oggetti ecc di Habbo?

Non sarebbe meglio studiare, sviluppare un design nuovo esclusivo?

Quando (e se) ci passerete in un'esperienza del genere, capirete quanto sia complicato creare un design proprio, non di per sé immaginarlo, ma quanto realizzare tutti gli elementi grafici, soprattutto nella Pixelart che è molto più dispendiosa da realizzare in termini di tempo (ed anche di competenze).
Realizzare da zero tutti i personaggi con i relativi sprite, animazioni e vestiti (ognuno di queste immagini poi realizzate in 8 direzioni differenti) insieme ai furni (in questo caso almeno 2 direzioni per ruotarli e se ti va male 4) è sostanzialmente impossibile senza un team di grafici dietro.

Ma ad oggi trovare grafici disposti a farlo e soprattutto con esperienza nella Pixelart è impossibile, soprattutto in maniera gratuita.

Per il momento, dunque, mi accontento di creare "un Habbo tutto mio" dove poter decidere realmente cosa deve esserci e cosa no, senza più la limitazione di poter decidere solo lato Server, ma ora posso personalizzare anche il client (che effettivamente è il gioco vero e proprio).
Purtroppo credo che non avrò mai la tua fortuna di "provare" quest'esperienza di sviluppare un gioco da zero (a meno che non voglia investire $$$$$ Di tasca mia e rischiare).
Io non avendo conoscenze con la programmazione dovrei affidarmi ad un intero gruppo di lavoro pagato fior di quattrini (feci fare una stima di costi da professionisti vari) Al contrario mio, tu puoi permetterti di tentare e sperimentare questa strada..

Realizzare l'intera grafica in un batter d'occhio è impossibile lo so ma piano piano secondo me vi conviene migrare in una grafica proprietaria, anche perché tutti ormai sappiamo com'è Habbo... Vogliamo qualcosa di nuovo.
 
Vi rilascio alcuni aggiornamenti riguardo la GUI (Vue.js):

Infostand a buon punto (è uno dei punti cruciali del gioco dato che permette la maggior parte delle interazioni), l'Engine (Phaser.io) gli passa i dati e si aggiorna o sparisce automaticamente in base a dove si clicca.

528e4a19f7d71e78e377b5acd67902e6.gif


Le azioni sono dinamiche e recuperate da un Array.

af712e8b9e403105379817b0d71c1681.gif


Ho iniziato anche a scrivere le altre finestre del gioco

32bdc0edfc6a7f920b2e4f1aa5f80178.png
Ciao Mattia! Davvero un ottimo lavoro.

Qual è il senso di copiare la grafica, lo stile, gli oggetti ecc di Habbo?

Non sarebbe meglio studiare, sviluppare un design nuovo esclusivo?

Quando (e se) ci passerete in un'esperienza del genere, capirete quanto sia complicato creare un design proprio, non di per sé immaginarlo, ma quanto realizzare tutti gli elementi grafici, soprattutto nella Pixelart che è molto più dispendiosa da realizzare in termini di tempo (ed anche di competenze).
Realizzare da zero tutti i personaggi con i relativi sprite, animazioni e vestiti (ognuno di queste immagini poi realizzate in 8 direzioni differenti) insieme ai furni (in questo caso almeno 2 direzioni per ruotarli e se ti va male 4) è sostanzialmente impossibile senza un team di grafici dietro.

Ma ad oggi trovare grafici disposti a farlo e soprattutto con esperienza nella Pixelart è impossibile, soprattutto in maniera gratuita.

Per il momento, dunque, mi accontento di creare "un Habbo tutto mio" dove poter decidere realmente cosa deve esserci e cosa no, senza più la limitazione di poter decidere solo lato Server, ma ora posso personalizzare anche il client (che effettivamente è il gioco vero e proprio).
Purtroppo credo che non avrò mai la tua fortuna di "provare" quest'esperienza di sviluppare un gioco da zero (a meno che non voglia investire $$$$$ Di tasca mia e rischiare).
Io non avendo conoscenze con la programmazione dovrei affidarmi ad un intero gruppo di lavoro pagato fior di quattrini (feci fare una stima di costi da professionisti vari) Al contrario mio, tu puoi permetterti di tentare e sperimentare questa strada..

Realizzare l'intera grafica in un batter d'occhio è impossibile lo so ma piano piano secondo me vi conviene migrare in una grafica proprietaria, anche perché tutti ormai sappiamo com'è Habbo... Vogliamo qualcosa di nuovo.

Personalmente sono del parere che non abbia senso lavorare ad una grafica innovativa se poi il succo del progetto è lo stesso.
Habbo non ha stancato per la sua grafica, che è anzi un vero e proprio marchio di fabbrica, ha stancato semplicemente perché il concept su cui si basa è passato.
Persino i social network come facebook stanno avendo un grosso calo nell'ultimo periodo, gli utenti non sono più interessati a passare il loro tempo chattando, dunque penso non avrebbe senso investire tempo prezioso nel realizzare una nuova interfaccia, a meno che non si tratti ovviamente di un piacere personale o di un "esercizio di stile".
Per quanto riguarda il progetto credo che sia senza dubbio valido, anche perché penso che il loro scopo principale sia mettersi alla prova con qualcosa di nuovo, indipendentemente dal risultato che ne uscirà fuori se decideranno di lanciare il progetto.
Vi esorto dunque ad andare avanti e vi auguro un buon lavoro! :emoji_upside_down:
 
  • Like
Reactions: theKaost
Hi,

sarò critico come lo sono sempre stato, ci tengo a dire che creare un progetto simile partendo effettivamente da 0 ed usare una grafica che oramai ha già dato, a mio parere è veramente inutile.
Non ha futuro il vero gioco figuriamoci un clone simile.
Se invece lo state sviluppando per ampliare le vostre conoscenze, vi dico che è un bel progetto che vi può effettivamente aprire molti campi per il futuro.