Hero’Slate – OpenAda – Applicazioni Digitali per l'Arte

Descrizione gioco:

Hero’Slate è un’avventura testuale interattiva.
Il gioco si basa sui “libri game” o narrazioni testuali nel quale il protagonista è il lettore stesso.

Lo scopo del gioco è quello di continuare la propria avventura, interagendo con la plancia; per scegliere e portare avanti la storia devi determinare le tue decisioni e nel corso della vicenda bisogna posizionare le relative lastre e pedine corrispondenti suggerite dai testi.

In questo caso l’obiettivo è affrontare l’esame che abbiamo preparato nel corso della partita ed avere un esito che può essere accettato o meno; ovviamente, a seconda del nostro obiettivo, possiamo puntare al meglio preparandoci a dovere oppure cercando solo di superarlo.

Ricorda, il protagonista sei tu!

Componenti:

Plancia:

Le lastre sono numerate e divise in personaggio (A), storia (B) evento (C); mentre le Pedine speciali sono divise in concentrazione (1), energia (2), open source/ closed source (3); in più è presente una moneta.

Lastre:

La lastra personaggio (A) verrà scelta all’inizio della partita senza possibilità di essere cambiata e determinerà le tue caratteristiche di base iniziali.
Nella lastra Storia (B) verrà visualizzato il testo che farà continuare il corso della storia e la scelta che dovrai fare sotto forma di domanda.
La lastra evento (C) fungerà da semplice riscontro visivo della vicenda che si sta narrando e non modificherà il corso della storia.

Pedine e moneta:

Le pedine Energia e Concentrazione servono per segnare i punti ricevuti dal nostro personaggio che potranno essere sottratti o aggiunti nel corso della vicenda e che influiranno sull’esito dell’esame.

Invece le pedine open source o closed source hanno due facce con un lato icone di programmi per l’appunto open source e dall’altro lato programmi closed source o che utilizzano l’intelligenza artificiale; a seconda dell’evento e della scelta che viene fatta si sceglie il verso in cui posizionarle.
La moneta serve per decidere la tua sorte, quindi dovrai lanciarla ed
a seconda del risultato procedere con l’avventura
verso il giorno dell’esame.

Preparazione del gioco:

Posizionare la plancia sul tavolo, aprire lo stand, ed una volta appoggiato lo smartphone, verificare l’inquadratura. Scegliamo il personaggio che preferiamo e posizioniamo la lastra nella parte a sinistra, dopodiché posizioniamo la prima lastra storia (1B), posizionata al centro, e collochiamo anche la corrispondente lastra evento (1C), posizionata a destra. Le pedine speciali sono collocate sulla parte inferiore della plancia, quando abbiamo chiaro il nostro personaggio, possiamo quindi collocare nella parte a sinistra le pedine energia e concentrazione a seconda delle caratteristiche del protagonista che abbiamo scelto (il numero di pedine da mettere è segnalato direttamente sulla lastra del giocatore). Il gioco inizia leggendo e visualizzando dal cellulare il testo che ci pone delle domande a cui risponderemo proseguendo così nella partita.

Come attivare la realtà aumentata e inquadrare i marker

Aprire il link del QR Code sul browser* del proprio dispositivo e consentire all’attivazione della camera, dopodiché bisogna inquadrare tutta la plancia compresi i marker.

*Se vengono riscontrati errori di visualizzazione, si consiglia di cambiare il browser (si suggerisce di usare il motore di ricerca Firefox)

Parte Interattiva:

Hero’Slate è un gioco da tavolo interattivo grazie alla realtà aumentata.

Per questa parte abbiamo utilizzato A-Frame, un framework web che ci ha permesso di poter gestire tutta la parte interattiva. La build è stata creata su Glitch.com

A-Frame è servito alla creazione di marker:

Al marker è stata associata un’immagine:

Per inserire il marker al codice abbiamo seguito questo schema:

       <a-marker
        id="S1"
        preset="custom"
        type="pattern"
        url="https://cdn.glitch.global/ba1eb491-d26b-4200-b435-790ee7bb4990/S1.patt?v=1718215349896"
      >
        <a-image
          rotation="-90 0 0"
          src="https://cdn.glitch.global/ba1eb491-d26b-4200-b435-790ee7bb4990/S1.png?v=1718266727249"
        ></a-image>
      </a-marker>

All’interno di “a-maker” si inserisce l’id e il file del pattern segnato con .patt (ovvero il marker). A seguire va inserita l’immagine che vogliamo visualizzare.
Qui sotto un piccolo esempio della build in HTML che abbiamo utilizzato:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HeroSlate</title>
    <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
    <script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
  </head>
  <body style="margin: 0; overflow: hidden">
    <a-scene embedded arjs="sourceType: webcam;">

       <a-marker
        id="S1"
        preset="custom"
        type="pattern"
        url="https://cdn.glitch.global/ba1eb491-d26b-4200-b435-790ee7bb4990/S1.patt?v=1718215349896"
      >
        <a-image
          rotation="-90 0 0"
          src="https://cdn.glitch.global/ba1eb491-d26b-4200-b435-790ee7bb4990/S1.png?v=1718266727249"
        ></a-image>
      </a-marker>

      <a-entity camera></a-entity>
    </a-scene>
  </body>
</html>