1
00:00:04,300 --> 00:00:05,140
‫Ciao e Benvenuto.

2
00:00:05,140 --> 00:00:10,000
‫In questa lezione mostreremo uno schermo libero e lo farò

3
00:00:10,000 --> 00:00:13,630
‫interamente da C++ per generare quel widget.

4
00:00:13,900 --> 00:00:15,250
‫Entriamo e vediamo come è fatto.

5
00:00:15,880 --> 00:00:21,220
‫Ok, quindi vorremmo visualizzare un'interfaccia utente quando un giocatore muore per dirgli cosa sta succedendo che ha perso e

6
00:00:21,220 --> 00:00:23,230
‫che il livello sta per azzerarsi.

7
00:00:23,230 --> 00:00:25,240
‫Quindi non è una sorpresa per loro.

8
00:00:25,240 --> 00:00:31,780
‫Quindi non abbiamo bisogno di creare un'interfaccia utente, un widget dell'interfaccia utente, un UMG, un widget di grafica animata irreale.

9
00:00:32,440 --> 00:00:35,800
‫Quindi facciamolo prima di tutto, creando una cartella in cui archiviare l'interfaccia utente.

10
00:00:35,800 --> 00:00:41,440
‫E so già che avremo due elementi dell'interfaccia utente, quindi penso che avrò una cartella dell'interfaccia utente qui e poi

11
00:00:41,440 --> 00:00:47,140
‫andiamo qui e fai clic con il tasto destro e poi vai, avresti dovuto farlo prima, ma andiamo io' Ti guiderò

12
00:00:47,140 --> 00:00:48,000
‫attraverso di essa.

13
00:00:48,040 --> 00:00:52,540
‫Andremo alla sezione dell'interfaccia utente, quindi selezioneremo il progetto dei widget e il prefisso

14
00:00:52,540 --> 00:00:56,890
‫da utilizzare è WB P underscore e quindi sarà la schermata libera.

15
00:00:57,520 --> 00:01:02,710
‫Ora puoi fare alcune classi base per questo genere di cose in C++, ma non lo tratteremo in

16
00:01:02,710 --> 00:01:03,310
‫questa sezione.

17
00:01:03,550 --> 00:01:07,450
‫In genere non è necessario farlo ed è molto più facile fare le cose in Blueprint.

18
00:01:07,450 --> 00:01:13,060
‫Non c'è molto vantaggio nel farlo in C++ a meno che un'interfaccia utente non diventasse super complicata e tu volessi

19
00:01:13,060 --> 00:01:15,610
‫inserire parte di quella logica dell'interfaccia utente in C++.

20
00:01:15,940 --> 00:01:20,500
‫Nel nostro caso, non è così, quindi possiamo semplicemente andare avanti e utilizzare i progetti.

21
00:01:20,500 --> 00:01:22,450
‫Dopotutto, l'interfaccia utente è una cosa visiva.

22
00:01:22,450 --> 00:01:28,780
‫Ha senso utilizzare uno strumento visivo per metterlo insieme ora perché sai già come creare

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

24
00:01:29,470 --> 00:01:32,830
‫Quindi ti darò questo come una sfida per impostare uno schermo libero.

25
00:01:32,830 --> 00:01:36,970
‫Vogliamo aggiungere del testo che spiega che il giocatore ha perso e che stiamo per ripartire.

26
00:01:37,270 --> 00:01:41,980
‫Vuoi posizionare quel testo probabilmente al centro, renderlo visibile, assicurarti che sia visibile nel gioco.

27
00:01:41,980 --> 00:01:45,370
‫Eppure, come dicevo, spiega che ci sarà una ripartenza in arrivo.

28
00:01:45,850 --> 00:01:50,470
‫E poi, dopo aver tentato questa sfida, vedremo come generarlo da C++.

29
00:01:50,470 --> 00:01:55,660
‫Forse hai visto come farlo in Blueprint prima di vedere come possiamo farlo da C++.

30
00:01:55,660 --> 00:01:56,770
‫Quindi metti in pausa il video e fallo partire.

31
00:01:57,130 --> 00:01:58,180
‫Ok, bentornato.

32
00:01:58,750 --> 00:02:03,040
‫Quindi andrò a creare, prima di tutto, un po' di testo.

33
00:02:03,430 --> 00:02:09,160
‫Quindi voglio cercare nella tavolozza a sinistra, cercherò l'elemento di testo e lo porterò dentro.

34
00:02:10,060 --> 00:02:13,420
‫Lo cambierò per farti perdere.

35
00:02:13,750 --> 00:02:16,630
‫Dialoghi piuttosto semplici e privi di fantasia che scrivono qui.

36
00:02:17,170 --> 00:02:22,210
‫Cambierò il colore, l'opacità e l'aspetto in rosso per rendere super chiaro che hanno perso e

37
00:02:22,210 --> 00:02:27,580
‫lo strofinerò un po' di più e espanderò quel carattere e modificherò la dimensione per renderla più grande

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

39
00:02:28,120 --> 00:02:35,310
‫E poi ho intenzione di espandere la casella attorno al nostro testo e ho intenzione di centrare il nostro testo.

40
00:02:35,320 --> 00:02:38,050
‫Quindi, scendendo la giustificazione, centralizzerò il testo.

41
00:02:38,050 --> 00:02:44,340
‫E se mi espando, vediamo se c'è un altro posto dove posso fare centro allineato all'interno che non

42
00:02:44,410 --> 00:02:44,860
‫c'è.

43
00:02:44,860 --> 00:02:53,440
‫Quindi andrò a rendere le scatole più o meno appropriate e poi andrò ai miei allineamenti e alle mie ancore e

44
00:02:53,440 --> 00:02:54,910
‫cose del genere.

45
00:02:55,540 --> 00:03:01,870
‫E selezionerò il menu a discesa per gli ancoraggi e selezionerò il preset per l'ancoraggio al centro, perché è quello

46
00:03:02,080 --> 00:03:03,070
‫che voglio fare.

47
00:03:03,850 --> 00:03:12,400
‫Voglio impostare il mio allineamento su 0. 5 e 0. 5, che in pratica significa che ci stiamo allineando

48
00:03:12,400 --> 00:03:16,660
‫al centro dell'oggetto piuttosto che nell'angolo in alto a sinistra per fare di nuovo l'ancora.

49
00:03:16,660 --> 00:03:18,790
‫Ok, non è stato molto utile.

50
00:03:19,300 --> 00:03:24,460
‫E poi la posizione X perché penso che se metto posizione vicino a zero e zero perché ho impostato

51
00:03:24,460 --> 00:03:29,200
‫le mie ancore in quel modo, la mia posizione persa sarà da qualche parte nel mezzo e

52
00:03:29,200 --> 00:03:31,180
‫la sposterò semplicemente su sempre leggermente.

53
00:03:31,240 --> 00:03:37,960
‫Mantieni la mia posizione X a zero, posizione Y a -50, perché voglio aggiungere del testo secondario dicendo in effetti, potrebbe essere

54
00:03:37,980 --> 00:03:42,430
‫più semplice duplicare l'altro testo qui perché ha tutte le impostazioni di cui ho

55
00:03:42,880 --> 00:03:43,870
‫già bisogno.

56
00:03:43,870 --> 00:03:46,030
‫Voglio solo renderlo un po' più piccolo.

57
00:03:46,030 --> 00:03:54,100
‫Posiziona di nuovo lo zero e dirò che il livello si riavvierà tra 5 secondi e ridurrò la dimensione del carattere molto

58
00:03:54,100 --> 00:03:55,210
‫più piccola.

59
00:03:55,210 --> 00:04:00,370
‫Quindi è meno in faccia, qualcosa del genere, e poi spostalo un po' verso il basso,

60
00:04:00,370 --> 00:04:05,920
‫una piccola tacca e continua a reimpostare quella posizione X su zero e soddisfatto al 100% del posizionamento.

61
00:04:05,920 --> 00:04:08,500
‫Ho solo intenzione di spostarlo un po' più in alto.

62
00:04:08,500 --> 00:04:13,960
‫Se tengo premuto shift, posso bloccarlo sull'asse con cui mi sto muovendo in modo che sia più o meno centrale in questo

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

64
00:04:14,560 --> 00:04:15,580
‫Ok, quindi ne sono felice.

65
00:04:15,580 --> 00:04:18,640
‫Ora dobbiamo andare avanti e provare a generare la cosa.

66
00:04:19,060 --> 00:04:19,810
‫Come lo faremo?

67
00:04:19,810 --> 00:04:25,180
‫Bene, prima di tutto, avremo bisogno di sapere quale classe di widget dovremmo generare e dobbiamo

68
00:04:25,180 --> 00:04:27,460
‫sapere dove lo faremo da ora.

69
00:04:27,490 --> 00:04:31,570
‫Come ho già detto, penso che un buon posto per farlo sia dal controller del giocatore stesso.

70
00:04:32,290 --> 00:04:37,600
‫E avremo bisogno di sapere nel controller del giocatore quale classe, quale classe di widget stiamo cercando di

71
00:04:37,600 --> 00:04:37,970
‫generare?

72
00:04:37,970 --> 00:04:42,460
‫Ora, so che è una classe blueprint, ma abbiamo bisogno che sia ancora una classe che stiamo cercando di generare.

73
00:04:43,090 --> 00:04:46,840
‫Quindi il modo in cui lo faremo è creare una nuova proprietà quassù.

74
00:04:46,960 --> 00:04:54,100
‫Ci saranno modifiche ovunque e vorremo che questa sia una sottoclasse perché questo è sempre un buon modo

75
00:04:54,100 --> 00:04:57,220
‫per assicurarci di ottenere una nuova classe.

76
00:04:57,220 --> 00:05:04,210
‫Fondamentalmente, puoi usare il tipo nuova classe se lo desideri, ma ciò non limita il tipo di classe che

77
00:05:04,210 --> 00:05:05,290
‫possiamo usare.

78
00:05:05,290 --> 00:05:09,580
‫E qui vogliamo limitarlo al solo utilizzo di widget.

79
00:05:09,790 --> 00:05:17,210
‫Se vai al tuo progetto, puoi vedere se andiamo da qualche parte qui, puoi scoprire se una classe genitore usa un widget

80
00:05:17,240 --> 00:05:22,690
‫che sappiamo quando metti il prefisso su di esso diventa un tu usi un widget.

81
00:05:23,170 --> 00:05:26,380
‫Quindi questa è una sottoclasse di.

82
00:05:27,550 --> 00:05:34,300
‫E poi usiamo le nostre parentesi angolari sarà un widget e in realtà lo

83
00:05:34,300 --> 00:05:37,120
‫dichiarerò qui piuttosto che includere.

84
00:05:37,120 --> 00:05:43,660
‫E quindi classe usi un widget e poi la chiameremo la classe dello schermo perso.

85
00:05:44,140 --> 00:05:46,390
‫Tieni solo che sia davvero ovvio cosa sta succedendo lì.

86
00:05:47,140 --> 00:05:54,370
‫Ora, andrò avanti e compilerò in questa fase mentre facciamo le cose successive perché la compilazione quando si modifica un file richiede

87
00:05:54,370 --> 00:05:56,470
‫solo un po' più di tempo.

88
00:05:56,740 --> 00:06:02,620
‫Ora in realtà la compilazione fallirà in questa fase perché non abbiamo incluso il modulo UMG.

89
00:06:02,890 --> 00:06:03,760
‫Non sappiamo come farlo.

90
00:06:03,770 --> 00:06:08,950
‫Non preoccuparti della compilation in questa fase e a circa 9 minuti dall'inizio del video, correggeremo questo

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

92
00:06:10,150 --> 00:06:14,230
‫Ora nel C++, quello che vorremo fare è in realtà generare quel widget.

93
00:06:14,680 --> 00:06:17,260
‫Quindi non vogliamo farlo forse anche prima del tempo.

94
00:06:17,260 --> 00:06:20,250
‫Non importa perché il timer non aspetta.

95
00:06:20,260 --> 00:06:24,760
‫Imposta semplicemente l'ora e poi passa direttamente alla riga di codice successiva, quindi non aspetteremo 5 secondi se

96
00:06:24,760 --> 00:06:29,050
‫lo facciamo su Stripe, se abbiamo generato l'interfaccia utente subito dopo, non importa in quale ordine

97
00:06:29,050 --> 00:06:29,650
‫fallo dentro.

98
00:06:30,310 --> 00:06:36,240
‫Quindi quello che vorremo fare è usare una funzione chiamata crea widget, che non è attualmente disponibile.

99
00:06:36,670 --> 00:06:43,030
‫Quindi abbiamo bisogno di includere prima qualcosa con l'hash e includeremo la barra in avanti del progetto usa un

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

101
00:06:44,500 --> 00:06:49,990
‫E questa è una classe di cui abbiamo bisogno per accedere a questa funzione di creazione widget.

102
00:06:50,830 --> 00:06:53,560
‫E in pratica diremo crea widget.

103
00:06:53,560 --> 00:06:58,220
‫Deve andare bene, anzi, vediamo cosa ci serve per fornirlo.

104
00:06:58,240 --> 00:07:00,880
‫Vado a f 12 per la sua attuazione.

105
00:07:00,880 --> 00:07:06,880
‫Puoi vedere che è un po 'complicato da vedere, ma qui abbiamo un parametro del modello che è fondamentalmente

106
00:07:06,880 --> 00:07:10,840
‫l'impostazione predefinita che usi un widget, quindi probabilmente non dobbiamo fornirlo.

107
00:07:11,680 --> 00:07:19,360
‫E poi c'è l'oggetto proprietario e la classe che dobbiamo creare e poi un nome widget che non

108
00:07:19,360 --> 00:07:20,950
‫dobbiamo necessariamente fornire.

109
00:07:20,950 --> 00:07:23,590
‫E poi ritorna come puntatore al widget.

110
00:07:24,160 --> 00:07:29,110
‫Quindi quello che ho intenzione di fare è qui dentro, gli daremo un oggetto proprietario.

111
00:07:29,170 --> 00:07:31,450
‫Ora, solo alcune cose possono possedere il widget.

112
00:07:31,540 --> 00:07:34,180
‫Una di queste cose è in realtà il controller del giocatore.

113
00:07:34,180 --> 00:07:36,130
‫Quindi possiamo semplicemente passare in questo.

114
00:07:36,280 --> 00:07:40,700
‫E la prossima cosa è che vogliamo passare nella sottoclasse t di utilizzare un widget.

115
00:07:40,720 --> 00:07:44,620
‫Per fortuna l'abbiamo già configurato nell'intestazione del file.

116
00:07:45,370 --> 00:07:51,250
‫Quindi possiamo semplicemente andare avanti e passarlo e impedirò alla mia rientranza di cercare di aggiustarsi mentre non ho messo un punto

117
00:07:51,250 --> 00:07:52,870
‫e virgola alla fine della riga.

118
00:07:53,590 --> 00:07:55,390
‫E poi andiamo a dare un'occhiata a cos'altro.

119
00:07:55,390 --> 00:07:55,990
‫Bene, questo è tutto.

120
00:07:55,990 --> 00:07:58,480
‫Restituisce solo il widget a questo punto.

121
00:07:58,490 --> 00:08:06,880
‫Quindi quello che possiamo fare è avere un puntatore a te, usare un negozio di widget e questa sarà la nostra schermata di perdita.

122
00:08:06,880 --> 00:08:09,010
‫Quindi dobbiamo perdere la classe sullo schermo.

123
00:08:09,430 --> 00:08:12,820
‫Dopo aver creato il widget, diventa un vero e proprio schermo mobile.

124
00:08:13,000 --> 00:08:15,820
‫La prossima cosa che dobbiamo fare è rendere visibile questa interfaccia utente.

125
00:08:16,150 --> 00:08:19,960
‫Lo facciamo aggiungendolo al viewport in un linguaggio irreale.

126
00:08:19,960 --> 00:08:25,450
‫Ma prima, poiché aggiungiamo al viewport chiamando una funzione sullo schermo blu, dobbiamo assicurarci che non

127
00:08:25,480 --> 00:08:27,070
‫sia un puntatore nullo.

128
00:08:27,070 --> 00:08:32,320
‫Quindi, se la perdita dello schermo non è uguale al puntatore nullo, perché potrebbe essere senza punti?

129
00:08:32,320 --> 00:08:33,850
‫A proposito, piccola sfida per te.

130
00:08:34,150 --> 00:08:36,970
‫Vedi se riesci a capire perché potremmo finire con un puntatore nullo qui.

131
00:08:37,690 --> 00:08:41,140
‫Bene, uno dei motivi è che forse ci siamo dimenticati di impostare la classe di perdita dello schermo.

132
00:08:41,140 --> 00:08:46,150
‫E se questo è il caso e non abbiamo un set di classi di schermo blu valido, la creazione del widget

133
00:08:46,150 --> 00:08:47,830
‫restituirà semplicemente un puntatore nullo per noi.

134
00:08:47,830 --> 00:08:54,310
‫E non vogliamo che ciò accada e non vogliamo certamente chiamare una funzione su un puntatore nullo.

135
00:08:54,340 --> 00:08:56,290
‫Così può la freccia dello schermo blu.

136
00:08:56,830 --> 00:09:00,970
‫E poi quello che vogliamo qui è una funzione chiamata add to viewport.

137
00:09:02,120 --> 00:09:03,930
‫Che semplicemente farà proprio questo.

138
00:09:03,950 --> 00:09:07,550
‫Vai e aggiungilo allo schermo in modo che possiamo vedere quella schermata blu.

139
00:09:08,180 --> 00:09:14,780
‫Ora andrò avanti e compilerò anche quello, andrò su Unreal e aprirò il nostro progetto

140
00:09:14,780 --> 00:09:17,240
‫per il controller del giocatore.

141
00:09:17,330 --> 00:09:22,360
‫Quindi spara a un controller di gioco qui e dovremmo essere in grado di vedere da qualche parte qui.

142
00:09:22,670 --> 00:09:25,220
‫E una variabile non è ancora spuntata.

143
00:09:25,730 --> 00:09:27,080
‫Forse avevo alcune aree di costruzione.

144
00:09:27,080 --> 00:09:28,550
‫Andiamo a dare un'occhiata al registro dei messaggi.

145
00:09:29,100 --> 00:09:36,110
‫Sì, possiamo vedere alcuni errori di costruzione qui, vale a dire questi strani sui simboli esterni mancanti.

146
00:09:36,110 --> 00:09:40,130
‫Se abbiamo una piccola occhiata che dice cose su di te, usa un widget che non è disponibile.

147
00:09:40,490 --> 00:09:47,540
‫Ora, se riporti la mente ad alcune lezioni precedenti, sappiamo che questo tipo di errori tende a

148
00:09:47,540 --> 00:09:50,780
‫verificarsi quando manca una dipendenza del modulo.

149
00:09:50,810 --> 00:09:57,740
‫Quindi, se andiamo ad aprire i nostri semplici documenti di costruzione sparatutto e ho intenzione di chiudere il terminale per un

150
00:09:57,740 --> 00:10:04,100
‫po' più di spazio aggiuntivo, allora puoi vedere quello che dobbiamo fare è aggiungere una nuova dipendenza pubblica qui.

151
00:10:04,700 --> 00:10:10,130
‫Quindi, alla fine, aggiungeremo una dipendenza pubblica per UMG.

152
00:10:10,310 --> 00:10:14,630
‫Quindi una nuova virgola e poi tra virgolette metteranno UMG.

153
00:10:15,200 --> 00:10:23,330
‫E questo fondamentalmente ci consente di utilizzare le inclusioni che avevamo qui, il widget di utilizzo della barra in avanti del

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

155
00:10:24,710 --> 00:10:26,670
‫Tutta quella roba è in un modulo separato.

156
00:10:26,690 --> 00:10:28,630
‫Quindi le cose standard che sono incluse.

157
00:10:28,670 --> 00:10:32,540
‫Quindi dobbiamo andare a dire a Unveil che vogliamo usare quel modulo in C++.

158
00:10:32,630 --> 00:10:34,910
‫Andiamo avanti e costruiamo e vediamo se funziona ora.

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

160
00:10:35,210 --> 00:10:36,380
‫Sembra riuscito.

161
00:10:36,380 --> 00:10:41,510
‫Se entriamo nell'editor e torniamo a sparare a un controller di gioco.

162
00:10:41,540 --> 00:10:46,100
‫Per qualche motivo non penso di aver ricaricato correttamente, quindi ho dovuto premere compila qui nell'editor.

163
00:10:46,480 --> 00:10:48,350
‫Torniamo ora al controller di gioco sparatutto.

164
00:10:48,350 --> 00:10:50,390
‫Finalmente puoi vedere quella classe a schermo libero.

165
00:10:50,930 --> 00:10:57,740
‫Possiamo fare clic sul menu a discesa lì e andare a selezionare AWP, sottolineare, perdere schermo lì, compilare, salvare

166
00:10:57,740 --> 00:10:59,900
‫e andiamo a farci uccidere.

167
00:11:00,110 --> 00:11:01,610
‫Fatti sparare un paio di volte.

168
00:11:01,970 --> 00:11:03,170
‫Botto, botto.

169
00:11:03,500 --> 00:11:04,150
‫Ed ecco qua.

170
00:11:04,200 --> 00:11:09,650
‫Lo schermo Alu è apparso dicendoci cosa sta succedendo quel livello sta per riavviarsi tra 5 secondi, e

171
00:11:09,650 --> 00:11:10,970
‫in effetti lo fa.

172
00:11:11,360 --> 00:11:20,000
‫Quindi ora sai non solo come creare grafica UMG, ma anche come generarli da C++

173
00:11:20,000 --> 00:11:21,860
‫anziché da Blueprint.

174
00:11:22,100 --> 00:11:26,900
‫Nella prossima lezione, avremo una visione meno pessimista delle cose e proveremo a vedere se riusciamo

175
00:11:26,900 --> 00:11:30,380
‫anche a creare delle condizioni di vittoria per questo gioco.

176
00:11:30,680 --> 00:11:31,310
‫Ci vediamo allora.