Creación de Videojuegos. Godot Engine. Multi-idioma. Diálogos

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:

Hoja de cálculo. LibreOffice. Godot
Hoja de cálculo. LibreOffice. Godot

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

Configuración del Proyecto de Godot -> Traducciones. Godot
Configuración del Proyecto de Godot -> Traducciones. Godot

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 los archivos. Godot
Se muestran los archivos de traducción. Godot

Añadimos las dos traducciones:

Añadimos las dos traducciones que tenemos. Godot
Añadimos las dos traducciones que tenemos. Godot

Ahora añadiremos una etiqueta nueva en el HUD donde aparecerá un texto

Añadiremos una etiqueta nueva en el HUD. Godot
Añadiremos una etiqueta nueva en el HUD. Godot

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 español. Godot
Se muestra el texto de la etiqueta en español. Godot

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)
Se muestra el texto de la etiqueta en inglés Godot
Se muestra el texto de la etiqueta en inglés Godot

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:

Creamos un Nodo de tipo Control. Godot
Creamos un Nodo de tipo Control. Godot

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).

Añadiremos otro Nodo Control dentro del Nodo creado. Godot
Añadiremos otro Nodo Control dentro del Nodo creado. Godot

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.

Al Nodo TextureRect le añadimos imagen. Godot
Al Nodo TextureRect le añadimos imagen. Godot

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.

Creamos un Nodo de tipo RichTextLabel para el Texto. Godot
Creamos un Nodo de tipo RichTextLabel para el Texto. Godot

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.

Activaremos la propiedad Bb Code. Godot
Activaremos la propiedad Bb Code. Godot

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.

Añadimos un Nodo Tween. Godot
Añadimos un Nodo Tween. Godot

Creamos un Objeto que cuando el Player lo to que, aparezca un mensaje mostrando que se puede interactuar. Por defecto, Label visible a false.

Objeto que cuando el Player lo to que, aparezca un mensaje. Godot
Objeto que cuando el Player lo to que, aparezca un mensaje. Godot
Añadimos texto a la etiqueta. Godot
Añadimos texto a la etiqueta. Godot

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


ÍNDICE


0 0 votes
Calificación del artículo
Suscribirse
Notify of
guest
0 Comentarios
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x