1 00:00:04,300 --> 00:00:05,140 ‫Hallo en welkom. 2 00:00:05,140 --> 00:00:10,000 ‫Deze lezing gaan we een los scherm weergeven en ik ga het volledig 3 00:00:10,000 --> 00:00:13,630 ‫vanuit C++ doen om die widget te spawnen. 4 00:00:13,900 --> 00:00:15,250 ‫Laten we erin duiken en kijken hoe het gedaan is. 5 00:00:15,880 --> 00:00:21,220 ‫Oké, dus we willen graag een gebruikersinterface weergeven wanneer een speler sterft om hen te vertellen wat er aan de hand is dat ze hebben verloren en 6 00:00:21,220 --> 00:00:23,230 ‫dat het niveau op het punt staat te worden gereset. 7 00:00:23,230 --> 00:00:25,240 ‫Voor hen komt het dus niet als een verrassing. 8 00:00:25,240 --> 00:00:31,780 ‫We hoeven dus geen UI, UI-widgets, UMG, onwerkelijke bewegende grafische widgets te maken. 9 00:00:32,440 --> 00:00:35,800 ‫Dus laten we dat allereerst doen door een map te maken om de gebruikersinterface op te slaan. 10 00:00:35,800 --> 00:00:41,440 ‫En ik weet al dat we twee UI-items zullen hebben, dus ik denk dat ik hier een UI-map zal hebben en laten 11 00:00:41,440 --> 00:00:47,140 ‫we dan hier naar binnen gaan en rechtsklikken en dan gaan, je had dit eerder moeten doen, maar laten we ik' zal je 12 00:00:47,140 --> 00:00:48,000 ‫er doorheen leiden. 13 00:00:48,040 --> 00:00:52,540 ‫We gaan naar het gedeelte met de gebruikersinterface, selecteren vervolgens de widgets-blauwdruk en het voorvoegsel 14 00:00:52,540 --> 00:00:56,890 ‫om te gaan gebruiken is WB P-underscore en dan wordt het het losse scherm. 15 00:00:57,520 --> 00:01:02,710 ‫Nu kun je een aantal basisklassen voor dit soort dingen doen in C++, maar dat gaan we in deze sectie 16 00:01:02,710 --> 00:01:03,310 ‫niet behandelen. 17 00:01:03,550 --> 00:01:07,450 ‫Het is over het algemeen niet nodig om dat te doen, en het is veel gemakkelijker om de dingen in Blueprint te doen. 18 00:01:07,450 --> 00:01:13,060 ‫Het heeft niet veel voordelen om het in C++ te doen, tenzij je UI super ingewikkeld zou worden en je 19 00:01:13,060 --> 00:01:15,610 ‫een deel van die UI-logica in C++ wilde stoppen. 20 00:01:15,940 --> 00:01:20,500 ‫In ons geval is dit niet het geval, dus we kunnen gewoon doorgaan en de blauwdrukken gebruiken. 21 00:01:20,500 --> 00:01:22,450 ‫De gebruikersinterface is tenslotte een visueel iets. 22 00:01:22,450 --> 00:01:28,780 ‫Het is logisch om een visueel hulpmiddel te gebruiken om het nu samen te stellen, omdat u al weet hoe u 23 00:01:28,780 --> 00:01:29,470 ‫widgets maakt. 24 00:01:29,470 --> 00:01:32,830 ‫Dan ga ik je dit als uitdaging meegeven om een los scherm op te zetten. 25 00:01:32,830 --> 00:01:36,970 ‫We willen wat tekst toevoegen waarin wordt uitgelegd dat de speler heeft verloren en dat we op het punt staan opnieuw te beginnen. 26 00:01:37,270 --> 00:01:41,980 ‫Wil je die tekst waarschijnlijk centraal plaatsen, zichtbaar maken, zorg dat hij zichtbaar is in het spel. 27 00:01:41,980 --> 00:01:45,370 ‫En toch, zoals ik al zei, leg uit dat er een herstart op komst is. 28 00:01:45,850 --> 00:01:50,470 ‫En nadat je deze uitdaging hebt geprobeerd, gaan we kijken hoe we dit vanuit C++ kunnen voortbrengen. 29 00:01:50,470 --> 00:01:55,660 ‫Je hebt misschien gezien hoe je dit in Blueprint kunt doen voordat we gaan kijken hoe we dit vanuit C++ kunnen doen. 30 00:01:55,660 --> 00:01:56,770 ‫Dus pauzeer de video en laat hem gaan. 31 00:01:57,130 --> 00:01:58,180 ‫Oké, welkom terug. 32 00:01:58,750 --> 00:02:03,040 ‫Dus ik ga eerst een stukje tekst maken. 33 00:02:03,430 --> 00:02:09,160 ‫Dus ik wil in het palet links zoeken, ik ga op zoek naar het tekstitem en breng dat binnen. 34 00:02:10,060 --> 00:02:13,420 ‫Ik ga het veranderen om je te verliezen. 35 00:02:13,750 --> 00:02:16,630 ‫Vrij eenvoudige en fantasieloze dialogen die hier worden geschreven. 36 00:02:17,170 --> 00:02:22,210 ‫Ik ga de kleur en dekking en het uiterlijk veranderen in rood om het super duidelijk te maken dat ze verloren zijn 37 00:02:22,210 --> 00:02:27,580 ‫gegaan en wrijf het er gewoon een beetje meer in en ik ga dat lettertype uitbreiden en de grootte veranderen om groter te zijn 38 00:02:27,580 --> 00:02:27,910 ‫. 39 00:02:28,120 --> 00:02:35,310 ‫En dan ga ik het kader rond onze tekst uitbreiden en onze tekst centreren. 40 00:02:35,320 --> 00:02:38,050 ‫Dus wat betreft de rechtvaardiging, ik ga de tekst centraliseren. 41 00:02:38,050 --> 00:02:44,340 ‫En als ik uitbreid, laten we eens kijken of er ergens anders is waar ik het centrum kan doen uitgelijnd binnen dat er niet 42 00:02:44,410 --> 00:02:44,860 ‫is. 43 00:02:44,860 --> 00:02:53,440 ‫Dus ik ga gewoon de dozen ongeveer passend maken en dan ga ik naar mijn uitlijningen en mijn ankers en 44 00:02:53,440 --> 00:02:54,910 ‫dat soort dingen. 45 00:02:55,540 --> 00:03:01,870 ‫En ik ga de vervolgkeuzelijst voor ankers selecteren en de voorinstelling voor verankering in het midden selecteren, want dat is wat 46 00:03:02,080 --> 00:03:03,070 ‫ik wil doen. 47 00:03:03,850 --> 00:03:12,400 ‫Ik wil mijn uitlijning op 0 zetten. 5 en 0. 5, wat in feite betekent dat we uitlijnen op het 48 00:03:12,400 --> 00:03:16,660 ‫midden van het object in plaats van dat de linkerbovenhoek het anker opnieuw gaat doen. 49 00:03:16,660 --> 00:03:18,790 ‫Oké, dat niet, dat was niet erg behulpzaam. 50 00:03:19,300 --> 00:03:24,460 ‫En dan de positie X, waarom denk ik dat als ik de positie naast nul en nul zet omdat ik 51 00:03:24,460 --> 00:03:29,200 ‫mijn ankers zo heb opgesteld, mijn verliespositie ergens in het midden zal zijn en ik hem gewoon 52 00:03:29,200 --> 00:03:31,180 ‫ga verplaatsen een heel klein beetje omhoog. 53 00:03:31,240 --> 00:03:37,960 ‫Houd mijn positie X op nul, positie Y op -50, want ik wil wat secundaire tekst toevoegen die in feite zegt dat het misschien 54 00:03:37,980 --> 00:03:42,430 ‫gemakkelijker is om de andere tekst hier te dupliceren omdat het alle instellingen heeft die ik 55 00:03:42,880 --> 00:03:43,870 ‫al nodig heb. 56 00:03:43,870 --> 00:03:46,030 ‫Ik wil het alleen wat kleiner maken. 57 00:03:46,030 --> 00:03:54,100 ‫Positie nul opnieuw en ik ga zeggen dat het niveau over 5 seconden opnieuw zal starten en ik ga die lettergrootte veel 58 00:03:54,100 --> 00:03:55,210 ‫kleiner maken. 59 00:03:55,210 --> 00:04:00,370 ‫Dus het is minder in je gezicht, zoiets als dit, en beweeg het dan gewoon een klein 60 00:04:00,370 --> 00:04:05,920 ‫beetje naar beneden, een kleine inkeping en blijf die positie X resetten naar nul en 100% tevreden met de positionering. 61 00:04:05,920 --> 00:04:08,500 ‫Ik ga het alleen nog een tandje hoger zetten. 62 00:04:08,500 --> 00:04:13,960 ‫Als ik shift ingedrukt houd, kan ik het vergrendelen op de as waarmee ik beweeg, zodat het min of meer centraal 63 00:04:13,970 --> 00:04:14,440 ‫staat. 64 00:04:14,560 --> 00:04:15,580 ‫Oké, daar ben ik dus blij mee. 65 00:04:15,580 --> 00:04:18,640 ‫Nu moeten we doorgaan en proberen het ding te spawnen. 66 00:04:19,060 --> 00:04:19,810 ‫Hoe gaan we dat doen? 67 00:04:19,810 --> 00:04:25,180 ‫Allereerst moeten we weten welke widgetklasse we zouden moeten uitzetten, en we moeten weten waar 68 00:04:25,180 --> 00:04:27,460 ‫we het vanaf nu gaan doen. 69 00:04:27,490 --> 00:04:31,570 ‫Zoals ik al zei, denk ik dat een goede plek om dit te doen de spelercontroller zelf is. 70 00:04:32,290 --> 00:04:37,970 ‫En we moeten in de spelercontroller weten welke klasse, welke widgetklasse we proberen te spawnen? 71 00:04:37,970 --> 00:04:42,460 ‫Nu, ik weet dat het een blauwdrukklasse is, maar we hebben het nog steeds nodig om een klasse te zijn die we proberen te spawnen. 72 00:04:43,090 --> 00:04:46,840 ‫Dus de manier waarop we dit gaan doen is om hier een nieuw pand te creëren. 73 00:04:46,960 --> 00:04:54,100 ‫Er zullen overal bewerkingen zijn en we willen dat dit een subklasse is, omdat dit altijd een goede manier is om 74 00:04:54,100 --> 00:04:57,220 ‫ervoor te zorgen dat we een nieuwe klasse krijgen. 75 00:04:57,220 --> 00:05:04,210 ‫In principe zou je het type nieuwe klasse kunnen gebruiken als je dat zou willen, maar dat beperkt niet wat voor soort klasse 76 00:05:04,210 --> 00:05:05,290 ‫we kunnen gebruiken. 77 00:05:05,290 --> 00:05:09,580 ‫En hier willen we het beperken tot alleen het feit dat u widgets gebruikt. 78 00:05:09,790 --> 00:05:17,210 ‫Als je naar je blauwdruk gaat, kun je zien of we hier ergens naar toe gaan, je kunt zien of ze een bovenliggende klasse is 79 00:05:17,240 --> 00:05:22,690 ‫die een widget gebruikt waarvan we weten dat wanneer je het voorvoegsel erop zet, je een widget gebruikt. 80 00:05:23,170 --> 00:05:26,380 ‫Dit is dus een subklasse van. 81 00:05:27,550 --> 00:05:34,300 ‫En dan gebruiken we onze punthaken, je gebruikt een widget en ik ga die hier echt verklaren in 82 00:05:34,300 --> 00:05:37,120 ‫plaats van er een in te voegen. 83 00:05:37,120 --> 00:05:43,660 ‫En dus klasse gebruik je een widget en dan gaan we dit de loss screen-klasse noemen. 84 00:05:44,140 --> 00:05:46,390 ‫Houd het gewoon heel duidelijk wat daar aan de hand is. 85 00:05:47,140 --> 00:05:54,370 ‫Nu ga ik in dit stadium verder met compileren terwijl we de volgende dingen doen, omdat het compileren bij het wijzigen van 86 00:05:54,370 --> 00:05:56,470 ‫een bestand net iets langer duurt. 87 00:05:56,740 --> 00:06:02,620 ‫Nu zal het compileren in dit stadium mislukken omdat we de UMG-module niet hebben opgenomen. 88 00:06:02,890 --> 00:06:03,760 ‫We weten niet hoe we dat moeten doen. 89 00:06:03,770 --> 00:06:08,950 ‫Maak je in dit stadium geen zorgen over de compilatie en na ongeveer 9 minuten in de video zullen we deze 90 00:06:08,950 --> 00:06:09,550 ‫fout oplossen. 91 00:06:10,150 --> 00:06:14,230 ‫Nu in de C ++, wat we willen doen, is die widget daadwerkelijk voortbrengen. 92 00:06:14,680 --> 00:06:17,260 ‫Dus we willen het misschien zelfs niet voor die tijd doen. 93 00:06:17,260 --> 00:06:20,250 ‫Het maakt niet echt uit, want de timer wacht niet. 94 00:06:20,260 --> 00:06:24,760 ‫Het stelt gewoon de tijd in en gaat dan meteen door naar de volgende regel code, dus we hoeven geen 5 seconden te wachten 95 00:06:24,760 --> 00:06:29,050 ‫als we dit bij Stripe deden, als we de gebruikersinterface direct daarna hebben voortgebracht, maakte niet echt uit in welke volgorde we 96 00:06:29,050 --> 00:06:29,650 ‫doe dit erin. 97 00:06:30,310 --> 00:06:36,240 ‫Dus wat we willen doen, is een functie gebruiken met de naam widget maken, die momenteel niet beschikbaar is. 98 00:06:36,670 --> 00:06:43,030 ‫Dus we moeten eerst iets hashen en we gaan een blueprint forward slash gebruiken om een widget te 99 00:06:43,150 --> 00:06:43,720 ‫gebruiken. 100 00:06:44,500 --> 00:06:49,990 ‫En dat is een klasse die we nodig hebben om toegang te krijgen tot deze functie voor het maken van widgets. 101 00:06:50,830 --> 00:06:53,560 ‫En we gaan eigenlijk zeggen widget maken. 102 00:06:53,560 --> 00:06:58,220 ‫Het moet goed zijn, laten we eens kijken wat we ervoor nodig hebben. 103 00:06:58,240 --> 00:07:00,880 ‫Ik ga f 12 naar de uitvoering ervan. 104 00:07:00,880 --> 00:07:06,880 ‫Je kunt zien dat het een beetje ingewikkeld is om te zien, maar we hebben hier wel een sjabloonparameter die in feite standaard 105 00:07:06,880 --> 00:07:10,840 ‫is dat je een widget gebruikt, dus die hoeven we waarschijnlijk niet te verstrekken. 106 00:07:11,680 --> 00:07:19,360 ‫En dan is er nog het eigendomsobject en de klasse die we moeten maken en dan een widgetnaam die we niet per 107 00:07:19,360 --> 00:07:20,950 ‫se hoeven te verstrekken. 108 00:07:20,950 --> 00:07:23,590 ‫En dan keert het terug als de aanwijzer naar de widget. 109 00:07:24,160 --> 00:07:29,110 ‫Dus wat ik eigenlijk ga doen is hier, we gaan het een eigenaarsobject geven. 110 00:07:29,170 --> 00:07:31,450 ‫Nu kunnen alleen bepaalde dingen de widget bezitten. 111 00:07:31,540 --> 00:07:34,180 ‫Een van die dingen is eigenlijk de spelercontroller. 112 00:07:34,180 --> 00:07:36,130 ‫Hier kunnen we dus gewoon in. 113 00:07:36,280 --> 00:07:40,700 ‫En het volgende is dat we willen doorgeven in de t-subklasse van je gebruik een widget. 114 00:07:40,720 --> 00:07:44,620 ‫Gelukkig hebben we dat al in het hoofd van het bestand geconfigureerd. 115 00:07:45,370 --> 00:07:51,250 ‫Dus we kunnen gewoon doorgaan en dat doorgeven en ik zal voorkomen dat mijn inspringing zichzelf probeert op te lossen terwijl ik geen puntkomma aan het 116 00:07:51,250 --> 00:07:52,870 ‫einde van de regel heb gezet. 117 00:07:53,590 --> 00:07:55,390 ‫En laten we dan gaan kijken naar wat nog meer. 118 00:07:55,390 --> 00:07:55,990 ‫Nou, dat is het dan. 119 00:07:55,990 --> 00:07:58,480 ‫Het retourneert gewoon de widget op dit punt. 120 00:07:58,490 --> 00:08:06,880 ‫Dus wat we kunnen doen is een verwijzing naar je hebben, een widgetwinkel gebruiken en dit wordt ons verliesscherm. 121 00:08:06,880 --> 00:08:09,010 ‫Dus we moeten schermklasse verliezen. 122 00:08:09,430 --> 00:08:12,820 ‫Nadat we de widget hebben gemaakt, wordt het een echt los scherm. 123 00:08:13,000 --> 00:08:15,820 ‫Het volgende dat we moeten doen, is deze gebruikersinterface zichtbaar maken. 124 00:08:16,150 --> 00:08:19,960 ‫Dat doen we door het in onwerkelijk spraakgebruik toe te voegen aan de viewport. 125 00:08:19,960 --> 00:08:25,450 ‫Maar eerst, omdat we aan de viewport toevoegen door een functie op het blauwe scherm aan te roepen, moeten we ervoor 126 00:08:25,480 --> 00:08:27,070 ‫zorgen dat het geen null-aanwijzer is. 127 00:08:27,070 --> 00:08:32,320 ‫Dus als schermverlies niet gelijk is aan nulaanwijzer, waarom zou het dan geen punten zijn? 128 00:08:32,320 --> 00:08:33,850 ‫Trouwens, kleine uitdaging voor jou. 129 00:08:34,150 --> 00:08:36,970 ‫Kijk of je erachter kunt komen waarom we hier een nulaanwijzer krijgen. 130 00:08:37,690 --> 00:08:41,140 ‫Een van de redenen is dat we misschien zijn vergeten de klasse voor schermverlies in te stellen. 131 00:08:41,140 --> 00:08:46,150 ‫En als dat het geval is en we hebben geen geldige klassenset voor blauw scherm, dan zal widget maken 132 00:08:46,150 --> 00:08:47,830 ‫gewoon een null-aanwijzer voor ons retourneren. 133 00:08:47,830 --> 00:08:54,310 ‫En we willen niet dat dat gebeurt en we willen zeker niet een functie aanroepen op een null-pointer. 134 00:08:54,340 --> 00:08:56,290 ‫Dat geldt ook voor de blauwe schermpijl. 135 00:08:56,830 --> 00:09:00,970 ‫En dan willen we hier een functie genaamd toevoegen aan viewport. 136 00:09:02,120 --> 00:09:03,930 ‫Die dat gewoon gaat doen. 137 00:09:03,950 --> 00:09:07,550 ‫Ga en voeg het toe aan het scherm zodat we dat blauwe scherm kunnen zien. 138 00:09:08,180 --> 00:09:14,780 ‫Nu ga ik door en compileer dat ook, en ga naar Unreal en open 139 00:09:14,780 --> 00:09:17,240 ‫onze blauwdruk voor de spelercontroller. 140 00:09:17,330 --> 00:09:22,360 ‫Dus schiet hier een afspeelcontroller en we zouden hier ergens moeten kunnen kijken. 141 00:09:22,670 --> 00:09:25,220 ‫En er is nog geen variabele opgedoken. 142 00:09:25,730 --> 00:09:27,080 ‫Misschien had ik wat bouwgebieden. 143 00:09:27,080 --> 00:09:28,550 ‫Laten we het berichtenlogboek bekijken. 144 00:09:29,100 --> 00:09:36,110 ‫Ja, we kunnen hier een paar bouwfouten zien, namelijk deze rare over het ontbreken van externe symbolen. 145 00:09:36,110 --> 00:09:40,130 ‫Als we een beetje kijken en dingen over jou zeggen, gebruik dan een widget die niet beschikbaar is. 146 00:09:40,490 --> 00:09:47,540 ‫Als je nu terugdenkt aan een paar lezingen eerder, weten we dat dit soort fouten meestal 147 00:09:47,540 --> 00:09:50,780 ‫optreden wanneer we een module-afhankelijkheid missen. 148 00:09:50,810 --> 00:09:57,740 ‫Dus als we onze eenvoudige shooter-builddocumenten gaan openen en ik ga gewoon de terminal sluiten voor wat meer extra ruimte, 149 00:09:57,740 --> 00:10:04,100 ‫dan kun je zien wat we moeten doen door hier een nieuwe openbare afhankelijkheid toe te voegen. 150 00:10:04,700 --> 00:10:10,130 ‫Dus aan het einde hiervan gaan we een openbare afhankelijkheid voor UMG toevoegen. 151 00:10:10,310 --> 00:10:14,630 ‫Dus een nieuwe komma en dan tussen aanhalingstekens gaan UMG zetten. 152 00:10:15,200 --> 00:10:23,330 ‫En dat stelt ons in feite in staat om gebruik te maken van de include die we hier hadden, de blueprint forward slash 153 00:10:23,450 --> 00:10:24,140 ‫use-widget. 154 00:10:24,710 --> 00:10:26,670 ‫Al dat spul zit in een aparte module. 155 00:10:26,690 --> 00:10:28,630 ‫Dus de standaard dingen die erbij zitten. 156 00:10:28,670 --> 00:10:32,540 ‫We moeten dus gaan onthullen dat we die module in C++ willen gebruiken. 157 00:10:32,630 --> 00:10:34,910 ‫Laten we doorgaan en bouwen en kijken of het nu werkt. 158 00:10:35,000 --> 00:10:35,200 ‫Oké. 159 00:10:35,210 --> 00:10:36,380 ‫Dat ziet er geslaagd uit. 160 00:10:36,380 --> 00:10:41,510 ‫Als we naar de editor gaan en teruggaan om een play-controller te schieten. 161 00:10:41,540 --> 00:10:46,100 ‫Om de een of andere reden denk ik dat ik niet goed herlaad, dus ik moest hier in de editor op compileren klikken. 162 00:10:46,480 --> 00:10:48,350 ‫We gaan nu terug naar de shooter-playcontroller. 163 00:10:48,350 --> 00:10:50,390 ‫Eindelijk kun je die losse schermklasse zien. 164 00:10:50,930 --> 00:10:57,740 ‫We kunnen daar op de vervolgkeuzelijst klikken en AWP selecteren, onderstrepen, scherm verliezen daar, compileren, opslaan en laten 165 00:10:57,740 --> 00:10:59,900 ‫we gaan en onszelf vermoorden. 166 00:11:00,110 --> 00:11:01,610 ‫Word een paar keer neergeschoten. 167 00:11:01,970 --> 00:11:03,170 ‫Bang, knal. 168 00:11:03,500 --> 00:11:04,150 ‫En daar ga je. 169 00:11:04,200 --> 00:11:09,650 ‫Er is een Alu-scherm verschenen dat ons vertelt wat er gebeurt, dat niveau staat op het punt om over 5 seconden opnieuw te starten, 170 00:11:09,650 --> 00:11:10,970 ‫en dat doet het inderdaad. 171 00:11:11,360 --> 00:11:20,000 ‫U weet nu dus niet alleen hoe u UMG-graphics kunt maken, maar ook hoe u deze vanuit C++ kunt spawnen in 172 00:11:20,000 --> 00:11:21,860 ‫plaats van vanuit Blueprint. 173 00:11:22,100 --> 00:11:26,900 ‫De volgende lezing zullen we een minder pessimistische kijk op de zaken hebben en proberen te 174 00:11:26,900 --> 00:11:30,380 ‫zien of we ook wat win-voorwaarden kunnen creëren voor dit spel. 175 00:11:30,680 --> 00:11:31,310 ‫Ik zie je dan.