1
00:00:04,300 --> 00:00:05,140
‫Hola y bienvenido.

2
00:00:05,140 --> 00:00:10,000
‫En esta conferencia vamos a mostrar una pantalla suelta y lo

3
00:00:10,000 --> 00:00:13,630
‫haré completamente desde C++ para generar ese widget.

4
00:00:13,900 --> 00:00:15,250
‫Vamos a sumergirnos y ver cómo se hace.

5
00:00:15,880 --> 00:00:21,220
‫De acuerdo, nos gustaría mostrar algo de interfaz de usuario cuando un jugador muere para decirle qué está pasando, que ha perdido y

6
00:00:21,220 --> 00:00:23,230
‫que el nivel está a punto de restablecerse.

7
00:00:23,230 --> 00:00:25,240
‫Así que no les sorprende.

8
00:00:25,240 --> 00:00:31,780
‫Por lo tanto, no necesitamos crear una interfaz de usuario, widgets de interfaz de usuario, un UMG, un widget de gráficos en movimiento irreal.

9
00:00:32,440 --> 00:00:35,800
‫Entonces, primero hagámoslo, creando una carpeta para almacenar la interfaz de usuario.

10
00:00:35,800 --> 00:00:41,440
‫Y ya sé que vamos a tener dos elementos de UI, así que creo que tendré una carpeta de UI aquí y

11
00:00:41,440 --> 00:00:47,140
‫luego entremos aquí y hagamos clic con el botón derecho y luego vamos, deberías haber hecho esto antes, pero vamos. te guiaré a

12
00:00:47,140 --> 00:00:48,000
‫través de él.

13
00:00:48,040 --> 00:00:52,540
‫Vamos a ir a la sección de la interfaz de usuario, luego seleccionamos el modelo de widgets y el

14
00:00:52,540 --> 00:00:56,890
‫prefijo que se va a usar es el guión bajo WB P y luego será la pantalla suelta.

15
00:00:57,520 --> 00:01:02,710
‫Ahora puedes hacer algunas clases base para este tipo de cosas en C++, pero no vamos a cubrir esto en

16
00:01:02,710 --> 00:01:03,310
‫esta sección.

17
00:01:03,550 --> 00:01:07,450
‫Por lo general, no es necesario hacer eso, y es mucho más fácil hacerlo en Blueprint.

18
00:01:07,450 --> 00:01:13,060
‫No hay muchas ventajas en hacerlo en C++ a menos que una interfaz de usuario se vuelva muy complicada y desee poner

19
00:01:13,060 --> 00:01:15,610
‫parte de esa lógica de interfaz de usuario en C++.

20
00:01:15,940 --> 00:01:20,500
‫En nuestro caso, este no es el caso, por lo que podemos seguir adelante y usar los planos.

21
00:01:20,500 --> 00:01:22,450
‫Después de todo, la interfaz de usuario es algo visual.

22
00:01:22,450 --> 00:01:28,780
‫Tiene sentido usar una herramienta visual para armarlo ahora porque ya sabe cómo crear

23
00:01:28,780 --> 00:01:29,470
‫widgets.

24
00:01:29,470 --> 00:01:32,830
‫Entonces voy a darte esto como un desafío para que configures una pantalla suelta.

25
00:01:32,830 --> 00:01:36,970
‫Queremos agregar un texto que explique que el jugador ha perdido y que estamos a punto de reiniciar.

26
00:01:37,270 --> 00:01:41,980
‫Quiere colocar ese texto probablemente en el centro, hacerlo visible, asegurarse de que sea visible en el juego.

27
00:01:41,980 --> 00:01:45,370
‫Y, sin embargo, como dije, explique que habrá un reinicio próximamente.

28
00:01:45,850 --> 00:01:50,470
‫Y luego, después de que hayas intentado este desafío, veremos cómo podemos generar esto desde C++.

29
00:01:50,470 --> 00:01:55,660
‫Tal vez haya visto cómo hacer esto en Blueprint antes de que veamos cómo podemos hacerlo desde C++.

30
00:01:55,660 --> 00:01:56,770
‫Así que pausa el video y hazlo.

31
00:01:57,130 --> 00:01:58,180
‫Bien, bienvenido de nuevo.

32
00:01:58,750 --> 00:02:03,040
‫Así que voy a ir y crear, en primer lugar, un poco de texto.

33
00:02:03,430 --> 00:02:09,160
‫Así que quiero buscar en la paleta de la izquierda, voy a buscar el elemento de texto y traerlo.

34
00:02:10,060 --> 00:02:13,420
‫Te lo voy a cambiar para que pierdas.

35
00:02:13,750 --> 00:02:16,630
‫Escritura de diálogo bastante sencilla y poco imaginativa aquí.

36
00:02:17,170 --> 00:02:22,210
‫Voy a cambiar el color, la opacidad y la apariencia a rojo para que quede súper claro que se han perdido

37
00:02:22,210 --> 00:02:27,580
‫y solo lo frotaré un poco más y voy a expandir esa fuente y cambiar el tamaño para que sea más grande.

38
00:02:27,580 --> 00:02:27,910
‫.

39
00:02:28,120 --> 00:02:35,310
‫Y luego voy a expandir el cuadro alrededor de nuestro texto y voy a centrar nuestro texto.

40
00:02:35,320 --> 00:02:38,050
‫Entonces, bajando la justificación, voy a centralizar el texto.

41
00:02:38,050 --> 00:02:44,340
‫Y si me expando, veamos si hay algún otro lugar en el que pueda alinearme al centro y que no lo

42
00:02:44,410 --> 00:02:44,860
‫haya.

43
00:02:44,860 --> 00:02:53,440
‫Así que voy a ir y hacer las cajas más o menos apropiadas y luego voy a subir a mis alineaciones y mis anclas

44
00:02:53,440 --> 00:02:54,910
‫y cosas así.

45
00:02:55,540 --> 00:03:01,870
‫Y voy a seleccionar el menú desplegable para anclas y seleccionar el ajuste preestablecido para anclarse en el medio, porque eso es lo

46
00:03:02,080 --> 00:03:03,070
‫que quiero hacer.

47
00:03:03,850 --> 00:03:12,400
‫Quiero establecer mi alineación en 0. 5 y 0. 5, lo que básicamente significa que estamos alineando con el

48
00:03:12,400 --> 00:03:16,660
‫centro del objeto en lugar de que la esquina superior izquierda vuelva a hacer el ancla.

49
00:03:16,660 --> 00:03:18,790
‫Bien, eso no significa que no fue muy útil.

50
00:03:19,300 --> 00:03:24,460
‫Y luego la posición X, ¿por qué creo que si solo configuro la posición junto a cero y cero porque

51
00:03:24,460 --> 00:03:29,200
‫configuré mis anclas de esa manera, entonces mi posición perdida estará en algún lugar en el medio y

52
00:03:29,200 --> 00:03:31,180
‫simplemente la moveré? hacia arriba muy ligeramente.

53
00:03:31,240 --> 00:03:37,960
‫Mantenga mi posición X en cero, la posición Y en -50, porque quiero agregar un texto secundario que diga, en efecto, podría

54
00:03:37,980 --> 00:03:42,430
‫ser más fácil simplemente duplicar el otro texto aquí porque tiene toda la configuración

55
00:03:42,880 --> 00:03:43,870
‫que ya necesito.

56
00:03:43,870 --> 00:03:46,030
‫Solo quiero hacerlo un poco más pequeño.

57
00:03:46,030 --> 00:03:54,100
‫Coloque cero nuevamente y voy a decir que el nivel se reiniciará en 5 segundos y voy a hacer que el tamaño de fuente sea

58
00:03:54,100 --> 00:03:55,210
‫mucho más pequeño.

59
00:03:55,210 --> 00:04:00,370
‫Entonces es menos en tu cara, algo como esto, y luego solo muévelo un poco hacia

60
00:04:00,370 --> 00:04:05,920
‫abajo, una pequeña muesca y sigue restableciendo esa posición X a cero y 100% feliz con el posicionamiento.

61
00:04:05,920 --> 00:04:08,500
‫Solo voy a moverlo un poco más.

62
00:04:08,500 --> 00:04:13,960
‫Si mantengo shift presionado, puedo bloquearlo en el eje con el que me muevo para que esté más o menos

63
00:04:13,970 --> 00:04:14,440
‫centrado.

64
00:04:14,560 --> 00:04:15,580
‫Está bien, así que estoy feliz con eso.

65
00:04:15,580 --> 00:04:18,640
‫Ahora tenemos que seguir adelante y tratar de generar la cosa.

66
00:04:19,060 --> 00:04:19,810
‫¿Cómo vamos a hacer eso?

67
00:04:19,810 --> 00:04:25,180
‫Bueno, antes que nada, vamos a necesitar saber qué clase de widget se supone que vamos a generar, y necesitamos saber

68
00:04:25,180 --> 00:04:27,460
‫dónde vamos a hacerlo a partir de ahora.

69
00:04:27,490 --> 00:04:31,570
‫Como ya he dicho, creo que un buen lugar para hacer esto es desde el propio controlador del reproductor.

70
00:04:32,290 --> 00:04:37,600
‫Y vamos a necesitar saber en el controlador del reproductor qué clase, qué clase de widget estamos tratando de

71
00:04:37,600 --> 00:04:37,970
‫generar.

72
00:04:37,970 --> 00:04:42,460
‫Ahora, sé que es una clase modelo, pero aún necesitamos que sea una clase que estamos tratando de generar.

73
00:04:43,090 --> 00:04:46,840
‫Entonces, la forma en que vamos a hacer esto es crear una nueva propiedad aquí.

74
00:04:46,960 --> 00:04:54,100
‫Habrá ediciones en cualquier lugar y vamos a querer que esto sea una subclase porque siempre es una buena

75
00:04:54,100 --> 00:04:57,220
‫manera de asegurarnos de obtener una nueva clase.

76
00:04:57,220 --> 00:05:04,210
‫Básicamente, podría usar el tipo de nueva clase si quisiera, pero eso no restringe qué tipo de clase

77
00:05:04,210 --> 00:05:05,290
‫podemos usar.

78
00:05:05,290 --> 00:05:09,580
‫Y aquí queremos restringirlo a que solo uses widgets.

79
00:05:09,790 --> 00:05:17,210
‫Si revisa su plano, puede ver si vamos a algún lugar aquí, puede encontrar si una clase principal usa un

80
00:05:17,240 --> 00:05:22,690
‫widget que sabemos que cuando coloca el prefijo se convierte en un widget.

81
00:05:23,170 --> 00:05:26,380
‫Así que esta es una subclase de.

82
00:05:27,550 --> 00:05:34,300
‫Y luego usaremos nuestros paréntesis angulares, usará un widget y en realidad voy a declararlo

83
00:05:34,300 --> 00:05:37,120
‫aquí en lugar de incluirlo.

84
00:05:37,120 --> 00:05:43,660
‫Entonces, clasifique que usa un widget y luego lo llamaremos la clase de pérdida de pantalla.

85
00:05:44,140 --> 00:05:46,390
‫Solo mantén muy claro lo que está pasando allí.

86
00:05:47,140 --> 00:05:54,370
‫Ahora, voy a seguir adelante y compilar en esta etapa mientras hacemos lo siguiente porque compilar cuando se cambia un archivo

87
00:05:54,370 --> 00:05:56,470
‫toma un poco más de tiempo.

88
00:05:56,740 --> 00:06:02,620
‫Ahora, en realidad, la compilación fallará en esta etapa porque no hemos incluido el módulo UMG.

89
00:06:02,890 --> 00:06:03,760
‫No sabemos cómo hacer eso.

90
00:06:03,770 --> 00:06:08,950
‫No se preocupe por la compilación en esta etapa y aproximadamente a los 9 minutos del video, corregiremos

91
00:06:08,950 --> 00:06:09,550
‫este error.

92
00:06:10,150 --> 00:06:14,230
‫Ahora en C++, lo que vamos a querer hacer es generar ese widget.

93
00:06:14,680 --> 00:06:17,260
‫Así que no queremos hacerlo tal vez incluso antes de tiempo.

94
00:06:17,260 --> 00:06:20,250
‫Realmente no importa porque el temporizador no espera.

95
00:06:20,260 --> 00:06:24,760
‫Simplemente establece la hora y luego pasa directamente a la siguiente línea de código, por lo que no estaremos esperando 5 segundos si

96
00:06:24,760 --> 00:06:29,050
‫hicimos esto en Stripe, si generamos la interfaz de usuario inmediatamente después, realmente no importa en qué orden lo hagamos. haz

97
00:06:29,050 --> 00:06:29,650
‫esto en

98
00:06:30,310 --> 00:06:36,240
‫Entonces, lo que vamos a querer hacer es usar una función llamada crear widget, que no está disponible actualmente.

99
00:06:36,670 --> 00:06:43,030
‫Por lo tanto, primero debemos incluir algo con hash y vamos a incluir una barra inclinada del modelo usando un

100
00:06:43,150 --> 00:06:43,720
‫widget.

101
00:06:44,500 --> 00:06:49,990
‫Y esa es una clase que necesitamos para acceder a esta función de creación de widgets.

102
00:06:50,830 --> 00:06:53,560
‫Y básicamente vamos a decir crear widget.

103
00:06:53,560 --> 00:06:58,220
‫Tiene que estar bien, en realidad, vamos a ver qué necesitamos para proporcionarlo.

104
00:06:58,240 --> 00:07:00,880
‫Voy a f 12 a su implementación.

105
00:07:00,880 --> 00:07:06,880
‫Puede ver que es un poco complicado de ver, pero tenemos un parámetro de plantilla aquí que es básicamente el que usa

106
00:07:06,880 --> 00:07:10,840
‫un widget de forma predeterminada, por lo que probablemente no tengamos que proporcionarlo.

107
00:07:11,680 --> 00:07:19,360
‫Y luego está el objeto propietario y la clase que necesitamos crear y luego un nombre de widget que no

108
00:07:19,360 --> 00:07:20,950
‫necesariamente necesitamos proporcionar.

109
00:07:20,950 --> 00:07:23,590
‫Y luego regresa como el puntero al widget.

110
00:07:24,160 --> 00:07:29,110
‫Entonces, lo que realmente voy a hacer es aquí, le daremos un objeto propietario.

111
00:07:29,170 --> 00:07:31,450
‫Ahora, solo ciertas cosas pueden poseer el widget.

112
00:07:31,540 --> 00:07:34,180
‫Una de esas cosas es en realidad el controlador del reproductor.

113
00:07:34,180 --> 00:07:36,130
‫Entonces podemos pasar esto.

114
00:07:36,280 --> 00:07:40,700
‫Y lo siguiente es que queremos pasar la subclase t de usted usa un widget.

115
00:07:40,720 --> 00:07:44,620
‫Bueno, afortunadamente ya lo hemos configurado en el encabezado del archivo.

116
00:07:45,370 --> 00:07:51,250
‫Así que podemos continuar y pasar eso y evitaré que mi sangría intente arreglarse mientras no haya puesto un punto y coma

117
00:07:51,250 --> 00:07:52,870
‫al final de la línea.

118
00:07:53,590 --> 00:07:55,390
‫Y luego vamos a ver qué más.

119
00:07:55,390 --> 00:07:55,990
‫Bueno, eso es todo.

120
00:07:55,990 --> 00:07:58,480
‫Simplemente devuelve el widget en este punto.

121
00:07:58,490 --> 00:08:06,880
‫Entonces, lo que podemos hacer es tener un puntero hacia usted, usar una tienda de widgets y esta será nuestra pantalla perdida.

122
00:08:06,880 --> 00:08:09,010
‫Así que tenemos que perder la clase de pantalla.

123
00:08:09,430 --> 00:08:12,820
‫Una vez que hemos creado el widget, se convierte en una pantalla suelta real.

124
00:08:13,000 --> 00:08:15,820
‫Lo siguiente que debemos hacer es hacer que esta interfaz de usuario sea visible.

125
00:08:16,150 --> 00:08:19,960
‫Hacemos eso agregándolo a la ventana gráfica en un lenguaje irreal.

126
00:08:19,960 --> 00:08:25,450
‫Pero primero, debido a que agregamos a la ventana gráfica llamando a una función en la pantalla azul, debemos asegurarnos de

127
00:08:25,480 --> 00:08:27,070
‫que no sea un puntero nulo.

128
00:08:27,070 --> 00:08:32,320
‫Entonces, si perder la pantalla no es igual al puntero nulo, ¿por qué podría no haber puntos?

129
00:08:32,320 --> 00:08:33,850
‫Por cierto, pequeño reto para ti.

130
00:08:34,150 --> 00:08:36,970
‫Vea si puede averiguar por qué podríamos terminar con un puntero nulo aquí.

131
00:08:37,690 --> 00:08:41,140
‫Bueno, una de las razones es que tal vez nos olvidamos de configurar la clase de pérdida de pantalla.

132
00:08:41,140 --> 00:08:46,150
‫Y si ese es el caso y no tenemos un conjunto de clase de pantalla azul válido, entonces crear widget

133
00:08:46,150 --> 00:08:47,830
‫solo nos devolverá un puntero nulo.

134
00:08:47,830 --> 00:08:54,310
‫Y no queremos que eso suceda y ciertamente no queremos llamar a una función en un puntero nulo.

135
00:08:54,340 --> 00:08:56,290
‫También puede hacerlo la flecha de la pantalla azul.

136
00:08:56,830 --> 00:09:00,970
‫Y luego lo que queremos aquí es una función llamada agregar a la ventana gráfica.

137
00:09:02,120 --> 00:09:03,930
‫Que simplemente va a hacer precisamente eso.

138
00:09:03,950 --> 00:09:07,550
‫Vaya y agréguelo a la pantalla para que podamos ver esa pantalla azul.

139
00:09:08,180 --> 00:09:14,780
‫Ahora, voy a seguir adelante y compilar eso también, iré a Unreal y abriré nuestro modelo

140
00:09:14,780 --> 00:09:17,240
‫para el controlador del jugador.

141
00:09:17,330 --> 00:09:22,360
‫Así que dispare un controlador de juego aquí y deberíamos poder ver algún lugar aquí.

142
00:09:22,670 --> 00:09:25,220
‫Y una variable aún no ha aparecido.

143
00:09:25,730 --> 00:09:27,080
‫Tal vez tenía algunas áreas de construcción.

144
00:09:27,080 --> 00:09:28,550
‫Vayamos y echemos un vistazo al registro de mensajes.

145
00:09:29,100 --> 00:09:36,110
‫Sí, podemos ver algunos errores de compilación aquí, a saber, estos extraños sobre la falta de símbolos externos.

146
00:09:36,110 --> 00:09:40,130
‫Si tenemos una pequeña mirada que dice cosas sobre usted, use un widget que no esté disponible.

147
00:09:40,490 --> 00:09:47,540
‫Ahora, si recuerda algunas conferencias anteriores, sabemos que este tipo de errores tienden a ocurrir cuando

148
00:09:47,540 --> 00:09:50,780
‫nos falta una dependencia de módulo.

149
00:09:50,810 --> 00:09:57,740
‫Entonces, si vamos y abrimos nuestros documentos de compilación de disparos simples y solo voy a cerrar la terminal para agregar un

150
00:09:57,740 --> 00:10:04,100
‫poco más de espacio, entonces pueden ver que lo que debemos hacer es agregar una nueva dependencia pública aquí.

151
00:10:04,700 --> 00:10:10,130
‫Entonces, al final de esto, agregaremos una dependencia pública para UMG.

152
00:10:10,310 --> 00:10:14,630
‫Así que una nueva coma y luego entre comillas vamos a poner UMG.

153
00:10:15,200 --> 00:10:23,330
‫Y eso básicamente nos permite hacer uso de las inclusiones que teníamos aquí, el widget de uso de barra inclinada de

154
00:10:23,450 --> 00:10:24,140
‫blueprint.

155
00:10:24,710 --> 00:10:26,670
‫Todo eso está en un módulo separado.

156
00:10:26,690 --> 00:10:28,630
‫Entonces, las cosas estándar que están incluidas.

157
00:10:28,670 --> 00:10:32,540
‫Así que tenemos que ir y decirle a develar que queremos usar ese módulo en C++.

158
00:10:32,630 --> 00:10:34,910
‫Avancemos y construyamos y veamos si funciona ahora.

159
00:10:35,000 --> 00:10:35,200
‫Bueno.

160
00:10:35,210 --> 00:10:36,380
‫Eso parece exitoso.

161
00:10:36,380 --> 00:10:41,510
‫Si vamos al editor y volvemos a disparar un controlador de reproducción.

162
00:10:41,540 --> 00:10:46,100
‫Alguna razón por la que no creo que haya recargado correctamente, así que tuve que presionar compilar aquí en el editor.

163
00:10:46,480 --> 00:10:48,350
‫Volvamos ahora al controlador de juego de disparos.

164
00:10:48,350 --> 00:10:50,390
‫Por fin puedes ver esa clase de pantalla suelta.

165
00:10:50,930 --> 00:10:57,740
‫Podemos hacer clic en el menú desplegable allí e ir y seleccionar AWP, subrayar, perder pantalla allí, compilar,

166
00:10:57,740 --> 00:10:59,900
‫guardar y vamos a matarnos.

167
00:11:00,110 --> 00:11:01,610
‫Recibir un disparo en un par de veces.

168
00:11:01,970 --> 00:11:03,170
‫Explosión, explosión.

169
00:11:03,500 --> 00:11:04,150
‫Y ahí tienes

170
00:11:04,200 --> 00:11:09,650
‫La pantalla de Alu ha aparecido diciéndonos lo que está pasando, ese nivel está a punto de reiniciarse en 5 segundos,

171
00:11:09,650 --> 00:11:10,970
‫y de hecho lo hace.

172
00:11:11,360 --> 00:11:20,000
‫Así que ahora sabe no solo cómo puede crear gráficos UMG, sino también cómo puede generarlos desde C++ en

173
00:11:20,000 --> 00:11:21,860
‫lugar de Blueprint.

174
00:11:22,100 --> 00:11:26,900
‫En la próxima lección, vamos a tener una perspectiva menos pesimista de las cosas e intentaremos

175
00:11:26,900 --> 00:11:30,380
‫ver si también podemos crear algunas condiciones ganadoras para este juego.

176
00:11:30,680 --> 00:11:31,310
‫Te veré luego.