Newsgroup: it.comp.giochi.avventure.testuali
Titolo: [Inform 7 Ita+Quixe+HTML5] Non crederete ai vostri occhi!

Ecco finalmente la versione multimediale on-line di "Aladino e le Perle di Saggezza". Grazie a una combinazione di Inform7, Quixe e HTML5, è stato possibile riprodurre on-line il gioco di Aladino con collegamenti ipertestuali corredato d'immagini e suoni. Da provare!
 
http://milleuna.3owl.com/_Perle_di_Saggezza/
 link "Media"
 
Per eseguire il gioco è necessario un browser che supporti HTML5, ovvero un qualsiasi browser se aggiornato.
Chi fosse interessato all'uso di Inform7 con collegamenti ipertestuali, immagini e suoni, può dare un'occhiata ai giochi d'esempio su 
http://milleuna.3owl.com
 oppure può chiedere qui sul newsgroup.
 
Buon divertimento!


Ciao e grazie per la notevole ventata di rinnovato interesse che stai
scatenando.
 
Volevo solo capire una cosa: l'avventura giocabile on-line � quella
normalmente generata con inform7 cui hai aggiunto le tue librerie o hai
dovuto metter mano al generato?
 
Grazie
pg
 

 dovuto metter mano al generato?
 
La risposta è in tre punti ;)
 
1) Le avventure "normali" (per esempio i miei demo corti come 
http://milleuna.3owl.com/_Il_forziere_sepolto/
 ) vengono generate direttamente da Inform7 con le mie librerie in italiano (l'"Italian" utilizzato è quello di Massimo Stella, ma con alcune mie modifiche). Per intenderci, sto parlando delle versioni "Light" e "Deluxe" dell'esempio citato, quindi non ci sono problemi neppure con le parole chiave enfatizzate.
2) Invece, per le parole chiave trasformate in link (versione "Hyper" dell'esempio sopra citato) ho dovuto modificare il file glkote.js di Quixe (cioè l'interprete utilizzato da Inform7 per i giochi Glulx).
Il problema è che l'interprete attende un testo scritto dall'utente, mentre quando si clicca sul link, quello stesso testo arriva per altra via e l'interprete si arrabbia. Stranamente con gli interpreti del 2009 non avveniva.
La correzione è semplice: ho eliminato un controllo sul tipo di input in alcuni punti di quel programma e tutto è filato liscio. Magari ci sarà un modo più pulito per ottenere lo stesso effetto, ma non l'ho ancora trovato e questo comunque funziona.
3) Infine, per Aladino 
http://milleuna.3owl.com/_Perle_di_Saggezza/
 nella versione "Media", cioè con le immagini e i suoni, è stata sufficiente un'unica modifica a glkote.js
Infatti, Quixe è un interprete Glulx (scritto dal mitico Andrew Plotkin) che non supporta la gestione di immagini e suoni (Plotkin dice "non supporta ancora", il che lascia spazio alla speranza).
Aladino compilato con Inform7 ed eseguito con un interprete Glulx off-line (tipo Git, per esempio) visualizza immagini e suoni, ma dato in pasto a Quixe i comandi di grafica vengono ignorati. Come fare quindi?
Ho usato questo trucco: inserisco nel programma, scritto con Inform7, delle istruzioni "say" in cui il testo è "@deserto-di-sabbia.jpg@" oppure "@grido-avvoltoio.ogg@". L'interprete javascript modificato intercetta questi testi, non li stampa e li manda a una funzione javascript definita nella stessa pagina. La funzione, a seconda del testo tra "@" decide se mostrare un'immagine (e dove) oppure emettere un suono, ma si potrebbero fare tante altre cose visto che qualunque operazione accessibile agli script sarebbe possibile.
 
Spero di aver risposto esaurientemente alla tua domanda ;) ma, se qualcosa non è chiaro, chiedi ancora.


 
Grazie mille! Sei stato chiarissimo ed era la parte che mi interessava.
 
Le modifiche a javascript le hai pubblicate sul tuo sito?
pg

 Le modifiche a javascript le hai pubblicate sul tuo sito?
 
Non ancora, ma se visiti la pagina di Aladino 
http://milleuna.3owl.com/_Perle_di_Saggezza/play_Media.html
 è probabile che il file di cui ti parlavo ti compaia nella cache del browser... anzi, ovviamente è già disponibile on-line, altrimenti i giochi non funzionerebbero! ;)
Lo puoi scaricare da qui: 
http://milleuna.3owl.com/interpreter/glkote.min.js
 
 
Prima di metterlo on-line in modo ufficiale, volevo fare ancora qualche miglioramento.
 
Breve guida all'uso:
- Contiene già le modifiche per funzionare con l'interfaccia "Hyperlink Interface IT" (quella dei collegamenti ipertestuali) e non c'è bisogno di seguire particolari accorgimenti
- Invece, per le immagini e i suoni, il programma javascript chiama una funzione che si chiama callbrowser() ogni volta che Inform7 usa "say" con un testo tra chiocciole "@". Per esempio:
 
    say "@sfondo.jpg@"
 
richiama nel programma
 
    callbrowser("sfondo.jpg");
 
Il testo deve essere statico, cioè non si possono usare le quadre [] per richiamare variabili in Inform7 (questo è uno dei punti che voglio migliorare).
 
Che cosa faccia la funzione callbrowser della stringa che gli viene passata è definito nella pagina HTML che mostra l'avventura.
In Aladino io uso il codice che segue per visualizzare immagini in due differenti posizioni (sopra e a sinistra) e per eseguire suoni, ma le potenzialità sono infinite.
 
<script>
var path = "../fx/"; // il percorso relativo dei file multimediali
// Funzione di supporto per suonare con l'HTML5
// Può non funzionare al primo tentativo se i file sono
// di grandi dimensioni. In tal caso è opportuno un "preload"
function playSound(name){
	name = path+name.substring(0,name.length-4)
	var audio = document.createElement('audio');
	audio.preload = "auto";
	var source= document.createElement('source');
	if (audio.canPlayType('audio/mpeg')) {
		source.type= 'audio/mpeg';
		source.src= name+'.mp3';
	} else {
		source.type= 'audio/ogg';
		source.src= name+'.ogg';
	}
	audio.appendChild(source);
	audio.addEventListener("ended", function () {document.removeChild(this);}, false);
	audio.autoplay = "autoplay";
	audio.play();
}
// La funzione callbroser, fulcro di tutto
// Mostra i file di nome "*-V.jpeg" in un'immagine con tag <img id="fx-side">
// altrimenti i file "*.jpeg" in un'immagine con tag <img id="fx-top">
// Esegue i suoni "*.ogg" o "*.mp3" con la funzione playSound() vista sopra
function callbrowser(cmd) {
	var ext = cmd.substr(cmd.length-3,3);
	if(ext == "jpg") {
		var pos = "fx-top";
		if(cmd.charAt(cmd.length-5) == "V")
			pos = "fx-side";
		document.getElementById(pos).src = path+cmd;
	} else if(ext == "ogg" || ext == "mp3") {
		if(cmd == "daydreaming.ogg")
			document.getElementById("soundtrack").play();
                        // la colonna sonora iniziale è precaricata
		else
			playSound(cmd);
	}
};
</script>
 
Il tutto va messo nell'header della pagina.
Per altre domande, chiedi pure.


Grazie mille!
pg