1
00:00:04,470 --> 00:00:05,770
‫Oye, bienvenido de nuevo.

2
00:00:05,790 --> 00:00:12,240
‫En este video, vamos a trabajar en mostrar texto en la pantalla para avisarnos que el juego está comenzando.

3
00:00:12,240 --> 00:00:18,240
‫Y este es el primer paso para mostrar el temporizador de cuenta regresiva para que el jugador sepa que

4
00:00:18,240 --> 00:00:21,140
‫el juego aún no ha comenzado, pero comenzará pronto.

5
00:00:21,150 --> 00:00:24,900
‫Ahora, esto va a involucrar eventos implementables de planos.

6
00:00:24,930 --> 00:00:32,280
‫Un evento implementable de blueprint es una función de C++ que podemos llamar desde C++, pero en realidad implementamos

7
00:00:32,280 --> 00:00:35,070
‫la funcionalidad en el lado del blueprint.

8
00:00:35,070 --> 00:00:41,910
‫Así que podemos tener nuestra clase de C++ como el modo de juego, y podemos tener una función

9
00:00:41,910 --> 00:00:47,310
‫marcada como un anteproyecto, evento implementable, y luego podemos implementar ese comportamiento en anteproyectos.

10
00:00:47,310 --> 00:00:54,570
‫Entonces, cuando llamamos a la función C ++ marcada como un evento implementable de blueprint, entonces se activará el evento

11
00:00:54,570 --> 00:00:55,920
‫en el blueprint.

12
00:00:55,920 --> 00:01:01,890
‫Y se llamará a cualquier lógica de plano técnico que conectemos con ese evento en el plano técnico.

13
00:01:02,160 --> 00:01:08,640
‫Así que voy a crear una función de evento implementable de blueprint aquí en tune tanks, los modos de juego y los

14
00:01:08,640 --> 00:01:11,310
‫eventos implementables de blueprint no pueden ser privados.

15
00:01:11,310 --> 00:01:14,220
‫Así que voy a agregar esto a la sección protegida.

16
00:01:14,220 --> 00:01:19,080
‫Ahora voy a hacer de esto una función nula y simplemente voy a llamar a este juego de inicio.

17
00:01:19,080 --> 00:01:25,380
‫Ahora, para hacer de este un evento implementable de modelo, tengo que darle una macro de función U con la

18
00:01:25,380 --> 00:01:26,160
‫función U.

19
00:01:26,160 --> 00:01:30,570
‫Especifique el evento implementable del blueprint.

20
00:01:30,690 --> 00:01:36,390
‫Ahora, una vez que marcamos este evento implementable de blueprint, ni siquiera necesitamos darle un cuerpo de

21
00:01:36,390 --> 00:01:37,800
‫función aquí en C++.

22
00:01:37,800 --> 00:01:43,680
‫Unreal Engine esperará que implementemos la funcionalidad para esto en planos, pero podemos llamarlo desde C++

23
00:01:43,680 --> 00:01:49,110
‫y eso es exactamente lo que haremos aquí en Manejar el inicio del juego.

24
00:01:49,110 --> 00:01:55,260
‫Entonces, justo después de que hayamos configurado el tanque y las variables del controlador del jugador, llamaré al inicio del juego

25
00:01:56,070 --> 00:01:57,840
‫y ahora podemos compilar esto.

26
00:01:57,840 --> 00:02:04,170
‫Y saltando de nuevo aquí en el editor, voy a abrir el modo de juego BP tune tanks y aquí es

27
00:02:04,170 --> 00:02:05,700
‫donde podemos implementar la función.

28
00:02:05,700 --> 00:02:13,380
‫Entonces, si hacemos clic con el botón derecho y escribimos start game, entonces aquí está el evento start game que se creó

29
00:02:13,380 --> 00:02:19,980
‫tan pronto como declaramos la función y le dimos la macro de función con el evento implementable blueprint.

30
00:02:19,980 --> 00:02:26,580
‫Entonces, en el lado de C++, estamos llamando a esto y en blueprints, este evento está respondiendo.

31
00:02:26,610 --> 00:02:33,390
‫Podemos probar esto con un nodo de cadena de impresión simple y para la cadena podemos decir Iniciar juego.

32
00:02:33,600 --> 00:02:37,650
‫Ahora, si presionamos reproducir, veré iniciar el juego en la parte superior izquierda.

33
00:02:37,650 --> 00:02:41,370
‫Entonces sabemos que nuestro evento implementable de blueprint está funcionando.

34
00:02:41,370 --> 00:02:49,530
‫Ahora, lo que nos gustaría que hiciera este evento es mostrar un widget que contenga texto que informe al jugador que el juego está a

35
00:02:49,530 --> 00:02:53,880
‫punto de comenzar, lo que significa que necesitamos crear un widget para mostrar.

36
00:02:53,880 --> 00:03:00,960
‫Así que voy a crear una nueva carpeta en la carpeta de blueprints y voy a llamar a esto widgets y voy a hacer

37
00:03:00,960 --> 00:03:02,370
‫doble clic en widgets.

38
00:03:02,370 --> 00:03:05,730
‫Y aquí es donde voy a crear un nuevo modelo de widget.

39
00:03:05,940 --> 00:03:11,010
‫Ahora, si hago clic derecho y voy a la interfaz de usuario, aquí está Widget Blueprint.

40
00:03:11,040 --> 00:03:17,520
‫Ahora, si hago clic en esto, crearé un nuevo modelo de widget y llamaré a este W BP

41
00:03:17,520 --> 00:03:21,540
‫para Widget Blueprint, guión bajo para iniciar el widget del juego.

42
00:03:21,960 --> 00:03:27,240
‫Y si hago doble clic aquí, abriré el editor de Widget Blueprint y verá que se

43
00:03:27,240 --> 00:03:31,560
‫ve un poco diferente al editor de Blueprint que estamos acostumbrados a ver.

44
00:03:31,560 --> 00:03:33,840
‫Y eso es porque esto es para un widget.

45
00:03:33,840 --> 00:03:37,860
‫Los widgets son buenos para mostrar cosas en la pantalla como texto.

46
00:03:37,890 --> 00:03:43,590
‫Ahora hay mucho aquí y solo vamos a hacer un widget muy básico que muestre texto.

47
00:03:43,620 --> 00:03:50,310
‫Hay varios tipos diferentes de elementos que podemos agregar a un modelo de widget, como

48
00:03:50,310 --> 00:03:53,580
‫bordes, botones, casillas de verificación, imágenes, etc.

49
00:03:53,580 --> 00:03:58,140
‫Pero lo que nos interesa es este de aquí que dice Texto.

50
00:03:58,140 --> 00:04:05,280
‫Ahora mira aquí abajo en el panel de jerarquía, verás que tenemos el widget general de inicio de juego de WB en la

51
00:04:05,280 --> 00:04:06,180
‫parte superior.

52
00:04:06,180 --> 00:04:10,500
‫Y si hacemos clic en eso, podemos cambiar las propiedades de este widget.

53
00:04:10,530 --> 00:04:14,040
‫Ahora podemos arrastrar elementos de widgets a esta jerarquía.

54
00:04:14,040 --> 00:04:20,070
‫Así que voy a buscar en la paleta el panel de lienzo y lo arrastraré a mi jerarquía.

55
00:04:21,590 --> 00:04:28,880
‫Ahora, un panel de lienzo nos permite colocar elementos de widgets y configurarlos en la ubicación deseada en la pantalla

56
00:04:28,880 --> 00:04:33,020
‫para que podamos arrastrar un elemento de texto directamente al gráfico.

57
00:04:33,020 --> 00:04:37,910
‫Y verá en la jerarquía este nuevo elemento debajo del panel de lienzo.

58
00:04:37,910 --> 00:04:39,360
‫Y dice, Texto.

59
00:04:39,360 --> 00:04:40,310
‫Bloque de texto.

60
00:04:40,310 --> 00:04:47,450
‫Ahora, este bloque de texto entre comillas es el texto que se configura automáticamente para este widget de texto.

61
00:04:47,450 --> 00:04:54,740
‫Y aquí, en el panel de detalles, con este widget de texto seleccionado en contenido, vemos una propiedad de texto y

62
00:04:54,740 --> 00:04:57,170
‫está configurada en bloque de texto.

63
00:04:57,170 --> 00:05:00,860
‫Pero podemos configurar esto para cualquier texto que queramos, como prepárate.

64
00:05:01,250 --> 00:05:06,620
‫Ahora, después de configurar esto para prepararse, verá que el texto aquí en la pantalla dice: Prepárese.

65
00:05:06,710 --> 00:05:13,940
‫Entonces, el editor de Widget Blueprint nos permite personalizar nuestro aviso de widgets en la parte superior izquierda de

66
00:05:13,940 --> 00:05:17,810
‫la pantalla, este medallón aquí, esto se llama ancla.

67
00:05:17,840 --> 00:05:22,100
‫Nuestro widget de texto se coloca en la pantalla en relación con el ancla.

68
00:05:22,100 --> 00:05:27,560
‫Entonces, si el tamaño de la pantalla cambia, la distancia desde ese ancla permanecerá constante.

69
00:05:27,560 --> 00:05:29,990
‫Y podemos cambiar el ancla si queremos.

70
00:05:30,020 --> 00:05:35,690
‫Por ejemplo, podemos configurar nuestro widget de texto en relación con un ancla en el medio de la pantalla

71
00:05:35,690 --> 00:05:39,470
‫yendo al panel de detalles y debajo de la ranura vemos anclas.

72
00:05:39,470 --> 00:05:45,500
‫Y si hago clic en el menú desplegable, puedo seleccionar este ícono que tiene un cuadrado en el medio.

73
00:05:45,500 --> 00:05:51,080
‫Si selecciono eso ahora, el ancla está en el centro de la pantalla, y si quiero que mi

74
00:05:51,080 --> 00:05:58,430
‫widget esté completamente centrado, puedo cambiar su posición X e Y aquí en la categoría de ranura para poder configurarlo en cero para la

75
00:05:58,430 --> 00:06:05,540
‫posición X y cero. para la posición Y y desplazándome con la rueda del mouse para acercar, verá que está en la esquina

76
00:06:05,540 --> 00:06:08,510
‫superior izquierda como en el medio de la pantalla.

77
00:06:08,510 --> 00:06:17,180
‫Ahora, este campo de alineación aquí puede permitirnos centrar esto perfectamente eligiendo valores de 0. 54 X y 0. 54 Y, y ahora está

78
00:06:17,180 --> 00:06:21,350
‫completamente centrado en el medio de la pantalla.

79
00:06:21,440 --> 00:06:27,770
‫Ahora, para un widget de inicio del juego, probablemente sea apropiado colocar este texto un poco más

80
00:06:27,770 --> 00:06:28,250
‫arriba.

81
00:06:28,250 --> 00:06:35,840
‫Entonces, para la posición Y, puedo hacer clic y arrastrar esto hacia la izquierda, lo que hará que el valor de la posición Y sea

82
00:06:35,840 --> 00:06:40,250
‫negativo en el editor de planos del widget, el eje y apunta hacia abajo.

83
00:06:40,250 --> 00:06:46,250
‫Entonces, si queremos elevar nuestro widget de texto, vamos a hacer que esa posición tenga un valor más bajo.

84
00:06:46,250 --> 00:06:49,130
‫Voy a colocarlo aquí arriba alrededor de -300.

85
00:06:49,130 --> 00:06:55,460
‫Ahora, en la categoría de apariencia, puedo cambiar una serie de propiedades para este texto.

86
00:06:55,460 --> 00:07:01,730
‫Si hago clic en el menú desplegable de fuente, puedo cambiar el tamaño de la fuente para decir algo como 42.

87
00:07:01,730 --> 00:07:04,070
‫Ahora para tipografía en lugar de negrita.

88
00:07:04,070 --> 00:07:06,140
‫Me gusta la tipografía normal.

89
00:07:06,140 --> 00:07:07,970
‫Creo que se ve un poco mejor ahora.

90
00:07:07,970 --> 00:07:14,300
‫Observe que el texto de nuestro widget de texto es más grande que el rectángulo verde aquí, pero podemos cambiar el tamaño de

91
00:07:14,300 --> 00:07:15,230
‫este rectángulo verde.

92
00:07:15,230 --> 00:07:22,010
‫Y mientras estoy cambiando el rectángulo, verá aquí en el panel de detalles que el tamaño X y el tamaño y

93
00:07:22,010 --> 00:07:22,880
‫están cambiando.

94
00:07:22,880 --> 00:07:26,270
‫Ahora, observe que la posición X se ha movido un poco desde que la cambié.

95
00:07:26,270 --> 00:07:32,180
‫Puedo volver a ponerlo en cero y dado que la alineación de la x es 0. 5, está perfectamente centrado.

96
00:07:32,180 --> 00:07:35,540
‫Así que ahora tengo un widget que dice Prepárate.

97
00:07:35,570 --> 00:07:40,400
‫Lo único que queda por hacer es agregar esto a la ventana gráfica para que podamos verlo en la pantalla.

98
00:07:40,400 --> 00:07:46,370
‫Notarás que si presiono reproducir y empiezo a jugar, no vi ese widget en la pantalla.

99
00:07:46,370 --> 00:07:51,530
‫Eso es porque tenemos que agregar esto activamente a la pantalla, y es por eso que creamos este

100
00:07:51,530 --> 00:07:56,960
‫evento implementable de plano en el modo de juego para que podamos agregar este widget a la pantalla aquí.

101
00:07:56,960 --> 00:07:59,090
‫Así que hablemos de cómo hacer eso.

102
00:07:59,420 --> 00:07:59,840
‫Ahora.

103
00:07:59,840 --> 00:08:05,930
‫La forma de crear un widget a partir de planos es mediante el uso de un nodo de creación de widgets.

104
00:08:05,960 --> 00:08:11,870
‫Puede hacer clic derecho en el gráfico de eventos de cualquier proyecto y comenzar a escribir el nombre de un nodo y

105
00:08:11,870 --> 00:08:13,760
‫luego seleccionar ese nodo en particular.

106
00:08:13,790 --> 00:08:16,040
‫El nodo que necesitamos es crear widget.

107
00:08:16,040 --> 00:08:20,990
‫Ahora verás que dice Create Coolness Widget.

108
00:08:20,990 --> 00:08:27,020
‫Y eso es porque tan pronto como agregué el nodo Create Widget, seleccioné la clase Widget Blueprint aquí

109
00:08:27,020 --> 00:08:29,150
‫en el menú desplegable de clases.

110
00:08:29,150 --> 00:08:34,340
‫Esto es necesario para que Unreal Engine sepa qué clase de widget crear.

111
00:08:34,370 --> 00:08:40,880
‫Ahora, después de usar un nodo de creación de widgets, usamos un nodo de agregar a la ventana gráfica para agregar este

112
00:08:40,880 --> 00:08:45,290
‫widget a la ventana gráfica y luego podemos verlo en la pantalla del juego.

113
00:08:45,320 --> 00:08:52,700
‫Tenga en cuenta que los cables de ejecución están conectados y también que el nodo crear widget devuelve esta salida azul y esto

114
00:08:52,700 --> 00:08:59,300
‫debe conectarse a la entrada de destino en agregar a la ventana gráfica ya que agregar a la ventana

115
00:08:59,300 --> 00:09:06,290
‫gráfica necesita saber qué widget agregar a la ventana gráfica y el nodo crear widget devuelve el valor de ese widget.

116
00:09:06,290 --> 00:09:11,570
‫Entonces, ahora que sabe cómo crear un widget en planos, irá a la clase de modo de juego

117
00:09:11,570 --> 00:09:14,960
‫BP tune tanks y usará un nodo de creación de widgets.

118
00:09:14,990 --> 00:09:20,390
‫Vas a conectar esto desde nuestro cable de ejecución de eventos implementable de blueprint.

119
00:09:20,500 --> 00:09:21,910
‫Llamamos a Iniciar juego.

120
00:09:21,910 --> 00:09:29,800
‫Ahora, en el nodo Crear widget, debemos seleccionar la clase de widget para crear, así que seleccione el widget de juego de inicio de WB,

121
00:09:29,800 --> 00:09:36,700
‫ese nuevo modelo de widget que acabamos de crear y luego use un nodo Agregar a la ventana gráfica para agregar este

122
00:09:36,700 --> 00:09:40,960
‫nuevo widget a la ventana gráfica y enganchar hasta los cables de ejecución.

123
00:09:40,960 --> 00:09:47,560
‫Y no olvide vincular el valor de retorno de crear widget a la entrada de destino en agregar a la ventana gráfica.

124
00:09:47,560 --> 00:09:52,900
‫Así que pausa el video y agrega estos nodos al plano del modo de juego del tune tank ahora.

125
00:09:56,670 --> 00:10:03,090
‫Así que estoy aquí en el plano del modo de juego Tanks tune y voy a hacer clic con el botón derecho y

126
00:10:03,090 --> 00:10:05,700
‫escribir crear widget y elegir el nodo Create Widget.

127
00:10:05,730 --> 00:10:07,830
‫Ahora observe que dice Construir Ninguno.

128
00:10:07,830 --> 00:10:12,930
‫Y eso es porque va a decir eso hasta que seleccionemos la clase de widget apropiada en el menú desplegable

129
00:10:12,930 --> 00:10:13,600
‫de clases.

130
00:10:13,620 --> 00:10:18,210
‫Pero antes de hacer eso, voy a conectar el cable de ejecución desde el inicio del juego de eventos.

131
00:10:18,210 --> 00:10:24,720
‫Entonces, en realidad ejecutamos esta funcionalidad tan pronto como nuestro juego de inicio de evento implementable de blueprint

132
00:10:24,720 --> 00:10:26,700
‫se llama desde C ++.

133
00:10:26,970 --> 00:10:34,830
‫Ahora, para el menú desplegable de clases, voy a seleccionar WP Start Game Widget y ahora el título del nodo

134
00:10:34,830 --> 00:10:38,700
‫cambia para decir Create WP Start Game Widget Widget.

135
00:10:38,820 --> 00:10:41,880
‫Ahora podemos ver que este es un nodo de creación de widgets.

136
00:10:41,910 --> 00:10:48,660
‫Ahora voy a hacer clic en el cable de ejecución y arrastrarlo y luego escribir agregar a la ventana gráfica.

137
00:10:48,660 --> 00:10:54,720
‫Y luego, si selecciono agregar a la ventana gráfica, los cables de ejecución se conectan automáticamente para mí,

138
00:10:54,720 --> 00:11:01,410
‫pero no conecta el valor de retorno de crear widget a la entrada de destino para agregar a la ventana gráfica.

139
00:11:01,410 --> 00:11:04,070
‫Así que necesito hacer clic y arrastrar eso yo mismo.

140
00:11:04,080 --> 00:11:10,920
‫Entonces, cuando se llame a Start Game desde C ++ y la clase de modo de juego, ejecutaremos esta lógica de

141
00:11:10,920 --> 00:11:18,330
‫modelo que dará como resultado la creación de un nuevo widget basado en el widget WP Start Game y luego lo agregaremos a

142
00:11:18,330 --> 00:11:19,500
‫la ventana gráfica.

143
00:11:19,500 --> 00:11:23,220
‫Así que voy a hacer clic en reproducir y ahí está el widget Prepárate.

144
00:11:23,400 --> 00:11:29,550
‫Ahora mencionamos que esto mostrará un temporizador de cuenta regresiva, pero aún no hemos implementado esa funcionalidad,

145
00:11:29,550 --> 00:11:32,220
‫por lo que estará disponible pronto.

146
00:11:32,490 --> 00:11:39,090
‫Entonces, en resumen, creamos el plano del widget de inicio del juego y, por ahora, solo tiene un texto que

147
00:11:39,090 --> 00:11:39,930
‫dice Prepárate.

148
00:11:40,260 --> 00:11:46,740
‫También usamos un nodo de creación de widgets y un nodo de agregar a la ventana gráfica para agregar este widget a la ventana gráfica para

149
00:11:46,740 --> 00:11:48,990
‫que podamos verlo tan pronto como comience el juego.

150
00:11:48,990 --> 00:11:55,620
‫E iniciamos esta funcionalidad usando nuestro evento implementable de modelo que creamos en la clase de C++ del modo

151
00:11:55,620 --> 00:12:02,460
‫de juego llamada Iniciar juego en los videos que vienen, vamos a cambiar el texto en este widget en tiempo

152
00:12:02,460 --> 00:12:09,270
‫de ejecución para que muestre cuánto tiempo queda en ese temporizador de inicio del juego para que el jugador sepa

153
00:12:09,270 --> 00:12:13,140
‫cuánto tiempo debe esperar antes de que pueda comenzar a jugar.

154
00:12:13,860 --> 00:12:14,850
‫Te veré pronto.