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 :
- in un browser;
- in un browser compatibile con il text-to-speech;
- 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;
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.
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.
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.
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.
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.
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 ) .
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;
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