Maak Firefly-deeltjes in UDK

Wat je gaat creëren

In deze tutorial leren we enkele basisprincipes van het UDK-deeltjesdeelsysteem terwijl we een Firefly-deeltje maken. We beginnen met het maken van een structuur voor ons deeltje in Photoshop en gaan dan naar UDK waar we leren hoe we die textuur kunnen omzetten in deeltjes, wat het belangrijkste onderdeel van deze zelfstudie is.

Om deze tutorial beter te begrijpen, moet je in ieder geval de basisbeginselen van arcering en materiaalcreatie in UDK kennen.

Opmerking van de uitgever: Als u liever wilt volgen met afbeeldingen met een hoge resolutie. Je kunt ze downloaden via de Bijlage downloaden knop in de rechter zijbalk.

1. De Firefly-textuur maken

Stap 1

Eerst moeten we een textuur voor het vuurvliegdeeltje maken, dus laten we Photoshop opstarten en aan de slag gaan.

Zoals weergegeven in de onderstaande afbeelding, maakt u een nieuw document met een resolutie van 128x128.

Waarom gebruiken we zo'n lage resolutie? Omdat we geen high-res textuurdetail in ons vuurvliegdeeltje willen dat ons systeem zou kunnen vertragen als we 10-20 exemplaren van zo'n deeltje in de omgeving zouden plaatsen. Het is beter dat we eerst beginnen met de laagste resolutie.

Stap 2

Ga nu naar Filter> Renderen en selecteer wolken om een ​​zwart-wit wolkeffect te renderen.

Na het selecteren van het Cloud-filter, blijf slaan Controle-F om de laatst gebruikte filter opnieuw aan te brengen totdat je een mooie wolkenspreiding krijgt zoals in het onderstaande voorbeeld.

Stap 3

Maak nu een Nieuwe laag en maak vervolgens een mooie witte radiale gradiënt op een zwarte achtergrond, net als in de volgende afbeelding. We hebben nu twee lagen: een wit radiaal verloop Laag 1 en een Cloud-textuur op Laag 0.

Stap 4

Ga terug naar de wolkenlaag (Laag 0) en selecteer de hele laag door de jouwe ingedrukt te houden Controle toets en Links klikken op de laag en kopieer de laag eenvoudig door op te drukken Besturing C. Verwijder deze laag (Laag 0) als je het eenmaal hebt gekopieerd.


Stap 5

Nu blijf je achter Laag 1, welke de laag is met de witte radiale textuur, dus selecteer eenvoudig die laag.

Na het selecteren van de laag (Laag 0), ga naar de kanalen tab en selecteer de Groen kanaal. Hierdoor wordt alleen het groene kanaal ingeschakeld en de rest van de kanalen worden uitgeschakeld, net zoals in de onderstaande afbeelding.


Stap 6

Druk nu eenvoudigweg op Ctrl-V om de wolkenstructuur in de te plakken Groen kanaal. Wat we hier hebben gedaan, is de twee texturen samenvoegen in één bestand door de kanalen te splitsen. Voor meer informatie over het samenvoegen van texturen in het RGB-kanaal, bekijk je mijn vorige Hologram-zelfstudie.

We hebben al informatie in het Rode Kanaal, dus het is tijd voor ons om ook wat informatie in het Blauwe kanaal te plaatsen, die momenteel leeg is. Ja dat klopt, gewoon leeg, dus vul het maar op Wit kleur zoals in de onderstaande afbeelding.


Ga nu naar Lagen Tab en je ziet iets zoals hieronder getoond wordt Laag 1.

Dit is het! Onze Firefly-textuur is nu klaar, dus bewaar de textuur als een Targa het dossier (.TGA). Nu is het tijd om UDK te laden.

2. Het Firefly-materiaal maken voor de deeltjes in UDK

Opmerking van de uitgever: U kunt de hoge resolutie-afbeeldingen van de materiaalinstellingen downloaden met behulp van de Bijlage downloaden knop bovenaan deze pagina.

Stap 1

Nadat UDK is geladen, importeert u die nieuw gemaakte Firefly-textuur in de Inhoudsbrowser met een Nieuw pakket genaamd "Firefly Particle".

Nadat u een nieuw pakket hebt gemaakt en vervolgens de Firefly-textuur hebt geïmporteerd, is het nu tijd om een ​​materiaal voor het Firefly-deeltjessysteem te maken. Klik met de rechtermuisknop op de Inhoudsbrowser en maak een Nieuw materiaal, Noem maar op "Firefly_mat" zoals op de foto hieronder (of je kunt je materiaal een naam geven die je maar leuk vindt.)


Stap 2

Dubbelklik op de Firefly-materiaal en importeer de Wolken textuur in de editor, of gewoon slepen en neerzetten de textuur in de Materiaal-editor.

Voor het Firefly-deeltjesmateriaal zullen we drie hoofdopstellingen maken. Ze zijn als volgt:

1. Firefly-instelling: Deze setup is verder onderverdeeld in twee sub-setups die zijn:

  • A. Wolkenstructuur: De textuur van de wolk extraheren uit het groene kanaal van de textuur die we eerder in Photoshop hebben gemaakt en vervolgens een willekeurige animatie eraan toevoegen.
  • B. Vuurvliegtextuur: De Firefly-textuur extraheren uit het rode kanaal van de textuur die we eerder in Photoshop hebben gemaakt.

2. Flikkerend effect: Een effect dat we nodig hebben voor dit Firefly-deeltje.
3. Kleur toevoegen:
Deze opstelling spreekt voor zich, dat wil zeggen om kleur toe te voegen aan de hele opstelling in het materiaal.
4. Cameradiepte:
Cameradiepte is om een ​​licht dieptewerking toe te voegen op een afstand rond de randen van de vuurvliegdeeltjes.

En dan zullen we alle drie bovenstaande opstellingen samenvoegen met behulp van een aantal toevoegingen en vermenigvuldigingen.

Stap 3

1. Wolkenstructuur:

Nu gaan we de cloudtextuurinformatie extraheren uit het groene kanaal van de textuur en zullen we wat willekeurige bewegingen / animaties toevoegen aan de wolkenstructuur.

Om dat te doen, hebben we vier uitdrukkingen nodig Panner, TexCoord, vermenigvuldigen en een Constante vector.

Haal die uitdrukkingen op en sluit de TexCoord in het Coördinaat van de Panner welke vervolgens wordt aangesloten op de UV's van de structuur. Zoals weergegeven in de onderstaande afbeelding, voert u een waarde in van 0,325 in voor de Constante vector en steek hem dan in de B van de Vermenigvuldigen uitdrukking.

Sluit nu eenvoudig het Groen Kanaal van de structuur in de EEN van de Vermenigvuldigen. Laten we dit noemen of becommentariëren als EEN door ingedrukt houden Controle-ALT en dan de linker muisknop rond de set-up slepen en dan Rechts klikken erop en selecteren Nieuwe reactie. Type "EEN"en sloeg invoeren.


Stap 4

Zodra je alles netjes hebt ingesteld, zoals in de afbeelding hierboven, selecteer je deze hele setup opnieuw door ingedrukt te houden Controle-ALT en vervolgens de linkermuisknop rond de set-up slepen en de selectie dupliceren door op te drukken Controle-W. Geef de nieuwe gedupliceerde installatie een naam "B".


Stap 5

De enige veranderingen die we hier moeten aanbrengen, zijn de Constante Vector van de hierboven getoonde setup. Dus verander gewoon de waarde naar 0.35 van de Constante vector uitdrukking in de eigenschappen. Nu moeten we deze twee instellingen toevoegen (EEN en B) samen door simpelweg een TOEVOEGEN uitdrukking.

Krijg een TOEVOEGEN expressie en sluit dan gewoon de Vermenigvuldigen vande EEN setup in de EEN van de TOEVOEGEN expressie, en doe dan hetzelfde voor de B setup, net als in de onderstaande afbeelding. En becommentarieer dan deze hele setup als "Cloud Effect".

Nu we de Cloud-setup gereed hebben, is het tijd om verder te gaan naar de volgende setup die de Firefly-textuur uittrekt.

Stap 6

2. Vuurvlieg textuur:

Het is eenvoudig om de Firefly-textuur te extraheren. Haal de textuur opnieuw van de Inhoudsbrowser in de Materiaal-editor en dan twee uitdrukkingen krijgen, een Vermenigvuldigen en een Constante vector.

Sluit gewoon de Rood kanaal van de textuur in de EEN van de Vermenigvuldigen. Voer een waarde in van 1 in de Constante vector en steek hem dan in de B van de Vermenigvuldigen, zoals je op de onderstaande afbeelding ziet.


Stap 7

3. Flikkerend effect:

We willen dat het vuurvliegdeeltje zo nu en dan een beetje flikkert, dus we moeten een opstelling voor dat effect maken. Als je mijn vorige Advance Hologram-zelfstudie hebt gelezen en de stappen hebt gevolgd voor het maken van het flikkerende effect, dan is dit bekend. Deze opstelling is vergelijkbaar met die opstelling en het zal nu gemakkelijk voor je zijn om de volgende opstelling te begrijpen die we zullen gebruiken om het flikkerende effect te creëren.

De volgende opstelling is complex en moeilijk te begrijpen, dus ga er doorheen langzaam en goed.

Om te beginnen, pak een Tijd expressie en plug dat in een Sinus. Ga naar de eigenschappen van de Sinus en geef het een Periode van 0,005. Krijg een Constante klem expressie en in zijn eigenschappen, invoeren 2.0 voor min en 1.0 voor Max. Sluit dat dan gewoon aan Sinus naar de Constante klem uitdrukking. Krijg een Vermenigvuldigen expressie en sluit de Constante klem in de EEN van a Vermenigvuldigen.

We moeten nu deze drie uitdrukkingen dupliceren (Constant Clamp, Sine en Time) door ze te selecteren en op te drukken Controle-W. En verander dan de waarden in de eigenschappen van alle drie van deze uitdrukkingen. Sine Periode: 0,05 ende Constant Clamp Min en Max waardennaar 1.0 en 2.0 respectievelijk. En sluit, net als in de onderstaande afbeelding, de Constante klem uitdrukking in de B van de Vermenigvuldigen.

Wederom een ​​krijgen Vermenigvuldigen expressie en sluit dan de Constante klem expressie (de expressie met een Min-waarde van 2.0) in de EEN van de Vermenigvuldigen. Nu de B knooppunt is weggelaten, dus sluit gewoon het B naar de vorige Vermenigvuldigen uitdrukking.

We hebben nog drie uitdrukkingen nodig om de installatie te voltooien en deze zijn als volgt: Tijd, Rotator en desaturatie. Krijg alle drie deze expressies en sluit dan de Tijd in de Coördineren van de Rotator. In de eigenschappen van de Rotator, stel de Snelheid naar 0,00015 en steek hem dan in de UV's van de structuur.

Sluit nu de structuur in de desaturatie, en dan een krijgen Vermenigvuldigen expressie om alle verbindingen samen te voegen, net zoals in de onderstaande afbeelding. Aansluiten allemaal de uitdrukkingen correct.


Stap 8

Nu is het tijd voor ons om alle setups samen te voegen, dus laten we beginnen met de Firefly-installatie.

Krijg een Vermenigvuldigen expressie en sluit dan de Firefly Texture in de EEN van de Vermenigvuldigen. Sluit de Cloud Effect setup in de B van de Vermenigvuldigen expressie zoals hieronder getoond.

Zodra je alles goed hebt ingesteld, selecteer je deze hele setup door ingedrukt te houden Controle-ALT en versleep de linker muisknop en Rechts klikken om deze setup te becommentariëren als "Firefly-installatie".


Stap 9

Op dit moment is onze vuurvliegtextuur zwart en wit, dus we moeten er wat kleur aan toevoegen. De set-up voor het toevoegen van kleur is eenvoudig, haal gewoon een Constant 3 Vector uitdrukking en geef het dan RGB waarden van 0.65, 0.4, 0 in de eigenschappen van de Constant 3 Vector respectievelijk.

Krijg een Vermenigvuldigen expressie en sluit de Constant 3 Vector in de EEN van dit Vermenigvuldigen, en dan weer een andere Vermenigvuldigen expressie en sluit deze aan op de B van de vorige Vermenigvuldigen uitdrukking. Net zoals in de onderstaande afbeelding.

Stap 10

De laatste opstelling is om het diepte-effect van de camera voor de deeltjes te krijgen. Om dat te doen, pak een PixelDepth expressie samen met een Vermenigvuldigen en Constante vector uitdrukking. Geef een constante waarde van 0,031 en steek dan die Pixeldepth-expressie in de B van de Vermenigvuldigen uitdrukking.

Zoals in de onderstaande afbeelding wordt weergegeven, sluit u eenvoudig het Constante vector uitdrukking in de EEN van de Vermenigvuldigen. En selecteer vervolgens al deze expressies en becommentarieer ze als "Cameradiepte"net als in de onderstaande afbeelding.


Dat is het! De installatie is voltooid. En nu is het laatste wat je moet doen, alle punten verbinden, dat wil zeggen, alle setups samenvoegen die we hebben gemaakt.

Stap 11

Zoals aangegeven in de onderstaande afbeelding, sluit u de Vermenigvuldigen uitdrukking van de Flikkerend effect setup in de EEN van de Vermenigvuldigen uitdrukking van de Kleur toevoegen opstelling. En sluit dan de Vermenigvuldigen uitdrukking van de Firefly-installatie in de B van de Vermenigvuldigen uitdrukking van de Kleur toevoegen opstelling.


Stap 12

We moeten nu nog een setup samenvoegen en dat is de Cameradiepte effect.

Krijg een nieuwe Vermenigvuldigen expressie en neem vervolgens de verbindingsstekker uit de Vermenigvuldigen van de Kleur toevoegen opstellingen steek hem in de EEN van het nieuwe Vermenigvuldigen. Neem nu de aansluitstekker uit de Vermenigvuldigen van de Cameradiepte instellen en aansluiten op de B van de nieuwe Vermenigvuldigen.

Nu, zoals in de onderstaande afbeelding wordt weergegeven, sluit u gewoon deze nieuw aan Vermenigvuldigen in de ondoorzichtigheid kanaal van de Materiaal. En ten slotte neemt u de verbindingsstekker uit de Constant 3 Vector van de Kleur toevoegen en steek hem in de uitzendend kanaal van de Materiaal. Net zoals op de foto hieronder.


Stap 13

Nu moet ik Windows> Eigenschappen.

In de eigenschappen venster, vouw het uit Materiaal sectie en stel de Mengmodus naar BLEND_Translucent, de Verlichtingsmodel naar MLM_Unlit en zorg er ook voor Tweezijdig gezicht is On, door de optie aan te vinken.


Dat is het! Je materiaal voor het Firefly-deeltje is klaar.

3. Het Particle System maken

Stap 1

Het is tijd om het Particle-systeem te maken. Maak eerst een nieuw particle systeemin de Inhoudsbrowser door Rechts klikken binnen in de Inhoudsbrowser en een maken Nieuw deeltjes systeem, zoals getoond in de afbeelding hieronder. Geef het gewoon een naam als "Firefly_Particle_effect" en druk op OK.


Unreal Cascade Interface (UDK's Particle System)


Stap 2

Na het raken van de OK-knop, verschijnt een nieuw venster (zie bovenstaande afbeelding). Dit venster is de gebruikersinterface (UI) van Unreal Cascade, het partikelsysteem van UDK. Het bestaat uit vier hoofdsecties:

Toolbar: Alle gereedschappen en bedieningselementen bevinden zich direct onder de het dossier menubalk. U zult merken dat de opties op de werkbalk vrijwel vanzelfsprekend zijn, maar u kunt over elk pictogram zweven en u zult zien wat het doet. Zoals bijvoorbeeld, de eerste twee iconen van links zijn voor het herstarten van de emittersimulatie vanaf het begin, en het zevende icoon van links is om de weergavemodus van de sprites te schakelen. Als u bijvoorbeeld wilt dat de Sprite wordt weergegeven in de mesh-modus, wireframe of niet-verlichte modus en dergelijke.

Particle Preview-venster: Dit venster is alleen bedoeld om het effect van de zender in realtime te bekijken. U kunt het real-time voorbeeld van de Toolbar uitschakelen voor betere prestaties.

Emitter Modules: In dit venster kunt u Modules voor de zender instellen en toevoegen. Met Modules kunt u de zenders van de zender besturen Leven, snelheid, schaal, enz.

Eigenschappenvenster: Dit venster toont de eigenschappen van elke module.

Laten we nu kijken hoe we het Firefly-materiaal kunnen brengen en het als een deeltje kunnen instellen.

Stap 3

Selecteer eerst de Firefly-materiaal in de Inhoudsbrowser en kom terug naar dit Unreal Cascade-venster. Klik hieronder op de afbeelding, zoals weergegeven in de afbeelding Verplicht tab en in de eigenschappen venster, vouw het uit Emitter sectie. Klik vervolgens op de Groene pijl om het geselecteerde materiaal uit de Inhoudsbrowser toe te voegen. Zorg ervoor dat u de rooster weergave zoals aangegeven in de afbeelding hieronder.


Stap 4

Ga naar de Paaien tab uit het Modules venster en in de eigenschappen venster, vouw het uit Broed> Tarief> Distributie sectie. Verhoog nu de Constante waarde voor 80, je kunt elke waarde tussen 50-100 plaatsen.


Stap 5

Selecteer nu de Levenslang tab uit de modules venster, ga naar de eigenschappen venster en vouw het gedeelte uit Levensduur> Distributie. Onder Distributie, verander de min en Max waarden voor 20 en 5 respectievelijk.


Stap 6

Selecteer de Oorspronkelijke grootte tab uit de modules venster en ga dan naar eigenschappen venster.

Zoals hieronder wordt weergegeven, vouwt u uit Start grootte> distributie. En verhoog dan de Max van X en Y waarden voor 3 en 2 respectievelijk. Je zult beginnen om de veranderingen en het effect te zien plaatsvinden in het preview-venster. Dat is goed, maar maak je nu geen zorgen over de preview.


Stap 7

Selecteer nu Begin snelheid van de modules venster, ga naar de eigenschappen en vouw de sectie uit Start Velocity> Distributie. In de Distributie instellingen, wijzig de Max waarde van X, Y en Z naar 1, 2 en -1 respectievelijk, en ook de min waarde van X, Y ;en Z naar -1, -2 en 2 respectievelijk.


Als u nu het voorbeeldvenster controleert, zendt onze emitter de sprites uit vanaf de ene plek en kunnen we de oorsprong duidelijk zien, wat we niet willen. We moeten de deeltjes in alle richtingen in de ruimte van de Wereld spreiden en laten zweven, zodat we de oorsprong van de emitter niet zien. Laten we kijken hoe we dat in de volgende stap kunnen doen.

Stap 8

We moeten een module toevoegen, dus Klik met de rechtermuisknop op de grijze ruimte zoals hieronder weergegeven. Ga vanuit het contextmenu naar Plaats en kies Oorspronkelijke locatie.


Stap 9

Zodra u selecteert Oorspronkelijke locatie vanuit het contextmenu met de rechtermuisknop, zal het als een module worden toegevoegd, dus selecteer dat module en ga dan naar de eigenschappen venster.

Vouw het Startlocatie> Distributie. Onder Distributie, voer een in Max waarde van 512 naar de X ,en Z velden, en geef het een min waarde van 512 voor X, Y en Z. Sla dan het pakket en alles op!


Conclusie

Dat is alles, het Firefly-deeltje is nu helemaal klaar voor gebruik op uw niveau, maar zorg ervoor dat uw niveau gesloten is en een donkere omgeving heeft, net als in de voorbeeldvideo. Alleen dan kun je de vuurvliegjes mooi zien zweven. Of maak gewoon een rechthoekige kamer, voeg één lamp toe en laat het Firefly-deeltje vallen.

Laat me weten hoe deze tutorial in de comments voor jou is uitgewerkt door een screenshot of zo te posten. Genieten!