Una mascotte pixel-art per il tuo sito

Il tuo sito, con un piccolo compagno.

Abita la pagina, osserva quello che trova e si ricorda di te. Dagli qualcosa da mangiare, portalo a spasso o lascialo brontolare per conto suo.

Prova la demo Aggiungilo al sito

Una riga da includere · Memoria locale · Nessuna dipendenza

TV · skin orange

La demo è qui

Un biscotto.
Poi vediamo.

Dagli da mangiare, fagli una coccola, oppure provocalo e guarda cosa succede. Umore ed energia cambiano, quindi lo stesso gesto può trovare un mostro diverso. Scegli un’attività: il menu si ritira e giochi con il mostro direttamente sulla pagina.

Adesso è

Aspettiamo il mostro…

Umore—

Sazietà—

Energia—

Sta arrivando. Intanto scegli cosa offrirgli.

Qualcosa da mangiare

Oppure qualcosa da fare

Salti, voli e altre cose poco necessarie

Puoi anche dirgli come ti chiami

Il nome resta in questo browser, su questo sito. Quando torni può riconoscerti: non serve un account.

Le sue battute sono scritte, non generate sul momento. In questa demo ne ha parecchie, fra commenti e reazioni: deve avere qualcosa di diverso da dire, anche quando gli ridai un biscotto.

Guarda chi c’è.

All’inizio erano tre. Ora sono molti di più: clicca un personaggio e lo vedrai girare sulla pagina. Cambia la forma; il vestito lo scegli dopo.

Ognuno ha una piccola fissazione: sotto il nome trovi la sua. Umore e condizioni si vedono anche nelle pose e nei colori; Gianni ha disegni dedicati a tristezza e malessere.

Dietro quei pixel

Tutto è iniziato
da un mixer.

I personaggi di My Little Monster sono stati creati con il Pixel Art Sprite Mixer di KingBell. Scoprire il suo strumento ha fatto nascere l’idea di questi piccoli compagni da portare sul web.

Il mixer ti permette di combinare forme, vestiti e colori per creare personaggi pixel-art ed esportarli come fogli sprite animati. Grazie, KingBell, per aver dato loro un volto.

Prova Pixel Art Sprite Mixer ↗

Cosa succede mentre giri.

Il mostro usa i bordi degli elementi come appoggi. Quindi, mentre tu scorri, lui deve trovare dove stare. Da lì vengono i salti, i giri e qualche commento non richiesto.

Cerca e raccoglie

Chiedigli una parola e la cerca nella pagina. In passeggiata, invece, trova pulsanti, lettere e piccoli oggetti: ne prende una copia e puoi decidere se tenerla o lanciarla. Quello vero resta dov’è.

Si ricorda di te

Può chiederti il nome. Umore, sazietà, energia e affetto cambiano con le tue scelte e restano salvati nel browser di questo sito.

Ha le sue abitudini

Pogo cerca una scusa per saltare, Utini raccoglie cose che potrebbero servire e Gianni, ogni tanto, ci tiene a dirti che è Gianni. Prova una passeggiata con un altro personaggio.

Portalo sul tuo sito.

Scegli il personaggio e la dimensione, poi copia lo snippet. Per le battute puoi usare quelle incluse oppure caricare un tuo file: è lì che gli dai qualcosa da dire sul tuo sito.

Scegli una delle due schede qui sopra. Puoi cambiare strada quando vuoi.

Una mascotte, una riga.

Usa il personaggio TV con le impostazioni essenziali. Memoria, umore e widget funzionano già così. Le frasi incluse sono generiche e non portano ai siti di Matteo; puoi cambiare tv con qualsiasi altro character del catalogo.

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

Decidi tu come si comporta.

L’anteprima ti mostra forma e vestito. Le impostazioni qui sotto scrivono il codice da copiare; il mostro che gira sulla pagina resta libero di fare la sua demo.

Lingua del mostro Italiano di default. Cambia menu, giochi e battute incluse; il tuo file frasi resta come lo scrivi. Personaggio iniziale

Aggiungi altri personaggi al widget

Quello iniziale è già incluso. Seleziona gli altri fra cui vuoi poter scegliere.

Vestito iniziale Se il cambio automatico è attivo, potrà indossarne altri. Posizione del widget Frequenza dei movimenti Dimensione · 2 Cambia skin ogni tanto Può chiedere e ricordare il nome Umore e attività nel widget URL del file frasi Facoltativo · puoi crearlo qui sotto

ANTEPRIMA

Il tuo mostro

Scegli un personaggio e un vestito.

Guarda un altro umore

Qui cambi solo l’anteprima: sul sito l’umore cambia con le interazioni.

Vuoi scrivere le sue battute?

Quello che dirà sul tuo sito.

Aggiungi battute e, se vuoi, un link. Quando scarichi il JSON, lo snippet si imposta per usarlo: carica anche phrases.json sul tuo sito.

Anteprima del file JSON

Vuoi vedere tutte le possibilità?Apri lo snippet di riferimentoLe impostazioni principali, pronte da copiare.

<script
  src="https://www.matteobononi.it/my-little-monster/my-little-monster.js"
  data-characters="*"
  data-character="tv"
  data-language="it"
  data-skin-cycle="on"
  data-widget-position="bottom-right"
  data-scale="2"
  data-platforms="[data-mlm-platform]"
  data-activity="medium"
  data-remember-name="on"
  data-narrative="on"
  defer>
</script>

Per usare un tuo frasario, aggiungi data-phrases="./phrases.json" e carica quel JSON sul tuo sito. Il configuratore può preparare entrambi.