Home Project Pages Anim8or Sound fx Editabili Textures Gif animate Ultimate3D
 






GMS_HTML5_TTS è un   file.gmz   gratuito per GameMakerStudio ( 1.4 o 2 ) con modulo HTML5, per aggiungere del testo parlato al vostro progetto HTML5.


GMS_HTML5_TTS utilizza la sintesi vocale tramite le voci installate di default nel vostro pc o relative al browser che state utilizzando.
Online si avranno a disposizione più voci di quando ci si trova offline, in base anche al browser utilizzato.
Le voci possono avere accenti diversi per differenti lingue o nazioni.

Per far dire ad una voce ' Hello World ', vi basterà questo semplice codice :
scr_TTS_Play ( ' Hello World ' , false );


CREDITI :

GMS_HTML5_TTS è stato realizzato grazie al codice javascript open source per la sintesi vocale TTS text to speech trovato nel sito della Microsoft :   link   ( non più disponibile ).
Siete liberi di modificare il file TTS.js ma ricordate che dovete sempre lasciare menzionati gli autori originali del codice :



Tale codice è stato modificato e riadattato da me per utilizzarlo su
GameMakerStudio 1.4 / 2 ed il suo modulo HTML5.

Se volete supportare GMS_HTML5_TTS ( non è obbligatorio ), aggiungete al vostro progetto in GameMakerStudio, l'url di questa pagina e o l'icona del pappagallo :


DOWNLOAD :


Scarica GMS_HTML5_TTS.gmz   Versione 2 del 27/10/2021 ( circa 107 kb )
ed importalo in un nuovo progetto in GameMakerStudio.





Una volta importato GMS_HTML5_TTS.gmz, su GameMakerStudio, troverete i suoi script, l'object obj_TTS_Control, alcuni sprite e la cartella delle Extensions.   Cliccando sopra a quest'ultima, aprirai il relativo dialogo delle proprietà.
Qui troverai il file TTS.js.   Cliccaci sopra per aprire il suo dialogo con tutte le sue funzioni.   Infine clicca su di una funzione per aprire il suo dialogo con le relative informazioni :




TEST versione 2 :

GMS_HTML5_TTS è stato testato :

  positivamente su Windows10 con questi browser :
  •   Edge versione 94.0.992.50 ( Build ufficiale ) ( 64 bit );
  •   Chrome versione 95.0.4638.54 (Build ufficiale) (a 32 bit);
  •   Firefox versione 93.0 (32 bit);
  •   Opera versione 80.0.4170.63;
  •   OperaGX versione LVL 3 (core: 80.0.4170.61);
  •   Vivaldi versione 4.3.2439.63 (Stable channel) (a 64 bit);


  Android :
  •   Chrome versione ( 93.0.4577.82 );
    Disponibile solo la voce di default nella lingua del dispositivo ( la numero 0 ).
    Play, Stop, Rate, Pitch, Volume funzionano;
    Funziona la pausa ma non si può riesumare;
    Pur vedendo le numerose voci disponibili, ( nel mio caso online ben 53) tramite gli script Search, Select , Bottoni, ecc.. in realtà non sono riuscito ad impostarne un' alternativa a quella di default che è la numero 0   ( spero di fixxare tale bug, nella prossima versione ).


Gli Script :

GMS_HTML5_TTS oltre che dall' Extensione, è composto anche da degli Script per richiamare più facilmente le varie funzioni .
Ognuno di essi inizia con la dicitura " scr_TTS_ " .
In realtà potreste utilizzare direttamente le funzioni anzichè gli script, ma tenendo in considerazioni che uno sviluppatore potrebbe testare il proprio gioco
( in GameMakerStudio ) non solo per il modulo HTML5, ma utilizzando anche altre piattaforme ( Windows, Andorid, ecc... ) .   Ciò potrebbe causare degli errori, essendo le funzioni presenti nel file TTS.js, nate solo per il modulo HTML5.
Per questo motivo i vari script contengono le funzioni di TTS.js, racchiuse all' interno di un codice, che ne consente l'uso solo :
  1. in un browser;
  2. in un browser compatibile con il text-to-speech;
  3. in un browser che abbia almeno una voce disponibile;

Codice:
if ( os_browser != browser_not_a_browser) { /* Codice solo per browser */

if (( TTS_Info_Voice_Work == true ) && ( TTS_Total_Number_Voice > 0 )) {
/* Codice per Browser compatibile e con almeno una voce disponibile */
1° script

Ini

scr_TTS_Ini ( );
Questo primo script dovrà essere richiamato nel Create del primo object del gioco.
Esso inizializzerà tutte le variabili utili per il funzionamento del text-to-speech,
poi troverà tutte le voci disponibili in quel momento ed i relativi nomi .

Le variabili principali di GMS_HTML5_TTS sono contenute in questo script :
TTS_Info_Voice_Work         = false;   /*  se TTS.js funziona nel browser   */
TTS_Total_Number_Voice   = 0;        /*   il totale delle voci disponibili   */
TTS_Voice_Selected             = 0;        /*   numero della voce selezinata   */
TTS_Volume                         = 1;        /*   volume da 0 a 1   */
TTS_Rate                              = 0.8;     /*   velocità di lettura   da 0 a ? */ TTS_Pitch                             = 1;       /*   tono di lettura   da 0 a 2 */

Alla variabile TTS_Info_Voice_Work, tramite la funzione TTS_Get_Voice_Work (); verrà assegnato true o false ( in base se il browser è o meno abilitato alla sintesi vocale ).   Nel caso restituisca true si sentiranno le voci.
TTS_Info_Voice_Work = TTS_Get_Voice_Work ( );


Alla variabile TTS_Total_Number_Voice , tramite la funzione TTS_Get_Total_Number_Voice ( ); verrà assegnato il numero totale di voci.
Di solito offline i più comuni browser, dispongono di 4 o più voci.
Quando invece si è online, potrebbero essere presenti molte più voci.
Ogni voce è numerata partendo dalla prima che corrisponde al numero 0;
Tale numero per la medesima voce, potrebbe variare da online ad offline, da browser a browser e da nazione a nazione :

TTS_Total_Number_Voice = real ( TTS_Get_Total_Number_Voice ( ) );


Per ogni voce trovata, verranno create le variabili ( array ) TTS_Voice_Name[ ].
Oltre ad essere numerate, le voci hanno anche un loro nome.
Quindi tramite la funzione TTS_Get_Voice_Name ( ); assegniamo a queste variabili il nome della relativa voce :
    for ( i = 0; i ‹ TTS_Total_Number_Voice ; i ++ ; ) {

        TTS_Voice_Name[ i ]   =   TTS_Get_Voice_Name ( i );
}
Il nome di una voce potrebbe contenere :
  • il nome del creatore / proprietario ( Microsoft, Google, ecc... ) ;
  • un nome di persona ( maschile o femminile ) ;
  • la lingua ;
  • la nazione ;
Ecco un possibile risultato :
TTS_Voice_Name[ 0 ] = " Microsoft Cosimo - Italian ( Italy )";
2° script

Search

scr_TTS_Search ( false , ' Italian ' , 'Italiano' );
Se avete un testo scritto in inglese è meglio farlo sentire da una voce inglese.
Tramite questo script potete cercare una voce che corrisponda alla lingua del OS oppure una determinata voce che abbia nel suo nome, la prima oppure la seconda parola inserita. Quindi imposta la variabile TTS_Voice_Selected con il numero relativo a quella voce.

argument0   =   se impostato su true, verrà cercata prima la lingua del OS o browser e quindi viene verificato se è disponibile una voce per quella lingua ;
La prima ricerca verrà eseguita con il termine di Edge;
Se non la trova, la ricerca di nuovo ma con il termine di Chrome;
Se ancora non trova niente allora ricercherà la parola di argumen1;
Se di nuovo non trova nulla allora ricercherà la parola di argument2;
La ricerca tramite OS è volutamente limitata solo ad alcune principali lingue presenti sia su Chrome online che su Edge online :
Nation ** Termine Edge online Termine Chrome online
German de-DE German Deutsch
Italy it-IT Italian italiano
Poland pl-PL Polish polski
Indonesia id-ID Indonesian Bahasa
Japan ja-JP Japanese 日本語
Korea ko-KR Korean 한국의
Netherlands nl-NL Dutch Netherlands
India hi-IN Hindi हिन्दी
United Kingdom en-GB English (United Kingdom) UK English
United States en-US English (United States) US English
France fr-FR French français
Brazil pt-BR Portuguese (Brazil) português do Brasil
Russia ru-RU Russian (Russia) русский
Spain es-ES Spanish (Spain) espaňol
Mexico es-MX Spanish (Mexico) espaňol de Estados Unidos
Chinese HK zh-HK Chinese (Hong Kong) 粤語（香港）
Chinese CN zh-CN Chinese (Mainland) 普通话（中国大陆）
Chinese TW zh-TW Chinese (Taiwan) 國語（臺灣）
Potete trovare ulteriori nomi qui
Scarica nuove voci

argument1   =   parola da cercare nei nomi delle voci ;
argument2   =   nel caso non venga trovata la prima parola, verrà cercata questa seconda parola .

Si tenga in considerazione che se cercate la voce 'Japanese' su Edge basterà ricercare tale parola in inglese, mentre per Chrome ( che riporta alcuni nomi con simboli e caratteri Giapponesi, Cinesi, Coreani,ecc... ), dovreste cercare : '日本語';
Considerate poi che una voce sui vari browser potrebbe non corrispondono al medesimo numero;

Esempi di ricerca :
  • Cerca una voce solo in base alla lingua del OS :
    scr_TTS_Search ( true , ' ', ' ' );
  • Cerca una voce in base alla lingua del OS, altrimenti la voce che contiene la parola1 o la parola2 :
    scr_TTS_Search ( true , 'English ( United States )', 'English Female' );
  • Cerca una voce che contiene la parola1 altrimenti la parola2 :
    scr_TTS_Search ( false , ' Italian ', 'Italiano' );
  • Cerca una voce che contiene la parola1 altrimenti dei simboli o idiomi :
    scr_TTS_Search ( false , ' Japanese ', '日本語' );
E' probabile però che in alcuni browser non vi sia una voce con quella specifica parola e perciò verrà impostata di default con la numero zero ( qualunque voce essa sia ) :   TTS_Voice_Selected = 0;



Demo :  Search.html
3° script

Play

scr_TTS_Play ( ' Hello World ', false );
Riproduce il testo con una determinata voce ;
Non è possibile sentire più voci contemporaneamente.

argument0 = stringa con il testo;
argument1 = stoppa la precedente voce ( true o false ) .

In GameMakerStudio è possibile utilizzare il cancelletto hashtag # per andare a capo con il testo.
Esso potrebbe però anche essere letto da una voce.
Per evitare ciò, rimuoviamo i simboli indesiderati utilizzando questo codice :
argument0 = string_replace_all ( argument0 , ' # ' , ' ' ); // remove_hashtag
argument0 = string_replace_all ( argument0 , ' _ ' , ' ' ); // remove _
argument0 = string_replace_all ( argument0 , ' ‹ ' , ' ' ); // remove ‹
argument0 = string_replace_all ( argument0 , ' › ' , ' ' ); // remove ›


Questo script richiama la funzione TTS_Play presente nel file TTS.js.

TTS_Play ( numero , ' testo ' , volume , rate , pitch );
  • argument0   =   numero della voce   /* TTS_Voice_Selected */
  • argument1   =   testo in una stringa ;
  • argument2   =   volume da 0 a 1 ;   /* TTS_Volume */
  • argument3   =   rate da 0 a ? ;   /* TTS_Rate */
  • argument4   =   pitch da 0 a 2 ;   /* TTS_Pitch */
4° script

Pause

scr_TTS_Pause ( true );

argument0 = true    : metterà in pausa la voce;
argument0 = false   : riesumerà la voce dal punto di pausa;

Questo script richiama la funzione   TTS_Pause ( true );   presente nel file TTS.js.
5° script

Stop

scr_TTS_Stop ( );
Stop, ferma, cancella la voce;

Questo script richiama la funzione   TTS_Stop ( );   presente nel file TTS.js.

Demo Play, Pause e Stop

Demo :  Play_Pause_Stop.html
6° script

Speaking

scr_TTS_Speaking ( );
Controlla se in quel momento la voce è in eseguzione .
Se ritorna true, la voce è in eseguzione;
Se ritorna false, la voce non è in eseguzione;

Per esempio, questa funzione l'ho utilizzata in un gioco per far animare la bocca di un personaggio proprio quando si sentiva la sua voce :
var speech = scr_TTS_Speaking ( );
if   ( speech == true ) {
                                      image_single = -1;
                                      image_speed = clamp ( TTS_Rate, 0, 1 );

                                      } else { image_single = 0;   image_speed = 0;   }
Questo script richiama la funzione   TTS_Speaking ( );   presente nel file TTS.js.
Demo :  Speaking.html
8° script

Voice Select

Crea un select, con tutte le voci, come opzioni selezionabili .
Sarà esterno al canvas ed utilizzerà il font del browser.
Da utilizzare nell' evento STEP di GameMakerStudio .
scr_TTS_Voice_Select ( 10 , 32 );
argument0 = posizione x;
argument1 = posizione y ;



Questo script richiama la funzione   TTS_SelectVoice ( arg0, arg1 );   presente nel file TTS.js
Essa imposterà la variabile TTS_Voice_Selected con il numero della voce selezionata.
Demo :  Voice_Select.html
9° script

Voice Button

Aggiungi uno, più, o tutti i bottoni cliccabili, con i nomi delle voci .
E' possibile utilizzare questo script più volte ( per esempio per creare più bottoni in differenti posizioni ) .
Sarà esterno al canvas ed utilizzerà il font del browser.
Da utilizzare nell' evento STEP di GameMakerStudio .
scr_TTS_Voice_Button ( 70 , 20 , 2 );
argument0 = posizione x;
argument1 = posizione y ;
argument2 = numero della voce;
argument2 = TTS_Voice_Selected ;     ( numero della voce selezionata ) .
argument2 = 10000 ;     crea un bottone per ogni voce presente ;



Questo script richiama la funzione   TTS_ButtonsVoices ( arg0, arg1, arg2 );   presente nel file TTS.js.
Demo :  Voice_Button.html
7° script

Voice List

Disegna una lista scrollabile con tutte i nomi delle voci . In base al numero delle voci presenti, essa potrebbe ridimensionare l' altezza della pagina.html .
Sarà esterna al canvas ed utilizzerà il font del browser.
Da utilizzare nell' evento DRAW di GameMakerStudio .
scr_TTS_Voice_List ( 10 , 40 , true );
argument0 = posizione x;
argument1 = posizione y ;
argument2 = true; ( testo visibile )   false; ( testo non visibile )

Risultato da browser offline, sia su Edge, Opera e Chrome ( 7 voci Microsoft ) :


Risultato da browser Edge online ( 76 voci )   e   da Chrome online ( 26 voci ) :

Come potete notare alcuni nomi delle voci nel browser Chrome, riportano caratteri che potrebbero non essere presenti nel font del vostro progetto.
In questo caso però verrà utilizzato il font di default del browser, che in teoria contiene già tutti quei simboli.
Quando ci si trova online tale lista potrebbe ridimensionare la pagina.html, sopratutto in altezza;


Questo script richiama la funzione   TTS_DrawInfoVoice ( arg0 , arg1 , arg2 );   presente nel file TTS.js.
Demo :  Voice_List.html

Font Voice List

draw_text ( x, y, TTS_Voice_Selected );
Disegnare all' interno del canvas il nome di una voce implicha l'utilizzo di un font di GameMakerStudio e non più quello del browser. Questo potrebbe creare problemi grafici qualora si andasse a disegnare il nome di una voce avente caratteri / simboli / idiomi ( per il Cinese, Giapponese, Coreano, Arabo, ecc... ) come capita su Chrome , i quali potrebbero non essere presenti nel vostro font.

Per ovviare a ciò utilizziamo un mio sprite come font, il quale contiene oltre a tutte le lettere ed i numeri, anche alcuni caratteri / idiomi, necessari al browser Chrome
Ciò però non assicura un risultato perfetto al 100% nei vari browser.
Infatti ulteriori caratteri / idiomi non presenti in esso, risulteranno invisibili :
"Google ไทย" = "Google "
" عربي" = " "



Riportate questo codice nel create dell' obj_TTS_Control, per creare il font :
/// font by sprite
my_TTS_Font = font_add_sprite_ext ( spr_GMS_HTML5_TTS_Font ," ():'´_-­^¨0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyzÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏ
ÐÑÒÓÔÕÖ×ØÙÚÛÜÝÞßàáâãäåæçèéêëìíîïðñòóôõöøùúûüýþÿĀ한국의日本語國語臺灣粤語香港普通话中国大陆рускийहद", false,-8);

Riportate nello script scr_TTS_Font_Voice_List il codice :
draw_set_font ( my_TTS_Font );

Infine aggiungete nell' evento room_end, il seguente codice per distruggere il font :
font_delete ( my_TTS_Font );


Tramite questo script ( da inserire nell' evento Draw di GameMakerStudio ), andremo quindi a disegnare all'interno del canvas, utilizzando il mio sprite come font :
scr_TTS_Font_Voice_List ( x , y , 0 );
argument0 = posizione x;
argument1 = posizione y ;

argument2 = numero della voce da disegnare;
argument2 = TTS_Voice_Selected ;     ( numero della voce selezionata ) .
argument2 = 10000 ;     Saranno disegnate tutte le voci presenti ( lista scrollabile dall' alto in basso, modificando la posizione y ) ;

E' possibile utilizzare questo script più volte ( per esempio per riportare nomi in differenti posizioni ) .

Demo :  Font_Voice_List.html

Flag

Creiamo delle bandiere affinché l'utente possa selezionare la voce desiderata.
Se una voce per quella nazione non è disponibile, oppure il relativo argument è impostato su false, la relativa bandiera non verrà creata.
scr_TTS_Flag( true, true, true, true, true, true, true, true, true, true, true, true, true, true, true, true );
Il numero di bandiere selezionabili è di 15 Nazioni :
   argument0 = United Kingdom;
   argument1 = United States;
   argument2 = Italy;
   argument3 = Spain;
   argument4 = France;
   argument5 = German;
   argument6 = Russia;
   argument7 = Brazil;
   argument8 = Japan;
   argument9 = Korean;
   argument10 = Chine;
   argument11 = Hindi;
   argument12 = Pol;
   argument13 = Indonesian;
   argument14 = Netherlands;


Demo :  Flag.html
Bug conosciuto
In base alla lingua del browser si ricevono nomi delle nazioni differenti.
Per esempio su firefox ( impostato con lingua inglese ) il nome della nazione "United Kingdom" potrebbe anche corrisponde a "Great Britain".
La conseguenza è quella che la bandiera inglese non compare.
Per ciò, affinchè venga creata la bandiera inglese, aggiungete questa riga di codice al numero 38 nello script   scr_TTS_Flag :



Oppure sostituisci l'intero script con questa nuova versione 2.1 :   Flag

Other

Demo Insert Your Name

Fai dire ad una voce il nome di un giocatore dopo che questo lo ha digitato al principio di una partita.
Demo :  Insert_Your_Name.html

Game with

GMS_HTML5_TTS v2

Qui sotto una lista dei miei giochi HTML5 che utilizzano GMS_HTML5_TTS :

Ufonoid

Bepi Venezian

Other TTS by MarketPlace

Esistono altre TTS nel Marketplace della yoyogames :
  1. Per Windows : Text To Speech Complete ( by Ericbomb )
  2. Per Windows : Text To Speech ( by Lonewolff )
  3. Per Android : TTS Android Basic ( by Roadhammer Gaming )

Vecchia versione

GMS_HTML5_TTS v1

GMS_HTML5_TTS v1 ( Text to speech ) è la prima versione mancano vari funzioni come : 'stop' , 'pausa' ed altro e vi sono delle icompatibilità con il browser Firefox il quale non sincronizza bene il passaggio, da un messaggio all' altro.
Demo 1° versione :  link


PAGES and MANUALS
PAGINE e MANUALI




AFFILIATI :