My Little Monster: un mostriciattolo pixel-art per il tuo sito

Ok, mi stavo annoiando.

Non ricordo bene come ci sono arrivato, ma stavo pensando ai giochi in pixel art. In particolare a un sito dove ti creavi un piccolo mostro, modulare, pezzo per pezzo. Carinissimo. Quel sito non l’ho più trovato. In compenso ne ho trovato un altro che fa creare personaggi in pixel art, carini uguale.

Da lì a My Little Monster è stato un attimo.

Sviluppato dal telefono

Per farlo ho provato una cosa nuova: un progetto in locale con ChatGPT, collegato in remoto. In pratica guidavo lo sviluppo dallo smartphone. Io scrivevo cosa volevo, lui lavorava sul mio computer, io guardavo il risultato. Deploy sul server compreso.

Bellissimo. E ho scoperto che ChatGPT con Sol, prima il 5.6 e poi il 6, lavora alla grande. Consuma, eh: devi starci attento. Ma in una serata un mostro che gira per la pagina lo fai. Con la landing, il configuratore e un sacco di cose che all’inizio non avevo nemmeno in mente.

C’è un rovescio, però. Se il computer lavora anche mentre sei in giro, viene voglia di lasciarlo sempre acceso e attaccato, con qualcosa in corso. E di non staccare mai davvero. Intanto i token se ne vanno, e i modelli cambiano nel giro di una settimana: più veloci, meno affamati. È il mondo che volevo da bambino, e ci sto benissimo. Solo, ogni tanto, bisogna ricordarsi di chiudere il coperchio.

Cosa fa

Quello di serie ha una televisione al posto della testa. Gira sopra i titoli, salta da una card all’altra e ogni tanto dice la sua. Se lo clicchi si apre il suo pannello: puoi dargli da mangiare, portarlo a spasso o provocarlo. Lo sconsiglio.

  • Cammina sulla pagina. Titoli, card e blocchi diventano piattaforme: corre, salta, ogni tanto vola.
  • Esplora. Si avvicina a un titolo o a un link e lo commenta. Non clicca niente: guarda e basta.
  • Ha fame, umore ed energia. Biscotto, pizza, caffè, torta, gelato. Se esageri, rifiuta. Se lo provochi si arrabbia e corre più veloce.
  • Si ricorda di te. Dopo un po’ ti chiede come ti chiami. Puoi anche non dirglielo.
  • Non muore. Niente Tamagotchi coi sensi di colpa: sparisci per un mese e al ritorno è ancora lì.

Una riga, e ce l’hai anche tu

<script src="https://www.matteobononi.it/my-little-monster/my-little-monster.js"
        data-character="tv" defer></script>

Niente dipendenze, niente account. Vive in uno Shadow DOM, quindi non tocca il CSS del tuo sito e il tuo sito non tocca lui. Quello che si ricorda (nome, umore, fame) sta nel localStorage del browser e non va da nessuna parte. Vuol dire anche che ogni sito ha il suo mostro: quello che hai nutrito qui, altrove non ti riconosce.

Se vuoi che parli del tuo sito, gli passi un JSON con data-phrases. Battute tue, link tuoi:

[
  "Non badare a me. È quello che faccio meglio.",
  { "text": "Ho trovato i prezzi. Io non pago.", "href": "/prezzi/" },
  { "text": "Il blog è di là.", "href": "/blog/", "target": "_self" }
]

Il resto (personaggi, posizione, quanto si muove) lo scegli nel configuratore sulla pagina del progetto.

Tre mostri, un foglio sprite

TV, Dyno e Utini, nove vestiti in tutto. Ogni vestito è un PNG con la stessa griglia: frame da 16×24 pixel, 118 righe di animazioni. Corsa, salto, doppio salto, teletrasporto, esplosione. Ci sono anche nuoto e armi, ma per ora non li usa nessuno. Le icone del cibo sono di Kenney, CC0.

È in alpha, ma è già fuori

Una serata, e il giorno dopo era già alla 0.13. Con un sito che lo stava usando. Quindi fino alla 1.0 la regola è questa: se cambio qualcosa che rompe chi lo usa, lo scrivo. Quello che funziona oggi continua a funzionare.

Non è un assistente. Non risponde alle domande e non ti aiuta a comprare niente. Gira per la pagina senza un motivo preciso, solo perché può permetterselo. È carino, e lo sa.