Starten met programmeren van een 3D omgeving in Unreal Engine – Integratie van een webbrowser

print
Deze handleiding maakt deel uit van het programmeertraject:


Inhoud


Wat vooraf ging


Inleiding

Stel, u wilt een demoruimte bouwen met links naar het internet of YouTube video’s invoegen (embedden). In deze handleiding leg ik uit hoe u dit kunt doen en hoe ik dit geïmplementeerd heb in mijn 3D leeromgeving.


Webbrowser plugin

De Web Browser, is op het ogenblik van dit schrijven, nog geen vast onderdeel van Unreal Engine, het moet worden toegevoegd als een plugin.

  • Ga naar EditPugins.
  • Onder Built In – zoek naar Web Browser.
  • Vink Enabled aan.


Widget

De Web Browser moet onderdeel zijn van een widget. Maak dus eerst een widget aan.

  • Klik in de Content Browser, in de gewenste map, met de rechtermuisknop ingedrukt op de achtergrond (of klik op de knop Add New).
  • Kies voor User InterfaceWidget Blueprint.

  • Geef het een gepaste naam (bv. WidgetWebBrowser).
  • Dubbelklik de net aangemaakte Widget Blueprint.

Merk rechtsboven de 2 modes op, Designer en Graph.

  • In Designer, zoek naar Web Browser (het staat, op het ogenblik van dit schrijven nog onder Experimental).

  • Plaats de Web Browser over heel het canvas en geef het een naam (bv. MijnWebrowser).

  • In Graph, maak onderstaande Blueprint.

Het laden van de website gebeurt via de functionaliteit Load URL. Ik gebruik een variabele URL van het type string om de URL in te geven. Vink Expose on Spawn aan zodat u later gemakkelijker aan deze variabele kunt.

De widget is klaar.

  • Compile en Save om de widget te bewaren.

Widget gebruiken binnen een Blueprint

Maak eventueel een nieuwe Blueprint aan waarin u de widget wilt gebruiken.

  • Onder Components, voeg via Add Component een Widget toe. Geef het een passende naam (bv. WidgetWebbrowserDisplay)

  • Geef in het Details-panel onder Widget Class de naam van de widget in.

  • Gebruik onderstaande code, in de Event Graph, om de widget te creëren (via Create Widget) en de te laden URL mee te geven aan de widget. Omdat de variabele URL, de variabele uit de widget, de eigenschap Expose on Spawn aangevinkt heeft verschijnt deze hier meteen. DisplayURL is een plaatselijke variabele.


Input mode

Eerst, zorg ervoor dat de Widget input kan ontvangen door de eigenschap Receive Hardware Input aan te vinken.

U wilt de internetpagina, weergegeven in de webbrowser, kunnen besturen en ook de besturing van het programma behouden. We hebben deze code reeds gezien maar ze is hier van toepassing.

Hiertoe voegt u eerst een Box Collision toe rond de actor die de webbrowser weergeeft om de code te triggeren.

Bij het beginnen overlappen van de BoxOn component Begin Overlap (Box)

  • zet de invoermodus op zowel Game als UI via Set Input Mode Game And UI.
    • Verbind dit met de Player Controller via Get Player Controller.
    • Verbind de eigenschap In Widget to Focus met de specifieke widget via Set User Widget Object die refereert naar de gebruikte widget (hier Widget Webbrowser Display).
  • Bepaal dat de muiscursor moet getoond worden door Set Show Mouse Cursor aan te vinken.

Bij het beëindigen van het overlappen van de BoxOn component End Overlap (Box)


Website openen in eigenlijke browser

Het openen van de website in uw eigenlijke webbrowser (Google Chrom, Edge,…) kan eenvoudig via Launch URL (bv. na het klikken op de L-toets).


Embedded content

Voor embedded content, ingevoegde content, denk aan een YouTube-video, volgt u bovenstaande stappen met dit verschil.

  • Maak een nieuwe widget, volg de bovenstaande stappen.
  • In de Graph gebruikt u nu volgende code op basis van Load String.

  • Dummy URL is om het even welke andere URL, maar neem toch maar best een URL waar u eigenaar van bent.
  • Contents bevat de eigenlijke embedded code (een iframe maar op zich kan dit iedere HTML-code zijn).

De rest is een gelijkaardige uitvoering als bij een website.


Behandelde Basiscompetenties uit de module ICT Programmeren – Integratie externe functionaliteiten

  • IC BC024 – * kan zijn eigen deskundigheid inzake ICT opbouwen
  • IC BC232 – kan digitale tools gebruiken om modellen, simulaties en visualisaties van de realiteit te maken
  • IC BC254 – kan externe content integreren en structureren
  • IC BC255 – kan de geïntegreerde content in functie van het beoogde eindresultaat aanpassen
  • IC BC256 – kan diverse elementen tot een nieuw betekenisvol geheel samenstellen
  • IC BC258 – houdt rekening met regelgeving m.b.t. licenties voor het gebruik en de publicatie van broncode
  • IC BC288 – kan ICT-problemen oplossen

Geef een reactie

Deze website gebruikt Akismet om spam te verminderen. Bekijk hoe je reactie-gegevens worden verwerkt.

  • Abonneer je op deze website d.m.v. e-mail

    Voer je e-mailadres in om je in te schrijven op deze website en e-mailmeldingen te ontvangen van nieuwe berichten.