Visual Scripting on Unreal Engine Blueprints. Programowanie za pomocą bloków.

Wielu z nas chciałoby zapewne opanować tajniki programowania, jako niezwykle przydatnej, ale też niełatwej profesji. A co, jeśli da się uczyć stosunkowo przyjemnie, bo wizualnie? Sposób kodowania przy pomocy grafik wydaje się być bardziej przystępny i przyjazny. Może więc rozpocząć przygodę z programowaniem z użyciem bloków, strzałek? Czy to w ogóle możliwe? Sprawdźmy Visual Scripting!

Ach, ten kod…

Czarna Magia? Trochę tak. Powyższy przykład to dobrze znany Algorytm Euklidesa (swoją drogą datowany na około trzysetny rok przed naszą erą). W tym przypadku program komputerowy, zwracający największy wspólny dzielnik dla liczb a i b, został napisany w popularnym C++. Klasycznym języku programowania, kodzie w postaci znaków, liter i cyfr.
No właśnie. Dla wielu początkujących jest to bariera nie do przebicia. Odbijają się oni od kodu tak szybko, jak szybko zdecydowali się nauczyć programowania. Mimo dużych chęci, często odpuszczają, ponieważ przeraża ich sposób pisania programów.
Wspominam o początkach i pierwszych krokach celowo. Zazwyczaj zanim młody adept sztuki programowania usiądzie do kodowania, zapoznaje się on z pseudokodem i schematami blokowymi.

Co to takiego? To schematyczny zarys programu, zazwyczaj na kartce, opisany w bardziej czytelny dla człowieka sposób. Jest bardzo pomocny w zrozumieniu algorytmu czy innego konkretnego zagadnienia. Pomaga w prototypowaniu. Ogólnie: dużo plusów. Zobaczmy zatem Algorytm Euklidesa w schemacie blokowym.
Tym razem nasz program straszy nieco mniej, prawda? Jesteśmy ludźmi, a co za tym idzie, wolimy obrazy. Szybciej kojarzymy wzrokowo. Jako dzieci w pierwszej kolejności nie uczymy się pisać i czytać – uczymy się rozpoznawać, np. zwierzęta, po obrazkach. Tak jest i z programowaniem. Program podany nam jako schemat blokowy jest dla nas czytelniejszy i przyjaźniejszy, łatwiejszy w przyswojeniu. Niestety, kartki ze schematem blokowym nie wprowadzimy do komputera. Komputer potrzebuje kodu, jasnych instrukcji.

Na ratunek – Visual Scripting!

Jako że mamy XXI wiek i nasze komputery potrafią cuda, mamy też Visual Scripting. Wizualne języki programowania to koncepcja programowania za pomocą graficznych elementów: bloków, strzałek i tym podobnych – taki trochę wspomniany schemat blokowy, ale zrozumiały również dla komputera, swego rodzaju idealny kompromis między klasycznym, często topornym kodem, a graficznym rozpisaniem programu na kartce. Dla początkującego programisty, który chce, ale boi się kodu – idealny.

Jak wszystko na tym świecie, Visual Scripting ma też swoje minusy (o nich później), ale skupmy się na plusach. Największym z nich jest zdecydowanie niski próg wejścia. Bardzo szybko jesteśmy w stanie coś zaprogramować, bo nie skupiamy się na przykład na tym, czy popełniliśmy jakąś literówkę w kodzie. Grafiki, kolory i kształty są dla nas czytelniejsze (tu dodam, że klasyczny kod również kolorujemy z tego samego powodu – z powodu czytelności). Z racji tego, że wizualne języki programowania to w głównej mierze języki skryptowe (interpretowane), mamy do czynienia z szybką iteracją i testowaniem kodu. Do tego wszystkiego Visual Scripting pojawia się w coraz większej liczbie rozwiązań, w tym bardzo profesjonalnych – takich, jak Houdini czy Unreal Engine.

Gdzie cię szukać, bloku?

Wspomniałem o narzędziach – zatrzymajmy się tu na chwilę. Wiemy już, co to jest ten Visual Scripting, teraz pora na konkrety. Przejrzyjmy kilka rozwiązań.

Zaczynam

Scratch to wizualny język programowania dla dzieci i młodzieży, opracowany przez MIT Media Lab. Idealnie wprowadza w świat programowania, a umiejętności w nim nabyte mogą zostać zastosowane w innych językach, w tym klasycznych – takich, jak Java czy Python. Fajne narzędzie dla początkujących.

Jestem artystą, ale programistą

Kolejny przykład to wyspecjalizowane narzędzie do tworzenia grafiki 3d i efektów specjalnych – mowa o Houdinim. Tutaj za pomocą Visual Scriptingu sterujemy generowaniem tychże efektów, tworzymy w nim skrypty/automaty/programy, mogące wygenerować sceny, o jakich grafikom się nie śniło. Symulowanie wody, ognia, tworzenie miast, proceduralne modelowanie. Cuda! Poniżej przykład maszyny generującej mosty wiszące.

Chcę budować światy!

Dalej w kolejce jest Unreal Engine 4 i jego blueprinty. Potężne narzędzie, dzięki któremu jesteśmy w stanie budować gry komputerowe, aplikacje 3d i inne, nie dotykając klasycznego kodu (oczywiście dla koderów w przypadku Unreal Engine 4 jest C++). Multiplatformowość i wysokiej jakości grafika przyciągają jak magnes.
To tylko kilka przykładów. Istnieje masa rozwiązań wizualnego programowania. Powstają również edytory dla klasycznych języków. JavaScript jako bloki i strzałki? Żaden problem.

No to blueprintujemy!

W ten sposób przejdziemy do przykładów. Zaprogramujemy coś, a na warsztat weźmiemy wspomniany Unreal Engine 4. Dlaczego? Po pierwsze: jest darmowy. Każdy może spróbować swoich sił. Po drugie: to kombajn – jesteśmy w stanie tworzyć w nim nie tylko całe gry, ale i różnego rodzaju aplikacje 3d. Tworzymy na różne platformy, także na mobilne (Android, iOS). Po trzecie: blueprinty, czyli wizualny język programowania, który osobiście uważam za genialny, ale również przystępny dla początkujących programistów.

W Unreal Engine możemy bawić się C++. Fajnie. Jeszcze ciekawsze są blueprinty, które powiązane są z C++. W sporym uproszczeniu: jeżeli brakuje nam jakiegoś bloku, możemy stworzyć/utworzyć takowy właśnie w kodzie C++. Ostatecznie nasz diagram/program w blueprincie jest kodem zrozumiałym dla komputera.
Dodam jeszcze, że Unreal Engine ma bardzo bogatą dokumentację i spore community, dzięki czemu nie powinniśmy się zgubić. Oficjalne tutoriale również są przystępne i szybko wchodzą do głowy, więc warto się z nimi zapoznać (szczególnie dlatego, że w naszych przykładach nie poruszymy wszystkiego).

Kostko, turlaj się!

Przykład pierwszy: spróbujmy zasymulować rzut klasyczną kostką, kiedy gracz naciśnie klawisz. Mały prosty programik. W naszym Level Blueprincie (specyficzny blueprint przypisany do sceny/levelu/mapy w grze) wywołujemy blok odpowiedzialny za rozpoczęcie zdarzenia na wciśnięcie klawisza „F”. Kolejnym krokiem jest wylosowanie wartości całkowitej z przedziału 1–6. Mamy na to blok. Teraz potrzebujemy zmiennej – pojemnika, który będzie przechowywał aktualny stan kostki, czyli to, ile oczek ona teraz pokazuje. Będzie to zmienna typu całkowitego. Na koniec: informacja dla gracza o tym, co wylosował. Łączymy nasz algorytm.

Jak widać, połączenia i bloki mają swój charakter: kolor i rodzaj bloku/połączenia mówią o tym, do czego on służy, gdzie można się wpiąć, i tak dalej. To taki odpowiednik składni i semantyki klasycznych języków programowania. Tak, jak Java różni się od Pythona pod względem wyglądu kodu, tak blueprinty różnią się od Flow Graph (visual scripting w CryEngine) blokami.

Ciemno? Zapalmy światło

Przykład drugi. Spróbujmy czegoś bardziej interaktywnego i efektownego. Tym razem chcemy, aby w pomieszczeniu zapaliło się światło, kiedy gracz do niego wejdzie, oraz zgasło, kiedy gracz opuści pokój. Tu wykorzystamy elementy naszej sceny w skrypcie.
Na początek scena. Oprócz samego pomieszczenia, potrzebujemy światła, które na starcie jest wyłączone, i triggera – obiektu kolizyjnego, który wywoła skrypt, kiedy gracz znajdzie się w jego obszarze i/lub opuści obszar.
Teraz skrypt. W Level Blueprint pobieramy referencję do światła oraz wywołujemy zdarzenia dla triggera – odpowiednio na BeginOverlap (wejście w obszar) oraz na EndOverlap (wyjście z obszaru wyzwalacza). Całość łączymy z blokiem przełączającym widoczność światła.
W tym przypadku Visual Scripting manipuluje w stosunkowo prosty sposób efektem wizualnym w grze. Programowanie to nie tylko skomplikowana matematyka – to również tworzenie światów, zależności i interakcji.

A może przycisk?

Przykład trzeci. Unreal Engine znany jest głównie z gier i wysokiej jakości grafiki 3D. Prawdą jest również, że możemy zbudować na nim dowolną aplikację (tak, nawet webową). W dodatku często bez dotykania klasycznego kodu. Sprawdźmy, jak zachowują się blueprinty w interfejsach użytkownika.
Unreal Motion Graphics to podsystem do tworzenia interfejsów UI.

Oprócz edytora i palety elementów standardowych, jak przyciski, pola tekstowe, checkboxy, mamy narzędzie do animowania oraz graf do skryptowania za pomocą blueprintów. Ciekawostką jest, że jednym z komponentów jest okno wyszukiwarki internetowej. Tak, możemy przeglądać internet w czasie gry lub wyświetlić stronę www nad głową naszej postaci.
Kontrolki mają swoje zdarzenia w blueprintach. Visual Scripting obsługuje tutaj na przykład wciskanie przycisków, najazdy kursorem na elementy czy zmianę wartości listy rozwijanej. Za pomocą widget blueprintów (tak nazywają się blueprinty UI) możemy zmieniać ekrany, prowadzić obliczenia lub komunikować się z naszą sceną 3D. W przypadku Unreal Engine 4, Visual Scripting jest mocno uniwersalny, ale również wyspecjalizowany. Istnieją Blueprinty ogólnego przeznaczenia oraz specyficzne – takie, jak: Widget Blueprint (obsługa UI), Animation Blueprint (blueprint sterujący na przykład animacją postaci), Editor Blueprint (skrypty edytora Unreal Engine) i inne.

Teraz ty, Euklidesie

Przykład czwarty: powracamy do naszego algorytmu – największy wspólny dzielnik w blueprintach Unreal Engine.
Jak widać, powtarzam, Visual Scripting mocno przypomina schematy blokowe. Rozpoczynając przygodę z programowaniem, warto rozważyć zatem naukę na na przykład blueprintach. Umiejętności Jak widać, powtarzam, Visual Scripting mocno przypomina schematy blokowe. Rozpoczynając przygodę z programowaniem, warto rozważyć zatem naukę na na przykład blueprintach. Umiejętności tu nabyte doskonale sprawdzą się później w klasycznym kodzie.

Nie do końca różowo

Wspomnijmy o minusach. Jako, że wszystko je ma, również i Visual Scripting nie jest perfekcyjny. Dużym minusem jest, o ironio, czytelność grafów przy skomplikowanych i dużych projektach. Oczywiście istnieją komentarze, możemy też nasze schematy zamykać w ładne funkcje, ale bywa i tak, że nasz graf wygląda jak śmietnik przez te wszystkie strzałki i bloki. Ten sam problem mają schematy blokowe. Minusem jest również wygląd i specyfika samych grafów. Ot, mamy bardzo duży rozstrzał w rodzajach Visual Scriptingu. Łatwiej nam zrozumieć, o co chodzi w Javie znając C++, aniżeli to, o co chodzi we Flow Graph, gdy znamy blueprinty. Szybkość pisania programu też jest minusem. W przypadku Visual Scriptingu trwa to jednak dłużej.

To chcę? Czy nie chcę?

Zróbmy sobie jakieś podsumowanie tej przygody. Na pewno wiemy, że kod może przerazić. Jednym z lekarstw na tę barierę jest Visual Scripting. Sposób kodowania za pomocą bloków i innych grafik jest bardziej przystępny i przyjazny. Jest dobrym wstępem do programowania. Ba! Bywa i tak, że w całości zastępuje klasyczny kod i/lub jest z nim mieszany (trochę w kodzie, trochę w grafie). Ma wiele zastosowań: od silników gier po proceduralne generatory tekstur (Substance Designer) czy generatory roślin (SpeedTree Modeler też jest swego rodzaju Visual Scriptingiem). Niestety, nie jest on zbyt dobrze skalowalny. Tworzenie przy jego pomocy kodu trwa znacznie dłużej i często trudniej jest go zmodyfikować. Bywa nieczytelny. Nie nadaje się do niskopoziomowego programowania. Unreal Engine 4 udowadnia jednak, że Visual Scripting jest potrzebny i może być zaawansowanym narzędziem. Osobiście bardzo mocno polecam blueprinty. Nie tylko do nauki programowania i zabawy, ale i do poważnych projektów. A połączenie blueprintów z klasycznym C++ gwarantuje nam idealną programistyczną zupę.