Tema 27. Godot Engine. Multi-idioma. Diálogos
Podemos crear un entorno en varios idiomas de la siguiente forma. En este ejemplo añadiremos el idioma inglés y español.
Primero crearemos una hoja de cálculo de la siguiente forma (lo podemos hacer con cualquier aplicación de hoja de cálculo) en este ejemplo se realiza con LibreOffice:
En la primera columna se crea el identificador de texto. La segunda columna se utiliza para crear el idioma inglés. La tercera columna para el idioma en español.
Es obligatorio crear o guardar el archivo en formato Unicode (UTF-8) Si no se guarda en dicho formato, no funcionará. Al abrirlo con LibreOffice pregunta el tipo en characterset
Guardaremos el archivo en una carpeta de nuestro proyecto. Se debe guardar en formato csv.
Ejemplo: traduc.csv
Una vez guardado el archivo en una carpeta del proyecto, debemos añadir los idiomas respectivos en la Configuración del Proyecto de Godot -> Traducciones
Le damos a Añadir y observaremos como aparecen 3 archivos en la carpeta donde hemos añadido el archivo traduc.csv. (El propio archivo traduc.csv+traduc.en.translation+traduc.es.translation)
Añadimos las dos traducciones:
Ahora añadiremos una etiqueta nueva en el HUD donde aparecerá un texto
A la etiqueta la llamamos saludo.
Entramos en el código y escribimos lo siguiente:
extends CanvasLayer func _ready(): $saludo.text = tr(«ask») func _process(delta): $puntos.text = String(DataManager.vidas_player) |
tr es la instrucción que hace referencia al id del texto que queremos mostrar.
En el ejemplo, seleccionamos la fila ask -> tr(“ask”) que mostrará -> How are you? o ¿Cómo estás? dependiendo del idioma que tengamos seleccionado.
Para cambiar el idioma según deseemos usaremos la instrucción con la opción es o en según el idioma que queramos mostrar:
TranslationServer.set_locale(«es»)
TranslationServer.set_locale(«en»)
Se muestra el texto de la etiqueta en español
extends CanvasLayer func _ready(): TranslationServer.set_locale(«es») $saludo.text = tr(«ask») func _process(delta): $puntos.text = String(DataManager.vidas_player) |
Se muestra el texto de la etiqueta en inglés
extends CanvasLayer func _ready(): TranslationServer.set_locale(«en») $saludo.text = tr(«ask») func _process(delta): $puntos.text = String(DataManager.vidas_player) |
Esta instrucción se suele añadir en el menú principal dentro de la opción seleccionar lenguaje.
DIÁLOGOS |
Vamos a ver cómo se pueden implementar cajas de diálogos. Las cajas de diálogos son muy usadas en juegos interactivos de tipo rol.
Para los diálogos interactivos empezaremos creando un Nodo de tipo Control:
Y en el menú superior Layout le indicaremos que sea Completo.
Una vez creado, añadiremos otro Nodo Control dentro del Nodo creado. Le llamaremos Dialog. Y también será Completo (Ocupará toda la pantalla).
El siguiente paso será añadir una imagen de fondo al diálogo. Para ello crearemos un Nodo TextureRect hijo del Nodo Dialog. En Layout le diremos que sea Completo. Y le añadimos una imagen.
Para añadir el texto, crearemos un Nodo de tipo RichTextLabel, que será hijo de Dialog. Y adaptamos el tamaño a nuestra imagen de fondo.
En CustomStyles o CustomFonts podemos añadir el tipo de fuente al RichTextLabel.
Activaremos la propiedad Bb Code. De esta forma se activa el análisis sintáctico de la label y podemos establecer diferentes opciones en el texto dentro del propiedad Text del BbCode.
La propiedad percent del Bbcode permite establecer el porcentaje de texto visible.
Si lo deseamos también podemos añadir una imagen dentro del diálogo. Si lo hacemos añadiremos un Sprite como hijo del Dialog. Y si lo queremos animar, añadiremos un AnimatedSprite.
Ahora añadiremos un Nodo Tween. Estos nodos nos permiten crear efectos.
Creamos un Objeto que cuando el Player lo to que, aparezca un mensaje mostrando que se puede interactuar. Por defecto, Label visible a false.
Añadimos un Texto a la etiqueta. Cuando el Player toque la moneda, aparecerá el texto de la etiqueta encima de la moneda.
No olvidemos conectar el Área2D con el body entered y exited.
Creamos el Script del Nodo Dialog.
Script Dialog
extends Control # Declare member variables here. Examples: # var a = 2 # var b = «text» var dialog_index = 0 var finished = false # Called when the node enters the scene tree for the first time. func _ready(): load_dialog() func load_dialog(): if dialog_index < 10: finished=false $RichTextLabel.bbcode_text = tr(«ask») $RichTextLabel.percent_visible = 0 $Tween.interpolate_property($RichTextLabel,»percent_visible»,0,1,1,Tween.TRANS_LINEAR,Tween.EASE_IN_OUT) $Tween.start() else: queue_free() dialog_index+=1 func _process(delta): if Input.is_action_pressed(«Player_Left») or Input.is_action_pressed(«Player_Right»): queue_free() func _on_Tween_tween_completed(object, key): finished=true |
Nota: el tercer parámetro numérico del Tween es la velocidad del texto (Typewritting):
$Tween.interpolate_property($RichTextLabel,»percent_visible»,0,1,3,Tween.TRANS_LINEAR,Tween.EASE_IN_OUT)
Si lo ponemos a 3 irá más lento.
Si el personaje se mueve una vez se ha mostrado el Dialog, este se elimina.
Script Objeto (Área2D)
extends Area2D var interactua = false const DIALOG = preload(«res://Control.tscn») # Called when the node enters the scene tree for the first time. func _ready(): pass # Called every frame. ‘delta’ is the elapsed time since the previous frame. func _process(delta): pass func _input(event): if Input.is_action_pressed(«tecla_c») and interactua: var dialog = DIALOG.instance() get_parent().add_child(dialog) func _on_Objeto_body_entered(body): if body.name == «Player2»: interactua = true $Label.visible = true func _on_Objeto_body_exited(body): if body.name == «Player2»: interactua = false $Label.visible = false |
Crearemos un Botón el HUD y le asignaremos el action el «tecla_c» (Al pulsar C) que se abra el diálogo.
Pero hemos de decirle que se abra “pulsando C” y que además el personaje “interactúe” con el Objeto (moneda)
SEGUNDA FORMA DE HACERLO: BUSCANDO EL VALOR DE LA PROPIEDAD DEL NODO
En el Script del Dialog
func _process(delta): var valor = get_node(«/root/Nivel1/Objeto»).interactua if valor == false: queue_free() |
Accedemos a la propiedad del Nodo Objeto y testeamos su valor