Spis treści Rozdział 1. Wprowadzenie ...............................................................................13 Dostępne biblioteki 3D ...................................................................................................................14 Away3D ......................................................................................................................................14 Alternativa3D ............................................................................................................................16 Papervision3D ...........................................................................................................................18 FIVe3D .......................................................................................................................................20 Flare3D .......................................................................................................................................21 Sandy3D .....................................................................................................................................23 Sophie3D ....................................................................................................................................24 Wybór biblioteki 3D .......................................................................................................................25 Pobieranie silnika Away3D ............................................................................................................26 Away3D FP9, FP10 czy może FP11? ......................................................................................27 Pobieranie Away3D 3.6.0 z Away3D.com .............................................................................27 Pobieranie Away3D 3.6.0 z github.com .................................................................................28 Pobieranie Away3D 3.6.0 z SVN .............................................................................................28 Instalacja biblioteki Away3D .........................................................................................................31 Konfiguracja w Adobe Flash CS4 i CS5 .................................................................................31 Konfiguracja we FlashDevelop ................................................................................................32 Konfiguracja w Adobe Flash Builder 4 ..................................................................................35 Podsumowanie ................................................................................................................................37
Rozdział 2. Podstawy biblioteki Away3D .......................................................... 39 Podstawowe komponenty ..............................................................................................................39 View3D .......................................................................................................................................40 Scene3D ......................................................................................................................................43 Camera3D ..................................................................................................................................45 Object3D ....................................................................................................................................46 ObjectContainer3D ...................................................................................................................49 Podstawowa budowa aplikacji w Away3D ..................................................................................50 Położenie obiektów w przestrzeni .................................................................................................53 Układ współrzędnych w Away3D .................................................................................................54 Podsumowanie ................................................................................................................................59
Rozdział 4. Materiały ....................................................................................143 Przygotowanie zasobów dla aplikacji .........................................................................................144 Dodawanie plików do zasobów w programie Adobe Flash ..............................................144 Odwoływanie się do zasobów w kodzie źródłowym aplikacji ..........................................147 Przykład ..........................................................................................................................................150 Linie .................................................................................................................................................164 WireframeMaterial .................................................................................................................164 WireColorMaterial .................................................................................................................165 Kolor ...............................................................................................................................................167 ColorMaterial ..........................................................................................................................167 EnviroColorMaterial ..............................................................................................................168 Bitmapy ...........................................................................................................................................170 BitmapMaterial ........................................................................................................................170 BitmapFileMaterial .................................................................................................................172 EnviroBitmapMaterial ............................................................................................................174 GlassMaterial ...........................................................................................................................175 TransformBitmapMaterial .....................................................................................................178 Animowane ....................................................................................................................................181 MovieMaterial .........................................................................................................................181 AnimatedBitmapMaterial ......................................................................................................183 VideoMaterial ..........................................................................................................................185 Mieszanie materiałów ...................................................................................................................187 Podsumowanie ..............................................................................................................................188
Rozdział 5. Światło ....................................................................................... 191 Rodzaje świateł ..............................................................................................................................192 Klasa bazowa dla przykładów ................................................................................................192 AmbientLight3D .....................................................................................................................194 PointLight3D ...........................................................................................................................196 DirectionalLight3D .................................................................................................................199 Materiały reagujące na światło ....................................................................................................202 Klasa bazowa dla przykładów ................................................................................................202 PhongColorMaterial ...............................................................................................................204 ShadingColorMaterial ............................................................................................................206 PhongBitmapMaterial ............................................................................................................207 WhiteShadingBitmapMaterial ..............................................................................................209 PhongMovieMaterial ..............................................................................................................210 Dot3BitmapMaterial ...............................................................................................................212 Dot3BitmapMaterialF10 ........................................................................................................214 Dot3MovieMaterial ................................................................................................................216 PhongMultiPassMaterial ........................................................................................................218 Podsumowanie ..............................................................................................................................220
8
Flash i ActionScript. Aplikacje 3D od podstaw
Rozdział 6. Modele i animacje ......................................................................... 223 3ds Max ....................................................................................................................................224 Maya ..........................................................................................................................................224 LightWave ................................................................................................................................225 Blender ......................................................................................................................................226 MilkShape 3D ..........................................................................................................................227 CharacterFX .............................................................................................................................228 Google SketchUp .....................................................................................................................229 PreFab3D ..................................................................................................................................230 Low poly i High poly .....................................................................................................................231 Format plików obsługiwanych w Away3D ................................................................................232 3DS ............................................................................................................................................232 ASE ............................................................................................................................................232 OBJ ............................................................................................................................................232 DAE ...........................................................................................................................................232 MD2 ..........................................................................................................................................233 AWD .........................................................................................................................................233 AS ..............................................................................................................................................233 Konwertowanie modelu do klasy ActionScript ........................................................................233 Klasa AS3Exporter ..................................................................................................................233 Eksport z programu PreFab3D .............................................................................................241 Eksport z programu Blender .................................................................................................244 Eksport z programu Autodesk 3ds Max ..............................................................................246 Stosowanie modeli 3D w Away3D ..............................................................................................248 Przykładowa aplikacja ............................................................................................................248 3DS ............................................................................................................................................263 OBJ ............................................................................................................................................266 ASE ............................................................................................................................................268 DAE ...........................................................................................................................................269 MD2 ..........................................................................................................................................271 AWD .........................................................................................................................................273 Stosowanie animacji modeli ........................................................................................................275 AnimationData i AnimationDataType ................................................................................275 AnimationLibrary ...................................................................................................................277 Animator i AnimatorEvent ...................................................................................................277 Zastosowanie animacji w przykładzie ..................................................................................279 Podsumowanie ..............................................................................................................................280
Spis treści
9
Rozdział 7. Praca z obiektami ........................................................................ 283 Biblioteki do animacji ...................................................................................................................284 Pobieranie i instalacja biblioteki GreenSock Tweening Platform ....................................284 Wybór biblioteki GreenSock Tweening Platform ..............................................................285 Implementacja TweenMax ....................................................................................................285 Klasa bazowa ..................................................................................................................................286 Przemieszczanie .............................................................................................................................294 Właściwości ..............................................................................................................................294 Metody ......................................................................................................................................295 Obracanie .......................................................................................................................................301 Właściwości ..............................................................................................................................302 Metody ......................................................................................................................................303 Skalowanie ......................................................................................................................................309 Właściwości ..............................................................................................................................309 Metody ......................................................................................................................................310 Macierz transformacji ...................................................................................................................311 Czym jest macierz transformacji? .........................................................................................311 Tworzenie macierzy transformacji .......................................................................................312 Modyfikowanie powierzchni obiektu .........................................................................................313 PathExtrusion ..........................................................................................................................313 HeightMapModifier ................................................................................................................319 Elevation i SkinExtrude ..........................................................................................................325 Explode i Merge .......................................................................................................................331 Podsumowanie ..............................................................................................................................337
Rozdział 8. Interaktywność ........................................................................... 339 Używanie klawiatury .....................................................................................................................340 Klasa KeyboardEvent ..............................................................................................................340 Klasa Keyboard ........................................................................................................................341 Klasa KeyLocation ...................................................................................................................343 Sterowanie statkiem kosmicznym w przestrzeni ................................................................344 Używanie myszy ............................................................................................................................352 MouseEvent .............................................................................................................................352 Obracanie i skalowanie statku kosmicznego .......................................................................353 MouseEvent3D ........................................................................................................................359 Metody dla zdarzeń MouseEvent3D ....................................................................................361 Malowanie na trójwymiarowych obiektach ........................................................................361 Rozmieszczanie obiektów na planszy ...................................................................................367 Podsumowanie ..............................................................................................................................384
10
Flash i ActionScript. Aplikacje 3D od podstaw
Rozdział 9. Kamery ...................................................................................... 387 Podstawy działania kamer w Away3D .......................................................................................388 Rejestrowanie sceny w Away3D ............................................................................................388 Podstawowe pojęcia i właściwości kamer w Away3D ........................................................389 Rodzaje soczewek ..........................................................................................................................406 Przykład ....................................................................................................................................406 AbstractLens ............................................................................................................................414 ZoomFocusLens i PerspectiveLens .......................................................................................415 SphericalLens ...........................................................................................................................415 OrthogonalLens .......................................................................................................................417 Rodzaje kamer ...............................................................................................................................418 Camera3D ................................................................................................................................418 TargetCamera3D .....................................................................................................................420 HoverCamera3D .....................................................................................................................421 SpringCam ...............................................................................................................................422 Przykładowe zastosowania kamer ...............................................................................................425 Kamera z perspektywy pierwszej osoby ...............................................................................425 Kamera z perspektywy osoby trzeciej ...................................................................................443 Kamera stosowana w grach typu action RPG .....................................................................451 Podsumowanie ..............................................................................................................................461
Rozdział 10. Dźwięk ..................................................................................... 465 Klasy obsługujące dźwięk .............................................................................................................465 Sound3D ...................................................................................................................................465 SimplePanVolumeDriver .......................................................................................................467 Przykłady zastosowań ...................................................................................................................468 Dźwięk 3D ................................................................................................................................468 Kontrolowanie obiektów dźwiękiem ....................................................................................477 Podsumowanie ..............................................................................................................................487
Rozdział 11. Tekst ........................................................................................ 489 Przygotowanie czcionki ................................................................................................................490 Sposoby wyświetlania tekstu ........................................................................................................492 Tekst płaski ..............................................................................................................................492 Tekst przestrzenny ..................................................................................................................496 Materiały dla tekstu ................................................................................................................497 Tekst jako BitmapData ...........................................................................................................498 Tekst w obiekcie MovieClip ..................................................................................................499 Deformowanie tekstu ....................................................................................................................499 Podsumowanie ..............................................................................................................................503
Rozdział 13. Więcej zabawy z 3D .................................................................. 533 Fizyka i kolizje ...............................................................................................................................534 Wykrywanie kolizji w Away3D .............................................................................................534 Dodatkowe silniki fizyki .........................................................................................................538 Rzeczywistość rozszerzona ...........................................................................................................541 FLARToolKit ...........................................................................................................................543 FLARManager .........................................................................................................................544 IN2AR .......................................................................................................................................545 Kontrolery ......................................................................................................................................546 Xbox Kinect .............................................................................................................................546 Wii Remote ..............................................................................................................................547 Stage3D ...........................................................................................................................................548 O przygotowaniu środowiska do Stage3D słów kilka ........................................................548 Co to jest Stage3D? ..................................................................................................................555 Gdzie umieszczony jest Stage3D? .........................................................................................556 Ograniczenia związane ze Stage3D .......................................................................................557 Jak korzystać ze Stage3D? ......................................................................................................558 Podstawowe pojęcia związane ze Stage3D ...........................................................................559 Podstawowy szkielet dla aplikacji korzystającej ze Stage3D .............................................563 AGAL ..............................................................................................................................................565 Co to jest AGAL? .....................................................................................................................566 Podstawowe komendy języka AGAL ...................................................................................566
12
Flash i ActionScript. Aplikacje 3D od podstaw Rejestry w języku AGAL ........................................................................................................567 Zastosowanie kodu AGAL wraz z ActionScript .................................................................570 Away3D 4.x ....................................................................................................................................578 Instalacja biblioteki .................................................................................................................579 Podstawowy przykład z kulą ziemską ..................................................................................579
Rozdział 1. Wprowadzenie Grafika trójwymiarowa to jedna z głównych dziedzin grafiki komputerowej. Jest powszechnie stosowana dzisiaj i stale rozwijana; ma jeden cel — jak najbardziej zadziwić widza i zacierać granice między światem rzeczywistym a wirtualnym. Technika oraz postęp w dziedzinie grafiki komputerowej często zapierają dech w piersiach. Od początku istnienia animowanych filmów twórcy stale podnoszą sobie poprzeczkę, nam, widzom, sprawiając frajdę podczas oglądania ich dzieł. Kinematografia to niejedyna dziedzina, w której grafika trójwymiarowa robi ogromne postępy. W produkcji gier komputerowych producenci również ciągle konkurują, tworząc coraz lepsze silniki 3D. Efekty ich pracy w większości przypadków budzą prawdziwy zachwyt. Dodatkowo rozwojowi grafiki w grach sprzyja taniejący sprzęt komputerowy. Postęp nie ogranicza się do konkretnych dziedzin i obejmuje nowe obszary. Jednym z nich stały się strony internetowe oraz gry. Sprzyjające warunki sprzętowe w połączeniu z kilkoma ścisłymi umysłami i pasją zaowocowały szeregiem nowych silników umożliwiających wyświetlanie trójwymiarowych obiektów w przeglądarkach internetowych. Między innymi za pomocą technologii Flash. W tym podrozdziale: Poznasz niektóre dostępne biblioteki 3D na platformę Adobe Flash Player. Poznasz podstawowe możliwości tych bibliotek. Dowiesz się, jakie czynniki brać pod uwagę przy wyborze biblioteki 3D do swoich projektów. Dowiesz się, skąd można pobrać przedstawione biblioteki. Nauczysz się importować bibliotekę Away3D do swoich projektów w różnych narzędziach.
14
Flash i ActionScript. Aplikacje 3D od podstaw
Dostępne biblioteki 3D Wraz z rozwojem technologii Flash przyszedł czas na wprowadzenie trzeciego wymiaru. W internecie dostępnych jest kilkanaście mniej lub bardziej znanych bibliotek służących do tworzenia aplikacji, w których grafika jest trójwymiarowa. Rozbieżność między silnikami jest całkiem spora, jeśli weźmiemy pod uwagę kilka aspektów. Po pierwsze, różnice w możliwościach. Licencje, z których korzystają, definiują obszary, w których można je zastosować. Po ustaleniu priorytetów projektu wybór właściwej biblioteki w zasadzie i tak zależy od upodobań programisty oraz doświadczenia, jakie zdobył we wcześniejszych projektach. Skoro interesujesz się tematem tworzenia aplikacji 3D w technologii Flash, warto byłoby, żebyś zapoznał się z kilkoma bibliotekami 3D i sam zgodnie ze swoimi upodobaniami i wiedzą w przyszłości wybierał silnik. W chwili obecnej, jeżeli nie masz takiego doświadczenia, przedstawię kilka bibliotek i wybiorę jedną z nich do omawiania późniejszych zagadnień. Kolejne decyzje będą należały do Ciebie.
Away3D
Away3D to jeden z najbardziej znanych silników 3D dostępnych na platformę Adobe Flash, jest też darmowy. Napisany został w języku ActionScript 3.0, umożliwia tworzenie aplikacji dla przeglądarek z zainstalowaną wtyczką Adobe Flash Player oraz Adobe AIR. Prace nad tą biblioteką rozpoczęli Alexander Zadorozhny i Rob Bateman w 2007 roku. Away3D ma wiele funkcji, dzięki którym można budować rozmaite aplikacje. Rysunek 1.1 przedstawia grę społecznościową Cafe World stworzoną przez firmę Zynga. W poniższych podpunktach wyszczególniono główne aspekty biblioteki Away3D 3.6: Ma kilkanaście wbudowanych obiektów 3D — od najprostszego punktu w przestrzeni do złożonego modelu żółwia morskiego (traktowany jest jako maskotka Away3D). Jako jedna z nielicznych ma w swoich zasobach kilka rodzajów kamer. Umożliwia oświetlanie i cieniowanie obiektów na kilka sposobów. Umożliwia pokrywanie obiektów różnymi materiałami. Między innymi kolorem oraz teksturą z zewnętrznych plików graficznych.
Rozdział 1. Wprowadzenie
15
Rysunek 1.1.
Gra społecznościowa Cafe World wykonana za pomocą Away3D
Pozwala na modyfikowanie powierzchni obiektów 3D przy tworzeniu ukształtowania terenu. Umożliwia generowanie niewidocznych ścieżek, które mogą posłużyć do wyznaczania toru przemieszczania obiektu 3D lub tworzenia wstęg i łańcuchów obiektów 3D. Obsługuje kilka formatów modeli wygenerowanych w znanych aplikacjach do grafiki 3D, między innymi: 3DS, MD2, COLLADA, OBJ. Umożliwia wyeksportowanie obiektu do klasy AS 3.0 plików AWD oraz OBJ. Umożliwia zwiększenie wydajności przy wykorzystaniu różnych metod wyświetlania obiektów. Ma wbudowane zdarzenia umożliwiające między innymi interakcje użytkownika z obiektami 3D. Pozwala na korzystanie z obiektów typu LOD (ang. Level of Detail — poziom szczegółów). Wraz z Away3D można stosować wiele innych znanych bibliotek napisanych w ActionScript 3.0. Aktualnie stabilną i oficjalną wersją jest Away3D 3.6. W wydaniu dla Adobe Flash Player 10 korzysta z ograniczonego dostępu do procesora GPU (ang. Graphics Processing Unit — procesor graficzny). Znaczna większość operacji wykonywanych jest za pomocą procesora CPU (ang. Central Processing Unit — procesor), przez co Away3D nie może w pełni korzystać z możliwości nowoczesnych kart graficznych — do czasu oficjalnej premiery Adobe Flash Player 11 i kolejnej odsłony silnika Away3D 4.0. Programiści nadal pracują nad wykorzystaniem Stage3D API
16
Flash i ActionScript. Aplikacje 3D od podstaw
(zwanego Molehill). Pozwoli to na wyświetlanie obiektów, łączna liczba trójkątów będzie liczona nie w tysiącach, lecz w milionach. Na rysunku 1.2 przedstawiono zrzut ekranu strony: http://www.nissan-stagejuk3d.com/, w której wykorzystano najnowszą wersję biblioteki Away3D. Rysunek 1.2.
Zrzut ekranu ze strony projektu Stage Juk3D
Away3D można pobrać ze strony: http://away3d.com/.
Alternativa3D
Alternativa3D to wytwór rosyjskiej firmy AlternativaPlatform. Biblioteka ta otrzymała wiele nagród za rozwiązania, które oferuje. Jest to niepodważalnie najlepszy płatny silnik. Wersji darmowej można używać jedynie do nauki i prywatnych niekomercyjnych projektów, podobnie jest w przypadku pozostałych omawianych silników. Alternativa3D została napisana do kreowania trójwymiarowych aplikacji na platformę Adobe Flash Player. Możliwości, które daje ta biblioteka, pozwalają na pisanie atrakcyjnych stron internetowych, serwisów oraz gier wieloosobowych. Flagowym produktem AlternativaPlatform jest gra Tanki Online. Rysunek 1.3 przedstawia zrzut ekranu z gry.
Rozdział 1. Wprowadzenie
17
Rysunek 1.3.
Zrzut ekranu z gry Tanki Online
Z kolei na rysunku 1.4 przedstawiono zrzut ekranu z prezentacji technicznej najnowszej wersji gry Tanki Online, która aktualnie tworzona jest na bazie silnika Alternativa3D 8. Rysunek 1.4.
Zrzut ekranu z gry Tanki Online bazującej na silniku Alternativa3D 8
Alternativa3D w wersji siódmej pozwala na wyświetlanie obiektów złożonych z 12 000 wielokątów. Jest to ogromna liczba w porównaniu z pozostałymi dostępnymi na rynku bibliotekami 3D, w tym Adobe Flash. Dzięki zaawansowanym algorytmom i optymalnemu wykorzystaniu zasobów silnik ten stoi na czele pod względem wydajności. Główne cechy biblioteki Alernativa3D:
18
Flash i ActionScript. Aplikacje 3D od podstaw
Ma szybki i efektywny render, umożliwia wyświetlanie obiektów złożonych nawet z 12 000 wielokątów. ♦ Umożliwia oświetlanie i cieniowanie obiektów na kilka sposobów. Ma intuicyjny dla użytkownika API. Hierarchia i właściwości obiektów 3D przypominają standardowe obiekty DisplayObject, znane z języka ActionScript 3.0. Umożliwia zastosowanie różnego rodzaju sortowania do wyświetlania obiektów — w zależności od potrzeb użytkownika. Umożliwia zwiększenie wydajności przy wykorzystaniu różnych metod wyświetlania obiektów w widoku. Ma kilka rodzajów kamer, które można wykorzystać w aplikacji jednocześnie. Ma wbudowane zdarzenia umożliwiające między innymi interakcje użytkownika z obiektami 3D. Pozwala na korzystanie z obiektów LOD. Ma wbudowany system do analizy i systematycznego redukowania błędów. Umożliwia korzystanie z modeli wyeksportowanych z innych programów. Obsługuje modele statyczne oraz dynamiczne, takie jak Collada. Aktualnie AlternativaPlatform pracuje nad kolejną wersją swojego silnika. W swojej ósmej odsłonie ma ona być przeznaczona dla platformy Adobe Flash Player 11 i obsługiwać Stage3D. Poza tym programiści AlternativaPlatform pracują nad autorskim systemem fizyki w ich silniku.
Papervision3D
Papervision3D jest kolejną obok Away3D darmową biblioteką 3D. Została napisana w języku ActionScript 3.0 przez kilkuosobową grupę (Carlos Ulloa, John Grden, Tim Knip, Andy Zupko) oraz programistów wspierających ten projekt. Przy użyciu Papervision3D można tworzyć proste i złożone projekty, na przykład strony internetowe, gry lub kampanie reklamowe. Do momentu kiedy
Rozdział 1. Wprowadzenie
19
Away3D stał się popularnym silnikiem, Papervision3D był wiodącą biblioteką 3D typu open source. Z wykorzystaniem Papervision3D powstało wiele interesujących i nagradzanych projektów — od stron internetowych znanych marek i osobistości po innowacyjne aplikacje i gry internetowe. Rysunek 1.5 przedstawia grę zręcznościową stworzoną dla koncernu Pepsi. Rysunek 1.5.
Zrzut ekranu z gry Pepsi Music Challenge
Warto wspomnieć, że Papervision3D nie korzysta z możliwości Adobe Flash Player 10. Tę lukę miał zapełnić projekt o nazwie PapervisionX, ale brak do tej pory jakichkolwiek informacji na temat tej wersji. Na pytanie, czy w przyszłości biblioteka Papervision3D będzie obsługiwała Adobe Flash Player 11 i Stage3D, nadal nie ma odpowiedzi. Główne cechy Papervision3D: Ma kilkanaście rodzajów obiektów 3D. Wyposażona jest w kilka rodzajów kamer. Umożliwia pokrywanie obiektów różnymi rodzajami materiałów. Obsługuje kilka formatów modeli wygenerowanych w znanych aplikacjach do grafiki 3D. Umożliwia zwiększenie wydajności przy wykorzystaniu różnych metod wyświetlania obiektów. Ma wbudowane zdarzenia umożliwiające między innymi interakcje użytkownika z obiektami 3D.
20
Flash i ActionScript. Aplikacje 3D od podstaw
Pozwala na korzystanie z metody LOD. Działa z innymi bibliotekami napisanymi w ActionScript 3.0, między innymi FLARToolkit lub JiglibFlash. Biblioteka Papervision3D dostępna jest do ściągnięcia pod adresem: http://code. google.com/p/papervision3d/.
FIVe3D
Bibliotekę FIVe3D napisał programista Mathieu Badimon w 2008 roku. Jest to darmowy silnik; wyświetlane w nim obiekty oraz animacje bazują na grafice wektorowej. FIVe3D składa się z kilkunastu klas. W porównaniu z innymi bibliotekami 3D nie jest to dużo, co nie oznacza, że za pomocą tego silnika nie można zbudować solidnych i przyjaznych dla oka aplikacji. Małe rozmiary są w istocie atutem FIVe3D, a możliwości, które oferuje, można sprawdzić na oficjalnej stronie biblioteki: http://five3d.mathieu-badimon.com/. Na rysunku 1.6 przedstawiono przykład trójwymiarowej klawiatury. Rysunek 1.6.
Przykład wirtualnej klawiatury wykonany w FIVe3D
Gdy przeglądamy przykłady FIVe3D, łatwo można poznać, do jakich projektów biblioteka nadaje się najlepiej. Jeżeli aplikacja wymaga umieszczenia obiektów MovieClip, Graphics oraz zwykłych tekstów w przestrzeni 3D, to FIVe3D jak najbardziej sprosta temu zadaniu bez zbędnego obciążania aplikacji dodatkowymi klasami. Poniżej wypisano główne cechy tego silnika. Nie jest ich wiele, ale wpływa to na korzyść tej biblioteki: Umożliwia łatwe osadzenie w przestrzeni 3D obiektów MovieClip oraz Graphics.
Rozdział 1. Wprowadzenie
21
Nie wymaga konfigurowania widoków oraz kamer. Głównym komponentem jest scena, na której dodawane są elementy. Umożliwia tworzenie trójwymiarowych napisów oraz obiektów zawsze zwróconych w stronę kamery. Pozwala na animowanie i modyfikowanie obiektów. Umożliwia odtwarzanie filmów FLV oraz wyświetlanie bitmap w przestrzeni 3D. Umożliwia korzystanie z innych bibliotek przeznaczonych dla języka ActionScript 3.0, na przykład JiglibFlash.
Flare3D
Flare3D jest częścią całego pakietu o nazwie Flare3DStudio. Jest to środowisko służące głównie do tworzenia gier i animacji na platformę Adobe Flash Player. Dzięki dostępnym narzędziom, budowanie podstaw aplikacji we Flare3D — w porównaniu z Away3D czy też Papervision3D — jest prostsze i bardziej intuicyjne. Nadal rozwijany przez ekipę firmy Flare3D silnik będzie wspierał platformę Adobe Flash Player 11 i komponent Scene3D. W chwili obecnej proces ten jest w fazie testów. Na rysunku 1.7 umieszczono zrzut ekranu z gry Almax Race stworzonej za pomocą Flare3DStudio. Rysunek 1.7.
Zrzut ekranu z gry Almax Race
Z kolei na rysunku 1.8 przedstawiono zrzut ekranu z gry Yellow Planet wykonanej za pomocą Flare3D 2.0.
22
Flash i ActionScript. Aplikacje 3D od podstaw
Rysunek 1.8.
Zrzut ekranu z gry Yellow Planet
Najważniejsze cechy biblioteki Flare3D: Autorskie wtyczki umożliwiają współpracę z zewnętrznymi programami. Przykładem może być plugin do programu 3DSMax, który pozwala na stosowanie w nim tekstur pochodzących z Flare3D. Ma kilka wbudowanych obiektów 3D, między innymi obiekt lustra, w którym odbija się otaczające go środowisko. Umożliwia korzystanie ze statycznych i animowanych modeli stworzonych w programach typu 3DSMax. Pozwala na animowanie i modyfikowanie obiektów. Umożliwia oświetlanie i cieniowanie obiektów na kilka sposobów. Umożliwia pokrywanie obiektów różnymi materiałami, między innymi kolorem oraz teksturą z zewnętrznych plików graficznych. Umożliwia malowanie na powierzchni obiektów 3D. Umożliwia korzystanie z innych bibliotek przeznaczonych dla języka ActionScript 3.0, takich jak Stardust, FLARToolkit czy JiglibFlash. Ma bogaty zestaw narzędzi ułatwiających pracę nad aplikacją. Aby móc ściągnąć Flare3D i korzystać z niego, trzeba zarejestrować się na stronie internetowej producentów: http://www.flare3d.com/. Korzystanie z biblioteki po okresie próbnym wymaga wykupienia licencji.
Rozdział 1. Wprowadzenie
23
Sandy3D
Biblioteka Sandy3D to jeden z najwcześniejszych darmowych silników 3D pisanych na platformę Adobe Flash Player. Pierwszą wersję stworzył programista Thomas Pfeiffer w 2005 roku. W następnych latach nad rozwojem tego projektu pracowała już większa liczba osób. W swoich początkowych fazach Sandy3D przeznaczony był do użytku w języku ActionScript 2.0. Dopiero w kolejnych wersjach wraz z powstaniem ActionScript 3.0 przepisano kod Sandy3D. Wraz z rozwojem silników Papervision3D oraz Away3D silnik Sandy3D zszedł na drugi plan. Mimo to prace trwały nad nim do końca 2010 roku, a efekty można zobaczyć na rysunku 1.9. Przedstawia ona kadr z gry Logoleptic napisanej w Sandy3D. Rysunek 1.9.
Zrzut ekranu z gry Logoleptic
Mimo mniejszego zainteresowania tą biblioteką ma ona podstawowe i porównywalne z innymi właściwości. Ważniejsze cechy wypisano poniżej: Ma kilka wbudowanych obiektów 3D. Umożliwia korzystanie z kilku kamer jednocześnie. Umożliwia oświetlanie i cieniowanie obiektów na kilka sposobów. Umożliwia pokrywanie obiektów trzema głównymi materiałami: kolorem, bitmapą oraz plikiem wideo.
24
Flash i ActionScript. Aplikacje 3D od podstaw
Obsługuje kilka formatów modeli wygenerowanych w znanych aplikacjach do grafiki 3D, między innymi 3DS, MD2, COLLADA. Umożliwia zwiększenie wydajności przy wykorzystaniu różnych metod wyświetlania obiektów. Ma wbudowane zdarzenia umożliwiające między innymi interakcje użytkownika z obiektami 3D. Umożliwia korzystanie z innych bibliotek przeznaczonych dla języka ActionScript 3.0, takich jak AS3Dmod, FLARManager lub WOW. Biblioteka Sandy3D dostępna jest do ściągnięcia pod adresem: http://www. flashsandy.org.
Sophie3D
Sophie3D to niewielka biblioteka 3D. Jest niezwykle szybka i pozwala na wyświetlanie obiektów złożonych nawet z 80 000 wielokątów. Niewielki jej rozmiar oraz możliwość wyświetlania skomplikowanych modeli idealnie pasują do prezentacji produktów różnych marek w przestrzeni trójwymiarowej na stronach internetowych lub prezentacjach. Na rysunku 1.10 pokazano przykład zastosowania Sophie3D w promocji modelu samochodu marki Mini. Biblioteka ta w wersji podstawowej wymaga wyświetlania logo twórców oraz pozwala na korzystanie z Sophie3D jedynie w projektach niekomercyjnych. Licencja na wersję Sophie3D PRO zwalnia z obowiązku wyświetlania logo i pozwala na użycie biblioteki na wskazanej domenie. Z kolei licencja Sophie3D PRO FULL pozwala klientowi na swobodne korzystanie z silnika we wszystkich jego projektach. Aktualnie trwają prace nad wersją Sophie3D dla Adobe Flash Player 11. Na chwilę obecną silnik ma następujące cechy: Umożliwia import modeli w formacie Collada oraz Wavefront OBJ. Umożliwia kompresję plików do szybszego ładowania zawartości. Umożliwia poruszanie kamery oraz obiektu za pomocą zewnętrznych bibliotek, na przykład TweenMax.
Rozdział 1. Wprowadzenie
25
Rysunek 1.10. Zrzut ekranu z kreatora Mini ze strony http://www.miniby.me/
Pozwala na dodanie nieskończonej liczby źródeł światła na scenie. Pozwala na wykorzystanie modeli złożonych nawet z 80 000 wielokątów. Umożliwia zwiększenie wydajności przy wykorzystaniu różnych metod wyświetlania obiektów. Umożliwia wyświetlanie trójwymiarowej sceny z użyciem stereoskopicznych okularów. Umożliwia wyeksportowanie sceny 3D do obrazu. Przed pobraniem biblioteki Sophie3D wymagane jest podanie adresu e-mail na stronie: http://www.sophie3d.com. Po weryfikacji tego adresu e-mail wysyłany jest specjalny link, pod którym można znaleźć komponent Sophie3D.
Wybór biblioteki 3D W poprzednim podrozdziale krótko przedstawiłem poszczególne biblioteki 3D dostępne na dzień dzisiejszy. Mają one wiele wspólnych cech, ale też różnią się od siebie możliwościami. Niektóre są wręcz przeznaczone do konkretnych celów. Przy wyborze biblioteki musisz dobrze zaplanować projekt oraz wyznaczyć sobie cele, które chcesz osiągnąć, korzystając z silnika 3D. Dobrze byłoby, gdybyś zapoznał się z każdą z wymienionych bibliotek. To znacznie pomoże Ci w wyborze odpowiedniej przy następnym projekcie. Istotną kwestią jest również to, czy
26
Flash i ActionScript. Aplikacje 3D od podstaw
przy realizacji projektu będziesz mógł skorzystać z płatnych silników takich jak Alternativa3D. Pamiętaj również, że pisanie aplikacji 3D ma sprawiać w większej mierze radość niż bóle głowy. Dlatego wybieraj biblioteki, które najbardziej przypadły Ci do gustu, a w wolnych chwilach eksperymentuj i poznawaj nowe. Do realizacji przykładów w tej książce wybrałem bibliotekę Away3D, ponieważ jest ona jednym z najpopularniejszych silników 3D. Przede wszystkim jest darmowym i stale rozwijanym projektem pozwalającym na kreowanie prostych i skomplikowanych aplikacji 3D. Książkę tę potraktuj jako przewodnik, który zapozna Cię z zasadami oraz sposobami tworzenia aplikacji 3D. Zaczynając od podstaw, dowiesz się, jaką wersję biblioteki i w jaki sposób pobrać z internetu. W kolejnych krokach przedstawię, jak zintegrować Away3D z poszczególnymi programami: Adobe Flash, FlashDevelop oraz Flash Builder. Gdy opanujesz tę część i będziesz potrafił skonfigurować silnik 3D w swoich narzędziach, przejdziemy do poznawania podstaw tworzenia aplikacji w Away3D. W pierwszej kolejności poznamy fundamenty każdej z tego typu aplikacji. Dowiesz się, czym są widok, scena, jakie rodzaje kamer ma Away3D. Będziesz wiedział, jak należy rozumieć stworzoną przestrzeń oraz jak należy się w niej poruszać. Poznasz różnice między układami współrzędnych oraz punktami odniesienia w poszczególnych elementach aplikacji. Gdy poznasz najbardziej podstawowe części, pójdziemy krok dalej i będziemy poszerzali wiedzę o ciekawsze i bardziej złożone komponenty. Różnego rodzaju obiekty 3D, materiały obiektów, animowanie modeli — to tylko niektóre z tematów, jakie poruszymy. Każdy z działów zawierać będzie przykłady ilustrujące implementację omawianych zagadnień. Niektóre z tych przykładów mogą zawierać elementy, których jeszcze nie poznałeś we wcześniej przeczytanych rozdziałach. Nie przejmuj się tym, Twoim zadaniem będzie skupienie się na aktualnie omawianym temacie. Po zapoznaniu się z komponentami silnika Away3D nauczysz się kilku sposobów poprawiania wydajności działania aplikacji. Poza tym połączymy Away3D z innymi bibliotekami, aby otrzymać nowe ciekawe możliwości, takie jak chociażby rzeczywistość rozszerzona bądź system fizyki.
Pobieranie silnika Away3D Zanim zaczniesz się uczyć Away3D oraz tworzenia aplikacji 3D, musisz zdobyć potrzebne do tego narzędzia. Bibliotekę Away3D można ściągnąć z kilku źródeł w różnych wersjach. Na początku może się to wydawać kłopotliwe, jednak po przeczytaniu tego podrozdziału sprawy się wyjaśnią. Dowiesz się, jakie są rodzaje silników Away3D oraz skąd można pobrać wybraną bibliotekę.
Rozdział 1. Wprowadzenie
27
Away3D FP9, FP10 czy może FP11? Którą z wersji wybrać? Away3D w chwili pisania tych słów udostępnia wczesną wersję beta silnika o numeracji 4.0, która nie ma jeszcze wszystkich komponentów oraz pełnej stabilizacji w działaniu, ale pozwala doświadczonym użytkownikom tego silnika sprawdzić jego potencjalnie nowe możliwości oraz poszerzać swoje umiejętności. Nie jest to wersja oficjalna, dlatego można się spodziewać jeszcze wielu zmian. Jedno jest pewne — będzie ona w pełni kompatybilna z klasą Stage3D, która przede wszystkim wykorzystuje GPU, a nie CPU, jak to było w poprzednich wersjach. Do czasu premiery nowej odsłony programu Adobe Flash Player i oficjalnego wsparcia ze strony przeglądarek Away3D 4.0 beta zostaje w obszarze badań, testów i rozwoju, co nie oznacza, że po przeczytaniu tej książki nie będzie warto po niego sięgnąć. Wręcz przeciwnie, mając większe pole do popisu i wiedzę z tej książki, śmiało będziesz mógł próbować swoich sił na nowym terenie. W ostatnim rozdziale „Więcej zabawy z 3D” stworzymy prosty przykład z zastosowaniem Away3D 4.0. Dziesiąta odsłona wtyczki Adobe Flash Player wprowadziła wiele ulepszeń, w tym przeznaczonych dla silników 3D. Stało się tak z uwagi na wzrost popularności tego typu stron i aplikacji. Poprzednia wersja nakładała duże ograniczenia w możliwości wyświetlania obiektów 3D i zarządzania pamięcią. Rozwój wymusił powstanie nowej wersji, która wręcz podwoiła możliwości starej dziewiątki. Away3D w wersji 3.6.0 przeznaczone jest do odtwarzaczy Flash Player 10 i nie może być stosowane w niższych jego wersjach. Jeżeli z jakichś powodów Twój projekt będzie wymagał dostosowania się do starszych odsłon wtyczki Adobe Flash Player, będziesz musiał skorzystać z Away3D 2.5.2, ostatniej odsłony przeznaczonej dla Adobe Flash Player 9. Z uwagi na to, że aktualnie Away3D 3.6.0 jest oficjalną stabilną wersją, wszystkie elementy tego silnika i przytoczone przykłady kodów źródłowych bazują na tej wersji.
Pobieranie Away3D 3.6.0 z Away3D.com Źródła biblioteki Away3D można pobrać z oficjalnej strony projektu: http:// away3d.com/download/. Na pierwszym planie pojawi się dział biblioteki w wersji Away3D 4.0. Żeby pobrać wersję 3.6.0, należy: 1. Po prawej stronie w dziale Releases kliknąć link show, jeżeli nie jest wyświetlona lista dostępnych wersji. 2. Kliknąć link 3.6.0.
28
Flash i ActionScript. Aplikacje 3D od podstaw
W nowo otwartej stronie są linki do plików ZIP zawierających źródła biblioteki, przykłady wraz z plikami programu Flash, przykłady kodów ActionScript 3.0 oraz dokumentacji. Klikając na link Source files: Download, pobierzesz źródła biblioteki w postaci pliku ZIP. Pod linkami znajduje się również informacja o alternatywnych źródłach dostępu do biblioteki.
Pobieranie Away3D 3.6.0 z github.com Źródła Away3D 3.6.0 dostępne są również w znanym serwisie GitHub pod adresem: https://github.com/away3d/. Po wejściu na stronę zauważysz kilkanaście linków do różnych źródeł bibliotek oraz przykładów do nich. Nas interesuje link o nazwie away3d-core-fp10. Po załadowaniu strony pojawi się lista z folderem o nazwie src. Aby pobrać wszystkie pliki, należy wykonać następujące kroki: 1. Kliknąć na przycisk Downloads, który mieści się w górnym panelu po prawej stronie. 2. W otwartym oknie wybrać rodzaj pliku, na przykład ZIP, i kliknąć Download.
Pobieranie Away3D 3.6.0 z SVN Repozytorium SVN biblioteki Away3D umożliwia szybki dostęp do najnowszej wersji tego silnika. Plusem korzystania z repozytorium jest stały dostęp do najbardziej aktualnej wersji plików. Dla przykładu: jeżeli zanotowano jakiś błąd w działaniu konkretnej klasy, można się spodziewać, że zostanie on rozwiązany i automatycznie udostępniony użytkownikom (pomijając okres wyczekiwania, aż autor podmieni pliki na głównym serwerze). Istnieje też druga strona medalu. W przypadku gdy zastosujemy pewne rozwiązania w naszej aplikacji i zaktualizujemy bibliotekę z repozytorium, może się okazać, że nowa wersja nie zawiera klas bądź metod, których wcześniej używaliśmy. Aby pobrać bibliotekę poprzez SVN, trzeba skorzystać z dowolnego klienta SVN i jako źródło repozytorium podać następujący adres: http://away3d.googlecode.com/ svn/trunk/fp10/Away3D/src. 1. Jeżeli nie masz zainstalowanego klienta SVN, możesz skorzystać z programu TortoiseSVN. W poniższych krokach omówiony został sposób jego instalacji oraz zastosowanie przy pobieraniu biblioteki Away3D. Jeżeli nie masz klienta TortoiseSVN, należy go pobrać ze strony: http://tortoisesvn.net/downloads.html.
Rozdział 1. Wprowadzenie
29
2. Po zakończeniu pobierania uruchom instalator i stosując standardowe ustawienia, zainstaluj w wybranej lokalizacji. 3. Po zakończeniu instalacji zresetuj komputer. Teraz, gdy klient TortoiseSVN został zainstalowany, możesz przystąpić do pobierania biblioteki Away3D. 1. Stwórz nowy folder o dowolnej nazwie w wybranym miejscu. Dla przykładu może być to folder o nazwie libs w głównym katalogu Twojego projektu. 2. Kliknij prawym przyciskiem myszy na utworzonym katalogu i wybierz opcję SVN Checkout…, tak jak to pokazano na rysunku 1.11. Rysunek 1.11.
Przedstawia wybór opcji SVN Checkout
3. Otworzy się nowe okno Checkout. W tym oknie w polu URL of repository: należy wpisać następujący adres: http://away3d.googlecode.com/svn/ trunk/fp10/Away3D/src, a w polu Checkout directory: miejsce docelowe dla biblioteki. Po wypełnieniu tych pól kliknij przycisk OK. Na rysunku 1.12 pokazano okno ustawień pobierania danych repozytorium. 4. Pojawi się nowe okno, które zawiera dziennik aktualnie pobieranych zasobów repozytorium. Jeżeli wszystko przebiegło pomyślnie, to na samym dole okna ujrzysz napis Completed. Oznacza to, że biblioteka jest gotowa do użytku. Kliknij przycisk OK i zamknij okno. Na rysunku 1.13 przedstawiono okno procesu pobierania plików.
30
Flash i ActionScript. Aplikacje 3D od podstaw
Rysunek 1.12.
Przedstawia ustawienia pobierania danych repozytorium
Rysunek 1.13.
Proces pobierania plików
5. Na ikonach pobranych folderów pojawi się zielony znaczek symbolizujący, że zawartość jest aktualna, tak jak to pokazano na rysunku 1.14. Rysunek 1.14.
Zsynchronizowane foldery biblioteki Away3D
Rozdział 1. Wprowadzenie
31
Instalacja biblioteki Away3D Konfiguracja w Adobe Flash CS4 i CS5 Produkty Adobe Flash to pierwotne narzędzia do tworzenia aplikacji dla Adobe Flash Player. Korzystając z tego programu, można tworzyć elementy wizualne aplikacji, a za pomocą wbudowanego edytora i debuggera pisać, a zarazem kontrolować kod ActionScript 3.0. W następujących krokach przedstawiono, jak należy zintegrować bibliotekę Away3D ze środowiskiem Adobe Flash w wersjach CS4 i CS5. 1. Po włączeniu programu Adobe Flash stwórz nowy plik w ActionScript 3.0, wybierając opcję ActionScript 3.0, tak jak to pokazano na rysunku 1.15. Rysunek 1.15.
Przedstawia okno powitalne w programie Adobe Flash Professional CS5 z zaznaczoną opcją tworzenia projektu ActionScript 3.0
2. Po otwarciu okna wybierz zakładkę File w górnym menu. Następnie kliknij opcję Publish Settings… z listy. Alternatywnie można użyć kombinacji klawiszy Ctrl+Shift+F12. Na rysunku 1.16 pokazano wybór opcji Publish Settings… 3. Kliknij w zakładkę Flash, a następnie przycisk Settings…, jak pokazano na rysunku 1.17. 4. W otwartym oknie wybierz zakładkę Source path. Następnie kliknij ikonkę + i wpisz bezpośrednią względem projektu ścieżkę do biblioteki. Możesz również kliknąć ikonę folderu i wskazać lokalizację z drzewa katalogów. Gdy umieścisz już odwołanie do Away3D, kliknij przycisk OK i zamknij to okno. Na rysunku 1.18 pokazano dodawanie ścieżki do potrzebnych bibliotek. 5. Po wykonaniu wszystkich kroków zapisz ustawienia, klikając przycisk OK w oknie Publish Settings.
32
Flash i ActionScript. Aplikacje 3D od podstaw
Rysunek 1.16.
Wybór opcji ustawień publikacji projektu
Rysunek 1.17.
Uruchamianie ustawień dla języka ActionScript 3.0
Rysunek 1.18.
Dodawanie ścieżki z potrzebnymi bibliotekami
Konfiguracja we FlashDevelop FlashDevelop jest darmowym edytorem kodu napisanym przez członków FlashDevelop.org. Dzięki Adobe Flex SDK, możliwe jest pisanie w nim kodu w językach ActionScript 2.0, ActionScript 3.0 oraz MXML. Korzystając w tym edytorze z wieloplatformowego języka haXe, można również tworzyć projekty
Rozdział 1. Wprowadzenie
33
oparte na językach JavaScript, PHP czy też C++. FlashDevelop dzięki możliwościom, jakie oferuje, jest bardzo dobrą alternatywą dla edytora kodu wbudowanego w programie Adobe Flash. Jeżeli do realizacji przykładów z tej książki oraz przyszłych projektów związanych z biblioteką Away3D zamierzasz korzystać z programu FlashDevelop, to musisz wykonać kilka czynności. Po pierwsze, upewnij się, że masz zainstalowane środowisko Flex SDK. Jeżeli nie, to pobierz aktualną wersję ze strony: http://opensource. adobe.com/wiki/display/flexsdk/Flex+SDK. Jeżeli masz zainstalowane środowisko Flex SDK, to upewnij się, że w edytorze FlashDevelop przypisane jest poprawne odwołanie do niego. Czynność tę wykonuje się w następujących krokach: 1. Wejdź w zakładkę Tools w górnym menu. Następnie wybierz opcję Program Settings… Możesz również od razu wcisnąć klawisz F10. Na rysunku 1.19 pokazano uruchomienie konfiguracji projektu w programie FlashDevelop. Rysunek 1.19.
Uruchamianie konfiguracji projektu w programie FlashDevelop
2. W oknie Settings z listy po lewej stronie wybierz opcję AS3Context, a następnie poszukaj w prawej kolumnie wiersza o nazwie Installed Flex SDKs. Jeżeli to pole jest puste, musisz na nie kliknąć i wybrać katalog, w którym zainstalowałeś środowisko Flex SDK, tak jak to pokazano na rysunku 1.20. Po wykonaniu powyższych kroków trzeba kliknąć przycisk Close. Wszystkie zmiany zostaną zapisane. Teraz możesz swobodnie dodać bibliotekę Away3D do zasobów projektu w programie FlashDevelop. 1. W pierwszej kolejności kliknij na ikonę Properties w panelu Project. Możesz również kliknąć przycisk Project w górnym menu i wybrać opcję Properties… z listy, tak jak to pokazano na rysunku 1.21.
34
Flash i ActionScript. Aplikacje 3D od podstaw
Rysunek 1.20. Ustawienia lokalizacji środowiska Flex SDK
Rysunek 1.21. Wybór ustawień projektu
2. W oknie Properties należy wybrać zakładkę Classpaths, a w niej kliknąć przycisk Add Classpath… Z drzewa katalogów wybierz lokalizację, która zawiera bibliotekę Away3D. Na rysunku 1.22 pokazano okno z dołączonymi lokalizacjami plików projektu. 3. Po wykonaniu tych czynności należy kliknąć OK w oknie Properties. Od tej chwili można korzystać z biblioteki Away3D. Dostępne będą również podpowiedzi i podświetlanie składni.
Rozdział 1. Wprowadzenie
35
Rysunek 1.22.
Lista lokalizacji, w których umieszczone są potrzebne źródła
Konfiguracja w Adobe Flash Builder 4 Adobe Flash Builder, wcześniej znany jako Adobe Flex Builder, jest środowiskiem bazującym na platformie Eclipse. Służy do tworzenia aplikacji typu RIA, które opierają się na technologii Adobe Flash. Znając język ActionScript 3.0 oraz MXML, można stworzyć za pomocą tego edytora złożone aplikacje. Dużo przykładów krążących w sieci wykonanych jest za pomocą tego edytora, dlatego warto wiedzieć, jak należy zintegrować bibliotekę Away3D z tym środowiskiem. Adobe Flash Builder 4 oraz 4.5 w standardzie korzystają z Flex SDK 3.6, 4.5 i 4.5.1. Wszystkie wymienione współpracują z platformą Adobe Flash Player 10. Jeżeli masz wcześniejszą wersję Flash Builder, upewnij się, że korzystasz z aktualnego Flex SDK. Pliki Flex SDK można pobrać ze strony: http://opensource.adobe.com/ wiki/display/flexsdk/Flex+SDK. Integracja biblioteki Away3D z edytorem Adobe Flash Builder przebiega następująco: 1. Pierwszym krokiem jest stworzenie projektu i wybranie odpowiedniego Flex SDK. W tym celu wybierz opcję File w górnym menu, a następnie New/Flex Project, tak jak to pokazano na rysunku 1.23. 2. W oknie New Flex Project wpisz nazwę projektu i wybierz wersję Flex SDK. Ważne jest, aby wersja ta obsługiwała Adobe Flash Player 10, na którym bazuje Away3D 3.6.0. Jeżeli w edytorze nie ma dodanego odpowiedniego Flex SDK, możesz dodać go manualnie, klikając łącze Configure Flex SDKs… Na rysunku 1.24 pokazano wybór wersji środowiska SDK.
36
Flash i ActionScript. Aplikacje 3D od podstaw
Rysunek 1.23. Tworzenie nowego projektu Flex Rysunek 1.24.
Wybóri konfiguracja środowiska Flex SDK
3. Po wpisaniu nazwy projektu oraz wybraniu środowiska Flex SDK kliknij przycisk Finish w oknie New Flex Project. Edytor zacznie tworzyć całą strukturę Twojego projektu. 4. Zaznacz trzy katalogi z pobranych źródeł biblioteki Away3D: away3d, nochump i wumedia. Skopiuj je, wciskając kombinację klawiszy Ctrl+C. 5. W oknie Package Explorer należy wybrać katalog src, kliknąć prawym przyciskiem myszy i wybrać opcję Paste. Można również użyć kombinacji klawiszy Ctrl+V. Na rysunku 1.25 pokazano opcję kopiowania źródeł biblioteki. Rysunek 1.25.
Kopiowanie potrzebnych bibliotek
6. Po krótkiej chwili zawartość katalogu src projektu powinna wyglądać tak, jak pokazano na rysunku 1.26.
Rozdział 1. Wprowadzenie
37
Rysunek 1.26.
Poprawnie skopiowane biblioteki do naszego projektu
Podsumowanie Po zapoznaniu się z tym rozdziałem wiemy już, za pomocą jakich bibliotek możemy aplikacje Flash wprowadzić w trzeci wymiar. Każdy z przedstawionych tutaj silników ma swoje właściwości wyróżniające go spośród innych. Sprawia to, że niektóre z nich przeznaczone są do konkretnych celów. Dla przykładu biblioteka Sophie3D stosowana jest głównie w trójwymiarowych prezentacjach szczegółowych modeli 3D. Poznaliśmy część najpopularniejszych bibliotek 3D stosowanych w technologii Adobe Flash. Niektóre z nich nadal są rozwijane, a nad innymi zaprzestano prac lub znacznie zwolniono tempo ich rozwoju. Poza wymienionymi silnikami istnieją jeszcze inne, takie jak Minko, Yogurt3D czy też ND3D. Nieustannie powstają nowe, coraz bardziej zaawansowane narzędzia służące do tworzenia aplikacji 3D. Co ciekawe, firma Epic Games zadeklarowała możliwość obsługi silnika Unreal Engine 3 dla Adobe Flash Player 11. Można przypuszczać, że przez coraz większą popularność gier przeglądarkowych technologia Adobe Flash będzie niedługo ukierunkowana tylko w stronę produkcji aplikacji 3D. Silniki Away3D, Papervision3D oraz Sandy3D są w pełni darmowymi bibliotekami. Pozostałe wymagają wykupienia licencji do użytku komercyjnego. Wyjaśniliśmy w tym rozdziale również sposoby integracji Away3D z różnymi narzędziami służącymi do tworzenia aplikacji opartych na technologii Adobe Flash. Wiesz już również, czym należy się kierować przy wyborze biblioteki oraz dlaczego w tej książce korzysta się z Away3D.
38
Flash i ActionScript. Aplikacje 3D od podstaw
Rozdział 2. Podstawy biblioteki Away3D Skoro czytasz te słowa, wiesz już, jak należy zaimportować silnik 3D do projektu. Zanim jednak zaczniesz tworzyć w pełni profesjonalne aplikacje z użyciem Away3D, musisz zapoznać się z podstawami tej biblioteki oraz zasadami tworzenia aplikacji trójwymiarowych w technologii Flash. W tym rozdziale zajmiemy się kluczowymi zagadnieniami, których znajomość pozwoli Ci stworzyć aplikacje na poziomie podstawowym. Czytając ten rozdział, dowiesz się: Jakie są podstawowe komponenty biblioteki Away3D, niezbędne do stworzenia aplikacji 3D. Jak interpretowana jest przestrzeń trójwymiarowa w Away3D. Co sprawia, że widzimy to, co widzimy, w aplikacjach 3D. Jakie właściwości oraz metody mają kluczowe klasy. Czym jest kontener w przestrzeni trójwymiarowej. Jak umieszcza się obiekty w konkretnym miejscu na scenie. Jakie rozróżniamy przestrzenie układów współrzędnych w Away3D. Jak wygląda podstawowa budowa aplikacji z użyciem biblioteki Away3D.
Podstawowe komponenty Każda biblioteka składa się z podstawowych i rozszerzających klas. W Away3D podstawowymi są te, które dają możliwość wyświetlenia trójwymiarowego obrazu. Do tego celu służą następujące klasy i komponenty: View3D. Camera3D.
40
Flash i ActionScript. Aplikacje 3D od podstaw
Scene3D. ObjectContainer3D. Object3D. Każdy z tych składników spełnia konkretne zadanie, udostępnia równocześnie pozostałym komponentom potrzebne im informacje. W szczególności klasy widoku, kamery i sceny tworzą jedną całość, którą możemy obserwować na naszych ekranach. W tym podrozdziale poznamy wszystkie te klasy. Zacznijmy od widoku.
View3D Dosłownie i w przenośni widok jest oknem na świat w przestrzeni trójwymiarowej. Stwierdzenie to może wydawać się nieco zawiłe, ale rysunek 2.1 powinien ułatwić zrozumienie pojęcia widoku. Rysunek 2.1.
Wizualizacja pojęcia widoku w bibliotece Away3D
W bibliotekach 3D takich jak Away3D widok to prostokątna powierzchnia przedstawiająca wybraną część trójwymiarowej sceny. Należy traktować ją jak obszar roboczy programu Flash lub maskę warstw z obiektami. W Away3D widok reprezentuje klasa View3D, która znajduje się w pakiecie away3d.containers. Tak jak inne obiekty w programie Flash, View3D dodaje się poprzez użycie metody addChild(). To oznacza, że należy traktować widok jak każdy inny element stosowany w aplikacjach Flash. Pozycję widoku zmienia się za pomocą podstawowych właściwości x i y. Przeważnie widok umieszcza się w centrum okna, stosując współrzędne stage.stageWidth*.5 na osi X oraz stage.stageHeight*.5 na osi Y.
Rozdział 2. Podstawy biblioteki Away3D
41
Tworzenie i dodawanie widoku odbywa się następująco: var view:View3D = new View3D( { x:stage.stageWidth*.5, y:stage.stageHeight*.5} ); addChild(view);
Miejsce, w którym należy zapisać powyższe dwie linijki kodu, zależy od struktury całej aplikacji, przeważnie obiekt klasy View3D tworzony jest w głównej klasie aplikacji. Jeżeli poza biblioteką Away3D stosujemy również wzorzec projektowy, na przykład MVC (ang. Model View Controller – Model Widok Kontroler), to obiekt klasy View3D powinien być tworzony w klasie odpowiedzialnej za generowanie i wyświetlanie elementów graficznych aplikacji. Standardowo widok zajmuje całą przestrzeń okna Flash. Nie można zmienić jego wymiarów, stosując standardowe właściwości wysokości i szerokości. Jeżeli trzeba zmienić wymiary wyświetlania trójwymiarowej sceny, należy skorzystać ze specjalnych metod ograniczania widoku, ale tym tematem zajmiemy się w rozdziale 12. „Optymalizacja”. W aplikacji nie musimy ograniczać się do jednego widoku, możemy stworzyć ich więcej. Jedną z sytuacji, w których istnieje taka potrzeba, jest prezentowanie obiektu z różnych perspektyw w tym samym czasie. Aby wyświetlić scenę oraz zawarte w niej trójwymiarowe obiekty, trzeba użyć metody o nazwie render(), dostępnej w klasie View3D. Pojedyncze wywołanie tej metody zadziała jak zrobienie zdjęcia, dlatego do uzyskania animacji należy ją uruchamiać, bez przerwy stosując obiekt klasy Timer bądź zdarzenie Event.ENTER_FRAME. W przykładach zawartych w tej książce do wywoływania metody render() będziemy wykorzystywali wspomniane zdarzenie. Przy okazji pamiętaj o ustawieniu w projekcie aplikacji odpowiedniej liczby klatek wyświetlanych na sekundę. W naszych przykładach wartość FPS ustawimy na 30 klatek na sekundę. Co prawda stosowanie dwa razy większej prędkości sprawia, że animacja staje się płynniejsza, ale z drugiej strony od procesora wymaga to znacznie większej liczby wykonywanych operacji. Wartość FPS powinna zależeć od stosowanej wersji biblioteki Away3D oraz od samej aplikacji, tak aby była ona jak najbardziej optymalna. Do tematu wyboru liczby FPS powrócimy w rozdziale 12. „Optymalizacja”. Tabele 2.1 i 2.2 zawierają najważniejsze właściwości oraz metody obiektu klasy View3D. Tabela 2.1. Właściwości klasy View3D
Nazwa
Rodzaj
Wartość domyślna Opis
background
Sprite
Obiekt typu Sprite traktowany jako tło sceny
camera
Camera3D
Standardowa kamera typu Camera3D, używana do wyświetlania sceny
clipping
Clipping
Wycięty obszar wyświetlania sceny
42
Flash i ActionScript. Aplikacje 3D od podstaw
Tabela 2.1. Właściwości klasy View3D (ciąg dalszy)
Nazwa
Rodzaj
Wartość domyślna Opis
forceUpdate
Boolean
false
foreground
Sprite
Obiekt typu Sprite nałożony na wyświetlaną scenę
mouseEvents
Boolean
Włącza i wyłącza możliwość korzystania ze zdarzeń myszki
mouseZeroMove
Boolean
Wymusza, by zdarzenia mouseMove były uruchamiane nawet wtedy, gdy kursor nie zmienia swojej pozycji
overlay
Sprite
Obiekt typu Sprite wyświetlany na samym wierzchu sceny
renderer
Renderer
scene
Scene3D
stats
Boolean
statsPanel
Stats
Określa, czy widok ma być stale odświeżany, czy ma odświeżać tylko to, co zostało zmienione
Renderer.BASIC
Obiekt typu Renderer definiuje sposób wyświetlania obiektów na scenie Standardowy obiekt klasy Scene3D. Reprezentuje scenę biblioteki Away3D
false
Określa, czy w projekcie ma być wyświetlany panel statystyk Away3D Obiekt typu Stats służy do wyświetlania panelu statystyk
Tabela 2.2. Metody klasy View3D
Nazwa
Opis
View3D(init:Object = null)
Konstruktor
addOnMouseDown(listener:Function):void
Standardowa metoda służąca do dodania obiektu nasłuchującego zdarzenia MouseDown
addOnMouseMove(listener:Function):void
Standardowa metoda służąca do dodania obiektu nasłuchującego zdarzenia MouseMove
addOnMouseOut(listener:Function):void
Standardowa metoda służąca do dodania obiektu nasłuchującego zdarzenia MouseOut
addOnMouseOver(listener:Function):void
Standardowa metoda służąca do dodania obiektu nasłuchującego zdarzenia MouseOver
addOnMouseUp(listener:Function):void
Standardowa metoda służąca do dodania obiektu nasłuchującego zdarzenia MouseUp
clear():void
Czyści wcześniej wyświetlony widok
getBitmapData():BitmapData
Zwraca obiekt BitmapData wyświetlanej sceny
Rozdział 2. Podstawy biblioteki Away3D
43
Tabela 2.2. Metody klasy View3D (ciąg dalszy)
Nazwa
Opis
getContainer():DisplayObject
Zwraca obiekt DisplayObject wyświetlanej sceny
removeOnMouseDown(listener:Function):void
Standardowa metoda usuwania obiektu nasłuchującego zdarzenia MouseDown
removeOnMouseMove(listener:Function):void
Standardowa metoda usuwania obiektu nasłuchującego zdarzenia MouseMove
removeOnMouseOut(listener:Function):void
Standardowa metoda usuwania obiektu nasłuchującego zdarzenia MouseOut
removeOnMouseOver(listener:Function):void
Standardowa metoda usuwania obiektu nasłuchującego zdarzenia MouseOver
removeOnMouseUp(listener:Function):void
Standardowa metoda usuwania obiektu nasłuchującego zdarzenia MouseUp
render():void
Wyświetla pojedynczy obraz sceny
Scene3D Gdy umieszczamy elementy na stole montażowym w programie Adobe Flash, dodawane są one również do kontenera obiektów wyświetlanych, dzięki temu elementy te widoczne są po uruchomieniu aplikacji. W przypadku biblioteki Away3D, aby obiekty trójwymiarowe były wyświetlane, należy dodać je do sceny, którą tworzy się za pomocą klasy Scene3D. Klasa ta, zlokalizowana w pakiecie away3d.containers, dziedziczy po klasie ObjectContainer3D, o której jeszcze wspomnimy w dalszych podpunktach tego podrozdziału. Scenę należy traktować jako przestrzeń z ustalonym miejscem zerowym, nieposiadającą granic. Na rysunku 2.2 przedstawiono umieszczony na scenie zbiór obiektów różnych klas dostępnych w bibliotece Away3D. Gdy wykonujemy zwykłą aplikację w programie Flash, nie ma potrzeby tworzenia głównego kontenera obiektów wyświetlanych, ponieważ jest on generowany wraz z uruchomieniem aplikacji. W Away3D istnieją dwie możliwości inicjalizacji sceny. Pierwsza polega na stosowaniu zdefiniowanej sceny utworzonego widoku View3D. Do takiej sceny odwołujemy się poprzez właściwość scene, tak jak to pokazano w poniższym kodzie: view.scene.addChild(obj); trace(view.scene.children);
44
Flash i ActionScript. Aplikacje 3D od podstaw
Rysunek 2.2.
Obiekty umieszczone na scenie Scene3D
Drugim sposobem jest stworzenie obiektu klasy Scene3D i dodanie go do zawartości Stage przy użyciu metody addChild(): var scene2:Scene3D = new Scene3D(); addChild(scene2); view.scene = scene2;
Scene3D jako potomna klasy ObjectContainer3D korzysta z dostępnych w niej metod oraz właściwości do modyfikowania i kontrolowania swojej zawartości. W klasie Scene3D jest kilka metod służących do umieszczania obiektów na scenie: addChild(), addSprite(), addSegment(), addFace() oraz addLight(), których zastosowanie ogranicza się do konkretnego rodzaju dodawanego obiektu. Z kolei do usuwania poszczególnych obiektów ze sceny służą metody: removeChild(), removeSprite(), removeSegment(), removeFace() oraz removeLight().
Spis najistotniejszych właściwości oraz metod klasy Scene3D zawierają tabele 2.3 i 2.4. Tabela 2.3. Właściwości klasy Scene3D
Nazwa
Rodzaj
ambientLights
Vector.
autoUpdate
Boolean
Wartość Opis domyślna Zwraca tablicę dodanych obiektów światła typu AmbientLight3D true
Określa, czy zdarzenia sceny są automatycznie wywoływane przez widok, czy też poprzez zastosowanie metody updateScene()
Rozdział 2. Podstawy biblioteki Away3D
45
Tabela 2.3. Właściwości klasy Scene3D (ciąg dalszy)
Nazwa
Rodzaj
Wartość Opis domyślna
directionalLights
Vector.
numLights
uint
pointLights
Vector.
Zwraca tablicę dodanych obiektów światła typu DirectionalLight3D 0
Liczba źródeł dodanych obiektów światła Zwraca tablicę dodanych obiektów światła typu PointLight3D
viewDictionary
Dictionary
Obiekt klasy Dictionary; jego kluczami są obiekty widoków, w których zastosowano wybraną scenę
Tabela 2.4. Metody klasy Scene3D
Nazwa
Opis
Scene3D(... initarray)
Konstruktor; można w nim podać argument w postaci tablicy obiektów 3D, które mają być dodane do sceny wraz z jej utworzeniem. Zamiast tablicy obiektów 3D można również podać obiekt inicjalizacyjny
updateTime(time:int = -1):void
Wywołana ręcznie odświeży obiekty 3D, które wykonują aktualizację metodą tick()
Camera3D Kamery w bibliotekach takich jak Away3D to niewidoczne i niezawierające jakiejkolwiek siatki geometrycznej obiekty umieszczone w przestrzeni trójwymiarowej. Dokładniej ujmując, są to punkty o współrzędnych x, y oraz z. Z tych punktów przedstawiana jest scena oraz zawarte w niej elementy. Kamera jest — obok widoku oraz sceny — trzecim podstawowym składnikiem bibliotek 3D. W zasadzie trudno wyobrazić sobie działanie silników 3D bez niej. Kamery dostępne w silnikach 3D w swoim funkcjonowaniu odzwierciedlają kamery, których możemy używać na co dzień. Jako operator decydujemy o tym, co chcemy przedstawić i z której strony. Ponieważ Away3D ma kilka rodzajów kamer, zostały one opisane w osobnym rozdziale 9. „Kamery”. Znajdują się tam również ważniejsze kwestie związane z używaniem kamer w Away3D oraz przykłady użycia.
46
Flash i ActionScript. Aplikacje 3D od podstaw
Podobnie jak w przypadku sceny, obiekt stworzonego widoku ma zdefiniowaną podstawową kamerę typu Camera3D. Odwołać się do tej kamery można poprzez właściwość camera dostępną w klasie View3D.
Object3D Zaczynając pracę z silnikiem Away3D, warto znać jego podstawy i główne komponenty. Takim komponentem jest właśnie klasa Object3D. Jest to klasa bazowa dla wszystkich trójwymiarowych obiektów dostępnych w tej bibliotece. Tych widocznych i tych, których nie widzimy bezpośrednio na scenie, lecz zauważamy ich działanie. Z klasy Object3D przeważnie korzysta się w sytuacjach, w których dany obiekt nie może się ograniczać do jednego typu trójwymiarowego obiektu. Listę ważniejszych właściwości i niektórych metod klasy Object3D przedstawiono w tabelach 2.5 oraz 2.6. Tabela 2.5. Właściwości klasy Object3D
Nazwa
Rodzaj
Wartość domyślna
Opis
alpha
Number
1
Określa stopień widoczności obiektu w przedziale od 0 do 1, gdzie 0 oznacza, że obiekt jest niewidoczny
collider
Boolean
false
Określa, czy dany obiekt używany jest do wykrywania kolizji między obiektami
filters
Array
Opcjonalna tablica filtrów nałożonych na obiekt 3D
inverseScene Transform
Matrix3D
Zwraca odwrotność sceneTransform
mouseEnabled
Boolean
objectDepth
Number
Zwraca wartość głębokości siatki obiektu
objectHeight
Number
Zwraca wartość wysokości siatki obiektu
objectWidth
Number
Zwraca wartość szerokości siatki obiektu
ownCanvas
Boolean
true
false
Określa, czy zdarzenia myszy będą aktywne dla obiektu 3D
Określa, czy obiekt ma być renderowany z wykorzystaniem własnej sesji renderowania
Rozdział 2. Podstawy biblioteki Away3D
47
Tabela 2.5. Właściwości klasy Object3D (ciąg dalszy)
Nazwa
Rodzaj
Wartość domyślna
Opis
ownSession
AbstractSession
Określa odrębną sesję wyświetlania dla obiektu 3D
parent
ObjectContainer3D
Określa kontener dla obiektu 3D
pivotPoint
Vector3D
Vector3D(0,0,0)
Określa punkt w lokalnym układzie współrzędnych, wokół którego będzie się obracał obiekt
position
Vector3D
Vector3D(0,0,0)
Określa pozycję obiektu w przestrzeni
rotationX
Number
0
Określa stopień nachylenia obiektu, relatywny do współrzędnych rodzica względem osi X
rotationY
Number
0
Określa stopień nachylenia obiektu, relatywny do współrzędnych rodzica względem osi Y
rotationZ
Number
0
Określa stopień nachylenia obiektu, relatywny do współrzędnych rodzica względem osi Z
scaleX
Number
1
Określa skalę wymiaru obiektu na osi X
scaleY
Number
1
Określa skalę wymiaru obiektu na osi Y
scaleZ
Number
1
Określa skalę wymiaru obiektu na osi Z
sceneTransform Matrix3D
Zwraca macierz transformacji obiektu 3D, relatywnego do globalnych współrzędnych obiektu sceny
transform
Matrix3D
Określa macierz transformacji obiektu 3D
useHandCursor
Boolean
false
Określa, czy po najechaniu na obiekt myszką ma być wyświetlony kursor dłoni
visible
Boolean
true
Określa, czy obiekt ma być widoczny
x
Number
0
Określa pozycję obiektu na osi X
y
Number
0
Określa pozycję obiektu na osi Y
z
Number
0
Określa pozycję obiektu na osi Z
48
Flash i ActionScript. Aplikacje 3D od podstaw
Tabela 2.6. Metody klasy Object3D
Nazwa
Opis
Object3D(init:Object = null)
Konstruktor
addOnDimensionsChange()
Metoda inicjująca nasłuchiwanie zdarzenia dimensionsChanged
addOnMouseDown()
Metoda inicjująca nasłuchiwanie zdarzenia mouseDown3D
addOnMouseMove()
Metoda inicjująca nasłuchiwanie zdarzenia mouseMove3D
addOnMouseOut()
Metoda inicjująca nasłuchiwanie zdarzenia mouseOut3D
addOnMouseOver()
Metoda inicjująca nasłuchiwanie zdarzenia mouseOver3D
addOnMouseUp()
Metoda inicjująca nasłuchiwanie zdarzenia mouseUp3D
addOnPositionChange()
Metoda inicjująca nasłuchiwanie zdarzenia positionChanged
addOnRollOut()
Metoda inicjująca nasłuchiwanie zdarzenia rollOut3D
addOnRollOver()
Metoda inicjująca nasłuchiwanie zdarzenia rollOver3D
addOnScaleChange()
Metoda inicjująca nasłuchiwanie zdarzenia scaleChanged
centerPivot()
Metoda reguluje pozycję punktu obrotu tak, aby znajdował się on w centrum geometrii obiektu
clone()
Metoda powiela właściwości obiektu do innego obiektu typu Object3D
removeOnDimensionsChange()
Metoda usuwająca nasłuchiwanie zdarzenia dimensionsChanged
removeOnMouseDown()
Metoda usuwająca nasłuchiwanie zdarzenia mouseDown3D
removeOnMouseMove()
Metoda usuwająca nasłuchiwanie zdarzenia mouseMove3D
removeOnMouseOut()
Metoda usuwająca nasłuchiwanie zdarzenia mouseOut3D
removeOnMouseOver()
Metoda usuwająca nasłuchiwanie zdarzenia mouseOver3D
removeOnMouseUp()
Metoda usuwająca nasłuchiwanie zdarzenia mouseUp3D
removeOnPositionChange()
Metoda usuwająca nasłuchiwanie zdarzenia positionChanged
removeOnRollOut()
Metoda usuwająca nasłuchiwanie zdarzenia rollOut3D
removeOnRollOver()
Metoda usuwająca nasłuchiwanie zdarzenia rollOver3D
removeOnScaleChange()
Metoda usuwająca nasłuchiwanie zdarzenia scaleChanged
distanceTo(obj:Object3D):Number
Metoda zwraca w postaci liczbowej odległość od wskazanego obiektu klasy Object3D
tick()
Metoda, która może być nadpisana w celu uruchomienia aktualizacji obiektu na podstawie indywidualnych wywołań renderowania z renderera
toString()
Zwraca ciąg reprezentujący określony obiekt
Rozdział 2. Podstawy biblioteki Away3D
49
ObjectContainer3D Wspomnieliśmy wcześniej o tym, że klasa Scene3D jest głównym kontenerem dla obiektów trójwymiarowych. W Away3D istnieje możliwość tworzenia dodatkowych kontenerów, które są obiektami i pochodnymi klasy ObjectContainer3D. Klasa ta, zlokalizowana w pakiecie away3d.containers, służy w głównej mierze do grupowania elementów o podobnych właściwościach lub mających stanowić część większej całości. Często obiekt klasy ObjectContainer3D wykorzystuje się do połączenia kilku trójwymiarowych obiektów w jedną całość. Może łatwiej byłoby stworzyć kompletny model, ale bywają takie sytuacje, w których wymagane jest, by niezwiązane budową obiekty zachowywały się tak, jakby stanowiły jeden złożony obiekt. Obiekt klasy ObjectContainer3D nie ma widocznych ścian ani krawędzi. Jego powierzchnia zmienia się wraz ze zmianą zawartości i pozycji poszczególnych jego obiektów wewnętrznych. Wizualizację ObjectContainer3D przedstawiono na rysunku 2.3. Rysunek 2.3.
Wizualizacja obiektu ObjectContainer3D
Jako kontener dla innych obiektów ObjectContainer3D musi mieć właściwości oraz metody pozwalające na manipulowanie jego zawartością. Przedstawiono je w tabelach 2.7 oraz 2.8. Tabela 2.7. Właściwości klasy ObjectContainer3D
Nazwa
Rodzaj
Wartość domyślna Opis
children
Vector.
Zwraca zawartość kontenera w postaci tablicy obiektów 3D (Object3D)
polyCount
int
Zwraca liczbę obiektów znajdujących się w kontenerze
50
Flash i ActionScript. Aplikacje 3D od podstaw
Tabela 2.8. Metody klasy ObjectContainer3D
Nazwa
Opis
ObjectContainer3D(init:Object = null)
Konstruktor
addChild(child:Object3D):void
Metoda dodaje obiekt pochodny od Object3D do zawartości kontenera
addChildren(... childarray):void
Metoda dodaje do zawartości kontenera tablicę zawierającą obiekty
addLight(light:AbstractLight):void
Metoda dodaje źródła światła w postaci obiektów klas dziedziczących po AbstractLight
Metoda modyfikuje pozycję każdego z obiektów umieszczonych w kontenerze
centerMeshes():void
Metoda ustawia punkt pivot każdego z obiektów w jego środku geometrycznym
getChildByName(childName:String):Object3D
Metoda zwraca wyszukany za pomocą nazwy obiekt object3D
removeChild(child:Object3D):void
Metoda usuwa obiekt pochodny od Object3D z zawartości kontenera
removeChildByName(name:String):void
Metoda usuwa wyszukany przez nazwę obiekt 3D z zawartości kontenera
removeLight(light:AbstractLight):void
Metoda usuwa wybrane źródło światła z zawartości kontenera
Podstawowa budowa aplikacji w Away3D Nadszedł czas, aby poznaną teorię podeprzeć przykładem. Zbudujemy w tym miejscu najprostszą aplikację z użyciem biblioteki Away3D. Żeby nie wprowadzać zbyt wielu nowych pojęć, na scenie umieścimy kulę, która będzie się obracała wokół własnej osi. Obiekty 3D oraz wprawianie ich w ruch poznasz w dalszych rozdziałach tej książki. Na razie istotne dla Ciebie ma być to, jak korzysta się z silnika 3D. Na rysunku 2.4 pokazano efekt, jaki uzyskamy po stworzeniu i skompilowaniu omawianego w tym podpunkcie przykładu. Aby osiągnąć przedstawiony na rysunku 2.4 efekt, w pierwszej kolejności należy stworzyć nową klasę ActionScript 3.0. Po stworzeniu i zapisaniu pliku w wybranej lokalizacji trzeba w zależności od wybranego edytora zintegrować bibliotekę z projektem aplikacji.
Pierwsze dwie należą do biblioteki Away3D. View3D służy do stworzenia sceny, natomiast Sphere to obiekt kuli, o którym jeszcze wspomnimy w rozdziale 3. „Obiekty”. Klasa Sprite potrzebna nam jest do umieszczenia i wyświetlenia widoku w oknie Flash. Wszystkie główne klasy aplikacji Away3D dziedziczą z klas Sprite bądź MovieClip. Na końcu dodaliśmy klasę zdarzenia Event. Kiedy dziedziczymy z klasy Sprite, a kiedy z klasy MovieClip Możesz się spotkać z przykładami, w których klasy będą dziedziczyły nie ze Sprite, tylko MovieClip. W obu przypadkach kod będzie działał, jedyna różnica polega na tym, że klasa MovieClip jest rozszerzeniem Sprite. Ma ona właściwości oraz metody służące do operowania na linii czasowej. Dlatego kiedy w Twojej klasie będziesz miał zamiar wykorzystać animacje składające się z klatek, należy dziedziczyć z MovieClip. W przeciwnym razie wystarczy Sprite.
Po zaimportowaniu potrzebnych klas tworzymy naszą klasę BasicExample, dziedzicząc z klasy Sprite. public class basicExample extends Sprite
W ciele klasy BasicExample znajdują się dwie metody, konstruktor oraz funkcja reagująca na wystąpienie zdarzenia Event.ENTER_FRAME. W obu metodach korzystamy z obiektów widoku i kuli, dlatego jako właściwości klasy definiujemy obiekty klas View3D oraz Sphere. Klasa BasicExample to jedyna klasa w tym przykładzie, ale i tak zastosowaliśmy modyfikator private, by ograniczyć zakres dostępności tych obiektów do ciała klasy bazowej. private var view:View3D; private var sphere:Sphere;
W konstruktorze w pierwszej kolejności stworzyliśmy obiekt widoku. Standardowo okno aplikacji Flash ma wymiary 550 na 400 pikseli. Chcąc umieścić widok na środku okna, jego właściwościom x i y nadaliśmy odpowiednio połowę wymiarów okna Flash. view = new View3D( { x:stage.stageHeight*.5, y:stage.stageWidth*.5 } );
W kolejnym kroku stworzyliśmy obiekt kuli Sphere. Nie nadajemy mu jakichkolwiek właściwości, więc wyświetlony zostanie ze swoimi standardowymi ustawieniami i pokryty losowo wybranym kolorem. Po stworzeniu obiektu sphere, odwołując się do domyślnej sceny widoku, dodaliśmy kulę do zasobów sceny.
Rozdział 2. Podstawy biblioteki Away3D
53
sphere = new Sphere(); view.scene.addChild(sphere);
Na końcu ciała konstruktora dodaliśmy widok i ustawiliśmy rejestrator zdarzenia Event.ENTER_FRAME. Za jego pomocą będziemy mogli wprawić w ruch nasz obiekt kuli. addChild(view); addEventListener(Event.ENTER_FRAME, onEnterFrame);
Drugą, a zarazem ostatnią w klasie BasicExample metodą jest onEnterFrame, której zadaniem jest wykonanie swojego bloku kodu za każdym razem, gdy wykryte zostanie zdarzenie Event.ENTER_FRAME. Aby przedstawić prostą animację obrotu wykonaną na obiekcie sphere, zapisaliśmy dwie linijki kodu zmieniające wartości właściwości rotationX oraz rotationY. Poza tym umieściliśmy również w metodzie onEnterFrame() wywołanie z widoku metody render(); bez tego nie ujrzelibyśmy obiektu i jego animacji. sphere.rotationX += 5; sphere.rotationY -= 5; view.render();
Położenie obiektów w przestrzeni W bibliotece Away3D każdy obiekt 3D ma cztery właściwości służące do określenia jego pozycji na scenie. Są nimi: x, y, z oraz position. Pierwsze trzy tworzą główną metodę ustalania pozycji. Jest ona częściej stosowana w sytuacjach, gdy niewymagana jest zmiana położenia względem wszystkich trzech osi. Poniższy kod źródłowy zajmuje aż cztery linijki tylko po to, aby ustalić pozycję początkową. var obj:Object3D = new Object3D(); obj.x = 100; obj.y = 50; obj.z = 0;
Kolejnym sposobem ustalenia pozycji obiektu jest skorzystanie z właściwości position, która przyjmuje jako wartość obiekt typu Vector3D. W obiekcie tym wystarczy podać jako argumenty wartości dla współrzędnych: x, y oraz z, tak jak to pokazano w poniższym kodzie źródłowym. var obj:Object3D = new Object3D(); obj.position = new Vector3D(100, 50, 0);
Jak widać, ten sposób określania położenia obiektu w przestrzeni wymaga zapisania mniejszej ilości kodu. Więcej informacji na temat zmiany pozycji obiektu poznasz, czytając rozdział 7. „Praca z obiektami”.
54
Flash i ActionScript. Aplikacje 3D od podstaw
Układ współrzędnych w Away3D Według definicji układ współrzędnych to funkcja przypisująca każdemu punktowi przestrzeni skończony ciąg liczb. Liczby te nazywamy współrzędnymi. Standardowy układ osi to układ kartezjański, przedstawiony na rysunku 2.5. Rysunek 2.5.
Podstawowy układ współrzędnych
Programy Adobe Flash do wersji CS3 miały układ współrzędnych również złożony z dwóch osi: X i Y. Jednak swoje miejsce zerowe miały w lewym górnym rogu. Dodatkowo wartości osi Y zwrócone są ku dołowi. Oznacza to, że obiekty niżej położne mają większą wartość y. Wraz z odsłoną Adobe Flash Player 10 rozszerzono układ współrzędnych o trzecią oś Z. Programy Adobe Flash od wersji CS4 miały do dyspozycji trzy osie, pozwalają tym samym na tworzenie obiektów w przestrzeni trójwymiarowej. Różnicą między układem współrzędnych w programach Flash a układem w bibliotekach 3D takich jak Away3D jest kierunek, w którym rosną wartości osi Y. Flash nadal stosuje swój system, z kolei silniki 3D używają układu z osią Y zwróconą ku górze. Kierunki osi w Away3D łatwo można przedstawić za pomocą lewej dłoni. Kciuk zwrócony ku górze określa kierunek osi Y. Wyprostowany palec wskazujący reprezentuje kierunek osi Z. Palec środkowy skierowany w prawą stronę oznacza oś X. Rysunek 2.6 przedstawia porównanie układu współrzędnych znanego z programu Flash z układem stosowanym w bibliotece Away3D. Linią przerywaną przedstawiono odwzorowanie na lewej dłoni kierunków osi układu współrzędnych stosowanego w przestrzeni sceny Away3D.
Rozdział 2. Podstawy biblioteki Away3D
55
Rysunek 2.6.
Porównanie układów współrzędnych programu Flash i biblioteki Away3D
W Away3D scena ma swój układ współrzędnych. Środek tego układu jest głównym punktem odniesienia dla każdego z elementów bezpośrednio w nim umieszczonych. Nazywamy to globalnym układem współrzędnych. Każdy z obiektów umieszczonych na scenie poza swoim punktem środkowym, który określa jego pozycję, ma również swój własny układ współrzędnych. Nazywamy go lokalnym układem współrzędnych. Z układu tego korzysta się między innymi przy modyfikacji geometrii, kąta nachylenia bądź pozycji danego obiektu. Dla przykładu: chcąc obrócić obiekt i pokazać wcześniej niewidoczne jego części, stosujemy oś obiektu, a nie sceny. Stosując oś sceny przy obrocie obiektu, stworzymy efekt orbitowania wokół punktu zerowego sceny. Zagadnienie to przedstawia poniższy rysunek 2.7. Rysunek 2.7.
Układ współrzędnych sceny oraz obiektu
56
Flash i ActionScript. Aplikacje 3D od podstaw
W podpunkcie „ObjectContainer3D” tego rozdziału wspomnieliśmy o tym, że w Away3D istnieje możliwość tworzenia pojedynczych kontenerów wewnątrz sceny. Każdy z takich kontenerów jako obiekt trójwymiarowy również ma swój układ współrzędnych. W sytuacji gdy mamy umieszczone obiekty wewnątrz ciała kontenera i chcemy zmienić ich położenie, zmiana właściwości określających pozycję nie odnosi się do środka sceny, lecz środka kontenera. Dla przykładu w poniższym kodzie źródłowym stworzymy dwie kule i kontener. Obie kule mimo tych samych wartości właściwości pozycji będą umieszczone w różnych miejscach na scenie. Pierwszą kulę umieścimy bezpośrednio na scenie i nadamy konkretne wartości jej właściwościom x, y i z. Następnie stworzymy kontener i umieścimy w nim drugą kulę o tych samych właściwościach co pierwsza. Dodatkowo dla lepszego zobrazowania sytuacji umieścimy na scenie obiekty Trident, które przedstawiają układ współrzędnych. Mniejszy układ po lewej stronie jest układem znajdującym się w punkcie zerowym kontenera. Większy układ dodamy bezpośrednio na środek sceny Away3D. Taką sytuację przedstawia rysunek 2.8. Rysunek 2.8.
Rozmieszczenie dwóch kul o tych samych wartościach pozycji
Jak przedstawiono na rysunku 2.8, kule znajdują się w różnych pozycjach na scenie, mimo że wartości ich współrzędnych są identyczne. Aby przedstawić te wartości, skorzystamy z funkcji trace(), która w konsoli edytora wyświetli następujący fragment logu: sphere1: sphere2:
100 50 0 100 50 0
Aby uzyskać efekt przedstawiony na rysunku 2.8 i w poprzednim wycinku logu, przepisz i skompiluj następujący kod źródłowy:
public class CoordinateSystemExample extends Sprite { public function CoordinateSystemExample() { var view:View3D = new View3D( { x:stage.stageHeight*.5, y:stage.stageWidth*.5 } ); // var globalCoor:Trident = new Trident(500); view.scene.addChild(globalCoor); // var sphere1:Sphere = new Sphere(); sphere1.radius = 50; sphere1.x = 100; sphere1.y = 50; sphere1.z = 0; view.scene.addChild(sphere1); // var container:ObjectContainer3D = new ObjectContainer3D(); container.x = -200; container.y = -50; container.z = 100; view.scene.addChild(container); // var containerLocalCoor:Trident = new Trident(100, true); container.addChild(containerLocalCoor); // var sphere2:Sphere = new Sphere(); sphere2.radius = 50; sphere2.x = 100; sphere2.y = 50; sphere2.z = 0; container.addChild(sphere2); // addChild(view); view.render(); // trace('sphere1: ', sphere1.x, sphere1.y, sphere1.z); trace('sphere2: ', sphere2.x, sphere2.y, sphere2.z); } } }
Żeby pokazać różnicę między lokalnym a globalnym systemem układu współrzędnych, potrzebowaliśmy trzech rodzajów obiektów. Pierwszy z nich to znany z poprzedniego przykładu obiekt kuli – sphere. Drugi to obiekt klasy ObjectContainer3D, służący jako kontener dla drugiej kuli. Trzeci to obiekt klasy Trident, która tworzy układ współrzędnych. Poza tymi klasami dodaliśmy również inne, standardowe, niezbędne do uruchomienia aplikacji.
58
Flash i ActionScript. Aplikacje 3D od podstaw import import import import import
Po stworzeniu klasy coordinateSystemExample w jej ciele zdefiniowaliśmy tylko konstruktor. Nie korzystaliśmy z jakichkolwiek animacji, dlatego nie było potrzeby nasłuchiwania zdarzenia Event.ENTER_FRAME. W tym przykładzie odświeżyliśmy widok 3D tylko raz po stworzeniu i dodaniu wszystkich elementów. W konstruktorze w pierwszym kroku utworzyliśmy obiekt widoku View3D umieszczonego w centrum okna aplikacji Flash. var view:View3D = new View3D( { x:stage.stageHeight*.5, y:stage.stageWidth*.5 } );
Po stworzeniu widoku dodaliśmy główny układ współrzędnych o nazwie globalCoor, któremu długość osi ustawiliśmy na 500. var globalCoor:Trident = new Trident(500); view.scene.addChild(globalCoor);
Kolejnym krokiem było stworzenie obiektu sphere1 i umieszczenie go bezpośrednio na scenie widoku View3D. Następnie zmieniliśmy jego standardowe wartości właściwości x, y oraz z, tak aby kula pojawiła się z prawej strony, a nie na środku okna. Ponieważ obiekt kuli jest duży i przeszkadzałoby to w pokazaniu różnicy, zmniejszyliśmy promień kuli, przypisując właściwości radius wartość 50. var sphere1:Sphere = new Sphere(); sphere1.radius = 50; sphere1.x = 100; sphere1.y = 50; sphere1.z = 0; view.scene.addChild(sphere1);
Po dodaniu kuli utworzyliśmy obiekt klasy ObjectContainer3D, który nazwaliśmy container i ustawiliśmy jego pozycję na każdej z trzech osi. var container:ObjectContainer3D = new ObjectContainer3D(); container.x = -200; container.y = -50; container.z = 100; view.scene.addChild(container);
Żeby móc dostrzec punkt zerowy obiektu container, dodaliśmy kolejny, mniejszy układ współrzędnych o nazwie containerLocalCoor. Ustawiliśmy długość jego osi na 100 pikseli i wyświetliliśmy etykiety każdej z osi, podając właściwości showLetters wartość true. var containerLocalCoor:Trident = new Trident(100, true); container.addChild(containerLocalCoor);
Rozdział 2. Podstawy biblioteki Away3D
59
Przyszedł czas na dodanie obiektu kuli sphere2 do zawartości kontenera. W tym celu wywołując na obiekcie container metodę addChild(), umieściliśmy sphere2 w kontenerze. Jak było w założeniach tego przykładu, obiektowi sphere2 przypisaliśmy identyczne wartości właściwości x, y oraz z z tymi, jakie posiada sphere1. var sphere2:Sphere = new Sphere(); sphere2.radius = 50; sphere2.x = 100; sphere2.y = 50; sphere2.z = 0;
Na koniec po dodaniu i wyświetleniu widoku w oknie programu Adobe Flash zastosowaliśmy funkcję trace, aby pokazać współrzędne obiektów sphere1 i sphere2. trace('sphere1: ', sphere1.x, sphere1.y, sphere1.z); trace('sphere2: ', sphere2.x, sphere2.y, sphere2.z);
Podsumowanie Najważniejszymi komponentami biblioteki Away3D są View3D, Scene3D, Camera3D, Object3D oraz ObjectContainer3D. Widok, czyli okno na trójwymiarową przestrzeń, traktowany jest w programie Flash jako zwykły element. Dlatego musi on być dodany do zawartości Stage metodą addChild(). Widok swoimi wymiarami pokrywa całą powierzchnię okna aplikacji. Widok standardowo umieszcza się w centrum okna, stosując konkretne wartości bądź właściwości stageWidth *.5 i stageHeight *.5. Przy budowaniu widoku domyślnie tworzone są również scena i kamera. Można odwołać się do nich poprzez właściwości scene i camera. Do wyświetlenia zawartości sceny służy metoda widoku o nazwie render(). Powoduje ona pojedyncze odświeżenie obrazu. Scena to główny kontener dla obiektów 3D. Jako potomna klasy ObjectContainer3D korzysta z jej metod oraz właściwości do modyfikowania zawartości. Kamera w Away3D to niewidoczny obiekt umieszczony w przestrzeni trójwymiarowej. Zadaniem kamery jest przedstawienie trójwymiarowej sceny z konkretnej pozycji w przestrzeni. Away3D ma kilka rodzajów kamer.
60
Flash i ActionScript. Aplikacje 3D od podstaw
Object3D jest podstawową klasą dla wszystkich obiektów trójwymiarowych. ObjectContainer3D to niewidoczny obiekt, który służy do grupowania innych obiektów o podobnych właściwościach lub mających stanowić część większej całości. Główna klasa aplikacji w Away3D może dziedziczyć z klas Sprite oraz MovieClip. Wybór zależy od tego, czy obiekt widoku będzie osadzony bezpośrednio na stole montażowym projektu w programie Adobe Flash oraz czy na obiekcie widoku wykonywane będą animacje zapisane na linii czasowej projektu. Adobe Flash od wersji CS4 obsługuje trzy osie, pozwala tym samym na tworzenie obiektów 3D. Układ współrzędnych stosowany w Away3D różni się od standardowego w programie Adobe Flash kierunkiem osi Y. W przypadku biblioteki Away3D wartości dodatnie osi Y skierowane są ku górze. Ponieważ każdy z obiektów w Away3D ma swój układ współrzędnych, rozróżniamy dwa rodzaje układów: globalny układ współrzędnych oraz lokalny układ współrzędnych.
Rozdział 3. Obiekty Kluczowym elementem każdej aplikacji 3D są wyświetlane w niej elementy. Niezależnie od tego, czy są one prostymi obiektami, czy bardzo złożonymi, bez nich scena jest tylko pustą przestrzenią. Wraz z powstaniem pierwszego programu wyświetlającego grafikę wyrosły nowe gałęzie przemysłu IT, które nieprzerwanie rozwijają się w różnych kierunkach. Weźmy za przykład przemysł gier komputerowych. Jedna z pierwszych gier, jakie powstały, Spacewar!, składała się jedynie z kilkunastu punktów i linii, a dzisiejsze tytuły oferują nieprzeciętne obrazy złożone z tysięcy wielokątów oprawionych w szczegółowe tekstury. Z użyciem biblioteki Away3D w wersji 3.6 można stworzyć aplikacje, których poziom wygenerowanego obrazu można przyrównać do poziomu gier pisanych na konsole PlayStation. Podobnie jak inne biblioteki, Away3D jest stale rozwijany i jego możliwości będą nadal poszerzane. Niezależnie od tego trzeba mieć wiedzę o podstawowych obiektach, jakie są dostępne w Away3D, i tym właśnie zajmiemy się na kolejnych kilkudziesięciu stronach. Ponieważ wiele jest tych obiektów, dla utrzymania pewnego porządku i odseparowania różnych od siebie kategorii klas zostały one podzielone na następujące grupy: Base, Sprites, Primitives oraz Skybox. We wstępie każdego z tych podrozdziałów umieszczone są ogólna charakterystyka i objaśnienie danej grupy. Poza tym czytając ten rozdział, dowiesz się: Co jest podstawą każdego wyświetlanego obiektu. Jak tworzyć i wyświetlać bryły w Away3D. Jak modyfikować budowę poszczególnych obiektów. W jakich sytuacjach można wykorzystać omawiane obiekty. Jakie właściwości oraz metody mają poszczególne klasy generujące bryły.
62
Flash i ActionScript. Aplikacje 3D od podstaw
Base Klasy opisane w tym podrozdziale umieszczone są w pakiecie away3d.core.base. Uznałem, że przed poznaniem konkretnych klas tworzących gotowe obiekty warto dowiedzieć się, z czego tak naprawdę są one zbudowane, który element odpowiada za budowę siatki (zwanej też szkieletem), a który za wypełnienie powierzchni boków. Wiedza zawarta w tym podrozdziale może się okazać pomocna w sytuacji, gdy zaistnieje potrzeba zmodyfikowania struktury jednego ze standardowych obiektów lub wręcz stworzenia całkiem nowego i niestandardowego.
Vertex Podstawą wszystkich brył — niezależnie od złożoności ich budowy — są punkty. W przestrzeni trójwymiarowej punkty nie przybierają kształtu ani nie są nawet widoczne. Istnieją one dla nas jako pozycja w przestrzeni określona względem osi X, Y oraz Z. W Away3D punkt reprezentowany jest przez klasę Vertex, która znajduje się w pakiecie away3d.core.base. Poniższy kod źródłowy prezentuje sposób tworzenia punktu Vertex oraz wykorzystania kilku jego właściwości i metod. Po skompilowaniu kodu w oknie aplikacji wyświetli się tylko białe tło. To, co jest interesujące, pojawi się w zakładce Output edytora. package { import import import import
W powyższym kodzie źródłowym najpierw zaimportowaliśmy potrzebne biblioteki, z których najważniejszymi w tym przypadku są: import away3d.core.base.Vertex; import flash.geom.Vector3D;
W konstruktorze stworzyliśmy obiekt widoku o nazwie view oraz dwa obiekty klasy Vertex o nazwach v1 oraz v2: pierwszy z nich z domyślnymi ustawieniami, a w drugim zmieniliśmy położenie względem wszystkich osi, w konstruktorze podając wartość równą 100 trzem argumentom: x, y oraz z. var v1:Vertex = new Vertex(); var v2:Vertex = new Vertex(100, 100, 100);
W kolejnych linijkach konstruktora, stosując funkcję trace(), wyświetlamy wyniki poszczególnych metod statycznych dostępnych w klasie Vertex. Jako pierwszą zapisaliśmy metodę distanceSqr(), która zwraca w postaci liczby sumę dodanych do siebie i podniesionych do kwadratu współrzędnych podanych dwóch punktów. Vertex.distanceSqr(v1, v2);
Metoda median() zwraca nowy obiekt klasy Vertex, którego współrzędne są wartościami środkowymi pozycji podanych punktów v1 i v2. Vertex.median(v1, v2);
Metoda weighted() zwraca nowy obiekt klasy Vertex, który reprezentuje średnią ważoną dwóch punktów: v1 i v2. Jako argumenty dla tej metody podaje się obiekty wierzchołków oraz ich wagę. Vertex.weighted(v1, v2, 10, 1);
Do zmiany położenia punktu służą metody: add(), adjust(), setValue() oraz reset(). W metodzie add() jako argument należy podać obiekt klasy Vector3D z konkretnymi współrzędnymi x, y i z. Te wartości zostaną dodane do współrzędnych obiektu, na którym wywołano metodę add().
64
Flash i ActionScript. Aplikacje 3D od podstaw v1.add(new Vector3D(-50, -50, -50));
Metoda adjust() modyfikuje aktualne położenie punktu o przypisane w argumentach wartości x, y i z. Dodatkowy argument k=1 określa wielokrotność zmiany stosowanej według wzoru: [aktualna pozycja na osi]*(1 – k) + [wartość argumentu]*k
Metoda setValue() zastępuje wartość pozycji na wszystkich osiach tymi podanymi jako argumenty x, y i z. v1.setValue(10, 10, 10);
Metoda reset() powoduje ustawienie punktu w pozycji zerowej otoczenia, w jakim się znajduje. Uruchomienie tego przykładu spowoduje wyświetlenie następującego wyniku: v1.position: v2.position: Vertex.distanceSqr: Vertex.median: Vertex.weighted: 9.090909090909092)
Vector3D(0, 0, 0) Vector3D(100, 100, 100) 30000 new Vertex(50, 50, 50) new Vertex(9.090909090909092, 9.090909090909092,
operacje: v1.add() i v2.adjust() v1.position: Vector3D(-50, -50, -50) v2.position: Vector3D(-170, -170, -170) operacje: v1.reset() v1.position: Vector3D(0, 0, 0) operacje: v1.setValue() v1.position: Vector3D(10, 10, 10) Vertex — skoro jest niewidoczny — może się wydawać niepozornym elementem, jednak w grupie punktów jako wierzchołek określający budowę bryły ma fundamentalne znaczenie. Umiejętność posługiwania się punktami daje możliwość modyfikowania powierzchni obiektu w dowolny sposób oraz kształtowania relacji i zależności między nimi.
Tabele 3.1 oraz 3.2 zawierają właściwości i metody klasy Vertex, których znajomość przyda się przy okazji przykładów transformacji obiektu w przestrzeni.
Rozdział 3. Obiekty
65
Tabela 3.1. Właściwości klasy Vertex
Nazwa
Rodzaj
Wartość domyślna
Opis
x
Number
0
Określa pozycję punktu względem osi X
y
Number
0
Określa pozycję punktu względem osi Y
z
Number
0
Określa pozycję punktu względem osi Z
position
Vector3D
Vector3D(0,0,0)
Określa pozycję punktu w przestrzeni
extra
Object
null
Obiekt zawierający zdefiniowane przez użytkownika właściwości
Tabela 3.2. Metody klasy Vertex
Nazwa
Opis
Vertex(x:Number, y:Number, z:Number)
Konstruktor
add(value:Vector3D)
Sumuje odpowiednio każdą z wartości x, y oraz z aktualnej pozycji z wartościami podanymi w argumencie typu Vector3D
distanceSqr(a:Vertex,b:Vertex)
Zwraca w postaci liczby sumę dodanych do siebie i podniesionych do kwadratu współrzędnych z podanych punktów a i b
median(a:Vertex, b:Vertex)
Zwraca obiekt typu Vertex, którego współrzędne są wartościami środkowymi podanych punktów
Zwraca obiekt klasy Vertex reprezentujący średnią ważoną podanych punktów
Mesh Obiekt klasy Mesh spełnia ważną funkcję między innymi dla obiektów klas Segment, Face czy Sprite3D. Mesh jest kontenerem oraz wizualną powłoką dla obiektów posiadających współrzędne i odpowiednie dane, ale nieposiadających warstwy widocznej dla użytkownika. Za pomocą odpowiednich metod (addSegment(), addFace() i addSprite()) możemy uzupełnić zawartość obiektu klasy Mesh. Wybór metody uzależniony jest od rodzaju elementu, jaki chcemy dodać. Poznamy je w kolejnych podpunktach, a na razie przyjrzyjmy się tabelom 3.3 i 3.4, które zawierają właściwości i metody klasy Mesh. Wiele z nich na chwilę obecną nie będzie nam potrzebnych, jednak z czasem, przy bardziej złożonych aplikacjach, mogą się okazać bardzo przydatne.
66
Flash i ActionScript. Aplikacje 3D od podstaw
Tabela 3.3. Właściwości klasy Mesh
Nazwa
Rodzaj
Wartość Opis domyślna
elements
Vector.
Zwraca tablicę wszystkich elementów zawartych w obiekcie Mesh
faces
Vector.
Zwraca tablicę wszystkich elementów typu Face zawartych w obiekcie Mesh
segments
Vector.
Zwraca tablicę wszystkich elementów typu Segment zawartych w obiekcie Mesh
sprites
Vector.
Zwraca tablicę wszystkich elementów typu Sprite3D zawartych w obiekcie Mesh
vertices
Vector.
Zwraca tablicę wszystkich punktów Vertex zawartych w obiekcie Mesh
indexes
Array
Tablica indeksów klatek w modelach typu MD2
bothsides
Boolean
material
Material
Definiuje rodzaj materiału do pokrycia elementów typu Face, Segment lub Sprite3D
back
Material
Określa rodzaj materiału, jaki ma być wykorzystany do pokrycia powierzchni odwróconych od kamery
outline
Material
Określa rodzaj materiału, jaki ma być wykorzystany do pokrycia linii obiektu
geometry
Geometry
Definiuje obiekt typu Geometry wykorzystany w obiekcie Mesh
type
String
url
String
false
mesh
Definiuje, czy elementy obiektu odwrócone od kamery mają być renderowane
Nazwa rodzaju klasy wykorzystanej do stworzenia obiektu Adres stworzonego obiektu w postaci obiektu String.
Aktualizuje pozycję wybranego obiektu klasy Vertex
clone(object:Object3D):Object3D
Kopiuje właściwości obiektu Mesh do innego elementu 3D
cloneAll(object:Object3D):Object3D
Kopiuje całą strukturę obiektu Mesh do innego elementu 3D
68
Flash i ActionScript. Aplikacje 3D od podstaw
Segment W Away3D obiekt Segment to nic innego jak linia określona dwoma punktami Vertex. W przestrzeni trójwymiarowej możemy narysować ją jako linię prostą lub krzywą, stosując metody lineTo(), curveTo() czy też defineSingleCurve(). Należy pamiętać, że samo utworzenie obiektu Segment nie sprawi, że będzie on widoczny na scenie. W pierwszej kolejności należy zdefiniować obiekt typu Mesh, a następnie — posługując się metodą addSegment() — dodać do niego obiekt Segment. Zastosowań dla Segment nie ma zbyt wielu, aczkolwiek jak zawsze wszystko zależy od naszej wyobraźni. Można wykorzystać go jako linię wskazującą na jakiś element lub traktować jako obiekt pomocniczy do ustalenia odległości między obiektami, toru lotu lub granic relacji między obiektami. My jako przykład zastosowania każdej z metod rysowania stworzymy kilka zwykłych linii, jak pokazano na rysunku 3.1. Rysunek 3.1.
Wygenerowane różne obiekty klasy Segment
Aby uzyskać efekt przedstawiony na rysunku 3.1, przepisz i skompiluj następujący kod źródłowy: package { import import import import import
Z wyżej wymienionych klas Segment reprezentuje obiekty linii. Aby były one widoczne, potrzebowaliśmy również obiektu klasy Mesh. Żeby rozróżnić kolorami poszczególne linie, zastosowaliśmy materiał ShadingColorMaterial, który w swoich właściwościach ma wypełnienie dla krawędzi. Więcej o materiałach dowiesz się w rozdziale 4. „Materiały”. Klasa Vector3D posłużyła nam do określania pozycji w przestrzeni. Następnym krokiem, jaki wykonaliśmy, było zdefiniowanie ogólnodostępnych wewnątrz klasy obiektów klasy Mesh oraz widoku View3D: private var view:View3D; private var mesh:Mesh;
W ciele konstruktora naszej klasy w pierwszej kolejności utworzyliśmy obiekt wcześniej zdefiniowany jako view i nadaliśmy mu nowe położenie w oknie aplikacji. Stosując metodę addChild(), dodaliśmy widok do zasobów stołu montażowego. view = new View3D(); view.x = stage.stageWidth * .5; view.y = stage.stageHeight * .5; addChild(view);
W następnej kolejności stworzyliśmy obiekt o nazwie mesh i dodaliśmy go do zasobów sceny widoku, stosując referencję do obiektu scene i wywołując jego metodę addChild(). mesh = new Mesh(); view.scene.addChild(mesh);
Na końcu konstruktora wywołaliśmy metodę rysującą linie drawLines() oraz zarejestrowaliśmy obiekt nasłuchujący zdarzenie Event.ENTER_FRAME, który odpowiada za wywoływanie metody onEnterFrame() po każdym odświeżeniu klatki. drawLines(); addEventListener(Event.ENTER_FRAME, onEnterFrame);
W kodzie metody drawLines() stworzyliśmy trzy różne segmenty. Robimy tak, ponieważ chcemy sprawdzić działanie poszczególnych metod klasy Segment i wyróżnić każdą innym kolorem. Pierwszy segment s1 to linia prosta. Dodaliśmy ją, określając punkty początkowy, końcowy oraz ustalając materiał linii. W kolejnej linijce za pomocą wcześniej wspomnianej metody addSegment() dodaliśmy linię do obiektu mesh. Dzięki temu linia jest dla nas widoczna. var s1:Segment = new Segment(new Vertex(0,0,0), new Vertex(-100,100,0), new ShadingColorMaterial(null,{wireColor:0xFFFFFF}) ); mesh.addSegment(s1);
Rozdział 3. Obiekty
71
W przypadku drugiego segmentu s2 zastosowaliśmy metody, które w pewnym stopniu mają swoje odpowiedniki w standardowym kodzie ActionScript 3.0. Mowa o metodzie moveTo(), której użyliśmy do wyznaczenia punktu początkowego, oraz o metodzie lineTo(), rysującej linię do wyznaczonego punktu końcowego. Zarówno moveTo(), jak i lineTo() potrzebują trzech współrzędnych do narysowania obiektu klasy Segment. var s2:Segment = new Segment(); s2.material = new ShadingColorMaterial(null, { wireColor:0x8218DF } ); s2.moveTo(0, 0, 0); s2.lineTo(100, 100, 0); mesh.addSegment(s2);
Trzeci segment zawiera dwie krzywe tworzące falę. Krzywe tworzy się za pomocą metody curveTo(). Jako właściwości w pierwszej kolejności podaliśmy pozycje x, y oraz z dla punktu kontrolnego, inaczej zwanego też koordynatem. Punkt ten, podobnie jak przy rysowaniu krzywych 2D, odpowiada za wygięcie linii. Po podaniu pozycji tego punktu podajemy współrzędne dla punktu, w którym linia ma się zakończyć. W tym segmencie pokazaliśmy, że możemy dodawać więcej niż jedną krzywiznę. var s3:Segment = new Segment(); s3.material = new ShadingColorMaterial(0x39DF18, { wireColor:0xFF0000 } ); s3.curveTo(100, 0, 0, 100, -100, 0); s3.curveTo(100, -200, 0, 200, -200, 0); mesh.addSegment(s3);
W metodzie onEnterFrame() zapisaliśmy obracanie obiektem mesh i odświeżanie widoku. Spis najistotniejszych właściwości oraz metod klasy Segment zawierają tabele 3.5 i 3.6. Tabela 3.5. Właściwości klasy Segment
Rysowanie krzywej przez podanie współrzędnych punktu kontrolnego i końcowego
drawPath(path:Path):void
Rysowanie ścieżki przez użycie obiektu Path
Face Obiekt Face zlokalizowany w pakiecie away3d.core.base jest zbiorem trzech punktów Vertex, które połączone tworzą trójkąt. Powierzchnia Face może zostać wypełniona dostępnymi w Away3D materiałami. Więcej o materiałach dowiesz się w rozdziale 4. „Materiały”. Podobnie jak obiekty klasy Segment, Face sam w sobie nie jest widoczny, do tego potrzebuje warstwy wizualnej, jaką jest obiekt klasy Mesh. Jak wspomnieliśmy wcześniej przy omawianiu klasy Mesh, zawiera ona metodę addFace(), która służy do dodawania obiektów Face tak, aby były widoczne na scenie. Przy tworzeniu obiektów klasy Face najważniejsze są trzy pierwsze argumenty konstruktora, które tworzą podstawowe wierzchołki trójkąta. Argumenty te nazwane są kolejno v0, v1 oraz v2 i są obiektami klasy Vertex. Położenie tych wierzchołków w podstawowej formie przedstawiono na rysunku 3.2. Rysunek 3.2.
Ułożenie wierzchołków obiektu klasy Face
W przykładzie zastosowania obiektów klasy Face stworzymy obiekt o nazwie mesh, złożony z ośmiu trójkątów, które połączymy tak, aby całość przypominała gwiazdę, tak jak to pokazano na rysunku 3.3.
public class faceExample extends Sprite { private var view:View3D; private var mesh:Mesh; public function faceExample() { view = new View3D(); view.x = stage.stageWidth * 0.5; view.y = stage.stageHeight * 0.5; addChild(view); drawFaces(); addEventListener(Event.ENTER_FRAME, onEnterFrame); } private function drawFaces():void { mesh = new Mesh(); mesh.bothsides = true; view.scene.addChild(mesh);
73
74
Flash i ActionScript. Aplikacje 3D od podstaw
}
}
}
var f1:Face = new Face(new Vertex(0, 0, 0), new Vertex(-100, -100, 50), new Vertex(100, -100, 50)); var f2:Face = new Face(new Vertex(0, 0, 0), new Vertex(100, -100, 50), new Vertex(100, 100, 50)); var f3:Face = new Face(new Vertex(0, 0, 0), new Vertex(100, 100, 50), new Vertex(-100, 100, 50)); var f4:Face = new Face(new Vertex(0, 0, 0), new Vertex(-100, 100, 50), new Vertex(-100, -100, 50)); var f5:Face = new Face(new Vertex(0, -200, 0), new Vertex(-100, -100, 50), new Vertex(100, -100, 50)); var f6:Face = new Face(new Vertex(200, 0, 0), new Vertex(100, -100, 50), new Vertex(100, 100, 50)); var f7:Face = new Face(new Vertex(0, 200, 0), new Vertex(100, 100, 50), new Vertex(-100, 100, 50)); var f8:Face = new Face(new Vertex(-200, 0, 0), new Vertex(-100, 100, 50), new Vertex(-100, -100, 50)); mesh.addFace(f1); mesh.addFace(f2); mesh.addFace(f3); mesh.addFace(f4); mesh.addFace(f5); mesh.addFace(f6); mesh.addFace(f7); mesh.addFace(f8); private function onEnterFrame(e:Event):void { mesh.rotationY -= 1; view.render(); }
Do stworzenia efektu pokazanego na rysunku 3.3 wykorzystaliśmy przede wszystkim klasę Face, której osiem obiektów odpowiednio ułożonych tworzy kształt gwiazdy. Do przedstawienia tego elementu na scenie potrzebowaliśmy również klasy Mesh, z kolei aby ustalić pozycję każdego z wierzchołków, zastosowaliśmy znany nam obiekt Vertex. Poza tymi klasami dodaliśmy również widok View3D, klasę zdarzenia Event i kontener Sprite. W ciele klasy faceExample zdefiniowaliśmy obiekt widoku view oraz kontener mesh poza konstruktorem. Dzięki temu są one dostępne dla wszystkich metod umieszczonych w klasie. W konstruktorze klasy w pierwszej kolejności stworzyliśmy widok oraz ustawiliśmy jego pozycję na środku okna aplikacji, przypisując właściwości x wartość równą połowie szerokości okna aplikacji stage.stageWidth * 0.5, a właściwości y wartość równą połowie wysokości okna stage.stageHeight * 0.5. W następnej kolejności, stosując metodę addChild(), dodaliśmy widok do zasobów stołu montażowego.
Rozdział 3. Obiekty
75
Później wywołaliśmy metodę drawLines() i dodaliśmy rejestrator zdarzenia Event. ENTER_FRAME.
W metodzie drawLines() na samym początku stworzyliśmy obiekt klasy Mesh i dodaliśmy go do sceny widoku, ustawiliśmy również wartość właściwości bothsides jako true, tak aby podczas obrotu były widoczne wszystkie ściany umieszczonych wewnątrz elementów. mesh = new Mesh(); mesh.bothsides = true; view.scene.addChild(mesh);
W kontenerze mesh umieściliśmy osiem obiektów klasy Face, w argumentach podając położenie każdego z jego wierzchołków. Współrzędne te nie odnoszą się do swojej przestrzeni, lecz do układu współrzędnych obiektu, w którym się znajdują. W naszym przypadku obiektem tym jest mesh. var f1:Face = new Face(new Vertex(0, 0, 0), new Vertex(-100, -100, 50), new Vertex(100, -100, 50)); var f2:Face = new Face(new Vertex(0, 0, 0), new Vertex(100, -100, 50), new Vertex(100, 100, 50)); var f3:Face = new Face(new Vertex(0, 0, 0), new Vertex(100, 100, 50), new Vertex(-100, 100, 50)); var f4:Face = new Face(new Vertex(0, 0, 0), new Vertex(-100, 100, 50), new Vertex(-100, -100, 50)); var f5:Face = new Face(new Vertex(0, -200, 0), new Vertex(-100, -100, 50), new Vertex(100, -100, 50)); var f6:Face = new Face(new Vertex(200, 0, 0), new Vertex(100, -100, 50), new Vertex(100, 100, 50)); var f7:Face = new Face(new Vertex(0, 200, 0), new Vertex(100, 100, 50), new Vertex(-100, 100, 50)); var f8:Face = new Face(new Vertex(-200, 0, 0), new Vertex(-100, 100, 50), new Vertex(-100, -100, 50));
Po stworzeniu wszystkich obiektów Face oraz nadaniu im odpowiednich właściwości dodaliśmy je do obiektu mesh, stosując metodę addFace(). mesh.addFace(f1); mesh.addFace(f2); mesh.addFace(f3); mesh.addFace(f4); mesh.addFace(f5); mesh.addFace(f6); mesh.addFace(f7); mesh.addFace(f8);
Podobnie jak w przypadku klasy Vertex, znajomość metod i właściwości klasy Face jest potrzebna do lepszego zrozumienia sposobu funkcjonowania i wyświetlania bardziej złożonych brył w przestrzeni trójwymiarowej. Z tego powodu w tabelach 3.7 i 3.8 wypisane zostały najważniejsze właściwości i metody klasy Face.
76
Flash i ActionScript. Aplikacje 3D od podstaw
Tabela 3.7. Właściwości klasy Face
Nazwa
Rodzaj
Wartość domyślna Opis
area
Number
NaN
Zwraca wyliczoną wartość płaskiej powierzchni obiektu Face
material
Material
null
Definiuje pokrycie powierzchni obiektu Face
back
Material
null
Definiuje pokrycie tylnej części obiektu Face
isBack
Boolean
false
Określa, czy obiekt Face będzie miał tylną stronę
normal
Vector3D
uvs
Vector
v0
Vertex
null
Punkt v0 obiektu Face
v1
Vertex
null
Punkt v1 obiektu Face
v2
Vertex
null
Punkt v2 obiektu Face
Zwraca wektor normalny prostopadły do obiektu Face
Zwraca tablicę użytych obiektów typu UV na obiekcie Face
Od pozycji obiektu Face do ustalonego położenia rysuje krzywą
lineTo(x:Number, y:Number, z:Number):void
Od pozycji obiektu Face do ustalonego położenia rysuje prostą
moveTo(x:Number, y:Number, z:Number):void
Zmiana pozycji obiektu Face
invert():void
Zmienia punkty v1, v2 oraz uv1 i uv2, odwracając w ten sposób obiekt Face
Sprites Zanim zajmiemy się przestrzennymi obiektami dostępnymi w Away3D, przyjrzymy się obiektom, które na pierwszy rzut oka sprawiają wrażenie, jakby były stworzone bezpośrednio w kodzie ActionScript bez jakiejkolwiek biblioteki 3D. Klasy umieszczone w pakiecie away3d.sprites tworzą dwuwymiarowe obiekty osadzone w przestrzeni trójwymiarowej, które niezależnie od pozycji kamery są zawsze skierowane w jej stronę. Obiekty klas, które omówimy w tym podrozdziale, przeważnie wykorzystuje się w celu optymalizacji i poprawienia wydajności aplikacji. Przyjmując jako przykład scenę przestrzeni kosmicznej, na której tle przemieszczają się komety, nie trzeba stosować trójwymiarowych obiektów do
Rozdział 3. Obiekty
77
ich wyświetlenia. Zamiast tego można przygotować płaski element graficzny i osadzić go na obiekcie klasy z pakietu away3d.sprites. W tym podrozdziale poznamy klasy Sprite3D, MovieClipSprite oraz DirectionalSprite. Poza nimi istnieje jeszcze klasa DepthOfFieldSprite, ale o niej wspomnimy przy okazji omawiania głębi ostrości w rozdziale 9. „Kamery”. Na początek jednak napiszemy klasę bazową, w której wykorzystamy wszystkie wyżej wymienione klasy z pakietu away3d.sprites.
Klasa bazowa Jak wspomniałem, elementy typu Sprite często wykorzystuje się, aby zoptymalizować kod aplikacji, na przykład w sytuacjach, gdy dany obiekt występuje w dużych ilościach i można zastąpić go elementem graficznym takim jak bitmapa. Poza takimi operacjami Sprite nadaje się do tworzenia gier klimatem nawiązujących do czasów Doom, Duke Nukem 3D, Shadow Warrior bądź Blood. Nawiązując do tych tytułów, w naszym przykładzie przedstawimy głównego bohatera otoczonego przez zgraję potworów, tak jak to zaprezentowano na rysunku 3.4. W tym celu posłużyliśmy się obiektami Sprite3D, MovieClipSprite oraz DirectionalSprite, poza tym dodamy również obiekt klasy GridPlane, którego zadaniem będzie zaznaczenie tego, że wszystko dzieje się w przestrzeni 3D, a nie bezpośrednio na stole montażowym aplikacji. Rysunek 3.4.
Obiekty z pakietu away3d.sprites rozmieszczone na planszy
78
Flash i ActionScript. Aplikacje 3D od podstaw
Aby osiągnąć taki efekt jak na rysunku 3.4, przepisz i skompiluj następujący kod źródłowy: package { import import import import import import import import import import import import import
public class spritesExample extends Sprite { private var view:View3D; private var hero:Mesh; public function spritesExample() { stage.align = StageAlign.TOP_LEFT; stage.scaleMode = StageScaleMode.NO_SCALE; view = new View3D(); view.camera.position = new Vector3D(0, 600, -1000); view.camera.lookAt(new Vector3D(0, 0, 0)); addChild(view); var grid:GridPlane = new GridPlane( { width:1000, height:1000, segmentsH:10, segmentsW:10 } ); view.scene.addChild(grid); onResize(); initSprite3DObjects(); initMovieClipSpriteObjects(); initDirectionalSpriteObject(); stage.addEventListener(Event.RESIZE, onResize); addEventListener(Event.ENTER_FRAME, onEnterFrame); } private function initSprite3DObjects():void { var s3d:Sprite3D = new Sprite3D(new BitmapFileMaterial('../../ resources/sprites/doom/monster.png'), 91, 74); var monster1:Mesh = new Mesh( { x: -300, z: 300 } ); monster1.addSprite(s3d);
Rozdział 3. Obiekty
79
var monster2:Mesh = monster1.clone() as Mesh; monster2.x = 300; var monster3:Mesh = monster2.clone() as Mesh; monster3.z = -300; var monster4:Mesh = monster3.clone() as Mesh; monster4.x = -300; view.scene.addChild(monster1); view.scene.addChild(monster2); view.scene.addChild(monster3); view.scene.addChild(monster4); } private function initMovieClipSpriteObjects():void { var monster1:Mesh = new Mesh( { z: 300 } ); monster1.addSprite(new MovieClipSprite(new Monster())); var monster2:Mesh = new Mesh( { z: -300 } ); monster2.addSprite(new MovieClipSprite(new Monster())); var monster3:Mesh = new Mesh( { x: 300 } ); monster3.addSprite(new MovieClipSprite(new Monster())); var monster4:Mesh = new Mesh( { x: -300 } ); monster4.addSprite(new MovieClipSprite(new Monster())); view.scene.addChild(monster1); view.scene.addChild(monster2); view.scene.addChild(monster3); view.scene.addChild(monster4); } private function initDirectionalSpriteObject():void { hero = new Mesh(); view.scene.addChild(hero); var ds:DirectionalSprite = new DirectionalSprite(null, 210, 216); ds.addDirectionalMaterial(new Vertex(0, 0, -1), new BitmapFileMaterial('../../resources/sprites/duke/f.png')); ds.addDirectionalMaterial(new Vertex(0, 0, 1), new BitmapFileMaterial('../../resources/sprites/duke/b.png')); ds.addDirectionalMaterial(new Vertex(1, 0, 0), new BitmapFileMaterial('../../resources/sprites/duke/r.png')); ds.addDirectionalMaterial(new Vertex(-1, 0, 0), new BitmapFileMaterial('../../resources/sprites/duke/l.png')); ds.addDirectionalMaterial(new Vertex(-.75, 0, -.75), new BitmapFileMaterial('../../resources/sprites/duke/fl.png')); ds.addDirectionalMaterial(new Vertex(.75, 0, -.75), new BitmapFileMaterial('../../resources/sprites/duke/fr.png')); ds.addDirectionalMaterial(new Vertex(-.75, 0, .75), new BitmapFileMaterial('../../resources/sprites/duke/bl.png')); ds.addDirectionalMaterial(new Vertex(.75, 0, .75), new BitmapFileMaterial('../../resources/sprites/duke/br.png')); hero.addSprite(ds); }
80
Flash i ActionScript. Aplikacje 3D od podstaw private function onResize(e:Event = null):void { view.x = stage.stageWidth * .5; view.y = stage.stageHeight * .5; } private function onEnterFrame(e:Event):void { hero.rotationY++; view.render(); } } }
Niektóre fragmenty kodu, takie jak metody initSprite3DObjects(), initMovieClip SpriteObjects(), initDirectionalSpriteObject(), zostaną wyjaśnione w dalszych częściach tego podrozdziału, teraz przyjrzymy się ogólnie jego zawartości. Głównym celem tego przykładu było pokazanie, w jaki sposób i do jakich sytuacji można wykorzystać elementy pakietu away3d.sprites. My umieściliśmy głównego bohatera na środku sceny i otoczyliśmy go ośmioma wrogami. Aby każdy z tych elementów był widoczny na scenie, musieliśmy zastosować obiekt klasy Mesh jako kontener dla każdej postaci z osobna. Z klas biblioteki Away3D dodaliśmy również klasę Vertex do ustalenia punktów w przestrzeni, klasę GridPlane generującą planszę, jeden z rodzajów materiałów BitmapFileMaterial oraz trzy klasy billboardów: Sprite3D, MovieClipSprite i DirectionalSprite. W ciele klasy poza wszystkimi metodami zadeklarowaliśmy dwa obiekty: widok Away3D pod nazwą view oraz obiekt klasy Mesh o nazwie hero, który będzie przechowywał obiekt klasy DirectionalSprite głównego bohatera. W konstruktorze klasy spritesExample w pierwszej kolejności ustawiliśmy wyrównanie stołu montażowego względem okna oraz to, że elementy w nim umieszczone nie będą skalowane wraz ze zmianą rozmiaru okna. stage.align = StageAlign.TOP_LEFT; stage.scaleMode = StageScaleMode.NO_SCALE;
Następnie stworzyliśmy widok View3D i ustawiliśmy pozycję kamery tak, aby widok pasował mniej więcej do grafiki głównego bohatera. Po zamianie pozycji musieliśmy zastosować metodę lookAt() na obiekcie kamery, aby skorygować kierunek, w którym jest zwrócona. Po ustaleniu wszystkich opcji związanych z widokiem dodaliśmy go do listy wyświetlanych obiektów w naszej aplikacji, stosując metodę addChild(). view = new View3D(); view.camera.position = new Vector3D(0, 600, -1000); view.camera.lookAt(new Vector3D(0, 0, 0)); addChild(view);
Rozdział 3. Obiekty
81
Do celów pomocniczych stworzyliśmy planszę, która jest obiektem klasy GridPlane; więcej o tym dowiemy się w dalszych częściach tego rozdziału. var grid:GridPlane = new GridPlane({width:1000,height:1000,segmentsH:10,segmentsW:10}); view.scene.addChild(grid);
Po stworzeniu widoku i planszy wywołaliśmy cztery różne metody i zarejestrowaliśmy nasłuch dwóch zdarzeń: Event.ENTER_FRAME i zmiany rozmiaru okna Event.RESIZE. onResize(); initSprite3DObjects(); initMovieClipSpriteObjects(); initDirectionalSpriteObject(); stage.addEventListener(Event.RESIZE, onResize); addEventListener(Event.ENTER_FRAME, onEnterFrame);
W kodzie metody onResize(), który wywoływany jest przy każdorazowej zmianie wielkości okna, zapisaliśmy wycentrowanie widoku. Aby móc wykorzystać tę metodę w innym miejscu niż tylko przy wystąpieniu zdarzenia Event.RESIZE, musieliśmy argumentowi e przypisać wartość null. Dzięki temu podczas wywołania metody onResize() w konstruktorze klasy spritesExample nie pojawi się błąd braku argumentu typu Event. view.x = stage.stageWidth * .5; view.y = stage.stageHeight * .5;
W metodzie wywoływanej zdarzeniem Event.ENTER_FRAME zapisaliśmy odświeżenie zawartości sceny oraz nieustanny obrót obiektu hero. hero.rotationY++; view.render();
O ogólnej zawartości kodu to wszystko, teraz przyjrzyjmy się poszczególnym typom obiektów zastosowanych do wyświetlania dwuwymiarowych grafik.
Sprite3D Obiekt klasy Sprite3D jest prostokątną figurą 2D umieszczoną w przestrzeni trójwymiarowej. Skierowany jest zawsze w stronę kamery i ma tylko jeden punkt określający jego pozycję. Jedynym sposobem oddziaływania Sprite3D na otaczające go środowisko jest zmienienie swojej wielkości względem odległości od kamery. Dla przykładu: dostępna w tej klasie metoda rotation() nie definiuje obrotu obiektu względem trzech osi, tylko samej osi Z.
82
Flash i ActionScript. Aplikacje 3D od podstaw
Mimo że nie jest to element typowo trójwymiarowy, zakres jego zastosowań jest całkiem duży. W naszym przykładzie zastosowaliśmy go do wyświetlenia potwora, którego przedstawiono na rysunku 3.5. Rysunek 3.5.
Element graficzny osadzony w obiekcie klasy Sprite3D
W kodzie źródłowym naszego przykładu dodawanie obiektów Sprite3D zapisaliśmy w metodzie initSprite3DObjects(). W pierwszej kolejności stworzyliśmy obiekt s3d, podając jako argument nowy obiekt BitmapFileMaterial z określoną lokalizacją pliku graficznego. W kolejnych dwóch argumentach podaliśmy wymiary zgodne z szerokością i wysokością pliku PNG. var s3d:Sprite3D = new Sprite3D(new BitmapFileMaterial('../../resources/sprites/doom/monster.png'),91,74);
Następnie stworzyliśmy obiekt klasy Mesh o nazwie monster1, podając w jego argumentach położenie na scenie. Metodą addSprite() do jego zawartości dodaliśmy wcześniej utworzony element Sprite3D. var monster1:Mesh = new Mesh( { x: -300, z: 300 } ); monster1.addSprite(s3d);
Kolejne obiekty: monster2, monster3 i monster4, są klonami swoich poprzedników, chociaż ustawiliśmy je w innych pozycjach. Do stworzenia klonów wybranego obiektu stosuje się metodę clone(); należy ją wywołać na obiekcie, który ma być powielony. var monster2:Mesh = monster1.clone() as Mesh; monster2.x = 300; var monster3:Mesh = monster2.clone() as Mesh; monster3.z = -300; var monster4:Mesh = monster3.clone() as Mesh; monster4.x = -300;
Na końcu metody initSprite3DObjects(), po ustawieniu wszystkich obiektów, umieściliśmy je metodą addChild() na obiekcie sceny widoku. view.scene.addChild(monster1); view.scene.addChild(monster2); view.scene.addChild(monster3); view.scene.addChild(monster4);
Rozdział 3. Obiekty
83
W tabelach 3.9 i 3.10 przedstawiono właściwości i metody klasy Sprite3D. Tabela 3.9. Właściwości klasy Sprite3D
Nazwa
Rodzaj
Wartość domyślna
Opis
align
String
"center"
Określa wyrównanie grafiki osadzonej w obiekcie klasy Sprite3D
x
Number
Określa położenie obiektu względem osi X
y
Number
Określa położenie obiektu względem osi Y
z
Number
Określa położenie obiektu względem osi Z
width
Number
10
Określa szerokość obiektu
height
Number
10
Określa wysokość obiektu
material
Material
null
Definiuje rodzaj materiału pokrywającego obiekt
distanceScaling
Boolean
true
Określa, czy obiekt ma zmieniać swoją skalę proporcjonalnie do odległości
rotation
Number
0
Określa kąt obrotu obiektu
scaling
Number
1
W przypadku użycia materiału typu bitmapMaterial określa skalę obiektu
MovieClipSprite Obiekt klasy MovieClipSprite jest bardzo podobny do poznanego wcześniej Sprite3D, różnica między nimi polega na rodzaju wyświetlanego źródła grafiki. W MovieClip Sprite jako grafikę należy podać odwołanie do elementu DisplayObject, którym może być między innymi MovieClip. Dzięki temu istnieje możliwość stosowania dwuwymiarowych animowanych obiektów w przestrzeni trójwymiarowej. W naszym przykładzie zastosowaliśmy prostą animację, w której potwór przedstawiony na rysunku 3.6 w błyskawicznym tempie zmienia swój kolor na czerwony. Tego rodzaju animacja może posłużyć jako wizualizacja trafienia przeciwnika.
84
Flash i ActionScript. Aplikacje 3D od podstaw
Rysunek 3.6.
Obiekt klasy Monster zastosowany w MovieClipSprite
W metodzie initMovieClipSpriteObjects() zapisaliśmy tworzenie obiektu pokazanego na rysunku 3.6. Najpierw stworzyliśmy obiekt klasy Mesh o nazwie monster1 i nadaliśmy mu pozycję w przestrzeni. W następnej kolejności dodaliśmy element MovieClipSprite metodą addSprite(). Każdy z tych obiektów tworzyliśmy bezpośrednio w tej metodzie i jako źródło grafiki zastosowaliśmy odwołania do klasy Monster, która w zasadzie służy jako połączenie do obiektu klasy MovieClip, osadzonego w zasobach aplikacji. var monster1:Mesh = new Mesh( { z: 300 } ); monster1.addSprite(new MovieClipSprite(new Monster()));
Następne trzy obiekty potworów stworzyliśmy w identyczny sposób, stosując następujący zapis: var monster2:Mesh = new Mesh( { z: -300 } ); monster2.addSprite(new MovieClipSprite(new Monster())); var monster3:Mesh = new Mesh( { x: 300 } ); monster3.addSprite(new MovieClipSprite(new Monster())); var monster4:Mesh = new Mesh( { x: -300 } ); monster4.addSprite(new MovieClipSprite(new Monster()));
Tak samo jak w metodzie initSprite3DObjects(), po ustawieniu wszystkich potworów dodaliśmy je do sceny, stosując metodę addChild(). view.scene.addChild(monster1); view.scene.addChild(monster2); view.scene.addChild(monster3); view.scene.addChild(monster4);
W tabelach 3.11 i 3.12 przedstawiono właściwości i metody klasy MovieClipSprite. Tabela 3.11. Właściwości klasy MovieClipSprite
Nazwa
Rodzaj
movieClip
DisplayObject
Wartość domyślna
Opis Określa obiekt stosowany jako wyświetlane źródło grafiki
DirectionalSprite Jak widać, po skompilowaniu przykładu spritesExample główny bohater obraca się nieustannie wokół własnej osi, przynajmniej my tak to widzimy. Faktycznie obiektowi o nazwie hero nadaliśmy opcję obrotu rotationY++, ale nie wprawia ona w ruch osadzonej grafiki, tylko służy jako wyznacznik aktualnego kąta obrotu obiektu, w którym umieszczono obiekt klasy DirectionalSprite. Pamiętajmy, że obiekty DirectionalSprite są dwuwymiarowe i zawsze skierowane w stronę kamery, poza tym nie mogą się obracać wokół własnej osi Y. W rzeczywistości wyświetlona animacja obrotu postaci bazuje na kilku specjalnie przygotowanych grafikach przedstawiających postać z kilku różnych stron. Tego typu praktyki są dobrą metodą optymalizacji w grach, w których świat przedstawiony jest w rzucie izometrycznym. Stosując klasę DirectionalSprite, można zastąpić skomplikowany model kilkoma dwuwymiarowymi grafikami, aby uzyskać złudzenie generowania trójwymiarowego obiektu. Na rysunku 3.7 przedstawiono osiem różnych plików graficznych o stałych wymiarach; każdy z tych rysunków odpowiada za zwrot obiektu w konkretnym kierunku. Rysunek 3.7.
Elementy graficzne wykorzystane w obiekcie DirectionalSprite
Tworząc obiekt klasy DirectionalSprite, określamy jego podstawowe źródło wyświetlanej grafiki, planowaną szerokość i wysokość obiektu. Kolejne argumenty są takie same jak w poprzednio poznanych klasach Sprite3D i MovieClipSprite.
86
Flash i ActionScript. Aplikacje 3D od podstaw
Najważniejsza w tej klasie jest metoda addDirectionalMaterial(), która służy do dodawania źródła grafiki. W jej argumentach w pierwszej kolejności podaje się punkt orientacyjny Vertex, a następnie odpowiedni dla niego materiał. Punkty te są wyznacznikiem stopnia obrotu kamery bądź samego obiektu DirectionalSprite. W naszym przypadku zastosowaliśmy osiem różnych kątów, które zmieniają się co mniej więcej 45 stopni. Podstawowe cztery kierunki oznaczyliśmy na osiach X oraz z liczbami –1 i 1, z kolei dla pozostałych czterech zastosowaliśmy wartość 0.75, ponieważ ta dawała najlepsze rezultaty. Ponieważ obiekt DirectionalSprite jest zwrócony w stronę kamery, wartości na osiach Z we wszystkich punktach obrazków są ustawione odwrotnie. Dla przykładu zwróć uwagę na ujemną wartość osi Z dla obrazka f.png. Dzięki temu w początkowej fazie bohater jest ustawiony plecami do kamery. Alternatywnie można zmienić kąt całego obiektu mesh o 180 stopni.
W metodzie initDirectionalSpriteObject() naszego przykładu obiekt głównego bohatera stworzyliśmy, stosując następujący kod źródłowy: hero = new Mesh(); view.scene.addChild(hero); var ds:DirectionalSprite = new DirectionalSprite(null, 210, 216); ds.addDirectionalMaterial(new Vertex(0, 0, -1), new BitmapFileMaterial('../../resources/sprites/duke/f.png')); ds.addDirectionalMaterial(new Vertex(0, 0, 1), new BitmapFileMaterial('../../resources/sprites/duke/b.png')); ds.addDirectionalMaterial(new Vertex(1, 0, 0), new BitmapFileMaterial('../../resources/sprites/duke/r.png')); ds.addDirectionalMaterial(new Vertex(-1, 0, 0), new BitmapFileMaterial('../../resources/sprites/duke/l.png')); ds.addDirectionalMaterial(new Vertex(-.75, 0, -.75), new BitmapFileMaterial('../../resources/sprites/duke/fl.png')); ds.addDirectionalMaterial(new Vertex(.75, 0, -.75), new BitmapFileMaterial('../../resources/sprites/duke/fr.png')); ds.addDirectionalMaterial(new Vertex(-.75, 0, .75), new BitmapFileMaterial('../../resources/sprites/duke/bl.png')); ds.addDirectionalMaterial(new Vertex(.75, 0, .75), new BitmapFileMaterial('../../resources/sprites/duke/br.png')); hero.addSprite(ds);
W tym bloku kodu w pierwszej kolejności stworzyliśmy obiekt klasy Mesh o nazwie hero, następnie odwołując się do obiektu sceny, dodaliśmy go do jej zawartości, stosując metodę addChild(). Obiekt klasy DirectionalSprite nazwaliśmy ds i ustawiliśmy w konstruktorze null dla materiału, wartość liczbową 210 jako szerokość oraz wysokość równą 216. Po utworzeniu tego obiektu osiem razy wywołaliśmy metodę addDirectionalMaterial(), gdzie jako argumenty podaliśmy różne kierunki i odpowiadające im obrazki w formie materiału BitmapFileMaterial. Sam rodzaj tego materiału na chwilę obecną
Rozdział 3. Obiekty
87
nie jest ważny, istotne jest jedynie to, że odwoływaliśmy się w nim do plików graficznych o formacie PNG. Na końcu do obiektu hero dodaliśmy obiekt ds, stosując metodę addSprite(). Dzięki temu nasz bohater stał się widoczny na scenie. W tabelach 3.13 i 3.14 przedstawiono właściwości i metody klasy DirectionalSprite. Tabela 3.13. Właściwości klasy DirectionalSprite
Nazwa
Rodzaj
Wartość Opis domyślna
materials
Array
null
align
String
"center"
Domyślne ustawienie grafiki w obiekcie
scaling
Number
1
Poziom skalowania wyświetlanego źródła grafiki
distanceScaling
Boolean
true
Określa, czy obiekt ma być skalowany w zależności od odległości od kamery
material
Material
null
Definiuje rodzaj materiału pokrywającego obiekt
width
Number
10
Określa szerokość obiektu
height
Number
10
Określa wysokość obiektu
Tablica materiałów użytych w obiekcie klasy DirectionalSprite
Primitives Zawarte w pakiecie primitives klasy napisane zostały przez ekipę Away3D po to, by zaoszczędzić trochę czasu programistom na generowanie podstawowych i najczęściej stosowanych brył. Z czasem kolekcja ta była poszerzana o kolejne rozmaite klasy, na przykład taką, której obiekt ma formę żółwia morskiego. W przeciwieństwie do obiektów klas Sprite3D, MovieClipSprite i DirectionalSprite obiekty klas zawartych w pakiecie primitives są przestrzenne. Klasy umieszczone w tym pakiecie dziedziczą po klasie AbstractPrimitive, którą poznamy jako pierwszą, ale zanim to nastąpi, napiszemy klasę bazową dla tego podrozdziału.
88
Flash i ActionScript. Aplikacje 3D od podstaw
Przykład Aby przedstawić podstawowe obiekty z pakietu away3d.primitives, napiszemy aplikację, w której umieszczone zostaną wszystkie interesujące nas obiekty. Do ich wybrania i wyświetlenia posłużymy się komponentem ComboBox wraz z prostym panelem użytkownika. Wspomniany panel będzie obiektem klasy PrimitivesPanel, którą zapiszemy w pliku o tej samej nazwie. Poza umieszczeniem obiektu typu ComboBox napiszemy również metodę primitiveChange(), wysyłającą zdarzenia informujące o wybranej z pola wyboru opcji. Dopiszemy również metodę draw(), której celem będzie przerysowanie tła panelu przy zmianach rozmiaru okna aplikacji. Teraz przyjrzyj się poniższemu kodowi źródłowemu i przepisz go do nowego pliku PrimitivesPanel.as, a później zajmiemy się klasą właściwą dla tego przykładu. package { import import import import import import
Gdy masz gotową klasę panelu użytkownika, przepisz poniższy kod do pliku PrimitivesExample.as. Miej na uwadze to, że klasa panelu użytkownika Primitives Panel nie została w tym kodzie zaimportowana, co oznacza, że znajduje się ona w tym samym miejscu co klasa właściwa primitivesExample. package { import import import import import import import import import
Flash i ActionScript. Aplikacje 3D od podstaw //miejsce na pozostałe obiekty //container.addChild(arrowhead); } private function primitiveChangeEventHandler(e:Event = null):void { while(container.children.length > 0) container.removeChild(container.children[0]); if (e != null) { switch(e.type) { default:break; } } } } }
Jak widać, kod nie jest skomplikowany. Zaczęliśmy od dodania potrzebnych klas zarówno ze standardowych pakietów języka ActionScript 3.0, jak i z biblioteki Away3D. Ponieważ celem przykładu jest przedstawienie większości dostępnych w Away3D trójwymiarowych obiektów, zaimportowaliśmy cały pakiet away3d. primitives, aby zaoszczędzić sobie trochę czasu i linijek kodu. import away3d.primitives.*;
Poza tym dodaliśmy również klasy widoku View3D, punkty Vertex oraz kontener ObjectContainer3D, który będzie pomocny przy zmianie wyświetlanych obiektów. Standardowo dostępnych klas użyliśmy między innymi do kontrolowania wymiarów okna aplikacji i ustalenia pozycji na trzech osiach. import import import import import
W klasie PrimitiveExample zadeklarowaliśmy obiekt panel napisanej przez nas klasy PanelPrimitives, view jako obiekt klasy widoku View3D oraz obiekt klasy Object Container3D, w którym umieszczane będą wyświetlane trójwymiarowe obiekty. private var panel:PrimitivesPanel; private var view:View3D; private var container:ObjectContainer3D;
W następnej kolejności zadeklarowaliśmy szereg obiektów klas dostępnych w pakiecie away3d.primitives.
Rozdział 3. Obiekty
93
W konstruktorze klasy w pierwszej kolejności ustawiliśmy odpowiednie wartości skalowania okna oraz wyrównania, stosując następujący zapis: stage.align = StageAlign.TOP_LEFT; stage.scaleMode = StageScaleMode.NO_SCALE;
Następnie stworzyliśmy widok i ustawiliśmy nową pozycję dla kamery, tak aby spoglądała ona na obiekty umieszczone w centrum sceny z innej perspektywy: view = new View3D(); view.camera.position = new Vector3D(0, 600, -1000); view.camera.lookAt(new Vector3D(0, 0, 0)); addChild(view);
W kolejnych linijkach odwołaliśmy się do metod, które mają swoje osobne zadania do wykonania, oraz dodaliśmy detektory zdarzeń Event.RESIZE i Event.ENTER_FRAME. initPrimitives(); addPanel(); onResize(); stage.addEventListener(Event.RESIZE, onResize); addEventListener(Event.ENTER_FRAME, onEnterFrame);
Metoda initPrimitives() jest jedną z dwóch najważniejszych metod w tym przykładzie. W tym właśnie miejscu będziemy tworzyli poszczególne obiekty i nadawali ich właściwościom odpowiednie wartości. W chwili obecnej zawiera ona jedynie kod tworzący obiekt kontenera i dodający go do sceny Away3D. Zwróć uwagę, że na końcu tej metody umieszczony w komentarzu został zapis container.add Child(arrowhead). Celem dodania tej linijki kodu jest spowodowanie, by obiekt arrowhead był pierwszym wyświetlanym obiektem po uruchomieniu aplikacji. W chwili obecnej nie jest potrzebny, ale po utworzeniu obiektu arrowhead należy usunąć komentarz z tej linijki. W metodzie addPanel() stworzyliśmy i dodaliśmy do listy wyświetlanych obiektów aplikacji obiekt panelu użytkownika. panel = new PrimitivesPanel(); addChild(panel);
W kolejnych linijkach kodu metody addPanel() zapisaliśmy detektory dla zdarzeń wyboru każdej z dostępnych opcji pola wyboru zawartego w panelu użytkownika. W razie wystąpienia któregokolwiek z tych zdarzeń wywoływana jest metoda primitiveChangeEventHandler(). Ponieważ we wszystkich detektorach dodanych w metodzie addPanel() wywoływana jest metoda primitiveChangeEventHandler(), musieliśmy w jej bloku kodu umieścić instrukcję warunkową switch(), która uruchamia odpowiedni kod w zależności od przechwyconego zdarzenia. Przed zapisaniem wspomnianej instrukcji
94
Flash i ActionScript. Aplikacje 3D od podstaw
warunkowej dodaliśmy również pętlę while, w której usuwany jest pierwszy obiekt z tablicy children. Dzięki temu możemy łatwo i skutecznie usunąć całą dotychczasową zawartość obiektu container, a dopiero wtedy dodać nowe elementy. while(container.children.length > 0) container.removeChild(container.children[0]); if (e != null) { switch(e.target.value) { default:break; } }
W metodzie onResize() zapisaliśmy zmianę pozycji widoku uwarunkowaną wymiarami okna całej aplikacji, tak aby view zawsze było w samym środku okna. Ustawienie domyślnej wartości null dla argumentu e pozwala na uruchomienie metody również niezależnie od zdarzenia Event.RESIZE. Dzięki temu nie musieliśmy wcześniej w konstruktorze powielać tych linijek kodu: view.x = stage.stageWidth * .5; view.y = stage.stageHeight * .5;
Zadaniem metody onEnterFrame() jest odświeżanie zawartości widoku przez zastosowanie metody render() oraz wywoływanie obrotu kontenera względem osi Y, aby wybrane figury były widoczne z każdej strony. container.rotationY++; view.render();
AbstractPrimitive Klasa AbstractPrimitive sama w sobie nie tworzy obiektu o konkretnej formie, jest ona bazą dla wszystkich klas z pakietu away3d.primitives. Dzięki niej wybrany obiekt można wyświetlić, ustawić w przestrzeni trójwymiarowej i zmodyfikować jego budowę tak, aby odpowiadał naszym oczekiwaniom. Do tego celu wystarczy wiedza z poprzednich podpunktów tego rozdziału, znajomość kilku właściwości i metod klasy AbstractPrimitive oraz znajomość budowy klasy dziedziczącej z AbstractPrimitive. Klasa AbstractPrimitive jest potomną klasy Mesh, co sprawia, że staje się ona warstwą wizualną dla zawartych w niej obiektów Face, Sprite3D oraz Segment. Poniżej w tabelach 3.15 oraz 3.16 wypisane są ważniejsze właściwości oraz metody klasy AbstractPrimitive, które przydadzą się do stworzenia niestandardowego obiektu.
Rozdział 3. Obiekty
95
Tabela 3.15. Właściwości klasy AbstractPrimitive
Nazwa
Rodzaj
Opis
boundingRadius Number
Zwraca długość promienia granic obiektu
elements
Vector.
Zwraca tablicę wszystkich elementów zawartych w obiekcie
faces
Vector.
Zwraca tablicę wszystkich elementów typu Face zawartych w obiekcie
segments
Vector.
Zwraca tablicę wszystkich elementów typu Segment zawartych w obiekcie
sprites
Vector. Zwraca tablicę wszystkich elementów typu Sprite3D
zawartych w obiekcie Vertices
Vector.
Zwraca tablicę wszystkich punktów Vertex zawartych w obiekcie
geometry
Geometry
Definiuje obiekt typu Geometry wykorzystany w obiekcie
objectDepth
Number
Zwraca wartość liczbową głębi obiektu
objectHeight
Number
Zwraca wartość liczbową wysokości obiektu
objectWidth
Number
Zwraca wartość liczbową szerokości obiektu
maxX
Number
Zwraca maksymalną wartość na osi X obiektu
minX
Number
Zwraca minimalną wartość na osi X obiektu
maxY
Number
Zwraca maksymalną wartość na osi Y obiektu
minY
Number
Zwraca minimalną wartość na osi Y obiektu
maxZ
Number
Zwraca maksymalną wartość na osi Z obiektu
minZ
Number
Zwraca minimalną wartość na osi Z obiektu
Tabela 3.16. Metody klasy AbstractPrimitive
Nazwa
Opis
AbstractPrimitive(init:Object = null)
Konstruktor
buildPrimitive():void
Metoda pomocnicza przy tworzeniu obiektu, czyści zawartość obiektu
updatePrimitive():void
Metoda zmienia strukturę geometryczną obiektu
createVertex(x:Number, y:Number, z:Number):Vertex
Tworzenie obiektu Vertex w wewnętrznej przestrzeni obiektu
createUV(u:Number, v:Number):UV
Tworzenie współrzędnych uv w wewnętrznej przestrzeni obiektu
Tworzenie obiektu Segment w wewnętrznej przestrzeni obiektu
96
Flash i ActionScript. Aplikacje 3D od podstaw
Metody przedstawione w tabeli 3.16 poza buildPrimitive() umieszczone są w przestrzeni nazw arcane, zlokalizowanej w pakiecie away3d.
Gdy znamy najważniejsze metody oraz właściwości dostępne w klasie Abstract Primitive, możemy zbudować nasz pierwszy niestandardowy obiekt. Na rysunku 3.8 przedstawiono figurę przestrzenną przypominającą wyglądem grot strzały złożony z kilku ścian. Rysunek 3.8.
Obiekt arrowhead
Aby uzyskać taki efekt, musimy skonstruować klasę, która będzie generowała takie obiekty, umożliwiając przy okazji decydowanie o liczbie ścian, z jakiej mają się składać. Stworzymy klasę, w której ustalimy trzy właściwości: width, height oraz sides. Pierwsze dwie będą definiowały wymiary całej figury przestrzennej, a trzecia właściwość określać będzie liczbę trójkątów. Przepisz następujący kod źródłowy, a następnie zajmiemy się omawianiem jego zawartości. package { import away3d.primitives.AbstractPrimitive; import away3d.arcane; import away3d.core.base.UV; use namespace arcane; public class Arrowhead extends AbstractPrimitive { private var _height:Number; private var _width:Number; private var _sides:Number;
Rozdział 3. Obiekty private var _ang:Number; public function Arrowhead(init:Object = null) { super(init); width = ini.getNumber("width", 100, { min:1 } ); height = ini.getNumber("height", 150, {min:1}); sides = ini.getInt("sides", 3, { min:1 } ); ang = 360 / _sides; } protected override function buildPrimitive():void { super.buildPrimitive(); var i:Number = _sides; while(i--) { var currAng = i * _ang; var a = createVertex(0, _height, 0); var b = createVertex(0, 0, 0); var c = createVertex(Math.cos(currAng / 180 * Math.PI) * (_width * .5), 0, Math.sin(currAng / 180 * Math.PI) * (_width * .5)); addFace(createFace(a, b, c, null, new UV(0, 0), new UV(1, 0), new UV(0, 1))); } } public function get width():Number { return _width; } public function set width(val:Number):void { if (_width == val) return; width = val; primitiveDirty = true; } public function get height():Number { return _height; } public function set height(val:Number):void { if (_height == val) return; _height = val; _primitiveDirty = true; }
97
98
Flash i ActionScript. Aplikacje 3D od podstaw public function get sides():Number { return _sides; } public function set sides(val:Number):void { if (_sides == val) return; sides = val; ang = 360 / val; primitiveDirty = true; } } }
Schemat klasy Arrowhead został zapożyczony z klas znajdujących się w pakiecie away3d.primitives, które poznamy w kolejnych podpunktach. Na początku zaimportowaliśmy potrzebną klasę AbstractPrimitive, z której dziedziczymy, klasę UV potrzebną do ustalenia współrzędnych uv w obiektach Face oraz przestrzeń nazw arcane. Aby móc korzystać z metod i właściwości umieszczonych w arcane, musieliśmy poza samym zaimportowaniem również ją uruchomić, stosując use namespace. W ciele klasy Arrowhead zdefiniowaliśmy cztery prywatne zmienne: _height, _width, _sides oraz _ang. Pierwsze dwie określają wymiary obiektu, trzecia zawierać będzie liczbę ścian, z kolei _ang to wyliczony kąt pomiędzy każdą ze ścian. W konstruktorze jako argument wpisaliśmy obiekt init klasy Object, w którym można zadeklarować odpowiednie wartości dla poszczególnych właściwości. Domyślnie argument ten jest równy null, co oznacza, że nie jest on konieczny. W pierwszej linijce konstruktora odwołaliśmy się do rodzica, podając w argumencie wcześniej omówiony obiekt init. W kolejnych linijkach bloku konstruktora ustawiliśmy wartości dla właściwości potrzebnych do skonstruowania obiektu. Skorzystaliśmy w tym miejscu z obiektu init, który jest instancją klasy Init dostępnej we wszystkich obiektach klas dziedziczących po Object3D. Stosując metody getNumber() oraz getInt(), ustaliliśmy wartości domyślne oraz minimalne dla właściwości _width, _height i _sides. Dzięki temu podanie nieodpowiednich wartości spowoduje zastosowanie domyślnych. _width = ini.getNumber("width", 100, { min:1 } ); _height = ini.getNumber("height", 150, { min:1 } ); _sides = ini.getInt("sides", 3, { min:1 } );
Do określenia kąta między obiektami klasy Face zastosowaliśmy prosty wzór, w którym wartość 360 podzieliliśmy przez ustaloną liczbę ścian. _ang = 360 / _sides;
Rozdział 3. Obiekty
99
Klasa Init umieszczona w pakiecie away3d.core.utils generuje obiekt pomocniczy dla ustawiania różnego rodzaju wartości dla właściwości. W swoich zasobach ma ona między innymi następujące metody: getArray(), getBitmap(), getBoolean(), getColor(), getInt(), getMaterial(), getNumber(), getString().
Po konstruktorze nadpisaliśmy metodę buildPrimitive(), w której zaprogramowaliśmy proces tworzenia figury przestrzennej. W pierwszej linijce odwołaliśmy się do tej samej metody w klasie AbstractPrimitive, stosując przedrostek super. super.buildPrimitive();
Następnie zdefiniowaliśmy lokalną zmienną i o wartości równej _sides, po czym zastosowaliśmy ją w pętli while. W pętli tej stworzyliśmy nową zmienną, która określa aktualny kąt dla jednego z wierzchołków trójkąta. var i:Number = _sides; while(i--) { var currAng = i * _ang;
W następnych trzech linijkach zapisaliśmy tworzenie trzech punktów Vertex, korzystając z metody createVertex(). W argumentach tej metody podaliśmy odpowiednie wartości dla wierzchołków, tak aby trójkąt miał właściwą wysokość, szerokość i był skierowany pod stosownym kątem względem pozostałych ścian. var a = createVertex(0, _height, 0); var b = createVertex(0, 0, 0); var c = createVertex(Math.cos(currAng / 180 * Math.PI) * (_width * .5), 0, Math.sin(currAng / 180 * Math.PI) * (_width * .5));
Na końcu pętli wszystkie utworzone punkty wykorzystaliśmy do stworzenia obiektu Face. W tej jednej linijce użyliśmy metody addFace(), której zadaniem jest dodanie do przestrzeni elementu stworzonego przez użycie metody createFace(). W argumentach tej metody w pierwszej kolejności podaliśmy stworzone wcześniej punkty Vertex, wartość null określa materiał, a kolejne obiekty UV oznaczają współrzędne uv dla punktów a, b i c. addFace(createFace(a, b, c, null, new UV(0, 0), new UV(1, 0), new UV(0, 1))); }
Kolejne metody są metodami ustawiającymi i pobierającymi wartości dla zdefiniowanych właściwości prywatnych. Stosowanie tego typu metod jest przydatne w sytuacjach, gdy przy okazji zmiany wartości prywatnej trzeba wykonać dodatkowe operacje. Dla przykładu: wywołując metodę ustawiającą height(), poza samym przypisaniem nowej wartości właściwości _height przypisaliśmy wartość true właściwości _primitiveDirty, bez której wszelkie zmiany nie byłyby widoczne.
100
Flash i ActionScript. Aplikacje 3D od podstaw
Z kolei przy zmianie wartości właściwości _sides dodatkowo wyliczyliśmy nową wartość kąta _ang, tak aby był on jednakowy między wszystkimi ścianami. To tyle w przypadku klasy Arrowhead. Aby uzyskać efekt z rysunku 3.8, musieliśmy również dodać odpowiedni kod w klasie bazowej. Do bloku kodu metody initPrimitives(), w której tworzone są wszystkie potrzebne obiekty, należy wpisać poniższy kod źródłowy: arrowhead = new Arrowhead(); arrowhead.y = -150; arrowhead.height = 300; arrowhead.width = 300; arrowhead.bothsides = true; arrowhead.sides = 3;
W ten sposób wygenerowany zostanie grot o trzech ścianach i wymiarach równych 300 pikselom. Dodatkowo aby przy obracaniu figury były widoczne wszystkie trójkąty, ustawiliśmy we właściwościach bothsides wartość true. Jak wspomniano wcześniej, na końcu metody initPrimitives() umieszczono linijkę kodu, który powoduje dodanie obiektu arrowhead do kontenera i wyświetlenie go przy uruchomieniu przykładu. container.addChild(arrowhead);
Ponieważ obiekt arrowhead pojawia się jako pierwszy po uruchomieniu przykładu, również na liście wyboru primitiveSelect musieliśmy w pierwszej kolejności ustawić opcję określającą ten obiekt. Jako etykiety i wartości tej opcji użyliśmy nazwy klasy AbstractPrimitive, ponieważ klasa Arrowhead nie jest integralną częścią biblioteki Away3D, a jedynie klasą, którą napisaliśmy, bazując na klasie AbstractPrimitive. Do instrukcji switch zawartej w metodzie primitiveChangeEventHandler() dodaliśmy warunek AbstractPrimitiveEvent, w którym zapisaliśmy umieszczenie obiektu arrowhead w kontenerze container. Tym właśnie sposobem przy zmianie opcji w liście wyboru na AbstractPrimitive na scenie pojawia się obiekt arrowhead: case 'AbstractPrimitiveEvent': container.addChild(arrowhead); break;
LineSegment Klasa LineSegment jest bardzo podobna do klasy Segment i również służy do rysowania linii prostych, chociaż nie potrzebuje do tego żadnych dodatkowych kontenerów. Obiekt klasy LineSegment można umieścić bezpośrednio na scenie, korzystając z zapisu view.scene.addChild(). Aby stworzyć taką linię, musimy podać
Rozdział 3. Obiekty
101
dwa obiekty klasy Vertex określające jej początek i koniec. Punkty te zdefiniowane są właściwościami start oraz end. Aby stworzyć obiekt klasy LineSegment, można się posłużyć następującym kodem: line = new LineSegment(); line.start = new Vertex(0, 0, 0); line.end = new Vertex(110, 110, 110);
W przypadku naszej klasy bazowej wystarczy ten kod wpisać do ciała metody initPrimitives(). Z kolei w metodzie primitiveChangeEventHandler() wewnątrz instrukcji switch należy dodać taki oto warunek: case 'LineSegmentEvent': container.addChild(line); break;
Dzięki temu po wybraniu opcji LineSegment z listy ComboBox na ekranie pojawi się obiekt tej klasy. Poniżej zamieszczono tabele 3.17 i 3.18, które zawierają podstawowe właściwości oraz metody tej klasy. Tabela 3.17. Właściwości klasy LineSegment
Nazwa
Rodzaj
Wartość domyślna
Opis
start
Vertex
Vertex(-50, 0, 0)
Położenie początku linii
end
Vertex
Vertex(50, 0, 0)
Położenie końca linii
Tabela 3.18. Metody klasy LineSegment
Nazwa
Opis
LineSegment(init:Object = null)
Konstruktor
Trident Trident
jest w zasadzie narzędziem pomocniczym, ponieważ obiekt tej klasy to układ współrzędnych złożony z trzech osi: X, Y oraz Z. W swoich zasobach ma standardowe metody oraz właściwości dostępne dla obiektów trójwymiarowych. Poza konstruktorem, w którym argumenty decydują o wyglądzie układu, nie ma żadnych specjalnych metod i właściwości. Tworząc obiekt tej klasy, można zmienić wartości dwóm argumentom: len oraz showLetters. Pierwszy określa długość ramion, która standardowo równa jest 1000 pikseli, drugi zaś określa, czy litery oznaczające oś mają być widoczne na ich końcach, czy nie. Wartość tej opcji domyślnie ustawiona jest na false. Na rysunku 3.9 przedstawiono obiekt klasy Trident z niestandardowymi ustawieniami.
102
Flash i ActionScript. Aplikacje 3D od podstaw
Rysunek 3.9.
Obiekt klasy Trident
Aby uzyskać taki efekt, w klasie bazowej wewnątrz metody initPrimitives() należy dopisać następującą linijkę kodu: trident = new Trident(250, true);
W ten sposób ustawiliśmy długość ramion na 250 pikseli i pokazaliśmy ich nazwy. Poza tym w kodzie instrukcji switch wewnątrz metody primitiveChangeEventHandler() należy dodać następujący warunek: case 'TridentEvent': container.addChild(trident); break;
Teraz po wybraniu z listy ComboBox opcji Trident na ekranie pojawi się taki układ jak na rysunku 3.9. Poniżej w tabeli 3.19 zamieszczono konstruktor klasy jako dostępną metodę, poza nią klasa Trident nie ma dodatkowych własnych. Tabela 3.19. Metody klasy Trident
Nazwa
Opis
Trident(len:Number, showLetters:Boolean)
Konstruktor
Triangle Triangle, jak nazwa wskazuje, jest klasą, której obiekt przyjmuje kształt ustalonego trójkąta. Do wygenerowania takiego obiektu właściwościom a, b i c należy podać trzy punkty Vertex, które będą określały wierzchołki trójkąta. Na rysunku 3.10
Rozdział 3. Obiekty
103
przedstawiono wygenerowany trójkąt oraz litery poszczególnych punktów. Litery te nie stanowią części wyświetlanego obiektu, dodałem je tylko w celu oznaczenia wierzchołków. Rysunek 3.10.
Obiekt klasy Triangle z zaznaczonymi wierzchołkami
Aby po wybraniu opcji Triangle wyświetlić podobny obiekt klasy Triangle, należy w metodzie initPrimitives() dopisać następujący fragment kodu: triangle = new Triangle(); triangle.bothsides = true; triangle.a = new Vertex(0, 200, 0); triangle.b = new Vertex(200, -150, 0); triangle.c = new Vertex(-200, -150, 0);
W pierwszej linijce tworzony jest obiekt, następnie ustawiliśmy wartość bothsides na true, co umożliwi wyświetlanie trójkąta z obu stron. W kolejnych trzech linijkach każdej z właściwości wierzchołka przypisaliśmy punkty Vertex z wymyślonymi wartościami. Następnie w metodzie primitiveChangeEventHandler() należy dodać następujący warunek do instrukcji switch: case 'TriangleEvent': container.addChild(triangle); break;
Poniżej w tabelach 3.20 oraz 3.21 wypisane są podstawowe właściwości i metody klasy Triangle.
104
Flash i ActionScript. Aplikacje 3D od podstaw
Tabela 3.20. Właściwości klasy Triangle
Nazwa
Rodzaj
Wartość domyślna
Opis
a
Vertex
Vertex(0, 0, 57.73502691896258)
Pierwszy wierzchołek trójkąta
b
Vertex
Vertex(50, 0, -28.86751345948129)
Drugi wierzchołek trójkąta
c
Vertex
Vertex(-50, 0, -28.86751345948129)
Trzeci wierzchołek trójkąta
Tabela 3.21. Metody klasy Triangle
Nazwa
Opis
Triangle(init:Object = null)
Konstruktor
Plane Obiekt klasy Plane ma postać płaszczyzny złożonej z dwóch trójkątów, które tworzą pojedynczy segment siatki geometrycznej. Liczbę segmentów możemy kontrolować za pomocą właściwości segmentsW oraz segmentsH. Pierwsza z nich określa liczbę segmentów w rzędzie, a druga w kolumnie. Pierwotnie powierzchnia obiektu klasy Plane jest płaska, ale z uwagi na swoją budowę bez większego problemu można ingerować w strukturę siatki geometrycznej tego obiektu. Zmieniając współrzędne poszczególnych wierzchołków, można wygenerować zniekształcenia terenu, o czym jeszcze wspomnimy w dalszych rozdziałach tej książki. Standardowo stworzony obiekt klasy Plane leży na scenie. Jeśli chcemy ustawić go w pozycji pionowej, trzeba właściwości yUp przypisać wartość false. Jeżeli już tak zrobimy, to należy pamiętać o zmianie wartości właściwości bothsides na true, ponieważ standardowo wartość ta równa jest false. Trzeba pamiętać, że liczba trójkątów, z których złożony jest obiekt Plane, wpływa na wydajność aplikacji oraz poprawność wyświetlania nałożonych na niego materiałów. Im więcej segmentów, tym lepiej tekstura prezentuje się na płaszczyźnie, ale równocześnie wymaga większej liczby obliczeń. Jak zawsze trzeba znaleźć złoty środek pomiędzy estetyką a wydajnością. Na rysunku 3.11 przedstawiono obiekt Plane w najprostszej postaci. W celu stworzenia obiektu Plane w klasie bazowej wewnątrz metody initPrimitives() należy dodać następujący kod źródłowy, w którym tworzymy obiekt i zmieniamy jego standardowe wymiary i położenie na scenie: plane = new Plane(); plane.width = 350; plane.height = 350; plane.yUp = false; plane.bothsides = true;
Rozdział 3. Obiekty
105
Rysunek 3.11.
Obiekt klasy Plane
Aby obiekt był dostępny po zmianie w komponencie ComboBox opcji na Plane, należy dodatkowo umieścić następujący warunek w instrukcji switch wewnątrz metody primitiveChangeEventHandler(): case 'PlaneEvent': container.addChild(plane); break;
W tabelach 3.22 oraz 3.23 wypisane zostały podstawowe właściwości i metody klasy Plane. Tabela 3.22. Właściwości klasy Plane
Nazwa
Rodzaj
Wartość domyślna
Opis
height
Number
100
Określa wysokość obiektu Plane
width
Number
100
Określa szerokość obiektu Plane
segmentsH
Number
1
Określa liczbę segmentów w kolumnie
segmentsW
Number
1
Określa liczbę segmentów w wierszu
yUp
Boolean
true
Definiuje, czy współrzędne są zorientowane względem osi Y, czy Z
Tabela 3.23. Metody klasy Plane
Nazwa
Opis
Plane(init:Object = null)
Konstruktor
106
Flash i ActionScript. Aplikacje 3D od podstaw
GridPlane Tak samo jak w poprzednio omawianej klasie, obiekt klasy GridPlane przyjmuje kształt prostokąta, chociaż jego powierzchnia nie jest wypełniona jednolitym kolorem, lecz zbudowana jest ze skrzyżowanych linii. Całość tworzy siatkę, w której każdy z prostokątów nazywany jest segmentem. Ich liczbę można zmieniać za pomocą właściwości segmentsW oraz segmentsH. Podobnie jak w przypadku obiektu klasy Plane, rozmiar każdego segmentu zależy od wymiarów całej siatki oraz liczby kolumn i wierszy. Domyślnie obiekt leży na scenie, więc jeśli chcemy to zmienić, należy ustawić wartość właściwości yUp na false. Ponieważ GridPlane składa się z linii, nie trzeba się martwić o widoczność obiektu z obu stron. Na rysunku 3.12 przedstawiono obiekt klasy GridPlane złożony ze stu segmentów. Tego typu obiekty najczęściej stosuje się do przedstawiania siatki na wybranej osi, tak jak ma to miejsce w edytorach graficznych. Rysunek 3.12.
Obiekt klasy GridPlane
Aby uzyskać taki efekt, w klasie bazowej wewnątrz metody initPrimitives() trzeba dodać następujący fragment kodu: grid = new GridPlane(); grid.width = 450; grid.height = 450; grid.segmentsH = 10; grid.segmentsW = 10;
Rozdział 3. Obiekty
107
Jak widać, ustawiliśmy dla obiektu o nazwie grid odpowiednią wysokość oraz szerokość i zmieniliśmy domyślną liczbę segmentów zarówno w rzędach, jak i kolumnach. W metodzie primitiveChangeEventHandler(), odpowiedzialnej za reakcje na zmiany w liście wyboru, należy dodać następujący warunek: case 'GridPlaneEvent': container.addChild(grid); break;
Poniżej w tabelach 3.24 oraz 3.25 wypisane są podstawowe właściwości i metody klasy GridPlane. Tabela 3.24. Właściwości klasy GridPlane
Nazwa
Rodzaj
Wartość domyślna
Opis
height
Number
100
Określa wysokość obiektu GridPlane
width
Number
100
Określa szerokość obiektu GridPlane
segmentsH
Number
1
Określa liczbę segmentów w kolumnie
segmentsW
Number
1
Określa liczbę segmentów w wierszu
yUp
Boolean
true
Definiuje, czy współrzędne są zorientowane względem osi Y, czy Z
Tabela 3.25. Metody klasy GridPlane
Nazwa
Opis
GridPlane(init:Object = null)
Konstruktor
RegularPolygon Obiekt klasy RegularPolygon to kolejna figura, którą można przedstawić w przestrzeni trójwymiarowej, a jej kształt domyślnie przyjmuje formę ośmiokąta foremnego. Liczbę boków można zmienić za pomocą właściwości sides. Każdy z trójkątów będących częścią RegularPolygon można podzielić na mniejsze części i w tym celu trzeba zmienić wartość właściwości subdivision, która standardowo równa jest 1. RegularPolygon ma niektóre cechy znane z klasy Plane, to znaczy w pierwotnych ustawieniach figura leży na scenie oraz powierzchnia odwrócona od kamery nie jest wyświetlana. Czyli jeśli chcemy zmienić któryś z tych stanów, należy odwołać się do właściwości yUp i bothsides. Do ustalenia wielkości obiektu służy właściwość radius, która określa długość linii tworzących boki trójkątów wewnątrz powierzchni RegularPolygon. Na rysunku 3.13 przedstawiono obiekt tej klasy ze standardową liczbą trójkątów.
108
Flash i ActionScript. Aplikacje 3D od podstaw
Rysunek 3.13.
Obiekt klasy RegularPolygon
Obiekt z rysunku 3.13 został wygenerowany dzięki zastosowaniu w metodzie initPrimitives() następującego kodu: polygon = new RegularPolygon(); polygon.radius = 200; polygon.yUp = false; polygon.bothsides = true;
Zmieniając standardowe wartości, postawiliśmy obiekt, zwiększyliśmy jego rozmiar i ustawiliśmy jego widoczność z obu stron. Z kolei w metodzie primitiveChange EventHandler() wewnątrz instrukcji switch należy dodać taki oto warunek: case 'RegularPolygonEvent': container.addChild(polygon); break;
Dzięki temu po wybraniu opcji RegularPolygon z listy ComboBox na ekranie pojawi się obiekt tej klasy. Poniżej zamieszczono tabele 3.26 i 3.27, które zawierają podstawowe właściwości oraz metody RegularPolygon. Tabela 3.26. Właściwości klasy RegularPolygon
Nazwa
Rodzaj
Wartość domyślna Opis
radius
Number
100
Określa promień
subdivision
Number
1
Określa liczbę podziału trójkąta
sides
Number
8
Określa liczbę ścian
yUp
Boolean
true
Definiuje, czy współrzędne są zorientowane względem osi Y, czy Z
Rozdział 3. Obiekty
109
Tabela 3.27. Metody klasy RegularPolygon
Nazwa
Opis
RegularPolygon(init:Object = null)
Konstruktor
Cube Klasa Cube tworzy obiekt sześcianu, którego ściany standardowo składają się z dwóch trójkątów, czyli jednego segmentu. Wymiary boków zmienia się za pomocą właściwości width, height oraz depth. Liczbę segmentów każdej ze ścian można zmienić, używając właściwości segmentsW (względem osi X), segmentsH (względem osi Y) oraz segmentsD (względem osi Z). Domyślnie zewnętrzna strona każdego z boków jest rysowana, ale gdyby umieścić kamerę wewnątrz bryły, to nie byłyby one widoczne. Jeżeli sytuacja wymaga umieszczenia kamery wewnątrz sześcianu, to należy posłużyć się właściwością flip i przypisać jej wartość true. Warto wspomnieć, że wypełnianie materiałem obiektu klasy Cube można wykonać w dwojaki sposób. Pierwszy z nich to zwykłe przypisanie wybranego materiału dla wszystkich ścian. O tym dowiesz się w rozdziale 4. „Materiały”. Drugi zaś polega na zastosowaniu specjalnej klasy o nazwie CubeMaterialsData. Na rysunku 3.14 przedstawiono obiekt klasy Cube z losowo wygenerowanym materiałem. Klasa CubeMaterialsData to klasa zlokalizowana w pakiecie away3d.primitives.data; przyjmuje ona rolę tablicy, której indeksy nazwane są odpowiednio dla poszczególnych boków sześcianu: back, bottom, front, left, right, top. Każdemu indeksowi można przypisać materiał niezwiązany z pozostałymi, co poszerza możliwości stosowania obiektu klasy Cube. Rysunek 3.14.
Obiekt klasy Cube
110
Flash i ActionScript. Aplikacje 3D od podstaw
Od strony kodu klasy bazowej w metodzie initPrimitives() należy dopisać następujący fragment kodu: cube = new Cube(); cube.width = 250; cube.height = 250; cube.depth = 250;
W pierwszej linijce tworzony jest obiekt, a w następnych trzech zmienione zostały jego wymiary. Aby obiekt cube był dostępny po wybraniu jego opcji z listy wyboru, w metodzie primitiveChangeEventHandler() należy dodać następujący warunek do instrukcji switch: case 'CubeEvent': container.addChild(cube); break;
Poniżej w tabelach 3.28 oraz 3.29 wypisane są podstawowe właściwości i metody klasy Cube. Tabela 3.28. Właściwości klasy Cube
Nazwa
Rodzaj
Wartość domyślna
Opis
height
Number
100
Wysokość obiektu
width
Number
100
Szerokość obiektu
depth
Number
100
Głębokość obiektu
flip
Boolean
false
Określa, czy ściany mają być odwrócone do wewnątrz sześcianu
segmentsW
Number
1
Liczba segmentów względem osi X
segmentsH
Number
1
Liczba segmentów względem osi Y
segmentsD
Number
1
Liczba segmentów względem osi Z
cubeMaterials
CubeMaterialsData null
Obiekt klasy CubeMaterialsData służący do nakładania osobnych materiałów na każdą ze ścian
Tabela 3.29. Metody klasy Cube
Nazwa
Opis
Cube(init:Object = null)
Konstruktor
Rozdział 3. Obiekty
111
RoundedCube Wygenerowany przez klasę RoundedCube obiekt ma formę sześcianu z zaokrąglonymi krawędziami, co sprawia, że jego struktura jest znacznie bardziej złożona od zwykłego sześcianu. Dodanie owalnych kształtów wymagało wykorzystania większej liczby trójkątów. Obiekt klasy RoundedCube, wyświetlany nawet w najprostszej formie, wymaga więcej obliczeń niż zwykły Cube. Za kontrolowanie tych zaokrągleń odpowiadają właściwości radius oraz subdivision. Pierwsza z nich określa promień rogów sześcianu, a druga definiuje liczbę podziału każdej krawędzi. Na rysunku 3.15 widać obiekt klasy RoundedCube, w którym zaokrąglone krawędzie mają swoje standardowe ustawienia. Rysunek 3.15.
Obiekt klasy RoundedCube
W tym przypadku promień zaokrągleń równy jest 33.3, a podział — jak widać — liczy dwa segmenty w pionie i poziomie. Żeby uzyskać taki efekt, w klasie bazowej wewnątrz metody initPrimitives() trzeba dodać następujący fragment kodu: roundedCube = new RoundedCube(); roundedCube.width = 250; roundedCube.height = 250; roundedCube.depth = 250;
Jak widać, nadaliśmy obiektowi roundedCube jedynie nowe wartości określające jego wymiary, pozostawiając resztę standardowych ustawień. W metodzie primitiveChangeEventHandler(), odpowiedzialnej za reakcje na zmiany w liście wyboru, należy dodać następujący warunek: case 'RoundedCubeEvent': container.addChild(roundedCube); break;
112
Flash i ActionScript. Aplikacje 3D od podstaw
Poza radius i subdivision klasa RoundedCube ma znane nam już właściwości. Wszystkie najważniejsze wraz z metodami zostały wypisane poniżej w tabelach 3.30 oraz 3.31. Tabela 3.30. Właściwości klasy RoundedCube
Nazwa
Rodzaj
Wartość domyślna
Opis
height
Number
100
Wysokość obiektu
width
Number
100
Szerokość obiektu
depth
Number
100
Głębokość obiektu
subdivision
Number
2
Określa podział krawędzi
radius
Number
33.3
Promień krawędzi
cubicmapping
Boolean
false
Określa, czy materiał pokrywa cały sześcian, czy każdy z boków, uwzględniając promień zaokrągleń
cubeMaterials
CubeMaterialsData null
Obiekt klasy CubeMaterialsData służący do nakładania osobnych materiałów na każdą ze ścian
Tabela 3.31. Metody klasy RoundedCube
Nazwa
Opis
Cube(init:Object = null)
Konstruktor
Sphere W bibliotece Away3D do stworzenia obiektu kuli służy klasa Sphere, chociaż z uwagi na domyślną liczbę segmentów siatki geometrycznej wyświetlony obiekt tej klasy niewiele ma wspólnego z kulą. Na rysunku 3.16 przedstawiono obiekt klasy Sphere. Jak widać, nie jest on idealnie kulisty. Podobnie jak Cube, obiekt klasy Sphere złożony jest z segmentów, które domyślnie nie formują okrągłej bryły, jedynie jej namiastkę. Dzięki właściwościom segmentsW oraz segmentsH liczbę segmentów można kontrolować, nadając im większe wartości. Obiekt klasy Sphere staje się bardziej wypukły, ale przy okazji pogarsza się wydajność aplikacji. Jeśli pójdziemy w drugą stronę — nadamy mu mniej segmentów — obiekt stanie się lżejszy dla aplikacji, ale i mniej atrakcyjny dla oka jako kula. Jak zwykle należy znaleźć złoty środek. Podobnie jak w przypadku poznanej klasy RegularPolygon, rozmiar obiektu klasy Sphere określa się właściwością radius, która oznacza długość promienia kuli.
Rozdział 3. Obiekty
113
Rysunek 3.16.
Obiekt klasy Sphere
Aby wygenerować obiekt kuli w takiej postaci, jak pokazano na rysunku 3.16, należy dodać w metodzie initPrimitives() następujący kod: sphere = new Sphere(); sphere.radius = 200;
Poza tym aby obiekt ten był widoczny, po wybraniu opcji Sphere w komponencie ComoBox wewnątrz instrukcji switch w metodzie primitiveChangeEventHandler() należy dodać taki oto warunek: case 'SphereEvent': container.addChild(sphere); break;
Poniżej zamieszczono tabele 3.32 i 3.33, które zawierają podstawowe właściwości oraz metody klasy Sphere. Tabela 3.32. Właściwości klasy Sphere
Nazwa
Rodzaj
Wartość domyślna
Opis
radius
Number
100
Długość promienia kuli
segmentsW
Number
8
Liczba segmentów w poziomie
segmentsH
Number
6
Liczba segmentów w pionie
yUp
Boolean
true
Definiuje, czy współrzędne są zorientowane względem osi Y, czy Z
Tabela 3.33. Metody klasy Sphere
Nazwa
Opis
Sphere(init:Object = null)
Konstruktor
114
Flash i ActionScript. Aplikacje 3D od podstaw
GeodesicSphere GeodesicSphere to kolejna klasa dostępna w bibliotece Away3D, której obiekt ma formę kuli. Różnica w stosunku do klasy Sphere polega na budowie siatki geometrycznej wygenerowanego obiektu. W przypadku GeodesicSphere siatka geometryczna tworzona jest na wzór kopuły Fullera, zbudowanej z trójkątów równoramiennych ułożonych tak, aby odwzorować powierzchnię kuli. Z uwagi na konstrukcję tworzonego obiektu klasa GeodesicSphere nie ma właściwości kontrolujących liczbę segmentów w pionie i poziomie, jak to ma miejsce na przykład w klasie Sphere. Zastąpiono je jedną właściwością fractures, której wartość określa liczbę złamań każdej z krawędzi bryły. Każde ze złamań tworzy nowe trójkąty równoramienne, które pokrywając powierzchnię bryły, uwypuklają ją. Domyślnie wartość tego właściwości równa jest liczbie 2. Dla lepszego zrozumienia całego mechanizmu na rysunku 3.17 przedstawiono trzy wersje obiektu klasy GeodesicSphere, w których zastosowano różne wartości fractures. Rysunek 3.17.
Obiekty klasy GeodesicSphere o różnych wartościach właściwości fractures
Rozmiar całej powierzchni zależy od wartości właściwości radius, która określa długość promienia. Aby uzyskać obiekt o budowie odpowiadającej trzeciej bryle przedstawionej na rysunku 3.17, w klasie bazowej przykładu wewnątrz metody initPrimitives() należy dodać następujący kod: geodesicSphere = new GeodesicSphere(); geodesicSphere.radius = 200;
Aby po wybraniu opcji GeodesicSphere z listy wyboru na ekranie pojawiła się bryła kuli geodezyjnej, należy dopisać następujący warunek w instrukcji switch wewnątrz metody primitiveChangeEventHandler(): case 'GeodesicSphereEvent': container.addChild(geodesicSphere); break;
Wszystkie najważniejsze właściwości wraz z metodami dostępnymi w klasie GeodesicSphere zostały wypisane poniżej w tabelach 3.34 oraz 3.35.
Rozdział 3. Obiekty
115
Tabela 3.34. Właściwości klasy GeodesicSphere
Nazwa
Rodzaj
Wartość domyślna
Opis
radius
Number
100
Długość promienia kuli
fractures
Number
2
Liczba załamań na krawędziach kuli
Tabela 3.35. Metody klasy GeodesicSphere
Nazwa
Opis
GeodesicSphere(init:Object = null)
Konstruktor
Torus Torus w bardzo ogólnym pojęciu matematycznym to powierzchnia powstała przez obrót okręgu wokół prostej leżącej na tej samej płaszczyźnie. Klasa Torus generuje obiekt, którego forma ma właśnie taki kształt, często porównywany z oponką. Obiekt ten przeważnie wykorzystuje się w celu testowania wydajności aplikacji. Z uwagi na swój kształt najlepiej sprawdza się przy ustalaniu światła, cienia oraz refleksów. O budowie całej bryły decydują wartości kilku właściwości; poznany radius określa promień wyznaczony ze środka powierzchni do zewnętrznej krawędzi bryły. Za grubość torusa odpowiada właściwość tube, która określa długość promienia obracanego okręgu. Poza tym kształt nadawany jest również przez określenie odpowiedniej liczby segmentów, a do tego celu służą segmentsR oraz segmentsT. Pierwszy z nich można potraktować tak, jakby definiował liczbę okręgów, które służą do wyznaczenia całej figury, z kolei druga właściwość wyznacza liczbę krawędzi każdego z tych okręgów. Na rysunku 3.18 przedstawiono obiekt klasy Torus o standardowej liczbie segmentów i zmienionych wartościach właściwości tube oraz radius. Aby uzyskać efekt przedstawiony na rysunku 3.18, należy w metodzie initPrimitives() dopisać następujący kod: torus = new Torus(); torus.tube = 60; torus.radius = 200;
Aby obiekt torus był dostępny po wybraniu jego opcji z pola wyboru, w metodzie primitiveChangeEventHandler() należy dodać następujący warunek do instrukcji switch: case 'TorusEvent': container.addChild(torus); break;
116
Flash i ActionScript. Aplikacje 3D od podstaw
Rysunek 3.18.
Obiekt klasy Torus
Poniżej zamieszczono tabele 3.36 i 3.37, które zawierają podstawowe właściwości oraz metody klasy Torus. Tabela 3.36. Właściwości klasy Torus
Nazwa
Rodzaj
Wartość domyślna
Opis
radius
Number
100
Długość promienia całego obiektu
segmentsR
Number
8
Liczba segmentów w poziomie
segmentsT
Number
6
Liczba segmentów w pionie
tube
Number
40
Promień ścian obiektu Torus
yUp
Boolean
true
Definiuje, czy współrzędne są zorientowane względem osi Y, czy Z
Tabela 3.37. Metody klasy Torus
Nazwa
Opis
Torus(init:Object = null)
Konstruktor
TorusKnot TorusKnot
to węzeł, który jeszcze lepiej sprawdza się w testach wydajności aplikacji, oświetlenia i refleksów niż wspomniana wcześniej klasa. Budowa tego obiektu opiera się na kilku znanych nam właściwościach: radius, tube, segmentsR oraz segmentsT, poza nimi w klasie TorusKnot stosuje się również heightScale, p oraz q. Właściwość heightScale określa poziom rozciągnięcia węzła w pionie. Im wyższa wartość jest podana, tym większa odległość powstaje między wartościami mini-
Rozdział 3. Obiekty
117
malnymi a maksymalnymi na lokalnej osi Y obiektu TorusKnot. Właściwości p oraz q to liczby względnie pierwsze, które określają liczbę owinięć w przeciwnych kierunkach. Najbardziej znana forma węzła to węzeł koniczyny, z kolei na rysunku 3.19 przedstawiono obiekt klasy TorusKnot z domyślnymi wartościami właściwości p i q. Rysunek 3.19.
Obiekt klasy TorusKnot
Aby uzyskać taki efekt, w przykładzie w metodzie initPrimitives() trzeba stworzyć obiekt o nazwie torusKnot i nadać jego właściwościom odpowiednie wartości, podobnie jak w poniższym kodzie źródłowym: torusKnot = new TorusKnot(); torusKnot.p = 2; torusKnot.q = 3; torusKnot.segmentsT = 8; torusKnot.segmentsR = 64; torusKnot.tube = 20; torusKnot.radius = 150; torusKnot.rotationX = 90;
Jak widać, ustawiliśmy dla całego węzła odpowiednią liczbę segmentów, zmieniliśmy jego promienie i obróciliśmy względem osi X. W metodzie primitiveChange EventHandler(), odpowiedzialnej za reakcje na zmiany w liście wyboru, należy dodać następujący warunek: case 'TorusKnotEvent': container.addChild(torusKnot); break;
Poniżej w tabelach 3.38 oraz 3.39 wypisane są podstawowe właściwości i metody klasy TorusKnot.
118
Flash i ActionScript. Aplikacje 3D od podstaw
Tabela 3.38. Właściwości klasy TorusKnot
Nazwa
Rodzaj
Wartość domyślna Opis
radius
Number
200
Długość promienia całego obiektu
segmentsR
Number
15
Liczba okręgów formująca węzeł
segmentsT
Number
6
Liczba krawędzi okręgów formujących węzeł
tube
Number
10
Promień ścian węzła
heightScale
Number
1
Poziom rozciągnięcia węzła w pionie
p
Number
2
Liczba owinięć wokół koła wewnątrz obiektu Torus
q
Number
3
Liczba owinięć wokół linii przez otwór w obiekcie Torus
Tabela 3.39. Metody klasy TorusKnot
Nazwa
Opis
TorusKnot(init:Object = null)
Konstruktor
Cylinder Obiekt tej klasy ma kształt walca, którego podstawy domyślnie są ośmiokątami foremnymi. Standardowo bryła ta jest zamknięta, ale podstawę oraz górną część można schować, pozostawiając tym samym walec otwarty. Do tego celu służy właściwość openEnded, która przyjmuje wartości typu Boolean, gdzie true oznacza walec otwarty, a false zamknięty u podstaw. Poza tą właściwością o wyglądzie bryły decydują również wartości właściwości takich jak: height, radius, segmentsH, segmentsW oraz yUp. Do wyznaczenia szerokości podstaw cylindra służy właściwość radius, z kolei wysokość jego ścian wyznacza wartość właściwości height. Podobnie jak w większości poznanych brył, liczbę segmentów w kolumnie i rzędzie określają segmentsH i segmentsW. Żeby osiągnąć bardziej owalne kształty cylindra, zwiększa się wartość segmentsW, a segmentsH jest użyteczny przy dokładniejszym odwzorowaniu materiału pokrywającego bryłę. Na rysunku 3.20 przedstawiono obiekt klasy Cylinder z domyślnymi ustawieniami segmentów. Od strony kodu klasy bazowej w metodzie initPrimitives() należy dopisać następujący fragment kodu: cylinder = new Cylinder(); cylinder.radius = 150; cylinder.height = 250;
Rozdział 3. Obiekty
119
Rysunek 3.20.
Obiekt klasy Cylinder
Aby po wybraniu opcji Cylinder z listy wyboru na ekranie pojawił się obiekt tej klasy, należy dopisać następujący warunek w instrukcji switch wewnątrz metody primitiveChangeEventHandler(): case 'CylinderEvent': container.addChild(cylinder); break;
Poniżej w tabelach 3.40 oraz 3.41 wypisane są podstawowe właściwości i metody klasy Cylinder. Tabela 3.40. Właściwości klasy Cylinder
Nazwa
Rodzaj
Wartość domyślna Opis
height
Number
200
Wysokość cylindra
openEnded
Boolean
false
Określa, czy cylinder ma zawierać podstawy, czy nie
radius
Number
100
Promień podstaw cylindra
segmentsH
Number
1
Liczba segmentów na ścianach cylindra
segmentsW
Number
8
Liczba krawędzi podstaw cylindra
yUp
Boolean
true
Określa, czy obiekt ma być w pozycji pionowej, czy poziomej
120
Flash i ActionScript. Aplikacje 3D od podstaw
Tabela 3.41. Metody klasy Cylinder
Nazwa
Opis
Cylinder(init:Object = null)
Konstruktor
Cone Klasa Cone generuje obiekt stożka prostego, którego podstawą jest ośmiokąt foremny. Liczbę krawędzi podstawy można regulować, tak samo jak w przypadku klasy Cylinder, zmieniając wartość właściwości segmentsW. Naturalnie wpływa to również na liczbę ścian, z których złożona jest bryła, a ich podział — tym razem w kolumnie — reguluje właściwość segmentsH. Szerokość podstawy określa właściwość radius, a to, czy w ogóle ma być ona wyświetlana, zależy od wartości właściwości openEnded. Wysokość obiektu Cone określa właściwość height, przy czym warto zwrócić uwagę na to, że punkt zerowy — tak samo jak w innych obiektach — nie jest ulokowany przy podstawie bryły, tylko na środku jej powierzchni. Służy to do obracania bryły wokół jej osi, ale przy umieszczaniu obiektu na scenie należy o tym pamiętać. Jak wiadomo, mamy kilka rodzajów stożków: prosty, ścięty i pochyły. Manipulując odpowiednio punktami Vertex umieszczonymi w obiekcie, można standardowy stożek zamienić w dowolny z wymienionych wcześniej rodzajów. Na rysunku 3.21 przedstawiono stożek standardowy oraz zmodyfikowany — jego forma jest stożkiem ściętym. Rysunek 3.21.
Dwa obiekty klasy Cone
Rozdział 3. Obiekty
121
Aby wygenerować obiekty stożków w takich formach, jak pokazano na rysunku 3.21, należy zapisać w metodzie initPrimitives() następujący kod: cone = new Cone(); cone.radius = 150; cone.bothsides = true; cone.height = 300; cone.x = -150; cone2 = new Cone(); cone2.radius = 150; cone2.x = 150; cone2.bothsides = true; cone2.segmentsH = 2; cone2.height = 300; (cone2.vertices[cone2.vertices.length - 1] as Vertex).y = 0;
Stożkowi o nazwie cone zmienione zostały wysokość, promień podstawy oraz położenie względem osi X. Ostatnia linijka tego kodu powoduje zmianę pozycji ostatniego punktu Vertex, tak aby czubek obiektu cone2 stanowił drugą podstawę. Aby obiekty te były widoczne, po wybraniu opcji Cone w komponencie ComoBox wewnątrz instrukcji switch w metodzie primitiveChangeEventHandler() należy dodać taki oto warunek: case 'ConeEvent': container.addChild(cone); container.addChild(cone2); break;
Poniżej zamieszczono tabele 3.42 i 3.43, które zawierają podstawowe właściwości oraz metody Cone. Tabela 3.42. Właściwości klasy Cone
Nazwa
Rodzaj
Wartość domyślna
Opis
height
Number
200
Wysokość stożka
openEnded
Boolean
false
Określa, czy podstawa stożka jest wyświetlana, czy nie
radius
Number
100
Promień podstawy stożka
segmentsH
Number
1
Liczba segmentów ścian stożka
segmentsW
Number
8
Liczba krawędzi podstawy stożka
yUp
Boolean
true
Określa, czy stożek jest w pozycji pionowej, czy poziomej
122
Flash i ActionScript. Aplikacje 3D od podstaw
Tabela 3.43. Metody klasy Cone
Nazwa
Opis
Cone(init:Object = null)
Konstruktor
SeaTurtle SeaTurtle to model żółwia morskiego, który został wyeksportowany i zapisany w pliku *.as jako klasa ActionScript 3.0. Swój żywot zaczął jako obiekt stosowany w demonstracjach możliwości silnika Away3D, ale z czasem twórcy Away3D oraz sami użytkownicy tak się przywiązali do jego wizerunku, że stał się integralną częścią całej biblioteki i swego rodzaju znakiem rozpoznawczym. W swoich zasobach klasa SeaTurtle nie ma własnych publicznych właściwości ani metod, ma tylko te, które odziedziczyła po klasie Mesh i tym samym Object3D. Na rysunku 3.22 przedstawiono obiekt tej klasy bez nałożonej tekstury, aby można było zobaczyć jego złożoną strukturę. Rysunek 3.22.
Obiekt klasy SeaTurtle
Aby stworzyć obiekt turtle, w klasie bazowej wewnątrz metody initPrimitives() należy dodać następujący kod źródłowy, w którym tworzymy obiekt, zmieniając jego skalę i kąt pochylenia, tak aby był w pełni widoczny: turtle = new SeaTurtle(); turtle.rotationX = 45; turtle.scale(.75);
Rozdział 3. Obiekty
123
Aby obiekt był dostępny, po zmianie w komponencie ComboBox opcji na SeaTurtle należy dodatkowo umieścić następujący warunek w instrukcji switch wewnątrz metody primitiveChangeEventHandler(): case 'SeaTurtleEvent': container.addChild(turtle); break;
Jak wspomniano, klasa SeaTurtle nie ma własnych właściwości oraz dodatkowych metod, dlatego poniżej umieszczona tabela 3.44 zawiera tylko konstruktor. Tabela 3.44. Metody klasy SeaTurtle
Nazwa
Opis
SeaTurtle(init:Object = null)
Konstruktor
Arrow Obiekt klasy Arrow ma formę strzałki, która w swojej domyślnej budowie jest płaskim trójkątem widocznym tylko z jednej strony. Aby nadać mu pełne kształty, należy wykorzystać wszystkie przypisane mu właściwości oraz kilka znanych z klasy Mesh, po której dziedziczy. W pierwszej kolejności trzeba ustalić długość ogona strzałki, którą określa właściwość tailLength, a następnie ustawić jego szerokość, korzystając z właściwości tailWidth. Po wykonaniu tych czynności będziemy mieli formę strzałki, tyle że nadal w postaci płaskiej. Aby to zmienić, trzeba użyć właściwości thickness i określić grubość całego obiektu. Warto zwrócić uwagę na to, że punkt pivotPoint obiektu klasy Arrow nie jest umiejscowiony na środku siatki geometrycznej, lecz tuż przy najwyżej umieszczonej krawędzi. Na rysunku 3.23 przedstawiono obiekt klasy Arrow po nadaniu konkretnych ustawień każdej ze wspomnianych właściwości. Od strony kodu klasy bazowej w metodzie initPrimitives() należy dopisać następujący fragment kodu: arrow = new Arrow(); arrow.height = 400; arrow.width = 400; arrow.tailLength = 250; arrow.tailWidth = 100; arrow.thickness = 100; arrow.bothsides = true; arrow.rotationX = -90; arrow.y = 150;
124
Flash i ActionScript. Aplikacje 3D od podstaw
Rysunek 3.23.
Obiekt klasy Arrow
Aby obiekt arrow był dostępny, po wybraniu jego opcji z pola wyboru w metodzie primitiveChangeEventHandler() należy dodać następujący warunek do instrukcji switch: case 'ArrowEvent': container.addChild(arrow); break;
Poniżej w tabelach 3.45 oraz 3.46 wypisane są podstawowe właściwości i metody klasy Arrow. Tabela 3.45. Właściwości klasy Arrow
Nazwa
Rodzaj
Wartość domyślna
Opis
height
Number
100
Określa wysokość obiektu Arrow
width
Number
100
Określa szerokość obiektu Arrow
tailLength
Number
0
Określa długość promienia obiektu Arrow
tailWidth
Number
0
Określa szerokość promienia obiektu Arrow
thickness
Number
0
Określa grubość, a w zasadzie wysokość obiektu Arrow
sideMaterial
Material
null
Określa pokrycie powierzchni obiektu Arrow
bottomMaterial
Material
null
Określa pokrycie spodu powierzchni obiektu
yUp
Boolean
true
Arrow
Definiuje, czy współrzędne są zorientowane względem osi Y, czy Z
Rozdział 3. Obiekty
125
Tabela 3.46. Metody klasy Arrow
Nazwa
Opis
Arrow(init:Object = null)
Konstruktor
WirePlane Klasa WirePlane to odpowiednik klasy Plane, a raczej GridPlane, którego obiekt złożony jest z samych linii. Parametrami nie różni się od swojego pierwowzoru. Stosując ten obiekt, również można ustalić jego wysokość, szerokość, liczbę segmentów oraz to, czy ma być w pozycji pionowej, czy poziomej. Na rysunku 3.24 przedstawiono obiekt klasy WirePlane z przykładowymi ustawieniami. Rysunek 3.24.
Obiekt klasy WirePlane
Aby wygenerować taki obiekt, należy dodać w metodzie initPrimitives() następujący kod: wirePlane = new WirePlane(); wirePlane.width = 350; wirePlane.height = 350; wirePlane.segmentsH = 4; wirePlane.segmentsW = 4; wirePlane.yUp = false;
Poza tym aby był on widoczny, po wybraniu opcji WirePlane wewnątrz instrukcji switch w metodzie primitiveChangeEventHandler() należy dodać taki oto warunek: case 'WirePlaneEvent': container.addChild(wirePlane); break;
126
Flash i ActionScript. Aplikacje 3D od podstaw
Poniżej w tabelach 3.47 oraz 3.48 wypisane są podstawowe właściwości i metody klasy WirePlane. Tabela 3.47. Właściwości klasy WirePlane
Nazwa
Rodzaj
Wartość domyślna
Opis
height
Number
100
Określa wysokość obiektu WirePlane
width
Number
100
Określa szerokość obiektu WirePlane
segmentsH
Number
1
Określa liczbę segmentów w kolumnie
segmentsW
Number
1
Określa liczbę segmentów w wierszu
yUp
Boolean
true
Definiuje, czy współrzędne są zorientowane względem osi Y, czy Z
Tabela 3.48. Metody klasy WirePlane
Nazwa
Opis
WirePlane(init:Object = null)
Konstruktor
WireCube Klasa WireCube tworzy obiekt złożony z punktów Vertex oraz linii tworzących siatkę sześcianu bez przekątnych przechodzących przez każdy z jego boków. Umieszczony na scenie prezentuje się w postaci krawędzi zaznaczających powierzchnię sześcianu otwartego z każdej strony. Do ustalenia jego wymiarów stosuje się właściwości znane z pierwowzoru Cube, a są nimi width, height oraz depth. Właściwości wyznaczające liczbę segmentów w tym przypadku są zbędne, ale zamiast nich pojawiły się nowe, określające każdy z wierzchołków. Nazwy tych właściwości składają się z litery v i odpowiedniego numeru z przedziału od 0 do 7, zapisanego w kodzie binarnym. Pierwsza z nich oznaczona jest więc jako v000, a ostatnia jako v111. Na rysunku 3.25 przedstawiono obiekt WireCube z odpowiednio zaznaczonymi właściwościami wierzchołków: v000 ... v111. W klasie bazowej wewnątrz metody initPrimitives() należy dodać następujący kod, aby uzyskać siatkę sześcianu z rysunku 3.25. wireCube = new WireCube(); wireCube.width = 250; wireCube.height = 250; wireCube.depth = 250;
Rozdział 3. Obiekty
127
Rysunek 3.25.
Obiekt klasy WireCube z zaznaczonymi właściwościami wierzchołków
Aby na ekranie pojawił się obiekt tej klasy, należy dopisać następujący warunek w instrukcji switch wewnątrz metody primitiveChangeEventHandler(): case 'WireCubeEvent': container.addChild(wireCube); break;
Wszystkie najważniejsze właściwości wraz z metodami zostały wypisane poniżej w tabelach 3.49 oraz 3.50. Tabela 3.49. Właściwości klasy WireCube
Nazwa
Rodzaj
Wartość domyślna
Opis
height
Number
100
Wysokość obiektu
width
Number
100
Szerokość obiektu
depth
Number
100
Głębokość
v000
Vertex
Vertex(-50,-50,-50)
Współrzędne wierzchołka
v001
Vertex
Vertex(-50,-50,50)
Współrzędne wierzchołka
v010
Vertex
Vertex(-50,50,-50)
Współrzędne wierzchołka
v011
Vertex
Vertex(-50,50,50)
Współrzędne wierzchołka
v100
Vertex
Vertex(50,-50,-50)
Współrzędne wierzchołka
v101
Vertex
Vertex(50,-50,50)
Współrzędne wierzchołka
v110
Vertex
Vertex(50,50,-50)
Współrzędne wierzchołka
v111
Vertex
Vertex(50,50,50)
Współrzędne wierzchołka
128
Flash i ActionScript. Aplikacje 3D od podstaw
Tabela 3.50. Metody klasy WireCube
Nazwa
Opis
WireCube(init:Object = null)
Konstruktor
WireCone Klasa WireCone tworzy obiekt stożka prostego, którego podstawą jest ośmiokąt foremny. Podobnie jak kilka wcześniej omówionych klas, ta również generuje tylko siatkę bez boków i podstaw. Do wyznaczenia formy obiektu WireCone służą właściwości znane z klasy Cone, czyli tutaj również można regulować promień podstawy, liczbę kątów, wysokość całej siatki i pozycję jej punktów Vertex. Na rysunku 3.26 przedstawiono obiekt klasy WireCone. Rysunek 3.26.
Obiekt klasy WireCone
Od strony kodu klasy bazowej w metodzie initPrimitives() należy dopisać następujący fragment kodu: wireCone = new WireCone(); wireCone.radius = 150; wireCone.height = 300;
Aby obiekt wireCone był dostępny, po wybraniu jego opcji z pola wyboru w metodzie primitiveChangeEventHandler() należy dodać następujący warunek do instrukcji switch: case 'WireConeEvent': container.addChild(wireCone); break;
Rozdział 3. Obiekty
129
Tabele 3.51 oraz 3.52 zawierają listę właściwości oraz metod dostępnych dla obiektów klasy WireCone. Tabela 3.51. Właściwości klasy WireCone
Nazwa
Rodzaj
Wartość domyślna
Opis
height
Number
200
Wysokość obiektu WireCone
radius
Number
100
Promień podstawy obiektu
segmentsH
Number
1
Liczba segmentów w pionie
segmentsW
Number
8
Liczba krawędzi podstawy
yUp
Boolean
true
Określa, czy obiekt ma być w pozycji pionowej, czy poziomej
Tabela 3.52. Metody klasy WireCone
Nazwa
Opis
WireCone(init:Object = null)
Konstruktor
WireCylinder Klasa WireCylinder tworzy obiekt siatki walca, którego podstawami domyślnie są ośmiokąty foremne. Tak samo jak w klasie Cylinder, liczbę krawędzi podstaw można zmienić, stosując właściwość segmentsW, a wysokość całej siatki reguluje się właściwością height. Pozostałe właściwości — radius, segmentsW oraz yUp — mają takie same zadania jak ich odpowiedniki w klasie Cylinder. Jeżeli projekt wymaga umieszczenia na scenie obiektu walca, który nie ma wypełnionych boków, klasa WireCylinder jest do tego zadania stworzona. Na rysunku 3.27 przedstawiono ją z domyślnymi ustawieniami liczby kątów u podstaw. Aby stworzyć obiekt WireCylinder, w klasie bazowej wewnątrz metody initPrimitives() należy dodać następujący kod źródłowy, w którym tworzymy obiekt i zmieniamy jego standardowe wymiary i położenie na scenie: wireCylinder = new WireCylinder(); wireCylinder.radius = 150; wireCylinder.height = 250;
Aby obiekt był dostępny, po zmianie w komponencie ComboBox opcji na WireCylinder należy dodatkowo umieścić następujący warunek w instrukcji switch wewnątrz metody primitiveChangeEventHandler(): case 'WireCylinderEvent': container.addChild(wireCylinder); break;
130
Flash i ActionScript. Aplikacje 3D od podstaw
Rysunek 3.27.
Obiekt klasy WireCylinder
Tabele 3.53 oraz 3.54 zawierają listę właściwości oraz metod dostępnych dla obiektów klasy WireCylinder. Tabela 3.53. Właściwości klasy WireCylinder
Nazwa
Rodzaj
Wartość domyślna
Opis
height
Number
200
Wysokość obiektu WireCylinder
radius
Number
100
Promień podstaw obiektu WireCylinder
segmentsH
Number
1
Liczba segmentów w pionie
segmentsW
Number
8
Liczba krawędzi podstaw obiektu
yUp
Boolean
true
Określa, czy obiekt ma być w pozycji pionowej, czy poziomej
Tabela 3.54. Metody klasy WireCylinder
Nazwa
Opis
WireCylinder(init:Object = null)
Konstruktor
WireSphere W tym rozdziale omówione zostały dwie klasy, które przy odpowiedniej liczbie segmentów generują obiekty w postaci kul. WireSphere jest kolejną klasą, której obiekt może przyjąć taką formę, jedyna różnica polega na tym, że nie ma ona wypełnionych wielokątów, a jedynie samą siatkę bryły. Właściwości udostępnione w tej klasie są takie same jak właściwości klasy Sphere. Dla przykładu na rysunku
Rozdział 3. Obiekty
131
3.28 przedstawiono obiekt klasy WireSphere z takimi samymi ustawieniami, jakie miał obiekt klasy Sphere z rysunku 3.16. Rysunek 3.28.
Obiekt klasy WireSphere
Aby wygenerować obiekt siatki kuli w takiej postaci, jak pokazano na rysunku 3.28, należy w metodzie initPrimitives() dodać dwie linijki kodu: wireSphere = new WireSphere(); wireSphere.radius = 200;
Poza tym aby obiekt wireSphere pojawił się na scenie, po wybraniu jego opcji z pola wyboru wewnątrz instrukcji switch w metodzie primitiveChangeEventHandler() należy dodać taki oto warunek: case 'WireSphereEvent': container.addChild(wireSphere); break;
Tabele 3.55 oraz 3.56 zawierają listę właściwości oraz metod dostępnych dla obiektów klasy WireSphere. Tabela 3.55. Właściwości klasy WireSphere
Nazwa
Rodzaj
Wartość domyślna
Opis
radius
Number
100
Promień kuli
segmentsH
Number
1
Liczba segmentów w pionie
segmentsW
Number
8
Liczba segmentów w poziomie
yUp
Boolean
true
Określa, czy obiekt ma być w pozycji pionowej, czy poziomej
132
Flash i ActionScript. Aplikacje 3D od podstaw
Tabela 3.56. Metody klasy WireSphere
Nazwa
Opis
WireSphere(init:Object = null)
Konstruktor
WireRegularPolygon Obiekt stworzony z klasy WireRegularPolygon wyświetlany jest jako wielokąt foremny, standardowo złożony z ośmiu krawędzi. Wewnątrz wygenerowanego obiektu nie ma nic — ani pokrytej powierzchni, ani nawet linii łączących punkty Vertex na krawędziach z punktem centralnym całego obiektu. WireRegularPolygon ma następujące właściwości: radius ustawiający długość jego promienia, sides wyznaczający liczbę krawędzi oraz yUp, który określa, czy obiekt ma być w pozycji pionowej, czy też poziomej. Na rysunku 3.29 przedstawiono przykładowy obiekt tej klasy. Rysunek 3.29.
Obiekt klasy WireRegularPolygon
Od strony kodu klasy bazowej w metodzie initPrimitives() należy dopisać następujący fragment kodu: wirePolygon = new WireRegularPolygon(); wirePolygon.radius = 200; wirePolygon.yUp = false;
Aby obiekt wirePolygon był dostępny, po wybraniu jego opcji z pola wyboru w metodzie primitiveChangeEventHandler() należy dodać następujący warunek do instrukcji switch:
Rozdział 3. Obiekty
133
case 'WireRegularPolygonEvent': container.addChild(wirePolygon); break;
Tabele 3.57 oraz 3.58 zawierają listę właściwości oraz metod dostępnych dla obiektów klasy WireRegularPolygon. Tabela 3.57. Właściwości klasy WireRegularPolygon
Nazwa
Rodzaj
Wartość domyślna
Opis
sides
Number
200
Liczba krawędzi wielokąta
radius
Number
100
Promień wielokąta foremnego
yUp
Boolean
true
Określa, czy obiekt ma być w pozycji pionowej, czy poziomej
Tabela 3.58. Metody klasy WireRegularPolygon
Nazwa
Opis
WireRegularPolygon(init:Object = null)
Konstruktor
WireTorus WireTorus
to ostatnia omawiana klasa w tym rozdziale, której obiekt ma postać siatki, w tym przypadku poznanej wcześniej bryły o kształcie obwarzanka. Pod względem właściwości nie różni się ona od klasy Torus, tutaj również istnieje możliwość ustawienia szerokości całego obiektu poprzez zmianę wartości właściwości radius. Promień okręgów, których połączenie tworzy tę siatkę, również kontroluje się poprzez właściwość tube, a za liczbę segmentów odpowiadają segmentsR oraz segmentsT. Na rysunku 3.30 przedstawiono obiekt klasy WireTorus z takimi samymi ustawieniami jak w przypadku obiektu klasy Torus z rysunku 3.18. Żeby uzyskać taki obiekt, wewnątrz metody initPrimitives() należy dodać następujący kod: wireTorus = new WireTorus(); wireTorus.tube = 60; wireTorus.radius = 200;
Aby po wybraniu opcji WireTorus z pola ComboBox na ekranie pojawił się obiekt wireTorus, należy dopisać następujący warunek w instrukcji switch wewnątrz metody primitiveChangeEventHandler(): case 'WireTorusEvent': container.addChild(wireTorus); break;
134
Flash i ActionScript. Aplikacje 3D od podstaw
Rysunek 3.30.
Obiekt klasy WireTorus
Tabele 3.59 oraz 3.60 zawierają listę właściwości oraz metod dostępnych dla obiektów klasy WireTorus. Tabela 3.59. Właściwości klasy WireTorus
Nazwa
Rodzaj
Wartość domyślna
Opis
radius
Number
100
Długość promienia torusa
segmentsR
Number
8
Liczba segmentów w poziomie
segmentsT
Number
6
Liczba segmentów w pionie
tube
Number
40
Średnica ścian obiektu WireTorus
yUp
Boolean
true
Określa, czy obiekt ma być w pozycji pionowej, czy poziomej
Tabela 3.60. Metody klasy WireTorus
Nazwa
Opis
WireTorus(init:Object = null)
Konstruktor
Skybox W tym podrozdziale poznamy klasy Skybox oraz Skybox6, które generują obiekty specjalnie skonstruowane do pełnienia funkcji tła lub panoramy. Do ich wykorzystania potrzebna jest wiedza związana ze stosowaniem materiałów, którą zdobędziemy dopiero w następnym rozdziale, ale ponieważ obie te klasy znajdują się w pakiecie away3d.primitives, nie będziemy specjalnie ich rozłączali od pozostałych.
Rozdział 3. Obiekty
135
Skybox W punkcie dotyczącym obiektu klasy Cube wspomniano o możliwości umieszczenia kamery wewnątrz bryły i odwrócenia sposobu wyświetlania ścian z zewnętrznej warstwy obiektu na wewnętrzną. Warunkiem, aby to się udało, jest przypisanie właściwości flip wartości true, dzięki czemu ze zwykłego obiektu klasy Cube można stworzyć warstwę tła. Aby jednak pominąć to całe zamieszanie, powinno się wykorzystać obiekt typu Skybox, który został zaprojektowany specjalnie do takich celów. Obiekt tej klasy to nic innego jak duży sześcian Cube, którego ściany są od razu skierowane do wewnątrz, a ich wymiary odpowiadają scenie aplikacji. W konstruktorze tej klasy argumentami nazywa się materiały, które mają zostać użyte na każdym z boków. Łatwo się nimi posługiwać, zważywszy na to, że ich nazwy odpowiadają bokom sześcianu. Na rysunku 3.31 przedstawiono obiekt klasy Skybox z przykładowymi teksturami, które można znaleźć w internecie. Rysunek 3.31.
Obiekt klasy Skybox
Aby stworzyć panoramę, często sięgano po obiekty Sphere, ale jest to mniej wydajne rozwiązanie z uwagi na liczbę trójkątów, jaka jest potrzebna do wygenerowania kuli. Przepisz poniższy kod, aby sprawdzić, jak działa obiekt klasy Skybox: package { import import import import import
Flash i ActionScript. Aplikacje 3D od podstaw import flash.display.Sprite; import flash.events.*; public class skyboxExample extends Sprite { private var view:View3D; private var background:Skybox; public function skyboxExample() { stage.align = StageAlign.TOP_LEFT; stage.scaleMode = StageScaleMode.NO_SCALE; view = new View3D(); addChild(view); background = new Skybox( new BitmapFileMaterial('../../resources/bitmaps/skybox/ front.jpg'), new BitmapFileMaterial('../../resources/bitmaps/skybox/ left.jpg'), new BitmapFileMaterial('../../resources/bitmaps/skybox/ back.jpg'), new BitmapFileMaterial('../../resources/bitmaps/skybox/ right.jpg'), new BitmapFileMaterial('../../resources/bitmaps/skybox/up.jpg'), new BitmapFileMaterial('../../resources/bitmaps/skybox/ down.jpg') ); view.scene.addChild(background); onResize(); stage.addEventListener(Event.RESIZE, onResize); addEventListener(Event.ENTER_FRAME, onEnterFrame); } private function onResize(e:Event = null):void { view.x = stage.stageWidth * .5; view.y = stage.stageHeight * .5; } private function onEnterFrame(e:Event):void { view.camera.rotationX += .25; view.camera.rotationY -= .1; view.render(); } } }
W powyższym kodzie na początku zaimportowaliśmy potrzebne nam klasy, ze strony biblioteki użyliśmy widoku View3D, omawianego Skybox oraz materiału BitmapFileMaterial, którym na razie nie będziemy zaprzątali sobie głowy. Do ob-
Rozdział 3. Obiekty
137
sługi zdarzeń oraz stołu montażowego aplikacji wykorzystaliśmy klasy: Sprite, StageAlign, StageScaleMode oraz Event. Wewnątrz klasy skyboxExample zdefiniowaliśmy dwa obiekty niezbędne do działania aplikacji. Są nimi view oraz background. W konstruktorze, podobnie jak w poprzednich przykładach, w pierwszej kolejności nadaliśmy odpowiednie ustawienia obiektowi stage: stage.align = StageAlign.TOP_LEFT; stage.scaleMode = StageScaleMode.NO_SCALE;
Następnie stworzyliśmy widok i dodaliśmy go do stołu montażowego. W kolejnych kilku linijkach stworzyliśmy wcześniej zadeklarowany jako background obiekt klasy Skybox, nadając mu kolejno w argumentach obiekty materiałów korzystające z zewnętrznych plików graficznych. Każdy z tych materiałów pokrywa osobną ścianę, a użyte nazwy plików odpowiadają ich nazwom argumentów. Dzięki temu można zachować porządek w tego typu obiektach. background = new Skybox( new BitmapFileMaterial('../../resources/bitmaps/skybox/front.jpg'), new BitmapFileMaterial('../../resources/bitmaps/skybox/left.jpg'), new BitmapFileMaterial('../../resources/bitmaps/skybox/back.jpg'), new BitmapFileMaterial('../../resources/bitmaps/skybox/right.jpg'), new BitmapFileMaterial('../../resources/bitmaps/skybox/up.jpg'), new BitmapFileMaterial('../../resources/bitmaps/skybox/down.jpg') );
Po wypełnieniu wszystkich argumentów i stworzeniu obiektu dodaliśmy go do zasobów sceny, korzystając z metody addChild() na obiekcie scene. view.scene.addChild(background);
Na końcu konstruktora wywołaliśmy metodę onResize(), aby ustawić scenę względem okna, i dodaliśmy nasłuch na zdarzenia Event.RESIZE i Event.ENTER_FRAME. W metodzie onResize() zapisaliśmy zmianę pozycji widoku, tak aby view zawsze było w samym środku okna aplikacji. view.x = stage.stageWidth * .5; view.y = stage.stageHeight * .5;
Zadaniem metody onEnterFrame() jest odświeżanie zawartości widoku przez odwołanie się do jego metody render() oraz obracanie kamerą względem osi Y oraz X. Poniżej w tabeli 3.61 zawarto jedynie konstruktor klasy Skybox.
Skybox6 Skybox6 jest drugą klasą stworzoną do generowania tła i panoram, której zasada działania jest taka sama jak w przypadku zwykłego Skybox. Tutaj również wyświetlony obraz bazuje na formie sześcianu, który pokrywa całą powierzchnię sceny. Jest jednak między tymi klasami pewna różnica, i to nie tylko w nazwie. Otóż Skybox6 jako źródło wyświetlanego obrazu potrzebuje tylko jednego pliku graficznego, w którym trzeba umieścić grafikę dla każdej ze ścian. Na rysunku 3.32 przedstawiono schemat tekstury z podziałem na pozycje poszczególnych fragmentów panoramy. Rysunek 3.32.
Schemat tekstury dla obiektu klasy Skybox6
Tak przygotowany plik może być użyty jako źródło wyświetlanego obrazu, a sam obiekt tworzy się, stosując jeden materiał, a nie sześć, jak miało to miejsce w poprzednio omawianej klasie. Przy dokonywaniu wyboru między Skybox a Skybox6 należy się zastanowić, co będzie dla nas wygodniejsze i czy w trakcie wyświetlania sceny nie będą się musiały zmieniać pojedyncze ściany tła. Aby sprawdzić, jak działa Skybox6, skopiuj kod z przykładu dotyczącego klasy Skybox, w miejscu gdzie importowana jest klasa oraz definiowany obiekt background, zamień nazwę Skybox na Skybox6. Aby stworzyć obiekt background, posłuż się poniższym fragmentem kodu: background = new Skybox6(new BitmapFileMaterial('../../resources/bitmaps/ skybox/skybox.jpg'));
Rozdział 3. Obiekty
139
Ponieważ — tak samo jak w przypadku klasy Skybox — klasa Skybox6 nie ma dodatkowych metod, tabela 3.62 zawiera jedynie konstruktor tej klasy. Tabela 3.62. Metody klasy Skybox6
Nazwa
Opis
Skybox6(material:Material = null)
Konstruktor
Podsumowanie Podstawą wszystkich brył są punkty, które w bibliotece Away3D reprezentują obiekty klasy Vertex. Dwa punkty Vertex połączone linią tworzą obiekt Segment oraz LineSegment. Obiekty klas Segment, Face oraz Sprite3D same w sobie nie są widoczne na scenie, potrzebują obiektu kontenera, który zapewni warstwę wizualną. Klasa Segment ma metody lineTo(), curveTo() oraz moveTo(), które pozwalają na rysowanie linii prostych i krzywych. Obiekt klasy Face jest zbiorem trzech punktów Vertex: v0, v1, v2, które połączone tworzą formę trójkąta o wypełnionej powierzchni. Klasa Segment zawiera metody potrzebne do tworzenia dowolnej liczby linii prostych i krzywych. Obiekt klasy Mesh jest kontenerem dla obiektów typu Segment, Face i Sprite3D. Dzięki metodom — odpowiednio — addFace(), addSegment() oraz addSprite() umożliwia wyświetlenie elementów klas Face, Segment czy też Sprite3D. Klasa Sprite3D tworzy dwuwymiarową figurę w kształcie prostokąta, który jest zawsze zwrócony ku kamerze. Jedynym sposobem oddziaływania Sprite3D na otaczające go środowisko jest zmienienie swojej skali względem odległości od kamery. MovieClipSprite w porównaniu z klasą Sprite3D dodatkowo umożliwia stosowanie obiektów MovieClip jako źródła wyświetlanego obrazu. DirectionalSprite to klasa generująca specjalny obiekt, który zmienia wyświetlany obraz w zależności od kąta nachylenia obiektu względem otoczenia.
140
Flash i ActionScript. Aplikacje 3D od podstaw
Dodając źródło obrazu dla obiektu klasy DirectionalSprite, stosuje się metodę addDirectionalMaterial(), w której pierwsza właściwość jest punktem Vertex określającym kierunek, a druga to źródło obrazu. Żaden z obiektów w pakiecie away3d.primitives nie wymaga dodatkowych obiektów, aby były one widoczne. Każda z klas pakietu away3d.primitives dziedziczy z klasy AbstractPrimitive, która jest klasą macierzystą, chociaż jej obiekt nie generuje jakiejkolwiek bryły. Klasa AbstractPrimitive ma metody i właściwości, które umożliwiają wyświetlanie tworzonych brył. Do zbudowania bryły jakiejkolwiek klasy potrzebna jest metoda buildPrimitive() z klasy AbstractPrimitive. Wewnątrz klasy AbstractPrimitive i jej pochodnych stosowana jest przestrzeń nazw arcane. Klasa Init umieszczona w pakiecie away3d.core.utils generuje obiekt pomocniczy dla ustawiania różnego rodzaju wartości dla właściwości. Klasa LineSegment tworzy linię, która nie potrzebuje dodatkowego kontenera, aby była widoczna na scenie. Klasa Trident tworzy obiekt układu trzech osi: X, Y oraz Z, w którym można regulować ich długość oraz wyświetlić nazwy. Obiekty zawarte w pakiecie away3d.primitives swoje punkty centralne, jak wskazuje nazwa, mają w samym środku zajmowanej przestrzeni lokalnej. Punkt ten jest odniesieniem przy zmianie położenia bądź kąta nachylenia obiektu. RegularPolygon tworzy obiekt, którego forma ma postać wielokąta foremnego, standardowo złożonego z ośmiu krawędzi. Do stworzenia kuli można posłużyć się dwiema klasami: Sphere oraz GeodesicSphere. GeodesicSphere z uwagi na swoją budowę pozwala uzyskać kulisty kształt z mniejszą liczbą trójkątów. Za ich liczbę odpowiada wartość właściwości fractures, który reguluje podział każdej z krawędzi. Obiekty klas Torus oraz TorusKnot stosuje się głównie przy testach wydajnościowych aplikacji.
Rozdział 3. Obiekty
141
Podstawami obiektów klas Cone oraz Cylinder są ośmiokąty foremne, można regulować liczbę tych kątów, jak również to, czy w ogóle mają być one wyświetlane. Odwołując się do elementów tablicy vertices zawartej w obiekcie, można modyfikować jego wygląd. W ten sposób można zamienić stożek prosty w ścięty lub pochyły. Klasa SeaTurtle to w rzeczywistości wyeksportowany do pliku *.as model. W pakiecie away3d.primitives umieszczone są również klasy, których obiekty nie mają powierzchni, a jedynie same krawędzie. Nazwy tych klas zawierają przedrostek Wire. Klasy Skybox oraz Skybox6 zostały specjalnie dodane do tworzenia tła oraz panoram. Klasa Skybox korzysta z sześciu różnych materiałów, a klasa Skybox6 z jednego, w którym każdy z boków ma swoje konkretne miejsce. Panoramy wygenerowane na sześcianie są bardziej wydajne od tych stworzonych na obiekcie Sphere. Przypisanie wartości true właściwości bothsides sprawia, że powierzchnia trójwymiarowego obiektu renderowana jest z obu stron, niezależnie od pozycji kamery.
142
Flash i ActionScript. Aplikacje 3D od podstaw
Rozdział 4. Materiały Na wstępie warto wyjaśnić, co kryje się za pojęciem materiał. Otóż materiałem będziemy określali obiekty, których rolą jest pokrycie powierzchni trójwymiarowego obiektu w konkretny sposób. Nie należy mylić tego z teksturą, ponieważ jest ona plikiem graficznym, z którego korzysta kilka rodzajów materiałów. W niektórych z omówionych do tej pory przykładach musieliśmy zastosować nieznane nam jeszcze materiały. Ponieważ w kolejnych rozdziałach będziemy zajmowali się bardziej złożonymi pojęciami, jest to dobry moment, aby przyjrzeć się rodzajom materiałów dostępnych w Away3D. Każdy z nich stworzony został do konkretnych zastosowań, przez co różnią się od siebie warunkami użycia, implementacją i sposobem oddziaływania na otoczenie. Mimo że materiały umieszczone są w jednym pakiecie away3d.materials, można podzielić je na kilka umownych kategorii. Najważniejszy podział polega na rozróżnieniu materiałów reagujących na działanie światła od tych, które go nie potrzebują do prawidłowego wyświetlania. Na tym etapie gdybyśmy skorzystali z którejś z klas materiałów reagujących na światło bez jego źródła, otrzymalibyśmy zwykłe czarne pokrycie. Dlatego w tym rozdziale zajmiemy się tą drugą grupą materiałów. Zaczniemy od najprostszych i skończymy na sposobie mieszania kilku naraz. Czytając ten rozdział, dowiesz się: Jakie rodzaje materiałów dostępnych w Away3D nie reagują na światło. W jakich warunkach korzystać z poszczególnych materiałów. Jak tworzyć i dodawać materiały do powierzchni obiektu. Jakie właściwości oraz metody mają klasy reprezentujące poszczególne rodzaje materiałów. Jak dodawać obrazy i inne źródła materiałów do zasobów aplikacji.
144
Flash i ActionScript. Aplikacje 3D od podstaw
Czym jest klasa Cast oraz jak jej używać. Jak korzystać z dodanych do zasobów plików graficznych bądź elementów MovieClip.
Przygotowanie zasobów dla aplikacji Dodawanie plików do zasobów w programie Adobe Flash Są sytuacje, w których liczba plików danego projektu musi być ograniczona do minimum, aby ułatwić przenoszenie aplikacji i nie narażać jej na ewentualne błędy spowodowane brakiem wybranego elementu. W takich sytuacjach można wszelkie pliki medialne umieścić w zasobach wybranej aplikacji bezpośrednio w pliku Flash. Spowoduje to zwiększenie rozmiarów programu, ale przynajmniej wszystkie potrzebne bitmapy, animacje lub dźwięki będą umieszczone w jednym miejscu. Przechowywanie zasobów bezpośrednio w aplikacji powinno być stosowane jedynie wtedy, gdy jesteśmy pewni, że zasoby te nie ulegną zmianie. W przeciwnym razie jakakolwiek podmiana zasobów może być bardzo niewygodna. Aby dodać plik graficzny i wykorzystać go w kodzie źródłowym, należy wykonać następujące kroki: 1. W pierwszej kolejności należy w górnym menu wcisnąć przycisk File. W rozwiniętej liście należy wybrać opcję Import, a następnie jedną z możliwości: Import to Stage… lub Import to Library… W przypadku pierwszej opcji wybrany element pojawi się dodatkowo na stole montażowym. Nas interesuje jednak druga możliwość. Omówiony krok przedstawiono na rysunku 4.1. 2. Po poprawnym zaimportowaniu wybranego pliku do zasobów (w naszym przypadku pliku front.jpg) w panelu Library powinna się pojawić nowa pozycja z jego nazwą. Po kliknięciu lewym przyciskiem myszy na tę nazwę w białym polu nad listą powinna się ukazać zawartość pliku, tak jak to pokazano na rysunku 4.2. 3. Gdy proces importu przebiegł pomyślnie i obrazek jest widoczny, można nadać mu nowe ustawienia. W tym celu należy kliknąć prawym przyciskiem myszy na konkretny element i wybrać opcję Properties…, tak jak to pokazano na rysunku 4.3.
Rozdział 4. Materiały
145
Rysunek 4.1.
Wybór opcji importowania pliku do zasobów
Rysunek 4.2.
Poprawnie zaimportowany plik graficzny
4. Po wykonaniu poprzedniego kroku powinno się pojawić nowe okno zatytułowane Properties. W zależności od rodzaju wybranego elementu zawiera ono różne opcje ustawień. W przypadku plików graficznych jest to między innymi określenie jakości, z jaką będzie wyświetlany obrazek. Każdy z elementów ma jednak jedną wspólną sekcję o nazwie Linkage, w której określa się odwołanie do klasy w kodzie ActionScript 3.0. Wewnątrz tej sekcji znajduje się pole wyboru Export for ActionScript, które domyślnie jest odznaczone i należy je zaznaczyć. Spowoduje to odblokowanie pozostałych pól wewnątrz sekcji, których wypełnienie jest niezbędne do utworzenia odwołania w kodzie ActionScript. Pomińmy pole
146
Flash i ActionScript. Aplikacje 3D od podstaw
Rysunek 4.3.
Włączenie okna opcji wybranego elementu
wyboru Export in frame 1, które zawsze jest zaznaczone — nas interesują pola Class oraz Base class. W polu Class należy podać nazwę klasy, która domyślnie jest taka sama jak nazwa wgranego elementu, z kolei w polu Base class podana jest ścieżka do klasy, z której nasza będzie dziedziczyła. Zawartość tego pola standardowo uzależniona jest od rodzaju elementu, ale można ją również zmienić. W polu Class podaliśmy nazwę pliku bez jego rozszerzenia, ponieważ nie stosuje się kropek w nazwach klas. Okno Properties z nowymi ustawieniami przedstawiono na rysunku 4.4 Rysunek 4.4.
Okno ustawień odwołania zasobu biblioteki do klasy
Rozdział 4. Materiały
147
5. Po wykonaniu wszystkich tych czynności kliknij przycisk OK w oknie Properties. Jeżeli nasza klasa nie zostanie odnaleziona, wyświetli się stosowny komunikat. Nie należy się tym przejmować, ponieważ jeszcze nie skończyliśmy pracy nad wybranym plikiem. Po pojawieniu się ostrzeżenia należy kliknąć OK. Okno zostanie zamknięte, a w panelu Library obok nazwy pliku pojawi się podana w ustawieniach nazwa klasy. Alternatywnym i szybszym sposobem stworzenia odwołania dla wybranego obiektu jest kliknięcie na szarym polu przy jego nazwie w panelu Library. To spowoduje pojawienie się pola tekstowego, w którym można podać nazwę klasy, tak jak to pokazano na rysunku 4.5. Rysunek 4.5.
Alternatywny sposób wpisania odwołania dla elementu
Stworzone dla zasobu powiązanie do klasy można wykorzystać w kodzie ActionScript na różne sposoby. W następnym podpunkcie tego podrozdziału poznamy dwa z nich.
Odwoływanie się do zasobów w kodzie źródłowym aplikacji Dodane do zasobów aplikacji pliki graficzne bądź inne elementy można w kodzie źródłowym wykorzystać w dwojaki sposób. Pierwszy, bardziej zaawansowany, polega na stworzeniu odpowiedniej klasy dla wybranego elementu, drugi zaś bazuje na specjalnie przygotowanej do tego celu klasie Cast, zaimplementowanej w bibliotece Away3D.
148
Flash i ActionScript. Aplikacje 3D od podstaw
Tworzenie klasy dla wybranego elementu w zasobach aplikacji W poprzednim podrozdziale w ostatnim kroku dodawania zasobów do aplikacji wspomniano o możliwości pojawienia się okna dialogowego z informacją ostrzegającą, że klasa o podanej nazwie nie istnieje. Jeżeli na zawartości zasobu mają być wykonywane jakiekolwiek operacje, można się zastanowić, czy taka klasa w rezultacie nie powinna faktycznie istnieć, zamiast być traktowana jedynie jako łącznik. Weźmy za przykład obiekt klasy MovieClip, który zawiera w sobie przyciski reagujące na kliknięcie myszką — aby zachować porządek i stosować obiektowe podejście do programowania, warto stworzyć dla takiego zasobu odpowiednią klasę. W jej wnętrzu można zaprogramować wszystkie potrzebne zachowania elementów zasobu, z którym jest ona powiązana. Przykładową strukturę klasy stworzonej dla zasobu tekstury przedstawiono w następującym kodzie: package { import flash.display.Sprite; public class Tekstura extends Sprite { // jakieś właściwości public function Tekstura():void { // jakieś operacje } public function get_bitmapData():BitmapData { // jakieś operacje zwracające obiekt klasy BitmapData } public function jakas_metoda ():void { // jakieś operacje } } }
Przyjmując, że klasa Tekstura ma być między innymi źródłem danych dla materiału klasy BitmapMaterial, dodaliśmy metodę, której wywołanie teoretycznie zwraca obiekt typu BitmapData. Poza tym klasa Tekstura ma również pewną metodę wykonującą dodatkowe czynności związane tylko z zawartością obiektu tej klasy. W tym pseudokodzie zawarliśmy dwie ważne kwestie związane z tworzeniem klas dla zasobów aplikacji — współpracy z innymi obiektami oraz wykonywania operacji w swoim obrębie. Przykładowe zastosowanie klasy Tekstura przedstawiono w następującym kodzie źródłowym:
Rozdział 4. Materiały
149
var tekstura:Tekstura = new Tekstura(); var bitmap:BitmapMaterial = new BitmapMaterial(tekstura.get_bitmapData()); tekstura.jakas_metoda();
Stosowanie klasy Cast Biblioteka Away3D ma w swoich źródłach klasę o nazwie Cast, która stworzona została specjalnie do tego, aby w szybki sposób tłumaczyć, przechowywać oraz reprezentować wybrane obiekty z zasobów aplikacji. Jest to klasa statyczna, co oznacza, że nie trzeba tworzyć jej obiektu, aby móc korzystać z metod oraz właściwości, które zawiera. Używanie jej w celu odwołania do konkretnego obiektu ogranicza się do jednej krótkiej linijki kodu, którą przedstawiono poniżej; Cast.bitmap('nazwa_jakiejs_bitmapy_zapisanej_w_zasobach_aplikacji')
W tym przypadku tworzy się odwołanie do konkretnej bitmapy, stosując metodę bitmap() i podając jako argument nazwę fikcyjnej klasy zapisanej w ustawieniach rysunku. Poza metodą bitmap() klasa Cast ma również inne, które opisano w tabeli 4.1. Tabela 4.1. Metody klasy Cast
Nazwa
Opis
bitmap
Zwraca element w postaci obiektu typu BitmapData
bytearray
Zwraca element w postaci obiektu typu ByteArray
color
Zwraca element w postaci wartości typu uint
material
Zwraca element w postaci obiektu typu Material
string
Zwraca element w postaci wartości typu String
tryclass
Zwraca element w postaci obiektu typu Object
trycolor
Zwraca element w postaci wartości typu uint
wirematerial
Zwraca element w postaci obiektu typu Material
xml
Zwraca element w postaci obiektu typu Xml
Osadzanie zasobów poprzez korzystanie ze znacznika [Embed] Zasoby potrzebne do prawidłowego działania aplikacji można osadzić w pliku swf w trakcie jego kompilacji. Operacja ta, potocznie określana jako wstrzykiwanie, polega na zastosowaniu znacznika metadanych [Embed], który dostępny jest w środowisku Flex SDK. W znaczniku [Embed] ścieżkę do zasobu określa się we właściwości source. Jeżeli z wybranego zasobu potrzebujemy konkretnego elementu, można odwołać się do niego poprzez właściwość symbol. Poza tym można również
150
Flash i ActionScript. Aplikacje 3D od podstaw
określić typ MIME osadzanego zasobu we właściwości mimeType. Należy pamiętać o tym, że obiekt typu Class, łączący z wybranym zasobem, musi być zadeklarowany tuż pod znacznikiem [Embed]. Poniżej przedstawiono przykład osadzenia zasobów poprzez zastosowanie znacznika [Embed]: [Embed(source="../../resources/bitmaps/map2.jpg")] private var NormalMap:Class; [Embed(source="../../resources/bitmaps/waterMap.jpg")] private var WaterMap:Class; [Embed(source="../../resources/bitmaps/seaturtle.jpg")] private var SeaturtleBitmap:Class; [Embed(source="../../resources/bitmaps/specular.jpg")] private var Board:Class; [Embed(source="../../resources/swfs/form.swf")] private var movieMC:Class; [Embed(source="../../resources/swfs/water.swf", symbol="Water")] private var Water:Class;
Przykład Zanim zaczniemy omawiać poszczególne rodzaje materiałów, stworzymy klasę o nazwie MaterialsExample, która będzie podstawą do implementacji i sprawdzenia, jak materiały zachowują się na powierzchni obiektu. Do tego celu stworzymy scenę oraz kilka różnego rodzaju obiektów, którym przypiszemy konkretne materiały. Aby w łatwy sposób zmieniać rodzaj wyświetlanego materiału, stworzymy prosty panel użytkownika, w którym umieścimy obiekt typu ComboBox o nazwie materialSelect. W liście wyboru tego obiektu dodamy nazwy wszystkich omawianych w tym rozdziale materiałów. Poza składnikiem ComboBox dodamy również trzy przyciski: togglePauseButton, lessButton i moreButton. Pierwszy z wymienionych przycisków widoczny będzie jedynie wtedy, gdy wyświetlanym materiałem będzie obiekt klasy VideoMaterial. Z kolei pozostałe dwa będą wyświetlane wraz z materiałem TransformBitmapMaterial. O funkcjach, które te przyciski spełniają, wspomnimy w dalszych częściach tego rozdziału, teraz przepisz następujący kod do pliku MaterialsPanel.as, aby w klasie bazowej tego przykładu móc stworzyć obiekt tego panelu. package { import flash.display.Sprite;
private function buttonClick(e:MouseEvent):void { dispatchEvent(new Event(e.target.name + 'Event')); } public function setVisibility(objectName:String,val:Boolean):void { if (getChildByName(objectName) is UIComponent) { (getChildByName(objectName) as UIComponent).visible = val; } } public function setLabel(labelName:String,val:String):void { if (getChildByName(labelName) is Button) { (getChildByName(labelName) as Button).label = val; } } public function draw(_width:Number, _height:Number, _color:uint = 0xF1F1F1, _alpha:int = 1):void { graphics.clear(); graphics.beginFill(_color,_alpha); graphics.drawRect(0, 0, _width, _height); graphics.endFill(); } } }
Gdy masz gotowy do użycia plik MaterialsPanel.as, przepisz poniższy kod źródłowy klasy bazowej naszego przykładu do pliku MaterialsExample.as. package { import flash.display.StageAlign; import flash.display.StageQuality; import flash.display.StageScaleMode; import flash.display.MovieClip; import flash.events.Event; import flash.events.MouseEvent; import away3d.containers.View3D; import away3d.materials.*; import away3d.primitives.*; public class MaterialsExample extends MovieClip { [Embed(source="../../resources/bitmaps/WaterNormalMap.jpg")] private var NormalMap:Class; [Embed(source="../../resources/bitmaps/waterMap.jpg")]
154
Flash i ActionScript. Aplikacje 3D od podstaw private var WaterMap:Class; [Embed(source="../../resources/bitmaps/seaturtle.jpg")] private var SeaturtleBitmap:Class; [Embed(source="../../resources/bitmaps/specular.jpg")] private var Board:Class; [Embed(source="../../resources/swfs/form.swf")] private var movieMC:Class; [Embed(source="../../resources/swfs/water.swf", symbol="Water")] private var Water:Class; private private private private private private private private private private private private private private private
var var var var var var var var var var var var var var var
Flash i ActionScript. Aplikacje 3D od podstaw } case 'lessSegmentsEvent': { currentObject.material.scaleX /= .5; currentObject.material.scaleY /= .5; break; } case 'moreSegmentsEvent': { currentObject.material.scaleX *= .5; currentObject.material.scaleY *= .5; break; } case 'lessExponentEvent': { if (currentMaterial.exponent >= 5) currentMaterial.exponent -= 5; break; } case 'moreExponentEvent': { currentMaterial.exponent += 5; break; } } } private function initMaterials():void { var waterMap:Bitmap = new WaterMap(); var seaturtleBitmap:Bitmap = new SeaturtleBitmap(); var board:Bitmap = new Board(); //WireframeMaterial wireframe = new WireframeMaterial(0x000000); //WireColorMaterial wirecolor = new WireColorMaterial(0xFF0000, { wireColor:0x000000} ); //ColorMaterial color = new ColorMaterial(0xFF0000); //EnviroColorMaterial enviroColor = new EnviroColorMaterial (0xFF0000, waterMap.bitmapData); //BitmapMaterial bitmap = new BitmapMaterial(seaturtleBitmap.bitmapData); //BitmapFileMaterial bitmapFile = new BitmapFileMaterial('../../resources/ bitmaps/road.jpg');
Rozdział 4. Materiały
157
//EnviroBitmapMaterial enviroBitmap = new EnviroBitmapMaterial(seaturtleBitmap.bitmapData, waterMap.bitmapData); //TransformBitmapMaterial transformBitmap = new TransformBitmapMaterial(board.bitmapData, { repeat:true, scaleX:1, scaleY:1 } ); //MovieMaterial movie = new MovieMaterial(new movieMC(), { interactive:true } ); //AnimatedBitmapMaterial animatedBitmap = new AnimatedBitmapMaterial(new Water()); currentMaterial = wireframe; } private function initObjects():void { //Sphere sphere = new Sphere( { material:currentMaterial, segmentsW:16, segmentsH:16 } ); //Cube cube = new Cube( { material:currentMaterial, segmentsW:8, segmentsH:8, segmentsD:8 } ); cube.scale(2); //Plane plane = new Plane( { material:currentMaterial, yUp:false, bothsides:true, width:400, height:400 } ); //SeaTurtle seaturtle = new SeaTurtle(); seaturtle.material=currentMaterial; seaturtle.scale(.5); seaturtle.rotationX = -45; currentObject = sphere; view.scene.addChild(currentObject); } private function onMaterialChangeEventHandler(e:Event = null):void { panel.setVisibility('togglePause', false); panel.setVisibility('lessSegments', false); panel.setVisibility('moreSegments', false); panel.setVisibility('lessExponent', false); panel.setVisibility('moreExponent', false); if (String(Object(currentMaterial).constructor) == '[class VideoMaterial]')
158
Flash i ActionScript. Aplikacje 3D od podstaw { (currentMaterial as VideoMaterial).nc.close(); (currentMaterial as VideoMaterial).netStream.close(); (currentMaterial as VideoMaterial).video.clear(); } if (currentObject != null) { view.scene.removeChild(currentObject); currentObject = null; currentMaterial = null; } if (e != null) { switch(e.target.value) { case 'WireframeMaterialEvent': currentMaterial = wireframe; currentObject = sphere; break; case 'WireColorMaterialEvent': currentMaterial = wirecolor; currentObject = cube; break; case 'ColorMaterialEvent': currentMaterial = color; currentObject = sphere; break; case 'EnviroColorMaterialEvent': currentMaterial = enviroColor; currentObject = seaturtle; break; case 'BitmapMaterialEvent': currentMaterial = bitmap; currentObject = seaturtle; break; case 'BitmapFileMaterialEvent': currentMaterial = bitmapFile; currentObject = sphere; break; case 'EnviroBitmapMaterialEvent': currentMaterial = enviroBitmap; currentObject = seaturtle; break; case 'GlassMaterialEvent': var normalMap:Bitmap = new NormalMap(); var waterMap:Bitmap = new WaterMap(); currentMaterial = new GlassMaterial(normalMap.bitmapData, waterMap.bitmapData, currentObject, false, { smooth:true, exponent:0 } ); panel.setVisibility('lessExponent', true);
Zanim zajmiemy się omawianiem konkretnych materiałów, przyjrzyjmy się niektórym fragmentom kodu tego przykładu. W pierwszej kolejności musieliśmy załączyć potrzebne nam klasy z biblioteki Away3D oraz ze standardowych pakietów ActionScript 3.0. Użyliśmy klas nadających odpowiednie ustawienia stołowi montażowemu projektu wraz z klasami zdarzeń Event i MouseEvent.
160
Flash i ActionScript. Aplikacje 3D od podstaw import import import import import import
Z biblioteki Away3D zaimportowaliśmy klasę View3D potrzebną do stworzenia obiektu widoku oraz wszystkie klasy materiałów i obiektów dostępnych w Away3D. Warto w tym miejscu wspomnieć, że importowanie tylko potrzebnych klas z wybranego pakietu jest zgodne ze sztuką pisania kodu, ale gdy korzystamy z większości klas dostępnych w pakiecie, można pokusić się o drogę na skróty i użyć *. import away3d.materials.*; import away3d.primitives.*;
W klasie MaterialsExample w pierwszej kolejności zdefiniowaliśmy obiekty typu Class, potrzebne do uzyskania dostępu do osadzonych plików graficznych JPG oraz SWF. Taki sposób osadzania zasobów został omówiony w punkcie „Osadzanie zasobów poprzez korzystanie ze znacznika [Embed]”. [Embed(source="../../resources/bitmaps/WaterNormalMap.jpg")] private var NormalMap:Class; [Embed(source="../../resources/bitmaps/waterMap.jpg")] private var WaterMap:Class; [Embed(source="../../resources/bitmaps/seaturtle.jpg")] private var SeaturtleBitmap:Class; [Embed(source="../../resources/bitmaps/specular.jpg")] private var Board:Class; [Embed(source="../../resources/swfs/form.swf")] private var movieMC:Class; [Embed(source="../../resources/swfs/water.swf", symbol="Water")] private var Water:Class;
Następnie zadeklarowaliśmy obiekt napisanej przez nas klasy MaterialsPanel, widoku View3D i każdej z klas materiałów, które zastosowano w przykładzie. Poza samymi materiałami potrzebowaliśmy również trójwymiarowych obiektów. W tym celu skorzystaliśmy z klas: Sphere, Cube, Plane oraz SeaTurtle. W zależności od wybranego materiału na ekranie pojawi się jeden z tych obiektów. Poza standardowymi obiektami i materiałami zdefiniowaliśmy również currentMaterial i currentObject, którym nie przypisaliśmy konkretnego typu, co z kolei pozwoliło na wielokrotne wykorzystanie tych zmiennych w procesie zmiany materiału i obiektu. W konstruktorze klasy MaterialsExample zapisaliśmy instrukcję warunkową if, której celem jest sprawdzenie, czy obiekt stage został utworzony. Jeżeli wynikiem tego warunku jest true, to wywołana zostanie metoda init(), w przeciwnym razie dla obiektu stage utworzony zostanie obiekt nasłuchujący zdarzenia Event.ADDED_TO_STAGE, który uruchomi metodę init() z chwilą utworzenia obiektu klasy Stage w konstruktorze aplikacji.
Rozdział 4. Materiały
161
Wewnątrz metody init() w pierwszych linijkach nadaliśmy odpowiednie ustawienia jakości obrazu, wyrównania oraz skalowania obiektu stage. Dzięki tym ustawieniom obiekty będą wyświetlały się w odpowiedniej skali oraz pozycji. Poza tym usunęliśmy zbędny już obiekt nasłuchujący zdarzenia Event.ADDED_TO_ STAGE i dodaliśmy nowe do odświeżania zawartości listy wyświetlanych obiektów oraz zmiany rozmiaru okna aplikacji. W dalszej części metody init() stworzyliśmy i dodaliśmy do listy wyświetlanych obiektów widok View3D. W kolejnych linijkach kodu wywołaliśmy metody: initMaterials(), initObjects(), addPanel() oraz onResize(). W metodzie addPanel() stworzyliśmy obiekt klasy MaterialsPanel, dodaliśmy go do listy wyświetlanych obiektów i utworzyliśmy szereg obiektów nasłuchujących zdarzeń przypisanych temu panelowi. Dodane detektory wywołują dwie metody. W przypadku przycisków tą metodą jest onPanelEvent(), z kolei przy zmianie opcji w obiekcie typu ComboBox następuje wywołanie metody onMaterialChangeEventHandler(). panel = new MaterialsPanel(); addChild(panel); panel.addEventListener('togglePauseEvent', onPanelEvent); panel.addEventListener('lessSegmentsEvent', onPanelEvent); panel.addEventListener('moreSegmentsEvent', onPanelEvent); panel.addEventListener('lessExponentEvent', onPanelEvent); panel.addEventListener('moreExponentEvent', onPanelEvent); panel.addEventListener('WireframeMaterialEvent', onMaterialChangeEventHandler); panel.addEventListener('WireColorMaterialEvent', onMaterialChangeEventHandler); panel.addEventListener('ColorMaterialEvent', onMaterialChangeEventHandler); panel.addEventListener('EnviroColorMaterialEvent', onMaterialChangeEventHandler); panel.addEventListener('BitmapMaterialEvent', onMaterialChangeEventHandler); panel.addEventListener('BitmapFileMaterialEvent', onMaterialChangeEventHandler); panel.addEventListener('EnviroBitmapMaterialEvent', onMaterialChangeEventHandler); panel.addEventListener('GlassMaterialEvent', onMaterialChangeEventHandler); panel.addEventListener('TransformBitmapMaterialEvent', onMaterialChangeEventHandler); panel.addEventListener('DepthBitmapMaterialEvent', onMaterialChangeEventHandler); panel.addEventListener('MovieMaterialEvent', onMaterialChangeEventHandler); panel.addEventListener('AnimatedBitmapMaterialEvent', onMaterialChangeEventHandler); panel.addEventListener('VideoMaterialEvent', onMaterialChangeEventHandler);
162
Flash i ActionScript. Aplikacje 3D od podstaw
W metodzie onPanelEvent() zapisaliśmy instrukcję warunkową switch(), w której sprawdzany jest typ przechwyconego zdarzenia. Bloki kodu poszczególnych warunków omówione są w dalszych częściach tego rozdziału. Wewnątrz metody initMaterials() zapisaliśmy tworzenie obiektów zdefiniowanych jako materiały. O każdym z nich wspomnimy podczas omawiania konkretnego materiału w kolejnych podrozdziałach. Na razie istotne jest to, że do obiektu currentMaterial przypisaliśmy obiekt wireframe, tym samym ustalając go jako domyślny rodzaj materiału. W metodzie initObjects() również zapisaliśmy tworzenie obiektów, tylko że tym razem są to bryły, na które nałożony zostanie wybrany materiał. W tej metodzie każdemu z obiektów przypisaliśmy jako materiał obiekt currentMaterial. W pierwszej kolejności stworzyliśmy obiekt kuli, przypisując jego właściwościom segmentsW i segmentsH wartość 16. sphere = new Sphere( { material:currentMaterial, segmentsW:16, segmentsH:16 } );
W drugiej kolejności stworzyliśmy obiekt sześcianu z liczbą segmentów równą 8 na każdym z jego boków, a metodą scale() zwiększyliśmy jego wymiary dwukrotnie. cube = new Cube( { material:currentMaterial, segmentsW:8, segmentsH:8, segmentsD:8 } ); cube.scale(2);
Trzecim obiektem, który stworzyliśmy, jest plansza plane o szerokości i wysokości równej 400 pikselom, wyświetlana z obu stron i ustawiona w pozycji pionowej. plane = new Plane( { material:currentMaterial, yUp:false, bothsides:true, width:400, height:400 } );
Aby efekty działania niektórych materiałów były lepiej widoczne, potrzebny jest obiekt o nieregularnych kształtach. Dlatego właśnie jako ostatni dodaliśmy obiekt klasy SeaTurtle. W swoich pierwotnych wymiarach byłby on stanowczo za duży, dlatego stosując metodę scale(), zmniejszyliśmy go o połowę. Dodatkowo obróciliśmy model żółwia o kąt 45 stopni względem osi X. seaturtle = new SeaTurtle(); seaturtle.material = currentMaterial; seaturtle.scale(.5); seaturtle.rotationX = -45;
Na końcu metody initObjects() ustawiliśmy obiekt kuli jako domyślną bryłę currentObject i dodaliśmy ją do sceny widoku, stosując metodę addChild().
Rozdział 4. Materiały
163
W przypadku metody onMaterialChangeEventHandler()na tę chwilę istotne jest tylko to, że odpowiada ona za przypisanie odpowiedniego materiału do bryły. W pierwszej kolejności w tym kodzie chowamy dodatkowe przyciski w panelu użytkownika. panel.setVisibility('togglePause', false); panel.setVisibility('lessSegments', false); panel.setVisibility('moreSegments', false); panel.setVisibility('lessExponent', false); panel.setVisibility('moreExponent', false);
Następnie sprawdzamy, czy aktualnie oglądany materiał nie jest typu wideo. Jeżeli tak, to czyścimy jego źródło. Potem usuwamy ze sceny aktualnie wyświetlaną bryłę, przy okazji sprawdzając przezornie, czy obiekt faktycznie istnieje. if (currentObject != null) { view.scene.removeChild(currentObject); currentObject = null; currentMaterial = null; }
Po usunięciu obiektu currentObject ze sceny zapisaliśmy instrukcję switch, w której wykonywany jest kod w zależności od wybranego materiału. Poszczególne fragmenty tego kodu zostaną później omówione. Na końcu metody onMaterialChangeEventHandler() przypisaliśmy obiektowi current Object nowy materiał i dodaliśmy go do sceny. currentObject.material = currentMaterial; view.scene.addChild(currentObject);
W bloku metody onResize() zapisaliśmy zmianę położenia widoku, tak aby był on zawsze na środku okna, z uwzględnieniem pozycji panelu użytkownika. Z kolei na obiekcie panel wywołaliśmy metodę draw(), nadając jej takie argumenty, aby nowo narysowane tło zajmowało całą szerokość okna i było wysokie na 50 pikseli. view.x = stage.stageWidth * .5; view.y = panel.height + (stage.stageHeight - panel.height) *.5; panel.draw(stage.stageWidth, 50);
W metodzie onEnterFrame() wprawiliśmy w ruch obrotowy obiekt currentObject oraz zapisaliśmy komendę odświeżającą zawartość sceny widoku. Poza tym użyliśmy instrukcji warunkowej, która sprawdza, czy aktualny materiał jest obiektem klasy TransformBitmapMaterial. Jeżeli warunek jest prawdziwy, to dodatkowo na obiekcie materiału zwiększana jest wartość właściwości offsetX. Efekt zmiany tej właściwości omówiony zostanie w podrozdziale poświęconym klasie Transform BitmapMaterial.
164
Flash i ActionScript. Aplikacje 3D od podstaw currentObject.rotationY--; if (currentMaterial == transformBitmap) transformBitmap.offsetX += 10; view.render();
Na chwilę obecną omówiliśmy wszystkie potrzebne metody zapisane w tej klasie. Pozostałymi zajmiemy się w odpowiednim czasie w dalszych częściach tego rozdziału.
Linie WireframeMaterial Materiał WireframeMaterial przedstawia trójwymiarowy obiekt w formie siatki, generowanej poprzez zaznaczenie krawędzi bryły i połączenie jej punktów liniami. Jest to najbardziej podstawowa forma prezentacji obiektu 3D w przestrzeni, co nie oznacza jednak, że jest najbardziej wydajna. Podobnie jak w zwykłych aplikacjach pisanych w ActionScript 3.0, rysowanie dużej liczby linii powoduje zwiększenie zużywanych zasobów. Formę siatki definiują trzy właściwości: wireColor określający kolor linii, wireAlpha ustalający poziom przezroczystości i thickness, który określa grubość linii. Tego typu materiał najlepiej stosować wtedy, kiedy testujemy działanie naszej aplikacji lub ustawiamy dany obiekt w przestrzeni. Efekt zastosowania tego materiału przedstawiono na rysunku 4.6. Rysunek 4.6.
Zastosowanie materiału WireframeMaterial
Rozdział 4. Materiały
165
Aby uzyskać taki efekt, w metodzie initMaterials() klasy bazowej zapisaliśmy obiekt o nazwie wireframe, ustawiając kolor linii jako biały. wireframe = new WireframeMaterial(0x000000);
Z kolei wewnątrz instrukcji switch w metodzie onMaterialChangeEventHandler() w przypadku wybrania materiału WireframeMaterial obiekt wireframe przypisujemy do currentMaterial, a sphere do currentObject. case 'WireframeMaterial': currentMaterial = wireframe; currentObject = sphere; break;
W tabelach 4.2 oraz 4.3 wypisane zostały właściwości oraz metody klasy Wireframe Material. Tabela 4.2. Właściwości klasy WireframeMaterial
Nazwa
Rodzaj
Wartość domyślna Opis
wireAlpha
Number
1
Poziom przezroczystości krawędzi ustalany w przedziale od 0 do 1
WireColorMaterial WireColorMaterial jest urozmaiconą wersją poprzednio poznanego Wireframe Material, ponieważ obiekt tej klasy umożliwia wypełnienie bryły wybranym kolorem i jednocześnie podkreślenie jej krawędzi. Materiał WireColorMaterial jest
standardowym sposobem pokrywania obiektów w bibliotece Away3D, jeżeli nie zdefiniowano innego. W takiej sytuacji krawędzie bryły wyświetlane są w czarnym kolorze, a jej ściany w wybranym losowo. Za określenie koloru wypełnienia odpowiada właściwość color, a pozostałe — wireColor, wireAlpha oraz thickness — mają to samo zastosowanie jak w przypadku WireframeMaterial. Przykład zastosowania tego materiału przedstawiono na rysunku 4.7.
166
Flash i ActionScript. Aplikacje 3D od podstaw
Rysunek 4.7.
Zastosowanie materiału WireColorMaterial
Aby uzyskać taki efekt, w metodzie initMaterials() klasy bazowej zapisaliśmy obiekt o nazwie wirecolor, ustawiając kolor linii jako biały, oraz wypełniliśmy ściany kolorem czerwonym. wirecolor = new WireColorMaterial(0xFF0000, { wireColor:0x000000 } );
Z kolei wewnątrz instrukcji switch w metodzie onMaterialChangeEventHandler() w przypadku wybrania materiału WireColorMaterial obiekt wirecolor przypisujemy do currentMaterial, a cube do currentObject. case 'WireColorMaterial': currentMaterial = wirecolor; currentObject = cube; break;
W tabelach 4.4 oraz 4.5 wypisane zostały właściwości oraz metody klasy WireColorMaterial. Tabela 4.4. Właściwości klasy WireColorMaterial
Nazwa
Rodzaj
Wartość domyślna Opis
color
uint
alpha
Number
1
Poziom widzialności ścian obiektu
wireAlpha
Number
1
Poziom widzialności krawędzi ustalany w przedziale od 0 do 1
jak nazwa wskazuje, wypełnia ściany obiektu jednolitym kolorem. W porównaniu z poprzednim typem WireColorMaterial ten nie zaznacza w jakikolwiek sposób krawędzi bryły. Co za tym idzie — nie jesteśmy w stanie dostrzec przestrzenności obiektu. Gdy stworzymy obiekt kuli i nadamy mu jednolity kolor, otrzymamy w rzeczywistości okrąg, który równie dobrze mógłby zostać stworzony w zwykły sposób, za pomocą podstawowych narzędzi Flash.
Może się jednak zdarzyć, że będziesz potrzebował takiego rodzaju wypełnienia. Dlatego w tym przykładzie wykorzystamy materiał ColorMaterial i nałożymy go na model. Efekt, który uzyskamy po skompilowaniu kodu, przedstawia poniższa ilustracja. Na rysunku 4.8 przedstawiono efekt zastosowania materiału ColorMaterial. Rysunek 4.8.
Zastosowanie materiału ColorMaterial
168
Flash i ActionScript. Aplikacje 3D od podstaw
Aby uzyskać taki efekt, w metodzie initMaterials() klasy bazowej zapisaliśmy obiekt o nazwie color, wypełniając wszystkie ściany jednolitym kolorem czerwonym. color = new ColorMaterial(0xFF0000);
Z kolei wewnątrz instrukcji switch w metodzie onMaterialChangeEventHandler() w przypadku wybrania materiału ColorMaterial obiekt color przypisujemy do currentMaterial, a sphere do currentObject. case 'ColorMaterial': currentMaterial = color; currentObject = sphere; break;
W tabelach 4.6 oraz 4.7 wypisane zostały właściwości oraz metody klasy Color Material. Tabela 4.6. Właściwości klasy ColorMaterial
Nazwa
Rodzaj
Wartość domyślna
Opis
color
uint
null
Kolor wypełnienia ustalany w kodzie szesnastkowym
Tabela 4.7. Metody klasy ColorMaterial
Nazwa
Opis
ColorMaterial(color:* = null, init:Object = null)
Konstruktor
EnviroColorMaterial EnviroColorMaterial jest materiałem, którego działanie symuluje odbicie otoczenia na powierzchni wybranego obiektu. W bibliotece Away3D jest jeszcze kilka innych o podobnych właściwościach i zastosowaniach. Jako pierwszy z nich poznamy właśnie EnviroColorMaterial. Generowanie refleksów w czasie rzeczywistym wymaga wielu procesów obliczeniowych i zużywa dużo zasobów komputera, dlatego częściej symuluje się taki efekt, stosując specjalnie przygotowaną bitmapę, która odzwierciedla otoczenie obiektu. W przypadku EnviroColorMaterial przy stosowaniu bitmapy otoczenia należy również pamiętać o ustaleniu jej poziomu przejrzystości, tak aby materiał bazowy nie był zakryty całkowicie. W przypadku EnviroColorMaterial właściwym pokryciem powierzchni jest jednolity kolor, który podaje się jako pierwszy atrybut color w konstruktorze klasy. Drugim atrybutem jest enviroMap, w którym należy podać obiekt klasy BitmapData jako źródło otoczenia. Siłę pseudoodbicia określa właściwość reflectiveness, którego standardowa wartość równa jest 0.5. Efekt zastosowania materiału EnviroColorMaterial na modelu żółwia przedstawiono na rysunku 4.9.
Rozdział 4. Materiały
169
Rysunek 4.9.
Zastosowanie materiału EnviroColorMaterial
Aby uzyskać taki efekt, w metodzie initMaterials() klasy bazowej zapisaliśmy obiekt o nazwie enviroColor, wypełniając wszystkie ściany jednolitym kolorem czerwonym. enviroColor = new EnviroColorMaterial(0xFFFFFF, waterMap.bitmapData);
Z kolei wewnątrz instrukcji switch w metodzie onMaterialChangeEventHandler() w przypadku wybrania materiału EnviroColorMaterial obiekt enviroColor przypisujemy do currentMaterial, a seaturtle do currentObject. case 'EnviroColorMaterial': currentMaterial = enviroColor; currentObject = seaturtle; break;
W tabelach 4.8 oraz 4.9 wypisane zostały właściwości oraz metody klasy Enviro ColorMaterial. Tabela 4.8. Właściwości klasy EnviroColorMaterial
Bitmapy BitmapMaterial BitmapMaterial jest zdecydowanie bardziej atrakcyjnym materiałem do pokrywania powierzchni obiektów niż omówione do tej pory. Za pomocą BitmapMaterial możemy zapewnić wybranemu obiektowi teksturę. Wykorzystanie takiego rodzaju pokrycia nadaje odpowiedni charakter obiektowi, na który jest ono nałożone, i sprawia o wiele więcej frajdy podczas jego oglądania. BitmapMaterial korzysta z obiektów klasy BitmapData wcześniej pobranych lub dodanych do zasobów tekstur. Korzystanie z tego rodzaju materiału jest dobre, gdy w projekcie dany obiekt będzie korzystał z niezmiennej tekstury, zawartej w zasobach, które są ładowane automatycznie wraz z uruchomieniem aplikacji.
Stosowanie tego materiału jest bardzo proste, ponieważ w konstruktorze Bitmap Material wystarczy podać odwołanie do obiektu BitmapData, który ma pokryć powierzchnię wybranego obiektu. Uzyskany efekt przedstawiono na rysunku 4.10. Aby pokryć model żółwia odpowiednią teksturą, skorzystaliśmy z obiektu klasy BitmapMaterial. W konstruktorze klasy tego materiału odnieśliśmy się do obiektu typu BitmapData z obiektu seaturtleBitmap. bitmap = new BitmapMaterial(seaturtleBitmap.bitmapData);
Z kolei wewnątrz instrukcji switch w metodzie onMaterialChangeEventHandler() w przypadku wybrania materiału BitmapMaterial obiekt bitmap przypisujemy do currentMaterial, a seaturtle do currentObject. case 'BitmapMaterial': currentMaterial = bitmap; currentObject = seaturtle; break;
Rozdział 4. Materiały
171
Rysunek 4.10.
Zastosowanie materiału BitmapMaterial
W tabelach 4.10 oraz 4.11 wypisane zostały właściwości oraz metody klasy Bitmap Material. Tabela 4.10. Właściwości klasy BitmapMaterial
Nazwa
Rodzaj
Wartość domyślna Opis
bitmap
BitmapData
null
Obiekt BitmapData stosowany jako źródło wyświetlanej tekstury
alpha
Number
1
Poziom przezroczystości wyświetlanej bitmapy
blendMode
String
„normal”
Określa sposób wyświetlania tekstury
colorTransform ColorTransform
null
Obiekt klasy ColorTransform wyświetlanej bitmapy
height
Number
NaN
Zwraca wysokość tekstury
width
Number
NaN
Zwraca szerokość tekstury
repeat
Boolean
false
Określa, czy tekstura ma być powielana na całej powierzchni obiektu
showNormals
Boolean
false
Przedstawia wektor normalny na każdym z wielokątów obiektu
smooth
Boolean
false
Określa, czy tekstura ma być wygładzona na powierzchni obiektu
BitmapFileMaterial BitmapFileMaterial, w odróżnieniu od wcześniej prezentowanego BitmapMaterial, czerpie zasoby z zewnętrznych plików graficznych, co sprawia, że aplikacja staje się bardziej dynamiczna i łatwa w modyfikowaniu. Największą zaletą korzystania z tego materiału jest możliwość zmiany tekstury w każdej chwili bez konieczności ingerowania w zasoby plików projektu oraz bez konieczności kolejnej kompilacji. Używając BitmapFileMaterial, należy pamiętać jednak o etapie ładowania tekstury. W zależności od rozmiaru pliku graficznego i prędkości łącza proces ładowania jest zróżnicowany. Nie zawsze możemy się spodziewać natychmiastowego pojawienia się lub zmiany tekstury, dlatego powinno się stosować odpowiednie zdarzenia procesu ładowania, ewentualnego błędu spowodowanego brakiem pliku lub zerwaniem połączenia i w końcu prawidłowego pobrania pliku. Mając kontrolę nad tymi czynnościami, można stworzyć stabilną aplikację z uniwersalnymi obiektami. Innym rozwiązaniem jest również wcześniejsze załadowanie potrzebnych tekstur z plików XML i stosowanie zewnętrznych bibliotek ładowania zasobów.
W najbardziej podstawowej formie korzystanie z BitmapFileMaterial ogranicza się do podania ścieżki do tekstury podczas tworzenia obiektu materiału. Tym właśnie sposobem obiekt kuli pokryliśmy bitmapą, czego efekt przedstawiono na rysunku 4.11. Aby uzyskać taki efekt, w metodzie initMaterials() klasy bazowej stworzyliśmy obiekt o nazwie bitmapFile, ustawiając w jego konstruktorze odwołanie do pliku graficznego umieszczonego w konkretnej lokalizacji. bitmapFile = new BitmapFileMaterial('../../resources/bitmaps/road.jpg');
Z kolei wewnątrz instrukcji switch w metodzie onMaterialChangeEventHandler() w przypadku wybrania materiału BitmapFileMaterial obiekt bitmapFile przypisujemy do currentMaterial, a plane do currentObject. case 'BitmapFileMaterial': currentMaterial = bitmapFile; currentObject = plane; break;
Rozdział 4. Materiały
173
Rysunek 4.11.
Zastosowanie materiału BitmapFileMaterial
W tabelach 4.12 oraz 4.13 wypisane zostały właściwości oraz metody klasy Bitmap FileMaterial. Tabela 4.12. Właściwości klasy BitmapFileMaterial
Nazwa
Rodzaj
Wartość domyślna
Opis
loader
Loader
null
Obiekt klasy Loader przechowujący pobraną zawartość
EnviroBitmapMaterial EnviroBitmapMaterial, podobnie jak wcześniej poznany materiał EnviroColorMaterial, służy do tworzenia iluzji odbijania na powierzchni obiektu jego otoczenia. Różnica w tym przypadku polega na tym, że macierzystym materiałem jest tekstura, a nie jednolity kolor.
Do wykorzystania EnviroBitmapMaterial musimy podać dwa obiekty typu BitmapData w konstruktorze klasy. Pierwszy z nich określa teksturę, jaką pokryty będzie obiekt, a drugi określa bitmapę symulującą otoczenie lub specjalne efekty nałożone na obiekt. Dodatkowo można również ustalić intensywność odbicia, stosując właściwość reflectiveness. Podobnie jak w przypadku materiału EnviroColorMaterial, tutaj również dla przykładu zastosowaliśmy obiekt waterMap, który przedstawia taflę wody pokrywającą teksturę żółwia, tak jak to pokazano na rysunku 4.12. Rysunek 4.12.
Zastosowanie materiału EnviroBitmapMaterial
Aby uzyskać taki efekt, w metodzie initMaterials() klasy bazowej stworzyliśmy obiekt o nazwie enviroBitmap, ustawiając w jego konstruktorze w pierwszym argumencie obiekt BitmapData tekstury pokrywającej żółwia, a w drugim obiekt BitmapData, który ma się odbijać na powierzchni modelu. enviroBitmap = new EnviroBitmapMaterial(seaturtleBitmap.bitmapData, waterMap.bitmapData);
Rozdział 4. Materiały
175
Z kolei wewnątrz instrukcji switch w metodzie onMaterialChangeEventHandler() w przypadku wybrania materiału EnviroBitmapMaterial obiekt enviroBitmap przypisujemy do currentMaterial, a seaturtle do currentObject. case 'EnviroBitmapMaterial': currentMaterial = enviroBitmap; currentObject = seaturtle; break;
W tabelach 4.14 oraz 4.15 wypisane zostały właściwości oraz metody klasy EnviroBitmapMaterial. Tabela 4.14. Właściwości klasy EnviroBitmapMaterial
Nazwa
Rodzaj
Wartość domyślna
Opis
enviroMap
BitmapData
null
Zwraca obiekt użyty jako tekstura odbijanego otoczenia
GlassMaterial W bibliotece Away3D dostępne są rodzaje materiałów, które po zastosowaniu odpowiedniego światła umożliwiają symulowanie wypukłości na powierzchni obiektu bez ingerowania w strukturę jego siatki. W technice tej stosuje się specjalnie spreparowane tekstury, które zawierają informacje o ułożeniu wektorów normalnych. Pojęciem tym zajmiemy się dokładniej w rozdziale 5. „Światło”. W tej chwili istotne jest to, że mapa normalnych jest niezbędna również do prawidłowego działania materiału GlassMaterial (materiał ten przedstawiono na rysunku 4.13). GlassMaterial jest jednym z bardziej złożonych materiałów dostępnych w bibliote-
ce Away3D. Jego wyjątkowość polega na tym, że bez stosowania jakichkolwiek źródeł światła symuluje zniekształcenia powierzchni i refleksy. Złożoność refleksów zależy od kąta nachylenia kamery względem obiektu pokrytego materiałem GlassMaterial. Klasa ta ma również właściwość exponent, której wyższe wartości zwiększają intensywność efektu odbijania otoczenia obiektu.
176
Flash i ActionScript. Aplikacje 3D od podstaw
Rysunek 4.13.
Zastosowanie materiału GlassMaterial
Obiekt klasy GlassMaterial najczęściej stosuje się do symulowania pofalowanej tafli wody, na której część światła jest odbijana, a część załamywana. Takie zjawisko nazywane jest efektem Fresnela i bazuje na równaniach Fresnela, o których więcej informacji uzyskasz na stronie: http://en.wikipedia.org/wiki/Fresnel_equations. Aby stworzyć obiekt klasy GlassMaterial, należy w jej konstruktorze podać w pierwszej kolejności jako argument normalMap obiekt w postaci BitmapData, który będzie odpowiadał za zniekształcenia powierzchni. W drugim argumencie envMap należy odwołać się do bitmapy otoczenia, która ma być teoretycznie odbijana. Źródło powierzchni, czyli obiekt, na którym GlassMaterial ma być wykorzystany, również należy podać w konstruktorze jako trzeci argument targetModel. Na rysunku 4.14 przedstawiono efekt zastosowania klasy GlassMaterial. Ponieważ w tym przypadku wcześniej należy zdefiniować obiekt, na którym będzie zastosowany materiał GlassMaterial, wszystkie operacje wykonujemy bezpośrednio wewnątrz instrukcji switch w metodzie onMaterialChangeEventHandler(). W przypadku wybrania materiału GlassMaterial w pierwszej kolejności stworzyliśmy nowe obiekty klasy Bitmap, obiektowi currentObject przypisaliśmy płaszczyznę plane, a dopiero później stworzyliśmy obiekt klasy GlassMaterial. W konstruktorze jako pierwszy argument podaliśmy obiekt BitmapData dla mapy normalnych, jako drugi teksturę pokrywającą powierzchnię, a na końcu obiekt, na którym materiał będzie zastosowany.
Rozdział 4. Materiały
177
Rysunek 4.14.
Zastosowanie materiału GlassMaterial
case 'GlassMaterial': var normalMap:Bitmap = new NormalMap(); var waterMap:Bitmap = new WaterMap(); currentObject = plane; currentMaterial = new GlassMaterial(normalMap.bitmapData, waterMap.bitmapData, currentObject, false, { smooth:true, exponent:0 } ); panel.setVisibility('lessExponent', true); panel.setVisibility('moreExponent', true); break;
Pojawiające się po wybraniu materiału GlassMaterial przyciski + i - służą do kontrolowania intensywności refleksów wyświetlanych na powierzchni obiektu. W metodzie onPanelEvent() uwzględniliśmy warunki wciśnięcia tych przycisków. W sytuacji wystąpienia zdarzenia lessExponentEvent wartość właściwości exponent jest zmniejszana o 10, jeżeli aktualna wartość jest większa lub równa 10. if (currentMaterial.exponent >= 10) currentMaterial.exponent -= 10;
Z kolei zdarzenie moreExponentEvent powoduje zwiększenie wartości właściwości exponent o 10. currentMaterial.exponent += 10;
W tabelach 4.16 oraz 4.17 wypisane zostały właściwości oraz metody klasy Glass Material.
178
Flash i ActionScript. Aplikacje 3D od podstaw
Tabela 4.16. Właściwości klasy GlassMaterial
Nazwa
Rodzaj
Wartość domyślna
Opis
dispersionR
Number
1
Określa skalę rozproszenia dla kanału czerwonego
dispersionG
Number
0.95
Określa skalę rozproszenia dla kanału zielonego
dispersionB
Number
0.9
Określa skalę rozproszenia dla niebieskiego
envMapAlpha
Number
1
Określa poziom przezroczystości odbijanej tekstury
exponent
Number
5
Określa złożoność wyświetlanych refleksów
glassColor
uint
16777215
Określa kolor odbicia na szkle
innerRefraction
Number
1.33
Współczynnik załamania światła wewnątrz powierzchni materiału
outerRefraction
Number
1.0008
Współczynnik załamania światła na zewnętrznej warstwie materiału, na którą padają promienie
TransformBitmapMaterial TransformBitmapMaterial służy przede wszystkim do wypełniania dużych powierzchni
powtarzającym się fragmentem tekstury. Dzięki temu nie musimy używać jednego pliku graficznego w wysokiej rozdzielczości, aby pole pokryć trawą lub pustynię piaskiem. Po ustawieniu właściwości repeat na true tekstura będzie się powtarzała, aż wypełni po brzegi cały obiekt. Wielkość tekstury, a zarazem liczbę jej powtórzeń na powierzchni obiektu można regulować właściwościami scaleX oraz scaleY. Wartość 1 dla obu właściwości określa oryginalny rozmiar wgranej tekstury, ustawienie mniejszych wartości spowoduje redukcję jej rozmiarów i zwiększenie liczby jej powtórzeń. Efekt manipulacji rozmiarem tekstury pokazano na rysunku 4.15.
Rozdział 4. Materiały
179
Rysunek 4.15. Zastosowanie materiału TransformBitmapMaterial
Poza samym powielaniem tekstury na wybranej powierzchni istnieje również możliwość jej przesunięcia lub rozciągnięcia w wybranym kierunku. Do tego celu służą właściwości offsetX, offsetY oraz projectionVector. Stosując je w powtarzających się metodach lub pętlach, można uzyskać efekt niekończącej się tekstury, co może być przydatne w wielu projektach. Aby móc sprawdzić działanie materiału TransformBitmapMaterial, musieliśmy w klasie bazowej wewnątrz metody initMaterials() zapisać obiekt o nazwie transform Bitmap, podając w jego konstruktorze jako pierwszą właściwość obiekt BitmapData, który pokryje powierzchnię płaszczyzny. Aby tekstura była powtarzalna, musieliśmy zapisać wartość true dla właściwości repeat. Dodatkowo właściwościom scaleX i scaleY przypisaliśmy wartość 1, co oznacza, że domyślnie tekstura będzie miała swoje standardowe rozmiary. transformBitmap = new TransformBitmapMaterial(board.bitmapData, { repeat:true, scaleX:1, scaleY:1 } );
Z kolei wewnątrz instrukcji switch w metodzie onMaterialChangeEventHandler() w przypadku wybrania materiału TransformBitmapMaterial obiekt transformBitmap przypisujemy do currentMaterial, a plane do currentObject. case 'TransformBitmapMaterial': panel.setVisibility('lessSegments', true); panel.setVisibility('moreSegments', true); currentMaterial = transformBitmap; currentObject = plane; break;
Do kontrolowania rozmiarów tekstury służą przyciski - oraz + umieszczone w panelu użytkownika, pojawiające się wraz z wybraniem tego materiału. Kliknięcie przycisku + powoduje zajście warunku moreSegmentsEvent, zapisanego w instrukcji switch() wewnątrz metody onPanelEvent(). W kodzie określonym dla tego zdarzenia zapisaliśmy zmniejszenie skali tekstury o połowę swojego aktualnego rozmiaru.
180
Flash i ActionScript. Aplikacje 3D od podstaw currentObject.material.scaleX *= .5; currentObject.material.scaleY *= .5;
Z kolei wciśnięcie przycisku - powoduje wywołanie zdarzenia lessSegmentsEvent, którego celem jest zwiększenie rozmiarów tekstury o połowę swojego aktualnego rozmiaru. currentObject.material.scaleX /= .5; currentObject.material.scaleY /= .5;
Jak zapewne pamiętasz, w metodzie onEnterFrame() zapisaliśmy instrukcję warunkową if, która w konkretnym przypadku wykonywała jakieś zadanie. Otóż w sytuacji wybrania materiału TransformBitmapMaterial zapisaliśmy ciągłą zmianę przesunięcia tekstury na osi X, co wywoła efekt niekończącej się tekstury. Takie działanie można zastosować na przykład do symulacji fal na tafli wody lub niekończącej się drogi w symulatorach jazdy. W naszym przykładzie kafelkowa tekstura przesuwa się na osi X wewnątrz płaszczyzny, a zaprogramowaliśmy to, stosując taki oto zapis w metodzie onEnterFrame(): if (currentMaterial == transformBitmap) transformBitmap.offsetX += 10;
W tabelach 4.18 oraz 4.19 wypisane zostały właściwości oraz metody klasy TransformBitmapMaterial. Tabela 4.18. Właściwości klasy TransformBitmapMaterial
Nazwa
Rodzaj
Wartość Opis domyślna
globalProjection
Boolean
false
Określa, czy wartości właściwości offsetX, offsetY oraz projectionVector odnoszą się do układu współrzędnych sceny
offsetX
Number
0
Określa poziom przesunięcia tekstur względem osi X wewnątrz obiektu
offsetY
Number
0
Określa poziom przesunięcia tekstur względem osi Y wewnątrz obiektu
projectionVector
Vector3D
null
Wektor określający rozciągnięcie/przesunięcie tekstury, ignorujący współrzędne uv obiektu
Animowane MovieMaterial Główną cechą materiału MovieMaterial jest możliwość załadowania elementu typu Sprite lub MovieClip jako źródła pokrycia powierzchni wybranego obiektu. Pozwala to na zastosowanie animacji złożonej z określonej liczby klatek lub umieszczenie elementów, na których użytkownik może wywołać odpowiednie zdarzenia, na przykład poprzez kliknięcie myszką lub najechanie kursorem. Biblioteka Away3D ma w swoich zasobach jeszcze inne klasy materiałów, które umożliwiają wyświetlanie animacji, dlatego MovieMaterial powinien być głównie stosowany do tworzenia interaktywnych formularzy na powierzchni obiektów trójwymiarowych. Korzystanie z MovieMaterial polega na podaniu w konstruktorze obiektu klasy który ma posłużyć jako źródło do wyświetlanego obrazu. Poza tym jeżeli elementy znajdujące się w tym obiekcie korzystają ze zdarzeń klasy MouseEvent lub Event, należy w obiekcie materiału MovieMaterial przypisać właściwości interactive wartość true. Sprite,
Niestety, mimo że MovieMaterial pozwala na stworzenie ciekawych efektów, ma również wadę — zawartość obiektu Sprite po umieszczeniu na powierzchni bryły ulega rasteryzacji, co oznacza, że wszystkie elementy tracą na jakości obrazu. Oczywiście jest możliwość zastosowania właściwości smooth i przypisania mu wartości true, co wygładzi nieco wyświetlany materiał, jednak nie uzyskamy satysfakcjonującego efektu przy stosowaniu elementów wektorowych. Efekt zastosowania tego materiału przedstawiono na rysunku 4.16. Aby uzyskać taki efekt, w metodzie initMaterials() klasy bazowej zapisaliśmy obiekt o nazwie movie, w którego konstruktorze stworzyliśmy obiekt klasy movieMC. Obiekt tej kasy reprezentuje element MovieClip wyświetlony na powierzchni obiektu plane. Aby móc wpisywać teksty w pola tekstowe, wciskać przyciski i poruszać czerwonym kółkiem, musieliśmy przypisać właściwości interactive wartość true. Dzięki temu wszystkie elementy wewnątrz wyświetlanego źródła będą reagowały na zdarzenia MouseEvent. movie = new MovieMaterial(new movieMC(), { interactive:true } );
Z kolei wewnątrz instrukcji switch w metodzie onMaterialChangeEventHandler() w przypadku wybrania materiału MovieMaterial obiekt movie przypisujemy do currentMaterial, a plane do currentObject.
182
Flash i ActionScript. Aplikacje 3D od podstaw
Rysunek 4.16.
Zastosowanie materiału MovieMaterial
case 'MovieMaterial': currentMaterial = movie; currentObject = plane; break;
W tabelach 4.20 oraz 4.21 wypisane zostały właściwości oraz metody klasy Movie Material. Tabela 4.20. Właściwości klasy MovieMaterial
Nazwa
Rodzaj
Wartość domyślna Opis
autoUpdate
Boolean
true
Ustala, czy tekstura ma być automatycznie odświeżana
movie
Sprite
1
Ustala źródło elementu tekstury
clipRect
Rectangle
1
Ustala powierzchnię, w której tekstura zostanie wyświetlona
transparent
Boolean
true
Ustala, czy tekstura ma być przezroczysta
Tabela 4.21. Metody klasy MovieMaterial
Nazwa
Opis
MovieMaterial(movie:Sprite, init:Object = null)
Konstruktor
update():void
Aktualizuje teksturę aktualnie wyświetlaną klatką obiektu MovieClip
Rozdział 4. Materiały
183
AnimatedBitmapMaterial Patrząc na nazwę tego materiału, możesz pomyśleć, że korzysta on z zewnętrznych plików typu GIF, zawierających określoną liczbę klatek. Otóż tak nie jest. Implementując ten materiał, jako źródło podajemy element typu movieClip, którego wypełnione klatki stanowią animację. Dlaczego więc warto wspomnieć o tym materiale, skoro wcześniej poznaliśmy MovieMaterial? Ponieważ AnimatedBitmapMaterial jest jego uproszczoną wersją, która pozwala na wyświetlenie animowanych tekstur przy małym zużyciu zasobów komputera. Naturalnie w momentach tworzenia lub aktualizowania zawartości materiału występuje obciążenie, ale poza tym nie odczujemy spadku wydajności działania aplikacji. Istotne jest to, że mamy możliwość kontrolowania wyświetlania animacji na obiekcie. Za pomocą metody play() uruchamiamy odtwarzanie sekwencji, a za pomocą stop() zatrzymujemy ją. Dokładnie tak samo, jakbyśmy kontrolowali animację zapisaną w klatkach elementu MovieClip w zwykłych aplikacjach Flash. AnimatedBitmapMaterial należy stosować w sytuacjach, gdy sekwencja animacji jest krótka i nie zawiera elementów, które wymagałyby ingerencji użytkownika. Jednym z praktycznych zastosowań dla tego materiału jest wykorzystanie go do tworzenia efektów płonącej pochodni bądź ogniska. W naszym przypadku na powierzchni kuli zastosowaliśmy animację falowania wody. Uzyskany efekt przedstawia rysunek 4.17. Rysunek 4.17.
Zastosowanie materiału AnimatedBitmapMaterial
184
Flash i ActionScript. Aplikacje 3D od podstaw
Aby uzyskać taki efekt, w metodzie initMaterials() klasy bazowej zapisaliśmy obiekt o nazwie animatedBitmap, tworząc w jego konstruktorze obiekt Water. Obiekt tej klasy jest odwołaniem do obiektu MovieClip zawierającego zapisaną sekwencję animacji, zamieszczonego w zasobach pliku Flash. animatedBitmap = new AnimatedBitmapMaterial(new Water());
Z kolei wewnątrz instrukcji switch w metodzie onMaterialChangeEventHandler() w przypadku wybrania materiału AnimatedBitmapMaterial obiekt animatedBitmap przypisujemy do currentMaterial, a plane do currentObject. case 'AnimatedBitmapMaterial': currentMaterial = animatedBitmap; currentObject = plane; break;
W tabelach 4.22 oraz 4.23 wypisane zostały właściwości oraz metody klasy Anima tedBitmapMaterial. Tabela 4.22. Właściwości klasy AnimatedBitmapMaterial
Nazwa
Rodzaj
Wartość domyślna
Opis
autoplay
Boolean
true
Wskazuje, czy animacja ma być uruchomiona wraz z utworzeniem obiektu
index
int
0
Zwraca numer aktualnej klatki animacji
loop
Boolean
true
Wskazuje, czy dana animacja ma być powtarzana
sources
Array
Zwraca w postaci tablicy wszystkie klatki animacji
Zastępuje zapamiętane obiekty BitmapData podanymi w tablicy sources
setMovie(movie:MovieClip)
Ustawia nowy element MovieClip do wyświetlenia materiału
clear()
Czyści całą animację
Rozdział 4. Materiały
185
VideoMaterial Ostatni w grupie animowanych materiałów, które omówimy, jest VideoMaterial. Jak sama nazwa wskazuje, używając go na powierzchni obiektu, możemy umieścić sekwencję wideo ładowaną z zewnętrznego pliku. Formatem plików obsługiwanych przez VideoMaterial jest Flash Video o rozszerzeniu *.flv. Udostępniając klasę VideoMaterial, twórcy biblioteki Away3D oszczędzili nam sporo czasu na tworzenie specjalnego odtwarzacza plików flv w obiekcie typu MovieClip i zastosowanie go jako źródła dla materiału MovieMaterial. Stosując klasę VideoMaterial do uruchomienia sekwencji wideo, wystarczy podczas tworzenia materiału podać ścieżkę do pliku w właściwości file. Jeżeli nie użyjemy konkretnych metod, film zostanie automatycznie włączony. W klasie VideoMaterial tworzone są obiekty klas NetStream, NetConnection oraz Video. Dostęp do tych obiektów zapewniają właściwości netStream, nc oraz video. Dzięki temu można swobodnie operować na źródle filmu, tak jak przy pisaniu zwykłych odtwarzaczy do aplikacji dwuwymiarowych. Na rysunku 4.18 przedstawiono efekt zastosowania tego materiału na płaszczyźnie plane. Rysunek 4.18.
Zastosowanie materiału VideoMaterial
Podobnie jak w przypadku materiału GlassMaterial, tutaj również wszystkie operacje zapisaliśmy wewnątrz metody initMaterials() w klasie bazowej. W pierwszej kolejności zapisaliśmy instrukcję if(), która sprawdza, czy aktualnie używany materiał
186
Flash i ActionScript. Aplikacje 3D od podstaw
jest typu MovieMaterial. Jeżeli tak, to należy wyczyścić ślady po odtwarzaniu filmu, stosując obiekty nc, netStream i video. Aby uzyskać do nich dostęp, należało zinterpretować obiekt currentMaterial jako VideoMaterial. if (String(Object(currentMaterial).constructor) == '[class VideoMaterial]') { (currentMaterial as VideoMaterial).nc.close(); (currentMaterial as VideoMaterial).netStream.close(); (currentMaterial as VideoMaterial).video.clear(); }
W metodzie onMaterialChangeEventHandler(), stosując metodę setVisibility(), pokazaliśmy przycisk o nazwie togglePause, przypisując jego właściwości visible wartość true. Później przypisaliśmy zmiennej currentMaterial nowy obiekt klasy VideoMaterial, podając w właściwości file ścieżkę do wybranego pliku FLV. Na końcu obiektowi currentObject przypisaliśmy płaszczyznę plane. case 'VideoMaterial': panel.setVisibility('togglePause', true); currentMaterial = new VideoMaterial( { file:'../../resources/flvs/ test.flv' } ); currentObject = plane; break;
Do włączenia oraz wyłączenia filmu służy przycisk Włącz/Wyłącz, którego wciśnięcie powoduje wywołanie zdarzenia togglePauseEvent. Wewnątrz metody onPanelEvent() dodaliśmy w instrukcji switch warunek, w którym wywołaliśmy na obiekcie netStream metodę togglePause(). W zależności od stanu, w jakim jest film (czy jest włączony, czy też wstrzymany), metoda ta odpowiednio zatrzyma bądź wznowi jego odtwarzanie. (currentMaterial as VideoMaterial).netStream.togglePause();
W tabelach 4.24 oraz 4.25 wypisane zostały właściwości oraz metody klasy Video Material. Tabela 4.24. Właściwości klasy VideoMaterial
Nazwa
Rodzaj
Wartość domyślna Opis
file
String
„”
Wskazuje na lokalizację pliku *.flv, który ma być odtwarzany
loop
Boolean
true
Wskazuje, czy sekwencja ma być powtarzana
nc
NetConnection
Wskazuje na obiekt klasy NetConnection
netStream
NetStream
Wskazuje na obiekt klasy NetStream
volume
Number
0
Określa poziom głośności
Rozdział 4. Materiały
187
Tabela 4.24. Właściwości klasy VideoMaterial
Nazwa
Rodzaj
Wartość domyślna Opis
video
Video
Wskazuje na obiekt Video
time
Number
Zwraca aktualny czas NetStream
pan
Number
Wskazuje na wykorzystany kanał nadawania dźwięku
0
Tabela 4.25. Metody klasy VideoMaterial
Nazwa
Opis
VideoMaterial(init:Object = null)
Konstruktor
play
Włączenie obrazu
stop
Zatrzymanie obrazu
pause
Wstrzymanie obrazu
close
Przerwanie połączenia i wyświetlania obrazu
seek
Przejście do wybranego miejsca/czasu, podanego w sekundach, wyświetlanego obrazu
Mieszanie materiałów Na zakończenie tego rozdziału warto wspomnieć o możliwości mieszania różnych rodzajów materiałów. Możliwe jest to dzięki wykorzystaniu CompositeMaterial. Rodzaj ten przechowuje dodane materiały jako obiekty typu LayerMaterial w tablicy. Przypomina to nieco warstwy w programach służących do obróbki grafiki, takich jak Photoshop czy Corel. Korzystając z CompositeMaterial, możemy również ustawić poziom przezroczystości dodanych tekstur, co wpływa na to, jak będą one wyświetlane na obiekcie. Sposób ich ustawienia zależy tylko od tego, co chcesz osiągnąć. W każdej chwili oprócz dodania materiału można również go usunąć z tablicy bądź zamienić. Kontrolę nad tym sprawuje się poprzez metody addMaterial(), removeMaterial() i clearMaterials(). W tabelach 4.26 oraz 4.27 wypisane zostały właściwości oraz metody klasy Composite Material. Tabela 4.26. Właściwości klasy CompositeMaterial
Nazwa
Rodzaj
materials
Array
Wartość domyślna
Opis Tablica zawierająca materiały
188
Flash i ActionScript. Aplikacje 3D od podstaw
Tabela 4.27. Metody klasy CompositeMaterial
Nazwa
Opis
CompositeMaterial(init:Object = null)
Konstruktor
addMaterial
Dodawanie materiału
removeMaterial
Usuwanie materiału
clearMaterials
Czyszczenie tablicy materiałów
Podsumowanie Materiałem nazywamy obiekt pokrywający powierzchnię bryły. Materiały umieszczone są w pakiecie away3d.materials. Materiały dzieli się na korzystające ze źródła światła i te, które do poprawnego wyświetlania go nie potrzebują. Pliki graficzne oraz inne elementy, co do których jesteśmy pewni, że nie ulegną zmianie, można dodać do zasobów aplikacji bezpośrednio w pliku SWF. Aby odwoływać się do tych elementów, należy zdefiniować nazwę klasy, która będzie wskazywała na wybrany obiekt. Klasa Cast jest pomocniczą klasą umieszczoną w bibliotece Away3D, która odwołuje się do wskazanego w zasobach elementu. Najbardziej prymitywną formą pokrycia obiektu jest zastosowanie WireframeMaterial, który generuje siatkę bryły. Standardowym materiałem w Away3D jest WireColorMaterial, który pokrywa obiekt kolorem i podkreśla jego krawędzie. Materiał ColorMaterial pokrywa obiekt jednolitym kolorem, co powoduje spłaszczenie obiektu. Materiały EnviroColorMaterial, EnviroBitmapMaterial, GlassMaterial symulują odbijanie otoczenia na powierzchni obiektu. W rzeczywistości jako drugą warstwę materiału wyświetlają bitmapę, która ma odzwierciedlać otoczenie. Pozwala to uzyskać efekt refleksów bez konieczności wykonywania dużej liczby obliczeń do stworzenia realnego odbicia. Jest to fałszywe, ale zarazem optymalne rozwiązanie.
Rozdział 4. Materiały
189
Tekstura to obiekt bitmapy stosowany do pokrycia obiektu. W Away3D można teksturę wykorzystać między innymi przy materiałach BitmapMaterial, BitmapFileMaterial lub TransformBitmapMaterial. BitmapMaterial oraz BitmapFileMaterial różnią się tym, że ten drugi korzysta z zewnętrznego pliku graficznego. TransformBitmapMaterial pozwala na generowanie niekończących się tekstur, na przykład dla wody lub podłoża. Dodatkowo stosując właściwości scaleX, scaleY oraz repeat, można skalować i powielać wybraną teksturę na powierzchni. Dzięki temu nie trzeba stosować dużych plików graficznych. GlassMaterial służy do generowania sztucznych refleksów przy zastosowaniu map normalnych. Do tworzenia animowanych pokryć dla obiektów służą materiały MovieMaterial, AnimatedBitmapMaterial oraz VideoMaterial. Materiał MovieMaterial umożliwia zastosowanie obiektów klasy MovieClip jako pokrycia dla trójwymiarowych obiektów, co pozwala na osadzanie na ich powierzchni interaktywnych elementów oraz animacji. Aby materiał reagował na zdarzenia MouseEvent, należy właściwości interactive przypisać wartość true. Do tworzenia animacji bardziej wydajnym materiałem jest AnimatedBitmapMaterial niż MovieMaterial. VideoMaterial służy do wyświetlania filmów w formacie FLV, stosuje obiekty klas NetStream, NetConnection oraz Video. Do mieszania wielu materiałów na jednym obiekcie i prezentowania ich w formie warstw służy materiał CompositeMaterial.
190
Flash i ActionScript. Aplikacje 3D od podstaw
Rozdział 5. Światło Światło to jeden z najważniejszych czynników, dzięki którym możemy rozróżniać kolory w otaczającym nas świecie. Programiści oraz artyści zajmujący się grafiką trójwymiarową nadal badają światło, aby tworzone przez nich efekty były jak najbardziej zbliżone do występujących w świecie rzeczywistym. Zarówno w produkcjach filmowych, jak i aplikacjach 3D światło oraz jego oddziaływanie odgrywają istotną rolę w prezentacji obiektów w przestrzeni trójwymiarowej. Biblioteka Away3D ma w swoich zasobach kilka rodzajów świateł oraz materiałów, które z nimi współgrają. Sceny, które wykorzystywaliśmy do tej pory, w swoich standardowych ustawieniach nie uwzględniały obiektów światła. Zajmiemy się tym dopiero w tym rozdziale i omówimy ich poszczególne rodzaje. Światło w bibliotece Away3D to trójwymiarowe obiekty, których bezpośrednio nie widać na scenie. Zauważalne natomiast są efekty ich działania na powierzchni innych obiektów widzialnych. Z uwagi na takie rozróżnienie obiekt klasy Scene3D ma specjalną metodę addLight(), która dodaje do jej przestrzeni źródła światła. Poza tą krótką informacją na temat dodawania źródeł światła do sceny czytając ten rozdział, dowiesz się: Jakie rodzaje światła dostępne są w bibliotece Away3D. Jak różne światła oddziałują na obiekty umieszczone na scenie. Jakie materiały reagują na różnego rodzaju oświetlenie. Które materiały są bardziej, a które mniej wydajne. Na jakich zasadach opiera się mapowanie normalnych. Jakim narzędziem tworzyć mapy normalnych. Które z materiałów i w jakim stopniu korzystają z mapowania normalnych.
192
Flash i ActionScript. Aplikacje 3D od podstaw
Rodzaje świateł Klasa bazowa dla przykładów Zanim zaczniemy omawianie poszczególnych rodzajów, przepisz poniższy kod źródłowy, który będzie klasą bazową dla wszystkich przykładów. package { import away3d.materials.ShadingColorMaterial; import flash.display.StageAlign; import flash.display.StageQuality; import flash.display.StageScaleMode; import flash.display.Sprite; import flash.events.Event; import flash.events.MouseEvent; import flash.geom.Vector3D; // import away3d.containers.View3D; import away3d.containers.ObjectContainer3D; import away3d.lights.*; import away3d.materials.*; import away3d.primitives.Sphere; public class Light3DExample extends Sprite { private var view:View3D; private var obj:ObjectContainer3D; private var light:*; public function Light3DExample():void { if (stage) init(); else addEventListener(Event.ADDED_TO_STAGE, init); } private function init(e:Event = null):void { stage.quality = StageQuality.LOW; stage.align = StageAlign.TOP_LEFT; stage.scaleMode = StageScaleMode.NO_SCALE; removeEventListener(Event.ADDED_TO_STAGE, init); stage.addEventListener(Event.RESIZE, onResize); addEventListener(Event.ENTER_FRAME, onEnterFrame); initPanelListeners(); view = new View3D(); addChild(view);
Rozdział 5. Światło
193
addLights(); addObjects(); }
onResize(); private function initPanelListeners():void { } private function addLights():void { } private function addObjects():void { } private function updateLight(e:Event):void { } private function onResize(e:Event = null):void { view.x = stage.stageWidth * .5; view.y = stage.stageHeight * .5; }
}
}
private function onEnterFrame(e:Event):void { obj.rotationY--; view.render(); }
W tym kodzie zaimportowaliśmy wszystkie dostępne w bibliotece Away3D światła i materiały, stosując zapis: import away3d.lights.*; import away3d.materials.*;
Do zdefiniowania obiektu light wykorzystaliśmy *, co oznacza, że będziemy mogli stworzyć obiekt z dowolnie wybranej klasy dostępnej w danym pakiecie. Co prawda nie powinno się stosować uogólnień dotyczących pochodzenia obiektu, ponieważ kod staje się przez to mniej elastyczny i podatny na błędy, ale w tym przykładzie zrobimy wyjątek. Dzięki zastosowaniu * nie będziemy modyfikowali całego kodu, tylko samą zawartość metod initPanelListeners(), addLights(), addObjects() oraz updateLight().
194
Flash i ActionScript. Aplikacje 3D od podstaw
Metoda initPanelListeners() będzie zawierała spis detektorów zdarzeń dla pól tekstowych zawartych w panelu użytkownika. Pola te będą odpowiadały wartościom poszczególnych właściwości wybranego rodzaju światła. Z uwagi na ich rozbieżność przy omawianiu każdego światła będziemy definiowali te pola na nowo. W metodzie addLights() będziemy tworzyli obiekt light dla konkretnego rodzaju światła, przypisując jego właściwościom odpowiednie wartości początkowe. Z uwagi na to, że nie wszystkie materiały i światła są kompatybilne, w metodzie addObjects() będziemy tworzyli obiekty akurat omawianego rodzaju światła.
Metoda updateLight() będzie wywoływana z każdą zmianą wartości w polu tekstowym umieszczonym w panelu użytkownika.
AmbientLight3D Pierwszym rodzajem światła, jakiemu się przyjrzymy, jest AmbientLight3D. Służy ono do oświetlania otoczenia, na co wskazuje pierwszy człon nazwy. Wykorzystanie go na scenie spowoduje oświetlenie wszystkich obiektów w ten sam sposób, niezależnie od kąta padania lub położenia bryły względem światła. AmbientLight3D możemy mieszać swobodnie z innymi rodzajami światła. Należy pamiętać tylko, że nie każdy rodzaj materiału z nim współgra. Efekt zastosowania tego światła przedstawiono na rysunku 5.1. Rysunek 5.1.
Zastosowanie światła AmbientLight3D
Rozdział 5. Światło
195
Jeżeli nie korzystasz z plików przygotowanych specjalnie do tej książki, to stwórz obiekt MovieClip o nazwie panel i umieść w nim dynamiczne pole tekstowe o nazwie ambientText. W przedstawionej klasie bazowej uzupełnij zawartość metody initPanelListeners() o następującą linijkę kodu: panel.ambientText.addEventListener(Event.CHANGE, updateLight);
Następnie stwórz obiekt światła, uzupełniając metodę addLights() o: light = new AmbientLight3D(); panel.ambientText.text = light.ambient; view.scene.addLight(light);
Dodaj obiekty do sceny, wpisując następujący kod źródłowy w metodzie add Objects(): obj = new ObjectContainer3D(); var sph1:Sphere = new Sphere( { radius:50, material:new PhongColorMaterial(0xFF0000), x:-150 } ); var sph2:Sphere = new Sphere( { radius:50, material:new PhongColorMaterial(0xFF0000), x:150 } ); obj.addChild(sph1); obj.addChild(sph2); view.scene.addChild(obj);
Na koniec wpisz poniższą linijkę kodu w metodzie updateLight(): light.ambient = Number(panel.ambientText.text);
Po wykonaniu wszystkich czynności możesz skompilować kod i sprawdzić, jak zachowuje się światło AmbientLight3D w przypadku różnych wartości właściwości ambient. W tabelach 5.1 i 5.2 wypisane są wszystkie właściwości oraz metody tej klasy. Tabela 5.1. Właściwości klasy AmbientLight3D
Nazwa
Rodzaj
Wartość domyślna
Opis
color
uint
16777215
Określa kolor światła
ambient
Number
1
Określa współczynnik natężenia światła
196
Flash i ActionScript. Aplikacje 3D od podstaw
Tabela 5.2. Metody klasy AmbientLight3D
Nazwa
Opis
AmbientLight3D
Konstruktor
Na koniec spis materiałów, na których widoczne są efekty działania światła Ambient Light3D: PhongMovieMaterial, PhongColorMaterial, PhongBitmapMaterial, Dot3Bitmap Material.
PointLight3D Światło PointLight3D, jak nazwa wskazuje, emitowane jest z wybranego punktu w przestrzeni. Działanie PointLight3D opiera się na tych samych zasadach co emitowanie światła sztucznego w naszym otoczeniu. Za przykład przyjmijmy żarówkę zawieszoną pod sufitem. Każdy element jest oświetlony w sposób zależny od jego pozycji względem źródła. Intensywność działania światła sztucznego maleje odwrotnie proporcjonalnie do odległości. Oznacza to, że obiekty znajdujące się dalej nie będą odbijały promieni z taką samą siłą jak te umieszczone bliżej. Działanie światła PointLight3D przedstawia rysunek 5.2. Rysunek 5.2.
Zastosowanie światła PointLight3D
Zmodyfikujemy kod klasy bazowej, tak aby zastosować światło PointLight3D i uzyskać efekt jak na rysunku 5.3.
Rozdział 5. Światło
197
Rysunek 5.3.
Zastosowanie światła PointLight3D
Zwróć uwagę, że tym razem panel użytkownika jest znacznie bardziej rozbudowany. Aby kod poprawnie działał, musisz stworzyć identyczny schemat, dlatego przyjrzyj się rysunkowi 5.4 i na jego podstawie dodaj obiekt MovieClip z odpowiednimi polami tekstowymi. Rysunek 5.4.
Schemat panelu użytkownika
W przedstawionej klasie bazowej uzupełnij zawartość metody initPanelListeners() o następujące linijki kodu: panel.falloffText.addEventListener(Event.CHANGE, updateLight); panel.brightnessText.addEventListener(Event.CHANGE, updateLight); panel.lightColor.addEventListener(Event.CHANGE, updateLight);
198
Flash i ActionScript. Aplikacje 3D od podstaw panel.specularText.addEventListener(Event.CHANGE, updateLight); panel.diffuseText.addEventListener(Event.CHANGE, updateLight); panel.ambientText.addEventListener(Event.CHANGE, updateLight); panel.xText.addEventListener(Event.CHANGE, updateLight); panel.yText.addEventListener(Event.CHANGE, updateLight); panel.zText.addEventListener(Event.CHANGE, updateLight);
Następnie stwórz obiekt światła, uzupełniając metodę addLights() o: light = new PointLight3D( { color:0xFFFFFF, specular:1, diffuse:.5, ambient:.5 } ); light.position = new Vector3D(0, 200, 0); view.scene.addLight(light);
Dodaj obiekty do sceny, wpisując następujący kod źródłowy w metodzie add Objects(): obj = new ObjectContainer3D(); var sph1:Sphere = new Sphere( { radius:50, material:new ShadingColorMaterial(0xFF0000), x:-150 } ); var sph2:Sphere = new Sphere( { radius:50, material:new ShadingColorMaterial(0xFF0000), x:150 } ); obj.addChild(sph1); obj.addChild(sph2); view.scene.addChild(obj);
Na koniec wpisz poniższe linijki kodu w metodzie updateLight(): light.color = uint('0x' + panel.lightColor.hexValue); light.brightness = Number(panel.brightnessText.text); light.fallOff = Number(panel.falloffText.text); light.specular = Number(panel.specularText.text); light.diffuse = Number(panel.diffuseText.text); light.ambient = Number(panel.ambientText.text); light.x = Number(panel.xText.text); light.y = Number(panel.yText.text); light.z = Number(panel.zText.text);
Po wykonaniu wszystkich czynności możesz skompilować kod i sprawdzić, jak zachowuje się światło PointLight3D w przypadku różnych wartości jego właściwości. W tabelach 5.3 i 5.4 wypisane są wszystkie właściwości oraz metody tej klasy.
Rozdział 5. Światło
199
Tabela 5.3. Właściwości klasy PointLight3D
Nazwa
Rodzaj
Wartość domyślna
Opis
color
uint
16777215
Określa kolor światła
ambient
Number
1
Określa poziom jasności otoczenia
brightness
Number
1
Określa natężenie światła
diffuse
Number
1
Określa poziom rozproszenia światła
fallOf
Number
1000
Określa długość, w której światło obowiązuje
radius
Number
50
Określa promień światła, w którym jest pełna widoczność
specular
Number
1
Określa współczynnik natężenia światła odbijanego zwierciadlanie
Tabela 5.4. Metody klasy PointLight3D
Nazwa
Opis
PointLight3D
Konstruktor
Na koniec spis materiałów, na których widoczne są efekty działania światła Point Light3D: ShadingColorMaterial, WhiteShadingBitmapMaterial, PhongMultiPassMaterial, PhongPBMaterial.
DirectionalLight3D DirectionalLight3D w przeciwieństwie do PointLight3D emituje wiązkę światła nie z jednego, lecz tysięcy punktów skierowanych w tym samym kierunku. Jak to działa? Wyobraź sobie płytę o nieskończonych wymiarach złożoną z tysięcy diod emitujących światło. Tym właśnie jest DirectionalLight3D. Nie ustalamy jego położenia w przestrzeni, tylko kierunek, w który ma kierować promienie świetlne. Wszystkie obiekty znajdujące się na scenie będą odbijały światło w zależności od tego, jaki ustalimy kierunek. Żeby lepiej zrozumieć działanie tego materiału, spójrz na rysunek 5.5.
Widzimy tu płytę z żarówkami pochyloną w kierunku obiektów pod ustalonym kątem. Ta płyta przedstawia obiekt klasy DirectionalLight3D. Strzałki reprezentują promienie świetlne oraz kierunek ich emitowania. Inną ważną cechą tego rodzaju oświetlenia jest to, że niezależnie od swojego położenia obiekty mogą odbijać światło z tą samą intensywnością.
200
Flash i ActionScript. Aplikacje 3D od podstaw
Rysunek 5.5.
Wizualizacja działania światła DirectionalLight3D
Na rysunku 5.6 przedstawiono efekt działania światła DirectionalLight3D po zmodyfikowaniu panelu użytkownika i kodu źródłowego klasy bazowej. Rysunek 5.6.
Zastosowanie światła DirectionalLight3D
W tym przypadku panel użytkownika również różni się od poprzednich. Dlatego aby kod działał poprawnie, musisz stworzyć identyczny schemat z tym, który przedstawiono na rysunku 5.7.
Rozdział 5. Światło
201
Rysunek 5.7.
Schemat panelu użytkownika
Aby móc wykorzystać DirectionalLight3D, w naszym przykładzie zmień zawartość metody initPanelListeners() na następującą: panel.brightnessText.addEventListener(Event.CHANGE, updateLight); panel.specularText.addEventListener(Event.CHANGE, updateLight); panel.diffuseText.addEventListener(Event.CHANGE, updateLight); panel.ambientText.addEventListener(Event.CHANGE, updateLight); panel.xText.addEventListener(Event.CHANGE, updateLight); panel.yText.addEventListener(Event.CHANGE, updateLight); panel.zText.addEventListener(Event.CHANGE, updateLight);
W metodzie addLights() skorzystaj z następującego kodu i stwórz obiekt światła: light = new DirectionalLight3D({ color:0xFFFFFF, specular:1, diffuse:.5, ambient:.5 }); view.scene.addLight(light);
Dodaj obiekty do sceny, wpisując następujący kod źródłowy w metodzie add Objects(): obj = new ObjectContainer3D(); var sph1:Sphere = new Sphere( { radius:50, material:new ShadingColorMaterial(0xFF0000), x:-150 } ); var sph2:Sphere = new Sphere( { radius:50, material:new ShadingColorMaterial(0xFF0000), x:150 } ); obj.addChild(sph1); obj.addChild(sph2); view.scene.addChild(obj);
Uzupełnij jeszcze zawartość metody updateLight(), która uruchamiana jest przy każdej zmianie wartości dowolnego pola tekstowego w panelu użytkownika:
202
Flash i ActionScript. Aplikacje 3D od podstaw light.brightness = Number(panel.brightnessText.text); light.specular = Number(panel.specularText.text); light.diffuse = Number(panel.diffuseText.text); light.ambient = Number(panel.ambientText.text); light.direction = new Vector3D(Number(panel.xText.text), Number(panel.yText.text), Number(panel.zText.text));
Teraz możesz skompilować kod i sprawdzić, jak działa światło DirectionalLight3D w przypadku różnych wartości jego właściwości. W tabelach 5.5 i 5.6 wypisane są wszystkie właściwości oraz metody tej klasy. Tabela 5.5. Właściwości klasy DirectionalLight3D
Nazwa
Rodzaj
Wartość domyślna
Opis
ambient
Number
1
Określa poziom jasności otoczenia
brightness
Number
1
Określa natężenie światła
diffuse
Number
0.5
Określa poziom rozproszenia światła
direction
Vector3D
Vector3D(0,0,0)
Określa kierunek padania promieni świetlnych
specular
Number
0.5
Określa współczynnik natężenia światła odbijanego zwierciadlanie
Tabela 5.6. Metody klasy DirectionalLight3D
Nazwa
Opis
DirectionalLight3D
Konstruktor
Na koniec spis materiałów, na których widoczne są efekty działania światła DirectionalLight3D: ShadingColorMaterial, WhiteShadingBitmapMaterial, PhongMultiPass Material, PhongMovieMaterial, PhongColorMaterial, PhongBitmapMaterial, Dot3Bitmap Material, Dot3BitmapMaterialF10.
Materiały reagujące na światło Klasa bazowa dla przykładów Podobnie jak w poprzednim podrozdziale, zanim zaczniemy omawiać materiały reagujące na światło, zapiszemy ogólną klasę, w której będziemy zmieniali zawartość metod addLight(), initMaterial() i czasami addObjects(). Przepisz następujący kod i zapisz jako MaterialsExample.as.
public class MaterialsExample extends Sprite { private var view:View3D; private var obj:ObjectContainer3D; private var light:*; private var mat:*; public function MaterialsExample():void { if (stage) init(); else addEventListener(Event.ADDED_TO_STAGE, init); } private function init(e:Event = null):void { stage.quality = StageQuality.LOW; stage.align = StageAlign.TOP_LEFT; stage.scaleMode = StageScaleMode.NO_SCALE; removeEventListener(Event.ADDED_TO_STAGE, init); stage.addEventListener(Event.RESIZE, onResize); addEventListener(Event.ENTER_FRAME, onEnterFrame); view = new View3D(); addChild(view); addLights(); initMaterial(); addObjects(); onResize(); } private function addLights():void {
203
204
Flash i ActionScript. Aplikacje 3D od podstaw } private function initMaterial():void { } private function addObjects():void { obj = new ObjectContainer3D(); var sph1:Sphere = new Sphere( { radius:50, material:mat, x: -150, segmentsW:16, segmentsH:16 } ); var sph2:Sphere = new Sphere( { radius:50, material:mat, x:150, segmentsW:16, segmentsH:16 } ); obj.addChild(sph1); obj.addChild(sph2); view.scene.addChild(obj); } private function onResize(e:Event = null):void { view.x = stage.stageWidth * .5; view.y = stage.stageHeight * .5; } private function onEnterFrame(e:Event):void { obj.rotationY--; view.render(); } } }
PhongColorMaterial Pierwszy człon tej nazwy pochodzi od imienia naukowca wietnamskiego pochodzenia, Bui Tuong Phonga. Sformułował on pojęcie dotyczące oświetlenia modeli w przestrzeni. W skrócie idea ta zakłada, że na obiekt o błyszczącej powierzchni dociera światło, które następnie zostaje rozproszone w każdym kierunku i zabarwione na kolor bryły. W praktyce korzystanie z PhongColorMaterial przynosi efekt, który pokazano na rysunku 5.8.
Rozdział 5. Światło
205
Rysunek 5.8.
Zastosowanie materiału PhongColorMaterial
Aby uzyskać taki efekt, w klasie bazowej MaterialsExample uzupełnij zawartość metody addLights() następującym kodem: light = new DirectionalLight3D(); light.direction = new Vector3D(0, -100, 300); view.scene.addLight(light);
Następnie w metodzie initMaterial() stwórz obiekt materiału klasy PhongColor Material, używając poniższego kodu: mat = new PhongColorMaterial(0x0000FF);
Po uzupełnieniu tych funkcji i skompilowaniu kodu na ekranie powinieneś ujrzeć dwie kule w kolorze niebieskim odbijające światło przy standardowych ustawieniach materiału. Właściwości oraz metody klasy PhongColorMaterial wypisano w tabelach 5.7 i 5.8. Tabela 5.7. Właściwości klasy PhongColorMaterial
Nazwa
Rodzaj
Wartość domyślna
Opis
shininess
Number
20
Określa poziom odblasku
specular
Number
0.7
Określa współczynnik natężenia światła odbijanego zwierciadlanie
206
Flash i ActionScript. Aplikacje 3D od podstaw
Tabela 5.8. Metody klasy PhongColorMaterial
Nazwa
Opis
PhongColorMaterial
Konstruktor
ShadingColorMaterial ShadingColorMaterial działa podobnie jak wcześniej omówiony PhongColorMaterial, czyli możemy pokazać, jak pada światło i tworzy się cień na obiekcie, lecz nie będzie ono wyglądało tak samo jak w poprzednim przykładzie. Nie zabarwimy powierzchni precyzyjnie punkt po punkcie. Zamiast tego każdemu z segmentów, które są w zasięgu działania światła, nadamy odpowiednio jaśniejszy kolor. Kolor segmentów, do których światło nie dochodzi, będzie stopniowo zaciemniany. W ten sposób nie wygładzamy obiektu, co znacznie zwiększa wydajność aplikacji. ShadingColorMaterial staje się bardziej przydatny na etapie tworzenia i ustawiania elementów sceny. To znaczy, że jeżeli planujesz użycie większej liczby elementów i chciałbyś sprawdzić, jak każdy z nich będzie się prezentował w wybranym położeniu. Efekt działania materiału ShadingColorMaterial przedstawiono na rysunku 5.9. Rysunek 5.9.
Zastosowanie materiału ShadingColorMaterial
Rozdział 5. Światło
Taki efekt uzyskamy, tworząc obiekt klasy ShadingColorMaterial Material() klasy bazowej. Powinno to wyglądać następująco:
207
w metodzie init
mat = new ShadingColorMaterial(0x0000FF);
Z kolei w metodzie addLights() należy dodać następujący kod w celu stworzenia odpowiedniego światła: light = new DirectionalLight3D(); light.direction = new Vector3D(0, -100, 300); view.scene.addLight(light);
Aby lepiej zapamiętać oraz w razie potrzeby użyć ShadingColorMaterial, w tabelach 5.9 i 5.10 zapisano właściwości oraz metody tej klasy. Tabela 5.9. Właściwości klasy ShadingColorMaterial
Nazwa
Rodzaj
Wartość domyślna Opis
color
uint
14473554
Określa kolor materiału
ambient
uint
0
Określa wartość koloru dla oświetlenia otoczenia
cache
Boolean
false
Ustala, czy odcienie koloru powierzchni obiektu mają być zapamiętane
diffuse
uint
0
Określa wartość koloru przy rozproszeniu światła
shininess
Number
20
Określa poziom odblasku
specular
uint
0
Określa wartość natężenia światła odbijanego zwierciadlanie
Tabela 5.10. Metody klasy ShadingColorMaterial
Nazwa
Opis
ShadingColorMaterial
Konstruktor
PhongBitmapMaterial Zasady działania są takie same jak przy stosowaniu materiału PhongColorMaterial, ale tutaj obiekt pokryty jest teksturą. Aby uzyskać efekt odblasku, poza zdefiniowaniem materiału musimy jeszcze dodać źródło światła do sceny. W przeciwnym razie tekstura wyświetlana będzie jako zwykły obiekt klasy BitmapMaterial. Przejdźmy od razu do przykładu, aby zobaczyć, jak praktycznie można wykorzystać PhongBitmapMaterial. Efekt zastosowania tego materiału przedstawiono na rysunku 5.10.
208
Flash i ActionScript. Aplikacje 3D od podstaw
Rysunek 5.10.
Zastosowanie materiału PhongBitmapMaterial
Taki efekt uzyskamy, tworząc obiekt klasy PhongBitmapMaterial w metodzie init Material() klasy bazowej. Powinno to wyglądać następująco: mat = new PhongBitmapMaterial(Cast.bitmap('metal'), { } );
Jeżeli stworzysz obiekt klasy PhongBitmapMaterial, jako argument podając tylko obiekt klasy BitmapData, możesz ujrzeć komunikat błędu #1009. Aby temu zapobiec, należy dopisać drugi argument w postaci obiektu inicjującego, zawierającego właściwości dostępne w PhongBitmapMaterial. Jeżeli nie chcesz ustawiać jakichkolwiek właściwości, to stwórz pusty obiekt, wpisując sam nawias klamrowy.
Z kolei w metodzie addLights() należy dodać następujący kod w celu stworzenia odpowiedniego światła: light = new DirectionalLight3D(); light.direction = new Vector3D(0, -100, 300); view.scene.addLight(light);
Po wykonaniu tych czynności na ekranie pojawią się dwie kule pokryte teksturą, która odbija światło. Właściwości oraz metody klasy PhongBitmapMaterial wypisano w tabelach 5.11 i 5.12.
Rozdział 5. Światło
209
Tabela 5.11. Właściwości klasy PhongBitmapMaterial
Nazwa
Rodzaj
Wartość domyślna
Opis
shininess
Number
20
Określa poziom odblasku
specular
uint
16777215
Określa wartość koloru dla odbicia światła
textureMaterial
BitmapMaterial
Zwraca obiekt BitmapMaterial użytej tekstury
Tabela 5.12. Metody klasy PhongBitmapMaterial
Nazwa
Opis
PhongBitmapMaterial
Konstruktor
WhiteShadingBitmapMaterial Klasa WhiteShadingBitmapMaterial jest rozszerzoną wersją klasy BitmapMaterial, umożliwiającą nadanie odblasku na powierzchni wybranego obiektu. W przeciwieństwie do materiału PhongBitmapMaterial nie generuje ona odbicia w każdym pikselu powierzchni bryły, tylko nadaje odpowiedni odcień jej segmentom. Gdy stosujemy WhiteShadingBitmapMaterial do tworzenia odblasku, podstawowym jego kolorem, niezależnie od ustawień światła na scenie, jest zawsze biały. Efekt zastosowania tego materiału przedstawiono na rysunku 5.11. Rysunek 5.11.
Zastosowanie materiału WhiteShadingBitmap Material
210
Flash i ActionScript. Aplikacje 3D od podstaw
Jak widać na rysunku, efekt stosowania WhiteShadingBitmapMaterial różni się od PhongBitmapMaterial. Ma to jednak swoje dobre strony, ponieważ wygenerowanie takiego obrazu jest znacznie mniej obciążające dla zasobów komputera użytkownika. Aby sprawdzić na przykładzie działanie tego materiału w metodzie initMaterial(), wpisz następującą linijkę kodu: mat = new WhiteShadingBitmapMaterial(Cast.bitmap('metal'));
Następnie stwórz odpowiednie światło, wpisując w metodzie addLights(): light = new DirectionalLight3D(); light.direction = new Vector3D(0, -100, 300); view.scene.addLight(light);
Po uzupełnieniu tych metod i skompilowaniu kodu na ekranie powinieneś ujrzeć dwie kule wypełnione teksturą i odbijające światło. Właściwości oraz metody klasy WhiteShadingBitmapMaterial wypisano w tabelach 5.13 i 5.14. Tabela 5.13. Właściwości klasy WhiteShadingBitmapMaterial
Nazwa
Rodzaj
Wartość domyślna
Opis
shininess
Number
20
Określa poziom odblasku
Tabela 5.14. Metody klasy WhiteShadingBitmapMaterial
Nazwa
Opis
PhongBitmapMaterial
Konstruktor
clearCache():void
Usuwa z pamięci podręcznej zastosowane bitmapy
PhongMovieMaterial PhongMovieMaterial
to połączenie MovieMaterial z oświetleniem Phong. Materiał ten stosujemy tak samo jak PhongColorMaterial czy też PhongBitmapMaterial, tylko że w tym konkretnym przypadku źródłem grafiki jest element MovieClip. Na rysunku 5.12 przedstawiono zastosowanie PhongMovieMaterial. Aby uzyskać taki efekt, w klasie bazowej MaterialsExample w metodzie initMaterial() stwórz obiekt Sprite i odwołaj się do niego w konstruktorze klasy PhongMovie Material, używając poniższego kodu: var mc:textureMC = new textureMC(); mat = new PhongMovieMaterial(mc);
Rozdział 5. Światło
211
Rysunek 5.12.
Zastosowanie materiału PhongMovieMaterial
W naszym przypadku zastosowaliśmy obrazek w formacie gif, który dodaliśmy do zasobów projektu w postaci obiektu o nazwie liquid. Możesz oczywiście użyć dowolnego obiektu MovieClip lub Sprite. Po określeniu materiału uzupełnij zawartość metody addLights() następującym kodem: light = new DirectionalLight3D(); light.direction = new Vector3D(0, -100, 300); view.scene.addLight(light);
Po zapisaniu tych metod i skompilowaniu kodu na ekranie powinieneś ujrzeć dwie kule z nałożoną animowaną teksturą, która piksel po pikselu odbija światło. Właściwości oraz metody klasy PhongMovieMaterial wypisano w tabelach 5.15 i 5.16. Tabela 5.15. Właściwości klasy PhongMovieMaterial
Nazwa
Rodzaj
Wartość domyślna
Opis
shininess
Number
20
Określa poziom odblasku
specular
Number
0.7
Określa wartość koloru dla odbicia światła
Tabela 5.16. Metody klasy PhongMovieMaterial
Nazwa
Opis
PhongMovieMaterial
Konstruktor
212
Flash i ActionScript. Aplikacje 3D od podstaw
Dot3BitmapMaterial A teraz nadszedł czas, żeby przedstawić ciekawsze materiały. Jednym z nich jest Dot3BitmapMaterial. Materiał ten korzysta z metody mapowania normalnych. W języku angielskim określany jest jako Normal Mapping, a w bibliotece Away3D — Dot3 Mapping. Metoda ta polega na symulowaniu wypukłości powierzchni bez konieczności dokonywania zmian w budowie obiektu. Zamiast ingerować w geometrię bryły, stosuje się osobną mapę, która zastępuje oryginalne wektory normalnych w różnych punktach na powierzchni obiektu. Taka mapa tworzona jest w kolorach RGB. Każdy z tych kolorów odpowiada współrzędnym składowej normalnej poszczególnego piksela. Aby lepiej zrozumieć zasadę zastępowania wektorów normalnych, przyjrzyj się rysunkowi 5.13.
Rysunek 5.13. Schemat mapowania wypukłości
Po lewej stronie rysunku 5.13 przedstawiono kierunki wektorów w normalnych teksturach. Jak widać, wszystkie są prostopadłe do powierzchni. Z kolei po prawej stronie rysunku 5.13 ich kierunki zmieniają się w zależności od koloru piksela tworzącego wypukłość tekstury. Miej na uwadze to, że zastosowane kolory są tylko przykładowe. Istotną rolę — oprócz zamiany kierunków wektorów normalnych — gra tutaj światło, a dokładniej kąt oraz ilość światła, jaka pada na powierzchnię obiektu. Padający strumień miejscami odbijany jest w naszą stronę intensywniej, a miejscami jest on wręcz pochłaniany, przez co uzyskujemy efekt nierównej powierzchni. Metoda ta z uwagi na swoje możliwości i małe zużycie pamięci jest bardzo często wykorzystywana przy tworzeniu obiektów przeznaczonych do gier. W przykładzie dla tego materiału skorzystamy z tekstur przedstawionych na rysunku 5.14. Pierwsza tekstura reprezentuje tę, którą widzimy bezpośrednio, druga natomiast przyczyni się do stworzenia otworów i nierówności oraz nada lepszy efekt pierwszej.
Rozdział 5. Światło
213
Rysunek 5.14.
Tekstura i jej mapa normalnych
Istnieje ciekawy plugin do programu Adobe Photoshop stworzony przez firmę NVIDIA, który pozwala na wygenerowanie mapy normalnych z otwartego pliku PSD. Wtyczkę tę można pobrać ze strony: http://developer.nvidia.com/nvidia-texture-toolsadobe-photoshop.
Efekt, który uzyskamy dzięki połączeniu obu tych tekstur w materiale Dot3Bitmap Material, przedstawia rysunek 5.15. Rysunek 5.15.
Zastosowanie materiału Dot3BitmapMaterial
Aby uzyskać taki efekt, w klasie bazowej MaterialsExample uzupełnij zawartość metody addLights() następującym kodem: light = new DirectionalLight3D(); light.direction = new Vector3D(0, -100, 300); view.scene.addLight(light);
214
Flash i ActionScript. Aplikacje 3D od podstaw
Następnie w metodzie initMaterial() stwórz obiekt materiału klasy Dot3Bitmap Material, używając poniższego kodu: mat = new Dot3BitmapMaterial(Cast.bitmap('metal2'), Cast.bitmap('normalMap'));
Dodatkowo zmień wyświetlane na scenie dwie kule w jeden sześcian, na którym umieścimy stworzony materiał. Aby tego dokonać, zmień zawartość metody add Objects(), używając poniższego kodu: obj = new ObjectContainer3D(); var cb:Cube = new Cube( { material:mat } ); cb.scale(3); obj.addChild(cb); view.scene.addChild(obj);
Po uzupełnieniu tych metod i skompilowaniu kodu na ekranie powinieneś ujrzeć sześcian złożony z metalowych płyt. Wykorzystanie Dot3BitmapMaterial na pewno uatrakcyjni wygląd obiektów w Twojej aplikacji. Właściwości oraz metody tej klasy wypisano w tabelach 5.17 i 5.18. Tabela 5.17. Właściwości klasy Dot3BitmapMaterial
Nazwa
Rodzaj
Wartość domyślna
Opis
shininess
Number
20
Określa poziom odblasku
specular
uint
16777215
Określa współczynnik odbicia poziomu światła
textureMaterial
BitmapMaterial
Zwraca obiekt BitmapMaterial użytej tekstury
normalBitmap
BitmapData
Zwraca obiekt BitmapMaterial użytej mapy wektorów normalnych
Dot3BitmapMaterialF10 Klasa Dot3BitmapMaterialF10 jest rozszerzoną wersją klasy Dot3BitmapMaterial. Dopisek F10 oznacza, że z tego materiału można korzystać jedynie na platformach Adobe Flash Player 10 i wyżej. Ma to swoje uzasadnienie. Otóż wraz z wersją dziesiątą wtyczka Adobe Flash Player obsługuje technologię Adobe Pixel Bender, która pozwala w wydajniejszy sposób tworzyć efekty graficzne za pomocą modułów
Rozdział 5. Światło
215
cieniujących. Brzmi to tajemniczo, ale potraktujmy to jak przejście ze zwykłej jakości obrazu do HD (High Definition — wysoka rozdzielczość). Efekt zastosowania tej klasy w przykładzie MaterialsExample przedstawiono na rysunku 5.16. Rysunek 5.16.
Zastosowanie materiału Dot3BitmapMaterialF10
Aby użyć klasy Dot3BitmapMaterialF10, w przykładzie MaterialsExample zamień kod metody addMaterial() na następujący: mat = new Dot3BitmapMaterialF10(Cast.bitmap('metal2'), Cast.bitmap('normalMap'));
Tak samo jak w przykładzie dla Dot3BitmapMaterialF10, w metodzie addObjects() zamień kod na następujący: obj = new ObjectContainer3D(); var cb:Cube = new Cube( { material:mat } ); cb.scale(3); obj.addChild(cb); view.scene.addChild(obj);
W metodzie addLights() stwórz obiekt światła oraz dodaj go do sceny, tak jak to wypisano w poniższych linijkach kodu: light = new DirectionalLight3D(); light.direction = new Vector3D(0, -500, 500); view.scene.addLight(light);
Teraz możesz skompilować kod i sprawdzić w praktyce, jak działa materiał Dot3BitmapMaterialF10. W tabelach 5.19 i 5.20 wypisane są wszystkie właściwości oraz metody tej klasy.
216
Flash i ActionScript. Aplikacje 3D od podstaw
Tabela 5.19. Właściwości klasy Dot3BitmapMaterialF10
Nazwa
Rodzaj
Wartość domyślna Opis
shininess
Number
20
Określa poziom odblasku
specular
uint
16777215
Określa współczynnik odbicia poziomu światła
normalMap
BitmapData
Zwraca obiekt BitmapMaterial użytej mapy wektorów normalnych
Dot3MovieMaterial Używając animowanych tekstur, również możemy się bawić poprawianiem ich wyglądu przez stosowanie map normalnych. Do tego celu wykorzystuje się materiał o nazwie Dot3MovieMaterial. Z punktu widzenia wcześniej omawianego Dot3Bitmap Material nic nie ulega zmianie w działaniu tego materiału. Według zasad podajemy obiekt typu BitmapData jako mapę normalnych oraz element MovieClip jako teksturę bazową. Tak samo jak w przykładzie z Dot3BitmapMaterial i Dot3BitmapMaterialF10, tutaj również stworzymy sześcian, ale użyjemy innej mapy wektorów normalnych oraz obiektu MovieClip z teksturą skały. Całość będzie wyglądała tak, jak to pokazano na rysunku 5.17. Rysunek 5.17.
Zastosowanie materiału Dot3MovieMaterial
Rozdział 5. Światło
217
Aby uzyskać taki efekt, w pierwszej kolejności zmień odwołanie do klasy textureMC z elementu liquid na stone w pliku projektu. Jeżeli nie masz tych plików, po prostu stwórz dowolną teksturę, zapisz ją do postaci MovieClip i powiąż ją z pustą klasą textureMC. W metodzie addObjects() wpisz następujący kod: obj = new ObjectContainer3D(); var cb:Cube = new Cube( { material:mat } ); cb.scale(3); obj.addChild(cb); view.scene.addChild(obj);
W metodzie initMaterial() stwórz nowy obiekt mat, podając w argumentach obiekt klasy textureMC oraz odwołanie do mapy normalMap2. mat = new Dot3MovieMaterial(new textureMC(), Cast.bitmap('normalMap2'));
W metodzie addLights() stwórz światło, wpisując poniższy kod: light = new DirectionalLight3D(); light.direction = new Vector3D(0, -500, 500); view.scene.addLight(light);
Teraz możesz skompilować kod i sprawdzić, jak działa ten materiał. W tabelach 5.21 i 5.22 wypisane są wszystkie właściwości oraz metody klasy Dot3MovieMaterial. Tabela 5.21. Właściwości klasy Dot3MovieMaterial
Nazwa
Rodzaj
Wartość domyślna
Opis
shininess
Number
0.7
Określa poziom odblasku
specular
Number
0.7
Określa współczynnik odbicia poziomu światła
textureMaterial
MovieMaterial
Zwraca obiekt MovieMaterial użyty jako materiał pokrywający obiekt
normalMap
BitmapData
Zwraca obiekt BitmapMaterial użytej mapy wektorów normalnych
PhongMultiPassMaterial Klasa PhongMultiPassMaterial działa podobnie jak wcześniej omówiony Dot3Bitmap Material i tak dalej. Różnicą jest to, że w PhongMultiPassMaterial dodatkowo definiuje się argument specularMap, który określa obszary zróżnicowania odblasku. Taka mapa może mieć postać czarno-białej bitmapy, w której jaśniejsze fragmenty wyznaczają obszary o silniejszym odbiciu światła. W naszym przykładzie skorzystamy z tekstur, które przedstawiono na rysunku 5.18.
Rysunek 5.18. Zestaw tekstur i map do przykładu
Teksturę o nazwie Specular zastosujemy jako wartość argumentu specularMap, aby uzyskać efekt przedstawiony na rysunku 5.19. Zwróć uwagę na kształty jaśniejszych powierzchni kuli. Efekt zastosowania tego materiału przedstawiono na rysunku 5.19. Tak samo jak w poprzednim przykładzie, z powodu sposobu tworzenia obiektu materiału PhongMultiPassMaterial musimy upewnić się, że metody addLights(), addObjects() oraz initMaterial() zostały usunięte, po czym w metodzie init() należy umieścić następujący kod: light = new PointLight3D( { color:0xFFFFFF, specular:1, diffuse:.5, ambient:.5 } ); light.position = new Vector3D(-100, 100, -100); view.scene.addLight(light); light2 = new PointLight3D( { color:0xFFFFFF, specular:1, diffuse:.5, ambient:.5 } ); light2.position = new Vector3D(100, 100, -100); view.scene.addLight(light2);
Rozdział 5. Światło
219
Rysunek 5.19.
Zastosowanie materiału PhongMultiPassMaterial
obj = new ObjectContainer3D(); var sph1:Sphere = new Sphere( { segmentsW:16, segmentsH:16 } ); mat = new PhongMultiPassMaterial(Cast.bitmap('stone'), Cast.bitmap('normalMap2'), sph1, Cast.bitmap('specular'), { } ); sph1.material = mat; obj.addChild(sph1); view.scene.addChild(obj);
W pierwszej kolejności stworzyliśmy dwa niezależne obiekty światła PointLight3D o nazwach light i light2. Po umieszczeniu ich na scenie dodaliśmy obiekt kuli oraz kontenera i przypisaliśmy obiektowi sph1 materiał PhongMultiPassMaterial, podając jego argumentom te same wartości co w poprzednim przykładzie. Po wykonaniu tych czynności dodaliśmy wszystkie elementy do sceny. Tabele 5.23 i 5.24 zawierają właściwości i metody klasy PhongMultiPassMaterial. Tabela 5.23. Właściwości klasy PhongMultiPassMaterial
Nazwa
Rodzaj
Wartość domyślna Opis
gloss
Number
10
Określa poziom odblasku
specular
Number
1
Określa współczynnik odbicia poziomu światła
specularMap
BitmapData
Zwraca obiekt BitmapData użyty jako mapa siły odbijania światła
Podsumowanie Biblioteka Away3D zawiera następujące rodzaje światła: AmbientLight3D, PointLight3D, DirectionalLight3D. Podstawą wszystkich świateł jest klasa AbstractLight. Klasa AmbientLight3D generuje obiekt, który oświetla wszystkie elementy w jednakowy sposób, niezależnie od pozycji i kąta nachylenia obiektu. Obiekt klasy PointLight3D odzwierciedla sztuczne światło, takie jak żarówka, która oświetla elementy znajdujące się w określonej od niej odległości. Stopień oświetlenia maleje wraz z odległością. Klasa DirectionalLight3D generuje światło, któremu nie określa się pozycji, lecz kierunek, w jakim emitowane są promienie. Światło tego rodzaju oświetla wszystkie elementy umieszczone na scenie. Materiały, na których widoczne są efekty działania światła AmbientLight3D, to: PhongMovieMaterial, PhongColorMaterial, PhongBitmapMaterial, Dot3BitmapMaterial. Materiały, na których widoczne są efekty działania światła PointLight3D, to: ShadingColorMaterial, WhiteShadingBitmapMaterial, PhongMultiPassMaterial, PhongPBMaterial. Materiały, na których widoczne są efekty działania światła DirectionalLight3D, to: ShadingColorMaterial, WhiteShadingBitmapMaterial, PhongMultiPassMaterial, PhongMovieMaterial, PhongColorMaterial, PhongBitmapMaterial, Dot3BitmapMaterial, Dot3BitmapMaterialF10. Materiały reagujące na światło w Away3D można podzielić na trzy kategorie: Zwykłe płaskie cieniowanie, które nie rozprasza światła piksel po pikselu, lecz cieniuje segmenty obiektu. Cieniowanie Phong, które dokładnie rozprasza światło po powierzchni, nadając mu szklany efekt. Cieniowanie z wykorzystaniem map rozproszenia wektorów normalnych, które symulują niewielkie zniekształcenia na powierzchni obiektu.
Rozdział 5. Światło
221
Każdy sposób cieniowania uwzględnia zastosowanie koloru, tekstury oraz obiektu typu Sprite jako źródła obrazu na powierzchni pokrytego obiektu. Najbardziej wydajnymi rodzajami materiałów reagujących na światło są ShadingColorMaterial i WhiteShadingBitmapMaterial. Użytkownicy programu Adobe Photoshop do tworzenia map normalnych mogą posłużyć się specjalną wtyczką stworzoną przez firmę NVIDIA. Klasa Dot3BitmapMaterial ma swoją ulepszoną wersję w postaci klasy Dot3BitmapMaterialF10, która wykorzystuje możliwości wtyczki Adobe Flash Player 10.x. Klasa PhongMultiPassMaterial jako jedna z nielicznych reaguje na kilka różnych źródeł światła jednocześnie.
222
Flash i ActionScript. Aplikacje 3D od podstaw
Rozdział 6. Modele i animacje W bibliotece Away3D istnieje możliwość umieszczania na scenie — poza obiektami omówionymi w rozdziale 3. „Obiekty” — modeli stworzonych w różnych programach do grafiki trójwymiarowej. Dzięki temu w aplikacjach bazujących na bibliotece Away3D mamy możliwość tworzenia ciekawych projektów z użyciem postaci oraz przedmiotów. Istotne jest również to, że nie trzeba ograniczać się do jednego lub dwóch rodzajów formatów — Away3D pozwala na korzystanie z wielu najbardziej znanych typów modeli. Dwa z nich uwzględniają również obsługę animacji, co daje jeszcze większe możliwości tworzenia ciekawych projektów. Znamy już podstawowe obiekty 3D i różnego rodzaju materiały dostępne w bibliotece Away3D, poszerzymy zatem naszą wiedzę o tematy związane ze stosowaniem modeli różnego typu. Czytając ten rozdział, dowiesz się: Z jakich aplikacji możesz korzystać, aby stworzyć modele dla Away3D. Jakiego rodzaju modeli można użyć w Away3D. Czym są modele Low poly oraz High poly. Jak dodawać modele i korzystać z nich w projektach. Jak w poszczególnych programach wyeksportować model w postaci klasy ActionScript 3.0. Jak posługiwać się animacjami wewnątrz modeli. Jak nakładać tekstury na modele. Programy do tworzenia modeli dla Away3D
224
Flash i ActionScript. Aplikacje 3D od podstaw
3ds Max Wcześniej był znany jako 3D Studio Max. 3ds Max to rozbudowany program, który służy do tworzenia trójwymiarowej grafiki i animacji. W swojej pierwszej odsłonie program ten ujrzał światło dzienne dzięki firmie Kinetix w 1990 roku. W kolejnych latach rozwoju tego projektu przejmowały go różne firmy, aż trafił w ręce giganta branży tworzenia tego typu aplikacji — firmy Autodesk Inc. 3ds Max jest szeroko stosowaną i chyba najbardziej rozpoznawalną aplikacją do tworzenia trójwymiarowych modeli, animacji oraz efektów specjalnych. Korzystają z niej artyści zajmujący się produkcją gier oraz filmów. Możliwości tego programu są naprawdę wielkie, o czym można się przekonać, czytając inne książki poświęcone 3ds Max. Program ten w wersji testowej można pobrać ze strony: http://www.autodesk.pl. Na rysunku 6.1 przedstawiono interfejs programu 3ds Max.
Rysunek 6.1. Interfejs programu 3ds Max
Maya Maya to kolejny profesjonalny program do tworzenia trójwymiarowej grafiki i animacji komputerowej. Aplikację tę stworzyły dwie ekipy, które były pionierami produkcji grafiki trójwymiarowej na potrzeby branży filmowej. Łącząc siły w 1995 roku, stworzyły firmę Alias, która w 1998 roku wydała aplikację Maya.
Rozdział 6. Modele i animacje
225
Z uwagi na swoją cenę program ten miał wąskie grono użytkowników. Po obniżeniu ceny z tego pakietu zaczęli korzystać również inni artyści tworzący obiekty do gier i aplikacji 3D. Program ten w wersji testowej można pobrać ze strony: http://www.autodesk.pl. Na rysunku 6.2 przedstawiono interfejs programu Maya.
Rysunek 6.2. Interfejs programu Maya
LightWave LightWave jest pakietem programów do tworzenia grafiki trójwymiarowej, stworzonym przez firmę NewTek. W swoich pierwszych wersjach przeznaczony był dla komputerów Amiga, a dopiero w 1995 roku opracowano wersje na komputery PC i Macintosh. Dzięki temu grono użytkowników z wąskiego otoczenia produkcji filmowej rozrosło się o grupy artystów tworzących obiekty i animacje na potrzeby gier, aplikacji i mniejszych przedsięwzięć filmowych. W tym programie zastosowano ciekawe rozwiązania pozwalające rozdzielić poszczególne elementy sceny 3D na warstwy, co pozwala na szybkie modyfikowanie wybranego elementu bez ingerowania w jego otoczenie. Sam interfejs z początku może sprawiać problemy, ale po przyzwyczajeniu staje się bardzo praktyczny. Istotne w tym programie jest również to, że umożliwia on korzystanie z wielu dodatkowych wtyczek poprawiających jakość tworzonej grafiki trójwymiarowej.
226
Flash i ActionScript. Aplikacje 3D od podstaw
Więcej informacji na temat tego programu oraz możliwość pobrania go w wersji testowej znajdziesz na stronie: https://www.lightwave3d.com. Na rysunku 6.3 przedstawiono interfejs programu LightWave Modeler.
Rysunek 6.3. Interfejs programu Lightwave Modeler
Blender Blender to program do tworzenia grafiki trójwymiarowej stworzony przez firmę NaN. W drugiej połowie 2002 roku firma NaN odsprzedała prawa do programu stowarzyszeniu Blender Foundation, które określoną sumę uzyskało z publicznej zbiórki. Od tego czasu Blender stał się całkowicie wolnym oprogramowaniem. Program Blender spośród innych aplikacji do tworzenia grafiki trójwymiarowej wyróżnia się nietypowym interfejsem, który z początku wydaje się skomplikowany, ale z czasem okazuje się bardzo intuicyjny. Poza tym Blender ma wbudowany silnik do tworzenia interaktywnych aplikacji 3D. Kolejnym atutem tego pakietu jest jego dostępność dla większości znanych systemów operacyjnych.
Rozdział 6. Modele i animacje
227
Więcej na temat programu Blender wraz z linkami do pobrania można znaleźć na stronie: http://www.blender.org. Na rysunku 6.4 przedstawiono interfejs programu Blender.
Rysunek 6.4. Interfejs programu Blender
MilkShape 3D MilkShape 3D jest aplikacją do tworzenia modeli złożonych z małej liczby wielokątów. W pierwotnej wersji program ten przeznaczony był do tworzenia obiektów do gry Half-Life. Z czasem dodano obsługę wielu różnych formatów, umożliwiając tworzenie nowych modeli dla różnych gier i aplikacji 3D. Program ten można pobrać ze strony: http://www.milkshape3d.com/. Na rysunku 6.5 przedstawiono interfejs programu MilkShape 3D.
228
Flash i ActionScript. Aplikacje 3D od podstaw
Rysunek 6.5. Interfejs programu MilkShape 3D
CharacterFX CharacterFX jest darmowym narzędziem do tworzenia animacji modeli. Za pomocą specjalnych narzędzi oraz szkieletu animacji w łatwy sposób można nadać ruch postaci i zapisać jej poszczególne sekwencje. Aplikacja ta jest szczególnie dobrym rozwiązaniem dla twórców gier, którzy w tani i prosty sposób chcą stworzyć odpowiednie animacje. Program ten można pobrać ze strony: http://www.insanesoftware.de. Na rysunku 6.6 przedstawiono interfejs programu CharacterFX.
Rozdział 6. Modele i animacje
229
Rysunek 6.6. Interfejs programu CharacterFX
Google SketchUp Google SketchUp jest programem stworzonym przez firmę Google, który służy do tworzenia trójwymiarowych modeli. Aplikacja ta charakteryzuje się prostym interfejsem pozwalającym nawet początkującym użytkownikom kreować różnego rodzaju obiekty 3D. Jednym z głównych zastosowań tego programu jest tworzenie modeli w formatach KML i KMZ do map w programie Google Earth, ale można w nim również wyeksportować stworzony obiekt do innych popularnych formatów, takich jak 3DS, OBJ lub DAE. Program ten można pobrać ze strony: http://sketchup.google.com. Na rysunku 6.7 przedstawiono interfejs programu Google SketchUp.
230
Flash i ActionScript. Aplikacje 3D od podstaw
Rysunek 6.7. Interfejs programu Google SketchUp
PreFab3D PreFab3D jest niewielką aplikacją napisaną przez ludzi związanych z projektem Away3D. Stworzono ją, by umożliwić edycję obiektów 3D, optymalizować je, tak aby w jak najlepszy sposób móc z nich korzystać w projektach bazujących na silnikach typu Away3D. Program ten ma kilka narzędzi umożliwiających stworzenie całej scenerii, światła, ścieżki i wielu innych elementów. Jeśli nie masz doświadczenia w projektowaniu w zaawansowanych programach 3D, stosując PreFab3D, w łatwy sposób możesz wykreować różne elementy do swoich aplikacji. Program ten można pobrać ze strony: http://closier.nl/prefab. Na rysunku 6.8 przedstawiono interfejs programu PreFab3D.
Rozdział 6. Modele i animacje
231
Rysunek 6.8. Interfejs programu PreFab3D
Low poly i High poly Terminem Low poly określa się modele, których siatka geometryczna składa się z małej liczby wielokątów. Z tego typu modeli korzysta się przede wszystkim w aplikacjach, które wyświetlają modele w czasie rzeczywistym, na przykład grach komputerowych. Modele o skomplikowanej budowie siatek częściej stosuje się do produkcji filmów. Komputery o potężnej mocy obliczeniowej wcześniej przetwarzają animacje bardzo szczegółowych obiektów i tworzą obrazy zapisywane w postaci plików wideo. Niełatwo dokładnie wskazać, kiedy zastosować model Low poly, a kiedy High poly. Jest to bardzo niekonkretne szczególnie w dzisiejszych czasach z uwagi na rozwój możliwości sprzętu komputerowego. Głównym powodem stosowania modeli Low poly jest optymalizacja działania aplikacji. Liczbę wielokątów wyświetlanych na scenie w jednej klatce ustalają możliwości sprzętu, na którym uruchomiona jest aplikacja, oraz silnik, na którym została stworzona. Dzisiejsze silniki gier komputerowych pozwalają na używanie bardzo szczegółowych trójwymiarowych obiektów, jednak wymaga to również wydajnego sprzętu. Gdy nastawiamy się na szersze grono odbiorców, lepiej zmniejszyć wymagania sprzętowe i stosować mniej szczegółowe modele oraz specjalne zabiegi kosmetyczne na teksturach. W przypadku aplikacji tworzonych do masowego użytku w sieci stosuje się obiekty Low poly. Sprawia to, że produkt jest bardziej dostępny dla różnych użytkowników.
232
Flash i ActionScript. Aplikacje 3D od podstaw
Format plików obsługiwanych w Away3D 3DS To format stworzony przez autorów programu Autodesk 3ds Max. Z uwagi na swój mały rozmiar i szybkość ładowania stał się jednym z najpowszechniejszych formatów. Dane przechowywane są w nim w postaci binarnej, a ich struktura blokowa przypomina tę stosowaną w języku XML. Należy wspomnieć tutaj jeszcze o tym, że 3DS obsługuje jedynie modele statyczne. Więcej informacji na temat tego formatu znajdziesz pod adresem: http://en.wikipedia.org/wiki/.3ds.
ASE Drugi format opracowany przez twórców Autodesk 3ds Max. W tym przypadku zawartość pliku zapisana jest w formie tekstowej. Oznacza to, że — w przeciwieństwie do formatu 3DS — ASE zapisany jest w zrozumiały dla człowieka sposób i można go otworzyć zwykłym edytorem tekstu.
OBJ To kolejny ze znanych formatów plików dla modeli 3D. Stworzony został przez firmę Wavefront Technologies. Format ten jest otwarty i dostępny w większości aplikacji do tworzenia statycznych modeli 3D. Zapisane w nim dane w postaci tekstowej określają geometrię obiektu oraz współrzędne uv dla tekstur. Więcej informacji na temat tego formatu znajdziesz pod adresami: http://www.martinreddy. net/gfx/3d/OBJ.spec lub http://en.wikipedia.org/wiki/Wavefront_.obj_file.
DAE Format COLLADA z rozszerzeniem *.dae został opracowany w firmie Sony Computer Entertainment. Obecnie jest własnością organizacji Khronos Group, do której należy również Sony Computer Entertainment. Pliki COLLADA najczęściej stosowane są do interaktywnych aplikacji 3D, takich jak gry komputerowe. Dane zapisane w tych plikach są w formacie XML. Jako pierwszy z wymienionych na tej liście umożliwia przechowywanie danych animacji obiektu. Więcej informacji na temat tego formatu znajdziesz pod adresem: http://collada.org.
Rozdział 6. Modele i animacje
233
MD2 Format stworzony i używany przez firmę id Software w silniku Tech 2. Najbardziej znaną aplikacją 3D, która korzysta z tego formatu, jest gra Quake 2. Głównym założeniem twórców było stworzenie optymalnego formatu dla animowanych modeli. Animacje obiektu zapisane są w formie poklatkowej. Każda z klatek zawiera odpowiednie współrzędne dla wszystkich punktów obiektu, dzięki temu przejście między animacjami jest bardzo płynne. Więcej informacji na temat tego formatu znajdziesz pod adresem: http://tfc.duke.free.fr/old/models/md2.htm.
AWD Wprowadzony przez twórców biblioteki Away3D format AWD służy do przedstawiania modeli statycznych. Prace nad tym formatem są wciąż prowadzone, dlatego można się spodziewać, że w przyszłości będzie możliwe umieszczanie w nim również animacji. W swoich założeniach AWD ma być formatem wieloplatformowym, obsługiwanym przez wszystkie wersje biblioteki Away3D. Więcej informacji na temat tego formatu znajdziesz pod adresem: http://code.google.com/p/awd.
AS Istnieje możliwość skonwertowania modeli poszczególnych formatów do plików ActionScript. Po wykonaniu takiego eksportu dane modelu zostaną zapisane jako zwykła klasa ActionScript 3.0. To, jak można przekonwertować model do klasy AS, zostanie omówione w dalszych częściach tego rozdziału.
Konwertowanie modelu do klasy ActionScript Klasa AS3Exporter Pierwszy sposób przerabiania plików na kod źródłowy ActionScript 3.0 polega na skorzystaniu z klasy AS3Exporter zlokalizowanej w pakiecie away3d.exporters. Zastosowanie tej klasy jest niezwykle proste, ponieważ wystarczy stworzyć jej obiekt i wywołać metodę export(). W argumentach tej metody podajemy wczytany obiekt jednego z obsługiwanych modeli, nazwę dla klasy i ścieżkę pakietu, w jakim ma się znajdować.
234
Flash i ActionScript. Aplikacje 3D od podstaw
Przy eksportowaniu modelu do klasy z użyciem AS3Exporter należy pamiętać o zastosowaniu detektora zdarzenia ExporterEvent.COMPLETE. Jeżeli nie wywołasz metody przy zajściu tego zdarzenia, pojawi się następujący komunikat: AS3Exporter Error: No ExporterEvent.COMPLETE event set. Use the method addOnExportComplete(myfunction) before use export();
W metodzie export() zapisany jest warunek, który sprawdza, czy został dodany detektor zdarzenia ExporterEvent.COMPLETE. Jeżeli programista w swoim kodzie przed uruchomieniem tej metody nie stworzył oczekiwanego detektora, to nie zostaną podjęte dalsze działania. To przykład dobrej praktyki sprawdzania, czy wykonane zostały wszystkie konieczne działania przed uruchomieniem metody. W tym przypadku twórcy tej klasy zadbali o poprawną kolejność działań, ale warto samemu pilnować sekwencji wykonywanych operacji. Dzięki temu można zaoszczędzić czas na szukaniu przyczyn błędnego działania kodu. Po poprawnie wykonanej operacji do źródła skonwertowanego modelu odwołujemy się przez umieszczoną w klasie AS3Exporter właściwość o nazwie as3File. Aby zobrazować tę metodę konwertowania, napiszemy prosty program, w którym pobrany plik modelu będziemy mogli zapisać w dowolnym miejscu jako plik klasy ActionScript 3.0. Na rysunku 6.9 przedstawiono okno naszego programu. Rysunek 6.9.
Okno programu konwertera modeli do klas ActionScript 3.0
Cały proces przebiega następująco: 1. Klikając na przycisk 1. Wybierz model, wybieramy plik jednego z dostępnych formatów plików. 2. Podajemy nazwę dla klasy oraz pakiet, w jakim będzie się znajdowała klasa z wygenerowanym modelem. 3. Klikając 3. Zapisz model jako klasę ActionScript, wybieramy lokalizację dla pliku. Powinna się ona zgadzać z podaną ścieżką pakietu. Nazwy pliku nie powinno się zmieniać, ponieważ musi się ona pokrywać z nazwą klasy.
Rozdział 6. Modele i animacje
235
W następującym kodzie źródłowym zastosowano instrukcję warunkową switch() wewnątrz metody onModelLoaded(). W każdym z jej warunków zastosowano klasy i metody przetwarzające pobrane dane z modelu. Omawianiem każdej z tych klas zajmiemy się w dalszych częściach tego rozdziału. Teraz przepisz następujący kod i zapisz go w pliku AS3ExporterExample.as. package { import import import import import import import import import
import away3d.exporters.AS3Exporter; import away3d.loaders.*; import away3d.events.Loader3DEvent; import away3d.events.ExporterEvent; public class AS3ExporterExample extends Sprite { private var selectBtn:Button; private var exportBtn:Button; private var status:Label; private var className:TextInput; private var classPackage:TextInput; private var modelReference:FileReference; private var as30Reference:FileReference; private var model:*; private var as3Export:AS3Exporter; public function AS3ExporterExample():void { if (stage) init(); else addEventListener(Event.ADDED_TO_STAGE, init); } private function init(e:Event = null):void { removeEventListener(Event.ADDED_TO_STAGE, init); selectBtn = new Button(); selectBtn.label = '1. Wybierz model'; selectBtn.x = 20; selectBtn.y = 20; selectBtn.width = 110; addChild(selectBtn); selectBtn.addEventListener(MouseEvent.CLICK, selectModel);
236
Flash i ActionScript. Aplikacje 3D od podstaw exportBtn = new Button(); exportBtn.label = '3. Zapisz model jako klasę ActionScript'; exportBtn.x = 20; exportBtn.y = 150; exportBtn.width = 214; addChild(exportBtn); exportBtn.addEventListener(MouseEvent.CLICK, exportModel); exportBtn.enabled = false; var step2Label:Label = new Label(); step2Label.text = '2. Wypełnij dane dla klasy'; step2Label.x = 20; step2Label.y = 55; step2Label.width = 330; addChild(step2Label); status = new Label(); status.text = 'Status:'; status.x = 20; status.y = 200; status.width = 330; addChild(status); className = new TextInput(); className.editable = true; className.text = 'Model'; className.x = 95; className.y = 85; className.width = 257; addChild(className); classPackage = new TextInput(); classPackage.editable = true; classPackage.text = 'models.as'; classPackage.x = 95; classPackage.y = 115; classPackage.width = 257; addChild(classPackage); var nameLabel:Label = new Label(); nameLabel.text = 'Nazwa klasy:'; nameLabel.x = 20; nameLabel.y = 87; nameLabel.width = 70; addChild(nameLabel); var packageLabel:Label = new Label(); packageLabel.text = 'Pakiet:'; packageLabel.x = 20; packageLabel.y = 117; packageLabel.width = 70; addChild(packageLabel);
Rozdział 6. Modele i animacje
237
} private function selectModel(e:MouseEvent):void { exportBtn.enabled = false; model = null; modelReference = new FileReference(); modelReference.addEventListener(Event.SELECT, onModelSelected); modelReference.browse( [ new FileFilter('3DS Max (*.3ds)', '*.3ds'), new FileFilter('Wavefront (*.obj)', '*.obj'), new FileFilter('3DS Max ASCII (*.ase)', '*.ase'), new FileFilter('Away3D (*.awd)', '*.awd'), new FileFilter('Collada (*.dae)', '*.dae'), new FileFilter('Quake 2 (*.md2)', '*.md2') ]); } private function onModelSelected(e:Event):void { modelReference.addEventListener(Event.COMPLETE, onModelLoaded); modelReference.addEventListener(IOErrorEvent.IO_ERROR, onLoadError); modelReference.load(); } private function onModelLoaded(e:Event):void { modelReference.removeEventListener(Event.COMPLETE, onModelLoaded); modelReference.removeEventListener(IOErrorEvent.IO_ERROR, onLoadError); status.text = 'Status: Model pobrany.'; switch(modelReference.type.toLowerCase()) { case '.3ds': model = Max3DS.parse(modelReference.data); break; case '.obj': model = Obj.parse(modelReference.data); break; case '.ase': model = Ase.parse(modelReference.data); break; case '.awd': model = AWData.parse(modelReference.data); break; case '.dae': model = Collada.parse(modelReference.data); break;
238
Flash i ActionScript. Aplikacje 3D od podstaw case '.md2': model = Md2.parse(modelReference.data); break; } as3Export = new AS3Exporter(); as3Export.addOnExportComplete(as3ExportComplete); as3Export.export(model, className.text, classPackage.text); } private function as3ExportComplete(e:ExporterEvent):void { exportBtn.enabled = true; } private function exportModel(e:MouseEvent):void { as30Reference = new FileReference(); as30Reference.addEventListener(Event.COMPLETE, onModelExported); as30Reference.save(as3Export.as3File, className.text+'.as'); status.text = 'Status:...'; } private function onModelExported(e:Event):void { as30Reference.removeEventListener(Event.COMPLETE, onModelExported); status.text = 'Status: Model zapisany.'; } private function onLoadError(e:IOErrorEvent):void { status.text = 'Status: Wystąpił błąd podczas pobierania pliku.'; } } }
Aby zrealizować ten przykład, skorzystaliśmy z klas FileReference oraz FileFilter obsługujących okna dialogowe zapisu i odczytu plików. Jak pokazano na rysunku 6.9, stworzyliśmy prosty interfejs użytkownika złożony z dwóch przycisków: 1. Wybierz model o nazwie selectBtn oraz 3. Zapisz model jako klasę ActionScript nazwany exportBtn. Dodatkowo umieściliśmy dwa pola tekstowe: Nazwa klasy, do którego odwołujemy się przez obiekt o nazwie className, oraz pole Pakiet nazwane classPackage. Ich zastosowanie omówimy za chwilę. Poza standardowymi klasami ActionScript 3.0 użyliśmy też kilku klas biblioteki Away3D z pakietu away3d.loaders, klasy AS3Exporter oraz zdarzeń ExporterEvent i Loader3DEvent. W konstruktorze klasy AS3ExporterExample wywołujemy metodę init(), w której stworzyliśmy wszystkie obiekty panelu użytkownika przedstawione na rysunku 6.9.
Rozdział 6. Modele i animacje
239
Obiekt exportBtn ustawiliśmy jako niedostępny, dzięki temu nie będzie można wywołać metody exportModel() bez wcześniejszego wykonania pierwszego i drugiego kroku w aplikacji. W kolejnej metodzie selectModel(), wywoływanej po wciśnięciu przycisku selectBtn, stworzyliśmy obiekt klasy FileReference o nazwie modelReference. Służy on do wyświetlania okna dialogowego wyboru modelu i samego pobrania danych. Tworząc kilka klas FileFilter w metodzie browse() obiektu modelReference, ograniczyliśmy wyświetlanie modeli do określonych rodzajów. Dzięki temu unikniemy ewentualnych błędów spowodowanych wybraniem przez użytkownika pliku o nieobsługiwanym formacie. Poza tym dodaliśmy zdarzenie, które wywołuje metodę onModelSelected(), gdy z listy zostanie wybrany jakiś plik. exportBtn.enabled = false; model = null; modelReference = new FileReference(); modelReference.addEventListener(Event.SELECT, onModelSelected); modelReference.browse( [ new FileFilter('3ds Max (*.3ds)', '*.3ds'), new FileFilter('Wavefront (*.obj)', '*.obj'), new FileFilter('3ds Max ASCII (*.ase)', '*.ase'), new FileFilter('Away3D (*.awd)', '*.awd'), new FileFilter('Collada (*.dae)', '*.dae'), new FileFilter('Quake 2 (*.md2)', '*.md2') ]);
W metodzie onModelSelected() dodaliśmy detektory zakończenia pobierania Event.COMPLETE oraz wystąpienia błędu związanego z operacją wejścia lub wyjścia IOErrorEvent.IO_ERROR. Następnie wywołaliśmy proces ładowania zawartości wybranego pliku, stosując metodę load(). modelReference.addEventListener(Event.COMPLETE, onModelLoaded); modelReference.addEventListener(IOErrorEvent.IO_ERROR, onLoadError); modelReference.load();
To, co nas na chwilę obecną interesuje w metodzie onModelLoaded(), to proces tworzenia obiektu klasy AS3Exporter. Po poprawnym załadowaniu modelu i jego przetworzeniu stworzyliśmy obiekt o nazwie as3Export. W argumentach metody export() podaliśmy wcześniej przetworzony obiekt modelu, podaną w polu tekstowym className nazwę dla klasy oraz ścieżkę pakietu zapisaną w polu classPackage. Poza tym dodaliśmy metodę addOnExportComplete(), aby uniknąć wyświetlenia wcześniej wspomnianego komunikatu błędu. as3Export = new AS3Exporter(); as3Export.addOnExportComplete(as3ExportComplete); as3Export.export(model, className.text, classPackage.text);
240
Flash i ActionScript. Aplikacje 3D od podstaw
Po poprawnym skonwertowaniu modelu do klasy ActionScript 3.0 w metodzie as3ExportComplete() odblokowaliśmy przycisk exportBtn, tak aby użytkownik mógł zapisać stworzoną klasę w postaci pliku ActionScript. exportBtn.enabled = true;
W metodzie exportModel(), uruchamianej po wciśnięciu przycisku exportBtn, stworzyliśmy w pierwszej kolejności kolejny obiekt klasy FileReference o nazwie as30Reference, który potrzebny jest do uruchomienia okna dialogowego zapisu pliku. Następnie dodaliśmy do niego detektor zdarzenia Event.COMPLETE, który po prawidłowym zakończeniu operacji zapisu pliku uruchomi metodę onModelExported(). Do zapisania wygenerowanej klasy do postaci pliku zastosowaliśmy metodę save(), podając w jej pierwszym argumencie odwołanie do zawartości obiektu as3Export. W następnym argumencie tej metody ustawiliśmy domyślną nazwę pliku, odpowiadającą nazwie klasy, wraz z rozszerzeniem .as. as30Reference = new FileReference(); as30Reference.addEventListener(Event.COMPLETE, onModelExported); as30Reference.save(as3Export.as3File, className.text+'.as'); status.text = 'Status: ...';
W tabelach 6.1 oraz 6.2 wypisano właściwości oraz metody klasy AS3Exporter. Tabela 6.1. Właściwości klasy AS3Exporter
Nazwa
Rodzaj
as3File
String
Wartość domyślna Opis Zwraca jako obiekt typu String ostatnio wygenerowaną klasę, której kod zawiera dane modelu przekonwertowane na język ActionScript 3.0
Tabela 6.2. Metody klasy AS3Exporter
Nazwa
Opis
AS3Exporter()
Konstruktor
addOnExportComplete(listener:Function):void
Metoda dodająca detektor dla zdarzenia ExporterEvent.COMPLETE
Przetwarza podany obiekt modelu do postaci klasy ActionScript 3.0 o podanej nazwie i pakiecie
removeOnExportComplete(listener:Function):void
Metoda usuwająca detektor zdarzenia ExporterEvent.COMPLETE
Rozdział 6. Modele i animacje
241
Eksport z programu PreFab3D W poprzednim podrozdziale poznaliśmy program PreFab3D i wspomnieliśmy o tym, że ma on wiele przydatnych funkcji, jeśli chodzi o aplikacje korzystające z biblioteki Away3D. Jedną z możliwości, jakie oferuje PreFab3D, jest eksportowanie modelu do klasy ActionScript 3.0 i zapisanie jej w postaci pliku. Aby zmienić wybrany plik modelu na klasę ActionScript, stosując PreFab3D, w pierwszej kolejności należy go zaimportować na scenę programu. W tym celu wybieramy w górnym menu zakładkę File i klikamy na jedną z opcji: Import Recent 3D Model bądź Import 3D model, tak jak to pokazano na rysunku 6.10. Pierwsza opcja odwołuje się do modeli, które wcześniej były już importowane, a druga do nowych. Rysunek 6.10.
Importowanie pliku modelu
Po wyborze i dodaniu pliku na scenie programu PreFab3D pojawi się model pokryty białym kolorem oraz siatką. Aby dodać teksturę do poszczególnych elementów modelu, należy kliknąć na obiekt. Wtedy wokół niego pojawią się linie formujące sześcian oraz strzałki do przesuwania. Po wyborze fragmentu należy kliknąć w pierwszą ikonę znajdującą się po prawej stronie, pod białym kwadratem o nazwie Original. Na rysunku 6.11 zaprezentowano, jak powinno wyglądać wybranie elementu modelu, oraz zaznaczono ikonę dodawania tekstury. Po wybraniu odpowiednich tekstur dla poszczególnych elementów modelu będzie można zobaczyć go na scenie w pełnej okazałości, tak jak to pokazano na rysunku 6.12.
242
Flash i ActionScript. Aplikacje 3D od podstaw
Rysunek 6.11. Zaznaczenie fragmentu modelu i ikony wyboru tekstury
Rysunek 6.12. Model z osadzonymi na nim teksturami
Kiedy model jest już gotowy, można przystąpić do jego eksportu. W tym celu należy kliknąć na opcję Export w górnym menu i wybrać opcję Export AS3 class. W nowej liście wyświetlą się możliwe formy zapisu — w zależności od celu i wersji biblioteki Away3D. Między innymi można wyeksportować model dla biblioteki Away3DLite
Rozdział 6. Modele i animacje
243
oraz specjalną wersję klasy dla modelu w formacie MD2. Nas interesuje teraz zwykłe zapisanie modelu jako klasy dla silnika Away3D, dlatego należy wybrać opcję Away3D, tak jak to pokazano na rysunku 6.13. Rysunek 6.13.
Eksportowanie modelu do klasy ActionScript 3.0
Po wybraniu tej opcji pojawi się nowe okno zawierające ustawienia dla tworzonej klasy, w którym należy wybrać wersję biblioteki Away3D. Podobnie jak w naszym programie, trzeba również wybrać nazwę klasy i ścieżkę do jej pakietu. Na końcu trzeba kliknąć przycisk Save file, aby wybrać miejsce docelowe klasy. Na rysunku 6.14 przedstawiono okno ustawień dla eksportowanej w programie PreFab3D klasy ActionScript 3.0. Rysunek 6.14.
Okno ustawień eksportu do klasy ActionScript 3.0
Po wykonaniu wszystkich czynności plik pojawi się w wybranej lokalizacji i będzie gotowy do użycia w kodzie. Przy okazji warto również zapoznać się z możliwościami eksportu modelu do pliku AWD. Jeśli masz wiedzę na temat eksportu do pliku AS, nie powinno to stanowić problemu.
244
Flash i ActionScript. Aplikacje 3D od podstaw
Eksport z programu Blender Jeżeli tworzysz modele, posługując się programem Blender, to dobrą wiadomością dla Ciebie będzie to, że można również, stosując ten program, wyeksportować pliki w postaci klasy ActionScript 3.0. Do tego celu niezbędny jest dodatkowy plugin, który można znaleźć pod tym adresem: http://www.rozengain.com/files/blog/ blender-export/AS3Export.zip. Zawartość paczki wypakuj do katalogu scripts programu Blender, następnie uruchom program. Aby sprawdzić, czy skrypt został dodany poprawnie, kliknij na opcję File w górnym menu i wybierz Export. W nowej liście pomiędzy innymi pluginami powinna się znajdować również opcja ActionScript 3.0 Class (.as)…, tak jak to przedstawiono na rysunku 6.15.
Rysunek 6.15. Metody eksportu w programie Blender wraz z opcją ActionScript 3.0
Jeżeli w swoim programie nie widzisz takiej opcji, sprawdź, czy w dobrym miejscu umieściłeś zawartość pobranego archiwum. Aby zlokalizować katalog scripts w programie Blender, kliknij w górnym menu przycisk Help i wybierz opcję System,
Rozdział 6. Modele i animacje
245
z kolei w nowym panelu menu kliknij przycisk System Infomation…, tak jak to pokazano na rysunku 6.16. Rysunek 6.16.
Lokalizacja opcji otwarcia okna informacji o systemie
Na ekranie wyświetli się napis: Please check the text system-info.txt in the Text Editor Window. Wybierz edytor tekstu, klikając w menu wyboru widoku, jak na rysunku 6.17. Rysunek 6.17.
Menu wyboru widoku w programie Blender
Następnie z menu kontekstowego wybierz plik system-info.txt, jak to pokazano na rysunku 6.18. W wyświetlonym pliku znajdziesz informacje o lokalizacji katalogu scripts w swoim systemie.
246
Flash i ActionScript. Aplikacje 3D od podstaw
Rysunek 6.18. Wybór pliku tekstowego
Po poprawnym zaimportowaniu skryptu w celu wyeksportowania wybranego modelu kliknij ponownie przycisk ActionScript 3.0 Class (.as)… na liście Export w panelu opcji File. Pojawi się nowe okno, w którym należy podać nazwę pakietu dla klasy, rodzaj silnika oraz wybrać lokalizację pliku. Po wypełnieniu wszystkich pól należy kliknąć przycisk Export. Jeżeli operacja zakończy się pomyślnie, to pojawi się napis: Export Successful. Na rysunku 6.19 przedstawiono okno pluginu eksportu modeli do plików ActionScript 3.0. Rysunek 6.19.
Okno pluginu do eksportu modelu w postaci ActionScript 3.0
Plugin ten jest uniwersalny i można z niego korzystać również w innych bibliotekach 3D dostępnych na platformę Adobe Flash. W liście wyboru bibliotek wypisane są kompatybilne wersje różnych silników 3D.
Eksport z programu Autodesk 3ds Max Dla użytkowników, którzy mają program z serii 3ds Max firmy Autodesk, również mam dobre wieści. Otóż nie musicie specjalnie korzystać z innych programów, by konwertować swoje modele do postaci kodu klasy języka ActionScript 3.0. Dzięki skryptowi AS3GeomExporter, który dostępny jest na stronie: http://not-so-stupid.
Rozdział 6. Modele i animacje
247
com/open-source/as3-geom-exporter-english, można bez problemu wyeksportować zaznaczone elementy do pliku *.as. Uruchomienie pluginu w 3ds Max jest znacznie prostsze niż w programie Blender, ponieważ wystarczy jedynie przeciągnąć i upuścić wybrany plik z rozszerzeniem *.ms w oknie programu 3ds Max. Można również skorzystać z opcji Run Script… w liście MAXScript znajdującej się w górnym menu programu. Po kliknięciu w przycisk na ekranie pojawi się okno dialogowe, w którym należy wybrać lokalizację skryptu i go otworzyć. Na rysunku 6.20 pokazano drugi sposób włączania pliku AS3GeomExporter.ms. Rysunek 6.20.
Uruchomienie skryptu przez użycie opcji Run Script
Po uruchomieniu skryptu na ekranie pojawi się okno z opcjami do eksportu. W pierwszej kolejności znajdują się tam pola, w których należy podać ścieżkę pakietu oraz nazwę dla klasy. Pod nimi z menu wyboru należy wybrać bibliotekę 3D, do której klasa będzie przeznaczona. Ciekawa jest możliwość ustawienia skali — dzięki temu nie trzeba będzie zmieniać jej w kodzie aplikacji przy odwołaniu do obiektu tworzonej klasy. Plugin AS3GeomExporter ma również dwie opcje optymalizujące eksportowany model. Pierwsza z nich to Swap face normal. Zaznaczenie tej opcji niweluje problem odwróconych trójkątów. Z kolei zaznaczenie opcji Rounded vertex coord powoduje zaokrąglenie współrzędnych wszystkich wierzchołków modelu. Na rysunku 6.21 przedstawiono okno pluginu z przykładowymi ustawieniami.
248
Flash i ActionScript. Aplikacje 3D od podstaw
Rysunek 6.21.
Okno pluginu AS3GeomExporter
Stosowanie modeli 3D w Away3D Do tej pory poznaliśmy różnego rodzaju modele obsługiwane w bibliotece Away3D oraz sposoby zamiany ich na kod klasy ActionScript 3.0. Przyszedł czas na omówienie klas służących do ich ładowania i umieszczania na scenie aplikacji. W przykładzie konwertowania modeli wspominałem, żeby nie zwracać uwagi na instrukcję warunkową switch wewnątrz metody onModelLoaded(). W jej wnętrzu użyliśmy dostępnych w Away3D klas do zbadania zawartości pobranych modeli. Każdą z tych klas omówimy w tym podrozdziale, ale zanim do tego dojdziemy, przerobimy przykład konwertowania modeli tak, by mogły wyświetlać na scenie wybrane modele.
Przykładowa aplikacja Celem przykładowej aplikacji będzie umożliwienie użytkownikowi wybierania modelu z dowolnej lokalizacji na jego dysku i wyświetlania go w oknie programu. Aby ustalić poszczególne opcje wyświetlania, stworzymy panel użytkownika z przyciskami pomagającymi kontrolować wygląd modelu. Poza samą możliwością ładowania pliku modelu dodamy opcję umieszczania na jego powierzchni wybranej tekstury. Poza tym dodamy również pole wyboru materiałów Wireframe Material, WireColorMaterial oraz BitmapMaterial, tak aby sprawdzić, jak prezentuje się geometria modelu.
Rozdział 6. Modele i animacje
249
Pamiętając o tym, że każdy z modeli ma różnie zdefiniowane wymiary, dodamy przyciski kontrolujące skalę wgranego modelu. Jak wiemy z poprzednich punktów tego rozdziału, Away3D akceptuje dwa rodzaje modeli zawierających animacje. Z tego powodu do panelu dodamy przycisk, który uruchomi dostępne w wybranym modelu sekwencje ruchu. Jeżeli użytkownik wybierze format modelu statycznego, to przycisk ten będzie wyłączony. Stwórz plik ModelsPanel.as i przepisz następujący kod źródłowy: package { import import import import import import import import
scaleLabel.x = 10; scaleLabel.y = 225; addChild(scaleLabel); var scaleLessButton:Button = new Button(); scaleLessButton.name = "scaleLess"; scaleLessButton.label = "-"; scaleLessButton.x = 15; scaleLessButton.y = 245; scaleLessButton.width = 30; scaleLessButton.enabled = false; addChild(scaleLessButton); scaleLessButton.addEventListener(MouseEvent.CLICK, buttonClick); var scaleMoreButton:Button = new Button(); scaleMoreButton.name = "scaleMore"; scaleMoreButton.label = "+"; scaleMoreButton.x = 55; scaleMoreButton.y = 245; scaleMoreButton.width = 30; scaleMoreButton.enabled = false; addChild(scaleMoreButton); scaleMoreButton.addEventListener(MouseEvent.CLICK, buttonClick); } private function materialChange(e:Event):void { dispatchEvent(new Event(e.target.value + 'Event')); } private function buttonClick(e:MouseEvent):void { dispatchEvent(new Event(e.target.name + 'Event')); } public function setAvailability(objectName:String, enabled:Boolean):void { if (getChildByName(objectName) is UIComponent) { (getChildByName(objectName) as UIComponent).enabled = enabled; } } public function setLabel(labelName:String,val:String):void { if (getChildByName(labelName) is Button) { (getChildByName(labelName) as Button).label = val; } }
252
Flash i ActionScript. Aplikacje 3D od podstaw public function draw(_width:Number, _height:Number, _color:uint = 0xF1F1F1, _alpha:int = 1):void { graphics.clear(); graphics.beginFill(_color,_alpha); graphics.drawRect(0, 0, _width, _height); graphics.endFill(); } } }
Mając gotowy plik ModelsPanel.as, możemy zająć się główną klasą tego przykładu. Przepisz następujący kod źródłowy do pliku ModelsExample.as, a następnie omówimy jego ważniejsze fragmenty. package { import import import import import import import import import import import import import import import import import import import import import import
public class ModelsExample extends Sprite { private var panel:ModelsPanel; private var view:View3D; private var model:ObjectContainer3D; private var mat:BitmapMaterial; private var modelReference:FileReference; private var textureReference:FileReference; private var autoTexture:Boolean = true; private var animations:AnimationData; public function ModelsExample():void
Rozdział 6. Modele i animacje { if (stage) init(); else addEventListener(Event.ADDED_TO_STAGE, init); } private function init(e:Event = null):void { stage.quality = StageQuality.LOW; stage.align = StageAlign.TOP_LEFT; stage.scaleMode = StageScaleMode.NO_SCALE; removeEventListener(Event.ADDED_TO_STAGE, init); stage.addEventListener(Event.RESIZE, onResize); view = new View3D(); addChild(view); addPanel(); onResize(); } private function addPanel():void { panel = new ModelsPanel(); addChild(panel); panel.addEventListener('modelSelectEvent', onPanelEvent); panel.addEventListener('selectTextureEvent', onPanelEvent); panel.addEventListener('loadModelEvent', onPanelEvent); panel.addEventListener('playAnimationEvent', onPanelEvent); panel.addEventListener('scaleLessEvent', onPanelEvent); panel.addEventListener('scaleMoreEvent', onPanelEvent); panel.addEventListener('WireframeMaterialEvent', onPanelEvent); panel.addEventListener('WireColorMaterialEvent', onPanelEvent); panel.addEventListener('BitmapMaterialEvent', onPanelEvent); } private function onPanelEvent(e:Event):void { var mesh:Mesh; switch(e.type) { case 'modelSelectEvent': { if (model && model.children.length > 0) { for each (var child:Mesh in model.children) { model.removeChild(child); } } mat = null; panel.setAvailability('selectTexture', false); panel.setAvailability('loadModel', false); panel.setAvailability('materialSelect', false); panel.setAvailability('playAnimation', false); panel.setAvailability('scaleMore', false); panel.setAvailability('scaleLess', false);
253
254
Flash i ActionScript. Aplikacje 3D od podstaw
modelReference = new FileReference(); modelReference.addEventListener(Event.SELECT, onModelSelected); modelReference.browse( [ new FileFilter('3DS Max (*.3ds)', '*.3ds'), new FileFilter('Wavefront (*.obj)', '*.obj'), new FileFilter('3DS Max ASCII (*.ase)', '*.ase'), new FileFilter('Away3D (*.awd)', '*.awd'), new FileFilter('Collada (*.dae)', '*.dae'), new FileFilter('Quake 2 (*.md2)', '*.md2') ]); break; } case 'selectTextureEvent': { textureReference = new FileReference(); textureReference.addEventListener (Event.SELECT, onTextureSelected); textureReference.browse( [ new FileFilter('*.jpg', '*.jpg'), new FileFilter('*.bmp', '*.bmp'), new FileFilter('*.png', '*.png'), new FileFilter('*.tga', '*.tga') ]); break; } case 'loadModelEvent': { modelReference.addEventListener (Event.COMPLETE, onModelLoaded); modelReference.addEventListener (IOErrorEvent.IO_ERROR, onLoadError); modelReference.load(); break; } case 'playAnimationEvent': { if (animations && animations.animator.isPlaying) { panel.setLabel('playAnimation','Włącz animację'); animations.animator.gotoAndStop(0); } else { animations = (modelReference.type.toLowerCase() == '.dae') ? model.animationLibrary.getAnimation('default') : model. children[0].animationLibrary.getAnimation('default'); if (animations) {
Rozdział 6. Modele i animacje panel.setLabel('playAnimation','Wyłącz animację'); animations.animator.play(); } } break; } case 'scaleLessEvent': { if (model.scaleX > 1) { model.scaleX--; model.scaleY--; model.scaleZ--; } break; } case 'scaleMoreEvent': { model.scaleX++; model.scaleY++; model.scaleZ++; break; } case 'WireframeMaterialEvent': { for each(mesh in model.children) { mesh.material = new WireframeMaterial(0x000000); } break; } case 'WireColorMaterialEvent': { for each(mesh in model.children) { mesh.material = new WireColorMaterial(0xFF0000, { wireColor:0x000000 } ); } break; } case 'BitmapMaterialEvent': { for each(mesh in model.children) { mesh.material = mat; } break; } default:break; } } public function onModelSelected(e:Event):void
255
256
Flash i ActionScript. Aplikacje 3D od podstaw { autoTexture = true; panel.setAvailability('selectTexture', true); panel.setAvailability('loadModel', true); } public function onTextureSelected(e:Event):void { autoTexture = false; textureReference.addEventListener(Event.COMPLETE, onTextureLoaded); textureReference.addEventListener(IOErrorEvent.IO_ERROR, onLoadError); textureReference.load(); } private function onLoadError(e:IOErrorEvent):void { trace(e); } private function loadModel(e:MouseEvent):void { modelReference.addEventListener(Event.COMPLETE, onModelLoaded); modelReference.addEventListener(IOErrorEvent.IO_ERROR, onLoadError); modelReference.load(); } private function onModelLoaded(e:Event):void { switch(modelReference.type.toLowerCase()) { case '.3ds': model = Max3DS.parse(modelReference.data, { autoLoadTextures: (autoTexture ? true : false) } ) as ObjectContainer3D; break; case '.obj': model = Obj.parse(modelReference.data, { autoLoadTextures: (autoTexture ? true : false) } ) as ObjectContainer3D; break; case '.ase': var ase:Mesh = Ase.parse(modelReference.data, { scale:.01 } ); model = new ObjectContainer3D(); model.addChild(ase); break; case '.awd': var awd:Mesh = AWData.parse(modelReference.data) as Mesh; model = new ObjectContainer3D(); model.addChild(awd); break; case '.dae':
Rozdział 6. Modele i animacje
257
model = Collada.parse(modelReference.data, { autoLoadTextures: (autoTexture ? true : false) } ); panel.setAvailability('playAnimation', true); break; case '.md2': var md2:Mesh = Md2.parse(modelReference.data, { scale:0.01 } ); model = new ObjectContainer3D(); model.addChild(md2); panel.setAvailability('playAnimation', true); break; } panel.setAvailability('selectTexture', false); panel.setAvailability('loadModel', false); panel.setAvailability('materialSelect', true); panel.setAvailability('scaleMore', true); panel.setAvailability('scaleLess', true); if (!autoTexture) { for each(var mesh:Mesh in model.children) { mesh.material = mat; } } view.scene.addChild(model); addEventListener(Event.ENTER_FRAME, onEnterFrame); } private function onTextureLoaded(e:Event):void { var imgLoader:Loader = new Loader(); imgLoader.loadBytes(textureReference.data); imgLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, imgBytesLoaded); } private function imgBytesLoaded(e:Event):void { mat = new BitmapMaterial(Bitmap(e.target.content).bitmapData); } private function onResize(e:Event = null):void { panel.draw(200, stage.stageHeight); view.x = panel.width + (stage.stageWidth - panel.width) *.5; view.y = stage.stageHeight * .5; } private function onEnterFrame(e:Event):void { if (model) {
258
Flash i ActionScript. Aplikacje 3D od podstaw model.rotationY--; view.render(); } } } }
Ponieważ celem tej aplikacji jest wyświetlenie modelu na scenie, musieliśmy dodać między innymi klasy View3D, Loader3D, Mesh oraz kilka klas materiałów. Modele o rozszerzeniach MD2 oraz DAE uwzględniają również animacje, dlatego do ich odczytania potrzebowaliśmy klasy AnimationData. Ze standardowych klas ActionScript 3.0 zaimportowaliśmy dodatkowo klasy nadające ustawienia obiektowi stage, tak aby wyświetlane elementy znajdowały się w odpowiednim miejscu i płynnie funkcjonowały. W klasie ModelsExample zdefiniowaliśmy kilka obiektów potrzebnych do pobrania i prezentacji modeli. W pierwszej kolejności trzeba wybrany plik załadować, dlatego zdefiniowaliśmy obiekt modelReference, który posłużył do tego celu. Aby dać użytkownikowi możliwość nałożenia na model konkretnej tekstury, dodaliśmy również kolejny obiekt klasy FileReference o nazwie textureReference. Niektóre modele mają wewnątrz swoich danych odwołania do konkretnych plików graficznych, dlatego nie zawsze będzie konieczne wgrywanie dodatkowych. W sytuacji gdy użytkownik zdecyduje się na użycie konkretnej tekstury, stosując zmienną autoTexture, zmienimy wartość właściwości autoLoadTextures na false. W przeciwnym razie — gdy nie wybierze nowej tekstury — wartość ta będzie ustawiona standardowo jako true i wymusi pobieranie ewentualnie zapisanych wewnątrz tekstur. Aby przedstawić model pokryty wybranym przez użytkownika plikiem graficznym, zdefiniowaliśmy obiekt klasy BitmapMaterial o nazwie mat. Jeżeli wybrany model będzie obsługiwał animacje, to do ich włączenia posłuży obiekt animations klasy AnimationData. Sposób przechowywania pobranego modelu jest taki sam jak w poprzednim przykładzie, ale teraz zostanie on dodany do zawartości sceny. Główne ustawienia aplikacji oraz jej początkowy stan zapisaliśmy w metodzie init(). W pierwszej kolejności nadaliśmy nowe ustawienia obiektowi stage, a następnie stworzyliśmy widok Away3D oraz wywołaliśmy metody addPanel() i onResize(). W metodzie addPanel() stworzyliśmy obiekt klasy ModelsPanel i dodaliśmy go do listy wyświetlanych obiektów. panel = new ModelsPanel(); addChild(panel);
Rozdział 6. Modele i animacje
259
W dalszej części tej metody dodaliśmy detektory zdarzenia wciśnięcia przycisków umieszczonych w panelu użytkownika. Niezależnie od tego, które zdarzenie wystąpiło, wywoływana jest jedna metoda onPanelEvent(). panel.addEventListener('modelSelectEvent', onPanelEvent); panel.addEventListener('selectTextureEvent', onPanelEvent); panel.addEventListener('loadModelEvent', onPanelEvent); panel.addEventListener('playAnimationEvent', onPanelEvent); panel.addEventListener('scaleLessEvent', onPanelEvent); panel.addEventListener('scaleMoreEvent', onPanelEvent); panel.addEventListener('WireframeMaterialEvent', onPanelEvent); panel.addEventListener('WireColorMaterialEvent', onPanelEvent); panel.addEventListener('BitmapMaterialEvent', onPanelEvent);
Ponieważ metoda onPanelEvent() uruchamiana jest przez różne zdarzenia nadesłane z panelu użytkownika, musieliśmy zastosować w jej ciele instrukcję warunkową switch(). W przypadku przechwycenia zdarzenia typu modelSelectEvent w pierwszej kolejności usuwamy zawartość kontenera model, ponieważ przy jednym uruchomieniu aplikacji użytkownik może przypadkowo kilkakrotnie załadować modele. if (model && model.children.length > 0) { for each (var child:Mesh in model.children) { model.removeChild(child); } }
Po wyczyszczeniu zawartości kontenera przypisaliśmy wartość null właściwości mat i stosując metodę setAvailability(), wyłączyliśmy niepotrzebne na tym etapie przyciski w panelu użytkownika. mat = null; panel.setAvailability('selectTexture', false); panel.setAvailability('loadModel', false); panel.setAvailability('materialSelect', false); panel.setAvailability('playAnimation', false); panel.setAvailability('scaleMore', false); panel.setAvailability('scaleLess', false);
W dalszej części kodu dla warunku modelSelectEvent stworzyliśmy nowy obiekt modelReference, który służy do uruchomienia okna dialogowego wyboru modelu. W metodzie browse() dodaliśmy kilka obiektów klasy FileFilter, ograniczając rodzaje akceptowanych plików do stosowanych w Away3D typów modeli. Dzięki temu unikniemy problemów wywołanych załadowaniem danych złego formatu. Do obiektu modelReference dodaliśmy detektor zdarzenia Event.SELECT, który po wyborze konkretnego modelu uruchomi metodę onModelSelected().
260
Flash i ActionScript. Aplikacje 3D od podstaw modelReference = new FileReference(); modelReference.addEventListener(Event.SELECT, onModelSelected); modelReference.browse( [ new FileFilter('3DS Max (*.3ds)', '*.3ds'), new FileFilter('Wavefront (*.obj)', '*.obj'), new FileFilter('3DS Max ASCII (*.ase)', '*.ase'), new FileFilter('Away3D (*.awd)', '*.awd'), new FileFilter('Collada (*.dae)', '*.dae'), new FileFilter('Quake 2 (*.md2)', '*.md2') ]);
Celem metody onModelSelected() jest włączenie przycisków do wyboru tekstury oraz uruchomienia procesu ładowania modelu. Dodatkowo jeśli jest to kolejny pobierany model, na którym nie planujemy stosowania ręcznie wybranej tekstury, przypisujemy zmiennej autoTexture wartość true. Dzięki temu wartość właściwości autoLoadTextures będzie równa true i klasa ładująca sama pobierze tekstury zapisane w danych modelu. Kolejnym warunkiem zapisanym w metodzie onPanelEvent() jest selectTextureEvent, w którego bloku kodu stworzyliśmy nowy obiekt klasy FileReference o nazwie textureReference. Działanie tego obiektu jest podobne do modelReference, ale tutaj ładujemy określone w metodzie browse() rodzaje plików graficznych, które posłużą jako tekstura dla wybranego wcześniej modelu. Do obiektu textureReference dodaliśmy detektor zdarzenia Event.SELECT, który po wyborze konkretnego pliku uruchomi metodę onTextureSelected(). textureReference = new FileReference(); textureReference.addEventListener(Event.SELECT, onTextureSelected); textureReference.browse( [ new FileFilter('*.jpg', '*.jpg'), new FileFilter('*.bmp', '*.bmp'), new FileFilter('*.png', '*.png') ]);
Wywołanie metody onTextureSelected() spowoduje uruchomienie metody load() na obiekcie textureReference, która rozpocznie proces pobierania wybranej tekstury. Aby kontrolować efekt jej wywołania, zapisaliśmy również detektory zdarzeń Event.COMPLETE, gdy skończy pobieranie, oraz IOErrorEvent.IO_ERROR w razie wystąpienia błędu. Ponieważ w takim przypadku użytkownik zdecydował się sam wybrać teksturę, zmiennej autoTexture przypisaliśmy wartość false. Po pobraniu danych tekstury wywołana zostaje metoda onTextureLoaded(), w której zawartość textureReference.data jest dalej przetwarzana. Zanim tekstura będzie nadawała się do ułożenia na modelu, musieliśmy stworzyć obiekt klasy Loader,
Rozdział 6. Modele i animacje
261
w którym wywołaliśmy metodę loadBytes(), podając w jej argumencie texture Reference.data. Metoda ta pobiera dane z tablicy ByteArray źródła, potrzebne do stworzenia obiektu BitmapData. var imgLoader:Loader = new Loader(); imgLoader.loadBytes(textureReference.data); imgLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, imgBytesLoaded);
Po wywołaniu metody loadBytes() obiektu imgLoader zapisaliśmy odwołanie do metody imgBytesLoaded(), która uruchamiana jest po poprawnym i kompletnym wczytaniu danych binarnych z obiektu textureReference. Wewnątrz metody imgBytesLoaded() zapisaliśmy tworzenie obiektu o nazwie mat, zawierającego pobraną teksturę. Obiekt ten jest typu BitmapMaterial, więc w argumencie konstruktora musieliśmy podać obiekt klasy BitmapData. Ponieważ zawartość obiektu imgLoader jest typu Bitmap, wystarczyło jedynie użyć właściwości bitmapData, aby uzyskać dane w postaci obiektu klasy BitmapData. mat = new BitmapMaterial(Bitmap(e.target.content).bitmapData);
Po wybraniu modelu oraz ewentualnej tekstury przycisk Wczytaj model staje się dostępny, a jego wciśnięcie wywołuje zdarzenie typu loadModelEvent. W instrukcji warunkowej switch(), zawartej w metodzie onPanelEvent(), w przypadku wystąpienia tego zdarzenia dodaliśmy dwa detektory zdarzeń określające, czy operacja pobierania danych modelu zakończyła się sukcesem, czy też wystąpił błąd typu ioError. Następnie wywołaliśmy metodę load() pobierającą dane modelu. W metodzie onModelLoaded() w zależności od wybranego rodzaju modelu wewnątrz instrukcji switch zastosowaliśmy klasy przetwarzające pobrane dane tak, aby były one użyteczne do stworzenia nowego obiektu i dodania go do sceny. Operacje zawarte w instrukcji warunkowej omówimy w kolejnych podpunktach, ale poza nią w ciele metody onModelLoaded() zapisaliśmy również inne działania. Aby zapobiec ewentualnym błędom, wyłączyliśmy przyciski Wybierz teksturę oraz Wczytaj model, a włączyliśmy te, które odpowiadają za zmianę materiału oraz zwiększenie i zmniejszenie skali modelu. panel.setAvailability('selectTexture', false); panel.setAvailability('loadModel', false); panel.setAvailability('materialSelect', true); panel.setAvailability('scaleMore', true); panel.setAvailability('scaleLess', true);
Dodatkowo w dwóch warunkach instrukcji switch, jeżeli model jest formatu MD2 bądź DAE, włączony zostaje również przycisk Włącz animację dzięki następującej linijce kodu: panel.setAvailability('playAnimation', true);
262
Flash i ActionScript. Aplikacje 3D od podstaw
Jeżeli wartość zmiennej autoTexture jest równa false, to w pętli for() każdemu elementowi pobranego modelu nadajemy wgraną teksturę. if (!autoTexture) { for each(var mesh:Mesh in model.children) { mesh.material = mat; } }
Na końcu tej metody dodaliśmy obiekt model do sceny. view.scene.addChild(model);
Przyciski - oraz + umieszczone w panelu użytkownika odpowiadają za regulowanie skali wgranego modelu. W zależności od pierwotnych wymiarów modelu, posługując się tymi przyciskami, można odpowiednio zmniejszyć lub zwiększyć trójwymiarowy obiekt. Proces zmiany skali wgranego modelu zapisano w metodzie onPanelEvent() jako dwa osobne warunki. Przycisk - wywołuje zdarzenie typu scaleLessEvent. if (model.scaleX > 1) { model.scaleX--; model.scaleY--; model.scaleZ--; }
Przycisk + wywołuje zdarzenie typu scaleMoreEvent. model.scaleX++; model.scaleY++; model.scaleZ++;
Jak wspomnieliśmy, w panelu użytkownika dodaliśmy również możliwość zmiany materiału wgranego modelu. Do dyspozycji mamy następujące rodzaje: Wireframe Material, WireColorMaterial oraz BitmapMaterial. W zależności od wybranej opcji obiektu typu ComboBox w metodzie onPanelEvent() uruchamiany jest odpowiedni blok kodu, w którym zapisaliśmy przypisanie wybranego materiału wszystkim elementom wgranego modelu. case 'WireframeMaterialEvent': { for each(mesh in model.children) { mesh.material = new WireframeMaterial(0x000000); } break; } case 'WireColorMaterialEvent':
Rozdział 6. Modele i animacje
263
{ for each(mesh in model.children) { mesh.material = new WireColorMaterial(0xFF0000, { wireColor: 0x000000 } ); } break; } case 'BitmapMaterialEvent': { for each(mesh in model.children) { mesh.material = mat; } break; }
3DS W przykładowej aplikacji tego podrozdziału skorzystaliśmy z klasy Max3DS, aby wyświetlić pobrany model 3DS. W przypadku użycia modelu tego rodzaju w instrukcji warunkowej switch wewnątrz metody onModelLoaded() zastosowaliśmy następujący kod: model = Max3DS.parse(modelReference.data, { autoLoadTextures:(autoTexture ? true : false) } ) as ObjectContainer3D;
Stosując metodę parse() klasy Max3DS na danych pobranych w obiekcie modelReference, utworzyliśmy obiekt typu ObjectContainer3D o nazwie model. Dodatkowo w drugim argumencie metody parse() sprawdzamy wartość zmiennej autoTexture. W zależności od wyniku właściwości autoLoadTextures przypisujemy wartości true bądź false. W niektórych modelach, nie tylko formatu 3DS, ścieżki do tekstur mogą być nieprecyzyjne. Dzieje się tak, gdy twórca modelu określi lokalizację tekstur bezpośrednio w swoich zasobach, na przykład w folderze, który w naszym systemie nie istnieje. W takich sytuacjach, jeżeli format modelu umożliwia edycję w edytorze tekstu, należy poszukać takiej ścieżki i dostosować ją do naszych ustawień. Sytuacja jest gorsza, jeżeli nie można edytować pliku modelu lub nie jesteśmy w stanie znaleźć odpowiedniego wpisu. Dlatego warto stosować właściwość autoLoadTextures i ręcznie załączać tekstury, aby uniknąć sytuacji, w których pojawią się sześciany z komunikatami o wystąpieniu błędu. Na rysunku 6.22 przedstawiono sytuację, w której ścieżki do modelu nie odpowiadają naszym ustawieniom i nie pobrano ręcznie tekstury.
264
Flash i ActionScript. Aplikacje 3D od podstaw
Rysunek 6.22.
Komunikat błędu wgrywania tekstur wybranego modelu
Efekt zastosowania klasy Max3DS w przykładzie ModelsExample przedstawiono na rysunku 6.23. Rysunek 6.23.
Wgrany model w formacie 3DS
Istnieje jeszcze inny sposób ładowania modeli 3DS, polegający na stosowaniu klasy Loader3D oraz metody load() klasy Max3DS. Kod źródłowy dodawania modelu taką metodą wyglądałby następująco:
Rozdział 6. Modele i animacje
265
private function loadModel():void { loader = Max3DS.load('../../resources/models/max3ds/spaceship/ spaceship.3ds'); loader.addOnSuccess(addModel); } private function addModel(e:Loader3DEvent):void { model = loader.handle as Mesh; model.material = new BitmapFileMaterial('../../resources/models/ max3ds/spaceship/ spaceship.jpg'); view.scene.addChild(model); }
W pierwszej kolejności należy zaimportować odpowiednie klasy, aby powyższe metody działały poprawnie. W tym przypadku dodaliśmy klasy: Loader3D, Loader3D Event, Max3DS, Mesh oraz BitmapFileMaterial. Do pobrania modelu zastosowano obiekt klasy Loader3D o nazwie loader oraz metodę load() klasy Max3DS, w której jako argument podaliśmy ścieżkę do pliku. Dopisaliśmy również detektor zdarzenia zakończenia pobierania, aby uruchomić metodę addModel(). Wewnątrz metody addModel() pobraną zawartość obiektu loader zapisaliśmy jako obiekt klasy Mesh o nazwie model. Do stworzonego obiektu dodaliśmy materiał, a następnie umieściliśmy go na scenie. Tabele 6.3 i 6.4 zawierają właściwości oraz metody obiektu klasy Max3DS. Tabela 6.3. Właściwości klasy Max3DS
Nazwa
Rodzaj
Wartość domyślna
Opis
meshDataList
Array
Tablica obiektów typu MeshData przechowujących przetworzone dane siatki modelu 3DS
scaling
Number
Określa skalę obiektu względem wszystkich osi
Tabela 6.4. Metody klasy Max3DS
Nazwa
Opis
Max3DS(init:Object = null)
Konstruktor
load(url:String, init:Object = null)
Ładuje i przetwarza plik .3ds do obiektu Loader3D
parse(data:*, init:Object = null)
Tworzy obiekt typu ObjectContainer3D z danych binarnych pliku .3ds
266
Flash i ActionScript. Aplikacje 3D od podstaw
OBJ Do wyświetlenia modelu OBJ w naszym przykładzie użyliśmy klasy Obj. W przypadku użycia modelu tego rodzaju w instrukcji warunkowej switch wewnątrz metody onModelLoaded() zastosowaliśmy następujący kod: model = Obj.parse(modelReference.data, { autoLoadTextures:(autoTexture ? true : false) } ) as ObjectContainer3D;
Stosując metodę parse() klasy Obj na danych pobranych w obiekcie modelReference, utworzyliśmy obiekt typu ObjectContainer3D o nazwie model. Dodatkowo w drugim argumencie metody parse() sprawdzamy wartość właściwości autoTexture. Jeżeli wartość autoTexture równa jest true, to tekstury będą pobierane automatycznie z danych zawartych bezpośrednio w modelu. Efekt zastosowania klasy Obj w przykładzie ModelsExample przedstawiono na rysunku 6.24. Rysunek 6.24.
Wgrany model w formacie OBJ
Inna metoda pobierania modelu o rozszerzeniu OBJ polega na zastosowaniu klasy Loader3D oraz metody load() klasy Obj. Kod źródłowy w tym przypadku wyglądałby następująco: private function loadModel():void { loader = Obj.load('../../resources/models/mObj/tf/Pyro/pyro.dae');
Rozdział 6. Modele i animacje
267
loader.addOnSuccess(addModel); } private function addModel(e:Loader3DEvent):void { model = loader.handle as Mesh; model.material = new BitmapFileMaterial('../../resources/models/ mObj/tf/Pyro/pyro.jpg'); view.scene.addChild(model); }
Do poprawnego działania tych metod niezbędne są klasy: Loader3D, Loader3DEvent, Obj, Mesh oraz BitmapFileMaterial. Do pobrania modelu zastosowano obiekt klasy Loader3D o nazwie loader oraz metodę load() klasy Obj, w której jako argument podaliśmy ścieżkę do pliku modelu. Dopisaliśmy również metodę addOnSuccess(), która wywołuje metodę addModel(), w chwili gdy model zostanie w całości pobrany. Działanie metody addOnSuccess() jest takie samo jak w przypadku zastosowania detektora zdarzenia Loader3DEvent.LOAD_SUCCESS. Wewnątrz metody addModel() pobraną zawartość obiektu loader zapisaliśmy jako obiekt klasy Mesh o nazwie model. Następnie dodaliśmy pobrany materiał i umieściliśmy obiekt na scenie. Tabele 6.5 i 6.6 zawierają właściwości oraz metody obiektu klasy Obj. Tabela 6.5. Właściwości klasy Obj
Nazwa
Rodzaj
Wartość domyślna Opis
scaling
Number
Określa skalę obiektu względem wszystkich osi
useGroups
Boolean
Definiuje, czy używać tagów grup do hierarchii obiektu
useMtl
Boolean
Definiuje, czy użyć pliku mtl do określenia tekstur obiektu
Tabela 6.6. Metody klasy Obj
Nazwa
Opis
Obj(init:Object = null)
Konstruktor
load(url:String, init:Object = null)
Ładuje i przetwarza plik .obj do obiektu Loader3D
parse(data:*, init:Object = null)
Tworzy obiekt typu Object3D z danych binarnych pliku .obj
268
Flash i ActionScript. Aplikacje 3D od podstaw
ASE W bibliotece Away3D modele w formacie ASE obsługuje się za pomocą klasy Ase. W przypadku użycia modelu tego rodzaju w instrukcji warunkowej switch wewnątrz metody onModelLoaded() zastosowaliśmy następujący kod: var ase:Mesh = Ase.parse(modelReference.data, { scale:.01 } ); model = new ObjectContainer3D(); model.addChild(ase);
Stosując metodę parse() klasy Ase na danych pobranych w obiekcie modelReference, utworzyliśmy obiekt klasy Mesh o nazwie ase. Z uwagi na to, że model może mieć duże wymiary, dodaliśmy właściwość scale z nową wartością równą 0.01. Utworzony obiekt ase dodaliśmy do kontenera ObjectContainer3D o nazwie model. Efekt zastosowania klasy Ase w przykładzie ModelsExample przedstawiono na rysunku 6.25. Rysunek 6.25.
Wgrany model w formacie ASE
Modele ASE można również pobrać, stosując klasę Loader3D oraz metody load() klasy Ase. Dodawanie modelu tym sposobem przedstawiono w następującym kodzie źródłowym: private function loadModel():void {
Rozdział 6. Modele i animacje
269
loader = Ase.load('../../resources/models/ase/tf/spy/spy.ase'); loader.addOnSuccess(addModel); } private function addModel(e:Loader3DEvent):void { model = loader.handle as Mesh; view.scene.addChild(model); }
W obu tych metodach skorzystaliśmy z obiektów, których klasy należy wcześniej zaimportować, a są nimi: Loader3D, Loader3DEvent, Ase oraz Mesh. Do pobrania modelu zastosowano obiekt klasy Loader3D o nazwie loader oraz metodę load() klasy Ase, w której jako argument podaliśmy ścieżkę do pliku. Dopisaliśmy również detektor zdarzenia zakończenia pobierania, aby uruchomić metodę addModel(). Wewnątrz tej metody pobraną zawartość obiektu loader zapisaliśmy jako obiekt klasy Mesh o nazwie model i umieściliśmy go na scenie. Tabele 6.7 i 6.8 zawierają właściwości oraz metody obiektu klasy Ase. Tabela 6.7. Właściwości klasy Ase
Nazwa
Rodzaj
Wartość domyślna
Opis
scaling
Number
1
Określa skalę obiektu względem wszystkich osi
Tabela 6.8. Metody klasy Ase
Nazwa
Opis
Ase(init:Object = null)
Konstruktor
load(url:String, init:Object = null)
Ładuje i przetwarza plik .ase do obiektu Loader3D
parse(data:*, init:Object = null)
Tworzy obiekt typu Mesh z danych pliku .ase
DAE Modele w formacie DAE można zastosować w aplikacji poprzez klasę Collada. W przypadku użycia modelu tego rodzaju w instrukcji warunkowej switch wewnątrz metody onModelLoaded() zastosowaliśmy następujący kod: model = Collada.parse(modelReference.data, { autoLoadTextures:(autoTexture ? true : false) } );
Dane umieszczone w obiekcie modelReference zastosowaliśmy jako pierwszy argument dla metody parse() klasy Collada. Na ich podstawie utworzyliśmy obiekt typu ObjectContainer3D o nazwie model. Dodatkowo w drugim argumencie tej
270
Flash i ActionScript. Aplikacje 3D od podstaw
metody sprawdzamy wartość właściwości autoTexture. W zależności od tego, czy ręcznie dodamy teksturę, czy nie, wartość właściwości autoLoadTextures będzie równa true lub false. Efekt zastosowania klasy Collada w przykładzie ModelsExample przedstawiono na rysunku 6.26. Rysunek 6.26.
Wgrany model w formacie DAE
Drugi sposób pobierania modelu o rozszerzeniu DAE polega na zastosowaniu klasy Loader3D oraz metody load() klasy Collada. Zastosowanie tych klas przedstawiono w następującym kodzie źródłowym: private function loadModel():void { loader = Collada.load('../../resources/models/dae/tf/scout/scout.dae'); loader.addOnSuccess(addModel); } private function addModel(e:Loader3DEvent):void { model = loader.handle as Mesh; model.material = new BitmapFileMaterial('../../resources/models/dae/tf/scaut/scaut.jpg'); view.scene.addChild(model); }
Do poprawnego działania tych metod niezbędne są klasy: Loader3D, Loader3DEvent, Md2, Mesh oraz BitmapFileMaterial. Do pobrania modelu zastosowano obiekt klasy Loader3D o nazwie loader oraz metodę load() klasy Collada, w której jako argument
Rozdział 6. Modele i animacje
271
podaliśmy ścieżkę do pliku. Dopisaliśmy również detektor zdarzenia zakończenia pobierania, aby uruchomić metodę addModel(). Wewnątrz metody addModel() pobraną zawartość obiektu loader zapisaliśmy jako obiekt klasy Mesh o nazwie model. Następnie dodaliśmy pobrany materiał i umieściliśmy obiekt na scenie. Tabele 6.9 i 6.10 zawierają właściwości oraz metody obiektu klasy Collada. Tabela 6.9. Właściwości klasy Collada
Nazwa
Rodzaj
Wartość domyślna
Opis
scaling
Number
1
Określa skalę obiektu względem wszystkich osi
shading
Boolean
false
Definiuje, czy używać materiałów cieniowania, gdy wykorzystane są materiały koloru
Tabela 6.10. Metody klasy Collada
Nazwa
Opis
Collada(init:Object = null)
Konstruktor
load(url:String, init:Object = null)
Ładuje i przetwarza plik .dae do obiektu Loader3D
parse(data:*, init:Object = null)
Tworzy obiekt typu ObjectContainer3D z danych XML pliku .dae
MD2 W przykładowej aplikacji tego podrozdziału skorzystaliśmy z klasy Md2, aby wyświetlić pobrany model MD2. W przypadku użycia modelu tego rodzaju w instrukcji warunkowej switch wewnątrz metody onModelLoaded() zastosowaliśmy następujący kod: var md2:Mesh = Md2.parse(modelReference.data, { scale:0.01 } ); model = new ObjectContainer3D(); model.addChild(md2);
Podobnie jak w przypadku formatu ASE, tutaj również stworzyliśmy dwa obiekty. Pierwszemu o nazwie md2 przypisaliśmy zawartość obiektu modelReference. Do tego celu posłużyliśmy się metodą parse() z klasy Md2. Z uwagi na duże wymiary modeli w tym formacie dodatkowo zmieniliśmy skalę obiektu md2 na 0.01.
272
Flash i ActionScript. Aplikacje 3D od podstaw
Gotowy obiekt klasy Mesh dodaliśmy do zawartości kontenera klasy ObjectCon tainer3D. Efekt zastosowania klasy Md2 w przykładzie ModelsExample przedstawiono na rysunku 6.27. Rysunek 6.27.
Wgrany model w formacie MD2
Drugi sposób pobierania modelu o rozszerzeniu MD2 polega na zastosowaniu metody load() klasy Md2 oraz przypisaniu pobranej zawartości obiektowi klasy Loader3D. Kod źródłowy użycia tego sposobu wyglądałby następująco: private function loadModel():void { loader = Md2.load('../../resources/models/md2/ogro/tris.md2'); loader.addOnSuccess(addModel); } private function addModel(e:Loader3DEvent):void { model = loader.handle as Mesh; model.material = new BitmapFileMaterial('../../resources/models/md2/ogro/igdosh.jpg'); view.scene.addChild(model); }
Żeby ten kod był użyteczny, należy w pierwszej kolejności zaimportować odpowiednie klasy, w tym przypadku są nimi: Loader3D, Loader3DEvent, Md2, Mesh oraz BitmapFileMaterial.
Rozdział 6. Modele i animacje
273
Do pobrania modelu zastosowano obiekt klasy Loader3D o nazwie loader oraz metodę load() klasy Md2, w której jako argument podaliśmy ścieżkę do pliku. Dopisaliśmy również detektor zdarzenia zakończenia pobierania, aby uruchomić metodę addModel(). Wewnątrz metody addModel() pobraną zawartość obiektu loader zapisaliśmy jako obiekt klasy Mesh o nazwie model. Następnie dodaliśmy pobrany materiał i umieściliśmy obiekt na scenie. Tabele 6.11 i 6.12 zawierają właściwości oraz metody obiektu klasy Md2. Tabela 6.11. Właściwości klasy Md2
Nazwa
Rodzaj
Wartość domyślna
Opis
scaling
Number
1
Określa skalę obiektu względem wszystkich osi
fps
Number
false
Definiuje, czy używać materiałów cieniowania, gdy wykorzystane są materiały koloru
pcxConvert
String
"jpg"
Określa rozszerzenie dla plików .pc7
Tabela 6.12. Metody klasy Md2
Nazwa
Opis
Md2(init:Object = null)
Konstruktor
load(url:String, init:Object = null)
Ładuje i przetwarza plik .md2 do obiektu Loader3D
parse(data:*, init:Object = null)
Tworzy obiekt typu Mesh z danych binarnych pliku .md2
AWD Z modeli zapisanych w formacie AWD można skorzystać dzięki klasie AWData. W przypadku użycia modelu tego rodzaju w instrukcji warunkowej switch wewnątrz metody onModelLoaded() zastosowaliśmy następujący kod: var awd:Mesh = AWData.parse(modelReference.data) as Mesh; model = new ObjectContainer3D(); model.addChild(awd);
Stosując metodę parse() klasy AWData, stworzyliśmy obiekt klasy Mesh o nazwie awd, a następnie dodaliśmy go do kontenera ObjectContainer3D o nazwie model. Efekt zastosowania klasy AWData w przykładzie ModelsExample przedstawiono na rysunku 6.28.
274
Flash i ActionScript. Aplikacje 3D od podstaw
Rysunek 6.28.
Wgrany model w formacie AWD
Alternatywnym sposobem na pobranie modelu typu AWD i korzystanie z niego w aplikacji jest zastosowanie klasy Loader3D oraz metody load() klasy AWData. Kod źródłowy użycia tego sposobu wyglądałby następująco: private function loadModel():void { loader = AWData.load('../../resources/models/awd/tf/heavy/Heavy.awd'); loader.addOnSuccess(addModel); } private function addModel(e:Loader3DEvent):void { var mat:BitmapFileMaterial = new BitmapFileMaterial('../../resources/models/awd/tf/heavy/images/aw_0.jpg'); model = loader.handle as Mesh; model.material = mat; view.scene.addChild(model); }
Żeby ten kod był użyteczny, należy w pierwszej kolejności zaimportować odpowiednie klasy, w tym przypadku są nimi: Loader3D, Loader3DEvent, AWData, Mesh oraz BitmapFileMaterial. Do pobrania modelu zastosowano obiekt klasy Loader3D o nazwie loader oraz metodę load() klasy AWData, w której jako argument podaliśmy ścieżkę do pliku. Dopisaliśmy również detektor zdarzenia zakończenia pobierania, aby uruchomić metodę addModel(). Wewnątrz metody addModel() pobraną zawartość obiektu loader zapisaliśmy jako obiekt klasy Mesh o nazwie model. Następnie dodaliśmy pobrany materiał i umieściliśmy obiekt na scenie. Tabele 6.13 i 6.14 zawierają właściwości oraz metody obiektu klasy AWData.
Rozdział 6. Modele i animacje
275
Tabela 6.13. Właściwości klasy AWData
Nazwa
Rodzaj
Opis
customPath
String
Określa ścieżkę do zasobów nieokreślonych wewnątrz pliku modelu
pathToSources
String
Ustala niestandardową ścieżkę do źródła zasobów. Wartość tej właściwości zastępuje standardowe odwołanie do katalogu images
url
String
Określa ścieżkę do pliku modelu
Tabela 6.14. Metody klasy AWData
Nazwa
Opis
AWData(init:Object = null)
Konstruktor
load(url:String, init:Object = null)
Ładuje i przetwarza plik .awd do obiektu Loader3D
parse(data:*, init:Object = null)
Tworzy obiekt typu Object3D z danych binarnych pliku .awd
Stosowanie animacji modeli W przykładzie pobierania modeli panel użytkownika zawiera przycisk Włącz animacje, który aktywny jest jedynie wtedy, gdy załadowany model jest formatu MD2 lub DAE. Kliknięcie tego przycisku powoduje włączenie dostępnych w modelu animacji. W poprzednim podrozdziale nie omówiliśmy tego, jak animacje są uruchamiane, zrobimy to teraz przy okazji omawiania klas służących do zarządzania animacjami. W bibliotece Away3D klasy: AnimationData, AnimationDataType, AnimationLibrary, Animator oraz AnimatorEvent służą do zarządzania animacjami zapisanymi w modelach typu MD2 oraz DAE. Nie tworzą one wzajemnych alternatyw, tylko w połączeniu pozwalają wywołać konkretną sekwencję ruchu.
AnimationData i AnimationDataType AnimationData Klasa AnimationData jest głównym składnikiem zarządzania animacjami. Zawiera ona w sobie wszystkie potrzebne dane wybranej sekwencji oraz odwołanie do obiektu klasy Animator, który kontroluje cały proces odtwarzania. Właściwości
276
Flash i ActionScript. Aplikacje 3D od podstaw
oraz metody, które są dostępne w klasie AnimationData, zostały opisane w tabelach 6.15 i 6.16. Tabela 6.15. Właściwości klasy AnimationData
Nazwa
Rodzaj
Wartość domyślna Opis
animationType
String
1
animator
Animator
Odwołanie do obiektu klasy Animator tworzonego wraz z obiektem klasy AnimationData
channel
Dictionary
Obiekt typu Dictionary z nazwami kanałów sekwencji w animacji typu skinAnimation
end
Number
frames
Vector.
Obiekt tablicy zawierający klatki animacji typu vertexAnimation
name
String
Nazwa animacji stosowana jako odwołanie
start
Number
vertices
Vector.
Określa rodzaj animacji
0
Odwołanie do czasu, w którym kończy się animacja
Infinity
Odwołanie do czasu, w którym zaczyna się animacja Obiekt Vector z używanymi punktami Vertex animowanego modelu
Tabela 6.16. Metody klasy AnimationData
Nazwa
Opis
clone(object:Object3D):AnimationData
Metoda fabrykująca
AnimationDataType Klasa AnimationDataType w swoim kodzie zawiera jedynie dwie stałe określające rodzaj wywoływanej animacji. Szczegóły tych stałych wypisano w tabeli 6.17.
Rozdział 6. Modele i animacje
277
Tabela 6.17. Stałe klasy AnimationDataType
Nazwa
Rodzaj
Wartość domyślna Opis
SKIN_ANIMATION
String
skinAnimation
VERTEX_ANIMATION
String
vertexAnimation
Taki rodzaj animacji występuje przy stosowaniu modeli składających się z siatki geometrycznej i szkieletów. Do jej kontrolowania stosuje się obiekt klasy BonesAnimator
Animacja sterowana obiektem klasy VertexAnimator bazuje na zmianie położenia każdego z wierzchołków siatki bez stosowania szkieletu
AnimationLibrary AnimationLibrary to klasa zlokalizowana w pakiecie away3d.loaders.utils. Jej
obiekt pełni funkcję biblioteki zawierającej wszystkie animacje poukładane w ustalonej kolejności. W swoich zasobach ma ona dwie metody, obie wypisano w tabeli 6.18.
Tabela 6.18. Metody klasy AnimationLibrary
Nazwa
Opis
addAnimation(name:String):AnimationData
Dodaje animację do biblioteki animacji
getAnimation(name:String):AnimationData
Zwraca wybraną animację zawartą w bibliotece
Modele w formacie MD2 przeważnie mają następujące sekwencje animacji: default, stand, run, attack, pain1, pain2, pain3, jump, flip, salute, taunt, wave, point, crstand, crwalk, crattack, crpain, crdeath, death1, death2, death3.
Animator i AnimatorEvent Animator Klasa Animator zlokalizowana jest w pakiecie away3d.animators, a jej obiekt służy do kontrolowania wybranej sekwencji animacji. Stosując właściwości oraz metody wypisane w tabelach 6.19 i 6.20, można w pełni kontrolować wybraną animację, podobnie jak animację w dwuwymiarowych aplikacjach Flash.
278
Flash i ActionScript. Aplikacje 3D od podstaw
Tabela 6.19. Właściwości klasy Animator
Nazwa
Rodzaj
Wartość domyślna Opis
currentFrame
int
1
cycleNumber
int
delay
Number
0
Określa opóźnienie rozpoczęcia animacji
fps
Number
25
Określa prędkość FPS
isPlaying
Boolean
false
Zwraca informację, czy animacja aktualnie jest włączona
length
Number
loop
Boolean
name
String
Nazwa animacji stosowana jako odwołanie
target
Object3D
Określa obiekt, któremu animacja jest przypisana
totalFrames
Number
Zwraca liczbę wszystkich klatek wybranej animacji
Zwraca numer aktualnej klatki Zwraca numer aktualnego obiegu
AnimatorEvent Klasa AnimatorEvent, zlokalizowana w away3d.events, reprezentuje zdarzenia użycia obiektu klasy Animator. Warto o niej wspomnieć, ponieważ może się przydać do wywoływania różnych zdarzeń przy uruchomionej animacji. W tabelach 6.21 i 6.22 wypisano metodę oraz — co ważniejsze — stałe określające zdarzenia. Tabela 6.21. Metoda klasy AnimatorEvent
Nazwa
Opis
AnimatorEvent(type:String, animator:Animator)
Konstruktor
Tabela 6.22. Stałe klasy AnimationEvent
Nazwa
Rodzaj
Wartość domyślna Opis
CYCLE
String
cycle
Określa zdarzenie rozpoczęcia nowego cyklu przejścia przez wszystkie sekwencje animacji
ENTER_KEY_FRAME
String
enterKeyFrame
Określa zdarzenie przejścia do nowej klatki sekwencji
SEQUENCE_DONE
String
sequenceDone
Określa zdarzenie zakończenia odtwarzania sekwencji animacji
SEQUENCE_UPDATE
String
sequenceUpdate
Określa zdarzenie przejścia w sekwencji animacji
START
String
start
Określa zdarzenie rozpoczęcia animacji
STOP
String
stop
Określa zdarzenie zatrzymania animacji
Zastosowanie animacji w przykładzie W przykładzie z poprzedniego podrozdziału dla zdarzenia wciśnięcia przycisku Włącz animacje zapisaliśmy wywołanie metody playAnimations(). W jej ciele zastosowaliśmy instrukcję warunkową, w której sprawdzana jest wartość właściwości isPlaying klasy Animator oraz istnienie obiektu animations. Dzięki temu w zależności od wyniku instrukcji kliknięcie przycisku spowoduje włączenie lub wyłączenie animacji. Ponieważ przy pobieraniu modelu w formacie MD2 stosowany jest dodatkowy obiekt klasy ObjectContainer3D wewnątrz obiektu model, proces uruchomienia animacji należało rozpocząć od sprawdzenia, jakiego rodzaju model został wgrany. W tym celu skorzystaliśmy z instrukcji warunkowej if sprawdzającej wartość własności type obiektu modelReference. Krok ten jest niezbędny do poprawnego od-
280
Flash i ActionScript. Aplikacje 3D od podstaw
wołania się do obiektu animationLibrary i zastosowania metody getAnimation(). Po pobraniu danych animacji default użyliśmy kolejnej instrukcji if, aby sprawdzić, czy wybrana sekwencja jest dostępna. Jeżeli stworzony obiekt animations nie jest pusty, można uruchomić animację, odwołując się do obiektu klasy Animator i jej metody play(). Cały proces wygląda następująco: if (animations && animations.animator.isPlaying) { panel.playAnimationsBtn.label = "Włącz animację"; animations.animator.gotoAndStop(0); } else { if(modelReference.type.toLowerCase() == '.dae') { animations = model.animationLibrary.getAnimation('default'); } else { animations = model.children[0].animationLibrary.getAnimation ('default'); } if (animations) { panel.playAnimationsBtn.label = "Wyłącz animację"; animations.animator.play(); } }
Podsumowanie Do tworzenia trójwymiarowych obiektów służą pakiety takie jak: Autodesk 3ds Max, Autodesk Maya, Lightwave, Blender, MilkShape, Google SketchUp, PreFab3D. PreFab3D to nieduży program o sporych możliwościach, napisany przez ludzi związanych z projektem Away3D. Aby tworzyć animacje na modelach, można również wykorzystać darmową aplikację CharacterFX. Termin Low poly określa modele o siatce złożonej z mniejszej liczby wielokątów, z kolei pojęcie High poly oznacza obiekty o skomplikowanej budowie siatki.
Rozdział 6. Modele i animacje
281
Zakres pojęć Low poly i High poly jest bardzo płynny z uwagi na stale rozwijający się sprzęt komputerowy. Wybór modelu zależy od silnika, na którym opiera się aplikacja, oraz sprzętu odbiorcy. W projektach bazujących na silniku podobnym do Away3D korzysta się z modeli Low poly. Formaty modeli stosowane w Away3D to: 3DS, ASE, OBJ, DAE, MD2, AWD, AS. Z tych modeli jedynie DAE oraz MD2 obsługują animację modeli. Stosując klasę AS3Exporter bądź specjalne wtyczki do programów Blender oraz 3ds Max, można wyeksportować obiekt do postaci klasy ActionScript 3.0. Do każdego z rodzajów modeli dopisano klasy odpowiedzialne za ich pobranie i wyświetlanie. Mają one dwie metody: parse() oraz load(), przetwarzające dane tak, by można było je pokazać na scenie w postaci obiektu. Powierzchnię modelu można pokryć dowolnym materiałem dostępnym w pakiecie away3d.materials. W przypadku gdy tekstura załączona do modelu nie pojawia się na jego powierzchni, można pobrać ją osobno, stosując obiekt klasy BitmapFileMaterial, i przypisać do właściwości material dostępnej w obiekcie modelu. Do użycia animacji zapisanych w modelach DAE oraz MD2 służą klasy: AnimationData, AnimationDataType, AnimationLibrary oraz Animator. Główną klasą do zarządzania animacjami jest AnimationData, zawiera ona obiekt klasy Animator oraz wszystkie dane wybranej animacji. Klasa AnimationLibrary służy jako spis dostępnych animacji w wybranym modelu. Klasa Animator uruchamia i kontroluje wybraną animację.
282
Flash i ActionScript. Aplikacje 3D od podstaw
Rozdział 7. Praca z obiektami Znamy już podstawowe obiekty trójwymiarowe dostępne w bibliotece Away3D oraz rodzaje modeli, z których można w niej korzystać. Przyszedł czas, aby dowiedzieć się, co takiego można z tymi obiektami zrobić. Zawartość tego rozdziału podzielono na dwie zasadnicze części. W pierwszej zaczniemy od najprostszych operacji. Stosując różne metody i właściwości, wprawimy obiekty w ruch, zmienimy ich pozycje oraz kąty nachylenia. Gdy opanujemy podstawy sterowania trójwymiarowymi obiektami, przejdziemy do trudniejszych tematów. W drugiej części tego rozdziału różnymi metodami zmienimy ukształtowanie powierzchni obiektu, a nawet ją zniszczymy, powodując eksplozję. Brzmi ciekawie? Czytając ten rozdział, dowiesz się: Jak można tworzyć animacje. Jakie biblioteki służą do obsługi animacji obiektów. Jak posługiwać się klasą TweenMax z pakietu GreenSock Tweening Platform. Czym jest przemieszczanie, obracanie oraz skalowanie obiektów. Jakich metod i właściwości używa się do przemieszczania, obracania i skalowania. Czym jest macierz transformacji i jak się nią posługiwać. Jak za pomocą HeightMapModifier modyfikować powierzchnię obiektu. Jak zastosować klasy Elevation oraz SkinExtrude do generowania ukształtowania terenu.
284
Flash i ActionScript. Aplikacje 3D od podstaw
Biblioteki do animacji Animacje w programie Flash można wykonać na dwa sposoby. Pierwszy z nich polega na układaniu elementów w odpowiednim miejscu i formie na linii czasowej programu. Druga metoda wykorzystuje język ActionScript 3.0 — tutaj jest więcej możliwości implementacji animacji. Po pierwsze, można skorzystać ze zdarzenia Event.ENTER_FRAME i za pomocą odpowiednich instrukcji warunkowych decydować o kolejności i warunkach wystąpienia konkretnego działania. Kolejna metoda wykorzystuje obiekty klas Timer i ich zdarzenia. Za ich pomocą można wyznaczyć czas wystąpiesnia, opóźnienia animacji oraz długość jej wykonywania. Ostatnią metodą, najbardziej wygodną, jest zastosowanie specjalnych bibliotek, które cały mechanizm optymalnej animacji wykonują za programistę. Do najpopularniejszych należą: GreenSock Tweening Platform, Adobe Tween, Tweener, GTwen, GoASAP, Tweensy. Przykłady, w których wykonywane są animacje, przeważnie wykorzystują biblioteki TweenMax oraz TweenLite.
Pobieranie i instalacja biblioteki GreenSock Tweening Platform W celu pobrania bibliotek firmy GreenSock należy przejść do strony: http://www. greensock.com/. Po jej załadowaniu wykonaj następujące kroki: 1. Przejdź do działu Tweening Platform v11 po lewej stronie. Jest to ostatnia stabilna wersja, w chwili gdy piszę te słowa. 2. Kliknij na napis Tweening Platform v11. 3. Po załadowaniu strony kliknij na przycisk Download AS3 w prawej kolumnie.
Rozdział 7. Praca z obiektami
285
4. Pojawi się okno z informacjami dotyczącymi licencji. Aby ściągnąć bibliotekę, należy zapoznać się z treścią licencji i zaakceptować jej warunki. 5. Można również zaznaczyć pole I’d like to learn how to get bonus plugins, update notifications, SVN access and more. Wtedy po rozpoczęciu pobierania zostaniesz przeniesiony do strony opisującej zalety i warunki członkostwa w klubie GreenSock. Po zakończonym pobieraniu pliku zawartość archiwum należy wypakować do katalogu, w którym mieszczą się pozostałe biblioteki. W naszym przypadku jest to katalog o nazwie lib.
Wybór biblioteki GreenSock Tweening Platform W całym pakiecie GreenSock Tweening Platform jest kilka klas obsługujących animacje w ActionScript 3.0. Nie będziemy zajmowali się szczegółowym omawianiem tych klas. Najważniejsze jest to, że mamy do wyboru następujące opcje: TweenMax, TweenLite, TweenNano, TimelineLite, TimelineMax. Dwie ostatnie klasy stosuje się do łączenia w łańcuch zdarzeń, pozostałe klasy — TweenMax, TweenLite oraz TweenNano — różną się od siebie rozmiarem oraz możliwościami. Jak nazwy wskazują, najbardziej rozbudowaną wersją jest TweenMax. Z niej właśnie będziemy korzystali w przykładach zawartych w tym i innych rozdziałach. Wybranie tej wersji nie miało konkretnych powodów. Równie dobrze można korzystać z pozostałych.
Implementacja TweenMax Aby używać TweenMax, należy zaimportować klasę o tej samej nazwie. Zlokalizowana jest ona w pakiecie com.greensock. import com.greensock.TweenMax;
Klasa TweenMax ma statyczne metody, dlatego odwołujemy się do nich bez konieczności wcześniejszego definiowania obiektu. W zasadzie to ma ona wiele funkcji służących do tworzenia animacji, ale nas na chwilę obecną najbardziej interesuje metoda to().
286
Flash i ActionScript. Aplikacje 3D od podstaw
Poniżej przedstawiono sposób zastosowania tej metody: TweenMax.to(sphere, 2, {scaleX:1.5, scaleY:2, scaleZ:2, onComplete:onResizeComplete}); private function onResizeComplete():void { trace('onResizeComplete - OK'); }
Pierwszym atrybutem, jaki należy podać, stosując TweenMax.to(), jest odwołanie do obiektu, na którym animacja ma zostać wykonana. Druga właściwość oznacza czas trwania animacji określony w sekundach lub liczbie klatek, jeżeli właściwość useFrames jest ustawiona jako true. W trzecim atrybucie między klamrami należy podać właściwości wraz z nowymi wartościami. Klasa po wywołaniu metody to() w ustalonym czasie doprowadzi obiekt do tego określonego tymi właściwościami nowego stanu. Na koniec można podać dodatkową właściwość onComplete. Jest to odwołanie do funkcji, która ma być wykonana po zakończeniu animacji. Można również wywołać funkcję przed animacją. Do tego celu służy właściwość onInit. Poza stosowaniem metod statycznych można również stworzyć obiekt klasy TweenMax z ustalonymi atrybutami określającymi animację. Poniżej przedstawiono przykład zastosowania obiektu klasy TweenMax: var tween:TweenMax = TweenMax(sphere, 2, {scaleX:1.5, scaleY:2, scaleZ:2, onComplete:onResizeComplete}); private function onResizeComplete():void { tween.reverse(); }
W tym przypadku po stworzeniu obiektu i zakończeniu animacji zostanie wywołana funkcja cofająca uzyskany efekt. Poza reverse() TweenMax zawiera również metody pause() i restart(). Więcej informacji na temat tej biblioteki i jej możliwości umieszczono w dokumentacji pod adresem: http://www.greensock.com/as/docs/tween/.
Klasa bazowa Aby pokazać, jak działają poszczególne właściwości i metody, potrzebujemy przykładów. Każdy z omawianych w tym dziale sposobów w rzeczywistości ogranicza się do jednej, góra dwóch linijek kodu. Dlatego w pierwszej kolejności napiszemy klasę, która będzie uniwersalna i zobrazuje pracę z obiektami.
Rozdział 7. Praca z obiektami
287
Przepisz poniższy kod i skompiluj go, a na ekranie pojawi się efekt przedstawiony na rysunku 7.1. Omówieniem poszczególnych fragmentów kodu zajmiemy się później. Rysunek 7.1.
Po skompilowaniu przedstawionego kodu źródłowego w oknie aplikacji wyświetli się sześcian wraz z układem współrzędnych, który umieściliśmy specjalnie po to, by łatwiej było nam poznać kierunek zwrotu obiektu. Sześcian w kodzie reprezentowany jest jako obiekt klasy Cube, a układ współrzędnych jako obiekt klasy Trident. Oba znajdują się w kontenerze ObjectContainer3D o nazwie obj. Zastosowaliśmy kontener z uwagi na to, że odwołując się do niego w czasie animacji, modyfikujemy całą jego zawartość. Dzięki temu nie musieliśmy pisać w kodzie podwójnych metod osobno dla sześcianu i układu współrzędnych.
294
Flash i ActionScript. Aplikacje 3D od podstaw
Klasy TimelineMax oraz TweenMax posłużyły nam do stworzenia obiektu anims i wypełnienia go szeregiem etapów animacji sześcianu. W sekwencjach, w których zmiany polegają na zastosowaniu metod, a nie właściwości, musieliśmy użyć funkcji onUpdate(), by wewnątrz jej bloku odwołać się do konkretnej funkcji i stworzyć płynne przejścia między stanami sześcianu. W każdym etapie użyliśmy dodatkowo funkcji onStart(), aby z każdą nową animacją zaktualizować zawartość pola tekstowego label umieszczonego w obiekcie klasy Sprite o nazwie panel.
Przemieszczanie W podrozdziale „Położenie obiektów w przestrzeni” rozdziału 2. „Podstawy biblioteki Away3D” przedstawiono dwie metody ustawiania obiektu na scenie. Pierwsza polegała na zastosowaniu właściwości x, y i z, a druga na wykorzystaniu właściwości position. Na chwilę wrócimy do tych właściwości, ponieważ za ich pomocą można również przemieszczać obiekt, a nie jedynie ustawiać go w miejscu.
Właściwości x, y, z Aby wprawić w ruch obiekt przy zastosowaniu tych właściwości, trzeba dodatkowo skorzystać z operatorów przypisania, takich jak: +=, -=, *= czy też /=. Służą one do zwiększania i zmniejszania wartości właściwości. W tych operatorach każdy ze znaków przed = jest istotny, ponieważ decyduje on o kierunku zmiany pozycji. Zastosowanie tych właściwości w przykładzie wygląda następująco: anims.append(TweenMax.to(obj, 1, { x: -100, y: 100, z: 200, onStart:function() { label.text = "Użycie właściwości: x, y, z"; } }));
Rozdział 7. Praca z obiektami
295
position Właściwość ta również nadaje się do wykorzystania przy zmianie pozycji, ale w tym przypadku należy podać wartości pozycji na wszystkich osiach. Jeżeli chcemy przesunąć dany obiekt tylko względem na przykład osi Y, to w pozostałych — X i Z — musimy wpisać wartości początkowe. Stosowniej jednak jest korzystać z właściwości x, y i z w takich sytuacjach, a z position, gdy mamy konkretny punkt docelowy. Implementacja tej właściwości w przykładzie wygląda następująco: anims.append(TweenMax.to(obj, 1, { delay:2, onStart:function() { label.text = "Użycie właściwości: position"; obj.position = new Vector3D(-300, -100, 300) } }));
Metody translate() Metoda translate służy do przemieszczania obiektu wzdłuż wektora o określonej długości w dowolnym kierunku. Pierwszy z atrybutów, jaki podajemy w tej funkcji, to Vector3D. Określa on kierunek, w którym ma się poruszać obiekt. Kierunek ustalamy przez podanie trzech współrzędnych: x, y oraz z. Nie jest to jednak punkt docelowy przejścia. Punkt docelowy kończy się na długości, jaką podajemy jako drugi argument funkcji translate. Sposób działania tej metody przedstawiono na rysunku 7.2. Obiekt półprzezroczysty oznacza początkowe położenie. Implementacja tej metody w przykładzie wygląda następująco: anims.append(TweenMax.to(obj, 1, { delay:2, onStart:function() { label.text = "Użycie metody: translate()"; },
moveTo() Metoda moveTo() działa tak samo jak właściwość position. Używamy jej przeważnie wtedy, gdy obiekt ma być przeniesiony w konkretny punkt w przestrzeni. Można również zmieniać pozycję wobec jednej lub dwóch osi, ale jest to mało wygodne rozwiązanie. Korzystając z tej metody, należy podać trzy współrzędne: x, y, z, określające docelową pozycję przemieszczanego obiektu. Implementacja tej metody w przykładzie wygląda następująco: anims.append(TweenMax.to(obj, 1, { delay:2, onStart:function() { label.text = "Użycie metody: moveTo()"; obj.moveTo(0, 0, 0); } }));
Rozdział 7. Praca z obiektami
297
moveForward() Metoda moveForward() przesuwa obiekt wzdłuż dodatnich wartości jego lokalnej osi Z. Implementacja tej metody w przykładzie wygląda następująco: anims.append(TweenMax.to(obj, 1, { delay:2, onStart:function() { label.text = "Użycie metody: moveForward()"; }, onUpdate:function() { obj.moveForward(10); } }));
Rysunek 7.3 przedstawia działanie i kierunek metody moveForward(). Obiekt półprzezroczysty oznacza początkowe położenie. Rysunek 7.3.
Użycie metody moveForward()
moveBackward() Metoda moveBackward() przesuwa obiekt wzdłuż ujemnych wartości jego lokalnej osi Z. Implementacja tej metody w przykładzie wygląda następująco: anims.append(TweenMax.to(obj, 1, { delay:2,
298
Flash i ActionScript. Aplikacje 3D od podstaw onStart:function() { label.text = "Użycie metody: moveBackward()"; }, onUpdate:function() { obj.moveBackward(10); } }));
Z kolei rysunek 7.4 przedstawia działanie i kierunek metody moveBackward(). Obiekt półprzezroczysty oznacza początkowe położenie. Rysunek 7.4.
Użycie metody moveBackward()
moveUp() Metoda moveUp() przesuwa obiekt wzdłuż dodatnich wartości jego lokalnej osi Y. Implementacja tej metody w przykładzie wygląda następująco: anims.append(TweenMax.to(obj, 1, { delay:2, onStart:function() { label.text = "Użycie metody: moveUp()"; }, onUpdate:function() { obj.moveUp(10); } }));
Rozdział 7. Praca z obiektami
299
Rysunek 7.5 przedstawia działanie i kierunek metody moveUp(). Obiekt półprzezroczysty oznacza początkowe położenie. Rysunek 7.5.
Użycie metody moveUp()
moveDown() Metoda moveDown() przesuwa obiekt wzdłuż ujemnych wartości jego lokalnej osi Y. Implementacja tej metody w przykładzie wygląda następująco: anims.append(TweenMax.to(obj, 1, { delay:2, onStart:function() { label.text = "Użycie metody: moveDown()"; }, onUpdate:function() { obj.moveDown(10); } }));
Rysunek 7.6 przedstawia działanie i kierunek metody moveDown(). Obiekt półprzezroczysty oznacza początkowe położenie.
300
Flash i ActionScript. Aplikacje 3D od podstaw
Rysunek 7.6.
Użycie metody moveDown()
moveLeft() Metoda moveLeft() przesuwa obiekt wzdłuż ujemnych wartości jego lokalnej osi X. Implementacja tej metody w przykładzie wygląda następująco: anims.append(TweenMax.to(obj, 1, { delay:2, onStart:function() { label.text = "Użycie metody: moveLeft()"; }, onUpdate:function() { obj.moveLeft(10); } }));
Rysunek 7.7 przedstawia działanie i kierunek metody moveLeft(). Obiekt półprzezroczysty oznacza początkowe położenie.
moveRight() Metoda moveRight() przesuwa obiekt wzdłuż dodatnich wartości jego lokalnej osi X. Implementacja tej metody w przykładzie wygląda następująco:
Rysunek 7.8 przedstawia działanie i kierunek metody moveRight(). Obiekt półprzezroczysty oznacza początkowe położenie.
Obracanie W poprzednim podrozdziale poznaliśmy właściwości oraz metody służące do określania pozycji obiektu, z kolei w tym podrozdziale zajmiemy się zmianą kąta nachylenia obiektu. Obiekty 3D mają kilka metod oraz właściwości, których użycie wprawia je w obrót wokół własnej osi lub wybranego obiektu i tworzy efekt orbitowania. Można również obrócić obiekt w kierunku konkretnego punktu. Każdy z obiektów 3D ma punkt centralny, który — jak nazwa wskazuje — umieszczony jest w centrum geometrii obiektu. Służy on jako punkt odniesienia podczas obracania obiektu względem własnego układu współrzędnych. Mimo że jest to punkt środkowy, istnieje możliwość zmienienia jego położenia.
302
Flash i ActionScript. Aplikacje 3D od podstaw
Rysunek 7.8.
Użycie metody moveRight()
Metody oraz właściwości służące do obracania obiektów przedstawiono w poniższych punktach.
Właściwości pivotPoint Obiekty klas dziedziczących po Object3D mają w swoich zasobach właściwość o nazwie pivotPoint. Wartość pivotPoint jest obiektem klasy Vector3D, który określa pozycję punktu środkowego wybranego obiektu. Punkt środkowy często nazywany jest również zerowym, ponieważ domyślnie jego pozycja to 0 na wszystkich osiach lokalnego układu współrzędnych. pivotPoint jest punktem odniesienia dla pozycji geometrii obiektu. Gdy stosujemy różne wartości położenia pivotPoint, zmiana nachylenia całego obiektu o ten sam kąt przyniesie odmienne efekty. Zastosowanie tej właściwości w przykładzie wygląda następująco: anims.append(TweenMax.to(obj, 1, { delay:2, rotationY:90, onStart:function() { label.text = "Użycie właściwości: pivotPoint"; obj.pivotPoint = new Vector3D(100, 0, 200); } }));
Rozdział 7. Praca z obiektami
303
rotationX, rotationY, rotationZ rotationX, rotationY oraz rotationZ to standardowe właściwości znane z programów Adobe Flash. Służą one do obracania obiektu względem wybranej osi. Zwróć uwagę na ostatnie litery nazw tych właściwości. Oznaczają one oś, wokół której wykonywany jest obrót.
W Away3D nie zmieniły one swego zastosowania. Jedyną dodatkową cechą w przypadku obiektów w Away3D jest możliwość podania tych właściwości przy tworzeniu obiektu. Chcąc wykorzystać te właściwości, należy podać jako wartość stopień obrotu w postaci liczby typu Number. W poniższym kodzie przedstawiono zastosowanie właściwości obrotu. Zastosowanie tych właściwości w przykładzie wygląda następująco: anims.append(TweenMax.to(obj, 1, { delay:2, rotationX:90, rotationY:90, rotationZ:90, onStart:function() { label.text = "Użycie właściwości: rotationX, rotationY, rotationZ"; obj.pivotPoint = new Vector3D(0, 0, 0); } }));
Metody movePivot() Metoda movePivot() sama w sobie nie obraca obiektu. Celem jej jest zmienienie pozycji punktu pivotPoint, który służy jako punkt odniesienia do obracania obiektu. movePivot() ma trzy atrybuty: dx, dy i dz. Każdy z tych atrybutów przyjmuje wartość liczbową, która określa pozycję na osi w lokalnym układzie współrzędnych. Przykład zastosowania metody movePivot() w kodzie wygląda następująco: anims.append(TweenMax.to(obj, 1, { delay:2, onStart:function() {
304
Flash i ActionScript. Aplikacje 3D od podstaw label.text = "Użycie metody: movePivot()"; obj.movePivot(200, 200, 0); } }));
rotateTo() Metoda rotateTo() jako atrybuty przyjmuje trzy wartości liczbowe: ax, ay i az. Każdy z tych atrybutów odpowiada kątowi nachylenia względem osi globalnego układu współrzędnych lub kontenera, w którym się znajduje obiekt. Implementacja tej metody w przykładzie wygląda następująco: anims.append(TweenMax.to(obj, 1, { delay:2, onStart:function() { label.text = "Użycie metody: rotateTo()"; obj.rotateTo(0, 0, 0); } }));
Na rysunku 7.9 pokazano dwa sześciany w różnych pozycjach. Sześcian zaznaczony jako pozycja początkowa ustawione ma standardowe wartości kąta nachylenia względem wszystkich osi. Z kolei na sześcianie oznaczonym jako pozycja końcowa zastosowano metodę rotateTo(). Rysunek 7.9.
Efekt wywołania metody rotateTo()
Rozdział 7. Praca z obiektami
305
rotate() rotate()
obraca obiekt o ustalony kąt względem wybranych osi. Metoda ta ma dwa atrybuty. Pierwszy atrybut to axis, który przyjmuje jako wartość obiekt Vector3D. Służy on do wyznaczania osi, względem których wykonany ma zostać obrót. Drugi atrybut o nazwie angle wyznacza kąt nachylenia. Cała tajemnica stosowania tej metody polega na wybraniu odpowiedniego kierunku. W obiekcie Vector3D podajemy trzy wartości. Każda z nich odpowiada za jedną oś lokalnego układu współrzędnych. Najczęściej stosowanymi wartościami są: -1, 1 i 0. Oznaczają one obrót lewostronny, prawostronny oraz brak skrętu na wybranej osi. Implementacja tej metody w przykładzie wygląda następująco: anims.append(TweenMax.to(obj, 1, { delay:2, onStart:function() { label.text = "Użycie metody: rotate()"; }, onUpdate:function() { obj.rotate(new Vector3D(0, 1, 0),10); } }));
lookAt() Działaniem lookAt() jest obrócenie obiektu w stronę wskazanego punktu w przestrzeni. Metoda ta zawiera dwa atrybuty: target i upAxis. Pierwszy atrybut, target, określa cel, w kierunku którego zwrócony ma być obiekt. Jako wartość target przyjmuje obiekt Vector3D. Druga właściwość, upAxis, jest nieobowiązkowa i domyślnie ustawiona na null. Jako wartość również przyjmuje obiekt Vector3D. Ustawienie wartości upAxis określa, która z osi lokalnego układu współrzędnych będzie obrócona ku górze. Najczęściej lookAt() stosuje się w obiektach kamer, gdy mają przedstawić konkretny punkt. Implementacja tej metody w przykładzie wygląda następująco: anims.append(TweenMax.to(obj, 1, { delay:2, onStart:function() { label.text = "Użycie metody: lookAt()"; obj.lookAt(new Vector3D(100, 100, 0)); } }));
306
Flash i ActionScript. Aplikacje 3D od podstaw
pitch() Metoda pitch() służy do obracania obiektu względem osi X jego lokalnego układu współrzędnych. W metodzie tej podaje się jeden atrybut angle. Jako wartość przyjmuje liczbę typu Number, która określa stopień obrotu obiektu względem osi X. Implementacja tej metody w przykładzie wygląda następująco: anims.append(TweenMax.to(obj, 1, { delay:2, onStart:function() { label.text = "Użycie metody: pitch()"; }, onUpdate:function() { obj.pitch(10); } }));
Na rysunku 7.10 pokazano dwa sześciany w różnych pozycjach. Sześcian zaznaczony jako pozycja początkowa ustawione ma standardowe wartości kąta nachylenia względem wszystkich osi. Z kolei na sześcianie oznaczonym jako pozycja końcowa zastosowano metodę pitch(). Rysunek 7.10.
Efekt wywołania metody pitch()
Rozdział 7. Praca z obiektami
307
roll() roll() to podobna metoda do pitch(). Również służy do obracania obiektu względem konkretnej osi, w tym przypadku jest to oś Z lokalnego układu współrzędnych. Metoda roll() ma jedną właściwość angle, która jako wartość przyjmuje liczbę typu Number. Określa ona stopień obrotu obiektu względem osi Z.
Implementacja tej metody w przykładzie wygląda następująco: anims.append(TweenMax.to(obj, 1, { delay:2, onStart:function() { label.text = "Użycie metody: roll()"; }, onUpdate:function() { obj.roll(10); } }));
Na rysunku 7.11 pokazano dwa sześciany w różnych pozycjach. Sześcian zaznaczony jako pozycja początkowa ustawione ma standardowe wartości kąta nachylenia względem wszystkich osi. Z kolei na sześcianie oznaczonym jako pozycja końcowa zastosowano metodę roll(). Rysunek 7.11.
Efekt wywołania metody roll()
308
Flash i ActionScript. Aplikacje 3D od podstaw
yaw() Celem stosowania yaw() jest obrócenie obiektu względem lokalnej osi Y układu współrzędnych wybranego obiektu. Metoda yaw() ma jeden atrybut angle. Identycznie jak poprzednie metody pitch() i roll(), yaw() przyjmuje wartości w postaci liczby typu Number, która określa stopień obrotu obiektu względem osi Y. Implementacja tej metody w przykładzie wygląda następująco: anims.append(TweenMax.to(obj, 1, { delay:2, onStart:function() { label.text = "Użycie metody: yaw()"; }, onUpdate:function() { obj.yaw(10); } }));
Na rysunku 7.12 pokazano dwa sześciany w różnych pozycjach. Sześcian zaznaczony jako pozycja początkowa ustawione ma standardowe wartości kąta nachylenia względem wszystkich osi. Z kolei na sześcianie oznaczonym jako pozycja końcowa zastosowano metodę yaw(). Rysunek 7.12.
Efekt wywołania metody yaw()
Rozdział 7. Praca z obiektami
309
Skalowanie Skalowanie obiektów polega na modyfikowaniu ich wymiarów względem wybranych osi. W Away3D obiekty klas dziedziczących po Object3D mają cztery właściwości oraz jedną metodę, dzięki którym można zmienić rozmiary obiektu.
Właściwości scaleX, scaleY, scaleZ Podobnie jak rotationX, rotationY i rotationZ, właściwości scaleX, scaleY oraz scaleZ są standardowymi właściwościami znanymi z programów Adobe Flash. Służą one do zmiany wymiarów obiektu względem wybranej osi. Ostatnie litery nazw tych właściwości oznaczają oś, wokół której wykonywany jest obrót. Właściwości scaleX, scaleY oraz scaleZ, tak samo jak właściwości rotation w Away3D, można użyć przy tworzeniu obiektu. Chcąc wykorzystać którąkolwiek z właściwości, należy podać wartość liczbową, która określa wielokrotność zmiany rozmiaru obiektu. Zastosowanie tych właściwości w przykładzie wygląda następująco: anims.append(TweenMax.to(obj, 1, { delay:2, scaleX:3, scaleY:2, scaleZ:4, onStart:function() { label.text = "Użycie właściwości: scaleX, scaleY, scaleZ"; } }));
Efekt zmiany skali z powyższymi wartościami przedstawiono na rysunku 7.13.
310
Flash i ActionScript. Aplikacje 3D od podstaw
Rysunek 7.13.
Zmodyfikowany obiekt sześcianu
Metody scale() Metoda scale() ma jeden atrybut o nazwie scale, którego wartość liczbowa odpowiada za zmianę rozmiarów obiektu względem wszystkich osi. Gdy podamy jedną wartość, obiekt powiększy się lub zmniejszy jednakowo z każdej ze stron. Gdy wymagane jest równomierne modyfikowanie wymiarów obiektu, stosowanie tej metody jest szybsze od podawania tych samych wartości każdej z właściwości: scaleX, scaleY i scaleZ. Implementacja tej metody w przykładzie wygląda następująco: anims.append(TweenMax.to(obj, 1, { delay:2, onStart:function() { label.text = "Użycie metody: scale()"; obj.scale(.5); } }));
Rozdział 7. Praca z obiektami
311
Macierz transformacji Czym jest macierz transformacji? Z definicji macierze transformacji to macierze, które opisują zależność między współrzędnymi punktu przed transformacją i po. Pojęcie macierzy transformacji znane jest z dwuwymiarowych aplikacji Flash. W ActionScript 3.0 przy użyciu klas Matrix i Transform można wykonać różne transformacje graficzne na wybranym obiekcie. Do funkcji transformacji należą: translacja, obrót, skalowanie, pochylenie. W Away3D również istnieje możliwość korzystania z macierzy transformacji. Obiekty pochodne od Object3D mają specjalną właściwość transform. Umożliwia ona skorzystanie z obiektów klasy Matrix3D, zlokalizowanej w pakiecie flash.geom. Klasa ta reprezentuje macierz transformacji, która wskazuje położenie i orientację trójwymiarowego obiektu. Za jej pomocą można wykonać wszystkie funkcje transformacji. Na rysunku 7.14 przedstawiono budowę macierzy transformacji. Rysunek 7.14.
Budowa macierzy transformacji
312
Flash i ActionScript. Aplikacje 3D od podstaw
Tworzenie macierzy transformacji Macierz transformacji tworzy się poprzez podanie ciągu 16 liczb w atrybucie typu Vector. Wartości te odpowiadają poszczególnym właściwościom macierzy. Należy podawać je w kolejności od lewej do prawej kolumny i od górnego do dolnego wiersza. W poniższym przykładzie przedstawiono sposób implementacji nowej macierzy transformacji, której wartości dwukrotnie zwiększają skalę obiektu: obj.transform = new Matrix3D(new [2,0,0,0,0,2,0,0,0,0,2,0,0,0,0,1]);
Operacje transformacji na macierzy Matrix3D wykonuje się, stosując jej metody. Tabele 7.1 i 7.2 zawierają najważniejsze z metod i właściwości klasy Marix3D. Tabela 7.1. Właściwości klasy Matrix3D
Nazwa
Rodzaj
Wartość domyślna
Opis
determinant
Number
Określa, czy macierz jest odwracalna
position
Vector3D
Pozycja obiektu w przestrzeni
rawData
Vector.
Ciąg 16 liczb typu Number. Są to wartości macierzy
Tabela 7.2. Metody klasy Matrix3D
Nazwa
Opis
Matrix3D(v:Vector. = null)
Konstruktor
append(lhs:Matrix3D):void
Metoda łączy macierze, mnożąc obie
appendRotation(degrees:Number, axis:Vector3D, Ustala stopień obrotu obiektu, do którego pivotPoint:Vector3D = null):void zastosowano macierz appendScale(xScale:Number, yScale:Number, zScale:Number):void
Ustala poziom skalowania na każdej z osi obiektu, do którego zastosowano macierz
Metoda obraca obiekt w kierunku wybranego punktu w przestrzeni
transpose():void
Metoda zamienia kolumny na wiersze i wiersze na kolumny
Rozdział 7. Praca z obiektami
313
Modyfikowanie powierzchni obiektu Modyfikowanie powierzchni obiektu polega na zmianie położenia poszczególnych punktów jego siatki. Daje to możliwość tworzenia nierówności terenu, ścieżek, flag, peleryn i innych obiektów, których powierzchnia nie jest płaska. Aby osiągnąć efekt nierówności w Away3D, korzysta się z klas: PathExtrusion, HeightMapModifier, SkinExtrude oraz Elevation. Każda z nich modyfikuje powierzchnię na swój sposób i w konkretnym celu. W poniższych punktach zobaczymy, jak i do czego stosować wymienione klasy. Zacznijmy od PathExtrusion.
PathExtrusion Klasa PathExtrusion znajduje się w pakiecie away3d.extrusions. Za pomocą tej klasy można wykreować wszelkiego rodzaju ścieżki i trasy. Na początku należy stworzyć obiekt Path i ustalić liczbę punktów, z których będzie się składała przyszła ścieżka. Każdy z tych punktów ma postać obiektu Vector3D. Dodawanie punktów ścieżki jest ważne z uwagi na to, że decydują one o jej przyszłym wyglądzie. Na tym etapie należy pamiętać o pewnym schemacie dodawania punktów. Polega on na podzieleniu etapów ścieżki na trzy punkty. Pierwszy z punktów jest początkiem etapu. Kolejny punkt jest kontrolnym, określającym krzywiznę fragmentu ścieżki. Ostatni punkt zamyka dany etap. Rysunek 7.15 przedstawia schemat jednego z fragmentów ścieżki. Rysunek 7.15.
Fragment ścieżki złożony z trzech punktów
Aby zachować ciągłość trasy, należy układać poszczególne jej fragmenty tak, aby ostatni punkt poprzedniego etapu łączył się z pierwszym punktem następnego. Łączenie to polega na przypisywaniu tych samych wartości obu punktom. Jeżeli chcemy stworzyć zamknięty tor, można dodatkowo zastosować właściwość closePath, przypisując jej wartość true. Niezależnie od pozycji pierwszego i ostatniego punktu przerwa między nimi zostanie wypełniona. Im bliżej siebie te punkty się znajdują, tym mniej zniekształcone będzie wypełnienie luki.
314
Flash i ActionScript. Aplikacje 3D od podstaw
Za wygląd ścieżki odpowiada właściwość profile, która zawiera tablicę obiektów Vector3D. Każdy z tych obiektów kształtuje profil trasy. Aby stworzyć płaską nawierzchnię, trzeba podać minimalnie dwa punkty. Jednak im więcej różnych współrzędnych zawiera tablica, tym bardziej skomplikowany kształt będzie miała ścieżka. Rozbieżność między położeniem pierwszego i ostatniego punktu określa szerokość bądź wysokość ścieżki. Rysunek 7.16 przedstawia przykładowe trzy profile, które można zastosować do ścieżki.
Rysunek 7.16. Przykładowe profile ścieżki
Każda ze współrzędnych właściwości profile odnosi się do lokalnego układu obiektu ścieżki. Jako przykład dla PathExtrusion stworzymy mało skomplikowany tor wyścigowy, który przedstawiono na rysunku 7.17. Rysunek 7.17.
Tor stworzony za pomocą PathExtrusion
Jest mało skomplikowany, przydałoby się trochę więcej fragmentów trasy, żeby zakręty były równe i okrągłe. Możesz udoskonalić i urozmaicić ten tor, aby poćwiczyć. Na razie przepisz i skompiluj kod źródłowy dla tego przykładu.
Rozdział 7. Praca z obiektami package { import flash.display.Sprite; import flash.events.Event; import flash.geom.Vector3D; import away3d.containers.View3D; import away3d.core.utils.Cast; import away3d.core.geom.Path; import away3d.extrusions.PathExtrusion; import away3d.materials.BitmapMaterial; public class PathExtrusionExample extends Sprite { private var view:View3D; private var path:Path; private var profile:Array; private var track:PathExtrusion; private var texture:BitmapMaterial; public function PathExtrusionExample():void { if (stage) init(); else addEventListener(Event.ADDED_TO_STAGE, init); } private function init(e:Event = null):void { removeEventListener(Event.ADDED_TO_STAGE, init); addEventListener(Event.ENTER_FRAME, onEnterFrame); view = new View3D(); view.x = stage.stageWidth * .5; view.y = stage.stageHeight * .5; addChild(view); view.camera.y = 1000; view.camera.z = -1500; view.camera.lookAt(new Vector3D(0, 0, 0)); path = new Path( [ new Vector3D(-400, 0, 0), new Vector3D(-400, 0, -700), new Vector3D(0, 0, 0), new Vector3D(0, 0, 0), new Vector3D(400, 0, 400), new Vector3D(400, 0, 0), new Vector3D(400, 0, 0), new Vector3D(200, 0, -700), new Vector3D(0, -50, 0), new Vector3D(0, -50, 0), new Vector3D(-200, 0, 700), new Vector3D(-400, 0, 0) ]); // profile = new Array( new Vector3D(-40, 0, 0),
315
316
Flash i ActionScript. Aplikacje 3D od podstaw new Vector3D(40, 0, 0) ); texture = new BitmapMaterial(Cast.bitmap('road.jpg')); texture.smooth = true; track = new PathExtrusion(); track.path = path; track.profile = profile; track.material = texture; track.bothsides = true; track.subdivision = 20; track.closePath = true; view.scene.addChild(track); } private function onEnterFrame(e:Event):void { track.rotationY++; view.render(); } } }
W tym kodzie źródłowym najważniejszymi klasami, jakie zaimportowaliśmy, są Vector3D, Path oraz PathExtrusion. One odpowiadają za budowę trasy, z kolei do nadania tekstury wykorzystaliśmy klasy Cast oraz BitmapMaterial. W klasie PathExtrusionExample poza standardowym obiektem widoku View3D zdefiniowaliśmy obiekt klasy Path, PathExtrusion, BitmapMaterial oraz tablicę profile. private private private private private
Standardowo w konstruktorze klasy odwołujemy się do metody init(), gdy obiekt Stage zostanie zainicjowany. W metodzie init() dodaliśmy rejestrator zdarzeń Event.ENTER_FRAME, który uruchamia metodę onEnterFrame(). addEventListener(Event.ENTER_FRAME, onEnterFrame);
Stworzyliśmy widok i ustawiliśmy jego położenie w oknie programu. Poza tym zmieniliśmy pozycję kamery widoku, tak aby obejmowała ona całą trasę. Zmiana położenia względem osi Y wymagała ustawienia na nowo punktu, w kierunku którego kamera ma być zwrócona. view.camera.y = 1000; view.camera.z = -1500; view.camera.lookAt(new Vector3D(0, 0, 0));
Rozdział 7. Praca z obiektami
317
Kolejnym etapem w metodzie init() było stworzenie obiektu klasy Path i przypisanie mu współrzędnych ścieżki. Wymienione punkty w przestrzeni stworzyły tor na wzór liczby 8. path = [ new new new new new new new new new new new new ]);
Aby trasa była płaska i zwrócona ku osi Y, stworzyliśmy obiekt tablicy Array o nazwie profile. Dodaliśmy dwa podstawowe obiekty Vector3D, dzięki którym ustaliliśmy szerokość ścieżki na lokalnej osi X. profile = new Array( new Vector3D(-40, 0, 0), new Vector3D(40, 0, 0) );
Po ustawieniu kształtu trasy, stosując obiekt klasy BitmapMaterial oraz klasę Cast, stworzyliśmy teksturę, którą pokryliśmy tor. Żeby poprawić jakość tekstury, użyliśmy również właściwości smooth. texture = new BitmapMaterial(Cast.bitmap('road.jpg')); texture.smooth = true;
Na końcu metody init() utworzyliśmy obiekt track klasy PathExtrusion. Jego wartościom path, profile oraz material przypisaliśmy wcześniej stworzone obiekty. track = new PathExtrusion(); track.path = path; track.profile = profile; track.material = texture;
Dodatkowo ustawiając właściwość bothsides na true, wypełniliśmy teksturą również spód trasy. Aby zakręty toru były bardziej kształtne, zwiększyliśmy liczbę segmentów w jego odcinkach do 20. track.bothsides = true; track.subdivision = 20;
318
Flash i ActionScript. Aplikacje 3D od podstaw
Przypisując właściwości closePath wartość true, zamknęliśmy obieg i połączyliśmy pierwszy punkt trasy z ostatnim. track.closePath = true; view.scene.addChild(track);
Przy każdym wystąpieniu zdarzenia Event.ENTER_FRAME dodaliśmy wywołanie metody onEnterFrame(). W jej ciele zapisaliśmy zmianę kąta nachylenia obiektu track oraz odświeżenie widoku. track.rotationY++; view.render();
Tabele 7.3 i 7.4 zawierają najważniejsze z metod i właściwości klasy PathExtrusion. Tabela 7.3. Właściwości klasy PathExtrusion
Nazwa
Rodzaj
Wartość domyślna Opis
alignToPath
Boolean
true
Określa, czy tablica punktów powinna być wyrównana do podanej ścieżki typu Path
closePath
Boolean
false
Określa, czy ostatni punkt ścieżki powinien łączyć się z pierwszym, tworząc zamknięty obieg
coverAll
Boolean
true
Określa, czy tekstury powinny się rozciągać tak, aby pokrywały całą powierzchnię
flip
Boolean
false
Określa, czy ściany powinny być odwrócone
materials
Array
Tablica zawierająca materiały, które mają być wykorzystane w każdym z punktów ścieżki
path
Path
Obiekt ścieżki służący do modyfikowania powierzchni
profile
Array
Tablica obiektów Vector3D określająca profil powierzchni
rotations
Array
Tablica zawierająca obiekty Vector3D określające kąty nachylenia punktów ścieżki względem wszystkich osi
scales
Array
Tablica zawierająca obiekty Vector3D określające skale ustawione na punktach ścieżki
subdivision
int
2
Określa podział segmentów w stworzonej powierzchni
HeightMapModifier Zlokalizowana w pakiecie away3d.modifiers klasa HeightMapModifier umożliwia zmianę współrzędnych poszczególnych punktów siatki wybranego obiektu 3D. Oznacza to, że można za jej pomocą tworzyć nierówności siatek każdego rodzaju obiektów trójwymiarowych. Podstawą tworzenia tych nierówności jest obiekt BitmapData specjalnie spreparowanego pliku graficznego. Przykład takiego pliku pokazano na rysunku 7.18. Rysunek 7.18.
Plik służący jako mapa dla HeightMapModifier
Taki plik nie jest teksturą, lecz służy jako mapa ukształtowania powierzchni. Wymiarami powinien pokryć całą powierzchnię obiektu. Tworząc obiekt klasy HeightMapModifier, podajemy dwa argumenty. Pierwszy z tych argumentów reprezentuje trójwymiarowy obiekt. Drugi natomiast odpowiada obiektowi BitmapData mapy ukształtowania powierzchni. Wewnątrz klasy informacje z obu podanych argumentów są mieszane. Skutkiem tego każdemu z punktów siatki wybranego obiektu przypisywany jest konkretny kolor, który będzie odwzorowany na osi Y wybranego obiektu 3D. Kolory ciemniejsze reprezentują dodatnie wartości y i tworzą tym samym wyżyny. Odwrotnie jest z kolorami jaśniejszymi. Im odcień jest jaśniejszy, tym niższe wartości y przypisywane są punktowi na siatce. Pozycje te można dodatkowo kontrolować właściwościami salce oraz offset klasy HeightMapModifier. Przykładowo jeżeli z jakichś powodów jaśniejsze kolory mapy powinny odzwierciedlać wyższe fragmenty powierzchni, należy właściwości scale przypisać wartość -1. Dzięki temu każdemu punktowi siatki geometrycznej powierzchni zostanie nadana odwrócona wartość właściwości y.
320
Flash i ActionScript. Aplikacje 3D od podstaw
O dokładności odwzorowania powierzchni decyduje liczba segmentów, z których składa się obiekt 3D. Większa liczba segmentów gwarantuje lepsze odwzorowanie, ale również wymaga większego zużycia zasobów komputera. Samo stworzenie obiektu klasy HeightMapModifier nie spowoduje wygenerowania nierówności powierzchni. Po ustaleniu wszystkich właściwości modyfikację powierzchni należy wywołać metodą execute() tej klasy. Jako przykład dla HeightMapModifier stworzymy ukształtowanie terenu bazujące na danych z rysunku 7.18. Efekt skompilowania kodu przedstawiono na rysunku 7.19. Rysunek 7.19.
Ukształtowanie terenu z użyciem HeightMapModifier
Aby uzyskać taki efekt, przepisz i skompiluj następujący kod źródłowy: package { import flash.display.BitmapData; import flash.display.Sprite; import flash.events.Event; import flash.geom.Vector3D; // import away3d.lights.PointLight3D; import away3d.modifiers.HeightMapModifier; import away3d.primitives.Plane; import away3d.containers.View3D; import away3d.core.utils.Cast; import away3d.materials.WhiteShadingBitmapMaterial; public class HeightMapModifierExample extends Sprite {
Rozdział 7. Praca z obiektami
321
private var view:View3D; private var texture:WhiteShadingBitmapMaterial; private var terrainMap:BitmapData; private var plane:Plane; private var modifier:HeightMapModifier; private var light:PointLight3D; private var backward:Boolean = false; public function HeightMapModifierExample():void { if (stage) init(); else addEventListener(Event.ADDED_TO_STAGE, init); } private function init(e:Event = null):void { removeEventListener(Event.ADDED_TO_STAGE, init); addEventListener(Event.ENTER_FRAME, onEnterFrame); // view = new View3D(); view.x = stage.stageWidth * .5; view.y = stage.stageHeight * .5; addChild(view); // view.camera.y = 600; view.camera.lookAt(new Vector3D(0, 0, 0)); // light = new PointLight3D(); light.specular = .05; light.diffuse = 0.75; light.ambient = 0.5; view.scene.addLight(light); // texture = new WhiteShadingBitmapMaterial (Cast.bitmap('terrainTexture')); texture.smooth = true; // plane = new Plane(); plane.material = texture; plane.bothsides = true; plane.width = plane.height = 512; plane.segmentsW = plane.segmentsH = 30; view.scene.addChild(plane); // modifier = new HeightMapModifier(plane, Cast.bitmap('terrainMap')); modifier.scale = .25; modifier.execute(); } private function onEnterFrame(e:Event):void { if (light.x > 400) backward = true; if (light.x < -400) backward = false;
322
Flash i ActionScript. Aplikacje 3D od podstaw // if (backward) light.x--; else light.x++; plane.rotationY--; view.render(); } } }
Po skompilowaniu tego kodu źródłowego na ekranie pojawi się plansza z nałożonym ukształtowaniem terenu. Aby uzyskać wyraźniejszy efekt nierówności, dodaliśmy światło PointLight3D, które przemieszcza się wzdłuż osi X. Najważniejszymi klasami, które zaimportowaliśmy w tym przykładzie, są: tworząca nierówności HeightMapModifier, umożliwiająca odbijanie światła WhiteShadingBitmapMaterial oraz samo źródło światła w postaci PointLight3D. W ciele klasy HeightMapModifierExample przed jej metodami zdefiniowaliśmy potrzebne obiekty oraz jedną zmienną backward, która ustala kierunek ruchu światła. Obiekt plane reprezentuje planszę, do której dodaliśmy nierówności. Do nałożenia ukształtowania terenu posłużyły nam obiekty modifier klasy HeightMapModifier oraz obiekt klasy BitmapData o nazwie terrainMap. Ponieważ do lepszego wyeksponowania ukształtowania terenu wykorzystaliśmy ruchome światło, użyliśmy do tego celu obiektu klasy PointLight3D. Poza samym światłem ważne również było użycie odpowiedniego rodzaju tekstury. Jednym z typów materiałów reagujących na źródło światła jest WhiteShadingBitmapMaterial. W naszym przykładzie obiekt tej klasy nazwaliśmy po prostu texture. W konstruktorze klasy po zainicjowaniu obiektu Stage odwołujemy się do metody init(). W metodzie init() dodaliśmy detektor zdarzenia Event.ENTER_FRAME, który uruchamia metodę onEnterFrame. addEventListener(Event.ENTER_FRAME, onEnterFrame);
Poza tym w metodzie init() stworzyliśmy wszystkie potrzebne obiekty do wygenerowania sceny, zaczynając od najbardziej podstawowego, czyli widoku Away3D. Aby móc zobaczyć całą planszę, przesunęliśmy kamerę wyżej i ustawiliśmy jej kierunek na punkt zerowy sceny. view = new View3D(); view.x = stage.stageWidth * .5; view.y = stage.stageHeight * .5; addChild(view); // view.camera.y = 600; view.camera.lookAt(new Vector3D(0, 0, 0));
Rozdział 7. Praca z obiektami
323
Po utworzeniu widoku stworzyliśmy obiekt światła PointLight3D o nazwie light. Przypisując nowe wartości właściwościom specular, diffuse oraz ambient, ustawiliśmy poziom natężenia światła, współczynnik rozproszenia oraz natężenie oświetlenia otoczenia. Po ustawieniu wszystkich właściwości dodaliśmy obiekt light jako źródło światła na scenie, stosując metodę addLight(). light = new PointLight3D(); light.specular = .05; light.diffuse = 0.75; light.ambient = 0.5; view.scene.addLight(light);
W kolejnych dwóch linijkach stworzyliśmy obiekt tekstury, który wypełnia powierzchnię planszy. Obiekt ten nazwaliśmy texture. Jest to materiał rodzaju WhiteShadingBitmapMaterial. Jako źródła użyliśmy obrazka terrainTexture, który wcześniej został dodany do zawartości pliku fla tego przykładu. Dodatkowo przypisując wartość true właściwości smooth, poprawiliśmy jakość wyświetlania tekstury. texture = new WhiteShadingBitmapMaterial(Cast.bitmap('terrainTexture')); texture.smooth = true;
W następnym etapie zajęliśmy się planszą. Utworzyliśmy obiekt klasy Plane o nazwie plane. Ustawiliśmy wymiary obiektu plane na 512 pikseli wysokości i szerokości. Dla lepszego odwzorowania ukształtowania zwiększyliśmy liczbę segmentów w wierszach i kolumnach planszy z 1 do 30. Aby plane był widoczny z każdej ze stron, nadaliśmy jego właściwości bothsides wartość true. Oczywiście przypisaliśmy również planszy wcześniej utworzony materiał do pokrycia powierzchni. Na koniec ustawiony obiekt plane dodaliśmy do zawartości sceny, stosując metodę addChild(). plane = new Plane(); plane.material = texture; plane.bothsides = true; plane.width = plane.height = 512; plane.segmentsW = plane.segmentsH = 30; view.scene.addChild(plane);
Na koniec metody init() stworzyliśmy i dodaliśmy obiekt modyfikujący powierzchnię planszy. Obiekt modifier, bo tak go nazwaliśmy, w swoim konstruktorze przyjmuje dwa argumenty. Pierwszy z nich to obiekt, którego powierzchnia ma być zmieniona; w naszym przykładzie jest to plansza plane. Drugiemu argumentowi przypisaliśmy obiekt mapy ukształtowania terenu, dodanego pod nazwą terrainMap do zasobów pliku fla. Ponieważ przy standardowych ustawieniach różnice w ukształtowaniu będą duże, zmniejszyliśmy ich skalę, przypisując właściwości scale wartość 0.25.
324
Flash i ActionScript. Aplikacje 3D od podstaw
Na koniec wywołaliśmy metodę execute(), która generuje nierówności powierzchni. modifier = new HeightMapModifier(plane, Cast.bitmap('terrainMap')); modifier.scale = .25; modifier.execute();
W metodzie onEnterFrame() w pierwszej kolejności sprawdzamy pozycję światła na osi X globalnego układu współrzędnych. Jeżeli pozycja ta przekracza wartość 400 pikseli, to zmiennej backward przypisujemy wartość true. Z kolei gdy pozycja obiektu light na osi X jest mniejsza od -400 pikseli, to wartość zmiennej backward ustawiamy na false. Po tych instrukcjach if kolejna sprawdza wartość zmiennej backward. Jeżeli jest ona prawdą, to obiekt light zmienia swoją pozycję na osi X, zmniejszając wartość właściwości x. Gdy wartość zmiennej backward jest fałszem, to pozycja światła zmienia się, zwiększając wartość właściwości x. if (light.x > 400) backward = true; if (light.x < -400) backward = false; if (backward) light.x--; else light.x++;
Dodatkowo aby pokazać planszę dookoła, użyliśmy właściwości rotationY, nieustannie zmniejszając jej wartość o 1. Na końcu po każdej operacji następuje odświeżenie sceny. plane.rotationY--; view.render();
Tabele 7.5 i 7.6 zawierają najważniejsze z metod i właściwości klasy HeightMap Modifier. Tabela 7.5. Właściwości klasy HeightMapModifier
Nazwa
Rodzaj
Wartość domyślna
Opis
Channel
uint
1
Kolor reprezentujący wysokie wartości z podanej mapy
heightMap
BitmapData
null
Obiekt BitmapData służący jako mapa do modyfikowania powierzchni
maxLevel
uint
255
Maksymalny poziom modyfikowania powierzchni
mesh
Mesh
null
Obiekt siatki modyfikowanej powierzchni wybranego obiektu
offset
Number
0
Określa przesunięcie względem osi Y dodane do każdego z punktów siatki obiektu
scale
Number
1
Określa skalę obliczonej wartości wysokości punktów
Modyfikuje położenie wierzchołków siatki wzdłuż ich wektorów normalnych
refreshPositions():void
Stosuje aktualną wartość przemieszczenia i ustawia ją jako początkową dla kolejnych zmian wartości
reset():void
Przywraca pierwotne wartości współrzędnych dla punktów obiektu
Elevation i SkinExtrude W poprzednim punkcie aby wygenerować nierówności, skorzystaliśmy z obiektów klas HeightMapModifier oraz Plane. W tym punkcie również stworzymy efekt zniekształcenia powierzchni, jednak stosując dwie inne klasy. Pierwszą z tych klas jest Elevation, a drugą SkinExtrude. Obie te klasy uzupełniają się nawzajem w działaniach. Dlatego omówimy je w tym jednym punkcie. Klasa Elevation zlokalizowana jest w pakiecie away3d.extrusions. Służy ona do ustalenia pozycji wierzchołków na podstawie danych pobranych z obiektu BitmapData. Informacje te generują punkty bazujące na kolorach stosowanej mapy. Tak jak w przypadku HeightMapModifier, współrzędna na osi Y wygenerowanych punktów uzależniona jest od koloru w wybranym miejscu. Klasa Elevation interpretuje kolory zastosowane na mapie, odwrotnie niż HeightMapModifier. W tym przypadku jaśniejsze kolory ustawiają wyższe wartości na osi Y. Samo stworzenie obiektu nie wystarczy do wygenerowania danych ukształtowania powierzchni. Aby otrzymać tablicę punktów, należy skorzystać z metody generate() i uzupełnić jej argumenty. Po pierwsze, podajemy źródło mapy powierzchni, przypisując obiekt BitmapData właściwości sourceBmd, która jest parametrem metody generate(). Następnie podajemy kanał kolorów, z których będziemy pobierali dane. Standardowo jest to kolor czerwony 'r'. Uzupełniając właściwości subdivisionX i subdivisionY, ustalamy liczbę segmentów względem osi X i Y. Dokładniejsze odwzorowanie ukształtowania zależy od większej liczby segmentów. Podając mniejsze liczby we właściwościach subdivisionX i subdivisionY, zwiększamy szczegółowość terenu. Standardowe wartości obu tych właściwości równe są 10.
326
Flash i ActionScript. Aplikacje 3D od podstaw
Ważną właściwością jest elevate. Podając jej wartość numeryczną, określa się skalę zróżnicowania ukształtowania. Klasa SkinExtrude, tak samo jak Elevation, zlokalizowana jest w pakiecie away3d. extrusions. SkinExtrude dziedziczy z klasy Mesh, co oznacza, że jej celem jest stworzenie trójwymiarowego obiektu. Przyjmując w konstruktorze jako atrybut aPoints tablicę wygenerowanych punktów współrzędnych, SkinExtrude tworzy obiekt siatki, który można dowolnie przemieszczać, modyfikować i pokrywać różnego rodzaju materiałami. Poza tym atrybutem ma również drugi o nazwie init. To obiekt typu Object, któremu można przypisać różne właściwości inicjacyjne. Aby pokryć teksturą całą powierzchnię obiektu klasy SkinExtrude, trzeba w drugim argumencie konstruktora przypisać właściwości coverAll wartość true.
Teraz zajmiemy się przerobieniem wcześniejszego przykładu, tak aby zastosować obie klasy Elevation i SkinExtrude. Wcześniej wspominaliśmy, że w klasie Elevation rozłożenie punktów na osi Y działa odwrotnie niż w klasie HeightMapModifier. Dlatego w tym przykładzie użyjemy mapy powierzchni z rysunku 7.18 z odwróconymi kolorami. Nowa mapa ukształtowania terenu wygląda tak jak na rysunku 7.20. Rysunek 7.20.
Plik służący jako mapa dla klasy Elevation
Z kolei efekt skompilowania kodu źródłowego tego punktu pokazano na rysunku 7.21. Różnice między tym przykładem a tym z poprzedniego punktu są znikome. Żeby móc to ocenić, przepisz i skompiluj poniższy kod źródłowy. Następnie omówimy jego poszczególne fragmenty.
Rozdział 7. Praca z obiektami Rysunek 7.21.
Ukształtowanie terenu z użyciem Elevation i SkinExtrude
package { import flash.display.BitmapData; import flash.display.Sprite; import flash.events.Event; import flash.geom.Vector3D; // import away3d.lights.PointLight3D; import away3d.extrusions.Elevation; import away3d.extrusions.SkinExtrude; import away3d.containers.View3D; import away3d.core.utils.Cast; import away3d.materials.WhiteShadingBitmapMaterial; public class ElevationExample extends Sprite { private var view:View3D; private var texture:WhiteShadingBitmapMaterial; private var extrude:SkinExtrude; private var elevation:Elevation; private var light:PointLight3D; private var backward:Boolean = false; private var verts:Array; public function ElevationExample():void { if (stage) init(); else addEventListener(Event.ADDED_TO_STAGE, init); } private function init(e:Event = null):void
327
328
Flash i ActionScript. Aplikacje 3D od podstaw { removeEventListener(Event.ADDED_TO_STAGE, init); addEventListener(Event.ENTER_FRAME, onEnterFrame); // view = new View3D(); view.x = stage.stageWidth * .5; view.y = stage.stageHeight * .5; addChild(view); // view.camera.y = 600; view.camera.lookAt(new Vector3D(0, 0, 0)); // light = new PointLight3D(); light.specular = .05; light.diffuse = 0.75; light.ambient = 0.5; view.scene.addLight(light); // texture = new WhiteShadingBitmapMaterial(Cast.bitmap ('terrainTexture')); texture.smooth = true; // elevation = new Elevation(); verts = elevation.generate(Cast.bitmap('terrainMap'), 'r', 10, 10, 2, 2, .25); extrude = new SkinExtrude(verts, { coverall:true } ); extrude.material = texture; extrude.rotationX = 90; extrude.position = new Vector3D(0, 0, 0); extrude.pivotPoint = new Vector3D(256, 256, 0); view.scene.addChild(extrude); } private function onEnterFrame(e:Event):void { if (light.x > 400) backward = true; if (light.x < -400) backward = false; // if (backward) light.x--; else light.x++; extrude.rotationY--; view.render(); } } }
Aby wygenerować ukształtowanie terenu w tym kodzie źródłowym, skorzystaliśmy z dwóch klas: SkinExtrude oraz Elevation. Aby tak samo jak w przykładzie HeightMapModifier uwydatnić krzywizny siatki, zastosowaliśmy między innymi źródło światła PointLight3D i teksturę rodzaju WhiteShadingBitmapMaterial.
Rozdział 7. Praca z obiektami
329
W konstruktorze klasy odwołujemy się do metody init(), zaraz gdy zainicjowany zostanie obiekt Stage. W metodzie init() na samym początku stworzyliśmy widok Away3D, ustawiając jego pozycję w centrum okna aplikacji. view = new View3D(); view.x = stage.stageWidth * .5; view.y = stage.stageHeight * .5; addChild(view);
Aby kamerą objąć cały obiekt planszy, musieliśmy umieścić ją wyżej w przestrzeni i skierować ją na środek sceny. view.camera.y = 600; view.camera.lookAt(new Vector3D(0, 0, 0));
Po wykonaniu tych czynności stworzyliśmy nowy obiekt światła. Ustawiliśmy przykładowe wartości dla jego właściwości specular, diffuse oraz ambient, po czym stosując metodę addLight(), dodaliśmy obiekt light jako źródło światła na scenie. light = new PointLight3D(); light.specular = .05; light.diffuse = 0.75; light.ambient = 0.5; view.scene.addLight(light);
Do pokrycia powierzchni terenu zastosowaliśmy materiał WhiteShadingBitmap Tak samo jak w przykładzie dla klasy HeightMapModifier, jako źródło dla tekstury wykorzystaliśmy wcześniej dodany do zasobów fla plik graficzny. Przypisując wartość true właściwości smooth, wygładziliśmy wyświetlaną na powierzchni teksturę.
Material.
texture = new WhiteShadingBitmapMaterial(Cast.bitmap('terrainTexture')); texture.smooth = true;
Następnie zajęliśmy się tworzeniem powierzchni. W pierwszej kolejności potrzebowaliśmy punktów, które określają nierówności terenu. Do tego celu stworzyliśmy obiekt klasy Elevation i wywołaliśmy jego metodę generate(). Jako pierwszy argument podaliśmy instancję pliku graficznego jako źródło do stworzenia punktów. W następnym argumencie, podając jako jego wartość 'r', przypisaliśmy kanał, z którego pobierane będą informacje. Liczbę 10 przypisaliśmy argumentom subdivisionX oraz subdivisionY, pozostawiając tym samym standardową liczbę segmentów w wierszu i kolumnie. Ponieważ wymiary mapy powierzchni są o połowę mniejsze od tekstury, którą jest pokryta, należało dwukrotnie zwiększyć wartości scalingX oraz scalingY.
330
Flash i ActionScript. Aplikacje 3D od podstaw
Aby uzyskać przybliżony efekt do tego z przykładu dla klasy HeightMapModifier, musieliśmy dodatkowo zmniejszyć o połowę wartość właściwości elevate, tak aby zmienić wysokość wygenerowanych zniekształceń. elevation = new Elevation(); verts = elevation.generate(Cast.bitmap('terrainMap'), 'r', 10, 10, 2, 2, .25);
Po wygenerowaniu tablicy punktów verts wykorzystaliśmy te punkty przy tworzeniu obiektu klasy SkinExtrude. Podając je w pierwszym argumencie aPoints, ustawiliśmy wygląd powierzchni. W drugim argumencie właściwości coverall przypisaliśmy wartość true. Dzięki temu sprawiliśmy, że tekstura pokryła w jednolity sposób całą powierzchnię obiektu extrude. extrude = new SkinExtrude(verts, { coverall:true } );
W kolejnych linijkach kodu obiekt extrude pokryliśmy wcześniej stworzoną teksturą oraz zmieniliśmy jego położenie. Z uwagi na to, że standardowo obiekty SkinExtrude ustawione są pionowo, musieliśmy przy użyciu właściwości rotationX obrócić go o 90 stopni. W odróżnieniu od innych trójwymiarowych obiektów, punkt zerowy naszej planszy znajduje się w jej lewym górnym rogu. Ponieważ obracamy planszę względem osi Y, musieliśmy przesunąć punkt zerowy obiektu extrude o połowę wymiarów planszy. Do tego celu właściwości pivotPoint przypisaliśmy nowy obiekt Vector3D. Po zapisaniu wszystkich ustawień dodaliśmy obiekt do sceny. extrude.material = texture; extrude.rotationX = 90; extrude.position = new Vector3D(0, 0, 0); extrude.pivotPoint = new Vector3D(256, 256, 0); view.scene.addChild(extrude);
W metodzie onEnterFrame() wykonujemy te same czynności co w przykładzie dla klasy HeightMapModifier. Po pierwsze, sprawdzamy położenie światła na osi X. Następnie w zależności od tej pozycji przypisujemy inną wartość zmiennej backward i ustalamy kierunek poruszania obiektu light. Obrót planszy uzyskaliśmy przez zmniejszanie wartości rotationY obiektu extrude. Z każdym wywołaniem tej metody po wykonaniu wszystkich operacji odświeżamy obraz widoku. Tabele 7.7 i 7.8 zawierają właściwości oraz metody klasy Elevation.
Rozdział 7. Praca z obiektami
331
Tabela 7.7. Właściwości klasy Elevation
Nazwa
Rodzaj
Wartość domyślna Opis
maxElevation
Number
255
Określa maksymalny poziom generowania zniekształceń
minElevation
Number
0
Określa minimalny poziom generowania zniekształceń
Tworzy obiekt tablicy Array zawierający informacje zmodyfikowanej siatki obiektu
W tabeli 7.9 zamieszczono konstruktor klasy SkinExtrusion. Tabela 7.9. Metody klasy SkinExtrusion
Nazwa
Opis
SkinExtrude(aPoints:Array, init:Object)
Konstruktor
Explode i Merge Biblioteka Away3D ma w swoich zasobach klasy umożliwiające rozłożenie na czynniki pierwsze powierzchni obiektu oraz połączenie różnych elementów w jedną spójną całość. Do tych zadań służą klasy Explode oraz Merge, zlokalizowane w pakiecie away3d.tools. Stworzenie i użycie obiektu klasy Explode powoduje rozdzielenie siatki wybranego obiektu na pojedyncze trójkąty. Każdy z nich ma postać nowego trójwymiarowego elementu, co pozwala na wykonanie na nim dowolnych zmian pozycji bądź skali, bez ingerencji w otoczenie, w jakim się znajduje. Należy zaznaczyć, że klasa Explode sama w sobie nie tworzy animacji wybuchu wybranego obiektu. Aby osiągnąć taki efekt, należy wykonać odpowiednie operacje na każdym z trójkątów. W przykładzie dla tego punktu przedstawimy jeden ze sposobów wykonania eksplozji obiektu. Efekt, który uzyskamy po przepisaniu i skompilowaniu kodu źródłowego, przedstawiono na rysunku 7.22.
332
Flash i ActionScript. Aplikacje 3D od podstaw
Rysunek 7.22. Zastosowanie klasy Explode na obiekcie klasy Sphere
Sposób wykorzystania i działania obiektu klasy Explode omówimy, gdy przepiszesz i skompilujesz następujący kod źródłowy. Wewnątrz wykorzystano odwołania do tekstury kuli i tła, dlatego do poprawnego działania przykładu będzie potrzebny plik fla zawierający źródła tych bitmap. package { import flash.display.StageAlign; import flash.display.StageQuality; import flash.display.StageScaleMode; import flash.display.Sprite; import flash.events.Event; import flash.geom.Vector3D; // import away3d.containers.View3D; import away3d.containers.ObjectContainer3D; import away3d.core.base.Object3D; import away3d.core.utils.Cast; import away3d.materials.BitmapMaterial; import away3d.primitives.Sphere; import away3d.tools.Explode; // import com.greensock.TweenMax; public class ExplosionExample extends Sprite { private var view:View3D; private var deathstar:Sphere; private var explodedDeathstar:ObjectContainer3D; public function ExplosionExample():void { if (stage) init(); else addEventListener(Event.ADDED_TO_STAGE, init); }
Rozdział 7. Praca z obiektami
333
private function init(e:Event = null):void { stage.quality = StageQuality.LOW; stage.align = StageAlign.TOP_LEFT; stage.scaleMode = StageScaleMode.NO_SCALE; removeEventListener(Event.ADDED_TO_STAGE, init); addEventListener(Event.ENTER_FRAME, onEnterFrame); stage.addEventListener(Event.RESIZE, onResize); view = new View3D(); addChild(view); deathstar = new Sphere( { segmentsH:16, segmentsW:16, radius:180, material:new BitmapMaterial(Cast.bitmap('deathstar')) } ); var explode:Explode = new Explode(true); explodedDeathstar = explode.apply(deathstar) as ObjectContainer3D; view.scene.addChild(explodedDeathstar); destroyDeathstar(); onResize(); } private function destroyDeathstar():void { for (var i:uint = 0; i < explodedDeathstar.children.length; i++) { TweenMax.to(explodedDeathstar.children[i], 10, { x:randomPosition(1000, 2000), y:randomPosition(1000, 2000), z:randomPosition(1000, 2000), onComplete:removePart, onCompleteParams:[explodedDeathstar.children[i]] }); } } private function removePart(part:Object3D):void { explodedDeathstar.removeChild(part); } private function randomPosition(min:Number, max:Number):Number { return Math.floor(Math.random() * max - min); } private function onEnterFrame(e:Event):void { view.render(); } private function onResize(e:Event = null):void
334
Flash i ActionScript. Aplikacje 3D od podstaw { view.x = universe.x = stage.stageWidth * .5; view.y = universe.y = stage.stageHeight * .5; } } }
Gdy zastanawiałem się nad przykładem obrazującym zastosowanie klasy Exploprzypomniał mi się fragment filmu Gwiezdne wojny: Powrót Jedi, w którym zniszczono Gwiazdę Śmierci. Aby stworzyć podobną stację Imperium Galaktycznego, zastosowaliśmy klasę Sphere oraz materiał BitmapMaterial, odwołując się do źródła obrazu poprzez klasę Cast. Niezbędnym elementem tego przykładu jest oczywiście klasa Explode, która podzieli na fragmenty siatkę kuli. de,
W klasie ExplosionExample zdefiniowaliśmy obiekty, które będą potrzebne w całym jej ciele. Obiekt klasy Sphere nazwaliśmy deathstar, a jej rozdzieloną wersję zapisaliśmy w postaci obiektu klasy ObjectContainer3D o nazwie explodedDeathstar. Przykład zaczęliśmy profilaktycznie od sprawdzenia, czy obiekt stage został utworzony. W metodzie init() na początku zapisaliśmy standardowe ustawienia okna aplikacji oraz dodaliśmy potrzebne detektory zdarzeń Event.ENTER_FRAME i Event.RESIZE. W następnej kolejności dodaliśmy widok ze standardowymi ustawieniami i utworzyliśmy obiekty deathstar oraz explodedDeathstar. Obiektowi kuli przypisaliśmy nową liczbę segmentów w pionie i poziomie, zmieniliśmy długość promienia i dodaliśmy teksturę o nazwie deathstar, umieszczoną w zasobach pliku fla. deathstar = new Sphere( { segmentsH:16, segmentsW:16, radius:180, material:new BitmapMaterial(Cast.bitmap('deathstar')) } );
Po utworzeniu obiektu kuli nie dodaliśmy go do sceny, ponieważ nie jest nam on potrzebny w całej okazałości. To, co chcieliśmy wyświetlić, to jego podzielone fragmenty, a do uzyskania tego efektu stworzyliśmy nowe obiekty. Pierwszy z nich to obiekt klasy Explode o takiej samej nazwie. Wpisując w konstruktorze tej klasy wartość true, określiliśmy, że każdy trójkąt będzie osobnym obiektem klasy Mesh. var explode:Explode = new Explode(true);
Drugi utworzony obiekt to kontener explodedDeathstar, którego zawartość wypełniliśmy, stosując metodę apply() obiektu Explode. Użycie tej metody polegało na podaniu w argumencie elementu, którego siatka miała być podzielona. W naszym przykładzie odwołaliśmy się do wcześniej utworzonego obiektu deathstar. Po tej operacji obiekt explodedDeathstar mogliśmy umieścić na scenie Away3D.
Rozdział 7. Praca z obiektami
335
explodedDeathstar = explode.apply(deathstar) as ObjectContainer3D; view.scene.addChild(explodedDeathstar);
Animację rozproszenia po całej scenie obiektów kontenera explodedDeathstar zapisaliśmy w osobnej metodzie destroyDeathstar(). destroyDeathstar();
W metodzie destroyDeathstar() umieściliśmy pętlę for, która wykonuje swój blok kodu dla każdego z elementów uwzględnionych wewnątrz kontenera explodedDeath star. Zadaniem tej metody jest przesunięcie obiektu za pomocą klasy TweenMax do losowej pozycji z wybranego przedziału liczbowego. Po każdym wykonaniu takiej animacji wywoływana jest metoda removePart(), która usuwa poszczególny element z kontenera. for (var i:uint = 0; i < explodedDeathstar.children.length; i++) { TweenMax.to(explodedDeathstar.children[i], 10, { x:randomPosition(1000, 2000), y:randomPosition(1000, 2000), z:randomPosition(1000, 2000), onComplete:removePart, onCompleteParams:[explodedDeathstar.children[i]] }); }
Określenie nowych pozycji dla trójkątów zapisaliśmy w metodzie randomPosition(), której argumenty min i max określają przedział liczbowy dla wylosowanej wartości. return Math.floor(Math.random() * max - min);
W tabelach 7.10 i 7.11 wypisano metody oraz właściwości klasy Explode. Tabela 7.10. Właściwości klasy Explode
Nazwa
Rodzaj
Wartość
Opis
recenter
Boolean
false
Jeżeli odseparowane części są obiektami klasy Mesh, to właściwość ta określa, czy ich współrzędne mają być na nowo wyśrodkowane
unicmeshes
Boolean
false
Określa, czy odseparowane części mają mieć postać obiektów klasy Mesh
Tabela 7.11. Metody klasy Explode
Nazwa
Opis
Explode(unicmeshes:Boolean, recenter:Boolean)
Konstruktor
apply(object3d:Object3D):Object3D
Wykonuje rozłączenie siatki wybranego obiektu
336
Flash i ActionScript. Aplikacje 3D od podstaw
Mimo że w przykładzie nie skorzystaliśmy z klasy Merge, warto o niej wspomnieć. W przeciwieństwie do Explode zadaniem tej klasy jest połączenie różnych obiektów w spójną całość. Proces ten można wykonać w następujący sposób: var merge:Merge = new Merge(); var mergedObject:Mesh = new Mesh(); for (var i:int = 0; i < explodedObject.children.length; i++) { merge.apply(mergedObject,explodedObject.children[i]); }
W tym kodzie dodaliśmy obiekt klasy Merge, nie zmieniając jego standardowych ustawień, oraz pusty obiekt klasy Mesh. Zakładając, że wcześniej stworzyliśmy kontener o nazwie explodedObject, który zawiera potrzebne kawałki rozbitego elementu, połączyliśmy je, stosując metodę apply() obiektu klasy Merge wewnątrz pętli for. Z każdą jej iteracją do obiektu mergedObject dodaliśmy kolejną część z kontenera explodedObject. Zastosowań dla klasy Merge może być wiele. Jedną z sytuacji, w której powinno się z niej skorzystać, jest konieczność połączenia geometrii poszczególnych elementów. Do tego celu nie posłuży nam zwykły addChild() klasy ObjectContainer3D, dlatego warto wiedzieć o istnieniu takiej klasy i zapoznać się z zawartością tabel 7.12 i 7.13. Tabela 7.12. Właściwości klasy Merge
Nazwa
Rodzaj
keepmaterial
Boolean
keepMaterial
Boolean
Wartość
Opis Określa, czy dołączany obiekt ma zachować pokrywający go materiał
false
Zwraca ustaloną wartość właściwości keepmaterial
objectspace
Boolean
true
Określa, czy dołączany obiekt ma zachować lokalny układ współrzędnych
unicgeometry
Boolean
false
Określa, czy dołączany obiekt ma zachować współrzędne uv oraz wierzchołków
Podsumowanie Każdy z trójwymiarowych obiektów ma metody i właściwości pozwalające na jego przemieszczanie, rotację i skalowanie. Aby zmienić pozycję na konkretnej osi, można się posłużyć właściwościami x, y, z. W przypadku zmiany pozycji na wszystkich osiach można zastosować właściwość position. Metoda translate() służy do przemieszczenia obiektu w dowolnym kierunku wzdłuż wektora o określonej długości. Metodą moveTo() można przenieść obiekt w dowolny punkt w przestrzeni. Do przemieszczania obiektu wzdłuż osi lokalnego układu współrzędnych można wykorzystać metody: moveForward() i moveBackward() — przemieszczające obiekt do przodu i wstecz wzdłuż osi Z, moveUp() i moveDown() — przemieszczające obiekt w górę i w dół wzdłuż osi Y, moveLeft() i moveRight() — przemieszczające obiekt w lewo i w prawo wzdłuż osi X. Właściwość pivotPoint określa punkt środkowy, wokół którego obraca się wybrany obiekt. Do zmiany kąta nachylenia w poszczególnych osiach służą właściwości rotationX, rotationY i rotationZ. Jeżeli zajdzie potrzeba, można przenieść punkt pivotPoint, stosując metodę movePivot(). Jest to pożyteczne w przypadku tworzenia efektu orbitowania. Metodami lookAt() oraz rotateTo() można skierować obiekt w wybrany punkt w przestrzeni. Metodami roll(), pitch() oraz yaw() można obracać obiekt wokół własnej osi. Do zmiany skali obiektu służą właściwości scaleX, scaleY, scaleZ oraz metoda scale(). W Away3D macierzą transformacji jest obiekt klasy Matrix3D o wymiarach 4 na 4. Do generowania ścieżek służą klasy Path oraz PathExtrusion. Ścieżka składa się z dwóch tablic punktów Vector3D, które wyznaczają jej tor oraz definiują profil jej podłoża.
338
Flash i ActionScript. Aplikacje 3D od podstaw
Podstawą do tworzenia zniekształceń powierzchni jest bitmapa z dwoma głównymi kolorami, których różne odcienie określają pozycje punktów na osi Y. Klasami generującymi zniekształcenia powierzchni są HeightMapModifier, Elevation i SkinExtrude. Do rozdzielania trójkątów obiektu trójwymiarowego służy obiekt klasy Explode. Do połączenia siatek różnych obiektów należy zastosować obiekt klasy Merge. Przy stosowaniu obiektu Merge można określić, czy każdy z obiektów powinien zachować swoje właściwości.
Rozdział 8. Interaktywność Jedną z głównych zalet pisania aplikacji na platformę Flash jest to, że można tworzyć ciekawe interaktywne gry i strony internetowe. W tego typu projektach większość operacji wykonywanych jest za pomocą myszki, klawiatury i coraz częściej kamer. Jeżeli masz jakieś doświadczenie w realizacji tego typu projektów, z pewnością łatwo połączysz zdobytą wiedzę z informacjami zawartymi w tym rozdziale. Jeżeli są to Twoje początki z aplikacjami tworzonymi na platformę Adobe Flash Player, nie przejmuj się, na tym etapie wiesz już wystarczająco dużo. Tym, co łączy zwykłe dwuwymiarowe aplikacje z projektami bazującymi na bibliotece Away3D, jest to, że w obu przypadkach można korzystać z urządzeń takich jak mysz czy klawiatura. Stosując szereg standardowych metod, zdarzeń z ActionScript 3.0 oraz Away3D, można zaprogramować odpowiednie operacje, które wywoływane będą przez ingerencję użytkownika. Czytając ten rozdział, dowiesz się: Jak obsługuje się zdarzenia wciśnięcia i zwolnienia klawisza klawiatury. Czym są i jakie role odgrywają klasy KeyboardEvent, Keyboard oraz KeyLocation. Jak sterować trójwymiarowym obiektem za pomocą klawiatury. Czym jest klasa MouseEvent3D. W jakich sytuacjach i jak stosować MouseEvent oraz MouseEvent3D. Jak przemieszczać trójwymiarowe obiekty przy użyciu myszki. Jak malować po powierzchni trójwymiarowych obiektów.
340
Flash i ActionScript. Aplikacje 3D od podstaw
Używanie klawiatury W większości gier i innych aplikacji niekiedy obiekty sterowane są za pomocą klawiatury. W aplikacjach Flash do wykrywania czynności wykonywanych przez użytkownika na klawiaturze stosuje się obiekt zdarzenia KeyboardEvent.
Klasa KeyboardEvent Klasa KeyboardEvent, ponieważ reprezentuje obiekt zdarzenia, zlokalizowana jest w pakiecie flash.events. Ma ona dwie stałe: KeyboardEvent.KEY_DOWN i KeyboardEvent. KEY_UP, które określają przypadki wciśnięcia i zwolnienia klawisza na klawiaturze. Aby móc korzystać z tych zdarzeń, należy metodę addEventListener wywołać na obiekcie stage, tak jak to pokazano poniżej: stage.addEventListener(KeyboardEvent.KEY_DOWN,onKeyDown); stage.addEventListener(KeyboardEvent.KEY_UP,onKeyUp);
Samo wywołanie detektora nie wystarczy do podjęcia konkretnych akcji. W ciele metody wywoływanej podczas wystąpienia zdarzenia należy rozpoznać, który klawisz zmienił swój stan. Do tego celu służą dwie właściwości: keyCode i charCode. Pierwsza zwraca wartość numeryczną odpowiadającą numerowi klawisza, a druga określa wartość liczbową kodu znaku wciśniętego klawisza. Istnieje zasadnicza różnica między wartościami tych właściwości. Polega ona na tym, że kod klawisza jest przypisany do konkretnego klawisza fizycznego, natomiast kod znaku jest przypisany do konkretnego znaku. Czyli jeśli na przykład chcemy wykorzystać klawisz 5 na klawiaturze numerycznej i w górnym rzędzie, należy odwołać się do wartości właściwości charCode. Domyślny zestaw kodów znaków UTF-8 zawiera w swoim zbiorze identyfikatory dla każdego ze znaków z osobna, odróżnia tym samym wielkość liter.
Na klawiaturze umieszczone są również klawisze specjalne, takie jak Ctrl, Alt czy Shift. Do określenia, czy któryś z tych klawiszy zmienił swój stan, służą specjalne właściwości: ctrlKey, altKey i shiftKey. Wartości tych właściwości są typu Boolean, gdzie true oznacza, że klawisz jest wciśnięty. Tabele 8.1, 8.2 oraz 8.3 zawierają metody, właściwości i stałe klasy KeyboardEvent.
Rozdział 8. Interaktywność
341
Tabela 8.1. Właściwości klasy KeyboardEvent
Nazwa
Rodzaj
Wartość domyślna Opis
altKey
Boolean
false
Określa, czy klawisz Alt jest wciśnięty
ctrlKey
Boolean
false
Określa, czy klawisz Ctrl jest wciśnięty
controlKey
Boolean
false
Określa, czy klawisz Control jest wciśnięty
commandKey
Boolean
false
Określa, czy klawisz Command jest wciśnięty
shiftKey
Boolean
false
Określa, czy klawisz Shift jest wciśnięty
charCode
uint
Wartość liczbowa kodu znaku wciśniętego klawisza
keyCode
uint
Wartość liczbowa odpowiadająca numerowi klawisza na klawiaturze
Klasa Keyboard Keyboard jest klasą typu final, umieszczoną w pakiecie flash.ui. Ma ona zdefiniowane kody większości znaków w postaci stałych publicznych. Do jej metod oraz właściwości można odwoływać się bez tworzenia obiektu. Dzięki tym cechom Keyboard stanowi swego rodzaju słownik do stosowania w instrukcjach warunkowych takich jak if czy switch.
342
Flash i ActionScript. Aplikacje 3D od podstaw switch(event.charCode) { case Keyboard.UP: trace('Wciśnięto klawisz górnej strzałki'); break; case Keyboard.DOWN: trace('Wciśnięto klawisz dolnej strzałki'); break; case Keyboard.LEFT: trace('Wciśnięto klawisz lewej strzałki'); break; case Keyboard.RIGHT: trace('Wciśnięto klawisz prawej strzałki'); break; }
Tabele 8.4 i 8.5 zawierają metody i właściwości klasy Keyboard. Ważniejsze od nich są jednak stałe umieszczone w tabeli 8.6. Keyboard ma dużą liczbę stałych, dlatego przedstawiono tylko niektóre z nich. Tabela 8.4. Właściwości klasy Keyboard
Nazwa
Rodzaj
Wartość domyślna
Opis
capsLock
Boolean
false
Określa, czy klawisz Caps Lock jest wciśnięty
hasVirtualKeyboard
Boolean
false
Określa, czy udostępniona jest klawiatura wirtualna
numLock
Boolean
false
Określa, czy klawisz Num Lock jest wciśnięty
physicalKeyboardType
String
Określa rodzaj klawiatury
Tabela 8.5. Metody klasy Keyboard
Nazwa
Opis
isAccessible():Boolean
Określa, czy ostatnio wciśnięty klawisz jest dostępny dla innych plików SWF
Tabela 8.6. Stałe klasy Keyboard
Nazwa
Opis
A … Z
Klawisze alfabetyczne
NUMBER_0 … NUMBER_9
Klawisze numeryczne umieszczone w górnym rzędzie
NUMPAD_0 … NUMPAD_9
Klawisze numeryczne umieszczone na klawiaturze numerycznej
F1 … F12
Klawisze funkcyjne
ENTER
Klawisz Enter
ESCAPE
Klawisz Esc
CONTROL
Klawisz Ctrl
BACKSPACE
Klawisz Backspace
SPACE
Klawisz spacji
LEFT
Klawisz lewej strzałki
Rozdział 8. Interaktywność
343
Tabela 8.6. Stałe klasy Keyboard (ciąg dalszy)
Nazwa
Opis
RIGHT
Klawisz prawej strzałki
UP
Klawisz górnej strzałki
DOWN
Klawisz dolnej strzałki
Klasa KeyLocation W tabeli 8.1 punktu „Klasa KeyboardEvent” wspomniano o tym, że właściwość keyLocation określa położenie wciskanego lub zwalnianego klawisza. W sytuacji gdy dany klawisz ma swoje duplikaty w innych miejscach na klawiaturze, zastosowanie tej właściwości pozwala na odróżnienie na przykład lewego i prawego klawisza Ctrl, co umożliwia przypisanie każdemu innych działań. Do określenia wartości właściwości keyLocation klasy KeyboardEvent służą stałe klasy KeyLocation. Zlokalizowana w pakiecie flash.ui klasa KeyLocation — tak samo jak Keyboard — jest klasą z przypisanym atrybutem final. KeyLocation można traktować jako mały słownik, który ma w swoich zasobach określenia dostępnych pozycji na klawiaturze. if(event.charCode == Keyboard.CONTROL && event.keyLocation == KeyLocation.LEFT) { trace('Wciśnięto lewy Ctrl'); } else if(event.charCode == Keyboard.CONTROL && event.keyLocation == KeyLocation.RIGHT) { trace('Wciśnięto prawy Ctrl'); }else { trace('Wciśnięto inny klawisz'); }
Ponieważ klasa KeyLocation nie ma swoich metod i właściwości, tylko stałe określające położenie, w tym punkcie uwzględniono jedną tabelę 8.7. Tabela 8.7. Stałe klasy KeyLocation
Nazwa
Opis
D_PAD
Określa, czy wciśnięty klawisz znajduje się na panelu kierunkowym
LEFT
Określa, czy wciśnięty klawisz znajduje się po lewej stronie klawiatury
RIGHT
Określa, czy wciśnięty klawisz znajduje się po prawej stronie klawiatury
344
Flash i ActionScript. Aplikacje 3D od podstaw
Tabela 8.7. Stałe klasy KeyLocation (ciąg dalszy)
Nazwa
Opis
NUM_PAD
Określa, czy wciśnięty klawisz znajduje się na klawiaturze numerycznej lub w jej wirtualnym odpowiedniku
STANDARD
Określa, czy pozycja klawisza nie została określona w konkretnych pozycjach
Sterowanie statkiem kosmicznym w przestrzeni Skoro poznaliśmy klasy obsługujące interakcje użytkownika z użyciem klawiatury, przyszedł czas na zastosowanie zdobytej wiedzy w praktyce. Do tego celu wykorzystamy możliwość sterowania futurystycznym pojazdem w przestrzeni kosmicznej. Aplikacja ta składa się z dwóch warstw. Pierwsza to przestrzeń trójwymiarowa, w której porusza się pojazd, druga warstwa to element interfejsu użytkownika, w którym widoczne są aktualna prędkość pojazdu oraz spis klawiszy i akcji, jakie wywołują. Całość przedstawiono na rysunku 8.1.
Rysunek 8.1. Zrzut ekranu z aplikacji sterowania statkiem kosmicznym
Widoczny statek kosmiczny to jeden z darmowych modeli w formacie 3DS, które są dostępne w sieci. W pozycji początkowej pojazd ten skierowany jest dziobem w stronę osi Z. Gdy wciskamy klawisze lewej i prawej strzałki, obiekt obraca się
Rozdział 8. Interaktywność
345
wokół osi Z. Natomiast klawiszami strzałki górnej i dolnej odpowiednio podnosi się i opuszcza dziób. Wprawienie w ruch statku kosmicznego następuje po wciśnięciu klawisza spacji. Zwroty i skręty uzależnione są od kąta nachylenia pojazdu i prędkości, z jaką się porusza. Standardowo prędkość jest równa 50, lecz można ją zwiększyć, wciskając klawisz A, lub zmniejszyć klawiszem Z. Aby szybko zredukować prędkość do jej standardowej wartości, wystarczy użyć klawisza C. W sytuacji gdy stracimy pojazd z pola widzenia, można przywrócić go do pozycji początkowej, wciskając klawisz X, lub namierzyć kamerą jego pozycję, używając klawisza T. Ponieważ kamery zostaną omówione dopiero w rozdziale 9. „Kamery”, skorzystamy ze standardowej, utworzonej wraz z widokiem. Teraz przepisz i skompiluj kod źródłowy tego przykładu, a następnie zajmiemy się omawianiem jego poszczególnych fragmentów. package { import flash.display.StageAlign; import flash.display.StageScaleMode; import flash.display.MovieClip; import flash.display.Sprite; import flash.events.Event; import flash.events.KeyboardEvent; import flash.geom.Vector3D; import flash.ui.Keyboard; // import away3d.containers.ObjectContainer3D; import away3d.containers.View3D; import away3d.loaders.Loader3D; import away3d.loaders.Max3DS; import com.greensock.TweenMax; public class KeyboardEventsExample extends Sprite { private var view:View3D; private var speed:Number = 5; private var shipLoader:Loader3D; private var ship:ObjectContainer3D; private var leftArrowDown:Boolean = false; private var rightArrowDown:Boolean = false; private var upArrowDown:Boolean = false; private var downArrowDown:Boolean = false; private var spaceDown:Boolean = false; private var trackShip:Boolean = false; private var speedMonitor:Monitor; public function KeyboardEventsExample():void { if (stage) init(); else addEventListener(Event.ADDED_TO_STAGE, init); }
} if (e.keyCode == Keyboard.A) { speed += .5; speedMonitor.txt.text = String(speed * 10); } if (e.keyCode == Keyboard.Z) { speed -= .5; speedMonitor.txt.text = String(speed * 10); } if (e.keyCode == Keyboard.LEFT) leftArrowDown = true; if (e.keyCode == Keyboard.RIGHT) rightArrowDown = true; if (e.keyCode == Keyboard.UP) upArrowDown = true; if (e.keyCode == Keyboard.DOWN) downArrowDown = true if (e.keyCode == Keyboard.SPACE) spaceDown = true; } private function onKeyUp(e:KeyboardEvent):void { if (e.keyCode == Keyboard.LEFT) leftArrowDown = false; if (e.keyCode == Keyboard.RIGHT) rightArrowDown = false; if (e.keyCode == Keyboard.UP) upArrowDown = false; if (e.keyCode == Keyboard.DOWN) downArrowDown = false if (e.keyCode == Keyboard.SPACE) spaceDown = false; if (e.keyCode == Keyboard.X) { trackShip = false; view.camera.lookAt(new Vector3D(0, 0, 0)); TweenMax.to(ship, 1, { x:0, y:0, z:0, rotationY:0, rotationX:0, rotationZ:0 } ); } if (e.keyCode == Keyboard.T) { trackShip = !trackShip; } } private function onEnterFrame(e:Event):void { if (spaceDown) ship.moveForward(speed); if (leftArrowDown) ship.roll(-5); if (rightArrowDown) ship.roll(5); if (upArrowDown) ship.pitch(5); if (downArrowDown) ship.pitch( -5); if (trackShip) view.camera.lookAt(ship.scenePosition); view.render(); } } }
348
Flash i ActionScript. Aplikacje 3D od podstaw
W tym przykładzie skorzystaliśmy z podstawowych klas języka ActionScript 3.0 między innymi do obsługi zdarzeń użycia klawiatury, słownika kodów klawiszy oraz wyświetlenia interfejsu. import flash.display.MovieClip; import flash.events.KeyboardEvent; import flash.ui.Keyboard;
Z Away3D poza widokiem użyliśmy klas służących do ładowania i umieszczania na scenie zewnętrznych obiektów 3D. W tym konkretnym przypadku modeli w formacie 3DS. import import import import
Dodatkowo do ustawienia statku w pozycji zerowej sceny skorzystaliśmy z biblioteki TweenMax. import com.greensock.TweenMax;
W klasie KeyboardEventsExample na początku zdefiniowaliśmy potrzebne obiekty i zmienne. Jako obiekt reprezentujący model 3D statku kosmicznego wykorzystaliśmy obiekt klasy Loader3D i nazwaliśmy go shipLoader. Wewnętrzne ustawienia pozycji modelu uzależnione są od tego, jak został on wyeksportowany. Dlatego właśnie zawartość obiektu shipLoader umieścimy w kontenerze o nazwie ship, aby w jego wnętrzu dokonywać zmian. Obiekt o nazwie speedMonitor klasy Monitor to reprezentant obiektu interfejsu. Kolejne linijki to zmienne stosowane do obsługi pojazdu. Zmienna speed to stopień zmiany prędkości statku, z kolei trackShip określa, czy kamera ma śledzić obiekt statku, czy nie. Zmienne: leftArrowDown, rightArrowDown, upArrowDown, downArrowDown oraz spaceDown określają, czy wybrany klawisz został wciśnięty. private private private private private private private private private private private
W konstruktorze uruchamiamy metodę init(), z chwilą gdy obiekt stage zostanie zainicjowany.
Rozdział 8. Interaktywność
349
if (stage) init(); else addEventListener(Event.ADDED_TO_STAGE, init);
W metodzie init() w pierwszych dwóch linijkach usunęliśmy detektor zdarzenia Event.ADDED_TO_STAGE i utworzyliśmy nowy dla Event.ENTER_FRAME. W kolejnych linijkach ustawiliśmy właściwości dla okna aplikacji i dodaliśmy kolejne rejestratory zdarzeń dla obiektu stage. Pierwszy z nich uruchamia metodę onResize() z każdą zmianą rozmiarów okna. Kolejne dwa słuchają zdarzeń wciśnięcia i zwolnienia klawiszy klawiatury. removeEventListener(Event.ADDED_TO_STAGE, init); addEventListener(Event.ENTER_FRAME, onEnterFrame); stage.scaleMode = StageScaleMode.NO_SCALE; stage.align = StageAlign.TOP_LEFT; stage.addEventListener(Event.RESIZE, onResize); stage.addEventListener(KeyboardEvent.KEY_DOWN, onKeyDown); stage.addEventListener(KeyboardEvent.KEY_UP, onKeyUp);
W dalszej części metody init() stworzyliśmy widok Away3D i zmieniliśmy pozycję kamery na osi Z, tak aby przybliżyć ją do obiektu statku kosmicznego. view = new View3D(); addChild(view); view.camera.z = -100;
Po utworzeniu widoku dodaliśmy obiekt speedMonitor, który przedstawia listę dostępnych klawiszy i prędkość pojazdu. Wyświetloną w panelu użytkownika prędkość początkową uzyskaliśmy z iloczynu wartości zmiennej speed i liczby 10. speedMonitor = new Monitor(); speedMonitor.txt.text = String(speed * 10); addChild(speedMonitor);
Na końcu init() wywołujemy metodę loadShipModel() i onResize(), aby ustawić wszystkie obiekty w odpowiednim miejscu. loadShipModel(); onResize();
W metodzie onResize() centrujemy widok Away3D oraz obiekt typu movieClip o nazwie universe. Obiekt universe to gwieździste tło, które zostało bezpośrednio umieszczone w głównym oknie aplikacji. Z kolei obiekt interfejsu użytkownika umieszczamy w lewym dolnym rogu okna. universe.x = stage.stageWidth * .5; universe.y = stage.stageHeight * .5; view.x = stage.stageWidth * .5; view.y = stage.stageHeight * .5; speedMonitor.y = stage.stageHeight - 100; speedMonitor.x = 100;
350
Flash i ActionScript. Aplikacje 3D od podstaw
Metoda loadShipModel() służy do pobrania modelu z konkretnej lokalizacji i umieszczenia go na scenie. W pierwszej kolejności stworzyliśmy obiekt klasy ObjectContainer3D o nazwie ship, który będzie służył jako kontener dla pobranego modelu. Następnie pobierany jest model w formacie 3DS za pomocą klasy Max3DS i jej metody load. Po załadowaniu zmieniliśmy kąt nachylenia statku na osi Y oraz X i ustawiliśmy jego pozycję w miejscu zerowym kontenera. Na końcu umieściliśmy obiekt na scenie. ship = new ObjectContainer3D(); shipLoader = Max3DS.load('models/spaceship/spaceship.3ds'); shipLoader.rotationY = -90; shipLoader.rotationX = 90; shipLoader.position = new Vector3D(0, 0, 0); ship.addChild(shipLoader); view.scene.addChild(ship);
W sytuacji gdy model pochodzi z nieznanych źródeł, warto wcześniej sprawdzić w Away3D, jak prezentuje się on na scenie. Może dojść do tego, że jego skala i pozycja nie odpowiadają konkretnym potrzebom. W takiej sytuacji, jeżeli nie mamy możliwości edytowania modelu, można umieścić go w kontenerze ObjectContainer3D i w jego wnętrzu skorygować skalę bądź kąty nachylenia, na końcu ustawiając jego pozycję. Dzięki temu unikniemy konieczności przestawiania całej sceny i kamery, aby uzyskać oczekiwany efekt.
Metoda onKeyDown() w całości składa się z instrukcji warunkowych. W tym miejscu sprawdzane są wartości klawiszy i przypisywane odpowiednie akcje bądź wartości zmiennym określającym stan używanych klawiszy. W sytuacji gdy wartość keyCode zdarzenia KeyboardEvent równa jest Keyboard.C, prędkość redukowana jest do wartości początkowej. if (e.keyCode == Keyboard.C) { speed = 5; speedMonitor.txt.text = String(speed * 10); }
Z kolei gdy wartość keyCode zdarzenia KeyboardEvent równa jest Keyboard.A, prędkość statku zwiększa się o 0.5. if (e.keyCode == Keyboard.A) { speed += .5; speedMonitor.txt.text = String(speed * 10); }
Zmniejszenie prędkości następuje po wciśnięciu klawisza Z, którego wartość keyCode równa jest Keyboard.Z.
Aby zachować ciągłość akcji sterowania statkiem, nie modyfikujemy w tym miejscu jego pozycji, lecz przypisujemy wartość typu Boolean właściwościom, które w metodzie onEnterFrame() będą wskazywały na wciskane przez użytkownika klawisze. Zdarzenie KeyboardEvent.KEY_DOWN uruchamiane jest jedynie przy zmianie stanu, w jakim znajduje się klawisz, dlatego zapisanie zmiany pozycji w metodzie onKeyDown() spowodowałoby pojedyncze przejście dla każdego wciśniętego klawisza. if if if if if
W metodzie onKeyUp() również zawarliśmy instrukcje warunkowe if, ale tutaj sprawdzaliśmy stan klawisza i przypisywaliśmy odpowiedniej zmiennej wartość false. Nie mogliśmy wszystkim naraz przypisać wartości false, ponieważ mogłoby to przerwać ciągłość innej akcji. if if if if if
W przypadku wystąpienia warunku, w którym wciśnięty jest klawisz X, zapisaliśmy zmianę wartości zmiennej trackShip na false oraz skierowaliśmy kamerę w stronę środka sceny. Poza tym korzystając z klasy TweenMax, stworzyliśmy animację, w której statek kosmiczny powraca do swojej pierwotnej pozycji. if (e.keyCode == Keyboard.X) { trackShip = false; view.camera.lookAt(new Vector3D(0, 0, 0)); TweenMax.to(ship, 1, { x:0, y:0, z:0, rotationY:0, rotationX:0, rotationZ:0 } ); }
W warunku wciśnięcia klawisza T zapisaliśmy zmianę wartości trackShip na przeciwną do aktualnie ustawionej. if (e.keyCode == Keyboard.T) { trackShip = !trackShip; }
352
Flash i ActionScript. Aplikacje 3D od podstaw
W metodzie onEnterFrame(), która jest stale wywoływana, użyliśmy wszystkich zmiennych, których wartości zmieniają się w metodach onKeyDown() oraz onKeyUp(). W zależności od tego, która ze zmiennych równa jest wartości true, wykonywana jest akcja obrotu bądź przesunięcia. Dodatkowo jeżeli wartość trackShip równa jest true, kamera przy każdym odświeżeniu ustawia się w kierunku pozycji statku. if (spaceDown) ship.moveForward(speed); if (leftArrowDown) ship.roll(-5); if (rightArrowDown) ship.roll(5); if (upArrowDown) ship.pitch(5); if (downArrowDown) ship.pitch(-5); if (trackShip) view.camera.lookAt(ship.scenePosition); view.render();
Używanie myszy W poprzednim podrozdziale pokazaliśmy, jak z użyciem klawiatury manipulować trójwymiarowymi obiektami umieszczonymi na scenie. Poparliśmy to przykładem sterowania pojazdem kosmicznym. Jak jednak wiadomo, w aplikacjach Flash częściej stosuje się mysz komputerową niż klawiaturę. Dlatego w tym podrozdziale przyjrzymy się możliwym sposobom zastosowania tego urządzenia wraz z biblioteką Away3D.
MouseEvent Jak wiemy, w języku ActionScript 3.0 dostępna jest klasa MouseEvent, której obiekt obsługuje zdarzenia związane z myszą. W zwykłych aplikacjach dwuwymiarowych zdarzeń myszy można nasłuchiwać na obiektach potomnych względem klasy InteractiveObject, czyli prawie na każdym widocznym obiekcie. Niestety, na obiektach trójwymiarowych umieszczonych na scenie Away3D nie ma możliwości bezpośredniego stosowania zdarzeń klasy MouseEvent. Mimo to są sytuacje, w których można połączyć stosowanie klasy MouseEvent z obiektami trójwymiarowymi. Pierwszy sposób polega na zastosowaniu klasy MovieClipSprite, którą poznaliśmy w rozdziale 3. „Obiekty”. Jak pamiętamy, wyświetlana w obiekcie klasy MovieClipSprite tekstura ma postać obiektu klasy DisplayObject. Skutkiem tego na powierzchni tej tekstury można korzystać ze zdarzeń MouseEvent. Nie tylko na obiekcie klasy MovieClipSprite można stosować zdarzenia MouseEvent. Otóż w rozdziale 4. „Materiały” poznaliśmy klasy MovieMaterial, PhongMovieMaterial oraz Dot3MovieMaterial, dla których źródłem wyświetlanej grafiki są obiekty klas Sprite oraz MovieClip. Jak wiemy, bezpośrednio na obiekcie zarówno klasy Sprite, jak i MovieClip można wywołać zdarzenia MouseEvent, ale gdy używamy ich wewnątrz
Rozdział 8. Interaktywność
353
któregoś z wyżej wymienionych materiałów, są one niedostępne dla wskaźnika myszy. Jest to normalny stan, który można zmienić, nadając właściwości interactive wybranego materiału wartość true. Inny sposób wykorzystania zdarzeń MouseEvent do modyfikowania obiektów 3D polega na pobieraniu współrzędnych wskaźnika myszy i przekazywaniu ich do sceny Away3D. Wykrywając zmianę pozycji kursora myszki w oknie aplikacji, można na obiekcie umieszczonym w przestrzeni trójwymiarowej wykonać czynności takie jak skalowanie, przesunięcie czy też obrót. W przykładzie umieszczonym w kolejnym punkcie tego podrozdziału odniesiemy się do tego sposobu interakcji z użyciem myszki komputerowej.
Obracanie i skalowanie statku kosmicznego Widocznym elementem w tym przykładzie będzie jedynie model statku kosmicznego zastosowany wcześniej w punkcie „Sterowanie statkiem kosmicznym w przestrzeni”. Pozycją początkową dla pojazdu będzie środek przestrzeni trójwymiarowej. Sam model zostanie skierowany dziobem wzdłuż osi Z. Poruszając kursorem, będzie można doprowadzić model do różnych pozycji i wymiarów. Przykładowe ustawienia zaprezentowano na rysunku 8.2.
Rysunek 8.2. Przykładowe ustawienia pozycji i wymiarów modelu
354
Flash i ActionScript. Aplikacje 3D od podstaw
Aby zmienić pozycję modelu statku kosmicznego, należy wcisnąć lewy przycisk myszy i trzymając go, poruszać kursorem w różne strony okna aplikacji. Wciśnięcie i trzymanie przycisku powoduje zmianę wartości jednej ze zmiennych, która jest warunkiem podejmowania działań obrotu. Bez tego każde poruszenie kursorem, nawet nieplanowe, powodowałoby modyfikacje. Aby dodatkowo przy poruszaniu kursorem kontrolować wymiary modelu, należy użyć klawisza Ctrl. Cały mechanizm wyjaśnimy przy omawianiu kodu źródłowego tego przykładu. Teraz przepisz i skompiluj następujący kod. package { import flash.display.StageAlign; import flash.display.StageQuality; import flash.display.StageScaleMode; import flash.display.Sprite; import flash.events.Event; import flash.events.MouseEvent; import flash.events.KeyboardEvent; import flash.ui.Keyboard; import flash.geom.Vector3D; // import away3d.containers.ObjectContainer3D; import away3d.containers.View3D; import away3d.loaders.Loader3D; import away3d.loaders.Max3DS; public class MouseEventExample extends Sprite { private var view:View3D; private var shipLoader:Loader3D; private var ship:ObjectContainer3D; private var mouseDown:Boolean = false; private var ctrlDown:Boolean = false; private var xPos:Number; private var yPos:Number; private var ease:Number = .3; public function MouseEventExample():void { if (stage) init(); else addEventListener(Event.ADDED_TO_STAGE, init); } private function init(e:Event = null):void { stage.quality = StageQuality.LOW; stage.scaleMode = StageScaleMode.NO_SCALE; stage.align = StageAlign.TOP_LEFT; removeEventListener(Event.ADDED_TO_STAGE, init); addEventListener(Event.ENTER_FRAME, onEnterFrame); stage.addEventListener(Event.RESIZE, onResize);
Flash i ActionScript. Aplikacje 3D od podstaw if (mouseDown && !ctrlDown) { ship.rotationY += (xPos * .5 - ship.rotationY) * ease; ship.rotationX += (yPos * .5 - ship.rotationX) * ease; } else if (mouseDown && ctrlDown) { ship.scale(Math.sqrt(xPos * xPos + yPos * yPos)*.01); } view.render(); } } }
W tym przykładzie najważniejszą dla nas klasą z pakietu flash jest oczywiście MouseEvent. Z Away3D, tak samo jak w poprzednich przykładach tego rozdziału, skorzystaliśmy z modelu 3DS. Dlatego potrzebowaliśmy klas Loader3D, Max3DS i ObjectContainer3D do umieszczenia modelu statku na scenie. Na początku ciała klasy MouseEventExample zdefiniowaliśmy obiekt widoku Away3D, obiekty służące do pobrania i wyświetlenia modelu 3DS oraz kilka zmiennych. Pierwsza w kolejności mouseDown przyjmuje wartości typu Boolean i określa, czy lewy przycisk myszy jest wciśnięty. Jeżeli jest, to wartość tej właściwości równa się true. Kolejną zmienną, którą dodaliśmy, jest ctrlDown. Jej wartość również jest typu Boolean i określa, czy został wciśnięty klawisz Ctrl. Właściwości xPos oraz yPos to zmienne liczbowe, które określają odległość pozycji kursora od środka okna aplikacji. Ich wartości są modyfikowane przy każdym odświeżeniu stołu montażowego. Ostatnia zmienna ease odpowiada za złagodzenie przejścia między pozycjami bądź wymiarami modelu pojazdu. Jej wartość w trakcie uruchamiania oraz używania programu nie zmienia się, dlatego można zdefiniować ją jako wartość stałą. private private private private private private private private
Podobnie jak w poprzednich konstruktorach dla klas przykładów, i tutaj, gdy obiekt stage jest gotowy, uruchamiamy metodę init(). if (stage) init(); else addEventListener(Event.ADDED_TO_STAGE, init);
Rozdział 8. Interaktywność
357
Na początku metody init() ustawiliśmy jakość generowanego obrazu na poziomie LOW. W następnej kolejności wyłączyliśmy skalowanie okna oraz wyrównaliśmy stół montażowy do lewego górnego rogu. Dzięki temu aplikacja będzie działała płynniej i przy powiększeniu okna zwiększymy obszar działania kursora. stage.quality = StageQuality.LOW; stage.scaleMode = StageScaleMode.NO_SCALE; stage.align = StageAlign.TOP_LEFT;
W kolejnych linijkach kodu metody init() usunęliśmy detektor zdarzenia Event. ADDED_TO_STAGE i utworzyliśmy szereg nowych. Kolejność, z jaką je dodaliśmy, jest przypadkowa. Pierwszy detektor odpowiada za nasłuchiwanie zdarzenia Event.ENTER_FRAME i wywołanie metody onEnterFrame(). W drugiej kolejności dodaliśmy detektor dla zmiany rozmiarów okna aplikacji Event.RESIZE. Kolejne dwa detektory nasłuchują zdarzeń MouseEvent.MOUSE_DOWN oraz MouseEvent.MOUSE_UP, które odpowiadają za kliknięcie i puszczenie przycisku myszki. Podobne zadanie przydzieliliśmy detektorom zdarzeń KeyboardEvent.KEY_DOWN i KeyboardEvent.KEY_UP, z tą różnicą, że one wskazują na kliknięcie bądź zwolnienie klawisza na klawiaturze. removeEventListener(Event.ADDED_TO_STAGE, init); addEventListener(Event.ENTER_FRAME, onEnterFrame); stage.addEventListener(Event.RESIZE, onResize); stage.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown); stage.addEventListener(MouseEvent.MOUSE_UP, onMouseUp); stage.addEventListener(KeyboardEvent.KEY_DOWN, onKeyDown); stage.addEventListener(KeyboardEvent.KEY_UP, onKeyUp);
Po ustaleniu detektorów zdarzeń stworzyliśmy i dodaliśmy obiekt widoku biblioteki Away3D. Dodatkowo przybliżyliśmy kamerę do pozycji -50 na osi Z, tak aby statek w swojej początkowej pozycji był dobrze widoczny. view = new View3D(); addChild(view); view.camera.z = -50;
Gdy widok został dodany, stworzyliśmy obiekt statku kosmicznego, korzystając z ustawień z poprzednich przykładów tego rozdziału. Po pobraniu modelu za pomocą klasy Max3DS obróciliśmy go tak, aby dziobem, zwrócony był w stronę osi Z. Następnie umieściliśmy go w kontenerze o nazwie ship i dodaliśmy go do sceny. ship = new ObjectContainer3D(); shipLoader = Max3DS.load('models/spaceship/spaceship.3ds'); shipLoader.rotationY = -90; shipLoader.rotationX = 90; shipLoader.position = new Vector3D(0, 0, 0); ship.addChild(shipLoader); view.scene.addChild(ship);
Na końcu bloku kodu metody init() odwołaliśmy się do metody onResize().
358
Flash i ActionScript. Aplikacje 3D od podstaw
Kolejnymi metodami, które zapisaliśmy w klasie MouseEventExample, są onMouseDown() oraz onMouseUp(). Gdy wciśnięty jest lewy przycisk myszki, wywoływana jest metoda onMouseDown(), w której właściwości mouseDown przypisywana jest wartość true. Z kolei po puszczeniu przycisku myszy wartość mouseDown() zostaje zmieniona na false w metodzie onMouseUp(). Idąc tym torem, zapisaliśmy metody onKeyDown() oraz onKeyUp(), które uruchamiane są z każdym wciśnięciem i zwolnieniem klawisza na klawiaturze. Jednak nie każde wywołanie tych metod powoduje zmiany. Wewnątrz obu metod zastosowaliśmy instrukcję warunkową if. Obie filtrują kody wciskanych i zwalnianych klawiszy w celu wychwycenia wartości numerycznej odpowiadającej numerowi klawisza Ctrl. Jeżeli klawisz ten zostanie wciśnięty, to w metodzie onKeyDown() zmienna ctrlDown zmieni swoją wartość na true. Z kolei po puszczeniu przycisku Ctrl w metodzie onKeyUp() zmienna ctrlDown zmieni swoją wartość na false. Przy każdej zmianie rozmiaru okna uruchamiana jest metoda onResize(). W jej ciele zapisaliśmy wyśrodkowanie widoku view w oknie programu. view.x = stage.stageWidth * .5; view.y = stage.stageHeight * .5;
Na końcu klasy MouseEventExample zapisaliśmy metodę onEnterFrame(), wywoływaną przy każdym wystąpieniu zdarzenia Event.ENTER_FRAME. W pierwszych dwóch linijkach wpisaliśmy formuły wyliczające różnicę między współrzędnymi kursora i współrzędnymi środka okna aplikacji. xPos = stage.mouseX - stage.stageWidth * .5; yPos = stage.mouseY - stage.stageHeight * .5;
Następnie zapisaliśmy instrukcje if, które sprawdzają wartości zmiennych mouseDown oraz ctrlDown. W pierwszym przypadku sprawdzamy, czy wartość mouseDown jest równa true, a wartość ctrlDown równa false. Jeżeli warunek zachodzi, to wcześniej zdefiniowane odległości xPos i yPos zostaną użyte do zmiany kątów nachylenia modelu na osiach X i Y. Parametr ease służy jako mnożnik łagodzący przejście między pozycjami. if (mouseDown && !ctrlDown) { ship.rotationY += (xPos * .5 - ship.rotationY) * ease; ship.rotationX += (yPos * .5 - ship.rotationX) * ease; }
Jeżeli wartości właściwości mouseDown i ctrlDown są równe true, to każda zmiana współrzędnych kursora spowoduje zmianę wymiarów obiektu. Im dalej od środka będzie skierowany kursor, tym większą skalę będzie miał model statku kosmicznego. Aby obliczyć tę odległość, musieliśmy użyć właściwości xPos i yPos. Bezpośrednio
Rozdział 8. Interaktywność
359
w metodzie scale() obiektu ship obydwie te wartości podnieśliśmy do kwadratu i dodaliśmy. Następnie wyliczyliśmy pierwiastek z tej sumy i pomnożyliśmy go przez 0.01. W ten sposób, bazując na współrzędnych pozycji kursora, uzyskamy długość wektora, którą będziemy skalowali obiekt ship. else if (mouseDown && ctrlDown) { ship.scale(Math.sqrt(xPos * xPos + yPos * yPos)*.01); }
Na końcu metody onEnterFrame() odświeżamy widok metodą render().
MouseEvent3D We wcześniejszych przykładach tego podrozdziału pokazaliśmy, że można za pomocą MouseEvent stworzyć interakcje użytkownika ze środowiskiem Away3D. Problem polega na tym, że przedstawione sposoby nie odnosiły się bezpośrednio do obiektów trójwymiarowych, tylko do obiektów klas pochodnych względem InteractiveObject. Na szczęście biblioteka Away3D ma swoją implementację pełnej obsługi zdarzeń myszki w postaci klasy MouseEvent3D. Zlokalizowana w pakiecie away3d.events klasa MouseEvent3D jest odpowiednikiem standardowego MouseEvent, tylko że w tym przypadku ma ona zastosowanie bezpośrednio na obiektach umieszczonych w przestrzeni trójwymiarowej, niezależnie od ich rodzaju i materiału, którym są pokryte. W swoich zasobach klasa MouseEvent3D ma stałe, które definiują większość zdarzeń znanych z MouseEvent, między innymi MouseEvent3D.MOUSE_DOWN, MouseEvent3D.MOUSE_UP czy też MouseEvent3D.MOUSE_MOVE. Każde ze zdarzeń MouseEvent3D wywołuje się bezpośrednio na obiekcie, na którym ma ono być rejestrowane. Działa to na tych samych zasadach jak w przypadku zwykłych obiektów DisplayObject. Obj3d.addEventListener(MouseEvent3D.MOUSE_DOWN, onMouseDown);
Oczywiście zamiast odwoływać się do obiektu zdarzenia, można wpisać samą postać String, którą reprezentuje stała obiektu MouseEvent3D. Powyższy przykład dodania detektora w tym przypadku wyglądałby następująco: Obj3d.addEventListener("mouseDown3d", onMuseDown);
Tabele 8.8 i 8.9 zawierają metody i właściwości klasy MouseEvent3D. W tabeli 8.10 wypisane zostały stałe odpowiadające konkretnym zdarzeniom.
360
Flash i ActionScript. Aplikacje 3D od podstaw
Tabela 8.8. Właściwości klasy MouseEvent3D
Nazwa
Rodzaj
Wartość domyślna Opis
ctrlKey
Boolean
false
elementVO
ElementVO
Obiekt typu ElementVO, na którym wywołano zdarzenie
material
Material
Materiał obiektu 3D, na którym wywołano zdarzenie
Object
Object3D
Obiekt 3D, na którym wywołano zdarzenie
sceneX
Number
Współrzędna x na scenie
sceneY
Number
Współrzędna y na scenie
sceneZ
Number
Współrzędna z na scenie
screenX
Number
Współrzędna x w widoku
screenY
Number
Współrzędna y w widoku
screenZ
Number
Współrzędna z w widoku
shiftKey
Number
uv
UV
Współrzędne UV wewnątrz obiektu, na którym wywołano zdarzenie
view
View3D
Obiekt widoku, w którym wywołano zdarzenie
Określa, czy klawisz Ctrl jest wciśnięty
false
Określa, czy klawisz Shift jest wciśnięty
Tabela 8.9. Metody klasy MouseEvent3D
Nazwa
Opis
MouseEvent3D(type:String)
Konstruktor
clone():Event
Tworzy kopię obiektu MouseEvent3D
Tabela 8.10. Stałe klasy MouseEvent3D
Nazwa
Wartość domyślna
Opis
MOUSE_DOWN
‘mouseDown3d’
Zdarzenie wciśnięcia przycisku myszy na trójwymiarowym obiekcie
MOUSE_MOVE
‘mouseMove3d’
Zdarzenie poruszania kursorem na trójwymiarowym obiekcie
MOUSE_OUT
‘mouseOut3d’
Zdarzenie opuszczenia kursora z trójwymiarowego obiektu lub któregokolwiek z obiektów w nim umieszczonych
MOUSE_OVER
‘mouseOver3d’
Zdarzenie najechania kursorem na trójwymiarowy obiekt lub którykolwiek z obiektów w nim umieszczonych
MOUSE_UP
‘mouseUp3d’
Zdarzenie puszczenia przycisku myszy na trójwymiarowym obiekcie
Rozdział 8. Interaktywność
361
Tabela 8.10. Stałe klasy MouseEvent3D (ciąg dalszy)
Nazwa
Wartość domyślna
Opis
ROLL_OVER
‘rollOut3d’
Zdarzenie najechania kursorem na trójwymiarowy obiekt
ROLL_OUT
‘rollOver3d’
Zdarzenie opuszczenia kursora z trójwymiarowego obiektu
Metody dla zdarzeń MouseEvent3D Obiekty klasy Object3D mają własne metody inicjujące detektory zdarzeń dla MouseEvent3D. Każda z tych metod ma inną nazwę, która wskazuje na rodzaj zdarzenia. Jako argument dla takiej metody należy podać jedynie nazwę metody, która ma być wywołana po zajściu zdarzenia. Tabela 8.11 zawiera spis nazw metod oraz zdarzeń, którym one odpowiadają. Tabela 8.11. Metody obsługi zdarzeń MouseEvent3D
Nazwa metody
Zdarzenie
addOnMouseDown
MouseEvent3D.MOUSE_DOWN
addOnMouseMove
MouseEvent3D.MOUSE_MOVE
addOnMouseOut
MouseEvent3D.MOUSE_OUT
addOnMouseOver
MouseEvent3D.MOUSE_OVER
addOnMouseUp
MouseEvent3D.MOUSE_UP
addOnRollOut
MouseEvent3D.ROLL_OUT
addOnRollOver
MouseEvent3D.ROLL_OVER
Malowanie na trójwymiarowych obiektach W tym punkcie wyjaśnimy, jak napisać aplikację umożliwiającą malowanie po powierzchni obiektów 3D. Aby wykonać to zadanie, w pierwszej kolejności stworzymy obiekt ściany i wypełnimy go teksturą z ceglaną powierzchnią. Następnie do tego obiektu dodamy detektory zdarzeń poruszania kursorem, wciśnięcia i puszczenia przycisku myszy. Dodatkową zmienną typu Boolean sprawimy, że malowanie będzie trwało od momentu wciśnięcia do zwolnienia przycisku myszy. Sam proces rysowania umieścimy w metodzie obsługi zdarzenia Event.ENTER_FRAME. Aby na powierzchni ściany były widoczne zmiany, skorzystamy z materiału typu MovieMaterial. Jego pierwszą warstwę wypełnimy wcześniej wspomnianą ceglaną
362
Flash i ActionScript. Aplikacje 3D od podstaw
teksturą. Kolejne rysunki będą skutkiem tworzenia nowych obiektów Sprite, w których metodą drawCircle() będziemy rysowali pojedyncze, półprzezroczyste czerwone koła. Aby ustalić współrzędne kursora na obiekcie, skorzystamy ze wspomnianego w tabeli 8.8 obiektu UV. Efekt, który uzyskamy po napisaniu i skompilowaniu przykładu, ilustruje rysunek 8.3. Rysunek 8.3.
Malowanie graffiti na trójwymiarowej ścianie
Teraz przepisz i skompiluj następujący kod. Następnie zajmiemy się omawianiem jego poszczególnych fragmentów. package { import import import import import import // import import import import import import
Rozdział 8. Interaktywność public class GraffitiExample extends Sprite { private var view:View3D; private var wall:Cube; private var cubeMaterials:CubeMaterialsData; private var drawingEnabled:Boolean = false; public function GraffitiExample() { if (stage) init(); else addEventListener(Event.ADDED_TO_STAGE, init); } private function init(e:Event = null):void { stage.quality = StageQuality.LOW; stage.scaleMode = StageScaleMode.NO_SCALE; stage.align = StageAlign.TOP_LEFT; removeEventListener(Event.ADDED_TO_STAGE, init); stage.addEventListener(Event.RESIZE, onResize); stage.addEventListener(Event.ENTER_FRAME, onEnterFrame); // view = new View3D(); addChild(view); // cubeMaterials = new CubeMaterialsData(); cubeMaterials.front = new MovieMaterial(new brickTexture(), { interactive:true } ); cubeMaterials.back = new MovieMaterial(new brickTexture(), { interactive:true } ); cubeMaterials.top = new MovieMaterial(new brickTexture(), { interactive:true } ); cubeMaterials.bottom = new MovieMaterial(new brickTexture(), { interactive:true } ); cubeMaterials.left = new MovieMaterial(new brickTexture(), { interactive:true } ); cubeMaterials.right = new MovieMaterial(new brickTexture(), { interactive:true } ); wall = new Cube( { width:1024, height:512, depth:50, cubeMaterials:cubeMaterials } ); wall.addOnMouseDown(onMouseDown); wall.addOnMouseUp(onMouseUp); wall.addEventListener(MouseEvent3D.MOUSE_MOVE, onMouseMove); view.scene.addChild(wall); // onResize(); } private function onMouseDown(e:MouseEvent3D):void { drawingEnabled = true; }
363
364
Flash i ActionScript. Aplikacje 3D od podstaw private function onMouseUp(e:MouseEvent3D):void { drawingEnabled = false; } private function onMouseMove(e:MouseEvent3D):void { if (drawingEnabled) { var graff:Sprite = new Sprite(); graff.graphics.beginFill(0xFF0000, .5); graff.graphics.drawCircle(e.uv.u * (e.material as MovieMaterial). movie.width, (e.material as MovieMaterial).movie.height e.uv.v * (e.material as MovieMaterial).movie.height, 10); graff.graphics.endFill(); (e.material as MovieMaterial).movie.addChild(graff); } } private function onResize(e:Event = null):void { view.x = stage.stageWidth * .5; view.y = stage.stageHeight * .5; } private function onEnterFrame(e:Event):void { wall.rotationY -= .1; view.render(); } } }
Na początku bloku klasy GraffitiExample zdefiniowaliśmy obiekt widoku View3D, a następnie obiekt klasy Cube o nazwie wall. Jak wspomnieliśmy na początku tego punktu, materiałem pokrywającym ścianę jest obiekt klasy MovieMaterial. W naszym przykładzie nazwaliśmy go wallTexture. Jako źródło dla tego materiału posłużył obiekt klasy brickTexture. Jest to element MovieClip dodany do biblioteki pliku fla. Po zdefiniowaniu wszystkich potrzebnych obiektów utworzyliśmy jeszcze jedną zmienną o nazwie drawingEnabled, której wartość określa, czy można rysować po powierzchni ściany. private private private private private
W konstruktorze uruchamiamy metodę init(), z chwilą gdy obiekt Stage zostanie zainicjowany.
Rozdział 8. Interaktywność
365
if (stage) init(); else addEventListener(Event.ADDED_TO_STAGE, init);
Gdy metoda init() zostanie wywołana, obiekt nasłuchujący zdarzenia Event.ADDED_ TO_STAGE będzie zbędny, dlatego można go usunąć, stosując metodę removeEvent Listener(). Dla szybszego działania aplikacji ustawiliśmy niską jakość wyświetlanego obrazu, stosując w tym celu wartość StageQuality.LOW. W kolejnych linijkach usunęliśmy skalowanie obiektów i wyrównaliśmy stół montażowy do lewego górnego rogu. Ostatnimi operacjami, jakie wykonaliśmy na obiekcie stage, było przypisanie im detektorów zdarzeń reagujących na zmianę rozmiarów okna i odświeżanie wyświetlanego obrazu. removeEventListener(Event.ADDED_TO_STAGE, init); stage.quality = StageQuality.LOW; stage.scaleMode = StageScaleMode.NO_SCALE; stage.align = StageAlign.TOP_LEFT; stage.addEventListener(Event.RESIZE, onResize); stage.addEventListener(Event.ENTER_FRAME, onEnterFrame);
Po ustaleniu wszystkich opcji i dodaniu obiektów nasłuchujących zdarzeń Event. i Event.ENTER_FRAME stworzyliśmy i dodaliśmy widok bez ustalania jakichkolwiek dodatkowych zmian wartości jego właściwości. Położenie zmieniamy w metodzie onResize().
RESIZE
view = new View3D(); addChild(view);
W kolejnych linijkach metody init() stworzyliśmy i uzupełniliśmy zawartość obiektu klasy CubeMaterialsData o nazwie cubeMaterials. Każdemu z boków sześcianu przypisaliśmy nowy materiał typu MovieMaterial. W każdym z tych materiałów źródłem wyświetlanego obrazu jest obiekt klasy brickTexture. Dodatkowo aby umożliwić malowanie na powierzchni tego materiału, ustawiliśmy wartość właściwości interactive jako true. cubeMaterials = new CubeMaterialsData(); cubeMaterials.front = new MovieMaterial(new brickTexture(), { interactive:true } ); cubeMaterials.back = new MovieMaterial(new brickTexture(), { interactive:true } ); cubeMaterials.top = new MovieMaterial(new brickTexture(), { interactive:true } ); cubeMaterials.bottom = new MovieMaterial(new brickTexture(), { interactive:true } ); cubeMaterials.left = new MovieMaterial(new brickTexture(), { interactive:true } ); cubeMaterials.right = new MovieMaterial(new brickTexture(), { interactive:true } );
366
Flash i ActionScript. Aplikacje 3D od podstaw
Po wykonaniu tych czynności stworzyliśmy obiekt klasy Cube o nazwie wall, w którym właściwości cubeMaterials przypisaliśmy nasz obiekt cubeMaterials. Następnie korzystając z wcześniej poznanych metod addOnMouseDown(), addOnMouseUp() oraz zwykłego addEventListener() dodaliśmy obiekt nasłuchujący zdarzeń MouseEvent3D. wall = new Cube( { width:1024, height:512, depth:50, cubeMaterials:cubeMaterials } ); wall.addOnMouseDown(onMouseDown); wall.addOnMouseUp(onMouseUp); wall.addEventListener(MouseEvent3D.MOUSE_MOVE, onMouseMove);
Na końcu metody init() dodaliśmy obiekt ściany do sceny Away3D i wywołaliśmy metodę onResize() w celu ustawienia widoku na środku okna aplikacji. view.scene.addChild(wall); onResize();
Metody onMouseDown() oraz onMouseUp() wywoływane są w sytuacji zajścia zdarzenia MouseEvent3D. Po wciśnięciu przycisku myszki uruchamia się metoda onMouseDown(), w której właściwości mouseDown przypisywana jest wartość true. Z kolei przy puszczeniu przycisku myszy wywoływana jest metoda onMouseUp(), w której mouseDown zmienia swoją wartość na false. Najważniejszą metodą w klasie GraffitiExample jest onMouseMove(). Kod zapisany w jej ciele odpowiada za rysowanie wzorów na powierzchni tekstury obiektu wall. Aby malowanie było możliwe jedynie przy wciśniętym przycisku myszy, musieliśmy w pierwszej kolejności zastosować instrukcję warunkową if, w której sprawdzana jest wartość właściwości drawingEnabled. Jeżeli wartość tej właściwości równa jest true, to wewnątrz instrukcji tworzony jest nowy obiekt klasy Sprite. var graff:Sprite = new Sprite();
Stosując odwołanie do obiektu graphics wewnątrz obiektu graff, można korzystać z jego metod rysowania. Do narysowania półprzezroczystego czerwonego koła użyliśmy metod beginFill() oraz drawCircle(). W metodzie beginFill() jako argument podaliśmy szesnastkowy kod koloru czerwonego. graff.graphics.beginFill(0xFF0000, .5);
Metoda drawCircle() przyjmuje trzy właściwości: x, y, oraz radius. Jako x podaliśmy wartość właściwości u z obiektu UV i pomnożyliśmy ją przez szerokość tekstury. e.uv.u * (e.material as MovieMaterial).movie.width;
Rozdział 8. Interaktywność
367
Z kolei aby określić wartość argumentu y, musieliśmy od wysokości tekstury odjąć iloczyn tej wysokości i wartości właściwości v z obiektu UV. Dzięki temu współrzędne tekstury będą zgodne z ruchem kursora. (e.material as MovieMaterial).movie.height - e.uv.v * (e.material as MovieMaterial).movie.height;
Etap rysowania zakończyliśmy metodą endFill(), po czym umieściliśmy nowo utworzony obiekt graff w wyświetlanym obiekcie klasy brickTexture. graff.graphics.endFill(); (e.material as MovieMaterial).movie.addChild(graff);
Warto wspomnieć o tym, że zapis (e.material as MovieMaterial).movie odwołuje się do źródła materiału, na którym aktualnie znajduje się kursor.
Rozmieszczanie obiektów na planszy Przyjmijmy, że Twoim zadaniem jest napisanie strategicznej gry czasu rzeczywistego. Jednymi z kluczowych elementów takiej gry są: możliwość zmiany pozycji obiektów strategicznych, tworzenie oraz przemieszczanie jednostek bojowych. Tymi konkretnymi zagadnieniami zajmiemy się w tym punkcie, a efekt, który uzyskamy, kompilując kod źródłowy przykładu, przedstawia rysunek 8.4. Rysunek 8.4.
Rozmieszczanie obiektów na planszy
368
Flash i ActionScript. Aplikacje 3D od podstaw
Na rysunku 8.4 widzimy kawałek planszy pokryty teksturą ze sztucznym ukształtowaniem terenu tworzącym pole podzielone wyschniętym korytem rzeki. Na tej planszy umieszczony jest jeden budynek, który w naszym scenariuszu pełni funkcję fabryki pojazdów latających. Poza nim w powietrzu wiszą cztery wyprodukowane statki kosmiczne. Tworzenie tych latających obiektów następuje po kliknięciu na obiekt fabryki — pojazd pojawia się na jej platformie, po czym przemieszcza na losowo wybraną pozycję. Najechanie kursorem na którykolwiek z modeli powoduje pojawienie się czerwonej poświaty. Oznacza to, że na wybranym elemencie można wykonać akcję zmiany pozycji. Żeby zmienić pozycję wybranego obiektu, należy kliknąć na niego, trzymając wciśnięty klawisz Ctrl. Na podłożu planszy pojawi się niebieski celownik, tak jak to pokazano na rysunku 8.4. Celownik ten, podobnie jak w grach tego typu, wyznacza nowe miejsce docelowe. Aby wybrany obiekt zmienił swoją pozycję na nową, należy kliknąć lewy przycisk myszy, trzymając wciśnięty klawisz Ctrl. W przypadku obiektu fabryki pozycja zmieniona zostanie natychmiastowo, ponieważ — w przeciwieństwie do obiektów statków — nie stworzyliśmy animacji płynnego przejścia wygenerowanej za pomocą bibliotek TweenMax i TimelineMax. Wszystkie procesy, które zachodzą w kodzie źródłowym tego przykładu, omówimy za chwilę. Teraz przepisz ten kod i załącz go jako główną klasę programu. Do poprawnego działania aplikacji niezbędne są zasoby umieszczone w pliku fla. package { import import import import import import import import import // import import import import import import
public class MouseEvent3DExample extends Sprite { private var view:View3D; private var pointer:Plane; private var pointerMC:Crosshair = new Crosshair(); private var board:ObjectContainer3D; private var ground:Plane; private var texture:BitmapMaterial; private var modelLoader:Loader3D; private var landingDock:ObjectContainer3D; private var fighter:ObjectContainer3D; private var animations:TimelineMax; private var leftArrowDown:Boolean = false; private var rightArrowDown:Boolean = false; private var upArrowDown:Boolean = false; private var downArrowDown:Boolean = false; private var selectedBuilding:Object3D; private var selectedVehicle:Object3D; private var ctrlDown:Boolean = false; private var zoomInDown:Boolean = false; private var zoomOutDown:Boolean = false; private var fighters:Vector. = new Vector.; public function MouseEvent3DExample():void { if (stage) init(); else addEventListener(Event.ADDED_TO_STAGE, init); } private function init(e:Event = null):void { stage.quality = StageQuality.LOW; stage.scaleMode = StageScaleMode.NO_SCALE; stage.align = StageAlign.TOP_LEFT; removeEventListener(Event.ADDED_TO_STAGE, init); addEventListener(Event.ENTER_FRAME, onEnterFrame); stage.addEventListener(Event.RESIZE, onResize); stage.addEventListener(KeyboardEvent.KEY_DOWN, onKeyDown); stage.addEventListener(KeyboardEvent.KEY_UP, onKeyUp); view = new View3D(); view.renderer = Renderer.BASIC; view.x = stage.stageWidth * .5;
Flash i ActionScript. Aplikacje 3D od podstaw TweenMax.to(landingDock.filters[0], .5, { alpha:0 } ); } private function randomPosition(min:Number, max:Number):Number { return Math.floor(Math.random() * (1 + max - min)) + min; } private function onModelLoaderSuccess(e:Loader3DEvent):void { var randomX:Number = landingDock.x - randomPosition(-150, 150); var randomZ:Number = landingDock.z - randomPosition(-150, 150); fighter = new ObjectContainer3D(); fighter.ownCanvas = true; fighter.addOnMouseDown(fighterOnMouseDown); fighter.addOnRollOver(fighterOnMouseRollOver); fighter.addOnRollOut(fighterOnMouseRollOut); fighter.name = fighter + fighters.length; fighter.filters = [new GlowFilter(0xFF0000, 0, 7, 7, 1, 1)]; fighter.addChild(modelLoader.handle); fighter.scale(.001); fighter.rotationX = 90; fighter.x = landingDock.x; fighter.y = 20; fighter.z = landingDock.z; view.scene.addChild(fighter); fighters.push(fighter); animations = new TimelineMax( { onComplete:onFighterReady } ); animations.append(TweenMax.to(fighter, 1, { scaleX:.1, scaleY:.1, scaleZ:.1 } )); animations.append(TweenMax.to (fighter, 2, { x:randomX, y: 60, z:randomZ } )); animations.play(); } private function onFighterReady():void { trace('Fighter ready!'); } private function fighterOnMouseDown(e:MouseEvent3D):void { trace('Fighter:CLICK'); if (ctrlDown) { selectedVehicle = e.target as ObjectContainer3D; view.scene.addChild(pointer); pointerMC.gotoAndStop('move'); } } private function fighterOnMouseRollOver(e:MouseEvent3D):void
Rozdział 8. Interaktywność { trace('Fighter:RollOver'); TweenMax.to(e.currentTarget.filters[0], .5, { alpha:1 } ); } private function fighterOnMouseRollOut(e:MouseEvent3D):void { trace('Fighter:RollOut'); TweenMax.to(e.currentTarget.filters[0], .5, { alpha:0 } ); } private function onResize(e:Event = null):void { view.x = stage.stageWidth * .5; view.y = stage.stageHeight * .5; } private function onKeyDown(e:KeyboardEvent):void { if (e.keyCode == Keyboard.LEFT) leftArrowDown = true; if (e.keyCode == Keyboard.RIGHT) rightArrowDown = true; if (e.keyCode == Keyboard.UP) upArrowDown = true; if (e.keyCode == Keyboard.DOWN) downArrowDown = true; if (e.keyCode == Keyboard.CONTROL) ctrlDown = true; if (e.keyCode == 187) zoomInDown = true; if (e.keyCode == 189) zoomOutDown = true; } private function onKeyUp(e:KeyboardEvent):void { if (e.keyCode == 187) zoomInDown = false; if (e.keyCode == 189) zoomOutDown = false; if (e.keyCode == Keyboard.LEFT) leftArrowDown = false; if (e.keyCode == Keyboard.RIGHT) rightArrowDown = false; if (e.keyCode == Keyboard.UP) upArrowDown = false; if (e.keyCode == Keyboard.DOWN) downArrowDown = false; if (e.keyCode == Keyboard.CONTROL) { ctrlDown = false; if (selectedBuilding) { selectedBuilding.alpha = 1; selectedBuilding = null; view.scene.removeChild(pointer); } } } private function onEnterFrame(e:Event):void { if (zoomInDown) { if (ctrlDown) view.camera.y += 5;
373
374
Flash i ActionScript. Aplikacje 3D od podstaw else view.camera.zoom++; } if (zoomOutDown) { if (ctrlDown) view.camera.y -= 5; else view.camera.zoom--; } if (leftArrowDown) { if (ctrlDown) view.camera.rotationY++; else view.camera.x -= 10; } if (rightArrowDown) { if (ctrlDown) view.camera.rotationY--; else view.camera.x += 10; } if (upArrowDown) { if (ctrlDown) view.camera.rotationX++; else view.camera.z += 10; } if (downArrowDown) { if (ctrlDown) view.camera.rotationX--; else view.camera.z -= 10; } view.render(); } } }
Jak w większości kodów źródłowych zawartych w tej książce, ustawiliśmy poziom jakości wyświetlania elementów, brak skalowania oraz wyrównanie stołu montażowego. Użyliśmy do tego celu klas StageAlign, StageQuality i StageScaleMode. Jednym z istotnych elementów tego przykładu jest możliwość zmiany położenia obiektów znajdujących się na planszy. Aby móc wyznaczyć nową pozycję na trzech osiach równocześnie, musieliśmy skorzystać z klasy Vector3D. Do samego przemieszczenia użyliśmy zdarzeń MouseEvent3D i animacji generowanych klasami TweenMax i TimelineMax. Ponieważ do zrealizowania tego przykładu skorzystaliśmy z modeli zapisanych w formacie 3DS, musieliśmy użyć kilku klas, aby wyświetlić je na scenie. W pierwszej kolejności użyliśmy ogólnej klasy Loader3D, przechowującej model. Aby pobrać obiekt w formacie 3DS, skorzystaliśmy z klasy Max3DS. Skala oraz położenie zawartości modelu uzależnione są od zastosowanych podczas eksportu ustawień. Pobrany z określonej lokalizacji obiekt modelu umieściliśmy w kontenerze Object Container3D, aby w jego wnętrzu dostosować obiekt modelu do ustawień sceny.
Rozdział 8. Interaktywność
375
Wspomniane otoczenie stworzyliśmy za pomocą klasy Plane i nadaliśmy odpowiedni charakter powierzchni, stosując klasę Cast oraz BitmapMaterial. Przy wybieraniu nowej pozycji dla obiektów za śladem kursora podąża niebieski celownik. Podobnie jak w grach strategicznych, pokazuje on nowe docelowe położenie na planszy. Do jego wykonania zastosowaliśmy obiekt klasy Plane oraz teksturę MovieMaterial. Źródłem dla tego materiału jest osadzony w zasobach pliku fla element MovieClip. Wewnątrz klasy MouseEvent3DExample zadeklarowaliśmy kilkanaście obiektów i zmiennych potrzebnych do prawidłowego funkcjonowania przykładu. Jak zwykle zaczęliśmy od zdefiniowania widoku Away3D. Wskaźnikiem nowych pozycji jest obiekt klasy Plane o nazwie pointer. Dla źródła materiału wykorzystaliśmy obiekt klasy Crosshair. Crosshair nie zawiera w sobie żadnych dodatkowych metod poza konstruktorem. Służy jedynie jako łącznik z elementem MovieClip z biblioteki pliku fla. Tego typu połączenia mogą wydawać się zbędne. Jednak gdyby projekt w swoich założeniach wymagał dodatkowych operacji wykonywanych na wskaźniku, dobrze byłoby umieścić je w osobnej klasie, takiej jak Crosshair, i odwoływać się do nich poprzez obiekt tej klasy. W następnej kolejności zadeklarowaliśmy obiekty potrzebne do wyświetlenia planszy. Do stworzenia powierzchni zastosowaliśmy obiekt klasy Plane o nazwie ground, a do pokrycia jej teksturą użyliśmy obiektu texture klasy BitmapMaterial. Przyjmując, że do samego otoczenia moglibyśmy dodać jeszcze inne elementy, wygenerowaną powierzchnię umieściliśmy w kontenerze board. W razie konieczności modyfikowania środowiska wystarczyłoby odwołanie się do tego obiektu. W tym przykładzie za pobieranie modeli odpowiada obiekt o nazwie modelLoader klasy Loader3D. W przypadku budynku fabryki pobrana zawartość umieszczana jest w kontenerze o nazwie landingDock. Z kolei każdy utworzony statek kosmiczny przypisywany jest do obiektu fighter i dodawany do wektora Vector. o nazwie fighters. Aby wyselekcjonować konkretny element z całej grupy dodanych modeli, zdefiniowaliśmy specjalne obiekty klasy Object3D o nazwach selectedBuilding i selected Vehicle. Do opanowania animacji złożonych z więcej niż jednej sekwencji posłużyliśmy się obiektem animations klasy TimelineMax. Poza samymi obiektami zadeklarowaliśmy również szereg zmiennych potrzebnych do wykonywania operacji w konkretnych przypadkach. Wszystkie te właściwości
376
Flash i ActionScript. Aplikacje 3D od podstaw
przyjmują wartości typu Boolean i odpowiadają za kliknięcie poszczególnych klawiszy klawiatury. Do określania stanu klawiszy strzałek zastosowaliśmy zmienne: leftArrowDown, rightArrowDown, upArrowDown oraz downArrowDown, których wartości domyślnie równe są false. W zależności od tego, który klawisz został wciśnięty, odpowiadającej zmiennej przypisujemy nową wartość równą true. Za zmianę wartości właściwości ctrlDown odpowiada wciśnięcie lub zwolnienie klawisza Ctrl. Z kolei klawisze + i – umieszczone w bloku klawiszy alfanumerycznych regulują wartości właściwości zoomInDown oraz zoomOutDown. W konstruktorze uruchamiamy metody init(), z chwilą gdy obiekt Stage zostanie zainicjowany. if (stage) init(); else addEventListener(Event.ADDED_TO_STAGE, init);
W metodzie init() w pierwszej kolejności wykonaliśmy wszystkie potrzebne operacje na obiekcie stołu montażowego. Ustawiliśmy jakość generowanego obrazu, wyrównanie oraz wyłączyliśmy skalowanie. Następnie dodaliśmy detektory dla zdarzeń zmiany rozmiaru, odświeżenia obrazu i użycia klawiatury. stage.quality = StageQuality.LOW; stage.scaleMode = StageScaleMode.NO_SCALE; stage.align = StageAlign.TOP_LEFT; removeEventListener(Event.ADDED_TO_STAGE, init); addEventListener(Event.ENTER_FRAME, onEnterFrame); stage.addEventListener(Event.RESIZE, onResize); stage.addEventListener(KeyboardEvent.KEY_DOWN, onKeyDown); stage.addEventListener(KeyboardEvent.KEY_UP, onKeyUp);
W dalszej części metody init() stworzyliśmy widok Away3D i zmieniliśmy ustawienia kamery tak, aby obejmowała całą powierzchnię planszy. Do renderowania widoku skorzystaliśmy z klasy BasicRenderer, której obiekt utworzyliśmy, stosując odwołanie Renderer.BASIC. Przed umieszczeniem widoku na liście wyświetlanych obiektów wywołaliśmy metodę addOnMouseMove(), która przy zdarzeniu poruszania kursorem ma wywołać metodę overScene(). view = new View3D(); view.renderer = Renderer.BASIC; view.scene.addOnMouseMove(overScene); addChild(view); view.camera.zoom = 15; view.camera.y = 800; view.camera.lookAt(new Vector3D(0, 0, 0));
Rozdział 8. Interaktywność
377
Po dodaniu widoku w celach testowych umieściliśmy obiekt klasy Trident. Długość jego ramion ustawiliśmy na poziomie 100 pikseli i zmieniliśmy wartość właściwości showLetters na true. Linijkę kodu dodającą oś Trident do sceny Away3D umieściliśmy w komentarzu tak, aby nie wyświetlać obiektu trident bez potrzeby. trident = new Trident(100, true); //view.scene.addChild(trident);
Dalej w metodzie init() stworzyliśmy wskaźnik pozycji, który wcześniej zdefiniowaliśmy jako obiekt pointer. Jego wysokość oraz szerokość ustawiliśmy tak, aby zgadzały się z wymiarami źródła grafiki pointerMC. Ze względu na swoją rolę wskaźnik jest zawsze widoczny na powierzchni planszy. Aby uzyskać taki efekt, nie podnieśliśmy obiektu na osi Y, tylko zastosowaliśmy właściwość pushfront. Przypisanie jej wartości true powoduje wyświetlenie siatki wybranego obiektu nad pozostałymi znajdującymi się w tej samej pozycji Y. pointer = new Plane( { width:34, height:34, material:new MovieMaterial(pointerMC),pushfront:true } );
Na końcu metody init() odwołaliśmy się do dwóch metod tworzących potrzebne modele oraz metody ustawiającej pozycję widoku. initBoard(); initBuildings(); onResize();
W metodzie initBoard() poza stworzeniem planszy i nadaniem jej odpowiednich ustawień ważne było zastosowanie metody uruchamiającej metodę onGroundClick() przy każdym kliknięciu na powierzchni planszy. ground.addOnMouseDown(onGroundClick);
Metoda overScene() wywoływana jest w sytuacji poruszania kursorem w przestrzeni sceny. W tym przypadku interesowały nas jedynie współrzędne osi X oraz Z, które przypisaliśmy do pozycji obiektu pointer. pointer.x = e.sceneX; pointer.z = e.sceneZ;
W metodzie onGroundClick() zapisaliśmy proces przemieszczania wybranego obiektu. Wewnątrz ciała metody w pierwszej kolejności znajdują się instrukcje warunkowe, które sprawdzają, czy został wciśnięty klawisz Ctrl oraz jakiego rodzaju jest kliknięty obiekt. Zdefiniowaliśmy dwie możliwe sytuacje. Pierwsza dotyczy kliknięcia obiektu landingDock reprezentującego budynek fabryki. W tym przypadku przejście między pozycjami jest natychmiastowe, ponieważ nie zastosowaliśmy tutaj klasy TweenMax, tylko od razu przypisaliśmy właściwościom x i z nowe
378
Flash i ActionScript. Aplikacje 3D od podstaw
wartości pozycji wskaźnika pointer. Poza tym przywróciliśmy pierwotny stan przezroczystości obiektu landingDock, wyczyściliśmy zawartość obiektu selected Building i usunęliśmy ze sceny wskaźnik. if (ctrlDown && selectedBuilding) { selectedBuilding.alpha = 1; selectedBuilding.x = pointer.x; selectedBuilding.z = pointer.z; selectedBuilding = null; view.scene.removeChild(pointer); }
Druga sytuacja określona w metodzie onGroundClick() dotyczy pojazdów latających, czyli obiektów fighter. W ich przypadku aby zmienić pozycję, stosuje się klasę TweenMax, w której właściwościom x i z przypisaliśmy nowe wartości położenia wskaźnika. Dodatkowo wewnątrz metody to() klasy TweenMax zapisaliśmy metodę, która zostanie wywołana na koniec animacji. Celem tej metody jest usunięcie ze sceny obiektu pointer oraz wyczyszczenie odwołania do klikniętego pojazdu w obiekcie selectedVehicle. else if (ctrlDown && selectedVehicle) { TweenMax.to(selectedVehicle, 1, { x:pointer.x, z:pointer.z, onComplete:function() { view.scene.removeChild(pointer); selectedVehicle = null; } } ); }
Aby pobrać z wybranej lokalizacji model fabryki w metodzie initBuildings(), skorzystaliśmy z obiektu modelLoader oraz klasy Max3DS. Dodatkowo użyliśmy detektora zdarzeń Loader3DEvent, aby przy zakończeniu pobierania wywołać metodę onLandingDockSuccess(). modelLoader = Max3DS.load('../../resources/models/max3ds/landingDock/LandingDock.3DS'); modelLoader.addOnSuccess(onLandingDockSuccess);
Dopiero w metodzie onLandingDockSuccess() zapisaliśmy proces dodawania modelu do sceny Away3D. W pierwszej kolejności nadaliśmy mu nazwę oraz umieściliśmy zawartość obiektu modelLoader w kontenerze landingDock. Ponieważ w swoich pierwotnych ustawieniach wymiary modelu są znacznie większe od wymiarów dodanej planszy, musieliśmy zastosować metodę scale() do zmniejszenia skali obiektu landingDock. landingDock = new ObjectContainer3D(); landingDock.name = 'RED_landingDock';
W kolejnych linijkach ustawiliśmy model w wybranym miejscu i przypisaliśmy mu filtr czerwonej poświaty, który będzie się pojawiał po każdym najechaniu kursora na obiekt. landingDock.x = 71; landingDock.z = 196; landingDock.y = 15; landingDock.filters = [ new GlowFilter(0xFF0000, 0, 7, 7, 1, 1)];
Aby poświata była widoczna na obiekcie 3D, należy przypisać jego właściwości ownCanvas wartość true.
Do rozpoznawania akcji myszy na powierzchni obiektu landingDock zastosowaliśmy trzy metody zdarzeń MouseEvent3D. landingDock.addOnMouseDown(landingDockOnMouseDown); landingDock.addOnRollOver(landingDockOnMouseRollOver); landingDock.addOnRollOut(landingDockOnMouseRollOut);
Kliknięcie na obiekt landingDock powoduje uruchomienie metody landingDockOn MouseDown(). W jej ciele sprawdzamy, czy wartość właściwości ctrlDown jest równa true. Jeżeli warunek jest spełniony, to metoda ta spowoduje zmianę pozycji obiektu fabryki i wyświetlenie wskaźnika. if (ctrlDown) { selectedBuilding = landingDock; selectedBuilding.alpha = .5; view.scene.addChild(pointer); pointerMC.gotoAndStop('move'); }
W sytuacji gdy wartość właściwości ctrlDown jest równa false, celem metody landingDockOnMouseDown() jest stworzenie nowego obiektu statku kosmicznego. Proces ten zaczyna się podobnie jak tworzenie modelu fabryki. W pierwszej kolejności za pomocą klasy Max3DS pobierany jest z określonej lokalizacji model SpaceFighter01.3DS. Następnie z chwilą zakończenia pobierania wywołujemy metodę onModelLoaderSuccess(). else { modelLoader = Max3DS.load('./models/sf/spaceships/SpaceFighter01.3DS'); modelLoader.addOnSuccess(onModelLoaderSuccess); }
380
Flash i ActionScript. Aplikacje 3D od podstaw
W metodzie onModelLoaderSuccess() zapisaliśmy cały proces tworzenia i pokazania modelu statku kosmicznego. Według scenariusza obiekt ma się pojawić na powierzchni budynku, zwiększyć swoją pozycję na osi Y i przenieść w przypadkowe miejsce wokół fabryki. Żeby uzyskać taki efekt, w pierwszej kolejności zdefiniowaliśmy dwie zmienne numeryczne: randomX i randomY, których wartości są różnicą pozycji modelu fabryki i losowej liczby z przedziału. Do wyznaczenia przypadkowej liczby napisaliśmy osobną metodę randomPosition(), którą omówimy później. var randomX:Number = landingDock.x - randomPosition(-150, 150); var randomZ:Number = landingDock.z - randomPosition(-150, 150);
W dalszej części metody onModelLoaderSuccess() stworzyliśmy obiekt fighter, który przechowuje pobraną zawartość obiektu modelLoader. fighter = new ObjectContainer3D(); fighter.addChild(modelLoader.handle);
Kolejność definiowania właściwości nie ma tutaj większego znaczenia, dlatego zaczęliśmy od dodania detektorów zdarzeń MouseEvent3D. Tak samo jak w przypadku obiektu landingDock, na każdy ze statków kosmicznych będzie można kliknąć, najechać i opuścić kursorem powierzchnię modelu. fighter.addOnMouseDown(fighterOnMouseDown); fighter.addOnRollOver(fighterOnMouseRollOver); fighter.addOnRollOut(fighterOnMouseRollOut);
Następnie dodaliśmy filtr czerwonej poświaty, który będzie się pojawiał, gdy kursor znajdzie się na powierzchni modelu. fighter.filters = [new GlowFilter(0xFF0000, 0, 7, 7, 1, 1)];
Ponieważ pojazd ma się wyłaniać z hangaru, dla animacji ustawiliśmy jego pozycję zgodną z położeniem fabryki oraz skalę na poziomie jednej tysięcznej. fighter.scale(.001); fighter.x = landingDock.x; fighter.y = 20; fighter.z = landingDock.z;
Po utworzeniu statku i przypisaniu jego właściwościom nowych współrzędnych dodaliśmy go do sceny oraz obiektu fighters. view.scene.addChild(fighter); fighters.push(fighter);
Na końcu metody onModelLoaderSuccess() stworzyliśmy animację złożoną z dwóch etapów. W pierwszym powiększyliśmy skalę obiektu, co ma symbolizować jego powstawanie, w drugiej zaś przenieśliśmy go do losowych pozycji x i z na wysokości 100 pikseli.
Do tworzenia animacji złożonej z kilku etapów najlepiej stosować klasę TimelineMax. Poszczególne fazy animacji dodaje się metodą append(), w której argumentem jest odwołanie do klasy TweenMax. Gotową sekwencję animacji można uruchomić, stosując metody play() lub restart(). Szczegóły dotyczące klasy TweenMax znajdują się na stronie: http://www.greensock.com/timelinemax/.
Metoda randomPosition(), jak wspomnieliśmy wcześniej, służy do wygenerowania losowej liczby. Do wyliczenia tej wartości posłużyliśmy się metodami klasy Math oraz przedziału liczbowego podanego w argumentach min i max. return Math.floor(Math.random() * (1 + max - min)) + min;
W metodach landingDockOnMouseRollOver() i landingDockOnMouseRollOut() zapisaliśmy animację pokazywania i chowania poświaty. Aby płynnie przejść od jednego stanu do drugiego, skorzystaliśmy z klasy TweenMax, w której odwołujemy się do pierwszej pozycji z tablicy filters obiektu landingDock i zmieniamy wartość właściwości alpha. //landingDockOnMouseRollOver TweenMax.to(landingDock.filters[0], .5, { alpha:1 } ); //landingDockOnMouseRollOut TweenMax.to(landingDock.filters[0], .5, { alpha:0 } );
Na tej samej zasadzie zakodowaliśmy pojawianie się poświaty wokół obiektów fighter w metodach fighterOnMouseRollOver() i fighterOnMouseRollOut(). Jedyną różnicą jest odwołanie do wybranego obiektu. Ponieważ w tym przypadku liczba pojazdów latających może być większa niż jeden, aby animacja dotyczyła konkretnego obiektu, musieliśmy w klasie TweenMax użyć zapisu e.currentTarget.filters[0]. Metoda fighterOnMouseDown() odpowiada za pojawienie się wskaźnika i rozpoczęcie procesu przemieszczania obiektu latającego. Żeby sprawdzić, czy użytkownik, klikając na obiekt, chce go przenieść w inne miejsce, zastosowaliśmy instrukcję if sprawdzającą, czy zmienna ctrlDown jest równa true. Jeżeli ma ona wartość true, na scenie w pozycji kursora pojawia się wskaźnik. Żeby przejście dotyczyło konkretnego pojazdu, przypisaliśmy obiektowi selectedVehicle odwołanie do klikniętego pojazdu. if (ctrlDown) {
382
Flash i ActionScript. Aplikacje 3D od podstaw selectedVehicle = e.target as ObjectContainer3D; view.scene.addChild(pointer); pointerMC.gotoAndStop('move'); }
Przy każdej zmianie rozmiaru okna uruchamiana jest metoda onResize(). W jej ciele zapisaliśmy wyśrodkowanie widoku view w oknie programu. view.x = stage.stageWidth * .5; view.y = stage.stageHeight * .5;
Znane nam z wcześniejszych przykładów metody onKeyDown() oraz onKeyUp() służą do sprawdzania, czy zaszły warunki zapisane w instrukcjach if, i przypisania odpowiedniej wartości poszczególnym właściwościom. W obu metodach tego przykładu sprawdzaliśmy akcje wciśnięcia i zwolnienia klawiszy strzałek, Ctrl oraz znaków plusa i minusa znajdujących się w górnym rzędzie klawiatury. W metodzie onKeyUp() przy zwolnieniu klawisza Ctrl dodatkowo sprawdziliśmy, czy kursor znajdował się na obiekcie landingDock. Jeżeli tak, to musieliśmy zapisać powrót do pierwotnego stanu poziomu jego przezroczystości, wyczyścić zawartość obiektu selectedBuilding i usunąć wskaźnik ze sceny. if (e.keyCode == Keyboard.CONTROL) { ctrlDown = false; if (selectedBuilding) { selectedBuilding.alpha = 1; selectedBuilding = null; view.scene.removeChild(pointer); } }
Na końcu zapisaliśmy metodę onEnterFrame(), która wywoływana jest przy każdym wystąpieniu zdarzenia Event.ENTER_FRAME. Zawiera ona w sobie kilka instrukcji warunkowych. W każdej z nich dodatkowo sprawdzamy, czy został wciśnięty klawisz Ctrl. Zastosowanie kombinacji klawiszy pozwoliło nam uniknąć korzystania z większej ich liczby. Pierwsza instrukcja if sprawdza, czy wartość zmiennej zoomInDown równa jest true. Jeżeli warunek jest spełniony, to w zależności od stanu zmiennej ctrlDown wykonywana jest odpowiednia operacja. Gdy klawisz Ctrl jest wciśnięty, to kamera zmienia swoją pozycję na osi Y. W przeciwnym razie zwiększana jest wartość właściwości zoom. if (zoomInDown) { if (ctrlDown) view.camera.y += 5;
Rozdział 8. Interaktywność
383
else view.camera.zoom++; }
W przypadku drugiej instrukcji if sprawdzana jest wartość zmiennej zoomOutDown. Gdy wartość tej właściwości jest równa true, to kamera może zmieniać swoją pozycję na osi Y lub zmniejszać wartość właściwości zoom. if (zoomOutDown) { if (ctrlDown) view.camera.y -= 5; else view.camera.zoom--; }
Trzecia instrukcja if dotyczy zdarzenia wciśnięcia klawisza lewej strzałki. Jeżeli warunek jest spełniony, to kamera może wykonywać obrót w lewą stronę lub zmniejszyć pozycję na osi X. if (leftArrowDown) { if (ctrlDown) view.camera.rotationY--; else view.camera.x -= 10; }
Działania czwartej instrukcji warunkowej if są odwrotne do poprzedniej. Dotyczy ona bowiem wciśnięcia klawisza prawej strzałki. Gdy wartość właściwości right ArrowDown jest równa true, to kamera może obracać się w prawą stronę bądź zwiększać pozycję na osi X. if (rightArrowDown) { if (ctrlDown) view.camera.rotationY++; else view.camera.x += 10; }
W piątej instrukcji if sprawdzana jest wartość zmiennej upArrowDown. Jeżeli warunek jest spełniony, to kamera może wykonywać obrót w górę lub zwiększyć pozycję na osi Z. if (upArrowDown) { if (ctrlDown) view.camera.rotationX++; else view.camera.z += 10; }
W ostatniej instrukcji if warunkiem jest wciśnięcie klawisza dolnej strzałki. Gdy wartość właściwości downArrowDown jest równa true, to kamera może wykonać obrót w dół bądź zmniejszyć pozycję na osi Z. if (downArrowDown) {
384
Flash i ActionScript. Aplikacje 3D od podstaw if (ctrlDown) view.camera.rotationX--; else view.camera.z -= 10; }
Na końcu metody onEnterFrame() wywołaliśmy odświeżenie wygenerowanego obrazu metodą render().
Podsumowanie Do kontrolowania obiektów można korzystać zarówno z myszki, jak i klawiatury. Klasa KeyboardEvent reprezentuje zdarzenia związane z używaniem klawiatury. Rozpoznaje procesy wciśnięcia i zwolnienia klawisza. Aby wykrywać akcje klawiatury, należy dodać detektor bezpośrednio do obiektu klasy Stage. Do rozpoznawania wciśniętego klawisza służą właściwości keyCode i charCode. Pierwsza właściwość zwraca wartość numeryczną położenia klawisza na klawiaturze, a druga określa kod znaku wciśniętego klawisza. Przy kontrolowaniu zdarzeń użycia klawiatury przydatna jest klasa Keyboard, która między innymi ma zdefiniowane stałe określające kody standardowych znaków klawiszy. Klasa KeyLocation służy do określenia lokalizacji klawisza, ma stałe określające strefy standardowej klawiatury. W metodach wywołanych zdarzeniami klawiatury warto stosować dodatkowe zmienne o wartościach typu Boolean, określające status poszczególnego klawisza. Jeśli stosujemy te zmienne w metodach wywołujących animację, będzie możliwe tworzenie konkretnych efektów dla różnych kombinacji wciśniętych klawiszy. Zdarzenia MouseEvent nie działają bezpośrednio na obiekcie trójwymiarowym. Na materiałach interaktywnych można stosować zdarzenia klasy MouseEvent. Właściwość interactive w materiałach służy do określenia, czy mają być stosowane zdarzenia myszki. Zdarzenia MouseEvent wywoływane na obiekcie klasy Stage można wykorzystać do zmiany kątów nachylenia poszczególnych obiektów na scenie.
Rozdział 8. Interaktywność
385
Biblioteka Away3D ma własną klasę do obsługi zdarzeń myszy o nazwie MouseEvent3D. Stosując współrzędne UV, można umieszczać elementy w konkretnym miejscu tekstury typu MovieMaterial. Aby filtry typu Blur lub Glow były widoczne na elementach, trzeba zastosować właściwość ownCanvas na wybranym obiekcie i przypisać mu wartość true.
386
Flash i ActionScript. Aplikacje 3D od podstaw
Rozdział 9. Kamery Z rozdziału 2. „Podstawy biblioteki Away3D” wiemy, że kamera z uwagi na swoją rolę jest jednym z podstawowych i najważniejszych komponentów biblioteki Away3D. Dzięki niej w oknie aplikacji jesteśmy w stanie zobaczyć wszystkie te obiekty, które znajdują się w jej polu widzenia. Wiemy również, że kamera jest niewidocznym, pozbawionym powłoki obiektem, któremu można określać kąt nachylenia i pozycję w przestrzeni. Nic nie stoi na przeszkodzie, aby do jednej sceny dodać kilka kamer i na przemian rejestrować obraz z różnych punktów w przestrzeni. Biblioteka Away3D umożliwia programiście umieszczenie dowolnej liczby kamer, ale widok w danej chwili może korzystać tylko z jednej. Biorąc pod uwagę zróżnicowanie projektów 3D tworzonych w technologii Flash, ekipa Away3D przygotowała następujące rodzaje kamer: Camera3D, TargetCamera3D, HoverCamera3D oraz SpringCam. W tym rozdziale poznasz każdą z nich i nauczysz się je wykorzystywać w konkretnych przypadkach, poza tym czytając ten rozdział, dowiesz się: Na jakich zasadach działają kamery w Away3D. Jakie są podstawowe elementy i właściwości kamer. Czym są rzutnia, focus, zoom oraz co kryje się za pojęciem Field of View. Czym różnią się od siebie zoom i focus. Czym jest efekt głębi ostrości i jak go uzyskać. Jakiego rodzaju soczewki są dostępne w Away3D, jak one działają oraz do jakich celów służą. Jakich kamer można używać w Away3D oraz jak je implementować.
388
Flash i ActionScript. Aplikacje 3D od podstaw
Podstawy działania kamer w Away3D Kamery w Away3D jako obiekty trójwymiarowe mają podstawowe metody oraz właściwości pozwalające modyfikować ich położenie w przestrzeni sceny. Stosując poznane w rozdziale 7. „Praca z obiektami” sposoby przenoszenia i obracania obiektów, można z łatwością zmienić pozycję oraz kąty nachylenia kamer umieszczonych na scenie. Poza standardowymi właściwościami obiektów trójwymiarowych kamery mają również kilka takich, które odwzorowują kamery i aparaty fotograficzne stosowane w świecie rzeczywistym. Głównymi składowymi kamer w Away3D, jako obiektów prezentujących scenę i jej zawartość, są właściwości: fov, zoom, focus i lens. Aby dobrze zrozumieć ich znaczenie i zastosowanie, musimy zacząć od wyjaśnienia zasad rejestrowania i wyświetlania zawartości przestrzeni trójwymiarowej.
Rejestrowanie sceny w Away3D W bibliotekach takich jak Away3D i programach do tworzenia grafiki trójwymiarowej wyświetlanie zawartości przestrzeni 3D opiera się na regułach rzutowania na płaszczyznę. To zagadnienie stosowane jest w geometrii wykreślnej — każdemu punktowi w przestrzeni przypisuje się jego odpowiednik w miejscu przecięcia się prostej, która przechodzi przez dany punkt, z płaszczyzną zwaną rzutnią. Każda kamera w Away3D ma przed sobą taką płaszczyznę. Fizycznie nie jest ona widoczna na scenie, podobnie jak sama kamera, ale to, co widzi użytkownik w widoku, jest w rzeczywistości zarejestrowanym przez nią obrazem z rzutni. Schemat wyświetlania obrazu wygenerowanego na rzutni przedstawia rysunek 9.1. W grafice komputerowej i fotografii rozróżniamy kilka rodzajów rzutowania, o których wspomnimy w dalszej części tego rozdziału. Teraz zajmiemy się omawianiem właściwości i pojęć związanych z obiektem kamery w Away3D.
Rozdział 9. Kamery
389
Rysunek 9.1.
Schemat wyświetlania obrazu wygenerowanego na rzutni
Podstawowe pojęcia i właściwości kamer w Away3D Pole widzenia W pierwszej kolejności poznamy właściwość o nazwie fov (ang. Field of View — pole widzenia). Według definicji właściwość ta określa pole widzenia od dolnej do górnej krawędzi rzutni wyrażone w stopniach. Wartość tej właściwości wylicza się z pozycji kamery, odległości kamery od rzutni i jej wymiarów. Standardowo rzutnia przyjmuje wymiary okna aplikacji Flash, co sprawia, że całe okno wypełnione jest sceną Away3D. Na rysunku 9.2 zilustrowano pojęcie pola widzenia. Rysunek 9.2.
Pole widzenia między dolną a górną krawędzią rzutni
390
Flash i ActionScript. Aplikacje 3D od podstaw
Zoom i focus Osobom zainteresowanym fotografią pojęcia zoom i focus na pewno nie są obce. W silniku Away3D kamery również mają właściwości zoom i focus, ale nie w każdym przypadku odzwierciedlają one działanie znane z aparatów fotograficznych. Zacznijmy od pojęcia zoom w świecie rzeczywistym. W aparatach fotograficznych i kamerach termin ten rozbijany jest na dwie kategorie: zoom optyczny i zoom cyfrowy. Zoom optyczny polega na zmianie długości ogniskowej w obiektywie. Z kolei zoom cyfrowy polega na rozciągnięciu wycinka obrazu. W obu przypadkach efektem jest przybliżenie bądź oddalenie fotografowanego obiektu. Działanie parametru zoom w kamerach biblioteki Away3D polega na zwiększaniu i pomniejszaniu powierzchni rzutni. Ustawianie większych wartości rzutni powoduje zmniejszenie jej skali, co symuluje efekt przybliżenia wyświetlanych elementów. Zmniejszanie wartości właściwości zoom działa odwrotnie — pole płaszczyzny zwiększa się, powodując złudzenie oddalenia obserwatora od obiektów. Po dokonaniu jakiejkolwiek zmiany płaszczyzna rzutni musi się pokryć z wymiarami kontenera, w którym osadzony jest widok Away3D. Dlatego musi zostać odpowiednio rozciągnięta bądź zwężona. Na rysunku 9.3 przedstawiono obie sytuacje. Z lewej strony wartość właściwości zoom równa jest 10, a z prawej powiększamy ją na przykład do 15. Zwróć uwagę na to,
że nie rozmiar obiektu ulega zmianie, lecz wymiary rzutni. Rysunek 9.3.
Schemat wyświetlania obrazu wygenerowanego na rzutni
W przypadku właściwości focus na próżno porównywać jej działanie z funkcjonowaniem w aparatach fotograficznych i kamerach. W przypadku właściwości focus w kamerach biblioteki Away3D określa ona odległość kamery od rzutni. Zwiększenie tego dystansu powoduje zmniejszenie pola widzenia, z kolei przybliżenie kamery do rzutni powoduje wzrost wartości właściwości fov. Jest to bardziej naturalny sposób kontroli przybliżenia i oddalenia kamery od obiektów.
Rozdział 9. Kamery
391
Rysunek 9.4 przedstawia proporcje pola widzenia w zależności od wartości właściwości focus. Z lewej strony przy większej odległości kamery od rzutni widać, że kąt pola widzenia jest mniejszy. Z kolei w sytuacji po prawej stronie, przy mniejszym dystansie między kamerą a płaszczyzną, kąt pola widzenia jest znacznie większy. Rysunek 9.4.
Schemat wyświetlania obrazu wygenerowanego na rzutni
Porównanie działania właściwości zoom i focus Po przedstawieniu tych właściwości wykorzystanie ich w aplikacjach oraz sam sposób interpretacji nadal mogą wywoływać wątpliwości. Szczerze mówiąc, sam długo się zastanawiałem, w jakich przypadkach korzystać z właściwości focus. Przeważnie do przybliżeń stosowana jest właściwość zoom. Aby porównać zasady funkcjonowania obu właściwości, napiszemy prostą aplikację, w której za pomocą klawiszy będziemy poruszali kamerą w przestrzeni i zmieniali wartości właściwości focus oraz zoom. Przestrzeń sceny wypełniliśmy obiektami klas Plane oraz Cube, tworząc pewnego rodzaju korytarz. Dzięki tym obiektom będziemy w stanie zaobserwować zmiany przy projekcji obrazu wyświetlanego na rzutni. Wszystkie opcje sterowania kamerą oraz kontrolowania wartości zoom i focus wypisane zostały w panelu pomocniczym w lewym górnym rogu okna aplikacji. Na rysunku 9.5 przedstawiono dwie sytuacje. Po lewej stronie zmieniono wartość właściwości focus, a z prawej w tym samym stopniu zmieniono wartość właściwości zoom. Zwróć uwagę na różnicę w położeniu krawędzi dolnego obiektu Plane.
392
Flash i ActionScript. Aplikacje 3D od podstaw
Rysunek 9.5. Dwa zrzuty ekranów do porównania efektów użycia właściwości focus i zoom
Do omówienia wniosków i ewentualnych możliwości zastosowań przejdziemy później, teraz zajmiemy się przykładem przedstawionym na rysunku 9.5. W pierwszej kolejności stworzymy panel zawierający przyciski wywołujące animacje i zmiany wartości właściwości zoom i focus stosowanej kamery. Stwórz plik CameraPropertiesPanel.as i przepisz następujący kod źródłowy: package { import import import import import
Gdy mamy gotowy plik CameraPropertiesPanel.as, możemy się zająć główną klasą tego przykładu. Przepisz następujący kod źródłowy do pliku CameraPropertiesExample.as, a następnie omówimy jego ważniejsze fragmenty. package { import flash.display.StageAlign; import flash.display.StageQuality;
Rozdział 9. Kamery
395
import flash.display.StageScaleMode; import flash.display.Sprite; import flash.events.Event; import flash.events.KeyboardEvent; import flash.events.MouseEvent; import flash.geom.Vector3D; import flash.ui.Keyboard; import away3d.containers.View3D; import away3d.containers.ObjectContainer3D; import away3d.core.clip.FrustumClipping; import away3d.primitives.Cube; import away3d.primitives.Plane; import com.greensock.TimelineMax; import com.greensock.TweenMax; import com.greensock.easing.*; public class CameraPropertiesExample extends Sprite { private var panel:CameraPropertiesPanel; private var view:View3D; private var ctrlDown:Boolean = false; private var upArrowDown:Boolean = false; private var downArrowDown:Boolean = false; private var leftArrowDown:Boolean = false; private var rightArrowDown:Boolean = false; public function CameraPropertiesExample() { stage.quality = StageQuality.LOW; stage.align = StageAlign.TOP_LEFT; stage.scaleMode = StageScaleMode.NO_SCALE; stage.addEventListener(Event.ENTER_FRAME, onEnterFrame); stage.addEventListener(Event.RESIZE, onResize); stage.addEventListener(KeyboardEvent.KEY_DOWN, onKeyDown); stage.addEventListener(KeyboardEvent.KEY_UP, onKeyUp); view = new View3D(); view.clipping = new FrustumClipping(); addChild(view); view.camera.z = 0; addGroup(0); addGroup(1); addGroup(2); addPanel(); onResize(); } private function addGroup(pos:Number):void { var group:ObjectContainer3D = new ObjectContainer3D(); group.addChild(new Plane( { y:-100, bothsides:true, height:1124, width:1124, segmentsH:10, segmentsW:10 } )); group.addChild(new Plane( { y:100, bothsides:true, height:1124, width:1124, segmentsH:10, segmentsW:10 } ));
Flash i ActionScript. Aplikacje 3D od podstaw if (e.keyCode == Keyboard.CONTROL) ctrlDown = false; } private function onEnterFrame(e:Event):void { if (upArrowDown) { if (ctrlDown) view.camera.rotationX++; else view.camera.moveForward(10); } if (downArrowDown) { if (ctrlDown) view.camera.rotationX--; else view.camera.moveBackward(10); } if (rightArrowDown) { if (ctrlDown) view.camera.rotationY++; else view.camera.moveRight(10); } if (leftArrowDown) { if (ctrlDown) view.camera.rotationY--; else view.camera.moveLeft(10); } view.render(); } private function onResize(e:Event = null):void { view.x = stage.stageWidth * .5; view.y = stage.stageHeight * .5; panel.draw(stage.stageWidth, 70); } } }
Do aranżacji sceny i ustawienia punktów odniesienia dla kamery zastosowaliśmy kilkakrotnie obiekty klas Plane oraz Cube. Żeby nie wyliczać na nowo pozycji każdego z elementów, ustalony układ obiektów umieściliśmy w kontenerze, tak aby modyfikować jedynie jego pozycję. Przemieszczanie i zmiana kąta nachylenia kamery względem wszystkich osi mogą powodować znikanie poszczególnych segmentów umieszczonych na scenie obiektów. Aby temu zapobiec, zastosowaliśmy klasę FrustumClipping. Istotnymi opcjami są również animacje, które można uruchomić odpowiednimi klawiszami. Aby wykonać proste i kilkuetapowe sekwencje animacji, skorzystaliśmy z klas TweenMax, TimelineMax oraz klas z pakietu com.greensock.easing.*, nadających rozmaite efekty przejścia między stanami animowanego obiektu.
Rozdział 9. Kamery
399
Na początku klasy CameraPropertiesExample zdefiniowaliśmy obiekt widoku o nazwie view oraz obiekt napisanej przez nas klasy CameraPropertiesPanel. Poza nimi dodaliśmy również kilka zmiennych odpowiadających za wciśnięcie poszczególnych klawiszy. W konstruktorze klasy CameraPropertiesExample w pierwszej kolejności zmieniliśmy ustawienia dotyczące stołu montażowego. Następnie dodaliśmy do obiektu stage potrzebne do prawidłowego funkcjonowania detektory zdarzeń: Event.ENTER_ FRAME, Event.RESIZE, KeyboardEvent.KEY_DOWN i KeyboardEvent.KEY_UP. Po wykonaniu tej czynności stworzyliśmy widok i od razu przypisaliśmy jego parametrowi clipping nowy sposób wyświetlania siatek obiektów znajdujących się na scenie. Stosując FrustumClipping, pozbyliśmy się problemu znikających trójkątów ułożonych blisko kamery oraz zwiększyliśmy wydajność tego przykładu. Dodatkowo umieściliśmy kamerę w centrum sceny, tak aby znajdowała się na środku wygenerowanego otoczenia. view = new View3D(); view.clipping = new FrustumClipping(); addChild(view); view.camera.z = 0;
W kolejnych linijkach konstruktora trzykrotnie wywołaliśmy metodę addGroup() tworzącą kontener z obiektami. W każdym z przypadków użyliśmy jako argumentu innej wartości liczbowej. Sens metody addGroup() omówimy za chwilę. addGroup(0); addGroup(1); addGroup(2);
Na końcu konstruktora wywołaliśmy metodę addPanel(), a następnie onResize(), w której zmieniane są wymiary panelu użytkownika i pozycja widoku. addPanel(); onResize(); właściwości
Wewnątrz metody addPanel() stworzyliśmy obiekt klasy CameraPropertiesPanel i dodaliśmy go do listy wyświetlanych obiektów. panel = new CameraPropertiesPanel(); addChild(panel);
W dalszej części tej metody utworzyliśmy szereg obiektów nasłuchujących zdarzeń wciśnięcia poszczególnych przycisków panelu użytkownika. Po wychwyceniu któregokolwiek ze zdarzeń wywoływana jest metoda onPanelEvent(). panel.addEventListener('focusAnimationEvent', onPanelEvent); panel.addEventListener('zoomAnimationEvent', onPanelEvent);
400
Flash i ActionScript. Aplikacje 3D od podstaw panel.addEventListener('startPositionEvent', onPanelEvent); panel.addEventListener('focusLessEvent', onPanelEvent); panel.addEventListener('focusMoreEvent', onPanelEvent); panel.addEventListener('zoomLessEvent', onPanelEvent); panel.addEventListener('zoomMoreEvent',onPanelEvent);
W metodzie onPanelEvent() zapisaliśmy instrukcję warunkową switch(), w której sprawdzany jest typ przechwyconego zdarzenia. W zależności od tego, jakie zdarzenie wywołało metodę onPanelEvent(), uruchamiany jest odpowiedni kod. Na przykład wciśnięcie przycisku Focus wywołuje zdarzenie focusAnimationEvent, które z kolei uruchamia następujący kod: case 'focusAnimationEvent': { view.camera.zoom = 10; view.camera.focus = 100; anim = new TimelineMax(); anim.append(TweenMax.to(view.camera, 3, { focus:10 } )); anim.append(TweenMax.to(view.camera, 2, { focus:100, ease:Elastic.easeOut } )); anim.play(); break; }
Zastosowanie instrukcji warunkowej switch(), sprawdzającej wartość właściwości type obiektu e, zaoszczędziło nam pisania osobnej metody dla każdego z nasłuchiwanych zdarzeń. Na końcu metody onPanelEvent() wywołaliśmy na obiekcie panel metodę updateOut put(), podając jako argumenty wartości właściwości zoom, focus oraz fov. panel.updateOutput(view.camera.zoom, view.camera.focus, Math.floor(view.camera.fov));
Metoda addGroup(), jak wskazuje nazwa, dodaje grupę, której elementami są obiekty wyświetlane na scenie Away3D. Grupa ta w rzeczywistości jest obiektem kontenera o nazwie group, do którego dodaliśmy dwa obiekty typu Plane służące za podłogę i sufit oraz osiem obiektów klasy Cube. Cztery z nich zawiesiliśmy pod sufitem, a pozostałe umieściliśmy na podłodze. Wybrana konstrukcja jest przypadkowa, głównym celem wyświetlania obiektów jest zilustrowanie projekcji obiektów na rzutni przy różnych wartościach i zachowaniach kamery. var group:ObjectContainer3D = new ObjectContainer3D(); group.addChild(new Plane( {y:-100, bothsides:true, height:1124, width:1124, segmentsH:10, segmentsW:10 } )); group.addChild(new Plane( { y:100, bothsides:true, height:1124, width:1124, segmentsH:10, segmentsW:10 } )); group.addChild(new Cube( { y:-50, x:-512, z:512 } )); group.addChild(new Cube( { y:-50, x:512, z:512 } ));
Metoda addGroup() jako argument przyjmuje wartość liczbową pos, która odpowiada za położenie na globalnej osi Z. Podana liczba mnożona jest przez głębię powierzchni kontenera, dzięki czemu każda kolejno dodana grupa w tym przykładzie tworzy korytarz. group.z = pos * 1124; view.scene.addChild(group);
W metodzie onKeyDown() uruchamianej przy zajściu zdarzenia KeyboardEvent.KEY_ DOWN zapisaliśmy instrukcje warunkowe if(), w których sprawdzamy, czy wciśnięte zostały klawisze strzałek oraz Ctrl, które służą do przemieszczania i obracania kamery. if if if if if
W metodzie onKeyUp() zapisaliśmy instrukcje if sprawdzające, czy zwalniany klawisz jest jednym z używanych do przemieszczania i obracania kamery. Jeżeli warunek jest spełniony, to wartość wybranej zmiennej zmieniona zostaje na false. W metodzie onEnterFrame() umieściliśmy cztery instrukcje warunkowe, które sprawdzają, czy wartości zmiennych odpowiadających za stan poszczególnych klawiszy są równe true lub false. W przypadku gdy któryś z nich okaże się prawdziwy i odpowiada któremuś z klawiszy strzałek, to uruchomiona zostanie kolejna instrukcja if sprawdzająca stan, w jakim jest klawisz Ctrl. W zależności od wyniku tego warunku kamera zmienia swoje położenie bądź kąt nachylenia względem konkretnej osi. Na końcu tej metody zapisaliśmy odwołanie do metody render(), odświeżającej wyświetlaną zawartość widoku. Ostatnia zapisana metoda onResize() wywoływana jest w konstruktorze oraz przy każdej zmianie wymiarów okna. Zadaniem tej metody jest wyśrodkowanie pozycji widoku względem okna uruchomionej aplikacji i przerysowanie tła panelu użytkownika tak, by zajmował on całą szerokość okna i wysokość 70 pikseli. view.x = stage.stageWidth * .5; view.y = stage.stageHeight * .5; panel.draw(stage.stageWidth, 70[MM4]);
402
Flash i ActionScript. Aplikacje 3D od podstaw
Głębia ostrości W dziedzinach związanych z optyką pojęcie głębi ostrości oznacza odległość, w której rejestrowane obiekty mają wyraźne, ostre kontury. Pozostałe w różnym stopniu są zamazywane, tak aby odseparować je od głównego obiektu. Głębi ostrości najczęściej używa się w sytuacjach, gdy spośród całej grupy elementów trzeba wyodrębnić jeden lub kilka, na których ma być skupiona uwaga obserwatora. Kamery w bibliotece Away3D również mają opcję głębi ostrości, którą można w łatwy sposób uruchomić, wykonując kilka kroków. W pierwszej kolejności należy utworzyć obiekty klasy DepthOfFieldSprite, które napisano specjalnie do tego celu. DepthOfFieldSprite jest potomną klasy Sprite3D, dlatego jej obiekty zawsze skierowane są w stronę kamery, a używane materiały określają kształty i charakter obiektu.
Z obiektu kamery należy metodą enableDof() włączyć opcję głębi ostrości i ewentualnie zmienić wartości właściwości związanych z tym pojęciem. Aby określić poziomy zróżnicowania rozmycia, należy podać wartość liczbową parametrowi doflevels. Maksymalne rozmycie, jakie może zostać nałożone na obiekt znajdujący się poza zasięgiem, wyznacza właściwość maxblur. Z kolei modyfikowanie wartości właściwości aperture odpowiada regulacji rozmiarów przesłony. Im mniejszy rozmiar przesłony zostanie ustawiony, tym większą głębię uzyskamy. Jeżeli z jakichś powodów trzeba będzie wyłączyć efekt głębi ostrości, należy skorzystać z metody disbleDof(). Gdy masz już podstawowe informacje na temat głębi ostrości, pora na stworzenie przykładu ilustrującego jej działanie w Away3D. Napiszemy prostą i krótką aplikację, w której dodamy określoną liczbę obiektów klasy DepthOfFieldSprite, prezentujących głowę potwora[MM5]. Wszystkie te elementy umieścimy w grupie ObjectContainer3D i wprawimy w powolny obrót względem osi X. Poszczególnymi klawiszami na klawiaturze będziemy kontrolowali właściwości kamery, zmieniając tym samym działanie efektu głębi ostrości. Efekt, jaki uzyskamy, kompilując kod źródłowy tego przykładu, przedstawiono na rysunku 9.6.
Na pierwszy rzut oka może się wydawać, że przykład ten został napisany za pomocą standardowych klas języka ActionScript 3.0 bez użycia Away3D. Tak jednak nie jest — możesz to sprawdzić, przepisując i kompilując następujący kod: package { import import import import import import import import import import
public class DoFExample extends Sprite { [Embed(source="monster.swf", symbol="Head")] private var MonsterHead:Class; private var view:View3D; private var heads:ObjectContainer3D = new ObjectContainer3D(); public function DoFExample() { stage.align = StageAlign.TOP_LEFT; stage.scaleMode = StageScaleMode.NO_SCALE;
404
Flash i ActionScript. Aplikacje 3D od podstaw stage.addEventListener(Event.ENTER_FRAME, onEnterFrame); stage.addEventListener(Event.RESIZE, onResize); view = new View3D(); view.camera.enableDof(); view.camera.doflevels = 10; view.camera.aperture = 550; view.camera.maxblur = 5; view.camera.zoom = 2; addChild(view); view.scene.addChild(heads); // var mat:MovieMaterial = new MovieMaterial(new MonsterHead()); for (var i:uint=0; i < 100; i++) { var sp:DepthOfFieldSprite = new DepthOfFieldSprite(mat, 100, 100); sp.x = Math.floor(Math.random() * (1 + 900 + 600)) -600; sp.y = Math.floor(Math.random() * (1 + 900 + 600)) -600; sp.z = Math.floor(Math.random() * (1 + 900 + 600)) -600; sp.scaling = Math.floor(Math.random() * 10) * .1; heads.addSprite(sp); } onResize(); } private function onEnterFrame(e:Event):void { heads.rotationX--; view.render(); } private function onResize(e:Event = null):void { view.x = stage.stageWidth * .5; view.y = stage.stageHeight * .5; } } }
W klasie DoFExample zdefiniowaliśmy obiekt typu Class, w którym osadzony będzie obiekt Head z pliku monster.swf. Poza tym zdefiniowaliśmy obiekt widoku i utworzyliśmy kontener dla obiektów klasy DepthOfFieldSprite. W konstruktorze standardowo przypisaliśmy nowe ustawienia dla stołu montażowego i dodaliśmy detektory zdarzeń. Po wykonaniu tych czynności stworzyliśmy widok w postaci obiektu view. W kolejnych krokach na obiekcie kamery uruchomiliśmy opcję głębi ostrości, wywołując metodę enableDof(), i ustawiliśmy przykładowe wartości dla parametrów doflevels, aperture i maxblur.
W konstruktorze, korzystając z pętli for, utworzyliśmy obiekty klasy DepthOfField Sprite, reprezentujące pęcherzyki powietrza. Każdemu obiektowi sp ustawiliśmy wymiary i przypisaliśmy wcześniej utworzony materiał klasy MovieMaterial o nazwie mat. Źródłem wyświetlanego obrazu na materiale jest obiekt klasy Monster Head, który połączony jest z elementem MovieClip umieszczonym w pliku monster.swf. W kolejnych linijkach ustawiliśmy losowe wartości dla właściwości x, y, z oraz scaling. Dzięki temu zgrupowane elementy będą się różniły wymiarami i pozycją w kontenerze heads. var mat:MovieMaterial = new MovieMaterial(new MonsterHead()); for (var i:uint=0; i < 100; i++) { var sp:DepthOfFieldSprite = new DepthOfFieldSprite(mat, 100, 100); sp.x = Math.floor(Math.random() * (1 + 900 + 600)) -600; sp.y = Math.floor(Math.random() * (1 + 900 + 600)) -600; sp.z = Math.floor(Math.random() * (1 + 900 + 600)) -600; sp.scaling = Math.floor(Math.random() * (1 + 10)) * .05; heads.addSprite(sp); }
Na końcu konstruktora wywołaliśmy metodę onResize(), w której widok umieszczany jest na środku okna aplikacji. Metoda onEnterFrame() zawiera kod, który powoduje odświeżanie wyświetlanej zawartości sceny i obraca kontener heads względem osi X. Do implementacji efektu głębi ostrości niekoniecznie trzeba angażować kamery. Inną możliwością jest zastosowanie klasy DofCache, której właściwości są takie same jak w przypadku klasy Camera3D i jej potomnych. Aby włączyć efekt głębi ostrości, używając DofCache, należy właściwości statycznej usedof tej klasy przypisać wartość true. Stosując efekt głębi ostrości, korzysta się ze standardowych filtrów Blur, co jest mocno obciążające dla procesora. Przy większej liczbie obiektów DepthOfFieldSprite aplikacja może uruchamiać się znacznie dłużej niż inne bądź funkcjonować z dużym opóźnieniem. Dlatego powinno się dokładnie przemyśleć sytuacje, w jakich Depth of Field miałby być użyty.
406
Flash i ActionScript. Aplikacje 3D od podstaw
Lens Ostatnią z właściwości wymienionych na początku tego podrozdziału jest lens (soczewka). Służy ona do implementacji wirtualnego obiektywu, który modyfikuje wyświetlanie sceny, podobnie jak soczewki używane w aparatach fotograficznych. Dostępnym obiektywom w bibliotece Away3D przyjrzymy się w kolejnym podrozdziale.
Rodzaje soczewek W tym podrozdziale zajmiemy się omawianiem dostępnych w bibliotece Away3D klas reprezentujących różnego rodzaju soczewki. W kolejnych podpunktach przedstawimy poszczególne z nich. Zaczniemy od powiedzenia kilku słów na temat klasy, a skończymy na przykładzie zastosowania jej obiektu. Aby nie tworzyć osobnych aplikacji dla każdej z klas soczewek, napiszemy jedną ogólną, zawierającą przykłady zastosowań wszystkich.
Przykład Aby dobrze zobrazować działanie obiektów soczewek, musimy stworzyć otoczenie złożone z dużej liczby obiektów trójwymiarowych. Korzystając między innymi z płaszczyzny oraz sześcianów, wygenerujemy planszę z określoną liczbą bloków pokrytych różnymi kolorami i mających losowo wyliczoną wysokość. Uzyskany efekt będzie przypominał miasto zbudowane z kolorowych drapaczy chmur, między którymi będziemy mogli się poruszać, stosując klawisze: W, S, A, D, a także strzałki. Poza obsługą klawiszy dodamy również panel użytkownika zawierający przyciski do zmiany soczewki oraz wartości właściwości zoom i focus. Całość będzie wyglądała tak, jak to pokazano na rysunku 9.7. Jak widać na rysunku 9.7, w górnej części okna umieszczony jest panel użytkownika z przyciskami uruchamiającymi konkretny rodzaj soczewki oraz zmieniającymi wartości właściwości zoom i focus. Zanim przejdziemy do klasy bazowej przykładu zastosowania soczewek, stworzymy wspomniany panel użytkownika. Przepisz poniższy kod do pliku LensPanel.as.
Teraz przepisz kod źródłowy klasy bazowej przykładu do pliku LensExample.as, a następnie omówimy jego ważniejsze fragmenty. package { import import import import import import
Flash i ActionScript. Aplikacje 3D od podstaw import flash.ui.Keyboard; // import away3d.cameras.lenses.*; import away3d.containers.View3D; import away3d.containers.ObjectContainer3D; import away3d.primitives.Cube; import away3d.primitives.Plane; import away3d.lights.DirectionalLight3D; import away3d.materials.ShadingColorMaterial; import away3d.materials.ColorMaterial; public class LensExample extends Sprite { private var panel:LensPanel; private var view:View3D; private var upArrowDown:Boolean = false; private var downArrowDown:Boolean = false; private var leftArrowDown:Boolean = false; private var rightArrowDown:Boolean = false; private var wDown:Boolean = false; private var sDown:Boolean = false; private var aDown:Boolean = false; private var dDown:Boolean = false; private var ctrlDown:Boolean = false; private var spaceDown:Boolean = false; public function LensExample() { stage.quality = StageQuality.LOW; stage.align = StageAlign.TOP_LEFT; stage.scaleMode = StageScaleMode.NO_SCALE; stage.addEventListener(Event.ENTER_FRAME, onEnterFrame); stage.addEventListener(Event.RESIZE, onResize); stage.addEventListener(KeyboardEvent.KEY_DOWN, onKeyDown); stage.addEventListener(KeyboardEvent.KEY_UP, onKeyUp); // view = new View3D(); view.camera.position = new Vector3D(0, 512, -512); view.camera.lookAt(new Vector3D(0, 0, 0)); addChild(view); var light:DirectionalLight3D = new DirectionalLight3D(); light.direction = new Vector3D(500, -300, 200); view.scene.addLight(light); view.scene.addChild(new Plane( { material:new ColorMaterial(0x999999), y: -25, width:2000, height:1000, segmentsW:10, segmentsH:10, pushback:true } )); for (var i:Number = -10; i < 10; i++) { addBlocks(i); } addPanel(); onResize(); }
Rozdział 9. Kamery private function addPanel():void { panel = new LensPanel();[MM6] addChild(panel); panel.addEventListener('ZoomFocusLensEvent', onPanelEvent); panel.addEventListener('PerspectiveLensEvent', onPanelEvent); panel.addEventListener('SphericalLensEvent', onPanelEvent); panel.addEventListener('OrthogonalLensEvent', onPanelEvent); panel.addEventListener('focusLessEvent', onPanelEvent); panel.addEventListener('focusMoreEvent', onPanelEvent); panel.addEventListener('zoomLessEvent', onPanelEvent); panel.addEventListener('zoomMoreEvent',onPanelEvent); } private function onPanelEvent(e:Event):void { switch(e.type) { case 'ZoomFocusLensEvent': { view.camera.lens = new ZoomFocusLens(); break; } case 'PerspectiveLensEvent': { view.camera.lens = new PerspectiveLens(); break; } case 'SphericalLensEvent': { view.camera.lens = new SphericalLens(); break; } case 'OrthogonalLensEvent': { view.camera.lens = new OrthogonalLens(); break; } case 'focusLessEvent': { view.camera.focus-=10; break; } case 'focusMoreEvent': { view.camera.focus+=10; break; } case 'zoomLessEvent': { view.camera.zoom--; break;
411
412
Flash i ActionScript. Aplikacje 3D od podstaw } case 'zoomMoreEvent': { view.camera.zoom++; break; } } } private function addBlocks(pos:Number):void { var group:ObjectContainer3D = new ObjectContainer3D(); group.x = pos * 100; for (var i:Number = -8; i < 8; i++) { var h = Math.floor(Math.random() * (1 + 300 - 25)) + 25; group.addChild(new Cube( { material:new ShadingColorMaterial (Math.random() * 0xFFFFFF), width:25, depth:25, height:h, y:h * .5, z:50 * i } )); } view.scene.addChild(group); } private function onKeyDown(e:KeyboardEvent):void { switch(e.keyCode) { case case case case case case case case case case
} } private function onKeyUp(e:KeyboardEvent):void { switch(e.keyCode) { case Keyboard.UP: upArrowDown = false; break; case Keyboard.DOWN: downArrowDown = false; break; case Keyboard.LEFT: leftArrowDown = false; break; case Keyboard.RIGHT: rightArrowDown = false; break; case Keyboard.W: wDown = false; break; case Keyboard.S: sDown = false; break; case Keyboard.A: aDown = false; break;
Rozdział 9. Kamery
413
case Keyboard.D: dDown = false; break; case Keyboard.SPACE: spaceDown = false; break; case Keyboard.CONTROL: ctrlDown = false; break; } } private function onEnterFrame(e:Event):void { if (spaceDown) view.camera.y++; if (ctrlDown) view.camera.y--; if (wDown) view.camera.moveForward(10); if (upArrowDown) view.camera.rotationX++; if (sDown) view.camera.moveBackward(10); if (downArrowDown) view.camera.rotationX--; if (aDown) view.camera.moveLeft(10); if (leftArrowDown) view.camera.rotationY--; if (dDown) view.camera.moveRight(10); if (rightArrowDown) view.camera.rotationY++; view.render(); } private function onResize(e:Event = null):void { view.x = stage.stageWidth * .5; view.y = stage.stageHeight * .5; panel.draw(stage.stageWidth, 55); } } }
Budowa oraz zasady działania tego kodu źródłowego są podobne do przykładu z podpunktu „Porównanie działania właściwości zoom i focus”, dlatego przyjrzymy się tylko kilku fragmentom klasy LensExample. Do wygenerowania miasta użyliśmy obiektów klas Plane oraz Cube, stosując przy tym oświetlenie typu DirectionalLight3D i materiał ShadingColorMaterial. Dzięki temu różnice w wyświetlaniu obiektów będą wyraźniejsze. W konstruktorze klasy stworzyliśmy widok, przypisując kamerze nowe położenie i punkt skierowania, oraz ustawiliśmy światło w dowolnie wybranej pozycji. var light:DirectionalLight3D = new DirectionalLight3D(); light.direction = new Vector3D(500, -300, 200); view.scene.addLight(light);
W dalszej części konstruktora dodaliśmy podłoże i za pomocą pętli for odwołaliśmy się do metody tworzącej bloki. Kolejno generowaną z wybranego przedziału wartość zmiennej i przypisywaliśmy jako argument metody addBlocks(). view.scene.addChild(new Plane({material:new ColorMaterial(0x999999), y:-25,width:2000, height:1000,segmentsW:10,segmentsH:10,pushback:true}));
414
Flash i ActionScript. Aplikacje 3D od podstaw for (var i:Number = -10; i < 10; i++) { addBlocks(i); }
Wewnątrz metody addBlocks() zdefiniowaliśmy i dodaliśmy obiekt kontenera, który będzie zawierał wygenerowane sześciany. Tworzenie kolumny budynków również wykorzystuje pętlę for z przypadkowo wybranym przedziałem. Zastosowanie jej zredukowało liczbę linijek kodu źródłowego. W każdej iteracji for tworzony jest sześcian, którego kolor i wysokość generowane są losowo, a pozycje na osi Z odpowiadają iloczynowi liczby 50 i wartości zmiennej i. Dodatkowo aby blok postawiony był na podłożu plane, wartość pozycji na osi Y równa się połowie wartości zmiennej h. Na końcu utworzony kontener group z kolumną sześcianów wewnątrz umieszczamy na scenie Away3D. var group:ObjectContainer3D = new ObjectContainer3D(); group.x = pos * 100; for (var i:Number = -8; i < 8; i++) { var h = Math.floor(Math.random() * (1 + 300 - 25)) + 25; group.addChild(new Cube( { material:new ShadingColorMaterial(Math.random() * 0xFFFFFF), width:25, depth:25, height:h, y:h * .5, z:50 * i } )); } view.scene.addChild(group);
Zmiany pozycji kamery oraz rodzaju stosowanego obiektywu wprowadza się, używając klawiatury. Dlatego zapisaliśmy w konstruktorze detektory zdarzeń wciśnięcia i zwolnienia klawisza. Metody uruchamiane po zajściu któregoś z tych przypadków odpowiednio zmieniają wartości właściwości kamery bądź wartości zmiennych stosowanych w metodzie onEnterFrame(). Celem metody wywoływanej przy wystąpieniu zdarzenia Event.ENTER_FRAME jest odświeżenie wyświetlanej zawartości oraz płynne przemieszczanie kamery.
AbstractLens Klasa AbstractLens jest podstawą wszystkich pozostałych klas znajdujących się w pakiecie away3d.cameras.lenses. Ma szereg chronionych właściwości, które wykorzystują dziedziczące po niej: ZoomFocusLens, PerspectiveLens, SphericalLens, OrthogonalLens. Aby generować obraz, nie korzysta się bezpośrednio z klasy AbstractLens. Jednak świadomość tego, że istnieje i jest klasą macierzystą dla pozostałych obiektywów, przyda się przy tworzeniu własnych rodzajów obiektywów.
Rozdział 9. Kamery
415
Proponuję, byś za jakiś czas, po utrwaleniu zdobytej wiedzy, spróbował sam stworzyć nowy rodzaj obiektywu; na razie wystarczą nam informacje zawarte w poniższych tabelach 9.1 i 9.2. Tabela 9.1. Metody klasy AbstractLens
Nazwa
Opis
getPerspective(screenZ:Number):Number
Zwraca wartość liczbową skalowania perspektywy dla podanej odległości od kamery
Tabela 9.2. Stałe klasy AbstractLens
Nazwa
Rodzaj
Wartość
Opis
toDEGREES
Number
57.29577951308232
Przelicznik na stopnie
toRADIANS
Number
0.017453292519943295
Przelicznik na radiany
ZoomFocusLens i PerspectiveLens Działanie obiektywów typu ZoomFocusLens oraz PerspectiveLens jest bardzo podobne, dlatego przedstawimy je razem w jednym podpunkcie. Oba przedstawiają wygenerowaną scenę podobnie do tego, jak ludzkie oko rejestruje otoczenie. Różnica między nimi w uzyskanym efekcie jest niewielka. Gdy stosujemy obiektyw Zoom FocusLens, pole widzenia jest większe, jakby za sprawą zmiany wartości właściwości focus kamera była oddalona od rzutni. Ogólnie ustalono, że wyświetlany w ten sposób obraz jest mniej rzeczywisty niż przy zastosowaniu obiektywu PerspectiveLens. Dlatego nieformalnie ten drugi rodzaj jest uważany za standardowy. Jednak z uwagi na to, że wcześniejsze wersje biblioteki Away3D stosowały ZoomFocusLens, jeszcze w wersji 3.6 oficjalnie domyślnym obiektywem jest ZoomFocusLens. Na rysunku 9.8 przedstawiono zastosowanie obiektywów ZoomFocusLens i Per spectiveLens. W obu przypadkach wartości właściwości kamery nie były modyfikowane.
SphericalLens Obiekt klasy SphericalLens służy do prezentacji sceny z beczkowatymi zniekształceniami obrazu, zwanymi również efektem rybiego oka.
416
Flash i ActionScript. Aplikacje 3D od podstaw
Rysunek 9.8. Obrazy wygenerowane z użyciem ZoomFocusLens i PerspectiveLens
Zastosowanie tego obiektywu służy do prezentacji sceny z szerokim kątem widzenia. Aby uniknąć efektów rozciągnięcia powierzchni obiektów podczas modyfikowania wartości właściwości focus, można zastosować SphericalLens i uzyskać bardziej kulisty kształt. Efekt zastosowania tego rodzaju obiektywu przedstawia rysunek 9.9. Rysunek 9.9.
Scena wyświetlona z użyciem obiektywu SphericalLens
Rozdział 9. Kamery
417
OrthogonalLens Czasami projekt wymaga innego spojrzenia na wirtualną rzeczywistość, niż to pokazano w poprzednich trzech rodzajach obiektywów. Niektóre aplikacje, jak na przykład gry, wymagają izometrycznego ujęcia sceny. Do takich właśnie celów służy obiektyw klasy OrthogonalLens. Gdy używamy tego obiektywu, wyświetlane elementy zachowują proporcje swoich wymiarów, niezależnie od położenia na scenie i odległości od kamery. Zwróć uwagę w przykładzie dla tego podrozdziału, że zwiększanie wartości właściwości focus — w przeciwieństwie do innych obiektywów — powoduje efekt oddalania kamery. Istotną kwestią jest również to, że na wyświetlanie obiektów bezpośredni wpływ ma kolejność ich stworzenia i umieszczenia na scenie. Kolejno dodawane obiekty w porównaniu z poprzednimi umieszczane są jakby na nowych warstwach sceny. To oznacza, że każdy nowo dodany do sceny obiekt, niezależnie od swojej pozycji, będzie zakrywał obiekty o indeksach niższych niż jego. Gdy korzystamy z soczewki OrthogonalLens, położenie obiektu w przestrzeni jest mniej istotne niż jego pozycja na liście wyświetlanych obiektów. Na rysunku 9.10 przedstawiono scenę z dwóch różnych stron, wyrenderowaną z użyciem soczewki OrthogonalLens. W naszym przykładzie obiekty typu Cube umieszczono na scenie w kierunku dodatnich wartości osi X i Z globalnego układu współrzędnych. W lewym oknie kamera skierowana jest w przeciwnym kierunku, dzięki czemu wydaje się, że sześciany są wyświetlane w odpowiedniej kolejności. W prawym oknie kamera została skierowana w tym samym kierunku, w którym umieszczono sześciany na scenie. Widzimy, że kolejno dodawane rzędy obiektów zakrywają poprzednie, tak jakby były one osadzone na osobnych warstwach.
Rysunek 9.10. Scena wyświetlona z użyciem obiektywu OrthogonalLens
418
Flash i ActionScript. Aplikacje 3D od podstaw
Stosowanie Renderer.CORRECT_Z_ORDER z obiektywem typu OrthogonalLens może powodować przekłamania na siatce obiektów umieszczonych na scenie.
Rodzaje kamer Camera3D W bibliotece Away3D podstawowym rodzajem kamery jest obiekt klasy Camera3D, z której korzystaliśmy we wszystkich dotychczasowych przykładach. Przy każdym wygenerowaniu widoku automatycznie tworzony jest również obiekt klasy Camera3D. W pewnym sensie jest to ułatwienie, ponieważ przy standardowych założeniach nie trzeba samemu tworzyć nowej kamery, wystarczy jedynie odwołać się do właściwości camera zawartej w widoku i dokonać odpowiednich czynności. Jak wiemy, każdy z dodawanych do sceny obiektów swoją pozycję domyślną ma w punkcie centralnym Vector3D(0, 0, 0). W przypadku kamery klasy Camera3D jest inaczej, ponieważ jej położenie na osi Z równe jest -1000. Nie przypadkowo jest to wartość ujemna[MM7], ponieważ jeśli chcemy widzieć elementy znajdujące się blisko centrum sceny, należy kamerę odpowiednio przesunąć. W przypadku Away3D kamera spogląda na obiekty od tyłu, jak w grach z widokiem z trzeciej osoby. Nie będziemy w tym miejscu tworzyli specjalnego przykładu prezentującego zachowania tej kamery, jedynie w krótkim listingu zobaczymy sposób jej tworzenia z przykładowymi ustawieniami. var camera1:Camera3D = new Camera3D(); camera1.position = new Vector3D(500, 500, -500); camera1.lookAt(new Vector3D(100, 100, 100)); view.camera = camera1;
W taki sposób można stworzyć wiele kamer i w odpowiednim czasie przełączać się między nimi, przypisując parametrowi camera konkretny obiekt. W tabelach 9.3 i 9.4 wypisane zostały właściwości oraz metody zawarte w tej klasie, dodatkowo w tabeli 9.5 znajdują się dwie stałe przydatne w przeliczeniach kątów nachylenia.
Rozdział 9. Kamery
419
Tabela 9.3. Właściwości klasy Camera3D
Nazwa
Rodzaj
Wartość
Opis
focus
Number
100
Określa odległość kamery od rzutni
fov
Number
0
Określa pole widzenia; wartość ta jest wyliczana z właściwości focus, zoom oraz pozycji
lens
AbstractLens
ZoomFocusLens
Określa rodzaj stosowanego obiektywu
zoom
Number
10
Określa skalę rzutni
aperture
Number
22
Odzwierciedla regulowanie rozmiaru przesłony stosowane do uzyskania efektu głębi ostrości
doflevels
Number
16
Określa poziomy zróżnicowania rozmycia stosowane do uzyskania efektu głębi ostrości
maxblur
Number
150
Określa maksymalny poziom rozmycia stosowany do uzyskania efektu głębi ostrości
Tabela 9.4. Metody klasy Camera3D
Nazwa
Opis
Camera3D(init:Object = null)
Konstruktor
addOnCameraUpdate(listener:Function):void
Metoda dodająca detektor zdarzenia CameraUpdate
removeOnCameraUpdate(listener:Function):void
Metoda usuwająca detektor zdarzenia CameraUpdate
pan(angle:Number):void
Metoda obracająca kamerę w płaszczyźnie poziomej
tilt(angle:Number):void
Metoda obracająca kamerę w płaszczyźnie pionowej
update():void
Metoda aktualizująca ustawienia rejestrowania sceny
enableDof():void
Metoda uruchamia efekt głębi ostrości
disableDof():void
Metoda wyłącza efekt głębi ostrości
Tabela 9.5. Stałe klasy Camera3D
Nazwa
Rodzaj
Wartość
Opis
toDEGREES
Number
57.29577951308232
Stała stosowana w przeliczeniach wartości na stopnie, stosująca wzór 180/Math.PI
toRADIANS
Number
0.017453292519943295
Stała stosowana w przeliczeniach na radiany, stosująca wzór Math.PI/180
420
Flash i ActionScript. Aplikacje 3D od podstaw
TargetCamera3D Klasa TargetCamera3D jest rozbudowaną wersją poprzednio poznanej klasy Camera3D, posiadającą dodatkowe metody oraz właściwości. Podstawowym celem jej stworzenia było ułatwienie programistom namierzania i śledzenia wybranego obiektu w przestrzeni. Wcześniej poznana metoda lookAt() nie rozwiązuje tego problemu do końca, ponieważ w jej parametrze należy podać konkretną pozycję określoną obiektem klasy Vector3D. Co za tym idzie — przy każdej zmianie położenia docelowego obiektu należy pobierać jego pozycję na nowo i przekazywać ją do metody lookAt(), tak aby kamera mogła śledzić wybrany cel. Znacznie wygodniej jest zastosować kamerę klasy TargetCamera3D, w której wystarczy parametrowi target przypisać konkretny obiekt, który mamy zamiar śledzić, bez konieczności ciągłego sprawdzania jego pozycji. Domyślnym punktem obserwacji dla tej kamery jest środek sceny, istotne jest również to, że w przypadku kamery TargetCamera3D wszystkie metody odpowiedzialne za zmianę pozycji i kąta nachylenia powodują ruch po orbicie wybranego celu, a nie wokół własnej osi. Implementacja kamery TargetCamera3D w najprostszej formie może wyglądać następująco: var camera2:TargetCamera3D = new TargetCamera3D(); camera2.target = ball; //jakiś obiekt klasy Object3D lub potomnej view.camera = camera2;
Dodając metodę przemieszczania obiektu w miejscu, gdzie odświeżany jest widok, można zaobserwować, jak kamera śledzi wybrany cel, nie zmieniając swojej pozycji. Aby wprawić w ruch samą kamerę i okrążać obiekt w wybranym przez nas kierunku, można zastosować detektory zdarzeń KeyboardEvent i po wciśnięciu odpowiedniego klawisza przesunąć kamerę metodami: moveLeft(), moveRight(), moveUp() czy też moveDown(). Z uwagi na swoją prostotę w stosowaniu klasy TargetCamera3D tabele 9.6 i 9.7 zawierają po jednej metodzie i parametrze. Pozostałe właściwości i metody dostępne w TargetCamera3D dziedziczone są po klasie Camera3D. Tabela 9.6. Właściwości klasy TargetCamera3D
Nazwa
Rodzaj
target
Object3D
Wartość
Opis Określa cel do śledzenia
Tabela 9.7. Metody klasy TargetCamera3D
Nazwa
Opis
TargetCamera3D(init:Object = null)
Konstruktor
Rozdział 9. Kamery
421
HoverCamera3D Kolejną dostępną w bibliotece Away3D kamerą jest HoverCamera3D. Ta pochodna klasy TargetCamera3D umożliwia swobodne obracanie kamery wokół wybranego obiektu bez konieczności stosowania dodatkowych funkcji trygonometrycznych. Wystarczy jedynie przydzielić jej cel i odległość, w jakiej ma się znajdować od wyznaczonego punktu. Tak samo jak przypadku klasy TargetCamera3D, do określenia celu obserwacji stosuje się właściwość target, z kolei dystans między kamerą a tym obiektem wyznacza wartość właściwości distance. Poruszanie wokół obiektu na płaszczyźnie poziomej odbywa się przez zmianę wartości właściwości panAngle, natomiast w przypadku płaszczyzny pionowej pozycję kontroluje się właściwością tiltAngle. Wartości obu właściwości można modyfikować jednocześnie w różnym stopniu, dzięki temu kamera może orbitować pod dowolnie ustalonym kątem względem wybranego celu. Istnieje możliwość ograniczenia kąta nachylenia na obu płaszczyznach przez podanie konkretnych wartości dla właściwości: maxPanAngle, minPanAngle, maxTiltAngle oraz minTiltAngle. Przejście między pozycjami jest animacją, której płynność określa właściwość steps. Zwiększenie jej wartości spowoduje dłuższe i bardziej precyzyjne przemieszczenie kamery. Jeżeli zostanie podana wartość 0 jako liczba kroków, to kamera zmieni swoje położenie natychmiast bez widocznych przejść, tak więc poza panAngle i tiltAngle również steps może posłużyć do kontroli prędkości animacji. Poza samym ustawieniem odpowiednich wartości wyżej wspomnianym parametrom należy jeszcze wykonać jedną czynność, aby kamera ruszyła się z miejsca. W metodzie, w której na obiekcie widoku wywoływana jest metoda render(), należy umieścić jeszcze obiekt kamery i wywołać na nim metodę hover(), której zadaniem jest zaktualizowanie położenia. W argumencie tej metody można podać wartość typu Boolean, która określa, czy pozycja ma być zmieniona natychmiast. Domyślna wartość tego argumentu równa jest false. Podstawowy szkielet implementacji kamery HoverCamera3D przedstawia następujący kod źródłowy (bardziej rozbudowany przykład zostanie omówiony w kolejnym podrozdziale): var camera3: HoverCamera3D = new HoverCamera3D(); camera3.panAngle = 0; camera3.tiltAngle = 45; camera3.distance = 800; camera3.target = ball; //jakiś obiekt klasy Object3D lub potomnej camera3.hover(true); view.camera = Camera3; … private function onEnterFrame(e:Event):void {
422
Flash i ActionScript. Aplikacje 3D od podstaw camera3.hover(); view.render(); }
W tabelach 9.8 i 9.9 wypisane zostały podstawowe właściwości i metody klasy HoverCamera3D. Tabela 9.8. Właściwości klasy HoverCamera3D
Nazwa
Rodzaj
Wartość
Opis
distance
Number
800
Odległość między kamerą a obserwowanym obiektem
maxPanAngle
Number
Infinity
Maksymalny kąt nachylenia dla właściwości PanAngle
maxTiltAngle
Number
90
minPanAngle
Number
-Infinity
Maksymalny kąt nachylenia dla właściwości TiltAngle
Minimalny kąt nachylenia dla właściwości PanAngle
minTiltAngle
Number
-90
panAngle
Number
0
Obrót na płaszczyźnie poziomej
steps
Number
8
Liczba kroków określająca płynność animacji
tiltAngle
Number
90
Obrót na płaszczyźnie poziomej
wrapPanAngle
Boolean
false
Określa, czy po przekroczeniu wartości poniżej 0 lub powyżej 360, kąt nachylenia ma być zresetowany, a animacja powtórzona
Minimalny kąt nachylenia dla właściwości TiltAngle
Tabela 9.9. Metody klasy HoverCamera3D
Nazwa
Opis
HoverCamera3D(init:Object = null)
Konstruktor
hover(jumpTo:Boolean = false):Boolean
Modyfikuje aktualne wartości właściwości przejścia kamery
SpringCam Klasa SpringCam została stworzona do konkretnego celu, jakim jest podążanie za wybranym obiektem w ustalonej od niego odległości. W zależności od dystansu, jaki zostanie nadany, kamera ta może być przydatnym narzędziem w grach typu TPP (Third Person Perspective — perspektywa trzeciej osoby) oraz FPP (First Person Perspective — perspektywa pierwszej osoby). Aby przekonać się, że jest możliwe stworzenie takich aplikacji w Away3D 3.6, spójrz na rysunki 9.11 oraz 9.12, na których przedstawiono zrzut z gry BattleCell oraz ministrony Coca-Coli.
Rozdział 9. Kamery
423
Rysunek 9.11.
Zrzut ekranu z gry BattleCell
Rysunek 9.12.
Zrzut ekranu z ministrony Coca-Coli
Aby móc zastosować kamerę SpringCam, należy ustalić jej pozycję oraz obiekt, który ma być śledzony. Do określenia położenia kamery względem obiektu stosuje się właściwość positionOffset, w której należy podać wartość w postaci obiektu klasy Vector3D. Podobnie jak w kamerach TargetCamera3D i HoverCamera3D, tutaj również do wyznaczenia celu stosuje się właściwość o nazwie target. W zasadzie ustalenie tych dwóch właściwości wystarczy do uzyskania efektu kamery z perspektywy pierwszej bądź trzeciej osoby, ale klasa SpringCam ma również kilka właściwości, które określają zachowanie tej kamery w konkretnych warunkach jej stosowania. Mam na myśli reakcję na zmianę położenia namierzanego obiektu, jego kątów
424
Flash i ActionScript. Aplikacje 3D od podstaw
nachylenia czy też czasu, w jakim występuje przemieszczenie. Dla lepszego zrozumienia działania podstawowych właściwości tej klasy w kolejnym podrozdziale przytoczymy przykład, dzięki któremu będzie można zaobserwować różnicę w działaniu kamery przy zastosowaniu poszczególnych kombinacji dla właściwości damping, stiffness oraz mass. Wszystkie przyjmują wartości liczbowe, z czego dla damping określa ona stopień, w jakim kamera tłumi efekt odbijania się od celu; im wyższa wartość, tym ruchy kamery są spokojniejsze. Parametr stiffness określa sztywność sprężyny, na której teoretycznie umieszczona jest kamera. Jeżeli chcemy, aby kamera trzymała się jak najbliżej wybranego obiektu, należy stosować wyższe wartości. Parametr mass określa wagę, która ma wpływ na czas reakcji kamery na zachowania zapisane w poprzednich parametrach. Im cięższa kamera, tym wolniejsze ruchy wykonuje. Podstawowa forma użycia tego rodzaju kamery może wyglądać następująco: var camera4: SpringCam = new SpringCam(); camera4.positionOffset = new Vector3D(0, 100, -300); camera4.target = ball; //jakiś obiekt klasy Object3D lub potomnej view.camera = camera4; … private function onEnterFrame(e:Event):void { camera4.view.render(); }
Aby wprawić kamerę w ruch, należy metodę render() wywołać z właściwości view dostępnej w klasie SpringCam.
W tabelach 9.10 i 9.11 wypisane zostały podstawowe właściwości i metody klasy SpringCam. Tabela 9.10. Właściwości klasy SpringCam
Nazwa
Rodzaj
Wartość
Opis
damping
Number
4
Stopień tłumienia efektu odbijania kamery
lookOffset
Vector3D
mass
Number
positionOffset
Vector3D
stiffness
Number
target
Object3D
Określa obiekt, za którym podąża kamera
view
View3D
Określa obiekt stosowanego widoku
zrot
Number
Określa kąt nachylenia przy zwróceniu się kamery przodem do namierzanego obiektu
Określa kierunek, w którym zwrócona jest kamera 40
Określa wagę kamery, która ma wpływ na szybkość i płynność wykonywanych ruchów Określa pozycję kamery względem wybranego obiektu
1
Określa sztywność sprężyny, na której teoretycznie umieszczona jest kamera
Rozdział 9. Kamery
425
Tabela 9.11. Metody klasy SpringCam
Nazwa
Opis
SpringCam(init:Object = null)
Konstruktor
Przykładowe zastosowania kamer Kamera z perspektywy pierwszej osoby Wspomnieliśmy wcześniej, że do tego typu sytuacji idealnie pasuje kamera rodzaju SpringCam, jednak w tym przypadku stworzymy zupełnie nową klasę, bazując na zwykłej Camera3D. Dlaczego tak? Otóż budując kamerę prawie od podstaw, możemy nadać jej specyficzne właściwości, których nie mają inne kamery dostępne w Away3D. Dodatkowo jest to dobre ćwiczenie na pracę z komponentami biblioteki i poszerzanie ich zastosowań. Przed rozpoczęciem pisania kodu takiej klasy w pierwszej kolejności należy wypisać założenia, jakie powinna ona spełniać: Praca w trybie wolnej kamery i przypisanej do konkretnego obiektu. Swobodne i skalowane obracanie kamery w dowolnych wymiarach okna aplikacji. Swobodne obracanie kamery dzięki wykrywaniu ruchu kursora lub wciśnięciu klawisza myszki i przeciąganiu kursora. Możliwość odwrócenia kierunku obrotu na obu osiach. Możliwość ustawienia granic obracania kamery, gdy ma ona imitować ruchy głowy postaci. Przypisanie podstawowych zdarzeń poruszania kamerą poprzez wciskanie następujących klawiszy: W, S, A, D, Shift oraz spacji. Sytuacje oraz sposoby spełnienia tych założeń zostaną omówione wraz z kodem źródłowym naszej klasy FPP, natomiast ogólny efekt, jaki chcemy uzyskać, przedstawiono na rysunku 9.13.
426
Flash i ActionScript. Aplikacje 3D od podstaw
Rysunek 9.13.
Przykład zastosowania naszej kamery FPP
Klasa FPP Poniższy listing zawiera cały kod źródłowy klasy FPP. Przepisz go, a następnie zajmiemy się omawianiem jego ważniejszych fragmentów. package { import import import import import import import import import
public class FPP extends Camera3D { private var _stage:Stage; private var _freeCamera:Boolean = true; private var _invertX:Boolean = false; private var _invertY:Boolean = false; private var _directionX:Number = 1; private var _directionY:Number = 1; private var _rotationSensitivity:Number = .5; private var _rotateOnDrag:Boolean = false; private var _height:Number;
public var pitchLimit:Number = 60; public var yawLimit:Number = Number.MAX_VALUE; private static const WALK_SPEED:Number = 10; private static const RUN_SPEED:Number = 40; public function FPP(stage:Stage,init:Object = null):void { super(init); _stage = stage; _freeCamera = ini.getBoolean("freeCamera", _freeCamera); _invertX = ini.getBoolean("invertX", _invertX); _invertY = ini.getBoolean("invertY", _invertY); _rotationSensitivity = ini.getNumber("rotationSensitivity", _rotationSensitivity); _rotateOnDrag = ini.getBoolean("rotateOnDrag", _rotateOnDrag); if (_rotateOnDrag) addMouseEventListeners(); if (_invertX) _directionX = -1; if (_invertY) _directionY = -1; addKeyboardEventListeners(); } public function updateCamera():void { _cameraDirectionPoint.x = Math.sin( rotationY * toRADIANS ) * (_shiftDown ? RUN_SPEED : WALK_SPEED); _cameraDirectionPoint.z = Math.cos( rotationY * toRADIANS ) * (_shiftDown ? RUN_SPEED : WALK_SPEED); _cameraDirectionPoint.y = y; if (_freeCamera) { if (_forwardDown) { x += _cameraDirectionPoint.x; z += _cameraDirectionPoint.z; } if (_backwardDown) { x -= _cameraDirectionPoint.x; z -= _cameraDirectionPoint.z; } if (_leftDown) {
427
428
Flash i ActionScript. Aplikacje 3D od podstaw x -= _cameraDirectionPoint.z; z += _cameraDirectionPoint.x; } if (_rightDown) { x += _cameraDirectionPoint.z; z -= _cameraDirectionPoint.x; } } if ((_rotateOnDrag && _moveCamera) || !_rotateOnDrag) { rotationY = (_stage.mouseX - _stage.stageWidth * .5) * _directionX * _rotationSensitivity; rotationX = (_stage.stageHeight * .5 - _stage.mouseY) * _directionY * _rotationSensitivity; if (rotationY > yawLimit) rotationY = yawLimit; else if (rotationY < -yawLimit) rotationY = -yawLimit; [MM8]
if (rotationX > pitchLimit) rotationX = pitchLimit; else if (rotationX < -pitchLimit) rotationX = -pitchLimit; [MM9]
} } public function get toRADS():Number { return toRADIANS; } public function get toDEGS():Number { return toDEGREES; } public function get cameraDirectionPoint():Vector3D { return _cameraDirectionPoint; } public function set freeCamera(val:Boolean):void { _freeCamera = val; } public function get freeCamera():Boolean { return _freeCamera; } public function set invertX(val:Boolean):void
Rozdział 9. Kamery { _invertX = val; _directionX = (val) ? -1 : 1; } public function get invertX():Boolean { return _invertX; } public function set invertY(val:Boolean):void { _invertY = val; _directionY = (val) ? -1 : 1; } public function get invertY():Boolean { return _invertY; } public function set rotateOnDrag(val:Boolean):void { _rotateOnDrag = val; if(val) addMouseEventListeners(); else removeMouseEventListeners(); } public function get rotateOnDrag():Boolean { return _rotateOnDrag; } private function addMouseEventListeners():void { _stage.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown); _stage.addEventListener(MouseEvent.MOUSE_UP, onMouseUp); } private function removeMouseEventListeners():void { _stage.removeEventListener(MouseEvent.MOUSE_DOWN, onMouseDown); _stage.removeEventListener(MouseEvent.MOUSE_UP, onMouseUp); } private function addKeyboardEventListeners():void { _stage.addEventListener(KeyboardEvent.KEY_DOWN, onKeyDown); _stage.addEventListener(KeyboardEvent.KEY_UP, onKeyUp); } private function removeKeyboardEventListeners():void
429
430
Flash i ActionScript. Aplikacje 3D od podstaw { _stage.removeEventListener(KeyboardEvent.KEY_DOWN, onKeyDown); _stage.removeEventListener(KeyboardEvent.KEY_UP, onKeyUp); } private function onKeyDown(e:KeyboardEvent):void { switch(e.keyCode) { case Keyboard.SHIFT: _shiftDown = true; break; case Keyboard.A: _leftDown = true; break; case Keyboard.D: _rightDown = true; break; case Keyboard.W: _forwardDown = true; break; case Keyboard.S: _backwardDown = true; break; case Keyboard.SPACE: break; } } private function onKeyUp(e:KeyboardEvent):void { switch(e.keyCode) { case Keyboard.SHIFT: _shiftDown = false; break; case Keyboard.A: _leftDown = false; break; case Keyboard.D: _rightDown = false; break; case Keyboard.W: _forwardDown = false; break; case Keyboard.S: _backwardDown = false; break; case Keyboard.SPACE: break; default: break;
Rozdział 9. Kamery
431
} } private function onMouseDown(e:MouseEvent):void { _moveCamera = true; } private function onMouseUp(e:MouseEvent):void { _moveCamera = false; } } }
Zwróć uwagę, że nie przypisaliśmy tej klasy do żadnego konkretnego pakietu. Jeżeli uznasz, że ta klasa będzie przydatna w innych projektach korzystających z Away3D w tej wersji, możesz dodać FPP do pakietu away3d.cameras, pamiętając o zmianie ścieżki w samym pliku klasy. Nasza klasa FPP do poprawnego funkcjonowania przede wszystkim potrzebowała klasy Camera3D, z której dziedziczy właściwości i metody. Dodatkowo załączyliśmy pakiet soczewek, ponieważ w tym przypadku można skorzystać z obiektywu PerspectiveLens i poprawić sposób wyświetlania elementów znajdujących się tuż przed kamerą. Podobnie jak w innych klasach pakietu Away3D, nasza kamera ma kilka właściwości, których wartości są niezbędne do określenia sposobu jej działania. Aby kontrolować poprawność podanych im wartości, zastosowaliśmy klasę Init. Poza tym potrzebowaliśmy również klas do obsługi zdarzeń, klawiatury oraz do wyznaczania pozycji w oknie aplikacji i samej przestrzeni trójwymiarowej. W samej klasie jeszcze przed konstruktorem zdefiniowaliśmy szereg zmiennych i stałych. Niektóre z nich są ogólnie dostępne, inne z kolei działają jedynie w ciele klasy FPP. W pierwszej kolejności określimy obiekt dla klasy Stage pod nazwą _stage, następna zmienna _freeCamera typu Boolean określa, czy obiekt tej klasy ma pracować w trybie wolnej kamery, co oznacza, że kamera nie jest związana z jakimkolwiek innym obiektem umieszczonym na scenie. W niektórych grach istnieje możliwość zmiany kierunku działania osi. Z myślą o tym do klasy FPP dodaliśmy zmienne: _invertX, _invertY, _directionX i _directionY. Dwie pierwsze przyjmują wartości typu Boolean, z kolei następne dwie posłużyły do odwrócenia wyników wyliczeń aktualnych kątów nachylenia. W różnych projektach może być inne zapotrzebowanie na czułość wykonywanych obrotów kamery. Przewidując taką możliwość, dodaliśmy zmienną _rotationSensitivity, której zadaniem jest ograniczenie wyliczonej pozycji kursora na powierzchni okna aplikacji. W wielu przykładach zastosowania FPP w bibliotece Away3D obracanie kamery następuje po wciśnięciu klawisza myszki bądź klawiatury i przeciągnięciu
432
Flash i ActionScript. Aplikacje 3D od podstaw
kursora w wybranym kierunku. W niektórych aplikacjach takie rozwiązanie może bardzo przeszkadzać, dlatego w naszej klasie zastosowaliśmy obsługę obu przypadków zarówno z użyciem wciśniętego przycisku, jak i bez niego. Do wyznaczenia tego trybu służy _rotateOnDrag, gdzie wartość false pozwala na swobodne podążanie za kursorem. Pozostałe prywatne stałe i zmienne służą do wyznaczania pozycji kamery w przestrzeni oraz samego wprawienia jej w ruch, a pitchLimit oraz yawLimit określają granice obrotu kamery. W konstruktorze klasy FPP przypisaliśmy poszczególnym zmiennym wartości pobrane z argumentów stage oraz init. W przypadku braku którejś z wartości w obiekcie init zastępujemy ją domyślną przypisaną konkretnemu parametrowi. W następnych linijkach sprawdziliśmy, czy kamera ma poruszać się w przeciwnych kierunkach do pozycji kursora oraz czy do wykonania obrotu będzie potrzebny wciśnięty przycisk myszy. Cały mechanizm poruszania i zmiany kątów nachylenia mieści się w metodzie co czyni ją najważniejszą metodą w naszej klasie. Wewnątrz jej bloku w pierwszej kolejności wyznaczane są nowe wartości właściwości x, y oraz z w obiekcie _cameraDirectionPoint. W przypadku pozycji na osiach X i Z skorzystaliśmy z metod Math.sin() oraz Math.cos(), które wyliczają nam kierunek[MM10] zależny od kąta nachylenia względem osi Y. Celem zastosowania tych wzorów jest przemieszczanie się do przodu względem obranego kierunku, a nie ogólnego układu osi sceny. updateCamera(),
Przeważnie w grach z kamerą FPP istnieje możliwość zmiany prędkości przemieszczania poprzez wciśnięcie klawisza, na przykład Shift, dlatego przy wyliczeniach dodatkowo zastosowaliśmy skróconą instrukcję warunkową, aby sprawdzić, czy faktycznie został wciśnięty klawisz. _cameraDirectionPoint.x = Math.sin( rotationY * toRADIANS ) * (_shiftDown ? RUN_SPEED : WALK_SPEED); _cameraDirectionPoint.z = Math.cos( rotationY * toRADIANS ) * (_shiftDown ? RUN_SPEED : WALK_SPEED); _cameraDirectionPoint.y = y;
Po wyliczeniu pozycji _cameraDirectionPoint zastosowaliśmy instrukcję warunkową, która sprawdza, czy według ustawień kamera jest w trybie wolnym. Jeżeli wartość zmiennej _freeCamera równa się true, to sprawdzane są kolejno warunki wciśnięcia klawiszy: W, S, A, D. W każdym z przypadków zmiany pozycji kamery posłużyliśmy się wcześniej wyliczonym obiektem _cameraDirectionPoint, a dokładniej jego właściwościami x i z. Wewnątrz pierwszych dwóch instrukcji zmiana ta polegała jedynie na zwiększeniu i zmniejszeniu wartości położenia kamery na osiach X i Z.
Rozdział 9. Kamery
433
if (_forwardDown) { x += _cameraDirectionPoint.x; z += _cameraDirectionPoint.z; } if (_backwardDown) { x -= _cameraDirectionPoint.x; z -= _cameraDirectionPoint.z; }
Z kolei w następnych, mając na uwadze obrót kamery, musieliśmy ustawić wartości naprzemiennie. if (_leftDown) { x -= _cameraDirectionPoint.z; z += _cameraDirectionPoint.x; } if (_rightDown) { x += _cameraDirectionPoint.z; z -= _cameraDirectionPoint.x; }
Podstawą do wyznaczenia kierunku zwrotu kamery na osiach X i Y jest położenie kursora w oknie aplikacji. Do wyliczenia wartości rotationX oraz rotationY zastosowaliśmy różnice aktualnej pozycji kursora i wymiarów okna aplikacji, uzyskując tym samym współrzędne odpowiadające standardowej osi dwuwymiarowej złożonej z czterech ćwiartek. Dodatkowo pomnożyliśmy te wyliczenia przez wartości właściwości _directionX, _directionY oraz _rotationSensitivity. Z wymienionych zmiennych pierwsze dwie w zależności od wybranej osi ustalają kierunek obrotu, który może być przeciwny, jeżeli wymaga tego logika aplikacji. Z kolei _rotationSensitivity redukuje wyliczoną wartość, aby kontrolować czułość obrotu kamery. rotationY = (_stage.mouseX - _stage.stageWidth * .5) * _directionX * _rotationSensitivity; rotationX = (_stage.stageHeight * .5 - _stage.mouseY) * _directionY * _rotationSensitivity;
Może się zdarzyć, że nasza kamera będzie musiała imitować ruch głowy, a jak wiadomo z anatomicznego punktu widzenia, nie można wykonać pełnego obrotu głową. Dlatego właśnie w takich sytuacjach należy zastosować wartości określające limit kąta nachylenia i z każdą klatką animacji sprawdzać, czy obrót mieści się w ustalonych granicach. Do tego celu służą następujące instrukcje warunkowe umieszczone na końcu metody updateCamera().
434
Flash i ActionScript. Aplikacje 3D od podstaw if (rotationY > yawLimit) rotationY = yawLimit; else if (rotationY < -yawLimit) rotationY = -yawLimit; else {/**/} if (rotationX > pitchLimit) rotationX = pitchLimit; else if (rotationX < -pitchLimit) rotationX = -pitchLimit; else {/**/}
Wewnątrz klasy FPP umieściliśmy również kilka metod typu get i set dla poszczególnych właściwości zdefiniowanych jako prywatne. Można było po prostu posłużyć się słowem kluczowym public zamiast private, lecz takie podejście nie zawsze jest dobre, szczególnie jeżeli przy okazji zmiany wartości jednej z właściwości trzeba wykonać dodatkowo inne operacje. Metody toRADS() oraz toDEGS() zwracają wartości właściwości toRADIANS oraz toDEGREES odziedziczone po klasie Camera3D. Niestety, nie są one dostępne bezpośrednio z klasy FPP, więc należało dopisać własne metody. Obie te właściwości są bardzo przydatne przy wyliczeniach w funkcjach trygonometrycznych. Metody zmieniające wartości właściwości invertX oraz invertY w rzeczywistości są tylko pomocniczymi dla programisty korzystającego z klasy FPP. Posłużyliśmy się tymi nazwami w zasadzie tylko dlatego, że są one prostsze do zrozumienia i nie wymagają pamiętania o tym, że _directionX lub _directionY o wartości –1 odwraca kierunek obrotu kamery. Podobną zasadę obraliśmy przy ustawianiu wartości dla właściwości rotateOnDrag. Poza samą jej zmianą dodaliśmy warunek, który dodaje bądź usuwa detektory zdarzeń MouseEvent w zależności od tego, czy kamera ma być obracana dopiero po wciśnięciu lewego przycisku myszki. W metodach onKeyDown() oraz onKeyUp() zapisaliśmy instrukcje warunkowe switch, wewnątrz których sprawdzany jest kod aktualnie wciskanego klawisza. Jeżeli odpowiada on jednemu z przypadków uwzględnionych w instrukcji, przypisywana jest wartość true bądź false konkretnej zmiennej. Oddzielenie sprawdzania stanu poszczególnych klawiszy od wykonywania animacji pozwala na płynne współdziałanie kilku zdarzeń w tym samym czasie. Na końcu naszej klasy dodaliśmy dwie metody onMouseDown() oraz onMouseUp(), których zadaniem jest przypisanie wartości true bądź false parametrowi _moveCamera. Zastosowanie ich jest konieczne, gdy wartość właściwości _rotateOnDrag równa jest true i trzeba wykryć moment, w którym przycisk myszy jest wciśnięty lub puszczony.
Rozdział 9. Kamery
435
Podstawowa implementacja kamery FPP Aby używać kamery w trybie wolnym, czyli bez śledzenia konkretnego obiektu, wystarczy wykonać trzy kroki. Po pierwsze, w kodzie aplikacji trzeba stworzyć obiekt klasy FPP, który będzie ogólnie dostępny, następnie przypisać kamerę do widoku, a wewnątrz metody odświeżającej wyświetlaną scenę trzeba umieścić odwołanie do metody updateCamera(). Przykładowa implementacja może wyglądać tak: private var camera:FPP; ... private function initCamera():void { camera = new FPP(stage); view.camera = camera; } ... private function onEnterFrame(e:Event):void { camera.updateCamera(); view.render(); }
Klasa Player Obiekt klasy Player to w rzeczywistości kontener bazujący na klasie ObjectCon tainer3D, wewnątrz którego umieścimy model broni oraz dodamy naszą kamerę FPP. Z chwilą gdy kamera zostanie przywiązana do obiektu player, będziemy musieli w jej ustawieniach zaznaczyć właściwość freeCamera jako false, ponieważ od tej pory zmieniać pozycję będziemy całemu obiektowi, a nie samej kamerze, ale o tym wspomnę przy implementacji. Na razie przepisz następujący kod źródłowy: package { import import import import import import import import import import import
public class Player extends ObjectContainer3D { private var _height:Number;
436
Flash i ActionScript. Aplikacje 3D od podstaw private var _stage:Stage; private var _fpp:FPP; private var _cameraTargetPoint:Vector3D = new Vector3D(); private var modelsContainerDistance:Number = 0; private var modelLoader:Loader3D; private var modelsContainer:ObjectContainer3D = new ObjectContainer3D(); private private private private private
private static const WALK_SPEED:Number = 10; private static const RUN_SPEED:Number = 40; public function Player(stage:Stage, camera:FPP, init:Object = null):void { _stage = stage; _fpp = camera; _fpp.lens = new PerspectiveLens(); _fpp.fov = 55; _height = ini.getNumber("height", 160, { min:100 } ); _fpp.y = _height; addChild(_fpp); /* * Model */ modelLoader = Collada.load('../../resources/models/dae/ fpp/fpp_shotgun.DAE'); modelLoader.addOnSuccess(modelLoaded); addChild(modelsContainer); /* * */ initListeners(); } private function modelLoaded(e:Event):void { modelLoader.handle.name = "gun"; modelsContainer.addChild(modelLoader.handle); modelsContainer.getChildByName("gun").y = _height - 25; } public function update():void { if (_fpp != null && !_fpp.freeCamera) { _fpp.updateCamera(); if (modelsContainer.getChildByName("gun"))
Rozdział 9. Kamery
437
{ _cameraTargetPoint.x = modelsContainerDistance * Math.sin (_fpp.rotationY * _fpp.toRADS) * Math.cos(_fpp.rotationX * _fpp.toRADS) + _fpp.x; _cameraTargetPoint.z = modelsContainerDistance * Math.cos ( _fpp.rotationY * _fpp.toRADS) * Math.cos(_fpp.rotationX * _fpp.toRADS) + _fpp.z; _cameraTargetPoint.y = modelsContainerDistance * Math.sin(_fpp.rotationX * _fpp.toRADS) + _fpp.y; modelsContainer.getChildByName("gun").position = _cameraTargetPoint; modelsContainer.getChildByName("gun").rotationY = _fpp.rotationY; modelsContainer.getChildByName("gun").rotationX = _fpp.rotationX; } if (_forwardDown) { x += _fpp.cameraDirectionPoint.x; z += _fpp.cameraDirectionPoint.z; } if (_backwardDown) { x -= _fpp.cameraDirectionPoint.x; z -= _fpp.cameraDirectionPoint.z; } if (_leftDown) { x -= _fpp.cameraDirectionPoint.z; z += _fpp.cameraDirectionPoint.x; } if (_rightDown) { x += _fpp.cameraDirectionPoint.z; z -= _fpp.cameraDirectionPoint.x; } } } public function get height():Number { return _height; } public function get fpp():FPP { return _fpp; } private function initListeners():void
438
Flash i ActionScript. Aplikacje 3D od podstaw { _stage.addEventListener(KeyboardEvent.KEY_DOWN, onKeyDown); _stage.addEventListener(KeyboardEvent.KEY_UP, onKeyUp); } private function onKeyDown(e:KeyboardEvent):void { switch(e.keyCode) { case Keyboard.SHIFT: _shiftDown = true; break; case Keyboard.A: _leftDown = true; break; case Keyboard.D: _rightDown = true; break; case Keyboard.W: _forwardDown = true; break; case Keyboard.S: _backwardDown = true; break; case Keyboard.SPACE: break; default: break; } } private function onKeyUp(e:KeyboardEvent):void { switch(e.keyCode) { case Keyboard.SHIFT: _shiftDown = false; break; case Keyboard.A: _leftDown = false; break; case Keyboard.D: _rightDown = false; break; case Keyboard.W: _forwardDown = false; break; case Keyboard.S: _backwardDown = false; break; case Keyboard.SPACE: break;
Rozdział 9. Kamery
439
default: break; } } } }
W niektórych fragmentach kodu widać podobieństwo do klasy FPP. Tutaj również skorzystaliśmy z klas potrzebnych do obsługi standardowych zdarzeń klawiatury i myszki, wyznaczenia pozycji kursora czy też określenia wartości poszczególnych właściwości. Poza tym chcąc umieścić model formatu DAE wewnątrz kontenera, musieliśmy zaimportować klasy Loader3D oraz Collada z pakietu away3d.loaders. Zupełnie opcjonalnie dodaliśmy również wszystkie klasy z pakietu away3d.cameras. lenses, dzięki czemu będziemy mieli możliwość zmiany sposobu rejestrowania obiektów. Wewnątrz klasy Player standardowo zaczęliśmy od zdefiniowania potrzebnych zmiennych oraz obiektów. W pierwszej kolejności dodaliśmy zmienną _height, która określa pozycję y obiektu naszej klasy FPP o nazwie _fpp. Do ładowania modeli zdefiniowaliśmy obiekt modelLoader, z kolei do jego osadzenia użyliśmy następnego kontenera ObjectContainer3D o nazwie modelsContainer. Zrobiliśmy tak, ponieważ można przyjąć, że cały obiekt klasy Player będzie miał w swoich zasobach więcej niż jeden model broni, a wtedy warto trzymać ją w jednym miejscu. Dodaliśmy również jedną pomocniczą zmienną modelsContainer Distance, która określa odległość kontenera z modelami od kamery. Wartość tej zmiennej można w trakcie używania obiektu regulować, tak aby dystans był odpowiedni w zależności od budowy wybranego modelu. Pozostałe zmienne oraz stałe znamy już z klasy FPP i w przypadku klasy Player mają one takie same role. W konstruktorze klasy Player w pierwszej kolejności nadaliśmy odpowiednie wartości poszczególnym zmiennym i obiektom. W przypadku kamery dodatkowo wybraliśmy nowy rodzaj soczewki rodzaju PerspectiveLens oraz nową wartość dla właściwości fov. Ten krok jest opcjonalny i można śmiało testować zachowanie kamery z innymi ustawieniami. _fpp = camera; _fpp.lens = new PerspectiveLens(); _fpp.fov = 55; _height = ini.getNumber("height", 160, { min:100 } ); _fpp.y = _height; addChild(_fpp);
440
Flash i ActionScript. Aplikacje 3D od podstaw
Warto zwrócić w tym miejscu uwagę na różnicę w wyświetlaniu obiektów przy różnych rozdzielczościach aplikacji. Najlepiej byłoby dopisać specjalną metodę, która regulowałaby pole widzenia kamery w zależności od wymiarów okna, jeżeli zastosowano zapis stage.scaleMode = StageScaleMode.NO_SCALE;.
Po ustawieniu wszystkich właściwości kamery i dodaniu jej do kontenera stworzyliśmy obiekt modelLoader i pobraliśmy poprzez klasę Collada odpowiedni model w formacie DAE. Aby zachować porządek, dodaliśmy również metodę modelLoaded(), która uruchomiona zostanie z chwilą pobrania modelu. modelLoader = Collada.load('../../resources/models/dae/ fpp/fpp_shotgun.DAE'); modelLoader.addOnSuccess(modelLoaded); addChild(modelsContainer);
Na końcu konstruktora wywołaliśmy metodę initListeners(), wewnątrz której zapisaliśmy dodawanie rejestratorów zdarzeń wciśnięcia i zwolnienia klawiszy klawiatury. W metodzie modelLoaded() pobraną zawartość modelLoader nazwaliśmy gun i dodaliśmy do kontenera modelsContainer. Dodatkowo uregulowaliśmy pozycję na osi Y wgranego modelu. modelLoader.handle.name = "gun"; modelsContainer.addChild(modelLoader.handle); modelsContainer.getChildByName("gun").y = _height - 25;
Najważniejsze operacje związane ze zmianą pozycji i kąta nachylenia zapisaliśmy w metodzie update(). W pierwszej kolejności dodaliśmy instrukcję warunkową, aby sprawdzić, czy kamera istnieje i nie jest czasem w trybie wolnym. Jeżeli oba warunki są spełnione, to można wykonywać pozostałe operacje. Na samym początku wywołaliśmy metodę updateCamera() na obiekcie _fpp, ponieważ jego aktualne wartości są niezbędne do poprawnych obliczeń pozycji całego obiektu klasy Player. Później sprawdziliśmy, czy istnieje model o nazwie gun. Jeżeli tak, to można wyliczać pozycję obiektu _cameraTargetPoint. Zastosowane wzory za pomocą metod Math.sin() oraz Math.cos() i kątów nachylenia kamery na osiach X i Y wyliczają nową pozycję w przestrzeni. Zmienna modelsContainer Distance wyznacza odległość kontenera z modelami od kamery. _cameraTargetPoint.x = modelsContainerDistance * Math.sin(_fpp.rotationY * _fpp.toRADS) * Math.cos(_fpp.rotationX * _fpp.toRADS) + _fpp.x; _cameraTargetPoint.z = modelsContainerDistance * Math.cos( _fpp.rotationY * _fpp.toRADS) * Math.cos(_fpp.rotationX * _fpp.toRADS) + _fpp.z; _cameraTargetPoint.y = modelsContainerDistance * Math.sin(_fpp.rotationX * _fpp.toRADS) + _fpp.y;
Rozdział 9. Kamery
441
Po wyliczeniu pozycji należało ją przypisać do właściwości position wybranego modelu. Dodatkowo obróciliśmy model tak samo jak kamerę. modelsContainer.getChildByName("gun").position = _cameraTargetPoint; modelsContainer.getChildByName("gun").rotationY = _fpp.rotationY; modelsContainer.getChildByName("gun").rotationX = _fpp.rotationX;
W dalszej części metody update() zapisaliśmy kolejne instrukcje warunkowe sprawdzające, czy któryś z klawiszy W, S, A, D został wciśnięty. W przypadku wystąpienia któregoś ze zdarzeń wykonywany jest odpowiedni kod przemieszczania obiektu klasy Player. Schemat ten został już wcześniej przedstawiony w metodzie updateCamera() w klasie FPP. I to w zasadzie cała mechanika działania tej klasy. Pozostałe metody, takie jak reakcje na zdarzenia typu KeyboardEvent czy też metody udostępniania wartości właściwości, omówiliśmy w poprzednim przykładzie.
Implementacja kamery FPP wraz z klasą Player Teraz stworzymy prosty przykład zastosowania klas FPP i Player razem w jednej aplikacji. Efekt, który uzyskamy po skompilowaniu kodu, został przedstawiony wcześniej na rysunku 9.13. Przepisz poniższy kod, ustawiając odpowiednie zasoby potrzebne do jego poprawnego funkcjonowania. package { import import import import import import import import import import import import import
public class fppExample extends Sprite { private var view:View3D; private var pln:Plane; private var camera:FPP; private var player:Player; private var enemyAnim:AnimationData; private var modelLoader:Loader3D;
442
Flash i ActionScript. Aplikacje 3D od podstaw public function fppExample() { stage.quality = StageQuality.LOW; stage.align = StageAlign.TOP_LEFT; stage.scaleMode = StageScaleMode.NO_SCALE; addEventListener(Event.ENTER_FRAME, onEnterFrame); stage.addEventListener(Event.RESIZE, onResize); // view = new View3D(); addChild(view); pln = new Plane(); pln.material = new BitmapFileMaterial('../../resources/bitmaps/ skybox/down.jpg'); pln.y = -100; pln.segmentsH = pln.segmentsW = 10; pln.height = 1000; pln.width = 1000; view.scene.addChild(pln); /* * FPP i Player */ camera = new FPP(stage, { freeCamera:false,height:120 } ); player = new Player(stage, camera); view.camera = camera; view.scene.addChild(player); /* * Enemy */ modelLoader = Md2.load('../../resources/models/md2/ hueteotl/TRIS.MD2'); modelLoader.addOnSuccess(addEnemy); onResize(); } private function addEnemy(e:Loader3DEvent = null):void { var mat:BitmapFileMaterial = new BitmapFileMaterial ('../../resources/models/md2/hueteotl/hueteotl.jpg'); var enemy:Mesh = modelLoader.handle as Mesh; enemy.scale(.08); enemy.material = mat; view.scene.addChild(enemy); enemyAnim = enemy.animationLibrary.getAnimation('stand'); enemyAnim.animator.play(); } private function onEnterFrame(e:Event):void { player.update(); view.render(); }
Zastosowanie klas FPP i Player w tym przykładzie zaczęliśmy od zdefiniowania dwóch obiektów: camera oraz player. Następnym krokiem było stworzenie tych obiektów w konstruktorze. Jako argumenty dla obiektu camera podaliśmy stage oraz ustawiliśmy właściwość freeCamera jako false, ponieważ nie chcieliśmy, aby kamera zmieniała swoją pozycję niezależnie od obiektu player. Dodatkowo ustawiliśmy jej wysokość na 120, tak aby widok z kamery odpowiadał wysokości wgranego modelu w obiekcie modelLoader. Po wykonaniu wszystkich ustawień przypisaliśmy obiekt camera jako podstawową kamerę widoku, tak samo jak w poprzednim przykładzie jej implementacji. camera = new FPP(stage, { freeCamera:false,height:120 } ); view.camera = camera;
W przypadku obiektu player w argumentach konstruktora podaliśmy stage oraz wcześniej utworzony obiekt kamery, po czym dodaliśmy go do sceny. player = new Player(stage, camera); view.scene.addChild(player);
W poprzedniej implementacji poza utworzeniem kamery musieliśmy odwołać się do metody updateCamera() w metodzie odświeżającej widok aplikacji. Ponieważ we wnętrzu klasy Player wywołaliśmy już tę metodę samą kamerą, nie musimy się tym przejmować. W tym przypadku musieliśmy odwołać się do metody update() na obiekcie player, aby aktualizować jego stan. private function onEnterFrame(e:Event):void { player.update(); view.render(); }
Kamera z perspektywy osoby trzeciej Pojęcie kamery z perspektywy osoby trzeciej bardziej kojarzy się z aplikacjami, w których osadzona jest ona za plecami sterowanej postaci, jednak korzysta się z niej również w symulatorach jazdy, lotu lub jakichkolwiek innych. W tym podrozdziale naszym celem będzie napisanie tego typu symulatora z zastosowaniem kamery SpringCam i sprawdzenie jej zachowania przy zmianie położenia wybranego obiektu.
444
Flash i ActionScript. Aplikacje 3D od podstaw
Efekt, jaki chcemy uzyskać, przedstawiono na rysunku 9.14. Rysunek 9.14.
Przykład zastosowania kamery SpringCam
Klasa Car W pierwszej kolejności zajmiemy się klasą reprezentującą nasz pojazd oraz jego zachowania. Przepisz poniższy kod źródłowy, a później omówimy ważniejsze jego fragmenty. package { import import import import import import import import
public class Car extends ObjectContainer3D { private var _stage:Stage; private var _modelLoader:Loader3D; private var _model:Mesh; private var _maxSpeed:Number = 0; private var _topSteer:Number = 0; private var _speed:Number = 0;
Rozdział 9. Kamery
445
private var _steer:Number = 0; private var _scale:Number = 10; private private private private
public static var MAX_SPEED:Number = 24; public static var MIN_SPEED:Number = -12; public function Car(stage:Stage) { _stage = stage; _modelLoader = Obj.load('../../resources/models/mObj/car/ car_riviera.obj', { autoLoadTextures:false } ); _modelLoader.addOnSuccess(modelLoaded); _stage.addEventListener(KeyboardEvent.KEY_DOWN, onKeyDown); _stage.addEventListener(KeyboardEvent.KEY_UP, onKeyUp); } private function modelLoaded(e:Event):void { _model = _modelLoader.handle as Mesh; _model.y = -10; _model.movePivot(0, 0, 10); _model.material = new BitmapFileMaterial('../../resources/models/ mObj/car/car_riviera.jpg'); _model.scale(10); _scale = _model.scaleZ; addChild(_model); } public function update():void { if (_forwardDown) _maxSpeed = MAX_SPEED; else if (_backwardDown) _maxSpeed = MIN_SPEED; else _maxSpeed = 0; _speed -= (_speed - _maxSpeed) * 0.1; // if( _rightDown ) { if( _topSteer < 30 ) { _topSteer += 5; } } else if( _leftDown ) { if( _topSteer > -30 ) { _topSteer -= 5;
446
Flash i ActionScript. Aplikacje 3D od podstaw } } else _topSteer -= _topSteer * .04; _steer -= ( _steer - _topSteer ) * .5; // yaw((_scale * .1 * _speed * _steer) / 360); moveForward(_scale * .1 * _speed); } private function onKeyDown(e:KeyboardEvent):void { switch(e.keyCode) { case Keyboard.LEFT: _leftDown = true; break; case Keyboard.RIGHT: _rightDown = true; break; case Keyboard.UP: _forwardDown = true; break; case Keyboard.DOWN: _backwardDown = true; break; case Keyboard.SPACE: break; default: break; } } private function onKeyUp(e:KeyboardEvent):void { switch(e.keyCode) { case Keyboard.LEFT: _leftDown = false; break; case Keyboard.RIGHT: _rightDown = false; break; case Keyboard.UP: _forwardDown = false; break; case Keyboard.DOWN: _backwardDown = false; break; case Keyboard.SPACE: break; default: break;
Rozdział 9. Kamery
447
} } } }
Napisana w poprzednim przykładzie klasa Player w swoich założeniach przypomina klasę Car. Z tego powodu tutaj skorzystaliśmy z jej niektórych zaimportowanych komponentów, zastosowaliśmy podobne zmienne, obiekty pomocnicze oraz metody. Z dodatkowych klas użyliśmy Mesh, Loader3D oraz Obj potrzebnych do pobrania modelu w formacie obj. Do nałożenia tekstury zastosowaliśmy klasę BitmapFileMaterial, a do obsługi zdarzeń i sterowania obiektem klas Event, Keyboard Event i Keyboard. W następnej kolejności zdefiniowaliśmy kilka zmiennych potrzebnych do wyliczenia nowej pozycji pojazdu. I tak _speed określa prędkość, z jaką porusza się obiekt, a _maxSpeed wyznacza jej granice, z kolei _steer oraz _topSteer mają podobne zastosowania, tylko że w tym przypadku dotyczą ustalenia kąta, z jakim pojazd skręca. Dodatkowo dopisaliśmy dwie pomocnicze zmienne statyczne: MAX_SPEED i MIN_SPEED, wyznaczające granice prędkości. Ich wartości zostały przypisane zmiennej _maxSpeed w konkretnych warunkach, o których za chwilę powiemy. Pozostałe zadeklarowane zmienne i obiekty są nam już znane z poprzednich przykładów i posłużyły do obsługi klawiatury oraz pobranego modelu. W ciele konstruktora przypisaliśmy podany w argumencie obiekt Stage, zainicjowaliśmy proces pobierania wybranego modelu oraz dodaliśmy detektory zdarzeń KeyboardEvent.KEY_DOWN i KeyboardEvent.KEY_UP. Podobnie jak miało to miejsce w klasie Player, tak i tutaj konfiguracja oraz samo dodanie modelu i tekstury odbywa się w metodzie wywoływanej po zakończeniu jego pobierania. W metodzie modelLoaded() odpowiednio ustawiliśmy pozycję pobranego obiektu, zmieniliśmy położenie punktu centralnego i zmniejszyliśmy jego rozmiary, tak aby pasował on do naszej sceny. Poza tym przypisaliśmy zmiennej _scale wartość skali modelu względem osi Z. Zmienna ta jako składowa wyliczeń pozycji musi określać aktualny rozmiar pojazdu. _model.y = -10; _model.movePivot(0, 0, 10); _model.scale(10); _scale = _model.scaleZ;
Wszystkie operacje związane ze zmianą położenia obiektu klasy Car wykonywane są w metodzie update(), która wywoływana jest w głównej klasie przy każdym wystąpieniu zdarzenia Event.ENTER_FRAME. Sama zmiana pozycji obiektu klasy Car polega na zastosowaniu yaw() oraz moveForward(), ale aby ustalić wartości podane jako argumenty tych metod, musieliśmy wykonać kilka wyliczeń i użyć instrukcji warunkowych.
448
Flash i ActionScript. Aplikacje 3D od podstaw
W pierwszej kolejności sprawdziliśmy, czy został wciśnięty klawisz górnej lub dolnej strzałki. W zależności od sytuacji zmiennej _maxSpeed przypisana została nowa wartość: MAX_SPEED, MIN_SPEED lub 0, gdy nie wciśnięto żadnego. if (_forwardDown) _maxSpeed = MAX_SPEED; else if (_backwardDown) _maxSpeed = MIN_SPEED; else _maxSpeed = 0;
Zmienna _maxSpeed wyznacza granicę prędkości, a _speed poprzednio zapisaną jej wartość. Obie te zmienne były nam potrzebne do ustalenia aktualnej prędkości wyliczanej z wzoru: _speed -= (_speed - _maxSpeed) * 0.1;
W kolejnych instrukcjach warunkowych sprawdziliśmy, czy wciśnięto klawisze lewej lub prawej strzałki. W obu przypadkach zastosowaliśmy również instrukcje warunkowe if() w celu sprawdzenia, czy wartość zmiennej _topSteer nie przekracza ustalonych granic. W przypadku wciśnięcia klawisza prawej strzałki wartość zmiennej _topSteer zwiększana jest o liczbę 5, jeżeli nie przekroczyła ona wartości równej liczbie 30. if( _rightDown ) { if( _topSteer < 30 ) { _topSteer += 5; } }
Z kolei wciskając klawisz lewej strzałki, zmniejszamy o liczbę 5 wartość zmiennej _topSteer, jeżeli nie jest ona mniejsza od liczby -30. else if( _leftDown ) { if( _topSteer > -30 ) { _topSteer -= 5; } }
W przypadku gdy nie zachodzi żaden z wcześniej wymienionych warunków, wartość zmiennej _topSteer jest stopniowo zmniejszana do momentu, gdy będzie równa 0. Taki zabieg ma na celu symulowanie płynnego wyrównania kierunku jazdy. else _topSteer -= _topSteer
* .04;
Aktualna wartość skrętu uzyskiwana jest ze wzoru podobnego do wyliczania prędkości: _steer -= ( _steer - _topSteer ) * .5;
Rozdział 9. Kamery
449
Po ustaleniu wartości właściwości _speed oraz _steer można było je zastosować w yaw() oraz moveForward(). W obu metodach wzięliśmy pod uwagę dodatkowe czynniki, na przykład poziom skrętu zależy również od aktualnej prędkości i skali modelu. yaw((_scale * .1 * _speed * _steer) / 360); moveForward(_scale * .1 * _speed);
Implementacja kamery SpringCam i klasy Car Mając już klasę potrzebną do wyświetlania i sterowania pojazdem, musimy stworzyć odpowiednie środowisko do przetestowania kamery i jej reakcji. Zastosowane wartości w parametrach trzymają kamerę w ryzach, tak aby efekt sprężyny i odchylenia nie był zbyt duży. Oczywiście nic nie stoi na przeszkodzie, aby je zmodyfikować i sprawdzić, jak obiekt klasy SpringCam zachowuje się w różnych warunkach. Przepisz następujący kod źródłowy, przygotuj wszystkie potrzebne zasoby i zobacz, jak kamera podąża za wybranym obiektem. package { import import import import import import // import import import import
public class tppExample extends Sprite { private var view:View3D; private var camera:SpringCam; private var ground:Plane; private var car:Car; public function tppExample() { stage.quality = StageQuality.LOW; stage.align = StageAlign.TOP_LEFT; stage.scaleMode = StageScaleMode.NO_SCALE; addEventListener(Event.ENTER_FRAME, onEnterFrame); stage.addEventListener(Event.RESIZE, onResize); // view = new View3D(); addChild(view);
450
Flash i ActionScript. Aplikacje 3D od podstaw ground = new Plane(); ground.y = -50; ground.pushback = true; ground.material = new BitmapFileMaterial('../../resources/ bitmaps/skybox/down.jpg'); ground.segmentsH = ground.segmentsW = 10; ground.height = 1000; ground.width = 1000; view.scene.addChild(ground); /* */ initPlayer(); initCamera(); onResize(); } private function initPlayer():void { car = new Car(stage); car.pushfront = true; view.scene.addChild(car); } private function initCamera():void { camera = new SpringCam(); camera.stiffness = 6; camera.damping = 10; camera.mass = 10; camera.positionOffset = new Vector3D(0, 50, -200); camera.target = car; view.camera = camera; } private function onEnterFrame(e:Event):void { car.update(); camera.view.render(); } private function onResize(e:Event = null):void { view.x = stage.stageWidth * .5; view.y = stage.stageHeight * .5; } } }
W tym przykładzie niezbędnymi składnikami klasy bazowej poza widokiem View3D i standardowymi klasami stołu montażowego były oczywiście klasa Car oraz kamera SpringCam. Dodatkowo w celach praktycznych i estetycznych umieściliśmy
Rozdział 9. Kamery
451
proste otoczenie w postaci planszy klasy Plane, na którą z kolei nałożyliśmy teksturę pobraną poprzez klasę BitmapFileMaterial. W przypadku konstruktora klasy tppExample istotne dla nas jest to, że dodaliśmy powierzchnię o nazwie ground, dzięki której będziemy mogli zaobserwować zmiany położenia naszego pojazdu. W kolejnych linijkach konstruktora wykonaliśmy odwołania do trzech metod: initPlayer(), initCamera() oraz onResize(), których kod tworzy pojazd, kamerę i ustawia pozycję widoku w oknie aplikacji. Wewnątrz metody initPlayer() stworzyliśmy obiekt pojazdu i dodaliśmy go do sceny aplikacji. Dodatkowo przypisaliśmy jego parametrowi pushfront wartość true, dzięki czemu unikniemy wzajemnego przenikania wielokątów podłoża i modelu przy wyświetlaniu sceny. car = new Car(stage); car.pushfront = true; view.scene.addChild(car);
W metodzie initCamera() dodaliśmy obiekt klasy SpringCam oraz ustawiliśmy dla jej parametrów: stiffness, damping, mass oraz positionOffset takie wartości, aby nasza kamera trzymała się w miarę sztywno i blisko wyznaczonego obiektu car. Poza tym standardowo przy zmianie rodzaju kamery musieliśmy ją przypisać widokowi. camera = new SpringCam(); camera.stiffness = 6; camera.damping = 10; camera.mass = 10; camera.positionOffset = new Vector3D(0, 50, -200); camera.target = car; view.camera = camera;
W metodzie onEnterFrame() wywołaliśmy metodę render() poprzez właściwość view na obiekcie camera, poza tym zapisaliśmy również aktualizację pozycji pojazdu. car.update(); camera.view.render();
Kamera stosowana w grach typu action RPG A gdyby tak zrobić grę w stylu action RPG z użyciem biblioteki Away3D? Takie zadanie zdecydowanie wymagałoby dużo pracy, ale nie jest niemożliwe do wykonania. W tym podrozdziale zrobimy jeden mały krok, tworząc i ustawiając kamerę typu HoverCamera3D tak, aby śledziła obiekt i umożliwiała pełny obrót wokół niego. Do realizacji tego zadania stworzymy dwie klasy: podstawową aplikacji rpgExample oraz Skeleton, której obiekt będzie celem naszej kamery. W grach typu
452
Flash i ActionScript. Aplikacje 3D od podstaw
action RPG gracz, klikając w wybrane miejsce w otaczającym go środowisku, może wywołać reakcje postaci, takie jak przemieszczenie, podniesienie przedmiotu, rozmowę lub atak. W naszym przykładzie zajmiemy się pierwszą możliwością, czyli zmianą położenia postaci. Po kliknięciu w wybrany punkt na płaszczyźnie obiekt klasy Skeleton obróci się w tym kierunku i zacznie przemieszczać. Dla zwiększenia realizmu przy każdej zmianie pozycji dodamy standardowo dostępną w modelach MD2 animację biegu. Na rysunku 9.15 przedstawiono wygląd aplikacji po skompilowaniu kodu. Rysunek 9.15.
Zrzut ekranu z przykładu rpgExample
Klasa Skeleton W pierwszej kolejności zajmijmy się klasą Skeleton. Podobnie jak w poprzednich przykładach, jest ona kontenerem dla pobieranego modelu oraz zawiera w sobie potrzebne mechanizmy do przemieszczania obiektu w konkretnym kierunku. Przepisz poniższy kod źródłowy, a następnie omówimy jego istotne fragmenty. package { import import import import import import
Rozdział 9. Kamery import flash.geom.Point; import flash.geom.Vector3D; import flash.events.Event; public class Skeleton extends ObjectContainer3D { private var modelLoader:Loader3D; private var animationData:AnimationData; private var _destination:Point; private var _speed:Number = 20; private var _bounds:Number = 10; private var model:Mesh; public var isMoving:Boolean = false; public function Skeleton():void { modelLoader = Md2.load('../../resources/models/ md2/hueteotl/TRIS.MD2'); modelLoader.addOnSuccess(modelLoaded); } private function modelLoaded(e:Event):void { var mat:BitmapFileMaterial = new BitmapFileMaterial('../../ resources/models/md2/hueteotl/hueteotl.jpg'); model = modelLoader.handle as Mesh; model.material = mat; model.rotationY = 90; model.y = 60; model.scale(.025); animationData = model.animationLibrary.getAnimation('stand'); animationData.animator.play(); addChild(model); } public function set destination(val:Point):void { _destination = val; lookAt(new Vector3D(_destination.x, y,_destination.y)); if (!isMoving) { isMoving = true; animationData = model.animationLibrary.getAnimation('run'); animationData.animator.play(); } } public function update():void { if (isMoving) { var xdiff = _destination.x - x;
453
454
Flash i ActionScript. Aplikacje 3D od podstaw var zdiff = _destination.y - z; var diff = Math.sqrt(Math.pow(xdiff, 2) + Math.pow(zdiff, 2)); var fraction = _speed/diff; x += fraction * xdiff; z += fraction * zdiff; if ((x > (_destination.x - _bounds) && x < (_destination.x + _bounds)) && (z > (_destination.y - _bounds) && z < (_destination.y + _bounds))) { isMoving = false; animationData = model.animationLibrary.getAnimation('stand'); animationData.animator.play(); } } } } }
Klasa Skeleton, podobnie jak klasy śledzonych obiektów w poprzednich przykładach, również bazuje na ObjectContainer3D. W jej wnętrzu umieściliśmy model typu MD2 wraz z teksturą i animacjami, dlatego musieliśmy zaimportować potrzebne składniki do ich poprawnej obsługi: Loader3D, Md2, Mesh, AnimationData oraz BitmapFileMaterial. Mechanizm przemieszczania postaci przelicza wartości otrzymane w jednej z właściwości w postaci punktu klasy Point. Ponieważ w tym przypadku nie uwzględniliśmy zmiany pozycji na osi Y, na przykład wspinaczki lub podbiegania pod górę, zastosowanie klasy Point wystarczy, chociaż jej właściwości mogą być nieco mylące. Wewnątrz klasy Skeleton jeszcze przed konstruktorem zdefiniowaliśmy kilka potrzebnych obiektów oraz zmiennych. W pierwszej kolejności są to obiekty potrzebne do obsługi modelu, obiekt klasy Loader3D nazwaliśmy modelLoader, a z kolei za uruchamianie animacji odpowiada AnimationData. Poza nimi uwzględniliśmy również obiekt klasy Mesh o nazwie model. Był on potrzebny do nakładania tekstur. Do zmiany położenia potrzebowaliśmy kilku zmiennych, takich jak _destination, która określa punkt docelowy w przestrzeni bez uwzględnienia osi Y. Prędkość przemieszczania wyznaczyliśmy w zmiennej o nazwie _speed, która domyślnie równa jest 20, ale im większą wartość ustawimy, tym szybciej postać będzie się poruszała. Zmienna _bounds wyznacza granice akceptacji zmiany położenia obiektu, z kolei isMoving określa, czy obiekt klasy Skeleton jest w trakcie przemieszczania.
Rozdział 9. Kamery
455
W konstruktorze klasy Skeleton stworzyliśmy obiekt modelLoader oraz wywołaliśmy pobieranie wybranego obiektu z zasobów modelu. Dodanie modelu oraz nadanie mu odpowiednich właściwości zapisane zostały w metodzie modelLoaded(), która wykonywana jest z chwilą pobrania modelu. W metodzie modelLoaded() zapisany jest cały mechanizm dodawania pobranego modelu do kontenera klasy Skeleton. Ponieważ jest problem z obsługą tekstur w formacie TGA, musieliśmy załadować własną teksturę przygotowaną w formacie JPG, stosując obiekt klasy BitmapFileMaterial. var mat:BitmapFileMaterial = new BitmapFileMaterial('../../resources/models/md2/hueteotl/hueteotl.jpg');
Nie można nałożyć jej bezpośrednio na pobrany model, dlatego zawartość obiektu modelLoader musieliśmy zapisać jako obiekt klasy Mesh, który zawiera w swoich ustawieniach właściwość material. model = modelLoader.handle as Mesh; model.material = mat;
Po nałożeniu tekstury musieliśmy przestawić model, tak aby pasował on do pozycji i kąta nachylenia całego obiektu klasy Skeleton, oraz odpowiednio go przeskalować, by zajmował mniejszą powierzchnię na płaszczyźnie. model.rotationY = 90; model.y = 60; model.scale(.025);
Po ustawieniu modelu w odpowiedniej pozycji, stosując obiekt animationData, uruchomiliśmy jego standardową animację stand i dodaliśmy do kontenera. animationData = model.animationLibrary.getAnimation('stand'); animationData.animator.play(); addChild(model);
Kolejna metoda w klasie Skeleton odpowiada za ustawienie wartości właściwości _destination, ale nie tylko — przy okazji obraca obiekt w stronę wskazanego punku, korzystając ze standardowej metody lookAt(). Stosując właściwości z obiektu Point w obiekcie Vector3D, musieliśmy dodatkowo podać wartość dla pozycji na osi Y. Ustawiliśmy ją jako pozycję y całego obiektu, dzięki czemu nie obróci się w sposób niepożądany w górę lub w dół. _destination = val; lookAt(new Vector3D(_destination.x, y,_destination.y));
Następnie dodaliśmy instrukcję warunkową sprawdzającą, czy obiekt jest już w trakcie zmiany swojej pozycji. Trzeba przewidzieć, czy użytkownik będzie klikał kilkakrotnie w otoczeniu postaci. Jeżeli poprzednie przejście zostało zakończone
456
Flash i ActionScript. Aplikacje 3D od podstaw
lub w ogóle jest to pierwsze podejście, to należy uruchomić animację run oraz oznaczyć nowy stan obiektu. W przeciwnym razie nie trzeba ponownie wykonywać tych czynności. if (!isMoving) { isMoving = true; animationData = model.animationLibrary.getAnimation('run'); animationData.animator.play(); }
Cały mechanizm zmiany pozycji postaci został umieszczony w metodzie update(), co czyni ją najważniejszą w całej klasie. W pierwszej kolejności sprawdziliśmy, czy ustalono jakąkolwiek wartość dla zmiennej isMoving. Jeżeli jest ona równa true, to można wykonywać pozostałe operacje. Przy zmianie położenia musieliśmy określić różnicę między pozycją domyślną a aktualną. W tym celu zapisaliśmy zmienne xdiff oraz zdiff, które następnie wykorzystaliśmy we wzorze z twierdzenia Pitagorasa wyliczającym długość trasy do przebycia. var xdiff = _destination.x - x; var zdiff = _destination.y - z; var diff = Math.sqrt(Math.pow(xdiff, 2) + Math.pow(zdiff, 2));
W kolejnych linijkach stworzyliśmy zmienną fraction, która określa przesunięcie postaci z użyciem prędkości i wyliczonej wcześniej długości trasy. Wartość tej zmiennej posłużyła nam do zaktualizowania pozycji postaci na osiach X i Z. var fraction = _speed/diff; x += fraction * xdiff; z += fraction * zdiff;
Na końcu metody update() dodaliśmy instrukcję warunkową, której celem jest sprawdzenie, czy postać dotarła do wyznaczonego punktu. Biorąc pod uwagę sytuacje, w których do konkretnej pozycji postaci może zabraknąć kilku setnych, dodaliśmy granice _bounds wyznaczające powierzchnię tolerancji dla zakończenia akcji. Jest to swego rodzaju test kolizji na wybranym obszarze. Jeżeli postać znajdzie się w jego obrębie, to można potraktować to jako dotarcie do celu, domyślnie _bounds równe jest 10. Gdy warunek ten zostanie spełniony, wartość zmiennej isMoving będzie równa false, a animacja run zostanie zastąpiona standardowym stand. if ((x > (_destination.x - _bounds) && x < (_destination.x + _bounds)) && (z > (_destination.y - _bounds) && z < (_destination.y + _bounds))) { isMoving = false; animationData = model.animationLibrary.getAnimation('stand'); animationData.animator.play(); }
Rozdział 9. Kamery
457
Implementacja kamery HoverCamera3D i klasy Skeleton Mając zapisaną i omówioną klasę Skeleton, stworzymy przykład jej zastosowania i połączenia wraz z kamerą HoverCamera3D. Ponieważ jest to standardowa kamera, nie będziemy musieli tworzyć osobnej klasy dla niej, jej obsługę zapiszemy w rpgExample wraz z ustawieniami środowiska. Efekt, jaki uzyskamy po skompilowaniu kodu, został wcześniej przedstawiony na rysunku 9.15. package { import import import import import import import import import import import import import
public class rpgExample extends Sprite { private var view:View3D; private var ground:Plane; private var player:Skeleton; private var camera:HoverCamera3D; private private private private
public function rpgExample() { stage.quality = StageQuality.LOW; stage.align = StageAlign.TOP_LEFT; stage.scaleMode = StageScaleMode.NO_SCALE; addEventListener(Event.ENTER_FRAME, onEnterFrame); stage.addEventListener(Event.RESIZE, onResize); stage.addEventListener(KeyboardEvent.KEY_DOWN, onKeyDown); stage.addEventListener(KeyboardEvent.KEY_UP, onKeyUp); // view = new View3D(); addChild(view); ground = new Plane(); ground.material = new BitmapFileMaterial('../../resources/ bitmaps/skybox/down.jpg');
458
Flash i ActionScript. Aplikacje 3D od podstaw ground.segmentsH = ground.segmentsW = 10; ground.height = 1000; ground.width = 1000; ground.addOnMouseUp(onGroundClick); view.scene.addChild(ground); initPlayer(); initCamera(); onResize(); } private function initCamera():void { camera = new HoverCamera3D(); camera.target = player; camera.panAngle = -45; camera.tiltAngle = 20; camera.minTiltAngle = 0; camera.hover(true); view.camera = camera; } private function initPlayer():void { player = new Skeleton(); player.x = player.z = 0; view.scene.addChild(player); } private function onGroundClick(e:MouseEvent3D):void { player.destination = new Point(e.sceneX, e.sceneZ); } private function onEnterFrame(e:Event):void { player.update(); if (_forwardDown) { camera.tiltAngle += 2; } if (_backwardDown) { camera.tiltAngle -= 2; } if (_leftDown) { camera.panAngle += 2; } if (_rightDown) { camera.panAngle -= 2;
Rozdział 9. Kamery } camera.hover(); view.render(); } private function onKeyDown(e:KeyboardEvent):void { switch(e.keyCode) { case Keyboard.LEFT: _leftDown = true; break; case Keyboard.RIGHT: _rightDown = true; break; case Keyboard.UP: _forwardDown = true; break; case Keyboard.DOWN: _backwardDown = true; break; default:break; } } private function onKeyUp(e:KeyboardEvent):void { switch(e.keyCode) { case Keyboard.LEFT: _leftDown = false; break; case Keyboard.RIGHT: _rightDown = false; break; case Keyboard.UP: _forwardDown = false; break; case Keyboard.DOWN: _backwardDown = false; break; default:break; } } private function onResize(e:Event = null):void { view.x = stage.stageWidth * .5; view.y = stage.stageHeight * .5; } } }
459
460
Flash i ActionScript. Aplikacje 3D od podstaw
Na samym początku bloku kodu klasy rpgExample zdefiniowaliśmy cztery obiekty tworzące całe środowisko oraz cztery zmienne potrzebne do poruszania kamery wokół postaci. Z obiektów poza standardowym widokiem załączyliśmy obiekt klasy Plane o nazwie ground, postać Skeleton o nazwie player oraz oczywiście obiekt camera — kamerę typu HoverCamera3D. Dodane zmienne często wykorzystywaliśmy w poprzednich przykładach i w tym przypadku spełniają tę samą funkcję, czyli określają, czy dany klawisz został wciśnięty, czy nie. W konstruktorze klasy dołączyliśmy standardowe ustawienia stołu montażowego oraz detektory zdarzeń Event.ENTER_FRAME i Event.RESIZE. Dodatkowo umieściliśmy też detektory dla zdarzeń wciśnięcia i zwolnienia klawiszy klawiatury, które przy wystąpieniu danego warunku wywołują odpowiednio metody onKeyDown() lub onKeyUp(). Poza tym stworzyliśmy powierzchnię, po której porusza się postać, i przypisaliśmy jej detektor zdarzenia MouseEvent3D.MOUSE_UP, który po zwolnieniu przycisku myszki uruchamia metodę onGroundClick(). W kolejnych linijkach konstruktora wywołaliśmy dwie interesujące nas metody: initPlayer() i initCamera(). W metodzie initPlayer() zapisaliśmy proces tworzenia obiektu klasy Skeleton. Są to jedynie trzy linijki kodu, ponieważ wszystkie ważniejsze działania związane z tym obiektem zapisaliśmy we wnętrzu jego klasy. player = new Skeleton(); player.x = player.z = 0; view.scene.addChild(player);
Z kolei w metodzie initCamera() utworzyliśmy obiekt camera i nadaliśmy jego parametrom wartości początkowe. Najważniejszą z nich było wyznaczenie celu, który kamera miała śledzić. camera = new HoverCamera3D(); camera.target = player; camera.panAngle = -45; camera.tiltAngle = 20; camera.minTiltAngle = 0; camera.hover(true); view.camera = camera;
W metodzie onGroundClick(), wywoływanej przy puszczeniu przycisku myszy na powierzchni obiektu ground, zapisaliśmy przypisanie parametrowi destination nowego punktu z wartościami e.sceneX oraz e.sceneZ; wskazują one na punkt, w którym wykryto to zdarzenie. player.destination = new Point(e.sceneX, e.sceneZ);
Rozdział 9. Kamery
461
Mechanizm poruszania kamerą oraz wywoływania zmian pozycji obiektu player umieściliśmy w metodzie uruchamianej przez zdarzenie Event.ENTER_FRAME. W pierwszej kolejności odwołaliśmy się do metody update() na obiekcie player, po czym zapisaliśmy kilka instrukcji warunkowych sprawdzających, czy jest wciśnięty któryś z klawiszy strzałek. Jeżeli któryś z warunków jest spełniony, wykonywana jest odpowiednia zmiana kąta nachylenia poprzez zmianę wartości właściwości tiltAngle i panAngle. Na końcu tej metody musieliśmy oczywiście odwołać się do metody hover() i render(), aby zmiany były widoczne.
Podsumowanie Kamery to obiekty trójwymiarowe, mają one podstawowe metody oraz właściwości ustalające ich położenie w przestrzeni sceny. Wyświetlanie obiektów 3D bazuje na regułach rzutowania na płaszczyznę. Płaszczyzna, na której wyświetlane są obiekty trójwymiarowe, nazywa się rzutnią. Podstawowymi pojęciami związanymi z kamerami w Away3D są: Field of View (fov), zoom, focus, Depth of Field oraz lens. Field of View to pole widzenia od dolnej do górnej krawędzi rzutni, w obrębie którego wyświetlane są obiekty. Wartość Field of View wyliczana jest z wymiarów rzutni oraz jej odległości od kamery. Standardowo rzutnia przyjmuje wymiary okna aplikacji Flash. Parametr zoom skaluje powierzchnię rzutni, co powoduje efekt przybliżenia lub oddalenia. Parametr focus określa odległość kamery od rzutni. Depth of Field to głębia ostrości, czyli odległość, w której rejestrowane obiekty mają wyraźne, ostre kontury. Stosowanie Depth of Field ma na celu odseparowanie obiektów od tego, na którym skupiona jest kamera. Głębię ostrości można stosować na obiektach DepthOfFieldSprite. Aby uruchomić efekt głębi ostrości, należy zastosować klasę DofCashe lub wywołać na obiekcie kamery metodę enableDof().
462
Flash i ActionScript. Aplikacje 3D od podstaw
Podstawowe właściwości stosowane przy regulacji Depth of Field to: doflevels, maxblur oraz aperture. Klasą bazową dla wszystkich soczewek jest klasa AbstractLens. Parametr lens w obiekcie kamery określa zastosowaną soczewkę. Wyróżniamy następujące rodzaje soczewek: ZoomFocusLens, PerspectiveLens, SphericalLens oraz OrthogonalLens. Standardowym rodzajem soczewki jest ZoomFocusLens, a podstawową klasą wszystkich dostępnych w Away3D soczewek jest AbstractLens. ZoomFocusLens i PerspectiveLens działają i przedstawiają scenę podobnie jak ludzkie oko. Soczewka SphericalLens służy do prezentacji zniekształconego obrazu zwanego efektem rybiego oka. Do ujęć izometrycznych stosuje się klasę OrthogonalLens. W tym przypadku ważniejsza od pozycji na scenie jest kolejność, w której obiekt został do niej dodany. W Away3D rozróżniamy następujące rodzaje kamer: Camera3D, TargetCamera3D, HoverCamera3D i SpringCam. Camera3D jest domyślnym rodzajem, do którego można się odwołać z obiektu widoku poprzez właściwość camera. Początkowa pozycja kamery jest w punkcie Vector3D(0, 0, -1000), z kolei standardowym punktem obserwacji jest środek sceny. Kamery TargetCamera3D oraz HoverCamera3D są rozbudowanymi wersjami Camera3D i ułatwiają namierzanie wybranego obiektu oraz krążenie wokół niego. W kamerach TargetCamera3D oraz HoverCamera3D do ustalenia obserwowanego obiektu służy właściwość target. W przypadku kamery TargetCamera3D metody takie jak: moveLeft(), moveRight(), moveUp() czy też moveDown() nie przesuwają jej w standardowy sposób, tylko zmieniają pozycję na orbicie. Do zmiany pozycji HoverCamera3D służą właściwości: panAngle, tiltAngle, steps oraz distance. Granice wyznaczają właściwości: maxPanAngle, minPanAngle, maxTiltAngle oraz minTiltAngle. Stosowanie HoverCamera3D wymaga wywołania metody hover() w miejscu, gdzie odświeżana jest zawartość widoku.
Rozdział 9. Kamery
463
Celem kamery SpringCam jest podążanie za wyznaczonym obiektem. W zależności od pozycji kamery względem śledzonego obiektu może ona być zastosowana na przykład w grach FPP i TPP. Reakcje kamery SpringCam reguluje się poprzez właściwości damping, stiffness oraz mass. Pozycję kamery od wybranego celu wyznacza wartość właściwości positionOffset.
464
Flash i ActionScript. Aplikacje 3D od podstaw
Rozdział 10. Dźwięk Do tej pory poznaliśmy elementy, które są widoczne na scenie bezpośrednio bądź swoim działaniem ingerują w sposób wyświetlania innych obiektów w otoczeniu. Wszystko to działało na nasz zmysł wzroku. Teraz przyszedł czas na poznanie obiektów działających na zmysł słuchu. W bibliotece Away3D dostępne są dwie istotne klasy pozwalające dodać obiekt dźwięku do przestrzeni trójwymiarowej w dowolnym miejscu. Taki obiekt nie jest słyszany równomiernie, jakby był odtwarzany jako tło. Głośność dźwięku oraz kanał, z którego się wydobywa, uzależnione są od pozycji słuchacza w przestrzeni. Klasa ta ma kilka mankamentów, które omówimy i znajdziemy na nie sposoby. Poza tym czytając ten rozdział, dowiesz się: Czym są klasy Sound3D i SimplePanVolumeDriver. Jak należy z nich korzystać w przestrzeni trójwymiarowej. Na jakich zasadach działa zróżnicowanie dźwięku w zależności od pozycji słuchacza. Czym jest wspomniany słuchacz i co zrobić, aby dźwięk reagował na zmiany jego pozycji. Jak kontrolować obiekty 3D za pomocą dźwięku oraz jakie efekty można uzyskać.
Klasy obsługujące dźwięk Sound3D Klasa Sound3D zlokalizowana jest w pakiecie away3d.audio. Obiekt tej klasy jest źródłem emitowania dźwięku w konkretnym położeniu w przestrzeni trójwymiarowej. Posługiwanie się tym narzędziem jest podobne do stosowania świateł i kamer, których również nie widać bezpośrednio na scenie, widać tylko efekty
466
Flash i ActionScript. Aplikacje 3D od podstaw
ich funkcjonowania. Sposób działania dźwięku w przestrzeni 3D zależy od położenia słuchacza, którym przeważnie jest obiekt kamery. W zależności od pozycji i określonego dystansu obiekt klasy Sound3D kontroluje właściwość volume. Im bardziej słuchacz jest oddalony od źródła dźwięku, tym mniejszy jest poziom głośności volume, i odwrotnie — im źródło dźwięku jest bliżej, tym większa jest wartość właściwości volume. Dla zwiększenia realności pozycja obiektu klasy Sound3D decyduje o tym, z którego głośnika wydobywa się dźwięk. Na rysunku 10.1 przedstawiono kilka wariantów umiejscowienia źródła dźwięku i relacji ze słuchaczem. Rysunek 10.1.
Oddziaływanie pozycji obiektu Sound3D na słyszalność dźwięku
Stosowanie klasy Sound3D jest bardzo proste. W pierwszej kolejności należy stworzyć obiekt tej klasy, podając w argumentach konstruktora potrzebne informacje. Jako pierwszy argument należy podać źródło dźwięku w postaci obiektu klasy Sound. Drugi argument, reference, oznacza obiekt, względem którego będzie wyliczana odległość od źródła dźwięku potrzebna do regulacji głośności. Przeważnie obiektem tym jest zastosowana w projekcie kamera. Jako ostatni argument można ręcznie podać obiekt sterownika do kontroli dźwięku, o którym powiemy w następnym punkcie. Po utworzeniu obiektu należy dodać go do sceny jak zwykły element 3D i uruchomić dźwięk metodą play(). Wszystkie właściwości oraz metody klasy Sound3D wypisano w tabelach 10.1 i 10.2.
Rozdział 10. Dźwięk
467
Tabela 10.1. Właściwości klasy Sound3D
Nazwa
Rodzaj
Wartość domyślna Opis
paused
Boolean
false
Zwraca wartość określającą, czy dźwięk jest wstrzymany, czy nie
playing
Boolean
false
Zwraca wartość określającą, czy dźwięk jest włączony, czy nie
scaleDistance
Number
1
Określa skalę dystansu dla symulacji zmiany poziomu głośności dźwięku w zależności od odległości od słuchacza
volume
Number
1
Określa ogólny poziom głośności będący podstawą niezależnie od odległości
Przełączanie pomiędzy wstrzymywaniem i wznawianiem odtwarzania wybranego dźwięku
SimplePanVolumeDriver Mimo że klasa Sound3D ma właściwości i metody kontrolujące dźwięk, w rzeczywistości wszystkie operacje wykonywane są na specjalnym sterowniku, który jest automatycznie tworzony wraz z obiektem klasy Sound3D lub osobno przez programistę. Podobna sytuacja występuje w przypadku klasy Sound, której operacje zmiany głośności i kierunku odtwarzania generalnie wykonuje obiekt klasy SoundTransform. W Away3D standardowym i w zasadzie jedynym sterownikiem emitowanego dźwięku jest klasa SimplePanVolumeDriver, dziedzicząca po AbstractSound3DDriver. Obie zlokalizowane są w pakiecie away3d.audio.drivers. Obiekt tej klasy jest dobrym narzędziem, lecz ma kilka niedociągnięć, między innymi nie reaguje bezpośrednio na zmianę pozycji słuchacza, tylko źródła dźwięku. Odczuwalne jest to przy porównaniu zachowań dźwięku podczas poruszania samym obiektem klasy Sound3D i osobno kamery. Gdy ustawimy nową pozycję źródła dźwięku, efekty zmiany głośności będą słyszalne, natomiast gdy obiekt pozostaje w miejscu, a pozycję zmienia kamera, nie słychać jakichkolwiek różnic. Trzeba liczyć, że z czasem zostanie to zaktualizowane, bądź samemu próbować napisać nowe metody.
468
Flash i ActionScript. Aplikacje 3D od podstaw
Ponieważ SimplePanVolumeDriver nie ma właściwości publicznych, w tabeli 10.3 umieszczono te, które dziedziczy po klasie AbstractSound3DDriver. Z kolei w tabeli 10.4 wypisano metody klasy SimplePanVolumeDriver. Tabela 10.3. Właściwości klasy SimplePanVolumeDriver
Nazwa
Rodzaj
Wartość domyślna Opis
mute
Boolean
false
Określa, czy dźwięk jest całkowicie wyciszony, czy nie
scale
Number
1
Określa wartość skali dystansu
sourceSound
Sound
volume
Number
Określa źródło dźwięku w postaci obiektu klasy Sound 1
Określa poziom dźwięku
Tabela 10.4. Metody klasy SimplePanVolumeDriver
Nazwa
Opis
SimplePanVolumeDriver()
Konstruktor
pause():void
Wstrzymuje odtwarzanie dźwięku
play():void
Uruchamia bądź wznawia odtwarzanie dźwięku
stop():void
Zatrzymuje odtwarzanie dźwięku
Przykłady zastosowań Znamy już klasy, które odpowiedzialne są za umieszczanie i kontrolowanie dźwięku w przestrzeni trójwymiarowej. W tym podrozdziale przedstawimy dwa scenariusze używania dźwięku w projektach korzystających z biblioteki Away3D. W pierwszej kolejności zastosujemy klasy Sound3D oraz SimplePanVolumeDriver, aby umieścić w przestrzeni obiekt dźwięku. W drugim przykładzie wykorzystamy zwykłe komponenty ActionScript 3.0, dzięki którym będziemy mogli kontrolować zachowanie obiektów trójwymiarowych.
Dźwięk 3D Głównym celem przykładu w tym punkcie jest pokazanie, jak dźwięk może nadać odpowiedni klimat naszym aplikacjom. Często zdarza się, że całe napięcie w horrorach bądź thrillerach wywołuje ścieżka dźwiękowa, a nie prezentowane sceny. Słuchanie muzyki zdecydowanie bardziej pobudza wyobraźnię.
Rozdział 10. Dźwięk
469
W naszym przykładzie stworzymy mroczny klimat. Na wszystkich obiektach użyjemy odpowiednich tekstur załączonych do pliku projektu. Pierwszy obiekt klasy Sound3D o nazwie snd umieścimy tuż przed drzwiami, za którymi jak widać na rysunku 10.2, znajduje się coś złego. Rysunek 10.2.
Zrzut ekranu z aplikacji Sound3DExample
Zbliżając się do tych drzwi, użytkownik wraz ze zmniejszeniem odległości do obiektu snd będzie coraz wyraźniej słyszał charakterystyczne tło dźwiękowe. Gdy będzie się cofał, dźwięk ten będzie zanikał. Poza tym dodamy również kolejny obiekt klasy Sound3D o nazwie snd2, który umieścimy na początku korytarza. Użytkownik, włączając aplikację, od razu usłyszy dźwięk maniakalnego śmiechu dochodzącego zza jego pleców. Gdy będzie zbliżał się do drzwi, dźwięk ten będzie milknął, ale z kolei włączy się tło dźwiękowe dobiegające zza drzwi. Niezależnie od pozycji w korytarzu któryś z tych dźwięków będzie towarzyszył użytkownikowi. Do całego przykładu zbudujemy dwie klasy, aby oddzielić ważniejsze fragmenty dla tego rozdziału od kodu budującego otoczenie. Omawianie zaczniemy od głównej klasy aplikacji. Aby dźwięk w obiekcie Sound3D powtarzał się, należy zmodyfikować kod klasy SimplePanVolumeDriver, dodając detektor zdarzenia Event.SOUND_COMPLETE do obiektu klasy SoundChannel. Jeżeli korzystasz ze źródeł innych niż przeznaczone specjalnie do tej książki, musisz w klasie SimplePanVolumeDriver wewnątrz metody play() dodać detektor, który będzie uruchamiał na nowo źródło dźwięku.
470
Flash i ActionScript. Aplikacje 3D od podstaw
Klasa Sound3DExample W głównej klasie przykładu Sound3DExample zapiszemy wszystkie potrzebne operacje do stworzenia dźwięków w postaci obiektów klas Sound3D. Istotne fragmenty omówimy zaraz po przepisaniu kodu źródłowego tej klasy: package { import import import import import import import import // import import import import import
public function Sound3DExample() { stage.quality = StageQuality.LOW; stage.align = StageAlign.TOP_LEFT; stage.scaleMode = StageScaleMode.NO_SCALE; stage.addEventListener(Event.ENTER_FRAME, onEnterFrame); stage.addEventListener(Event.RESIZE, onResize); // view = new View3D(); view.clipping = new FrustumClipping( { minZ:10 } ); addChild(view); // ch = new crosshair(); addChild(ch); fpp = new FPP(stage, { freeCamera:true,height: 160 }); onResize();
Rozdział 10. Dźwięk
471
var building:Building = new Building(view.scene); building.buildCorridor(); addSounds(); } private function addSounds():void { /* * Doors To Hell */ spvd = new SimplePanVolumeDriver(); snd = new Sound3D(new Sound(new URLRequest('../../resources/sounds/ scary_background_music.mp3')), view.camera, spvd); snd.position = new Vector3D(0, 26, 1810); view.scene.addChild(snd); spvd.volume = .75; snd.play(); /* * Begin */ spvd2 = new SimplePanVolumeDriver(); snd2 = new Sound3D(new Sound(new URLRequest('../../resources/ sounds/maniac_laugh.mp3')), view.camera, spvd2); snd2.position = new Vector3D(0, 26, -1810); spvd2.volume = .75; view.scene.addChild(snd2); snd2.play(); // view.camera.addOnPositionChange(tracePosition); } private function tracePosition(e:Object3DEvent):void { snd._onSceneTransformChanged(); snd2._onSceneTransformChanged(); } private function onEnterFrame(e:Event):void { fpp.updateCamera(); view.render(); } private function onResize(e:Event = null):void { view.x = ch.x = stage.stageWidth * .5; view.y = ch.y = stage.stageHeight * .5; } } }
472
Flash i ActionScript. Aplikacje 3D od podstaw
Najważniejszymi klasami, których obiekty zastosowaliśmy w klasie Sound3DExample, są: Sound, Sound3D, SimplePanVolumeDriver oraz URLRequest. Wspominaliśmy, że dźwięk z obiektów Sound3D nie reaguje na zmianę pozycji słuchacza, w naszym przypadku kamery, dlatego musieliśmy zapożyczyć sobie jedną z metod klasy Sound3D i odrobinę ją przerobić. W ciele klasy Sound3DExample poza standardowym obiektem widoku zdefiniowaliśmy obiekty snd oraz snd2, które korzystają z osobnych sterowników dźwięku klasy SimplePanVolumeDriver o nazwach spvd i spvd2. Aby umożliwić użytkownikowi zmianę pozycji na scenie, dodaliśmy obiekt wcześniej przygotowanej klasy FPP. W konstruktorze klasy Sound3DExample w pierwszej kolejności ustawiliśmy odpowiednie właściwości dla obiektu klasy Stage. Ponieważ na scenie będzie się znajdowało sporo obiektów, dla szybszej pracy aplikacji ustaliliśmy jakość wyświetlanej zawartości na StageQuality.LOW, poza tym dodaliśmy detektory zdarzeń Event.ENTER_FRAME i Event.RESIZE. Następnie stworzyliśmy widok z jedną dodatkową opcją. Otóż aby zapobiec znikaniu ścian, dodaliśmy nową formę wyświetlania zawartości sceny w postaci obiektu klasy FrustumClipping. Sens oraz sposób działania tej klasy omówimy w rozdziale 12. „Optymalizacja”, poświęconym różnym praktykom poprawiania jakości aplikacji. view = new View3D(); view.clipping = new FrustumClipping( { minZ:10 } ); addChild(view);
Po stworzeniu widoku dodaliśmy celownik ch oraz obiekt klasy FPP, podając w jej konstruktorze obiekt stage oraz wysokość, na jakiej będzie zawieszona kamera. Wszystko po to, aby pozwolić użytkownikowi na przemieszczanie się jak w grach typu FPP. ch = new crosshair(); addChild(ch); fpp = new FPP(stage, { freeCamera:true,height: 160 });
Jak wspomnieliśmy, aby oddzielić część tworzenia korytarza od głównego punktu przykładu, podzieliliśmy kod na dwie klasy: Sound3DExample i Building. W dalszej części konstruktora klasy Sound3DExample stworzyliśmy obiekt building i wywołaliśmy jego metodę addCorridor() dodającą korytarz. var building:Building = new Building(view.scene); building.buildCorridor();
Na końcu konstruktora odwołaliśmy się do metody addSounds(), w której wnętrzu w pierwszej kolejności stworzyliśmy obiekty potrzebne do klimatycznego tła dźwiękowego dochodzącego zza drzwi. Najpierw dodaliśmy obiekt sterownika spvd i nadaliśmy jego właściwości volume nową wartość 0.75, wyciszając tym
Rozdział 10. Dźwięk
473
samym poziom standardowej głośności. Następnie stworzyliśmy obiekt snd klasy Sound3D, przypisując w jego konstruktorze argumentowi sound nowy obiekt klasy Sound ze ścieżką do pliku w formacie MP3. Następnie w drugim argumencie odwołaliśmy się do kamery jako obiektu, względem którego wyliczane będą odległości. Ostatniemu argumentowi driver przypisaliśmy stworzony wcześniej sterownik spvd. Po utworzeniu obiektu snd ustawiliśmy jego pozycję, dodaliśmy go do sceny i włączyliśmy dźwięk metodą play(). spvd = new SimplePanVolumeDriver(); spvd.volume = .75; snd = new Sound3D(new Sound(new URLRequest('../../resources/sounds/ scary_background_music.mp3')), view.camera, spvd); snd.position = new Vector3D(0, 26, 1810); view.scene.addChild(snd); snd.play();
Takie same czynności wykonaliśmy względem drugiego źródła dźwięku w postaci obiektów snd2 i spvd2 umieszczonych na początku korytarza. W metodzie addSounds() poza samym faktem dodania źródeł dźwięku istotne jest również dodanie detektora zdarzenia Object3DEvent.POSITION_CHANGED dla obiektu kamery. view.camera.addOnPositionChange(tracePosition);
W bloku kodu metody tracePosition(), wywoływanej przy każdej zmianie pozycji kamery, odwołaliśmy się w dwóch obiektach klasy Sound3D do dziwnie nazwanej metody _onSceneTransformChanged(). Dziwnie nazwanej, ponieważ pierwotnie była to prywatna metoda uruchamiana przy zmianie pozycji samego obiektu źródła dźwięku. snd._onSceneTransformChanged(); snd2._onSceneTransformChanged();
Jeżeli korzystasz ze źródeł innych niż przeznaczone specjalnie do tej książki, musisz w klasie Sound3D zmienić następującą linijkę: private function _onSceneTransformChanged(ev : Object3DEvent) : void
na public function _onSceneTransformChanged(ev : Object3DEvent = null) : void
Klasa Building W tej klasie na dobrą sprawę nie wykorzystaliśmy rzeczy, których wcześniej byśmy nie omówili. Dlatego przedstawimy ogólnie cały schemat planszy korytarza na rysunku 10.3 i tylko w kilku zdaniach opiszemy, co takiego w niej umieściliśmy.
474
Flash i ActionScript. Aplikacje 3D od podstaw
Najpierw jednak przepisz kod do osobnego pliku o nazwie Building.as i zaimportuj go do projektu przykładu. Rysunek 10.3.
Schemat korytarza w przykładzie Sound3DExample
package { import flash.display.Sprite; import flash.geom.Vector3D; import away3d.core.utils.Cast; import away3d.containers.Scene3D; import away3d.containers.ObjectContainer3D; import away3d.primitives.Plane; import away3d.primitives.data.CubeMaterialsData; import away3d.materials.BitmapMaterial; import away3d.materials.TransformBitmapMaterial; import away3d.primitives.Cube; public class Building extends Sprite { private var scene:Scene3D; public var corridor_segments:Number = 8; private var wall_height:int = 256; private var wall_width:int = 508; private var wall_depth:int = 25; public function Building(scn:Scene3D) { scene = scn; } public function buildCorridor():void {
Rozdział 10. Dźwięk
475
var length:Number = corridor_segments * wall_width; var corridor:ObjectContainer3D = new ObjectContainer3D(); var floor:Plane = new Plane( { width:wall_width, height:length, segmentsW:corridor_segments, segmentsH:corridor_segments * 2, material:new TransformBitmapMaterial(Cast.bitmap ('corridorFloor'), { repeat:true, scaleX:.5, scaleY:254 / length } ), pushback:true } ); var ceiling:Plane = new Plane( { width:wall_width, height:length, y:wall_height, segmentsW:corridor_segments, segmentsH:corridor_segments * 2, bothsides:true, back:new TransformBitmapMaterial(Cast.bitmap('ceiling'), { repeat:true, scaleX:.5, scaleY:254 / length } ), pushback:true } ); var longWallL:Cube = new Cube(); longWallL.depth = length - wall_width; longWallL.width = wall_width; longWallL.height = wall_height; longWallL.position = new Vector3D( -266.5, wall_height * .5, 0); // var longWallR:Cube = new Cube(); longWallR.depth = length - wall_width; longWallR.width = wall_width; longWallR.height = wall_height; longWallR.position = new Vector3D(266.5, wall_height * .5, 0); // var longWallMaterials:CubeMaterialsData = new CubeMaterialsData(); longWallMaterials.front = new BitmapMaterial (Cast.bitmap('corridorWall2')); longWallMaterials.back = new BitmapMaterial (Cast.bitmap('corridorWall2')); longWallMaterials.left = new TransformBitmapMaterial(Cast.bitmap ('corridorWall'), { repeat:true, scaleX:1/corridor_segments } ); longWallMaterials.right = new TransformBitmapMaterial(Cast.bitmap ('corridorWall'), { repeat:true, scaleX:1/corridor_segments} ); // longWallL.cubeMaterials = longWallMaterials; longWallR.cubeMaterials = longWallMaterials; // var doorsToHellMaterials:CubeMaterialsData = new CubeMaterialsData(); doorsToHellMaterials.front = new BitmapMaterial (Cast.bitmap('doorsToHell')); doorsToHellMaterials.back = new BitmapMaterial (Cast.bitmap('doorsToHell'));
476
Flash i ActionScript. Aplikacje 3D od podstaw doorsToHellMaterials.left = new BitmapMaterial (Cast.bitmap('corridorWall2')); doorsToHellMaterials.right = new BitmapMaterial (Cast.bitmap('corridorWall2')); var doorsToHell:Cube = new Cube( { cubeMaterials: doorsToHellMaterials } ); doorsToHell.position = new Vector3D( 0, wall_height * .5, length * .5 + wall_depth * .5); doorsToHell.depth = wall_width; doorsToHell.width = wall_width; doorsToHell.height = wall_height; // var backWallMaterials:CubeMaterialsData = new CubeMaterialsData(); backWallMaterials.front = new BitmapMaterial (Cast.bitmap('corridorWall')); backWallMaterials.back = new BitmapMaterial (Cast.bitmap('corridorWall')); backWallMaterials.left = new BitmapMaterial (Cast.bitmap('corridorWall2')); backWallMaterials.right = new BitmapMaterial (Cast.bitmap('corridorWall2')); var backWall:Cube = new Cube( { cubeMaterials:backWallMaterials } ); backWall.position = new Vector3D( 0, wall_height * .5, -length * .5 - wall_depth * .5); backWall.depth = wall_width; backWall.width = wall_width; backWall.height = wall_height; // corridor.addChild(floor); corridor.addChild(ceiling); corridor.addChild(backWall); corridor.addChild(doorsToHell); corridor.addChild(longWallL); corridor.addChild(longWallR); scene.addChild(corridor); } }
}
W klasie Building umieściliśmy metody odpowiedzialne za budowanie pomieszczeń w naszym przykładzie. Do poprawnego wyświetlenia poszczególnych elementów musieliśmy zaimportować klasy Cube oraz Plane generujące elementy ścian, podłóg i sufitów, a do ich wypełnienia dodaliśmy klasy BitmapMaterial oraz TransformBitmapMaterial. Dodatkowo aby każdemu z boków sześcianów nadać odpowiednią teksturę, posłużyliśmy się CubeMaterialsData, a do samego pobierania źródeł obrazów skorzystaliśmy z klasy Cast.
Rozdział 10. Dźwięk
477
Wewnątrz klasy Building zdefiniowaliśmy jeden obiekt scene, który zastosujemy jako odwołanie do głównej sceny stworzonej w klasie bazowej. Poza tym dodaliśmy zmienną corridor_segments, określającą liczbę segmentów korytarza, oraz zmienne wall_height_wall_width i wall_depth, których wartości określają wymiary korytarza. W metodzie buildCorridor() zapisaliśmy procesy tworzenia korytarza, zaczynając od ustalenia jego długości w postaci zmiennej length, której wartość jest iloczynem wall_width i corridor_segments. var length:Number = corridor_segments * wall_width;
Po ustaleniu długości stworzyliśmy kontener o nazwie corridor, w którym umieszczone zostaną wszystkie elementy składowe. var corridor:ObjectContainer3D = new ObjectContainer3D();
Jako pierwszy element dodaliśmy podłogę w postaci obiektu floor klasy Plane. W jego ustawieniach określiliśmy wymiary, liczbę segmentów oraz pokrycie materiałem typu TransformBitmapMaterial. Dzięki temu materiałowi jednym fragmentem tekstury mogliśmy uzupełnić znacznie większą powierzchnię, nie powodując rozciągnięć. W następnej kolejności dodaliśmy sufit w postaci obiektu o nazwie ceiling. Ustawienia w nim zastosowane są bardzo podobne do tych, których użyliśmy wcześniej przy tworzeniu podłogi. Różnica widoczna jest w pozycji względem osi Y oraz w zastosowanym źródle tekstury. Po utworzeniu podłogi i sufitu zapisaliśmy szereg linijek kodu tworzącego poszczególne ściany korytarza. Do ich prezentacji skorzystaliśmy z obiektów klasy Cube oraz materiałów TransformBitmapMaterial i BitmapMaterial. Żeby nadać poszczególnym ścianom odpowiednią teksturę, skorzystaliśmy z obiektu klasy CubeMaterialsData i jego właściwości: left, right, top, bottom, front i back. Na końcu metody buildCorridor()wszystkie utworzone elementy dodaliśmy do wcześniej stworzonego kontenera o nazwie corridor i całość umieściliśmy na scenie, stosując odwołanie do obiektu scene.
Kontrolowanie obiektów dźwiękiem W aplikacjach 3D dźwięk nie musi być tylko emitowany w konkretnym miejscu w przestrzeni, równie dobrze można się nim posłużyć jako formą sprawującą kontrolę nad obiektami umieszczonymi na scenie. Posługując się pobranymi z dźwięku wartościami, można tworzyć wiele różnych animacji, w których obiekty zmieniają swoje rozmiary, położenie, kolory pokrywających je materiałów, a nawet
478
Flash i ActionScript. Aplikacje 3D od podstaw
modyfikują całą swoją budowę i formę. W aplikacjach dwuwymiarowych pisanych w języku ActionScript 3.0 można spotkać wiele różnych wizualizacji dźwięku, których animacje generują mniej lub bardziej skomplikowane formy. To, jak dźwięk zostanie przedstawiony na ekranie, zależy od pomysłowości programisty. Podstawą oczywiście jest znajomość następujących klas: Sound, SoundTransform, SoundChannel oraz SoundMixer, dzięki którym można odtworzyć dźwięk i pobierać jego wartości do konstruowania wizualizacji. Do kontrolowania obiektu w przestrzeni wykorzystamy dwie z wcześniej wymienionych klas: Sound oraz SoundChannel, a efekt, jaki mamy zamiar uzyskać, przedstawia rysunek 10.4. Rysunek 10.4.
Zrzut ekranu przykładu SoundControlExample
Ta dziwna bryła przedstawiona na rysunku 10.4 to w rzeczywistości obiekt kuli, której struktura została zmodyfikowana przez odpowiednio spreparowane wartości właściwości leftPeak oraz rightPeak, pochodzące z obiektu klasy SoundChannel. Zanim jednak zajmiemy się szczegółami, przepisz następujący kod klasy Sound ControlExample: package { import import import import import import import
Podobnie jak w kilku wcześniejszych przykładach, do zwiększenia wydajności aplikacji oraz wyśrodkowania wyświetlanej zawartości użyliśmy obiektów klas StageAlign, StageScaleMode oraz StageQuality. Z biblioteki Away3D poza widokiem View3D zaimportowaliśmy również kamerę typu HoverCamera3D, materiał BitmapFileMaterial oraz klasę Sphere, której obiekt będzie modyfikowany przez odtwarzaną ścieżkę dźwiękową. Jak wcześniej wspomniałem, do obsługi dźwięku użyliśmy klasy Sound oraz SoundChannel. Jako że źródłem dźwięku jest strumień radia internetowego, dodaliśmy również klasę URLRequest niezbędną do uzyskania połączenia HTTP. Poza tym musieliśmy zadbać jeszcze o obsługę zdarzeń wywoływanych przez użytkownika lub przez procesy zachodzące wewnątrz aplikacji. Do tego celu zaimportowaliśmy klasy: Event, MouseEvent, KeyboardEvent oraz Keyboard. Następnym krokiem w tworzeniu tego przykładu było zdefiniowanie potrzebnych obiektów i zmiennych wewnątrz klasy SoundControlExample. Zaczynając od związanych z biblioteką Away3D, określiliśmy widok, kamerę oraz dwie kule o nazwach sph i sphHelper. Kula sph reprezentuje obiekt, którego powierzchnia jest modyfikowana, sphHelper zaś jest obiektem pomocniczym, zawierającym wszystkie potrzebne informacje na temat pierwotnej struktury siatki kul. Aby sphHelper spełnił swoją funkcję, musieliśmy przypisać jego właściwościom wartości z obiektu sph. Zmienna len posłużyła nam do przechowywania wartości liczby obiektów klasy Face wewnątrz kuli sphHelper. Zdefiniowanie tej zmiennej nie jest niezbędne, jedynie odciąży to aplikację od niepotrzebnie powielających się wyliczeń wartości, które nie zmieniają swego stanu. Obiekty v3d oraz _v3d klasy Vector3D, podobnie jak ang, mod oraz power, posłużyły do modyfikowania pozycji każdego z punktów Vertex wewnątrz kuli sph. Do obsługi dźwięku zdefiniowaliśmy obiekt o nazwie music, który jest reprezentantem klasy Sound, oraz obiekt klasy SoundChannel o podobnej nazwie musicChannel. Ponieważ w kodzie zapisana została możliwość włączenia i wyłączenia muzyki, wartość zmiennej musicOn określa, czy radiostacja jest odtwarzana, czy też nie. Pozostałe zmienne — move, lpa, lta, lmx oraz lmy — posłużyły nam do określenia pozycji kamery oraz kursora myszki po zmianie wykonanej przez użytkownika. Rolę każdej z tych zmiennych poznamy dokładniej za chwilę. W konstruktorze tej klasy w pierwszej kolejności nadaliśmy odpowiednie ustawienia obiektowi stage, tak aby wyświetlana grafika była najniższej jakości, wyrównana do lewego górnego rogu i nieskalowana podczas zmiany rozdzielczości. Później dodaliśmy szereg rejestratorów dla zdarzeń: Event.ENTER_FRAME, Event.RESIZE, KeyboardEvent.KEY_DOWN, MouseEvent.MOUSE_DOWN oraz MouseEvent.MOUSE_UP. Zdarzenia te określają odświeżenie zawartości stołu montażowego, zmianę wymiarów okna aplikacji, wciśnięcie klawisza klawiatury do włączenia i wyłączenia muzyki oraz wciśnięcie i zwolnienie przycisku myszy do kontroli pozycji kamery.
Rozdział 10. Dźwięk
483
W następnej kolejności stworzyliśmy widok ze standardowymi ustawieniami oraz dwie kule z identycznymi wartościami: sph i sphHelper. Do zawartości sceny dodaliśmy jednak tylko sph, ponieważ druga kula ma charakter obiektu pomocniczego, z którego potrzebujemy jedynie danych bryły w jej pierwotnej formie, bez konieczności prezentowania jej budowy na scenie. Zwróć uwagę, że zmieniona została wartość właściwości radius w obiekcie pomocniczym, a nie właściwym. Otóż w dalszych częściach kodu pozycje każdego z punktów Vertex pobierane są z obiektu sphHelper, a co za tym idzie — nie ma konieczności osobnego ustalania rozmiarów sph. Jedyne, co musi się zgadzać, to liczba tych punktów, stąd w obu obiektach liczby segmentów są identyczne. view = new View3D(); addChild(view); sph = new Sphere(); sph.segmentsH = 28; sph.segmentsW = 28; sphHelper = new Sphere(); sphHelper.segmentsH = 28; sphHelper.segmentsW = 28; sphHelper.radius = 150; view.scene.addChild(sph);
Aby zobaczyć, jak na modyfikowanym obiekcie prezentuje się dowolny materiał, dodaliśmy również linijkę kodu, w której przypisujemy obiektowi sph teksturę z zewnętrznego pliku graficznego. Ponieważ na początek lepiej widzieć, jak zmienia się położenie punktów Vertex wewnątrz kuli, umieściliśmy ten kod w komentarzu. //sph.material = new BitmapFileMaterial('../../resources/ bitmaps/specular.jpg');
W następnej kolejności wewnątrz konstruktora stworzyliśmy obiekt kamery o nazwie camera, której wartości właściwości panAngle oraz tiltAngle przyrównaliśmy do 0. Dzięki temu kamera ze swojej domyślnej pozycji płynnie przejdzie do nowej, spoglądając na obiekt z boku. Po utworzeniu i ustawieniu kamery w widoku view przypisaliśmy właściwości camera nasz obiekt camera. camera = new HoverCamera3D(); camera.panAngle = 0; camera.tiltAngle = 0; view.camera = camera;
Na końcu konstruktora stworzyliśmy obiekt o nazwie music, którego źródłem dźwięku jest strumień internetowej radiostacji, z kolei do jego obsługi posłużyliśmy się obiektem musicChannel. Po uruchomieniu odtwarzania odwołaliśmy się do metody onResize(), aby ustawić wszystkie elementy w odpowiedniej pozycji. music = new Sound(new URLRequest ('http://scfire-ntc-aa03.stream.aol.com:80/stream/1025' ));
484
Flash i ActionScript. Aplikacje 3D od podstaw musicChannel = music.play(); onResize();
W metodzie onKeyDown() zastosowaliśmy instrukcję warunkową switch, aby wychwycić zdarzenie wciśnięcia klawisza spacji. Wewnątrz bloku kodu tego przypadku zapisaliśmy kolejną instrukcję warunkową, tym razem if, w której sprawdzana jest wartość zmiennej musicOn. Jeżeli muzyka jest włączona, czyli wartość zmiennej musicOn jest równa true, to wywoływany zostaje kod zatrzymujący odtwarzanie, przypisujący właściwości musicOn wartość false, a zmiennym ang i mod wartość 0. musicChannel.stop(); musicOn = false; ang = mod = 0;
W przeciwnym razie, jeżeli dźwięk ma być na nowo odtwarzany, to znów uruchamiany zostaje musicChannel, właściwości musicOn przypisywana jest prawda, a zmiennej mod jej wartość początkowa 0.05. musicChannel = music.play(); musicOn = true; mod = .05;
Użytkownik, wciskając przycisk myszy, uruchamia metodę onMouseDown(), w której zapisywane są wszystkie potrzebne informacje do ustalenia nowej pozycji kamery. Z chwilą wciśnięcia przycisku zmienne lpa oraz lta przybierają wartości pobrane z właściwości panAngle oraz tiltAngle obiektu kamery. Wewnątrz metody onEnterFrame() są one traktowane jako ostatnio pobrane wartości, które posłużą do wyznaczenia nowych. Stąd też zastosowane w nazwach skróty można rozszerzyć jako lastPanAngle oraz lastTiltAngle. Analogicznie zapisujemy wartości pozycji kursora do zmiennych lmx oraz lmy, z kolei przypisanie właściwości move wartości true określa ingerencję użytkownika. lpa = camera.panAngle; lta = camera.tiltAngle; lmx = stage.mouseX; lmy = stage.mouseY; move = true;
W metodzie onMouseUp() przypisaliśmy zmiennej move wartość false, co oznacza, że użytkownik nie wykonuje już akcji przeciągania kamery do nowej pozycji. W kwestii dźwięku i ukształtowania kuli najważniejsze operacje zachodzą wewnątrz metody onEnterFrame(), w której poza odświeżaniem zawartości sceny zapisaliśmy również cały mechanizm zmiany ukształtowania powierzchni kuli. Na wstępie warto wspomnieć, że cały proces deformacji nie opiera się jedynie na wartościach poziomu głośności pobieranych z lewego i prawego kanału obiektu musicChannel. Gdyby tak było, to kula zmieniałaby swoją formę jedynie na zewnątrz, i to bez
Rozdział 10. Dźwięk
485
płynnych przejść. Aby uniknąć takiego zachowania, zastosowaliśmy metody klasy Math wyliczające sinusy oraz cosinusy danego kąta, co spowodowało falowe i płynne przejścia między ujemnymi a dodatnimi wartościami pozycji wierzchołków. Na początku metody onEnterFrame() zapisaliśmy przyrost wartości wcześniej zdefiniowanej zmiennej ang, z której wyliczane są wartości sinus. Zmienna ta potrzebna nam była w kolejnych dwóch linijkach, w których tworzone są dwa obiekty liczbowe: ampL i ampR. Ich wartości są jednymi ze składowych potrzebnych do wyliczenia nowych pozycji punktów Vertex wewnątrz kuli sph. Wzory zastosowane w ampL i ampR są przykładowe, jedno, o czym należy pamiętać, to aby ampL zawierał w swoich obliczeniach właściwość leftPeak, a ampR właściwość rightPeak. Dzięki temu będzie można uzyskać zróżnicowane zniekształcenia. ang += mod; var ampL:Number = Math.sin(ang) * musicChannel.leftPeak * 4; var ampR:Number = Math.cos(ang) * musicChannel.rightPeak * 4;
Dalej w metodzie onEnterFrame() dodaliśmy pętlę for, która wykonuje len iteracji, umożliwiając tym samym dotarcie do każdego z obiektów klasy Face zawartych wewnątrz kul sph i sphHelper. Jak wiemy, każdy z tych obiektów składa się z trzech punktów Vertex. Aby móc operować na każdym z nich, zapisaliśmy kolejną pętlę for, która tym razem wykonuje trzy powtórzenia. W bloku drugiej pętli zapisaliśmy cały schemat zmiany pozycji każdego z punktów, zaczynając od przypisania obiektowi v3d wartości początkowych pochodzących od kuli sphHelper. v3d.x = sphHelper.geometry.faces[i].vertices[j].x; v3d.y = sphHelper.geometry.faces[i].vertices[j].y; v3d.z = sphHelper.geometry.faces[i].vertices[j].z;
Nową pozycję obiektu v3d przypisaliśmy obiektowi _v3d i na nim wywołaliśmy metodę normalize(), która przekształciła go w wektor jednostkowy. _v3d.x = v3d.x; _v3d.y = v3d.y; _v3d.z = v3d.z; _v3d.normalize();
Wektory jednostkowe mają określony kierunek oraz zwrot, a ich długość jest zawsze równa 1. Stosowanie ich w obliczeniach eliminuje wpływ długości wektora na wynik działania, co w naszym przypadku pozwoliło uniknąć chaosu w przemieszczaniu wierzchołków.
W kolejnych trzech linijkach wykonaliśmy działania, które w naszym przypadku opierają się na tych samych wyliczeniach. Aktualne wartości właściwości pozycji wektora _v3d pomnożyliśmy przez wynik przykładowego wzoru: Math.sin( v3d.x * 0.5 ) * ampL * power
486
Flash i ActionScript. Aplikacje 3D od podstaw
Wzór ten składa się z sinusa wyliczonego dla połowy pozycji punktu na osi X, zmodyfikowanej wartości głośności lewego kanału strumienia dźwięku oraz mocy, z jaką pozycja wierzchołka ma być zmieniona. Po wykonaniu tych obliczeń ich wyniki posłużyły nam do zmiany wartości aktualnych właściwości x, y oraz z w obiekcie v3d, kończąc w ten sposób operacje modyfikacji powierzchni kuli względem głośności lewego kanału emitowanego dźwięku. v3d.x += _v3d.x; v3d.y += _v3d.y; v3d.z += _v3d.z;
Przy uwzględnieniu głośności prawego kanału w wizualizacji wykonaliśmy podobne kroki jak przy lewym kanale, zaczynając od przypisania wartości właściwości pozycji z obiektu v3d do _v3d. W następnym kroku, stosując metodę normalize(), zmieniliśmy na wektor jednostkowy obiekt _v3d, po czym zastosowaliśmy nowy wzór do zmiany jego pozycji z uwzględnieniem zmiennej ampR. Math.cos( v3d.y * 0.5 ) * ampR * power;
Wyniki tych obliczeń posłużyły do zmiany wartości właściwości pozycji obiektu v3d, a jego nowo ustawione właściwości x, y i z zastosowaliśmy w metodzie setValue(). Wywoływanie jej w drugiej pętli jest kluczem do zmiany wyglądu powierzchni bryły, ponieważ jej argumenty określają pozycję aktualnie przetwarzanego wierzchołka. Zamiast setValue() można było odwołać się bezpośrednio do właściwości pozycji każdego z punktów w tablicy vertices, ale wymagałoby to dodania kolejnych wierszy kodu. Zastosowanie setValue() zajęło nam jedną linijkę kodu: sph.geometry.faces[i].vertices[j].setValue(v3d.x, v3d.y, v3d.z);
W metodzie onEnterFrame() poza wyliczaniem pozycji wierzchołków kuli zapisaliśmy również instrukcję warunkową sprawdzającą, czy został wciśnięty przycisk myszki. Jeżeli wartość zmiennej move jest prawdą, to w zależności od pozycji kursora w oknie ekranu zmieniamy położenie i kąt nachylenia kamery. if (move) { camera.panAngle = (stage.mouseX - lmx) * .5 + lpa; camera.tiltAngle = (stage.mouseY - lmy) * .5 + lta; } camera.hover();
To tyle w kwestii modyfikowania siatki obiektu przy użyciu strumienia dźwięku. Sposobów na podobne kontrolowanie powierzchni brył jest wiele, wszystko zależy od potrzeb projektu i — jak wspomniałem wcześniej — wyobraźni programisty.
Rozdział 10. Dźwięk
487
Podsumowanie Obiekt klasy Sound3D tworzy niewidoczny, lecz słyszalny obiekt w przestrzeni trójwymiarowej, którego pozycję można zmieniać tak samo jak widzialne elementy. Ważniejsze operacje związane z dźwiękiem wykonywane są na obiektach klasy SimplePanVolumeDriver, w których stosowane są standardowe klasy języka ActionScript 3.0 służące do obsługi dźwięku. O głośności obiektu dźwiękowego decyduje dystans między jego pozycją a słuchaczem. Przeważnie jako słuchacza wykorzystuje się obiekt aktywnej kamery. Bez własnej ingerencji w kod klasy Sound3D zmiana głośności dźwięku występuje jedynie przy zmianie pozycji obiektu klasy Sound3D. Stosując standardowe klasy: Sound, SoundTransform, SoundChannel oraz SoundMixer, można ingerować w strukturę siatki obiektów 3D, ich kolory oraz wymiary. Dodatkowo można uruchamiać różne metody w rytm granych dźwięków. Sterowanie dźwiękiem daje dużo ciekawych możliwości do tworzenia interaktywnych aplikacji, takich jak gry.
488
Flash i ActionScript. Aplikacje 3D od podstaw
Rozdział 11. Tekst W zwykłych aplikacjach Flash istnieją dwa sposoby na dodanie i wyświetlanie tekstów. Pierwszy z nich, najbardziej podstawowy, polega na umieszczeniu napisu bezpośrednio na stole montażowym i przypisaniu mu odpowiednich ustawień w panelu Properties wybranego elementu. Drugi polega na stworzeniu odpowiednich obiektów TextField i TextFormat w kodzie ActionScript 3.0 i dodaniu ich do zasobów obiektu klasy Stage bądź innego kontenera. W przypadku wyświetlania tekstów w przestrzeni sceny Away3D nie ma takiego prostego wyboru. Wręcz istnieje kilka specjalnych warunków, które muszą zostać spełnione, aby oczekiwany napis pojawił się na ekranie. Najważniejsze jest dobre zaplanowanie, w jakich sytuacjach tekst będzie używany oraz w jakich ilościach umieszczony na scenie. Od tego zależy wybór jednego ze sposobów osadzenia napisu w przestrzeni Away3D; jest ich kilka i każdy wymaga zastosowania innych operacji. Czytając ten rozdział, dowiesz się właśnie: Jakimi sposobami i w jakich sytuacjach umieszczać tekst na scenie Away3D. Jak przygotować czcionkę do wyświetlania jej w przestrzeni. Do czego służy klasa VectorText. Jakich materiałów można użyć do pokrycia napisu. Jakimi technikami sprawić, aby napis był przestrzenny. Czym jest klasa PathAlignModifier i jak się nią posługiwać. Jak zdeformować napis.
490
Flash i ActionScript. Aplikacje 3D od podstaw
Przygotowanie czcionki Zmagania z tekstem zaczniemy od przygotowania czcionki do jednego ze sposobów prezentacji napisów na scenie. Biblioteka Away3D nie ma w swoich zasobach klas pozwalających na bezpośrednie stosowanie zainstalowanych czcionek, należy wcześniej odpowiednio je przygotować. W pierwszej kolejności należy stworzyć nowy dokument Flash, a w nim umieścić pole tekstowe, które pozwala na dynamiczne umieszczanie tekstu z poziomu języka ActionScript 3.0. Dodany obiekt trzeba nazwać, żeby móc się do niego odwoływać; w tym przypadku pole tekstowe nazwano awayText. Na rysunku 11.1 przedstawiono panel Properties, w którym wykonano ten krok. Rysunek 11.1.
Panel właściwości pola tekstowego w Adobe Flash CS5
W kolejnej sekcji panelu Properties należy wybrać wstępne ustawienia dla czcionki pola tekstowego. Powinno się zadeklarować jej rodzaj, styl, kolor i rozmiar, tak aby bez dodatkowych ustawień w kodzie móc uzyskać oczekiwany efekt. Rysunek 11.2 przedstawia wstępne ustawienia dla czcionki pola tekstowego awayText. Rysunek 11.2.
Panel właściwości czcionki w Adobe Flash CS5
Po wybraniu standardowego wyglądu napisu należy zadeklarować znaki, jakie może zawierać. Zwróć uwagę na zaznaczony przycisk Embed… Uruchamia on dodatkowe okno, w którym określa się nazwę dla utworzonej czcionki, a co ważniejsze, wybiera
Rozdział 11. Tekst
491
zestawy dozwolonych znaków. Na rysunku 11.3 przedstawiono ten panel z nowymi ustawieniami czcionki. Rysunek 11.3.
Panel osadzania czcionki w Adobe Flash CS5
Pierwsze pole od góry zawiera nową nazwę dla utworzonego schematu czcionki. Na potrzeby przykładów nazwę tę zmieniono na awayFont. W sekcji Character ranges zaznaczono dozwolone przedziały znakowe, udostępnione standardowo w programie Adobe Flash. W przypadku polskich znaków trzeba byłoby zaznaczyć kolejne zakresy wraz z nieinteresującymi nas znakami. Każdy dodatkowy zestaw powiększa objętość pliku swf, więc zamiast tego w polu Also include these characters dopisano polskie znaki małymi i wielkimi literami. Po wybraniu wszystkich potrzebnych ustawień należy kliknąć przycisk OK i wyeksportować dokument do pliku swf. Tak przygotowany plik z czcionką można zastosować do wyświetlenia napisu w przestrzeni Away3D. Zanim jednak na ekranie wyświetli się napis, trzeba pobrać zawartość pliku swf, stosując na przykład obiekt klasy URLLoader. W następującym kodzie źródłowym przedstawiono sposób pobierania przygotowanego pliku z czcionką. Zwróć uwagę na format, jaki ustawiono we właściwości dataFormat. loader = new URLLoader(); loader.dataFormat = URLLoaderDataFormat.BINARY; loader.addEventListener(Event.COMPLETE, onFontLoaded); loader.addEventListener(IOErrorEvent.IO_ERROR, onFontLoadError); loader.load(new URLRequest("font.swf"));
Pobraną zawartość pliku należy odczytać i wydobyć zawartą w nim czcionkę. Do tego celu służy specjalnie przygotowana klasa VectorText, umieszona w pakiecie
492
Flash i ActionScript. Aplikacje 3D od podstaw wumedia.vector.
Jak wskazuje lokalizacja, VectorText nie należy bezpośrednio do biblioteki Away3D, ale jest uwzględniony wraz z innymi dodatkowymi klasami jako integralna część całego silnika.
Klasa VectorText zawiera metodę extractFont(), w której właściwości podaje się zawartość pobranego pliku w postaci ByteArray. Dla przykładu: stosując metodę z wcześniejszego kodu źródłowego, można zastosować zapis loader.data, a całość powinna wyglądać następująco: VectorText.extractFont(loader.data);
Zadaniem metody extractFont() jest wyodrębnienie osadzonych czcionek z pobranej zawartości i dodanie ich do aktualnych zasobów.
Sposoby wyświetlania tekstu Jak wspomniano we wstępie tego rozdziału, Away3D oferuje kilka możliwości wyświetlania tekstu w przestrzeni trójwymiarowej. Różnice między nimi określają sposoby prezentacji oraz zróżnicowanie w zużywaniu zasobów procesora i pamięci. Dwie metody bazują tylko i wyłącznie na zasobach biblioteki Away3D, a pozostałe sięgają po standardowe klasy języka ActionScript 3.0. Wybór odpowiedniej opcji uzależniony jest od celów oraz warunków, w jakich wybrany tekst ma być wyświetlony. Poniżej przedstawiono wszystkie z nich, zaczynając od tych, które bazują jedynie na zasobach silnika Away3D.
Tekst płaski Biblioteka Away3D ma w swoich zasobach klasę o nazwie TextField3D, umieszczoną wraz z innymi klasami generującymi trójwymiarowe obiekty w pakiecie away3d.primitives. Ponieważ w długiej linii TextField3D wywodzi się z klasy Object3D, ma podstawowe właściwości oraz metody umożliwiające osadzenie jego obiektu w przestrzeni sceny Away3D. Do samego stworzenia tekstu niezbędna jest czcionka w postaci pliku swf, z której w pierwszej kolejności należy wydobyć ustawienia zawartego pola tekstowego, posługując się obiektem klasy VectorText. Gdy czcionka jest już przygotowana, można zająć się tworzeniem pola tekstowego. Wykonanie tej czynności należy zacząć od podania w pierwszym argumencie konstruktora nazwy wcześniej przygotowanej czcionki. Następnie, stosując właściwości klasy TextField3D, można określić rozmiar czcionki, sposób wyświetlania tekstu, wyrównanie oraz wymiary samego pola tekstowego.
Rozdział 11. Tekst
493
Klasa TextField3D sama w sobie generuje płaskie pole tekstowe bez jakichkolwiek dodatkowych ścian, tak jak to przedstawiono na rysunku 11.4. Rysunek 11.4.
Pole tekstowe w postaci obiektu TextField3D
Następujący kod źródłowy generuje przybliżony efekt do przedstawionego na rysunku 11.4. package { import import import import import import import import import import import import import
public class TextField3DExample extends Sprite { private var view:View3D; private var loader:URLLoader; private var all:ObjectContainer3D = new ObjectContainer3D(); public function TextField3DExample() { stage.quality = StageQuality.LOW; stage.align = StageAlign.TOP_LEFT; stage.scaleMode = StageScaleMode.NO_SCALE; addEventListener(Event.ENTER_FRAME, onEnterFrame); addEventListener(Event.RESIZE, onResize); view = new View3D(); addChild(view);
494
Flash i ActionScript. Aplikacje 3D od podstaw loader = new URLLoader(); loader.dataFormat = URLLoaderDataFormat.BINARY; loader.addEventListener(Event.COMPLETE, onFontLoaded); loader.load(new URLRequest("font.swf")); onResize(); } private function onFontLoaded(e:Event):void { VectorText.extractFont(loader.data); var textfield:TextField3D = new TextField3D("Arial", { size:100 } ); textfield.text = "Away3D Test"; textfield.bothsides = true; textfield.align = VectorText.CENTER; all.addChild(textfield); view.scene.addChild(all); } private function onEnterFrame(e:Event):void { all.rotationY--; view.render(); } private function onResize(e:Event = null):void { view.x = stage.stageWidth * .5; view.y = stage.stageHeight * .5; } } }
Najważniejszymi klasami, które zaimportowaliśmy w tym przykładzie, są Text Field3D oraz VectorText. Wygenerowany tekst umieściliśmy w kontenerze, dlatego musieliśmy dodać jeszcze klasę ObjectContainer3D. Powodem, dla którego zdecydowaliśmy się przedstawić obiekt w taki sposób, było umożliwienie wykorzystania tego przykładu w następnych podpunktach. W klasie TextField3DExample zdefiniowaliśmy trzy ogólnie dostępne obiekty. Pierwszy z nich to standardowo obiekt widoku View3D. Drugi to obiekt klasy URLLoader o nazwie loader, który odpowiada za pobranie pliku swf zawierającego czcionkę. Z kolei obiekt all jest przechowującym tekst kontenerem, do którego odwoływaliśmy się w metodzie onEnterFrame() w celu wykonania animacji obrotu. W konstruktorze klasy w pierwszej kolejności dodaliśmy standardowe ustawienia dla obiektu klasy Stage, dzięki którym bez względu na rozmiar okna scena widoku będzie zawsze na jego środku.
Rozdział 11. Tekst
495
W następnej kolejności stworzyliśmy i dodaliśmy widok view bez dodatkowych ustawień. Jedynie odwołując się do metody onResize(), umieściliśmy go na środku okna. view = new View3D(); addChild(view); onResize();
Aby pobrać plik z czcionką w postaci binarnej, skorzystaliśmy z obiektu klasy URLLoader oraz URLLoaderDataFormat. Dzięki temu będzie można odczytać programową zawartość pliku font.swf. Profilaktycznie operacje na pobranych danych wykonujemy po ich załadowaniu, dlatego zastosowaliśmy detektor zdarzenia Event.COMPLETE, który uruchamia metodę onFontLoaded() po zakończeniu pobierania. loader = new URLLoader(); loader.dataFormat = URLLoaderDataFormat.BINARY; loader.addEventListener(Event.COMPLETE, onFontLoaded); loader.load(new URLRequest("font.swf"));
Z pobranych danych w metodzie onFontLoaded() za pomocą klasy VectorText oraz jej metody extractFont() wyodrębniliśmy czcionkę i dodaliśmy ją do zawartości naszego przykładu. Następnie stworzyliśmy obiekt klasy TextField3D, w którym do wyświetlania tekstu użyliśmy czcionki Arial z przypisanym rozmiarem równym 100. VectorText.extractFont(loader.data); var textfield:TextField3D = new TextField3D("Arial", { size:100 } ); textfield.text = "Away3D";
Aby napis był widoczny z obu stron, właściwości bothsides przypisaliśmy wartość true. Z kolei jeśli przypiszemy nowe wyrównanie pola tekstowego VectorText.CENTER we właściwości align, napis będzie się obracał wokół swojego środka, a nie standardowo wokół lewego górnego rogu. textfield.bothsides = true; textfield.align = VectorText.CENTER;
Na końcu metody onFontLoaded() całość umieściliśmy w obiekcie all i umieściliśmy go na scenie. all.addChild(textfield); view.scene.addChild(all);
Wszystkie dostępne metody oraz właściwości klasy TextField3D zostały uwzględnione w tabelach 11.1 i 11.2.
Dodaje na powierzchni tekstu pole reagujące na zdarzenia ingerencji kursorem
Tekst przestrzenny Wiemy z rozdziału 7. „Praca z obiektami”, że w pakiecie away3d.extrusions znajdują się klasy służące do modyfikowania powierzchni obiektów. W tym samym pakiecie umieszczona jest również klasa TextExtrusion, która na wzór tekstu obiektu TextField3D tworzy ściany o określonej długości. Należy zwrócić tutaj uwagę na to, że TextExtrusion nie ma ścian tylnej oraz przedniej. Schowanie obiektów Text Field3D spowoduje wyświetlenie tekstu w formie, jaką pokazano na rysunku 11.5. Rysunek 11.5.
Obiekt klasy TextExtrusion
Jak pokazano, TextExtrusion tworzy jedynie ściany boczne, dlatego przeważnie łączy się obiekt tej klasy z TextField3D wewnątrz kontenera ObjectContainer3D, aby móc wykonywać działania jednocześnie na obu obiektach. TextExtrusion z własnych właściwości i metod ma jedynie konstruktor, ale ponieważ jest potomną klasy Mesh, można ustawić jej położenie oraz wygląd. Zastosowanie TextExtrusion zaczyna się od podania w pierwszym argumencie źródła tekstu, czyli
Rozdział 11. Tekst
497
obiektu TextField3D, a następnie szeregu właściwości definiujących wyświetlaną formę, położenie oraz zachowanie przy zajściu różnego rodzaju zdarzeń. Do zastosowania TextExtrusion posłużymy się poprzednim kodem źródłowym. W pierwszej kolejności dodaj klasę TextExtrusion, dopisując poniższą linijkę kodu między innymi zaimportowanymi klasami. import away3d.extrusions.TextExtrusion;
W następnej kolejności zmień zawartość metody onFontLoaded() na następującą: VectorText.extractFont(loader.data); var textfield:TextField3D = new TextField3D("Arial", { size:100 } ); textfield.text="Away3D"; textfield.bothsides=true; //textfield.visible=false; var textExtrude:TextExtrusion = new TextExtrusion(textfield, { depth:20, bothsides:true } ); all.addChild(textfield); all.addChild(textExtrude); all.movePivot(textfield.width * .5, textfield.objectHeight * .5, 0); view.scene.addChild(all);
Dopisaliśmy linijkę kodu tworzącą obiekt klasy TextExtrusion, który generuje widoczne z obu stron ściany na wzór obiektu klasy TextField3D. Następnie dodaliśmy textExtrude do kontenera o nazwie all.
Materiały dla tekstu W rozdziale 4. „Materiały” omówiliśmy różnego rodzaju pokrycia, które mogą być stosowane na trójwymiarowych obiektach. TextField3D i TextExtrusion, jako że pochodzą od klasy Object3D, również zalicza się do takich, ale są zarazem wyjątkami, w których nie można korzystać ze wszystkich materiałów dostępnych w bibliotece Away3D. Problem polega na tym, że TextField3D i TextExtrusion mają formę o nieregularnych kształtach, dlatego wszelkie materiały bazujące na współrzędnych UV nie będą z tekstem działały poprawnie. Można spróbować stosować materiały wypełniające kolorem i reagujące na światło, jednak odbicia nie zawsze będą reagowały w oczekiwany sposób. Jedynymi w pełni działającymi z tekstem materiałami są WireframeMaterial, WireColorMaterial oraz ColorMaterial. Na rysunku 11.6 przedstawiono efekt nałożenia różnego rodzaju materiałów na napisy „Away3D”.
498
Flash i ActionScript. Aplikacje 3D od podstaw
Rysunek 11.6.
Zastosowanie różnych materiałów na obiektach tekstowych
Tekst jako BitmapData Może się zdarzyć, że realizowany projekt w swoich założeniach wymaga wyświetlenia dużej liczby tekstów, na przykład nazw miejscowości. Ponieważ klasa TextField3D generuje złożony obiekt wektorowy, umieszczenie kilkudziesięciu obiektów tej klasy może spowodować spadek wydajności działania aplikacji. Aby tego uniknąć, można skorzystać z dwóch innych sposobów implementacji płaskiego tekstu przestrzeni. Pierwszy z nich opiera się na zasadzie generowania zwykłego pola tekstowego TextField i zamiany go na obiekt BitmapData. Spreparowany w ten sposób tekst można umieścić jako materiał na dowolnym obiekcie trójwymiarowym, takim jak Plane czy Cube. Oczywiście jakość wyświetlanego tekstu przy dużym przybliżeniu będzie znacznie gorsza niż w przypadku obiektu klasy TextField3D, ale zaoszczędzimy w ten sposób nieco zużywanych zasobów procesora. Rysunek 11.7 przedstawia zastosowanie tekstu w postaci obiektu BitmapData na powierzchni elementu Plane. Rysunek 11.7.
Obiekt Plane z polem tekstowym jako obiekt BitmapData
Rozdział 11. Tekst
499
Korzystanie z obiektów BitmapData ma wady, które są zauważalne przy projektowaniu zwykłych dwuwymiarowych aplikacji Flash. Każde wygenerowanie takiego obiektu, w szczególności niewłaściwe, może zajmować sporą część pamięci, tym samym powodując wzrost zużycia zasobów potrzebnych do przetworzenia obrazu. Może to nie być tak odczuwalne w porównaniu ze stosowaniem dużej liczby obiektów TextField3D, ale warto mieć to na uwadze i robić testy wytrzymałościowe aplikacji.
Tekst w obiekcie MovieClip Inny sposób przedstawienia płaskiego tekstu w przestrzeni trójwymiarowej polega na zastosowaniu obiektu klasy MovieClip bądź Sprite. Jeżeli projekt wymaga użycia większej liczby tekstów, które muszą się dobrze prezentować w przybliżonych ujęciach, można stworzyć pole tekstowe TextField, umieścić je w obiekcie Sprite lub MovieClip i traktować jako materiał pokrywający. Idąc dalej tym tropem — korzystając z materiału MovieMaterial, można pokryć powierzchnię dowolnego obiektu 3D i umieścić go w przestrzeni. Wybrany napis powinien być zawsze skierowany w stronę kamery, element Sprite zawierający tekst, można umieścić na scenie poprzez jeden z obiektów z pakietu away3d.sprites. Raz jeszcze wybór najlepszej opcji zależy od wymagań aplikacji oraz przetestowania dostępnych możliwości. Na rysunku 11.8 przedstawiono obiekt Sprite3D z tekstem osadzonym w polu tekstowym TextField wewnątrz elementu Sprite. Rysunek 11.8.
Obiekt Sprite3D z polem tekstowym klasy TextField
Deformowanie tekstu Biblioteka Away3D umożliwia ciekawe wykorzystanie klas generujących ścieżki w połączeniu z tekstem. Istnieje bowiem możliwość deformowania i przemieszczania napisu wzdłuż stworzonych linii prostych bądź krzywych. Do stworzenia
500
Flash i ActionScript. Aplikacje 3D od podstaw
tego efektu poza klasami tekstu niezbędne są Path, PathCommand oraz PathAlignModifier. Dwie pierwsze poznaliśmy już w rozdziale 7. „Praca z obiektami”, z kolei PathAlignModifier krótko przedstawimy tym punkcie. Zadaniem klasy PathAlignModifier jest zmodyfikowanie powierzchni oraz pozycji wybranego obiektu względem przypisanej ścieżki. Aby uzyskać taki efekt, należy wykonać dwie czynności. Po pierwsze, trzeba stworzyć obiekt klasy PathAlignModifier i umieścić we właściwościach jego konstruktora odwołania do obiektu i ścieżki. Po drugie, na utworzonym obiekcie należy wywołać metodę execute() w celu dokonania zmian. Korzystając z kodu źródłowego punktu „Tekst płaski” z poprzedniego podrozdziału, stworzymy prostą symulację obracającego się wokół powierzchni kuli napisu „Away3D przedstawia”. Całość będzie wyglądała tak, jak to przedstawiono na rysunku 11.9. Rysunek 11.9.
Obiekt TextField3D obracający się wokół powierzchni kuli
Aby osiągnąć ten cel, w pierwszej kolejności należy dodać następujące klasy: import import import import import import
Klasy Path oraz PathAlignModifier posłużą do stworzenia ścieżki i dostosowania do niej powierzchni tekstu. Ponieważ konstruktor klasy PathAlignModifier w pierwszej właściwości przyjmuje jako wartość obiekty klasy Mesh, w naszym przypadku musimy również ją uwzględnić. Kolejne klasy: Cast i Sphere, a także materiały będą potrzebne do stworzenia obiektu kuli i pokrycia jej teksturą earthMap, umieszczoną w zasobach pliku fla. W klasie TextField3DExample należy również zdefiniować obiekt klasy Sphere, ogólnie dostępny wewnątrz całego ciała klasy. Nazwiemy go earth, co będzie wskazywało na jego rolę. private var earth:Sphere;
Natomiast wewnątrz konstruktora stworzymy wspomniany obiekt i nadamy mu odpowiedni rozmiar, liczbę segmentów oraz teksturę pobraną z zasobów projektu, posługując się klasą Cast. Dodatkowo aby uniknąć przekłamań między siatką kuli a napisu, właściwości pushback przypiszemy wartość true. earth = new Sphere( { material:new BitmapMaterial(Cast.bitmap('earthMap')), radius:256, segmentsH:16, segmentsW:16, pushback:true } ); view.scene.addChild(earth);
Ponieważ klasy Path i PathAlignModifier nie działają prawidłowo z obiektem klasy TextExtrusion, wewnątrz metody onFontLoaded() musimy ukryć obiekt textExtrude. Można to wykonać, przypisując właściwości visible tego obiektu wartość false, bądź umieścić w komentarzu linijkę dodającą textExtrude do kontenera all. Na końcu onFontLoaded() odwołamy się do nowej metody o nazwie wrapText(), w której umieścimy cały proces zniekształcania tekstu. W pierwszej kolejności wewnątrz metody wrapText()stworzymy tablicę pathVectors, która będzie zawierała współrzędne punktów ścieżki służącej do deformacji obiektu tekstu. var pathVectors:Array = [ new Vector3D(0, 0, -300), new Vector3D(225, 0, -225), new Vector3D(300, 0, 0), new Vector3D(300, 0, 0), new Vector3D(225, 0, 225), new Vector3D(0, 0, 300), new Vector3D(0, 0, 300), new Vector3D(-225, 0, 255), new Vector3D(-300, 0, 0), new Vector3D(-300, 0, 0), new Vector3D(-225, 0, -225), new Vector3D(0, 0, -300) ];
502
Flash i ActionScript. Aplikacje 3D od podstaw
Ustalone współrzędne będą tworzyły orbitę wokół kuli ziemskiej. Kolejność podanych punktów ma istotne znaczenie w ustaleniu kierunku wykrzywienia obiektu.
W następnej kolejności stworzymy obiekt ścieżki o nazwie path, podając w jej konstruktorze wcześniej utworzoną i wypełnioną współrzędnymi tablicę pathVectors. var path:Path = new Path(pathVectors);
Na końcu metody wrapText() stworzymy obiekt klasy PathAlignModifier, odwołując się do stworzonej ścieżki i napisu. Ponieważ w naszym przypadku jedynie TextField3D działa poprawnie z tą klasą, do obiektu textfield umieszczonego wewnątrz kontenera musimy się odwołać, stosując właściwość children z odpowiednim indeksem. Aby uniknąć błędu wymuszenia innej wartości niż oczekiwana, zastosujmy zapis traktujący tekst jako obiekt klasy Mesh. var pathAlign:PathAlignModifier = new PathAlignModifier(all.children[0] as Mesh, path);
Po utworzeniu obiektu pathAlign skorzystamy z jego metody execute() do wywołania zmian. pathAlign.execute();
W metodzie onFontLoaded() należy zmienić tekst zawarty w obiekcie textfield na „Away3D przedstawia”, a następnie na końcu tej metody wywołać wcześniej opisaną wrapText(). Aby wprawić obiekt earth w ruch przeciwny do animacji napisu „Away3D przedstawia”, w metodzie onEnterFrame() przed wywołaniem na widoku metody render() należy dodać następującą linijkę kodu: earth.rotationY++;
Na koniec tego podrozdziału umieszczono tabele 11.3 oraz 11.4, które zawierają spis właściwości oraz metod klasy PathAlignModifier. Tabela 11.3. Właściwości klasy PathAlignModifier
Nazwa
Rodzaj
Wartość
Opis
arcLengthPrecision
Number
0.01
Określa dokładność generowanych zniekształceń względem krzywych. Im wartość bliższa zera, tym dokładniejsze są zniekształcenia
fast
Boolean
false
Określa szybsze i mniej dokładne generowanie zniekształceń
Rozdział 11. Tekst
503
Tabela 11.3. Właściwości klasy PathAlignModifier (ciąg dalszy)
Nazwa
Rodzaj
Wartość
Opis
offset
Vector3D
Vector3D(0, 0, 0) Określa wektor przesunięcia siatki
obiektu przed wykonaniem zmian pathLength
Number
restrain
Boolean
Zwraca długość używanej ścieżki false
Określa, czy wyrównanie na osi Y ma być zwrócone względem jednego kierunku
Podsumowanie Czcionki do użytku na trójwymiarowych napisach należy przygotować w osobnym pliku swf. Przygotowany plik swf należy pobrać, stosując na przykład obiekt klasy URLLoader z ustawieniami odczytującymi wartości binarne. Z pobranych wartości binarnych pliku swf klasą VectorText wyodrębnia się zapisane czcionki. Do generowania tekstów płaskich służy klasa TextField3D. Do generowania tekstów przestrzennych służy klasa TextExtrusion. Obiekt klasy TextExtrusion nie ma ściany tylnej oraz przedniej, dlatego do stworzenia zamkniętej powierzchni tekstu powinno się umieszczać obiekty TextField3D i TextExtrusion w obiekcie ObjectContainer3D. Jedynymi w pełni działającymi z tekstem materiałami są WireframeMaterial, WireColorMaterial oraz ColorMaterial. Światło i wszelkie materiały bazujące na współrzędnych UV nie działają poprawnie z obiektami klas TextField3D i TextExtrusion, ponieważ są one nieregularnych kształtów.
504
Flash i ActionScript. Aplikacje 3D od podstaw
Jedynymi materiałami w pełni działającymi z obiektami klas TextField3D i TextExtrusion są WireframeMaterial, WireColorMaterial oraz ColorMaterial. W przypadku umieszczenia dużej liczby tekstów na scenie lepiej korzystać z obiektów BitmapData lub MovieClip osadzonych na powierzchni obiektu typu Plane, niż stosować obiekt TextField3D. Poza TextField3D tekst można osadzić w postaci obiektu BitmapData jako źródło tekstury BitmapMaterial. Interaktywny bądź statyczny napis można umieścić w obiekcie Sprite i traktować jako źródło dla materiału MovieMaterial bądź obiektów klas potomnych od Sprite3D. Klasa PathAlignModifier służy do tworzenia zniekształceń dla obiektów trójwymiarowych. Kierunki oraz formę zniekształceń określają punkty Vector3D umieszczone jako tablica w obiekcie Path. Efektu deformacji nie uzyskamy na obiekcie TextExtrusion.
Rozdział 12. Optymalizacja Na koniec pozostało omówienie kilku istotnych kwestii, które pomogą Ci w zaprojektowaniu lepszej i bardziej stabilnej aplikacji. Nie bez powodu omówione w tym rozdziale sposoby były pomijane w poprzednich. Celem tej książki było poprowadzenie Cię przez różne działy omawiające możliwości, jakie daje biblioteka Away3D. Po poznaniu sposobów zwiększania wydajności będziesz mógł rozwinąć poprzednie przykłady, by ćwiczyć i doskonalić swoje umiejętności. W tym rozdziale wskazówki podzielono na kilka podrozdziałów, niektóre z nich zawierają nowe definicje, inne natomiast są spisem uwag. Czytając ten rozdział, dowiesz się: Jakimi sposobami można kontrolować wyświetlanie sceny w widoku. W jakich sytuacjach stosować poszczególne rodzaje przycinania widoku. Jak działają i do czego służą filtry ZDepthFilter oraz MaxPolyFilter. Jak kontrolować promień widocznych obiektów. Jak wykluczać obiekty z procesu odświeżania. Co kryje się pod nazwą LOD. Do czego służy narzędzie Weld. Jak optymalizować użycie tekstur i światła. Jakich praktyk unikać, a jakie stosować.
506
Flash i ActionScript. Aplikacje 3D od podstaw
Statystyki aplikacji Ważne jest, aby każdą aplikację, którą tworzymy, stale kontrolować pod względem wydajności. Takie podejście pozwoli uniknąć ewentualnych drastycznych zmian, gdy dojdziemy do punktu, w którym stwierdzimy, że kod źródłowy nie przechodzi testów wytrzymałościowych w najbardziej stresowych sytuacjach dla programu. W przypadku używania biblioteki silnika 3D dobrym przyzwyczajeniem jest kontrolowanie zużywanych zasobów pamięci, procesora, prędkości wyświetlanych klatek oraz liczby obiektów umieszczonych na scenie. W celu monitorowania tych właściwości można skorzystać z kilku różnych sposobów. My omówimy trzy z nich.
Away3D Project stats Biblioteka Away3D w swoich zasobach ma dwie klasy wyświetlające informacje o aktualnym stanie aplikacji. Pierwsza z nich nosi nazwę Stats i jest zlokalizowana w pakiecie away3d.core.stats. Standardowo z utworzeniem widoku generowany jest również obiekt tej klasy, do którego można się odwołać przez właściwość statsPanel. Stosując go i wywołując metodę displayStats(), można uruchomić okno statystyk. Wcześniej należy jednak metodą addObject() uwzględnić obiekty, które mają brać udział w testach. Innym, łatwiejszym sposobem na uruchomienie tego panelu jest kliknięcie prawym przyciskiem myszki w dowolnym miejscu sceny i wybranie opcji Away3D Project stats. Na rysunku 12.1 pokazano otwarte menu kontekstowe zawierające wspomnianą opcję. Rysunek 12.1.
Menu kontekstowe aplikacji Flash
Po uruchomieniu zaznaczonej opcji na ekranie pojawi się panel z podstawowymi informacjami, co pokazano na rysunku 12.2.
Rozdział 12. Optymalizacja
507
Rysunek 12.2.
Panel statystyk Away3D Project stats
Przedstawione okno zawiera następujące informacje: FPS — aktualna liczba wyświetlanych klatek na sekundę. AFPS — średnia liczba wyświetlanych klatek na sekundę. Max — maksymalna liczba wyświetlanych klatek na sekundę. MS — czas wyrenderowania ostatniej klatki, określony w milisekundach. SWF FR — ustawiona dla aplikacji maksymalna wartość FPS. RAM — zużycie pamięci przez aplikację. MESHES — liczba wyświetlanych obiektów. T ELEMENTS — łączna liczba wielokątów formujących trójwymiarowe obiekty. R ELEMENTS — liczba aktualnie wyświetlanych wielokątów. Dodatkowo na rysunku 12.3 przedstawiono dwie zakładki panelu Away3D Project stats, które informują o ustawieniach i pozycji kamery oraz dodanych do sceny trójwymiarowych obiektach. Rysunek 12.3.
Zakładki panelu statystyk Away3D Project stats
508
Flash i ActionScript. Aplikacje 3D od podstaw
AwayStats Klasa AwayStats zlokalizowana jest w pakiecie away3d.debug, a jej obiekt generuje panel zawierający informacje o aktualnym stanie aplikacji i zużywanych przez nią zasobach. Dzięki temu panelowi jesteśmy w stanie sprawdzić aktualną ilość FPS w stosunku do maksymalnej ustalonej w projekcie aplikacji. Poza tym w formie grafu oraz liczbowo informuje o aktualnym stanie zużywanej pamięci i jej maksymalnym wskaźniku. Obiekt klasy AwayStats może być wyświetlony w dwóch formach, które pokazano na rysunku 12.4. Rysunek 12.4.
Panel AwayStats w dwóch odsłonach
Z lewej strony rysunku 12.4 przedstawiono panel w postaci standardowej, z kolei po prawej w zminimalizowanej. Przejście między trybami można regulować, klikając na przycisk w prawym górnym rogu lub ustawiając odpowiednią wartość właściwości w konstruktorze. Aby móc stosować ten panel, należy zaimportować do projektu klasę AwayStats, stosując zapis: import away3d.debug.AwayStats;
W wybranym miejscu, na przykład w konstruktorze głównej klasy projektu, należy utworzyć obiekt panelu i w pierwszej właściwości podać odwołanie do widoku Away3D. Dodatkowo w kolejnych argumentach konstruktora można określić podstawowe ustawienia wyświetlania i wartości do wykonywania obliczeń. Po zdefiniowaniu wszystkich potrzebnych właściwości utworzony obiekt trzeba dodać do stołu montażowego aplikacji. Na przykład tak, jak to pokazano w następującym kodzie źródłowym: var stats: AwayStats = new AwayStats(view, true); addChild(stats);
W tabelach 12.1 i 12.2 wypisano podstawowe metody klasy AwayStats i argumenty jej konstruktora.
Metoda dodaje do listy widoków obiekt klasy View3D, aby ten był brany pod uwagę przy wykonywaniu obliczeń, między innymi wszystkich wyświetlanych wielokątów
unregisterView(view3d:View3D):void
Metoda usuwa wskazany obiekt klasy View3D z listy widoków, z których pobierane są dane do wykonywania obliczeń statystycznych
Tabela 12.2. Argumenty konstruktora AwayStats
Nazwa
Rodzaj
Wartość domyślna
Opis
view3d
View3D
minimized
Boolean
false
Określa, czy panel ma być w postaci zminimalizowanego okna
transparent
Boolean
false
Określa, czy panel ma być przezroczysty
meanDataLength
uint
0
Liczba klatek, na podstawie których obliczana jest średnia prędkość. Domyślna wartość oznacza użycie wszystkich klatek
enableClickToReset
Boolean
true
Określa, czy dane będą resetowane po kliknięciu myszką w panel
enableModifyFrameRate Boolean
true
Określa, czy kliknięcie na grafie będzie modyfikowało aktualną wartość ilości FPS
Odwołanie do widoku Away3D
Hi-ReS-Stats Na koniec tego podrozdziału pokażemy inną zewnętrzną bibliotekę do wyświetlania statystyk włączonej aplikacji. Stworzona przez programistów Mr.doob i Theo jest darmową klasą, którą można pobrać ze strony: https://github.com/mrdoob/ Hi-ReS-Stats. Obiekt tej klasy generuje w lewym górnym rogu okna mały prostokąt z informacjami o uruchomionej aplikacji. W postaci tekstowej i grafu przedstawia aktualną wartość FPS, czasu potrzebnego do wyświetlenia klatki, aktualny oraz maksymalny stan zużycia pamięci. Wygląd tego niewielkiego panelu przedstawiono na rysunku 12.5.
510
Flash i ActionScript. Aplikacje 3D od podstaw
Rysunek 12.5.
Panel Hi-ReS-Stats
Aby móc korzystać z tej klasy, pobraną bibliotekę umieść w katalogu, gdzie znajdują się inne biblioteki używane w aplikacji. Następnie zaimportuj plik Stats.as, dodając poniższą linijkę kodu do Twojego programu: import net.hires.debug.Stats;
W kolejnym kroku zdefiniuj obiekt tej klasy i dodaj go bezpośrednio do zawartości stołu montażowego, na przykład tak: stats:Stats = new Stats(); addChild(stats);
Wyświetlanie zawartości W pierwszej kolejności przyjrzymy się technikom oraz nowym terminom, które pomogą Ci w dobraniu odpowiednich ustawień do wyświetlania zawartości sceny. Musisz wiedzieć, że biblioteka Away3D udostępnia wiele możliwości optymalizacji procesu renderowania widoku, lecz nie każda w połączeniu z inną da oczekiwany efekt. Dobranie odpowiednich ustawień często będzie wymagało wykonania kilku testów, ale jeśli poznasz umieszczone w tym podrozdziale informacje, pomogą Ci skrócić czas potrzebny na dostosowanie właściwości widoku i sceny.
Sposoby przycinania widoku Biblioteka Away3D ma w swoich zasobach kilka klas przycinających widok. Zanim je omówimy, ustalimy, na czym w ogóle to zjawisko polega. Jak wiesz z poprzednich rozdziałów, widok jest płaszczyzną, która w dwuwymiarowy sposób przedstawia zawartość sceny. W tym celu korzysta z klas umieszczonych w pakiecie away3d.core.clip, które określają sposób wyświetlania obiektów znajdujących się najbliżej krawędzi rzutni bądź częściowo poza nią.
Rozdział 12. Optymalizacja
511
Każdą z klas omówimy w poniższych punktach. Zaczniemy od najbardziej podstawowej, jednak zanim to nastąpi, przepisz poniższy kod źródłowy będący podstawą do wykonywania porównań i wyciągania wniosków. package { import import import import import import import import import
public class ClippingExample extends Sprite { private var view:View3D; private var fpp:FPP; public function ClippingExample() { stage.quality = StageQuality.LOW; stage.align = StageAlign.TOP_LEFT; stage.scaleMode = StageScaleMode.NO_SCALE; addEventListener(Event.ENTER_FRAME, onEnterFrame); stage.addEventListener(Event.RESIZE, onResize); view = new View3D(); view.camera.z = 0; addChild(view); fpp = new FPP(stage, { freeCamera:true,height:0 }); var plane:Plane = new Plane( { width:512, height:512, depth:512, segmentsW:10, segmentsH:10, material:new WireColorMaterial(0xFF0000, { wireColor:0x000000 } ) }); view.scene.addChild(plane); onResize(); } private function onEnterFrame(e:Event):void {
512
Flash i ActionScript. Aplikacje 3D od podstaw fpp.updateCamera(); view.render(); } private function onResize(e:Event = null):void { view.x = stage.stageWidth * .5; view.y = stage.stageHeight * .5; } } }
Przedstawiony kod źródłowy generuje płaszczyznę o ustalonych wymiarach, której przypisaliśmy większą liczbę segmentów oraz materiał wyświetlający linie siatki. Dzięki temu różnice w działaniu stosowanych klas przycinających będą lepiej widoczne.
Clipping Obiekt klasy Clipping mimo swojej nazwy jest klasą, która nie przycina elementów wychodzących poza zakres widoku, tylko je usuwa. W swoich standardowych ustawieniach nie wykonuje ona praktycznych modyfikacji poprawiających działanie aplikacji. Klasa Clipping traktowana jest bardziej jako klasa bazowa dla kolejnych umieszczonych w pakiecie. W tabelach 12.3 i 12.4 wypisano właściwości oraz metody klasy Clipping. Tabela 12.3. Właściwości klasy Clipping
Nazwa
Rodzaj
Wartość domyślna Opis
maxX
Number
Infinity
Maksymalna wartość wyświetlania na osi X
maxY
Number
Infinity
Maksymalna wartość wyświetlania na osi Y
maxZ
Number
Infinity
Maksymalna wartość wyświetlania na osi Z
minX
Number
-Infinity
Minimalna wartość wyświetlania na osi X
minY
Number
-Infinity
Minimalna wartość wyświetlania na osi Y
minZ
Number
-Infinity
Minimalna wartość wyświetlania na osi Z
objectCulling
Boolean
false
Określa, czy ma być stosowane wykluczanie z procesu renderowania obiektów, które znajdują się poza powierzchnią rzutni
view
View3D
Obiekt widoku
Rozdział 12. Optymalizacja
513
Tabela 12.4. Metody klasy Clipping
Nazwa
Opis
Clipping(init:Object = null)
Konstruktor
addOnClippingUpdate (listener:Function):void
Metoda dodająca detektor zdarzenia clippingUpdated
Metoda zwraca wartość typu Boolean, która określa, czy powierzchnia o ustalonych właściwościach przycina jakikolwiek obiekt
removeOnClippingUpdate (listener:Function):void
Metoda usuwa detektor dla zdarzenia clippingUpdated
removeOnScreenUpdate (listener:Function):void
Metoda usuwa detektor dla zdarzenia screenUpdated
RectangleClipping Standardowym, tworzonym wraz z widokiem obiektem kontrolującym przycinanie widoku jest obiekt klasy RectangleClipping, która w niewielkim stopniu modyfikuje działanie klasy macierzystej. W przypadku RectangleClipping metoda check Primitive() zwraca odpowiednią wartość dla sprawdzanego obiektu, stosując instrukcje warunkowe i właściwości granic wyświetlania sceny. Poza tym wszelkie wierzchołki obiektu znajdujące się poza ustalonym obszarem nie podlegają odświeżeniu, co może powodować znikanie poszczególnych kawałków prezentowanego obiektu. Klasa RectangleClipping poza konstruktorem nie ma własnych nienadpisywanych metod, a właściwości ma jedynie dziedziczone po klasie Clipping. Dlatego w tym punkcie nie zostały umieszczone tabele z informacjami o właściwościach i metodach tej klasy. Są one wypisane w tabelach 12.3 i 12.4. W przykładach umieszczonych w tej książce przeważnie korzystaliśmy z obiektu klasy RectangleClipping. Mimo to warto pokazać efekt jego działania. Zwróć uwagę na brakujący fragment podłogi przedstawionej na rysunku 12.6. Ponieważ obiekt klasy RectangleClipping nie ma metod wypełniających artefakty, pola znajdujące się blisko krawędzi widoku nie są wyświetlane.
514
Flash i ActionScript. Aplikacje 3D od podstaw
Rysunek 12.6.
Działanie obiektu klasy RectangleClipping
NearfieldClipping Klasa NearfieldClipping jest kolejną klasą stosowaną do przycinania wyświetlanych obiektów. W przeciwieństwie do przedstawionych wcześniej klas NearfieldClipping ma dodatkowe algorytmy, które wypełniają luki powstałe na skutek zbliżenia się obiektu do krawędzi widoku. Łatanie powstałych artefaktów polega na dzieleniu pustej powierzchni na mniejsze fragmenty, aktualizowaniu ich współrzędnych i uzupełnianiu odpowiednim materiałem. Efekt zastosowania tej klasy przedstawiono na rysunku 12.7. Zwróć uwagę na dodatkową linię wyświetloną w lewym dolnym rogu okna. Dzięki niej fragment podłogi nie znika jak na rysunku 12.6. Klasa NearfieldClipping — tak samo jak RectangleClipping — poza konstruktorem nie ma własnych metod i właściwości.
FrustumClipping Ostatnią klasą odpowiedzialną za przycinanie obiektów wychodzących poza zakres wyświetlanego obszaru jest klasa FrustumClipping. Na pierwszy rzut oka, bez zastosowania materiału typu WireColorMaterial, używanie FrustumClipping niczym się nie różni od NearfieldClipping. To tylko pozory ponieważ — w przeciwieństwie do
Rozdział 12. Optymalizacja
515
Rysunek 12.7.
Działanie obiektu klasy NearfieldClipping
NearfieldClipping
— działa na wszystkich obiektach stykających się z krawędziami widoku. Gdy używamy materiału z zaznaczonymi liniami siatki, od razu widać zwiększoną liczbę dodatkowych linii dzielących segmenty powierzchni obiektu. Porównaj rysunek 12.7 z rysunkiem 12.8. Przedstawiają one ten sam obiekt z niewielką różnicą kąta nachylenia kamery. Zwróć uwagę na liczbę linii siatki płaszczyzny.
Rysunek 12.8.
Działanie obiektu klasy FrustumClipping
516
Flash i ActionScript. Aplikacje 3D od podstaw
Stosowanie filtrów Jednym ze sposobów przyspieszenia działania aplikacji w trójwymiarowych przestrzeniach jest stosowanie odpowiednich filtrów. W bibliotece Away3D uwzględniono kilka mniej lub bardziej widowiskowych filtrów umożliwiających kontrolę wyświetlania obiektów w zależności od ich odległości od obserwatora, czyli kamery. W tym podrozdziale poznamy dwa takie filtry oraz jeden, który całkowicie ogranicza liczbę wyświetlanych obiektów na scenie. Zanim jednak zaczniemy ich omawianie, przepisz poniższy kod źródłowy, który będziemy stopniowo uzupełniali. package { import import import import import import import import import import import import
public class FiltersExample extends Sprite { private var view:View3D; private var sphs:Array = []; public function FiltersExample() { stage.quality = StageQuality.LOW; stage.align = StageAlign.TOP_LEFT; stage.scaleMode = StageScaleMode.NO_SCALE; addEventListener(Event.ENTER_FRAME, onEnterFrame); stage.addEventListener(Event.RESIZE, onResize); view = new View3D(); addChild(view); initFilter(); fillScene(); onResize(); } private function initFilter():void { } private function fillScene():void {
Rozdział 12. Optymalizacja
517
for (var i:Number = 0; i < 30; i++) { var sph:Sphere = new Sphere( { radius:50, segmentsW:16, segmentsH:16} ); sph.x = -stage.stageWidth * .5 + (Math.random() * stage.stageWidth); sph.y = -stage.stageHeight * .5 + (Math.random() * stage.stageHeight); sph.z = -(Math.random() * 8000); view.scene.addChild(sph); sphs.push(sph); } } private function onEnterFrame(e:Event):void { for each (var sph:Sphere in sphs) { sph.z += 60; if (sph.z > 5000) sph.z = -(Math.random() * 8000); } view.render(); } private function onResize(e:Event = null):void { view.x = stage.stageWidth * .5; view.y = stage.stageHeight * .5; } } }
W efekcie skompilowania i uruchomienia tego kodu na ekranie zobaczymy obiekty kul ułożone w czterech kolumnach.
FogFilter FogFilter to taki filtr, który poza praktycznymi właściwościami może nadać ciekawy
charakter programowi. Jak pierwszy człon nazwy wskazuje, zadaniem tego filtra jest nałożenie efektu mgły na widoczną część sceny. Taka mgła nie pokrywa całej przestrzeni, tylko określony granicami obszar. Taki efekt uzyskujemy, ustawiając przodem do kamery określoną liczbę oddalonych od siebie prostokątnych płaszczyzn. Wypełnione ustalonym kolorem przybierają większe wartości właściwości alpha wraz ze wzrostem odległości od kamery. Zastosowanie tego efektu ma również praktyczny aspekt — otóż elementy znajdujące się poza dalszą granicą mgły nie są wyświetlane, co owocuje zmniejszeniem liczby potrzebnych procesów obliczeniowych.
518
Flash i ActionScript. Aplikacje 3D od podstaw
Aby uruchomić ten filtr, wpisz w metodzie initFilter() następujący kod: var fog:FogFilter = new FogFilter( { minZ:1000, maxZ:3000, subdivisions:20, material:new ColorMaterial(0xFFFFFF) }); view.renderer = new BasicRenderer(fog);
Każda z użytych właściwości w konstruktorze klasy FogFilter spełnia konkretną funcję. W powyższym kodzie zastosowanie minZ oraz maxZ określa granice działania mgły, subdivisions liczbę płaszczyzn, z których się składa, a material definiuje jej pokrycie. Po ustaleniu wyglądu mgły należy ją dodać do obiektu renderera, w tym przypadku jest to BasicRenderer. W ostatnim kroku, stosując właściwość renderer widoku Away3D, należy przypisać stworzony obiekt renderera. Aby uzyskać efekt przedstawiony na rysunku 12.9, w konstruktorze klasy do tego podrozdziału wpisz kod omówionego sposobu implementacji. Rysunek 12.9.
Efekt użycia filtra FogFilter
W tabelach 12.5 i 12.6 wypisano właściwości oraz metody klasy FogFilter.
Rozdział 12. Optymalizacja
519
Tabela 12.5. Właściwości klasy FogFilter
Nazwa
Rodzaj
Wartość domyślna
Opis
material
ColorMaterial
materials
Array
maxZ
Number
5000
Określa maksymalną odległość mgły na osi Z
minZ
Number
1000
Określa początek mgły na osi Z
subdivisions
Number
20
Określa liczbę warstw użytych wewnątrz mgły
Określa kolor mgły w postaci materiału ColorMaterial
Określa tablicę materiałów, nadpisując tym samym wartość właściwości material i subdivisions
Tabela 12.6. Metody klasy FogFilter
Nazwa
Opis
FogFilter(init:Object = null)
Konstruktor
filter(renderer:Renderer):void
Uruchamia filtr
updateMaterialColor(color:uint):void
Zmienia kolor mgły w trakcie jej wyświetlania
ZDepthFilter Filtr ZDepthFilter działa podobnie jak wcześniej przedstawiony FogFilter, ale ten nie generuje efektu mgły. Celem tej klasy jest ograniczenie widoczności do określonej w argumencie konstruktora odległości od kamery. Właściwość, która określa tę długość, to maxZ. Na tej odległości znajduje się jakby niewidzialna ściana, która zakrywa fragmenty obiektów wychodzących poza ustalony zakres. Implementacja tego filtra jest bardzo prosta, wystarczy stworzyć obiekt klasy i podać jedną wartość określającą dystans. W kolejnym kroku należy umieścić stworzony filtr w argumencie konstruktora obiektu renderera i przypisać go do widoku. Aby uruchomić filtr ZDepthFilter w przykładzie, należy zamienić kod zawarty w metodzie initFilter() na następujący: ZDepthFilter
var zdepth:ZDepthFilter = new ZDepthFilter(1000); view = new View3D(); view.renderer = new BasicRenderer(zdepth);
Po skompilowaniu i uruchomieniu kodu uzyskasz efekt, który przedstawiono na rysunku 12.10.
520
Flash i ActionScript. Aplikacje 3D od podstaw
Rysunek 12.10.
Efekt użycia filtra ZDepthFilter
MaxPolyFilter Ostatnim omawianym w tej książce filtrem jest MaxPolyFilter. Jego działanie również powoduje ograniczenie w wyświetlaniu elementów, ale opiera się ono na nieco innych zasadach. W przeciwieństwie do pozostałych filtrów ten nie ogranicza się do ustalonego dystansu, tylko do maksymalnej liczby wyświetlanych wielokątów obiektów umieszczonych na scenie. Nie oznacza to jednak, że wraz z uruchomieniem aplikacji odgórnie ustalane jest, które wielokąty są wyświetlane, a które nie. Wybór uzależniony jest od pozycji kamery oraz współrzędnych wielokątów. Pierwszeństwo w wyświetlaniu mają te, które znajdują się najbliżej kamery. Aby stosować ten filtr, należy stworzyć obiekt klasy MaxPolyFilter, w jej konstruktorze podając wartość liczbową dla właściwości maxP, ograniczającą liczbę wyświetlanych wielokątów. W następnej kolejności, podobnie jak w przypadku poprzednich filtrów, stworzony obiekt klasy MaxPolyFilter należy umieścić jako argument, tworząc obiekt renderera, i przypisać go do widoku. Aby uruchomić ten filtr, wpisz w metodzie initFilter() następujący kod: var maxpoly:MaxPolyFilter = new MaxPolyFilter(500); view.renderer = new BasicRenderer(maxpoly);
Efekt działania tego filtra przedstawiono na rysunku 12.11.
Rozdział 12. Optymalizacja
521
Rysunek 12.11.
Efekt użycia filtra MaxPolyFilter
Ogólne wskazówki Stosuj właściwości visible lub ownCanvas, by wykluczyć niepotrzebnie rysowane obiekty. Jest to szczególnie przydatne, gdy obiekt nie zmienia swojego stanu, a jest uwzględniony w procesie odświeżania. Stosuj różne wartości stałych klasy StageQuality. Dobrą praktyką jest ustawienie jakości na poziomie StageQuality.LOW w sytuacjach, gdy na scenie występują zmiany bądź kamera zmienia swoje położenie. Po zakończeniu modyfikacji można powrócić do wartości StageQuality.MEDIUM bądź StageQuality.HIGH. W miarę możliwości stosuj małe wymiary okna aplikacji. Kontroluj zachowanie aplikacji, w której używasz rendererów: Renderer.CORRECT_Z_ORDER lub Renderer.INTERSECTING_OBJECTS. Poprawiają one kolejność wyświetlanych wierzchołków, ale zarazem są obciążające dla procesora. Unikaj umieszczania odwołania do metody render() w metodach zdarzenia Event.ENTER_FRAME. Zamiast tego wywołuj je w sytuacjach wykonywania zmian, na przykład przy użyciu klasy TweenMax. Jeżeli w swojej aplikacji nie możesz zastosować takiego rozwiązania, kontroluj dodawanie i usuwanie detektora zdarzenia Event.ENTER_FRAME.
522
Flash i ActionScript. Aplikacje 3D od podstaw
Obiekty Stosowanie obiektów LOD W złożonych aplikacjach, takich jak gry komputerowe, które bazują na grafice trójwymiarowej, częstą praktyką poza ograniczaniem widoczności jest używanie obiektów LOD (Level of Detail — poziom szczegółowości). Idea ich stosowania polega na tworzeniu kontenerów podobnych do ObjectContainer3D i umieszczaniu w ich wnętrzu ustalonej liczby wersji tego samego obiektu. Każda z wersji różni się od siebie szczegółowością siatki oraz nałożonych tekstur. W zależności od odległości obiektu LOD od kamery wyświetlana jest odpowiednia wersja. Im dalej obiekt ten znajduje się od obserwatora, tym mniej szczegółów jest wyświetlanych, i na odwrót — im bardziej obiekt jest widoczny, tym więcej jego detali powinno być uwzględnionych. W bibliotece Away3D obiekty LOD generuje klasa o nazwie LODObject, zlokalizowana w pakiecie away3d.containers. Używanie tego typu obiektów polega na utworzeniu ich w określonej liczbie, która odpowiada etapom przemiany wybranego obiektu. W każdym z tych obiektów — stosując metodę addChild() bądź bezpośrednio w argumencie konstruktora — dodaje się odpowiednią wersję obiektu. W kolejnym kroku trzeba ustalić przestrzeń, w której ma występować obiekt wybranego poziomu. W tym celu stosuje się właściwości minp oraz maxp, które określają tę granicę. Podawane w tych właściwościach wartości nie wyznaczają odległości w pikselach na osi Z, tylko określają skalę rzutu perspektywicznego obiektu. Właściwość minp wyznacza mniejszą skalę, co oznacza, że obiekt jest bardziej oddalony od kamery, z kolei maxp wyznacza większą skalę i tym samym bliższą pozycję względem obserwatora. Na rysunku 12.12 przedstawiono cztery wersje kuli wyświetlane w określonych granicach skali, czyli odległości od kamery. Obiekt lod0, znajdujący się po lewej stronie, reprezentuje wersję najbardziej oddaloną od kamery, stąd jego najmniejszy rozmiar. Z kolei lod3 przedstawia kulę w pozycji najbliższej kamerze. Przedstawiony rysunek to w zasadzie cztery różne ujęcia przykładu zastosowania obiektu LODObject. Aby uzyskać taki efekt, przepisz i skompiluj następujący kod źródłowy: package { import away3d.materials.WireColorMaterial; import flash.display.StageAlign; import flash.display.StageQuality;
Rozdział 12. Optymalizacja
Rysunek 12.12. Różne poziomy obiektów LODObject import import import import
public class LODObjectExample extends Sprite { private var view:View3D; private var reverse:Boolean = false; private var obj:ObjectContainer3D; public function LODObjectExample() { stage.quality = StageQuality.LOW; stage.align = StageAlign.TOP_LEFT; stage.scaleMode = StageScaleMode.NO_SCALE; addEventListener(Event.ENTER_FRAME, onEnterFrame); stage.addEventListener(Event.RESIZE, onResize); view = new View3D(); addChild(view); // obj = new ObjectContainer3D(); view.scene.addChild(obj); var lod0:LODObject = new LODObject(new Sphere( { radius:50, segmentsW:4, segmentsH:4, material:new WireColorMaterial (0xFF0000, { wireColor:0x000000 } ) } )); lod0.minp = 0; lod0.maxp = .5; obj.addChild(lod0);
523
524
Flash i ActionScript. Aplikacje 3D od podstaw // var lod1:LODObject = new LODObject(new Sphere( { radius:50, segmentsW:8, segmentsH:8, material:new WireColorMaterial (0xFF0000, { wireColor:0x000000 } ) } )); lod1.minp = .5; lod1.maxp = 1; obj.addChild(lod1); // var lod2:LODObject = new LODObject(new Sphere( { radius:50, segmentsW:12, segmentsH:12, material:new WireColorMaterial (0xFF0000, { wireColor:0xE50000 } ) } )); lod2.minp = 1; lod2.maxp = 1.5; obj.addChild(lod2); // var lod3:LODObject = new LODObject(new Sphere( { radius:50, segmentsW:16, segmentsH:16, material:new WireColorMaterial (0xFF0000, { wireColor:0xD00000 } ) } )); lod3.minp = 1.5; lod3.maxp = Infinity; obj.addChild(lod3); // onResize(); } private function onEnterFrame(e:Event):void { if (obj.z > 1000) reverse = true; if (obj.z < -1000) reverse = false; if (reverse) obj.z -= 20; else obj.z += 20; view.render(); } private function onResize(e:Event = null):void { view.x = stage.stageWidth * .5; view.y = stage.stageHeight * .5; } } }
Celem tego przykładu jest pokazanie, jak wyświetlają się utworzone obiekty kuli w zależności od ich odległości od obserwatora. Do jego realizacji posłużyliśmy się klasą LODObject, której obiekty zawierają w sobie bryły różnych kul reprezentowanych przez klasę Sphere. Wszystkie obiekty umieściliśmy w kontenerze ObjectContainer3D, aby operować tylko na jego współrzędnych podczas animacji przybliżania i oddalania obiektu.
Rozdział 12. Optymalizacja
525
W konstruktorze klasy LODObjectExample w pierwszej kolejności nadaliśmy nowe ustawienia obiektowi klasy Stage oraz dodaliśmy detektory zdarzeń Event.ENTER_ FRAME i Event.RESIZE. W następnej kolejności stworzyliśmy widok bez jakichkolwiek dodatkowych ustawień, po czym zabraliśmy się za tworzenie obiektów LOD. Na początku dodaliśmy obiekt kontenera o nazwie obj, potem kolejno tworzyliśmy wersje kul, które mają być wyświetlane. obj = new ObjectContainer3D(); view.scene.addChild(obj);
Schemat tworzenia poszczególnych wersji jest powtarzalny. Pierwszy zdefiniowany obiekt lod0 odpowiada za wersję najbardziej oddaloną od kamery. W konstruktorze LODObject zapisaliśmy kod tworzący kulę o promieniu radius równym 50 pikselom i liczbie segmentów w pionie i poziomie równej 4. Materiał nałożony na obiekt typu Sphere ma wyraźnie pokazywać konstrukcję siatki, dlatego zastosowaliśmy WireColorMaterial z czerwonym wypełnieniem i czarnymi krawędziami. var lod0:LODObject = new LODObject(new Sphere( { radius:50, segmentsW:4, segmentsH:4, material:new WireColorMaterial(0xFF0000, { wireColor:0x000000 } ) } ));
Po utworzeniu obiektu lod0 przypisaliśmy mu granice jego wyświetlania, nadając nowe wartości właściwościom minp i maxp. Po ustawieniu wszystkich właściwości umieściliśmy ten obiekt w kontenerze obj. lod0.minp = 0; lod0.maxp = .5; obj.addChild(lod0);
Następnym w kolejce obiektem klasy LODObject jest lod1. W jego konstruktorze również stworzyliśmy kulę, tylko że z dwukrotnie większą liczbą segmentów. Ustawiliśmy również większe wartości dla właściwości minp oraz maxp, tak aby obiekt lod1 wyświetlał się w bliższej odległości, niż zapisano to w obiekcie lod0. lod1.minp = .5; lod1.maxp = 1; obj.addChild(lod1);
Trzecią wersję zapisaliśmy jako obiekt lod2, a w jego wnętrzu utworzyliśmy kolejną odsłonę kuli, tym razem z liczbą segmentów w pionie i poziomie równą 12. Dodatkowo zmieniliśmy w materiale czarny kolor krawędzi na ciemniejszy odcień czerwieni. Pozostałe ustawienia kuli są takie same jak w poprzednich wersjach.
526
Flash i ActionScript. Aplikacje 3D od podstaw
Nowe granice obiektu lod2 zwiększyliśmy o wartość równą 0.5 zarówno dla minp, jak i maxp, dzięki temu zachowujemy ciągłość przejścia między wersjami. lod2.minp = 1; lod2.maxp = 1.5; obj.addChild(lod2);
Ostatnią odsłonę obiektu klasy LODObject nazwaliśmy lod3. W jej konstruktorze utworzyliśmy obiekt klasy Sphere, którego liczba segmentów zarówno w pionie, jak i poziomie równa jest 16. W połączeniu z nowo ustawionymi granicami skali przy najmniejszej odległości obiektu od kamery uzyskaliśmy najdokładniejszy kulisty kształt. lod3.minp = 1.5; lod3.maxp = Infinity; obj.addChild(lod3);
Na końcu konstruktora klasy LODObjectExample odwołaliśmy się do metody onResize() w celu wyśrodkowania sceny względem okna aplikacji. W metodzie onEnterFrame(), która jest wywoływana przy każdym wystąpieniu zdarzenia Event.ENTER_FRAME, zapisaliśmy animację zmiany pozycji względem osi Z dla obiektu obj. Zastosowaliśmy trzy instrukcje warunkowe if. Pierwsze dwie sprawdzają, czy zostały przekroczone ustalone granice. W zależności od ich wyniku zmiennej reverse przypisywana jest wartość true bądź false. Zmienna ta potrzebna jest do ustalenia kierunku przemieszczania obiektu kontenera. W przypadku gdy reverse jest równe true, zapisaliśmy zmniejszenie wartości pozycji na osi Z. Gdy wartość reverse jest równa false, nadając większe wartości właściwości z dla obiektu obj, odsuwamy go od kamery. if (obj.z > 1000) reverse = true; if (obj.z < -1000) reverse = false; if (reverse) obj.z -= 20; else obj.z += 20;
W tabelach 12.7 i 12.8 wypisano właściwości oraz metody klasy LODObject. Tabela 12.7. Właściwości klasy LODObject
Nazwa
Rodzaj
Wartość domyślna
Opis
maxp
Number
Infinity
Maksymalna wartość skali perspektywy, w jakiej widoczna ma być wybrana wersja
minp
Number
0
Minimalna wartość skali perspektywy, w jakiej widoczna ma być wybrana wersja
Rozdział 12. Optymalizacja
527
Tabela 12.8. Metody klasy LODObject
Nazwa
Opis
LODObject(…initarray)
Konstruktor
matchLOD(camera:Camera3D):Boolean
Zwraca wartość true bądź false w zależności od tego, czy obiekt jest widoczny
Stosowanie narzędzia Weld Weld to klasa umieszczona w pakiecie away3d.tools, której zadaniem jest zoptymalizowanie geometrii wybranego trójwymiarowego obiektu. Jej działanie polega na usuwaniu duplikatów wierzchołków i współrzędnych uv. Używając modeli z różnych, często niesprawdzonych źródeł, można natrafić na takie, które zawierają dużą liczbę zbędnych informacji spowalniających działanie aplikacji. Nawet gdy wybrany model dobrze się prezentuje na scenie, warto sprawdzić jego zawartość. Szczególnie jeżeli aplikacja korzysta z większej liczby różnorodnych obiektów trójwymiarowych.
Należy zaznaczyć, że samo użycie obiektu klasy Weld nie zmieni wyglądu wybranego modelu. Na rysunku 12.13 przedstawiono znany nam model statku kosmicznego, na którym zastosowano narzędzie Weld. Rysunek 12.13.
Model pojazdu kosmicznego z usuniętymi podwójnymi wierzchołkami
528
Flash i ActionScript. Aplikacje 3D od podstaw
Jak widać, struktura modelu nie uległa widocznym modyfikacjom. Mimo to wyczyszczono go z 432 zdublowanych wierzchołków i 516 punktów uv. Aby sprawdzić działanie i skutki całego procesu optymalizacji takiego modelu, przepisz następujący kod źródłowy. package { import import import import import import import import import import import import
Po skompilowaniu i uruchomieniu tego kodu w oknie aplikacji pojawi się obiekt statku kosmicznego, który obraca się wokół osi Y. Do jego implementacji zastosowaliśmy klasy Max3DS oraz Loader3D wraz ze zdarzeniem Loader3DEvent, służące do pobierania modeli w formacie 3DS. Oczywiście zamiast tego formatu można umieszczać inne obsługiwane przez bibliotekę Away3D. W tym przykładzie ważne jest to, aby model zawierał zbędne informacje. W klasie WeldExample zdefiniowaliśmy trzy ogólnie dostępne w jej wnętrzu obiekty, są nimi: private var view:View3D; private var modelLoader:Loader3D; private var mdl:Mesh;
W konstruktorze klasy stworzyliśmy widok oraz nowy obiekt modelLoader pobierający z ustalonej lokalizacji plik spaceship.3DS. Optymalizację oraz samo umieszczenie obiektu na scenie zapisaliśmy w metodzie wywołanej po całkowitym pobraniu modelu. modelLoader = Max3DS.load('../../resources/models/max3ds/ spaceship/spaceship.3DS'); modelLoader.addOnSuccess(onModelLoaded);
W metodzie onModelLoaded() pobraną zawartość zapisaliśmy w postaci obiektu klasy Mesh o nazwie mdl. Ponieważ model ten jest niewielkich rozmiarów, znacznie zwiększyliśmy jego skalę, tak aby był dobrze widoczny na środku sceny. mdl = modelLoader.handle as Mesh; mdl.position = new Vector3D(0, 0, 0); mdl.scale(16); view.scene.addChild(mdl);
530
Flash i ActionScript. Aplikacje 3D od podstaw
Po umieszczeniu modelu na scenie stworzyliśmy obiekt klasy Weld i ustawiliśmy wartość true właściwości doUVs tak, aby również współrzędne uv zostały zoptymalizowane. Do uruchomienia całego procesu użyliśmy metody apply(), podając w jej argumencie odwołanie do obiektu mdl. var weld:Weld = new Weld(); weld.doUVs = true; weld.apply(mdl);
Po wykonanej optymalizacji, stosując trace(), wyświetliliśmy liczbę wierzchołków oraz współrzędnych uv modelu. Następnie dodaliśmy detektor zdarzenia Event.ENTER_FRAME. Umieściliśmy go w tym miejscu, aby nie dopisywać do odwoływanej metody instrukcji warunkowej sprawdzającej istnienie obiektu mdl. trace("Usunięto", weld.countvertices, "zbędnych wierzchołków i", weld.countuvs,"współrzędnych UV"); addEventListener(Event.ENTER_FRAME, onEnterFrame);
W metodzie onEnterFrame() zapisaliśmy odświeżanie widoku oraz nieustanne obracanie obiektu mdl wokół osi Y. W tabelach 12.9 i 12.10 wypisano właściwości oraz metody klasy Weld. Tabela 12.9. Właściwości klasy Weld
Nazwa
Rodzaj
Wartość domyślna Opis
countuvs
Number
0
Zwraca liczbę usuniętych współrzędnych uv
countvertices
Number
0
Zwraca liczbę usuniętych wierzchołków
doUVs
Boolean
true
Określa, czy optymalizacja ma również uwzględnić współrzędne uv
Tabela 12.10. Metody klasy Weld
Nazwa
Opis
Weld(doUVs:Boolean)
Konstruktor
apply(object3d:Object3D):void
Wykonuje optymalizację na wybranym obiekcie
Ogólne wskazówki W sytuacjach, w których jest to możliwe, stosuj obiekty typu Sprite z teksturą zamiast trójwymiarowych modeli. W miarę możliwości optymalizuj modele w programach do ich tworzenia. Używaj jak najmniejszej liczby wielokątów.
Rozdział 12. Optymalizacja
531
Staraj się przypisywać true właściwości ownCanvas w przypadku każdego trójwymiarowego obiektu. Pozwoli to wyodrębnić obiekty do procesu odświeżania. Do modeli statycznych lepiej używaj formatu 3DS. Używaj modeli zajmujących mniejszą powierzchnię. Mniejsze wartości współrzędnych wierzchołków mogą powodować przyspieszenie rysowania obiektów. Przypisanie właściwości bothsides wartości true może przyspieszyć odświeżanie obiektu, ale z drugiej strony może również powodować występowanie artefaktów. Stosowanie pushfront oraz pushback jest dobrą praktyką, gdy obiekty nie zmieniają swoich kątów nachylenia względem kamery.
Tekstury i światło Ogólne wskazówki Nie stosuj właściwości smooth na materiałach, gdy nie jest to konieczne. Nie używaj dużych tekstur, zamiast tego skaluj pokryty obiekt. Przed stosowaniem tekstury upewnij się, że jest ona wystarczająco zoptymalizowana. Czasami lepiej od razu w programie graficznym zmniejszyć rozmiar pliku, „przycinając” jakość w miejscach, gdzie nie odgrywa ona istotnej roli. Unikaj powielania tego samego materiału wewnątrz pętli for. Zdefiniuj obiekt tekstury przed pętlą. Niepotrzebne obiekty BitmapData usuwaj z pamięci, stosując metodę dispose(). MovieMaterial oraz VideoMaterial zużywają dużą ilość zasobów, dlatego w miarę możliwości staraj się używać AnimatedBitmapMaterial. W przypadku MovieMaterial oraz VideoMaterial kontroluj wyświetlanie animacji. W sytuacjach gdy jest ona zbędna, wyłączaj ją. Ograniczaj liczbę świateł do minimum. Stosując światła, przypisuj właściwościom surfaceCache wartość true. Zwolni to zużyte zasoby procesora. Stosuj tekstury, na których rozrysowano cienie i światła, zamiast generować je w Away3D. Różnica może być niewielka, a skok wydajności znaczący.
532
Flash i ActionScript. Aplikacje 3D od podstaw
Rozdział 13. Więcej zabawy z 3D Gratulacje! Zdobyłeś już podstawową wiedzę na temat tworzenia trójwymiarowych aplikacji w technologii Adobe Flash. Teraz możesz śmiało pisać własne nieprzeciętne gry i strony. Nie myśl sobie jednak, że to już koniec nauki. Jeżeli poważnie traktujesz zajmowanie się tą tematyką, to czeka Cię nieustanne poszerzanie wiedzy i śledzenie trendów. Branża informatyczna nie stoi w miejscu, stale jest coś rozwijane i poprawiane. Czy się tego chce czy nie, wciąż trzeba być na bieżąco. Niektórzy specjaliści mniej przychylni technologii Flash uważają (już któryś raz z rzędu), że nie warto się nią zajmować, bo to ostatnie chwile jej żywota. Otóż nic bardziej mylnego! Są dziedziny, w których pomimo wciąż rosnącej liczby innych możliwości Flash jest nadal przodującą technologią, do tego poszerzającą swoje pole manewrów chociażby o gry przeglądarkowe lub na urządzenia mobilne. Dodając pewnego smaczku do całości, w tym rozdziale pokażę kilka bibliotek również związanych z technologią Flash, które można połączyć z silnikiem Away3D. Nie jest to wiedza niezbędna do stworzenia prostych aplikacji, ale gdy już zdobędziesz większą wprawę, możesz nabrać chęci do tworzenia czegoś ciekawszego i bardziej złożonego. Po raz ostatni użyję stosowanego w całej książce sformułowania „Czytając ten rozdział, dowiesz się”: Jakie biblioteki odpowiadają za symulowanie fizyki w aplikacjach Flash, również tych trójwymiarowych. Czym jest rzeczywistość rozszerzona oraz jakich bibliotek używać do jej stworzenia. Jak w inny sposób wykorzystać technologię Adobe Flash, czyli zabawa z kontrolerami ruchu konsoli Xbox oraz Wii.
534
Flash i ActionScript. Aplikacje 3D od podstaw
Fizyka i kolizje Niektórym Czytelnikom słowo „fizyka” może kojarzyć się z bólem brzucha i trudnymi sprawdzianami w szkole, ale nawet takie osoby docenią jej aspekt w grach, w których wściekłymi ptaszkami zbija się prosiaczki. Stosowanie podstawowych praw fizyki w aplikacjach nie tylko trójwymiarowych znacznie poprawia ich wiarygodność i potęguje przyjemność z oglądania wyświetlanych efektów. Wielokrotnie słyszałem, jak bardzo graczy bawiło realne traktowanie modeli postaci, efekty wybuchów, zderzeń czy też upadków. W aplikacjach pisanych w technologii Flash również można zastosować tego typu efekty.
Wykrywanie kolizji w Away3D Omawiając kwestie fizyki w aplikacjach 3D, warto również wspomnieć o wykrywaniu kolizji pomiędzy dwoma lub więcej obiektami. Jest to ważna kwestia, jeżeli planujemy stworzenie realnego środowiska, w którym obiekty nie mogą przenikać siebie nawzajem lub przynajmniej powinny informować o zajściu takiej sytuacji. Biorąc za przykład zwykłą ścianę, jeżeli postać nie posiada nadprzyrodzonych umiejętności, nie może przez nią przechodzić, tylko powinna się zatrzymać przed nią. W przypadku przenikania obiektów przeważnie stosuje się ten zabieg w sytuacjach symulowania dotarcia pocisku do ofiary. Wtedy występuje zdarzenie zranienia lub zlikwidowania celu, o czym należy poinformować szereg innych składników aplikacji.
Określanie odległości pomiędzy obiektami Dzięki zastosowaniu biblioteki Away3D istnieje kilka możliwości sprawdzania, czy doszło do kolizji pomiędzy obiektami. Najprostsza metoda bazuje na sprawdzeniu, czy odległość pomiędzy punktami centralnymi obu obiektów nie jest mniejsza niż suma ich promieni. W poniższym kodzie źródłowym przedstawiono prosty przykład takiej sytuacji: sph1=new Sphere(); sph2=new Sphere(); private function collisionDetected():Boolean { var dist:Number = Vector3D.distance(sph1.position,sph2.position); var minDist:Number = sph1.boundingRadius + sph2.boundingRadius; return dist <= minDist; }
Rozdział 13. Więcej zabawy z 3D
535
Mając dwa obiekty klasy Sphere w funkcji collisionDetected(), sprawdziliśmy ich odległość od siebie i w zależności od wystąpienia warunku zwróciliśmy wartość true bądź false. W pierwszej kolejności stosując metodę distance() dostępną w klasie Vector3D, zapisaliśmy do zmiennej dist odległość pomiędzy dwoma kulami. Następnie posługując się długością ich promieni, wyznaczyliśmy w zmiennej minDist minimalną dopuszczalną odległość między nimi. Na koniec wystarczyło zastosować instrukcję warunkową, by sprawdzić, czy wartość dist jest mniejsza od minDist. Aby wyświetlić granice zajmowanej przez obiekt powierzchni, należy jego parametrowi debugBoundigBox lub debugBoundigSphere przypisać wartość true.
Klasa Ray Biblioteka Away3D posiada w swoich zasobach tajemniczą klasę o nazwie Ray. Formę jej obiektu można potraktować jako niewidzialną linię o ustalonej długości z punktem początkowym i końcowym. Jednym z przykładów jej zastosowania może być sytuacja, w której nie są używane modele pocisków, a chcemy sprawdzić, czy wybrany cel znalazł się na linii ognia. Jeżeli linia przenika przez granice wybranego obiektu, oznacza to, że doszło do trafienia obiektu. Na dodatek stosowanie klasy Ray umożliwia sprawdzenie kolizji na poszczególnym wielokącie złożonego obiektu, co może być przydatne, jeżeli chcielibyśmy zastosować różne animacje trafień. Najprostsze zastosowanie klasy Ray przedstawiono w następującym kodzie źródłowym: private function hit(target:Object3D):Boolean { var ray:Ray = new Ray(); ray.orig = view.camera.position; ray.dir = view.camera.transform.transformVector(new Vector3D(0,0,300)); return ray.intersectBoundingRadius(target.position, target.boundingRadius); }
W funkcji hit() przyjęliśmy, że miejscem, z którego wydobywa się strzał, jest pozycja użytkownika, a maksymalna odległość lotu kuli równa jest 300 pikselom. W pierwszej kolejności ustaliliśmy pozycję początkową orig dla obiektu ray oraz wektor kierunkowy dir. Na końcu zwróciliśmy wynik działania metody intersect BoundingRadius(). Wszystkie publiczne właściwości oraz metody klasy Ray zostały wypisane w tabelach 13.1 i 13.2.
536
Flash i ActionScript. Aplikacje 3D od podstaw
Tabela 13.1. Właściwości klasy Ray
Nazwa
Rodzaj
Wartość
Opis
dir
Vector3D
Określa kierunek i punkt końcowy obiektu klasy Ray.
Zwraca wynik sprawdzenia kolizji w miejscu określonym punktem pos i przestrzeni ograniczonej promieniem radius.
Wykrywanie nierówności podłoża W rozdziale 7., „Praca z obiektami”, poznaliśmy klasy modyfikujące siatkę obiektu na podstawie pobranych z załączonej bitmapy danych o zróżnicowaniu jej kolorów. Zastosowaliśmy klasę Elevation do wygenerowania nierównego terenu, jaki przedstawiono na rysunku 7.21. Problem, z którym musimy się zmierzyć przy stosowaniu tego typu zdeformowanych obiektów, polega na rozpoznaniu przez inne obiekty poziomu nierówności podłoża. Jeżeli chcielibyśmy dla przykładu poruszać pojazdem po takim terenie, musielibyśmy w jakiś sposób informować pojazd o zmianie wartości parametru y, na którym powinien się znajdować. Dobrym narzędziem do tego celu jest klasa ElevationReader, której zastosowanie w podstawowej formie ogranicza się do kilku linijek kodu, tak jak to przedstawiono w następującym kodzie źródłowym: var eReader: ElevationReader = new ElevationReader(2); eReader.traceLevels(bitmapData,"r",50,50,5,5,0.5); public function onEnterFrame(e:Event):void { var eY:Number = eReader.getLevel(car.x, car.z); car.y = eY; view.render(); }
W przedstawionym kodzie na początku stworzyliśmy obiekt klasy ElevationReader z argumentem smoothness równym 2. Dzięki temu zmiana pozycji będzie mniej
Rozdział 13. Więcej zabawy z 3D
537
gwałtowna. Metoda traceLevels() służy do wykonania mapy zróżnicowania poziomów, z której później będziemy czerpali informacje. Ważne jest, aby w jej argumentach użyć tych samych wartości, jakie zostały podane w metodzie generate() klasy Elevation. Jeżeli nie będą się one pokrywały, to odczytywane współrzędne będą niedokładne względem podłoża. Wewnątrz funkcji, w której jest odświeżany widok, do odczytu pozycji na osi y zastosowaliśmy metodę getLevel(), podając jako jej argumenty pozycję pojazdu. Można również jako trzeci argument ustawić poziom przesunięcia, co jest przydatne w sytuacji, gdy punkt kontrolny obiektu jest umiejscowiony na środku jego przestrzeni. Po ustaleniu wartości wzniesienia przypisaliśmy ją do zmiennej eY i zastosowaliśmy do prostej aktualizacji położenia obiektu car przez zmianę jego parametru y. Wszystkie publiczne parametry oraz metody klasy ElevationReader zostały wypisane w tabelach 13.3 i 13.4. Tabela 13.3. Parametry klasy ElevationReader
Nazwa
Rodzaj
Wartość
Opis
maxElevation
Number
255
Określa maksymalny poziom zniekształceń.
minElevation
Number
0
Określa minimalny poziom zniekształceń.
source
BitmapData
Zwraca mapę zniekształceń w postaci obiektu BitmapData.
Tabela 13.4. Metody klasy ElevationReader
Nazwa
Opis
ElevationReader(smoothness:int = 0)
Konstruktor
applyHeightGradient(src:BitmapData, color:uint = Na źródłowy obiekt BitmapData 0x80000000, reverse:Boolean = true, blendmode:String określający mapę wzniesień nakłada = normal):void dodatkowy obiekt BitmapData,
generując nowe wartości wysokości. getLevel(x:Number, y:Number, offset:Number = 0):Number Zwraca wartość wzniesienia
Dodatkowe silniki fizyki JigLibFlash JigLibFlash jest darmowym silnikiem fizyki przeniesionym z wersji JigLib napisanej w języku C++. Biblioteka ta jest stale rozwijana i można znaleźć wersje współpracujące zarówno z Away3D 3.6 oraz wczesnymi wersjami Away3D 4. JigLibFlash posiada swoich zwolenników, jak i przeciwników. Ci drudzy uważają, że jest to zbyt wolna i ciężka biblioteka do symulowania fizyki, podając za przykład inne dostępne w sieci wersje. Prawda jest taka, że jeszcze do niedawna Flash ciężko radził sobie z fizyką w trójwymiarze z dużą ilością złożonych obiektów. Trzeba było nieźle pogłówkować, aby uzyskać optymalny efekt. Na szczęście te czasy mijają i aktualne wersje Flash Playera oraz samych silników 3D znacznie lepiej współgrają. Jedno jest pewne: nie należy porównywać funkcjonowania bibliotek fizyki 2D i 3D. To dwa różne światy. Na rysunku 13.1 przedstawiono przykład zastosowania silnika JigLibFlash wraz z biblioteką Away3D. Rysunek 13.1.
Symulowanie fizyki przestrzeni 3D z użyciem biblioteki JigLibFlash
JigLibFlash nie posiada dokumentacji, ale na stronach poświęconych temu projektowi można znaleźć przykłady zastosowań tej biblioteki oraz instrukcje jej instalacji. Źródła oraz więcej informacji znajdziesz pod adresami: http://www.jiglibflash.com/blog/, https://github.com/ringodotnl.
Rozdział 13. Więcej zabawy z 3D
539
Box2DFlash (Box2DAS3) Box2D to kolejny silnik fizyki przeznaczony dla aplikacji Flash. Podobnie jak poprzednio omówiona biblioteka JigLibFlash, ta również została przeniesiona z wersji napisanej w języku C++. Biblioteka ta jest przeznaczona do programów dwuwymiarowych, ale można ją również stosować w środowiskach 3D, w tym z biblioteką Away3D. W sieci jest wiele przykładów jej zastosowania, np. do symulowania upadków i bezwładności postaci. Na rysunku 13.2 przedstawiono zrzut ekranu jednej z takich aplikacji, w której można układać kukły. Rysunek 13.2.
Dwie bezwładne kukły w środowisku dwuwymiarowym
Symulacje tego typu są stosowane również w aplikacjach 3D — często w odniesieniu do postaci, które zostały obezwładnione. W takich momentach model traktowany jest jako kukła (ang. ragdoll). Na rysunku 13.3 przedstawiono zastosowanie kukieł w środowisku trójwymiarowym. Źródła, przykłady oraz więcej informacji na temat biblioteki Box2DFlash znajdziesz pod adresami: http://www.box2dflash.org/, http://shiftarray.com/away3d-with-box2d-physics/.
AwayPhysics AwayPhysics to kolejna biblioteka przeznaczona do symulowania fizyki w przestrzeni trójwymiarowej. Dlaczego warto zwrócić na nią uwagę i traktować bardzo poważnie? Otóż twórcy biblioteki Away3D oraz silnika JigLibFlash postanowili połączyć siły, aby stworzyć zupełnie nowy i jeszcze lepszy silnik fizyki ukierunkowany głównie na bibliotekę Away3D. Taka współpraca oraz fakt, że opierają
540
Flash i ActionScript. Aplikacje 3D od podstaw
Rysunek 13.3. Zastosowanie ragdoll na trójwymiarowym modelu postaci
swoje działania na istniejącym i powszechnie uznanym silniku Bullet Physics Engine, pozwala wiązać z tym projektem wielkie nadzieje i wymagania. Już teraz w swoich wczesnych wersjach sprawdza się on naprawdę dobrze, o czym można się przekonać, analizując dostępne w sieci przykłady. Na rysunku 13.4 przedstawiono zrzut ekranu z aplikacji Away Sky Racer, w którym wykorzystano silnik AwayPhysics. Rysunek 13.4.
Zrzut ekranu z demo, w którym wykorzystano silnik fizyki AwayPhysics
Rozdział 13. Więcej zabawy z 3D
541
Więcej szczegółów na temat AwayPhysics znajdziesz na stronach: http://away3d.com/index.php/comments/ away_physics_brand_new_3d_physics_engine_for_away3d, https://github.com/away3d/, http://away3d.com/forum/viewcategory/52/.
Rzeczywistość rozszerzona Rzeczywistość rozszerzona (ang. Augmented Reality, w skrócie AR), najprościej wyjaśniając, jest systemem łączącym świat rzeczywisty z wygenerowanymi komputerowo obiektami. Często spotykany w filmach oraz grach komputerowych jako forma dodatkowego interfejsu użytkownika, w rzeczywistości AR swoje początki miał w systemach sterowania pojazdami wojskowymi oraz jako narzędzie nawigacyjne dla inżynierów samolotów. Rzeczywistość rozszerzona daje możliwość tworzenia ciekawych aplikacji, w których trójwymiarowe elementy są wyświetlane na warstwie rejestrowanego przez kamerę obrazu. To zupełnie nowy trend, który niesie ze sobą szereg możliwości zastosowań w reklamie, grach i innych usługach. Rzeczywistość rozszerzona nie jest rzeczywistością wirtualną (ang. Virtual Reality), ponieważ nie przedstawia ona pełnego wirtualnego świata 3D. Nakładane na rejestrowany przez użytkownika obraz dodatkowe elementy wygenerowane przez system AR mogą być wyświetlane na kilka sposobów: 1. Pierwszy sposób opiera się na zastosowaniu specjalnych obrazów. Najczęściej są to czarno-białe figury wydrukowane na kartkach, które system AR traktuje jako wzorzec do rozpoznania. Jeżeli pojawi się on na rejestrowanej przez użytkownika powierzchni, posłuży jako punkt odniesienia dla wygenerowanych komputerowo obiektów. Dla przykładu poniżej umieszczono rysunek 13.5, na którym przedstawiono model postaci wyświetlony na środku markera. 2. W drugiej metodzie wzorcem jest rejestrowane przez kamerę otoczenie. Niektóre systemy rzeczywistości rozszerzonej ukierunkowane są na pełnienie konkretnych funkcji, np. wirtualnych przymierzalni. W tego typu aplikacjach można wyodrębnić z otoczenia elementy, które są niezbędne do przedstawienia wirtualnych obiektów. Metodą porównywania zdjęć piksel po pikselu system AR rozpoznaje w otoczeniu konkretny obiekt, np. twarz, i traktuje go jako wzorzec do wyświetlania dodatkowych informacji. Na rysunku 13.6 przedstawiono aplikację, w której na głowę użytkownika nałożona jest maska superbohatera.
542
Flash i ActionScript. Aplikacje 3D od podstaw
Rysunek 13.5.
Model wyświetlony w centralnym punkcie markera
Rysunek 13.6.
Umieszczenie maski superbohatera, tak aby zakrywała ona głowę użytkownika
3. W trzecim sposobie wyświetlania obiektów ich pozycje są uzależnione od pozycji GPS lub czujnika ruchu urządzenia przenośnego takiego jak smartphone czy tablet. Po rozpoznaniu położenia użytkownika system odpowiednio nanosi elementy w określonych miejscach i wyświetla je na ekranie tego urządzenia. Tego typu rozwiązanie idealnie pasuje do wirtualnych informacji turystycznych. Na rysunku 13.7 przedstawiono wirtualne drogowskazy kierujące do poszczególnych miejsc w Londynie. Do stworzenia rzeczywistości rozszerzonej w technologii Flash służy kilka bibliotek. Najpopularniejszymi wśród nich są: FLARToolKit, FLARManager oraz IN2AR.
Rozdział 13. Więcej zabawy z 3D
543
Rysunek 13.7.
Wirtualne rozkłady tras komunikacji miejskiej
FLARToolKit Jednym z najbardziej popularnych narzędzi do tworzenia efektów rzeczywistości rozszerzonej na platformę Adobe Flash Player jest FLARToolKit. Biblioteka ta została przepisana z wersji NyARToolkit przeznaczonej dla języka Java. Jest to wciąż żywy projekt, dlatego warto śledzić aktualności z nim związane oraz jego źródła w svn, tak aby być stale na bieżąco i mieć jak najświeższą wersję tej biblioteki. FLARToolKit posiada kilka klas narzędzi przechwytujących wybrane wzory z rejestrowanego obrazu i rozłożenie według ich położenia nowych współrzędnych przestrzeni trójwymiarowej sceny z biblioteki takiej jak Away3D. Użyłem liczby mnogiej, ponieważ od pewnego czasu FLARToolKit ma możliwość rozpoznawania kilku wzorów naraz, co pozwala na tworzenie np. złożonych interaktywnych scenerii. Działanie tej biblioteki bazuje głównie na wykorzystaniu klasy potrzebnej do ustawienia pozycji wygenerowanej sceny odpowiednio względem użytego wzoru oraz klasy specjalnie spreparowanej kamery, której położenie w przestrzeni trójwymiarowej określa się, poruszając prawdziwą kamerą podłączoną do komputera. Działa to tak, jakby w naszych rękach wywoływane były wszystkie możliwe metody do zmiany pozycji. Przykład zastosowania FLARToolKit z biblioteką Away3D, na którym widać animowany model md2, przedstawiono na rysunku 13.8.
544
Flash i ActionScript. Aplikacje 3D od podstaw
Rysunek 13.8.
Przykład zastosowania FLARToolKit z biblioteką Away3D
Warto wspomnieć o tym, że stosując biblioteki rzeczywistości rozszerzonej bazujące na rozpoznawaniu wzorów w rejestrowanym obrazie, należy liczyć się z utratą nakładanego obrazu 3D przy szybkich zmianach pozycji kamery lub samego markera. Stosując kamery o lepszej jakości nagrywania, problem ten jest znacznie mniejszy, ale może występować. Więcej informacji na temat tej biblioteki znajdziesz na stronie http://www.libspark.org/wiki/saqoosha/FLARToolKit/en.
FLARManager Kolejnym narzędziem do tworzenia rzeczywistości AR w technologii Adobe Flash jest FLARManager, który w porównaniu z właśnie zaprezentowaną posiada ciekawe i łatwe w modyfikacji pliki konfiguracyjne. Sposób implementacji został w tej klasie uproszczony, co nie wpływa negatywnie na jej działanie, a wręcz przeciwnie — jakość przetwarzania rejestrowanego obrazu i wykrywania markerów nawet w większych odległościach jest przyzwoita. Dokumentację, kod źródłowy oraz przykłady zastosowań znajdziesz na stronie http://words.transmote.com/wp/ flarmanager/. Na rysunku 13.9 przedstawiono przykład zastosowana biblioteki FLARManager z animowanym modelem DAE.
Rozdział 13. Więcej zabawy z 3D
545
Rysunek 13.9.
Przykład zastosowania FLARManager
IN2AR Biblioteka IN2AR to najświeższy produkt w tej kategorii i obecnie kierowany jest głównie do bibliotek z rodziny Away3D, czyli wersji 3.6, 4 alpha oraz Lite. W porównaniu z poprzednimi ta biblioteka jest najciekawszą propozycją dla osób, które w sposób zaawansowany mają zamiar tworzyć aplikacje 3D w rzeczywistości rozszerzonej. Możliwości oraz osiągi, jakie dostarcza IN2AR, pozwalają na wyświetlanie o wiele bardziej złożonych obiektów niż którakolwiek z innych bibliotek w tej kategorii. Na dowód tego na rysunku 13.10 przedstawiono obiekt wyświetlony przy użyciu silnika Away3D 4 Alpha oraz IN2AR. Rodzaj stosowanych wzorów i ich wykrywanie jest tym, co wyróżnia IN2AR od innych bibliotek Augmented Reality. Twórcy tej biblioteki zrezygnowali z rozpoznawania zwykłych dwukolorowych markerów, z których korzystają FLARToolKit czy też FLARManager. W przypadku tego narzędzia dokładniej rozpoznawane są zdjęcia i rysunki złożone z dużej ilości kolorów i wzorów. Więcej na temat tej biblioteki znajdziesz na oficjalnej stronie http://www.in2ar.com.
546
Flash i ActionScript. Aplikacje 3D od podstaw
Rysunek 13.10. Działanie IN2AR z biblioteką Away3D4 Alpha
Kontrolery Z aplikacji napisanych w technologii Flash przeważnie korzysta się poprzez użycie klawiatury, myszki, kamery internetowej, mikrofonu, a w wersjach mobilnych również z ekranu dotykowego. Nie są to jednak jedyne narzędzia, jakimi możemy posługiwać się w aplikacjach Flash, istnieją bowiem biblioteki, które umożliwiają zastosowanie kamery Xbox Kinect oraz kontrolera Wii Remote.
Xbox Kinect Technologia Kinect stworzona przez firmę Microsoft dla konsoli Xbox 360 umożliwia granie przez rejestrowanie ruchów ciała bez konieczności trzymania dodatkowych kontrolerów. Jedynym urządzeniem potrzebnym do interakcji z aplikacją za pomocą ruchu, gestów oraz poprzez komendy głosowe jest specjalna kamera. Więcej informacji na temat samej technologii oraz jej zastosowania z konsolą Xbox znajdziesz na stronie http://www.xbox.com/pl-PL/Kinect. Od jakiegoś czasu w sieci pojawiają się różne biblioteki umożliwiające wykorzystanie tej kamery w aplikacjach Flash. Większość przykładów opracowanych jest w 2D, ale między nimi znajdą się również niewielkie dema zastosowania z Away3D. Jeżeli interesuje Cię zastosowanie kamery Xbox Kinect w aplikacjach Flash, przyjrzyj się stronom:
Rozdział 13. Więcej zabawy z 3D
547
http://openkinect.org/wiki/Action_Script_3, http://code.google.com/p/as3openni/, http://www.as3kinect.org/. Na rysunku 13.11 przedstawiono zrzut ekranu z aplikacji, w której ruchy użytkownika odzwierciedlane są na modelu 3D.
Rysunek 13.11. Przykładowa aplikacja z zastosowaniem kamery Xbox Kinect
Wii Remote Inną konsolą, która umożliwia graczom kontrolowanie gry przez wykonywanie określonych ruchów i gestów, jest Nintendo Wii. W przeciwieństwie do Xbox Kinect w tym wypadku do kontroli gry użytkownik stosuje specjalny kontroler Wii Remote, który posiada sensor optyczny, czujnik ruchu oraz przyspieszeniomierz. Wszystkie te komponenty zamontowane w kontrolerze pozwalają na manipulowanie obiektami oraz całą rozgrywką w pełnym wymiarze. Więcej informacji na temat Nintendo Wii znajdziesz na stronie http://www.nintendo.pl/. Podobnie jak ma to miejsce z kontrolerem Xbox Kinect, obsługa kontrolera Wii jest dostępna w aplikacjach Flash. Więcej informacji o możliwościach kontrolera Wii oraz sposobie jego zastosowania w aplakacjach Flash znajdziesz między innymi na stronie http://wiiflash.bytearray.org/.
548
Flash i ActionScript. Aplikacje 3D od podstaw
Z kolei na rysunku 13.12 przedstawiono stworzoną przez Dawson Design grę w golfa, w której wykorzystuje się kontroler konsoli Wii.
Rysunek 13.12. Gra stworzona przez studio Dawson Design dla prospects.ac.uk
Dużo ciekawych prezentacji aplikacji 3D napisanych w technologii Flash można zobaczyć na stronach YouTube oraz Vimeo. Studia na całym świecie, niezależni programiści oraz fanatycy tej technologii udowadniają, że można zrobić jeszcze więcej, a Adobe sukcesywnie przesuwa granice możliwości, pozwalając nam tym samym cieszyć się coraz ładniejszą i płynniejszą grafiką 3D wyświetlaną w naszych przeglądarkach.
Stage3D O przygotowaniu środowiska do Stage3D słów kilka W rozdziale 1. podałem instrukcje dotyczące skonfigurowania różnych edytorów tak, aby móc pracować z biblioteką Away3D 3.6. Większość pracy opierała się na odpowiednim wybraniu środowiska Flex i wersji odtwarzacza Flash Player. Wówczas do wyboru mieliśmy wersje Flash Playera 9 i 10, a o 11 tylko wspomnieliśmy, że taka będzie już niedługo dostępna. W chwili pisania tych słów Flash Player w wersji 11 jest już powszechnie stosowany, a jego najnowszą odsłoną lada chwila będzie 11.3. Pomimo że Adobe „idzie jak burza” w realizowaniu swoich celów i wypuszczaniu aktualizacji, nie wszystkie edytory zwiększają swoją funkcjonalność w tym samym tempie — zwyczajnie nie są dostosowane do najnowszej
Rozdział 13. Więcej zabawy z 3D
549
wersji Flash Playera. W przypadku darmowego edytora FlashDevelop sytuacja nie jest jeszcze tak zła, ponieważ wystarczy pobrać z oficjalnej strony wersję FD 4.x i można cieszyć się możliwościami Flash Playera w wersji co najmniej 11.0.1. Gorzej mają ci, którzy zaopatrzyli się w płatne oprogramowanie wypuszczone przed premierą Flash Playera 11. Użytkownicy np. programu Flash w wersji CS5 lub CS5.5, jeżeli chcą tworzyć aplikacje z wykorzystaniem nowych możliwości Flash Playera, powinni pobrać ze strony http://blogs.adobe.com/rgalvan/2011/11/adding-fp11-supportto-flash-pro-cs5-and-cs5-5.html specjalne rozszerzenie FP11Publish_cs5.mxp lub FP11Publish_cs55.mxp pozwalające na publikowanie projektów wspierających FP11. Po zainstalowaniu tego dodatku konieczne jest ponowne uruchomienie programu Adobe Flash. Jeżeli wszystko przebiegło bez problemów, to w ustawieniach projektu powinna pojawić się dodatkowa opcja w liście wyboru wersji odtwarzacza. Prawidłowy efekt przedstawiono na rysunku 13.13. Zwróć uwagę na dodatkowe pole Hardware Acceleration, w którym wybiera się rodzaj akceleracji GPU lub direct. Rysunek 13.13.
Zakładka ustawień Flash w oknie opcji projektu
550
Flash i ActionScript. Aplikacje 3D od podstaw
Jeżeli swoją aplikację Flash masz zamiar osadzić na stronie HTML, musisz pamiętać o zmianie wartości parametru wmode na direct, ponieważ tylko wtedy będzie dostępny Context3D. W przeciwnym wypadku w oknie przeglądarki pojawi się komunikat przedstawiony na rysunku 13.14.
Rysunek 13.14. Komunikat nieprawidłowej wartości wmode
Jeżeli korzystasz z programu Adobe Flash i zainstalowałeś wspomniane rozszerzenie, to przy odrobinie szczęścia w ustawieniach projektu, w zakładce HTML powinna pojawić się dodatkowa opcja Flash WMODE Direct, tak ja przedstawiono na rysunku 13.15. Rysunek 13.15.
Wybór szablonu Flash WMODE Direct dla projektu korzystającego z API Stage3D
Rozdział 13. Więcej zabawy z 3D
551
Nie we wszystkich przypadkach opcja ta pojawia się w liście Template, dlatego też wspomniałem o szczęściu. Jeżeli nie jest ona widoczna, to trzeba będzie samemu zmienić parametr wmode w kodzie HTML lub w skrypcie JavaScript (zależy od tego, czy korzystasz z swfobject). Na poniższym listingu przedstawiono przykładowe ustawienia swfobject oraz zwykłego obiektu object, w obu przypadkach z pogrubionymi ustawieniami parametru wmode.
Jeżeli dodanie nowego odtwarzacza Flash Player do programu Flash nie powiodło się przy pomocy wspomnianych rozszerzeń, można wykonać to manualnie. Cała operacja składa się z następujących kroków: 1. Pobierz ze strony http://www.adobe.com/support/flashplayer/ downloads.html plik playergobal.swc. 2. Przejdź do katalogu, w którym jest zainstalowany program Flash, a następnie do katalogu Common/Configuration/ActionScript 3.0 i utwórz w nim katalog FP11. 3. Przejdź do katalogu Common/Configuration/Players. Powinny się w nim znajdować pliki xml. 4. Zrób kopię jednego z tych plików, najlepiej z najwyższą numeracją, np. FlashPlayer10_1.xml, i zmień nazwę kopii na FlashPlayer11_0.xml.
552
Flash i ActionScript. Aplikacje 3D od podstaw
Jeżeli nie masz włączonego podglądu rozszerzeń plików, to przepisz samą nazwę bez .xml.
5. Otwórz plik xml w dowolnym edytorze i zamień linijki kodu na podane w poniższym listingu: Flash Player 11.0Device Central/adcdl.exeDevice Central/adcdl
6. Jeżeli posiadasz Adobe Flash w wersji CS5.5, przejdź do katalogu Common/First Run/Detection, uruchom plik xml i dodaj następujący wpis na początku pliku: 13 11000
W przypadku programu Flash Builder, aby móc eksportować aplikacje korzystające z Stage3D, trzeba w pierwszej kolejności pobrać najnowsze środowisko Flex lub przynajmniej w wersji 4.5.1 wraz z dedykowanym FP11 plikiem playerglobal.swc. Jeżeli nie ma takiego pliku, tak samo jak w poprzednim przypadku należy pobrać go ze strony http://www.adobe.com/support/flashplayer/downloads.html. Kolejnym krokiem jest utworzenie kopii najwyżej numerowanego środowiska FlexSDK domyślnie w katalogu Adobe/Adobe Flash Builder 4.5/SDK dla programu Flash Bulider 4.5. Mając gotową kopię, wypadałoby nazwać ją tak, by odróżniała się od pozostałych, np. dodając _FP11. Po tej czynności przejdź do katalogu frameworks/libs/player i stwórz nowy folder o nazwie 11.0. Do nowo utworzonego folderu skopiuj plik playerglobal.swc i już możesz dodać ścieżkę tego SDK w programie Flash Builder. Jeżeli pobierany plik playerglobal w swojej nazwie posiada jeszcze dodatkowe oznaczenia lub numery, zwyczajnie je usuń, pozostawiając tylko playerglobal.swc.
Rozdział 13. Więcej zabawy z 3D
553
W ustawieniach projektu pamiętaj tylko, aby wybrać Twoje zmodyfikowane SDK, następnie w sekcji opcji odtwarzacza Adobe Flash Player ręcznie wpisz wersję 11.0.0. Z kolei jako dodatkowy argument podaj nową wersję swf, tak jak to pokazano na rysunku 13.16.
Rysunek 13.16. Prawidłowe ustawienia wersji wtyczki Adobe Flash Player dla projektu korzystającego
z API Stage3D.
W przypadku jeszcze starszych wersji edytorów, np. FlashDevelop 3.3.4, istnieje „brudny” sposób na dodanie obsługi Flash Playera w wersji 11. Sztuczka ta polega na podmianie najwyższej, obsługiwanej wersji odtwarzacza w wybranym edytorze na wersję 11. Biorąc za przykład wspomniany FlashDevelop 3.3.4, aby „podkręcić” wersję wtyczki Flash Player, należy wykonać następujące kroki: 1. Jak w poprzednio opisanych przypadkach pobierz plik playerglobal.swc ze strony http://www.adobe.com/support/flashplayer/downloads.html. 2. Pobierz również nowe środowisko Flex SDK ze strony http://www.adobe.com/devnet/flex/flex-sdk-download.html lub innego źródła, w przypadku gdy potrzebujesz starszej wersji SDK.
554
Flash i ActionScript. Aplikacje 3D od podstaw
3. Pobrane archiwum wypakuj do katalogu, w którym są umieszczone inne wersje Flex SDK, np. /FlashDevelop/sdks/. 4. W nowo utworzonym katalogu SDK przejdź do folderu frameworks/libs/player/10.1 i podmień umieszczony tam plik playerglobal.swc tym, który pobrałeś osobno. Jeżeli nie ma takiego katalogu, to utwórz go i po prostu wklej playerglobal.swc. 5. Dodaj ścieżkę do tego środowiska w ustawieniach programu FlashDevelop, tak aby móc dodawać to SDK do przyszłych projektów. 6. W ustawieniach projektu pamiętaj, aby jako wersję odtwarzacza wybierać opcję Flash Player 10.1 — ze względu na wykonaną podmianę pliku w rzeczywistości będzie to wersja 11. 7. W dodatkowych ustawieniach kompilatora dopisz następujący wiersz: -swf-version=13, tak jak to pokazano na rysunku 13.17. Rysunek 13.17.
Prawidłowe ustawienie wersji wtyczki Adobe Flash Player w edytorze FlashDevelop
Na koniec wprowadź ustawienie, aby po kompilacji kodu aplikacja uruchamiała się jako osadzona w kodzie HTML w oknie przeglądarki. W ustawieniach projektu w sekcji Test Movie wybierz opcję Open Document i wpisz ścieżkę do pliku html. Domyślnie jest to lokalizacja bin/index.html (rysunek 13.18).
Rozdział 13. Więcej zabawy z 3D
555
Rysunek 13.18.
Określenie ścieżki do pliku HTML
W kodzie HTML pamiętaj o przypisaniu wartości direct parametrowi wmode. I to w sumie wszystko na temat przygotowania środowiska do uruchomienia aplikacji z użyciem Flash Playera 11. Istnieją jeszcze bardziej inwazyjne metody, polegające na nadpisywaniu starszych wersji SDK nowymi, w celu uzupełnienia braków, ale w przypadku użytkowników maców zdarza się to sporadycznie. Teraz przejdźmy do Stage3D.
Co to jest Stage3D? Stage3D (inna nazwa to Molehill) jest to API umożliwiające w pełni wykorzystywanie możliwości kart graficznych. Do niedawna wszystkie tworzone w technologii 3D aplikacje korzystały jedynie z procesora i (lub) w niewielkim stopniu z karty graficznej. Opisany w tej książce silnik oraz inne starsze silniki nakładały ograniczenia, których pokonanie było niemożliwe lub wymagało wiele sprytu i kompromisu ze strony programistów i grafików. Wraz z wypuszczeniem Flash Playera w wersji 11 rozpoczęła się rewolucja. Pojawiało się coraz więcej przykładów prezentujących nowe możliwości. Można powiedzieć, że zaczął się jawny wyścig zbrojeń pomiędzy ekipami tworzącymi silniki 3D w technologii Flash. Efekty uzyskiwane w Stage3D można śmiało porównać z niejedną grą dostępną na PC lub konsole, przy czym należy pamiętać, że widoczne efekty są uzależnione od posiadanej karty graficznej oraz jej integracji z wtyczką Flash Player.
556
Flash i ActionScript. Aplikacje 3D od podstaw
Na czym polega wykorzystanie kart graficznych? Na wyświetlenie naszego obiektu 3D składa się wiele procesów: od wyliczania pozycji, poprzez dokonywanie rozmaitych przekształceń aż do zrzutowania obiektu na płaszczyznę. Kiedyś wszystkie te operacje wykonywał procesor CPU, co w przypadku dużej ilości elementów lub ich złożonej konstrukcji wydłużało cały proces i spowalniało wyświetlanie efektów. W rozdziale poświęconym optymalizacji oraz w niektórych przykładach w innych rozdziałach przedstawiliśmy kilka dostępnych sposobów optymalizacji oraz śledzenia zużycia zasobów komputera potencjalnego użytkownika. Korzystając bezpośrednio z API Stage3D lub poprzez jeden z dostępnych silników, wszystkie obliczenia potrzebne do wyświetlenia grafiki przeniesione są na procesor graficzny GPU, co z kolei odciąża procesor CPU i pozwala mu zająć się innymi procesami. Jak zapewne wiesz, im lepsza karta graficzna, tym lepsze efekty wizualne (tak na marginesie: nie zawsze droższa oznacza lepszą). Rolą programisty jest zapewnienie możliwości wyboru poziomu detali i złożoności, tak aby każdy z użytkowników mógł dopasować wydajność aplikacji do posiadanego sprzętu. Warto pamiętać, aby nie kłaść nacisku na sam wygląd. Oczywiście, jest on istotny, ale znacznie ważniejsza jest płynność działania samej aplikacji. Pamiętaj, aby Twoje aplikacje tworzone z wykorzystaniem Stage3D utrzymywały się na poziomie 60 klatek wyświetlanych na sekundę w wysokiej rozdzielczości przy jak najmniejszym zużyciu zasobów procesorów i pamięci.
Gdzie umieszczony jest Stage3D? Dodanie nowej klasy Stage3D nie oznacza wcale, że zastąpiła ona „starą” klasę stołu montażowego Stage. Wszystkie aplikacje, jakie tworzyliśmy do tej pory w technologii Flash, posiadały hierarchię wyświetlanych obiektów nazywaną display list. Głównymi składnikami aplikacji tworzonej we Flashu były i są nadal zwykłe obiekty DisplayObject oraz DisplayObjectContainer, które mogły tworzyć swoją listę i w niej przechowywać inne obiekty. Korzystając z Away3D w wersji 3.6, w pierwszej kolejności musieliśmy umieścić na „stole montażowym” obiekt klasy widoku, a dopiero później w jej obrębie tworzyć trójwymiarową przestrzeń. A zatem czy Stage3D to kolejna klasa, której obiekt jest dodawany do zwykłego Stage jak inne obiekty graficzne? Odpowiedź brzmi: „Nie”. Adobe stworzyło nowe „obszary” dedykowane grafice trójwymiarowej, umieszczone pod warstwą, na której znajduje się Stage. Na rysunku 13.19 przedstawiono nową hierarchię w architekturze stołu montażowego.
Rozdział 13. Więcej zabawy z 3D
557
Rysunek 13.19.
Hierarchia w stole montażowym wtyczki Adobe Flash Player
Na tym rysunku widzimy, że na samym wierzchu umieszczona jest warstwa tradycyjnej listy wyświetlania, pod nią kolejne warstwy Stage3D i na samym końcu StageVideo. Istnieje możliwość stworzenia kilku naraz warstw Stage3D, do których można odwoływać się poprzez tablicę stage3Ds, ale trzeba mieć na uwadze fakt, że warstwy te nie są przezroczyste, tak jak zwykły Stage. Każda kolejna warstwa przykrywa poprzednio utworzoną. Można również przełączać się między warstwami, ustawiając odpowiednio wartości false oraz true właściwości visible.
Ograniczenia związane ze Stage3D Dla tych, którzy sądzili, że od teraz nie będą musieli przejmować się wyciekami pamięci, optymalizacją, rozsądnym rozporządzaniem zasobami, mam smutną wiadomość. Otóż będziecie musieli dbać o swój kod, mądrze korzystać z zasobów i, co najważniejsze, sprzątać po sobie. Nowe wersje wtyczki Adobe Flash Player zwiększają komfort pracy programisty, ale musicie pamiętać, że zawsze będą istnieć jakieś limity. Wcześniej wspomniałem, że programista powinien dbać o to, by jego aplikacja działała jak najbardziej płynnie, często rezygnując z różnych cieszących oko efektów. Adobe samo założyło kilka ograniczeń, które nie pozwolą na pełne wykorzystanie możliwości nowych kart graficznych. Dlaczego? Ponieważ nie każdy posiada super komputer, a Flash Player dostępny jest na wiele różnych platform, w tym na urządzenia mobilne, które rządzą się swoimi prawami, szczególnie w kwestii zarządzania pamięcią. Nie należy się jednak bać, wciąż można zrobić dużo fajnych rzeczy i zdecydowanie ładniejszych, niż do tej pory było to możliwe, trzeba tylko pilnować porządku w kodzie i dbać o unormowaną ilość zużywanych zasobów pamięci.
558
Flash i ActionScript. Aplikacje 3D od podstaw
W tabeli 13.5 przedstawiłem kilka limitów określonych przez Adobe. Można je również znaleźć w oficjalnej dokumentacji platformy Adobe Flash Player. Tabela 13.5. Limity dotyczące zasobów
Zasób
Dozwolona liczba
Całkowita ilość pamięci
Bufory wierzchołków
4096
256 MB
Bufory indeksów
4096
128 MB
Programy
4096
16 MB
Tekstury
4096
128 MB
Tekstury sześcienne
4096
256 MB
Jak korzystać ze Stage3D? Wiemy już, że Stage3D jest fajny, ale jak go wykorzystać? W dalszej części tego rozdziału przedstawię przykład aplikacji napisanej z wykorzystaniem tego API. Stage3D znosi wiele dotychczasowych ograniczeń, ale jednocześnie wymaga nowego podejścia do tworzenia aplikacji. Jak zwykle w tej branży, nic nie stoi w miejscu i stale trzeba się rozwijać. Istnieją dwie drogi do pisania aplikacji z użyciem Stage3D. Pierwsza z nich wymaga poświęcenia i chęci zdobycia nowej wiedzy z dziedziny niskopoziomowego programowania. W tym miejscu pojawiają się pojęcia Context3D, Shader oraz AGAL, o których jeszcze wspomnimy za chwilę. Drugą ścieżką jest skorzystanie z gotowych silników opartych na Stage3D, które mają zapewnić oczekiwane efekty bez konieczności wdrażania się w sposób ich realizowania. W przypadku grafiki 3D większość silników wymienionych w rozdziale 1. w swoich obecnych wersjach bazuje na Stage3D. My przejdziemy teraz przyspieszony kurs najnowszej odsłony Away3D, uzupełniając dotychczasową wiedzę. W chwili obecnej najbardziej popularnymi silnikami do prezentowania grafiki 2D opartej na Stage3D są: Starling oraz ND2D. Warto zapoznać się z którąś z tych bibliotek, ponieważ można się nimi posłużyć do wyświetlania interfejsu. W Stage3D, pomimo tego, co wskazuje nazwa, nie jesteśmy ograniczeni jedynie do grafiki 3D, możemy również tworzyć aplikacje dwuwymiarowe. Wyświetlanie skomplikowanych grafik wektorowych jest złożonym procesem, więc nie ma sensu obciążać nim procesora CPU, lepiej przerzucić cały proces do GPU. Czyli nawet jeżeli w Stage3D tworzymy np. zwykłą grę platformową, to i tak jest już ona renderowana z użyciem karty graficznej.
Rozdział 13. Więcej zabawy z 3D
559
Podstawowe pojęcia związane ze Stage3D W poprzednich rozdziałach wyjaśnione zostały podstawowe pojęcia związane z grafiką trójwymiarową, ale musimy uwzględnić jeszcze kilka dodatkowych, aby pokazać, w jaki sposób wyświetlana jest grafika w Stage3D. W kolejnych podpunktach przypomnimy to, czego już się dowiedzieliśmy i co powinniśmy zapamiętać: Vertex — pojedynczy punkt w przestrzeni trójwymiarowej określony współrzędnymi x, y oraz z. Mesh — kontener lub grupa obiektów Face, Segment, Sprite3D. Face — powierzchnia określona trzema punktami Vertex. Obiekt ten można pokryć materiałem, ale sam w sobie nie jest widoczny, musi być zawarty w obiekcie klasy Mesh lub pochodnym od niej. Polygon — wielokąt stosowany do tworzenia złożonych siatek obiektów trójwymiarowych. Material — różnego rodzaju pokrycia, „materiały” stosowane na powierzchni trójwymiarowego obiektu. Texture — jeden z rodzajów materiałów, który pokrywa powierzchnię obiektu bitmapą. Sprite3D — dwuwymiarowy prostokąt wyświetlany w przestrzeni trójwymiarowej, zawsze skierowany w stronę kamery. Object3D — podstawowa klasa dla obiektów trójwymiarowych. Vector3D — przechowuje współrzędne na osiach: x, y oraz z. Na jego podstawie określa się wektory kierunkowe oraz normalne. Matrix3D — określa położenie, kąty nachylenia oraz skalę trójwymiarowego obiektu. Poza tym dowiemy się teraz, czym są: Context3D, IndexBuffer3D, Shader, Vertex Shader, Fragment Shader.
Context3D Stage3D sam w sobie nie jest tak istotny jak Context3D, ponieważ to właśnie Context3D udostępnia powierzchnię, na której rysowane są elementy 3D. W zależno-
ści od tego, czy jest obsługiwany procesor graficzny, elementy kontekstu mogą być renderowane z jego użyciem lub w sposób tradycyjny, czyli programowalny.
560
Flash i ActionScript. Aplikacje 3D od podstaw
Jeżeli trybem renderowania jest software, to warstwy Stage3D są niedostępne, a właściwość stage3Ds zawiera pustą tablicę. Obiektu tej klasy nie można stworzyć w tradycyjny sposób, ponieważ jest on ściśle powiązany z obiektem klasy Stage3D. Zamiast tego na obiekcie Stage3D można wywołać metodę requestContext3D(), która generuje żądanie utworzenia obiektu Context3D. Na każdy obiekt klasy Stage3D może być przypisany tylko jeden obiekt Context3D, czyli nie ma możliwości tworzenia wielu kontekstów do różnych celów, zamiast tego można dany kontekst usunąć i stworzyć nowy. W tabelach 13.6 i 13.7 są wypisane parametry oraz metody klasy Context3D. Tabela 13.6. Parametry klasy Context3D
Nazwa
Rodzaj
Wartość
Opis
driverInfo
String
""
Zwraca typ sterownika używany w kontekście.
enableErrorChecking
Boolean
false
Określa, czy błędy występujące podczas renderowania mają być zgłaszane.
Określa, które składniki danych wierzchołków odpowiadają pojedynczym danym wejściowym Vertex Shadera.
IndexBuffer3D Obiekt tej klasy przechowuje listę indeksów wierzchołków trójwymiarowych obiektów. Indeksy te są 16-bitowymi liczbami całkowitymi bez znaków, a ich maksymalna dostępna wartość równa jest 65 535. Obiekt tej klasy nie może być utworzony bezpośrednio poprzez konstruktor. Aby wywołać jego wystąpienie, należy odwołać się do metody createIndexBuffer() dostępnej w klasie Context3D. Do obiektu klasy IndexBuffer3D dane mogą być przekazywane w dwojaki sposób: poprzez tablicę Vector o elementach typu uint lub tablicę bajtów ByteArray. W tabeli 13.8 zostały wypisane dostępne metody dla klasy IndexBuffer3D. Tabela 13.8. Metody klasy IndexBuffer3D
Nazwa
Opis
dispose()
Zwalnia zasoby GPU natywnego skojarzonego z tym obiektem.
Przechowuje indeksy wierzchołków pobrane z tablicy Vector..
VertexBuffer3D Obiekt tej klasy to zestaw danych wierzchołków wysyłanych do kontekstu renderowania.
562
Flash i ActionScript. Aplikacje 3D od podstaw
Obiekt VertexBuffer3D pozwala na zdefiniowanie danych skojarzonych z każdym punktem w zestawie wierzchołków. Podobnie jak w IndexBuffer3D, tutaj również dane można przekazać poprzez tablicę bajtów lub tablicę Vector z elementami typu uint. Zastosowaniem VertexBuffer3D zajmiemy się jeszcze przy okazji omawiania rejestrów dostępnych w języku AGAL. W tabeli 13.9 zostały wypisane dostępne metody dla klasy VertexBuffer3D. Tabela 13.9. Metody klasy VertexBuffer3D
Nazwa
Opis
dispose()
Zwalnia wszystkie zasoby skojarzone z tym obiektem.
Wysyła dane zestawu punktów z tablicy wektorów do kontekstu renderowania.
Shader i Program3D Zapewne zdajesz sobie sprawę z tego, że wyświetlenie obrazu to złożony proces. Co prawda zadanie programisty korzystającego z gotowych środków ogranicza się do stworzenia obiektu konkretnej klasy oraz dodania go do sceny, ale jeśli programista zdecyduje się na poszerzanie horyzontów i zdobywanie doświadczenia w niskopoziomowym programowaniu, przytoczony proces będzie dużo bardziej złożony i zarazem kreatywny. Dlaczego kreatywny? Otóż w Stage3D wyświetlanie obiektu jest w pełni programowalne. Mając odpowiednią wiedzę i umiejętności, można samemu generować oczekiwane efekty bez zbędnego czekania, aż ktoś za nas rozwiąże zaistniały problem. Pojęcie shader określa wspomniany program napisany w języku niskopoziomowym, który obsługiwany jest przez GPU w odróżnieniu od standardowego kodu takiego jak ActionScript. Stosowanie shaderów w Stage3D możliwe jest poprzez specjalnie przygotowaną do tego celu klasę Program3D. Program3D można potraktować jako mediator, który odpowiada za komunikację pomiędzy kodem ActionScript a uruchomionym shaderem. Do stworzenia shadera niezbędne są dwa komponenty: Vertex Shader (nazywany również Vertex Program) oraz Fragment Shader (nazywany również Fragment Program), których omówieniem zajmiemy się w kolejnych podrozdziałach.
Rozdział 13. Więcej zabawy z 3D
563
Vertex Shader Vertex Shader to pierwszy z komponentów shadera, jaki omówmy. Jest on uruchamiany na wszystkich dostępnych punktach/wierzchołkach obiektu, aby nadać im odpowiednie wartości pozycji, kąta nachylenia, koloru, a następnie w formie tablicy przekazać te dane dalej do Fragment Shadera. Umiejętność stosowania Vertex Shadera jest istotna przy tworzeniu ciekawych efektów cząsteczkowych, przeobrażaniu struktury geometrycznej obiektów 3D zależnych od czynników zewnętrznych lub generowaniu najróżniejszych animacji.
Fragment Shader Można przyjąć, że Fragment Shader jest drugą warstwą całego programu. Sam z siebie nie zdziała wiele, jeżeli nie będzie posiadał informacji o powierzchni obiektu 3D, których dostarcza mu wcześniej opisany Vertex Shader. Rolą Fragment Shadera jest wizualizacja tekstury lub innego zastosowanego materiału na wybranym obiekcie 3D, na podstawie informację o tym, jakie są współrzędne tekstur oraz jaki jest układ całej siatki geometrycznej obiektu. Programując Fragment Shader, można ustalić, w jaki sposób materiał pokrywający powierzchnię obiektu 3D ma reagować na czynniki zewnętrzne, chociażby takie jak zastosowane światło.
Podstawowy szkielet dla aplikacji korzystającej ze Stage3D Po zapoznaniu się z API Stage3D oraz podstawowymi pojęciami z nim związanymi możemy stworzyć szkielet dla przyszłych aplikacji korzystających z jego dobrodziejstwa. Nie będzie on wyświetlał na ekranie jakiejkolwiek grafiki, ponieważ do tego celu musimy dopiero poznać sposób pisania kodu języka niskopoziomowego. W tej chwili stworzymy sam kontekst, który uzupełnimy w kolejnym przykładzie. package { import import import import import import import import
public class Main extends Sprite { private var context3D:Context3D;
564
Flash i ActionScript. Aplikacje 3D od podstaw private var stage3D:Stage3D; public function Main():void { if (stage) init(); else addEventListener(Event.ADDED_TO_STAGE, init); } private function init(e:Event = null):void { removeEventListener(Event.ADDED_TO_STAGE, init); stage3D = stage.stage3Ds[0]; stage3D.addEventListener(Event.CONTEXT3D_CREATE, context3DCreated); stage3D.requestContext3D(); } private function context3DCreated(e:Event):void { context3D = stage3D.context3D; context3D.configureBackBuffer(stage.stageWidth, stage.stageHeight, 4); addEventListener(Event.ENTER_FRAME, enterFrame); } private function enterFrame(e:Event):void { context3D.clear(); //... context3D.present(); } } }
Po skompilowaniu kodu w oknie odtwarzacza Flash Player nie pojawi się poza czarnym oknem nic nadzwyczajnego, ale jak już pisałem, jest to pierwszy krok do tworzenia aplikacji z bardziej zaawansowaną grafiką, niż do tej pory mieliśmy do czynienia. Przeanalizujmy teraz, co tak naprawdę zrobiliśmy. W pierwszej kolejności dodaliśmy potrzebne klasy, między którymi pojawiły się zupełnie nowe z pakietu flash.display3D. import import import import import
Klasy Context3DProgramType oraz Context3DVertexBufferFormat definiują odpowiednie wartości dla shadera i bufora wierzchołków. Z obu będziemy korzystali dopiero w następnym przykładzie, ale warto już teraz dodać je do źródła i traktować jako część szkieletu.
Rozdział 13. Więcej zabawy z 3D
565
Jeżeli kod nie skompilował się poprawnie, a Twój edytor wyświetlił komunikaty, że nie mógł odszukać którejś z powyższych klas, to upewnij się, czy w ustawieniach projektu korzystasz z Adobe Flash Player co najmniej w wersji 11.0.1.
Następnie zdefiniowaliśmy obiekt klasy Context3D i Stage3D, które muszą być dostępne w całym ciele klasy, podobnie jak tworzony we wcześniejszych przykładach widok czy też scena Away3D. W konstruktorze nasłuchujemy zdarzenia Event.ADDED_TO_STAGE. W chwili jego wystąpienia wywoływana jest metoda init(). W niej z kolei obiektowi stage3D przypisaliśmy pierwszą na liście warstwę Stage3D, a następnie nasłuchujemy zdarzenie utworzenia kontekstu. Jak wiemy, nie mogliśmy stworzyć go jak zwykłego obiektu, lecz musieliśmy wywołać metodę requestContext3D() na obiekcie stage3D. Po utworzeniu kontekstu przypisaliśmy go do obiektu context3D i stworzyliśmy widok, wywołując metodę configureBackBuffer(), podając wymiary okna aplikacji i nadając poziom wygładzania krawędzi. context3D = stage3D.context3D; context3D.configureBackBuffer(stage.stageWidth, stage.stageHeight, 4);
W metodzie wywoływanej przy każdorazowym wystąpieniu zdarzenia Event.ENTER_ wywołaliśmy dwie metody: czyszczenia buforu kontekstu i jego ponownego wyświetlenia.
FRAME, na obiekcie context3D context3D.clear(); //... context3D.present();
Pomiędzy nimi pozostawiliśmy wolne miejsce, które uzupełnimy kodem rysującym dowolny obiekt. Kolejność renderowania jest taka, że najpierw należy wyczyścić to, co już zostało wyświetlone, zwolnić miejsce, uzupełnić nowymi danymi i ponownie wyświetlić bufor.
AGAL No dobrze, mamy już pojęcie, czym jest shader, wiemy również, że jego składowymi są Vertex Shader i Fragment Shader. To, czego jeszcze nie wiemy, to jak się nimi posługiwać i stworzyć taki program shadera. W tym miejscu wkracza język AGAL. Pozwólmy sobie na kilka słów wstępu i wyjaśnień, zanim do niego przejdziemy. Jak wspomniałem wcześniej, programowanie w niskopoziomowym języku jest bardziej zaawansowane niż stosowanie gotowych silników, dlatego przyjrzymy się
566
Flash i ActionScript. Aplikacje 3D od podstaw
temu zagadnieniu tylko powierzchownie. Opisywanie zaawansowanych przykładów shadera wprowadziłoby dodatkowe zamieszanie; chcemy tu jedynie ogólnie przedstawić ideę programowania niskopoziomowego.
Co to jest AGAL? AGAL (skrót od Adobe Graphics Assembly Language) to niskopoziomowy język programowania złożony z około trzydziestu komend określanych jako . Każdą z komend zapisuje się w nowym wierszu, przypisując cel oraz wartości, na których wykonana ma być dana operacja . Składnia jednego wiersza w języku AGAL wygląda w następujący sposób:
Jak widać, nie jest to wcale takie skomplikowane. Ważne jest, aby umieć czytać kod ze zrozumieniem. Jednym z najprostszych przykładów komend języka AGAL jest kopiowanie wartości, które wygląda w następujący sposób: mov v0, va1
W powyższej linijce kodu poprzez zastosowanie komendy mov dane z va1 zostały przeniesione do v0. Użyte v0 i va1 nazywamy rejestrami określającymi miejsca w pamięci, na których wykonywana jest operacja. Ot, cała komenda. Gdy poznasz większość z nich, zdasz sobie sprawę z tego, że nie sam język jest trudny, lecz to, co się w nim tworzy.
Podstawowe komendy języka AGAL Komendy dostępne w języku AGAL ze względu na swoje działanie dzielą się na następujące grupy: lokujące w pamięci, algebraiczne, arytmetyczne, trygonometryczne, warunkowe, operujące na teksturach, wektorach oraz macierzach. Jak wspomniałem w poprzednim podrozdziale, łącznie jest ich niewiele ponad trzydzieści, ale do napisania prostego programu shadera nie trzeba używać wszystkich. W ramach wprowadzenia do samego języka AGAL w tabeli 13.10 umieszczone zostały niektóre z najczęściej stosowanych komend. Tabela 13.10. Podstawowe komendy języka AGAL
Nazwa Działanie
Opis
mov
destination = source1
Kopiowanie danych z wybranego źródła
add
destination = source1 + source2
Dodawanie wartości podanych rejestrów
sub
destination = source1 - source2
Odejmowanie wartości podanych rejestrów
Rozdział 13. Więcej zabawy z 3D
567
Tabela 13.10. Podstawowe komendy języka AGAL (ciąg dalszy)
Nazwa Działanie
Opis
mul
destination = source1 * source2
Mnożenie wartości dwóch podanych rejestrów
div
destination = source1 / source2
Dzielenie wartości dwóch podanych rejestrów
rcp
destination = 1/source1
Odwrotność wartości podanego rejestru
neg
destination = -source1
Negacja wartości podanego rejestru
sin
destination = sin(source1)
Wyliczenie sinusa z wartości podanego rejestru
cos
destination = cos(source1)
Wyliczenie cosinusa z wartości podanego rejestru.
min
destination = min(source1, source2) Wyznaczenie najmniejszej wartości z podanych
rejestrów max
destination = max(source1, source2) Wyznaczenie największej wartości z podanych
rejestrów sqt
destination = sqrt(source1)
Wyliczenie pierwiastka kwadratowego z wartości podanego rejestru
rsq
destination = 1/sqrt(source1)
Wyliczenie odwrotności pierwiastka kwadratowego z wartości podanego rejestru
pow
destination = pow(source1, source2)
Podniesienie wartości pierwszego rejestru do potęgi równej wartości drugiego
m44
Pomnożenie 4-elementowego wektora z pierwszego rejestru i macierzy kwadratowej 4×4 z drugiego rejestru
tex
Połączenie tekstury z drugiego rejestru ze współrzędnymi UV pierwszego rejestru
Rejestry w języku AGAL W objaśnieniu składni języka AGAL, jak i opisach komend w tabeli 13.10 wielokrotnie użyłem określenia „rejestr”. Rejestrem jest powierzchnia pamięci zajmująca 128 bitów, która przechowuje cztery wartości określające położenie na osi współrzędnych lub kolor RGB. Każda z tych wartości jest nazywana komponentem rejestru, do którego można odwołać się w podobny sposób jak w regularnych językach takich jak ActionScript. W poniższej linijce przedstawiono sposób, w jaki należy odczytać wartość określającą współrzędną na osi x rejestru va0: va0.x //czyli .
W języku AGAL jest dostępnych sześć różnych rodzajów rejestrów.
568
Flash i ActionScript. Aplikacje 3D od podstaw
Attribute Registers Tego rodzaju rejestry dostępne są jedynie w Vertex Shader, dlatego że odnoszą się do danych (pozycji, koloru itd.) umieszczonych w buforze wierzchołka. Dane skojarzone z poszczególnymi wierzchołkami są przechowywane w formacie zdefiniowanym przez aplikację i są stosowane jako parametry wejściowe Vertex Shader. Do określenia, które składniki danych wierzchołka VertexBuffer3D odpowiadają pojedynczym danym wejściowym Vertex Shader, stosuje się metodę setVertexBufferAt() dostępną w klasie Context3D. Może to brzmieć nieco zawile, ale w głównej mierze chodzi o to, że każdy z wierzchołków posiada swoją przestrzeń VertexBuffer, w której przechowuje dane na swój temat tak, aby Vertex Shader miał na czym operować. W kodzie shadera, aby uzyskać dostęp do tego typu rejestru, należy zastosować składnię va, gdzie określa numer indeksu.
Constant Registers Rejestry tego rodzaju służą do przekazywania parametrów z ActionScript do shaderów. W tym celu należy zastosować metodę setProgramConstants() dostępną w klasie Context3D. Z poziomu shadera istnieje 128 rejestrów tego typu, a odwołać się do nich można dzięki zastosowaniu składni vc, gdzie oznacza numer indeksu.
Temporary Registers W języku AGAL nie ma mowy o korzystaniu ze zmiennych, ponieważ takowe nie istnieją. Na potrzeby przechowywania wyliczeń lub innych danych w samym bloku kodu, stworzono rejestry tymczasowe. Stosuje się je poprzez składnię vt, gdzie oznacza numer indeksu. Z poziomu Vertex Shadera istnieje osiem tymczasowych rejestrów.
Output Registers Tego typu rejestry są stosowane do przechowywania danych wspólnych wyliczeń Vertex Shadera i Fragment Shadera. Z poziomu Vertex Shadera wyliczenia te określają pozycje wierzchołka, a z poziomu Fragment Shadera jego kolor. Aby odwołać się do tego rodzaju rejestru z Vertex Shadera, należy zastosować składnię op,
Rozdział 13. Więcej zabawy z 3D
569
a z Fragment Shadera — oc. Tego rodzaju odmienne odwołania nie oznaczają wcale, że istnieją dwa różne rejestry dla jednego wierzchołka, po prostu op, jak i oc zwracają odpowiednie dla swojego rodzaju dane z jednego rejestru.
Varying Registers Do przekazywania danych z Vertex Shadera do Fragment Shadera służą rejestry tego rodzaju. Dane, jakie otrzymuje Fragment Shader, mogą określać kolor piksela lub współrzędne UV dla tekstury. Z poziomu shadera rejestry tego typu są dostępne poprzez składnię v, gdzie tak jak i w poprzednich przypadkach również określa numer indeksu.
Texture Samplers Registers Tego rodzaju rejestry służą do pobierania wartości koloru z konkretnej pozycji UV na teksturze. Aby zastosować ten rejestr, należy posłużyć się składnią fs, w której oznacza numer indeksu, a to zestaw nazw „flag” oddzielonych przecinkiem, określających sposoby próbkowania. Oto zestaw dostępnych flag: wymiary tekstury: 2d cube mip mapping: nomip mipnearest miplinear powielanie tekstury: repeat wrap clamp filtrowanie tekstur: nearest linear
570
Flash i ActionScript. Aplikacje 3D od podstaw
Zastosowanie kodu AGAL wraz z ActionScript Nadszedł czas, aby stworzyć pierwszą aplikację z wykorzystaniem Stage3D oraz kodu AGAL. Zanim jednak przystąpimy do działania, musimy zapoznać się z klasą pomocniczą o nazwie AGALMiniAssembler. Następnie napiszemy króciutki kod AGAL i zastosujemy go w poprzednio opisanym przykładzie tworzenia widoku Stage3D. Efekt, jaki uzyskamy, przedstawiono na rysunku 13.20.
Rysunek 13.20. Zrzut ekranu z przykładu zastosowania kodu AGAL z językiem ActionScript 3.0
AGALMiniAssembler Jest to niewielka, ale bardzo przydatna klasa, dzięki której można przetłumaczyć kod AGAL podany jako String na kod bajtowy, zrozumiały dla naszej karty graficznej. Pliki AGALMiniAssembler można znaleźć pod adresem: http://www.bytearray.org/ wp-content/projects/agalassembler/com.zip. Pobierz i wypakuj zawartość podanego archiwum. Powinien się w nim znajdować katalog com. Skopiuj go do katalogu, w którym umieszczone są pliki kodu źródłowego Twojej aplikacji. Klasa AGALMiniAssembler znajduje się w pakiecie
Rozdział 13. Więcej zabawy z 3D
571
com.adobe.utils. Jeżeli nie widzisz jej w swoim projekcie, to sprawdź, czy podałeś prawidłową ścieżkę lub czy zawartość pobranego archiwum nie ma innej struktury katalogów niż com/adobe/utils.
Po udanym zaimportowaniu tej klasy możemy jej użyć. W tym celu w pierwszej kolejności trzeba stworzyć obiekt klasy AGALMiniAssembler. var vertexShaderAssembler:AGALMiniAssembler = new AGALMiniAssembler();
Ponieważ każdy obiekt tej klasy przechowuje jeden skompilowany kod, bardzo prawdopodobne jest to, że będziesz korzystał z kilku takich obiektów. Dlatego dobrą praktyką jest odpowiednie ich nazywanie w zależności od zadania skompilowanego kodu oraz typu.
Aby użyć tego obiektu do skompilowania kodu AGAL, należy wywołać na nim metodę asseble(), podając w jej argumentach w pierwszej kolejności typ programu: VERTEX lub FRAGMENT korzystając ze stałych klasy Context3DProgramType. Po ustaleniu typu programu należy podać kod AGAL w postaci obiektu String, tak jak to przedstawiono na następującym listingu: vertexShaderAssembler.assemble(COntext3DProgramType.VERTEX, "m44 op, va0, vc0\n"+ "mov v0, va1");
Do przetłumaczonego w ten sposób kodu można odwołać się poprzez parametr agalcode dostępny w obiekcie klasy AGALMiniAssebler, którego użyliśmy do kompilacji. W tabelach 13.11 i 13.12 są wypisane parametry oraz metody klasy AGALMini Assembler. Tabela 13.11. Parametry klasy AGALMiniAssembler
Nazwa
Rodzaj
Wartość
Opis
agalcode
ByteArray
error
String
""
Treść ewentualnego wystąpienia błędu podczas kompilacji
verbose
Boolean
false
Określa, czy proces kompilacji ma być raportowany w postaci logów.
Kompiluje podany kod w postaci tekstowej na tablicę bajtów.
572
Flash i ActionScript. Aplikacje 3D od podstaw
Przykład Nadszedł czas, aby napisać nasz pierwszy przykład z wykorzystaniem kodu AGAL. Najpierw napiszemy kod wyświetlający prostokąt pokryty teksturą, tak jak to przedstawiono na rysunku 13.20. Zacznijmy od przyjrzenia się samemu kodowi AGAL, jaki wykorzystamy do Vertex Shadera i Fragment Shadera. Kod Vertex Shadera: m44 op, va0, vc0 mov v0, va1
W pierwszej linijce powyższego kodu użyliśmy komendy m44, która wykonuje mnożenie dwóch macierzy o wymiarach 4×4. Wynik tych obliczeń zapisywany jest jako rejestr op. Pierwsza macierz zapisana w va0 zawiera dane dotyczące pozycji wierzchołka, z kolei vc0 określa pozycję względem „kamery”. O tym, skąd będziemy znali wartość vc0, powiem w dalszej części tego podrozdziału. W drugiej linijce zapisaliśmy komendę mov, która powoduje skopiowanie zawartości va1 do rejestru v0. Dane przechowywane w tym rejestrze określają współrzędne UV danego wierzchołka potrzebne do ustalenia kolorów pikseli. Kod Fragment Shadera: tex ft1, v0, fs0 <2d,linear,nomip> mov oc, ft1
W pierwszej linijce kodu zastosowaliśmy komendę tex, dzięki której pobraliśmy dane piksela z rejestru v0 i zapisaliśmy je w tymczasowym rejestrze ft1. Na sąsiednich pikselach stosowana jest interpolacja liniowa bez użycia mipmap. W ten sposób otrzymana wartość koloru RGBA kopiowana jest komendą mov do rejestru oc. Teraz oba programy musimy wykorzystać w kodzie ActionScript. W tym celu posłużymy się obiektem klasy AGALMiniAssembler, aby uzyskać gotowy Shader i wykorzystać go w czasie renderowania sceny. Część kodu z poniższego przykładu została już wcześniej omówiona, dlatego skupimy się tylko na konkretnych fragmentach poniższego listingu. W pierwszej kolejności zwróć uwagę na klasę PerspectiveMatrix3D, która będzie nam potrzebna do poprawnego wyświetlania obiektu na scenie. package { import import import import import
public class Stage3DExample extends Sprite { [Embed(source="../assets/flashlogo.jpg")] public var FlashJPG:Class; private private private private private private
Po skompilowaniu powyższego kodu na ekranie powinien pojawić się prostokąt pokryty teksturą ze znaną nam literką „f”. Jeżeli nie pobrałeś kodów źródłowych przygotowanych dla tej książki, możesz użyć własnej tekstury, pamiętaj tylko o podaniu prawidłowej lokalizacji. W ciele klasy Stage3DExample w pierwszej kolejności zdefiniowaliśmy odpowiednie obiekty, poza poznanymi już wcześniej zapisaliśmy również obiekt klasy Texture zlokalizowanej w pakiecie flash.display3D.textures, który posłuży jako kontener dla bitmapy z pobranego obrazka. W poprzednim przykładzie klasy bazowej dla Stage3D metoda context3DCreated() zawierała jedynie trzy linijki kodu, teraz umieścimy w nim całą procedurę tworzenia Shadera. W pierwszej kolejności stworzyliśmy obiekt Vector zawierający współrzędne x, y, z, u, v dla każdego z wierzchołków naszego prostokąta. var vertices:Vector. = Vector.([ .5, -.5, 0, 0, 0, .5, .5, 0, 0, 1, -.5, .5, 0, 1, 1, -.5, -.5, 0, 1, 0 ]);
Podane wartości są oczywiście przykładowe i mogą być dowolnie modyfikowane, jednak w takiej postaci powodują prawidłowe wyświetlenie tekstury na powierzchni prostokąta. Mając określone pozycje wierzchołków, stworzyliśmy obiekt VertexBuffer3D poprzez wywołanie metody createVertexBuffer() na obiekcie context3D. Aby określić „obszar” zajmowany przez ten obiekt, we wspomnianej metodzie podaliśmy w pierwszej kolejności liczbę ilość wierzchołków, a następnie podaliśmy ilość danych, jakie przypadają na każdy z nich. Dane z obiektu vertices przekazaliśmy do vertexBuffer3D za pomocą metody uploadFromVector(), podając również indeks pierwszego wierzchołka i liczbę wierzchołków. vertexBuffer3D = context3D.createVertexBuffer(4, 5); vertexBuffer3D.uploadFromVector(vertices, 0, 4);
Na obiekcie context3D wywołaliśmy metodę createIndexBuffer, tym samym stworzyliśmy obiekt vertexBuffer3D przechowujący listę sześciu indeksów wierzchołków. Następnie wywołaliśmy metodę uploadFromVector(), podając tablice indeksów, offset oraz liczbę indeksów. W naszym przykładzie kolejność podana w tablicy jest istotna
576
Flash i ActionScript. Aplikacje 3D od podstaw
— tworzone dwa trójkąty nie powinny nachodziły na siebie, tzn. równie dobrze w naszym przypadku zadziała następująca kombinacja: 1, 0, 2, 2, 0, 3, przyjmując, że wierzchołki 0, 1, 2 tworzą pierwszy trójkąt, a wierzchołki 0, 2, 3 — drugi. Sytuacja staje się bardziej skomplikowana, gdy chcemy wyrenderować np. sześcian. Wtedy trzeba ustawić poprawną kolejność indeksów, aby wygenerowane trójkąty nie przenikały się nawzajem. indexBuffer3D = context3D.createIndexBuffer(6); indexBuffer3D.uploadFromVector (Vector.([2, 1, 0, 2, 3, 0]), 0, 6);
Następną czynnością, jaką musieliśmy wykonać, było stworzenie tekstury. W tym celu posłużyliśmy się metodą createTexture(), podając wymiary z obiektu BitmapData pobranej bitmapy i określając format tekstury o następującej kolejności kolorów: blue, green, red, alpha. Po utworzeniu tekstury użyliśmy metody uploadFromBit mapData(), aby przypisać jej obiekt BitmapData obiektu bitmap, podobnie jak przy stosowaniu materiałów TextureMaterial w Away3D. var bitmap:Bitmap = new FlashJPG(); texture = context3D.createTexture(bitmap.bitmapData.width, bitmap.bitmapData.height, Context3DTextureFormat.BGRA, false); texture.uploadFromBitmapData(bitmap.bitmapData);
W kolejnych linijkach stworzyliśmy obiekty programów dla naszego Shadera. Stosując klasę AGALMiniAssembler, stworzyliśmy obiekty vertexShaderAssembler oraz fragmentShaderAssembler, następnie wywołaliśmy na nich metodę assemble(), podając odpowiedni typ i kod AGAL. var vertexShaderAssembler:AGALMiniAssembler = new AGALMiniAssembler(); vertexShaderAssembler.assemble(Context3DProgramType.VERTEX, "m44 op, va0, vc0\n" + "mov v0, va1" ); var fragmentShaderAssembler:AGALMiniAssembler= new AGALMiniAssembler(); fragmentShaderAssembler.assemble( Context3DProgramType.FRAGMENT, "tex ft1, v0, fs0 <2d,linear,nomip>\n" + "mov oc, ft1" );
Mając gotowe obiekty programów Vertex Shader oraz Fragment Shader, mogliśmy stworzyć nasz główny program. Do tego celu posłużyliśmy się obiektem context3D i jego metodą createProgram(). W następnej kolejności stworzyliśmy obiekt program3D i poprzez metodę upload() i załadowaliśmy skompilowane kody AGAL, przechowywane w obiektach vertexShaderAssembler i fragmentShaderAssembler. program3D = context3D.createProgram(); program3D.upload(vertexShaderAssembler.agalcode, fragmentShaderAssembler.agalcode);
I to tyle, jeśli chodzi o metodę context3DCreated(). Kolejne zadania przejmuje metoda enterFrame(), która jak wiemy, wywoływana jest przy każdym wystąpieniu zdarzenia Event.ENTER_FRAME.
Rozdział 13. Więcej zabawy z 3D
577
W pierwszej linijce metody enterFrame() czyścimy kontekst i wypełniamy jego powierzchnię białym kolorem. context3D.clear(1,1,1,1);
Po wyczyszczeniu widoku wywołując metodę setVertexBufferAt() na obiekcie context3D, przekazaliśmy dane pozycji wierzchołka do rejestru o indeksie 0, czyli naszego va0 z kodu Vertex Shadera. context3D.setVertexBufferAt (0, vertexBuffer3D, 0, Context3DVertexBufferFormat.FLOAT_3);
Idąc dalej tym tropem, przekazaliśmy również współrzędne UV do rejestru va1 używanego w komendzie mov zastosowanej w naszym kodzie Vertex Shadera. context3D.setVertexBufferAt(1, vertexBuffer3D, 3, Context3DVertexBufferFormat.FLOAT_2);
Z kolei do kodu Fragment Shadera przypisaliśmy wcześniej utworzony obiekt texture, potrzebny do określania kolorów pikseli. context3D.setTextureAt(0, texture);
Po wykonaniu powyższych czynności mogliśmy zastosować nasz shader do renderowania. W tym celu wywołaliśmy metodę setProgram(). context3D.setProgram(program3D);
Do prawidłowego wyświetlania animacji obrotu prostokąta na osiach x oraz y potrzebowaliśmy stworzyć taką perspektywę, jaka jest stosowana np. w Away3D. Taki efekt można uzyskać poprzez zastosowanie odpowiednich obliczeń z użyciem obiektów klas Matrix3D i Vector3D, ale my poszliśmy prostszą drogą, stosując gotowe rozszerzenie do klasy Matrix3D. Adobe przygotowało klasę PerspectiveMatrix3D, która zaopatrzona jest w kilka przydatnych metod wykonujących potrzebne obliczenia w zależności od wyboru rodzaju perspektywy. W naszym przypadku zastosowaliśmy perspectiveFieldOfViewLH(), ponieważ układ współrzędnych, jaki do tej pory stosowaliśmy, opierał się na tak zwanym układzie lewej dłoni. Wywołując metodę perspectiveFieldOfViewLH(), podaliśmy pole widzenia, proporcje obrazu i przedział, w którym obiekty na osi Z są wyświetlane. var projection:PerspectiveMatrix3D = new PerspectiveMatrix3D(); projection.perspectiveFieldOfViewLH(45*Math.PI/180, 4/3, 0.1, 1000);
Mając ustaloną perspektywę, należało określić prędkość, kierunek oraz przede wszystkim osie, na których będzie obracał się wyświetlany prostokąt. W tym celu skorzystaliśmy z metod appendRotation() oraz appendTranslation(). Po wykonaniu tych obliczeń dołączyliśmy macierz projection, stosując metodę append() na obiekcie matrix.
578
Flash i ActionScript. Aplikacje 3D od podstaw
Mając ustaloną perspektywę, należało określić prędkość, kierunek oraz przede wszystkim osie, na których będzie obracał się wyświetlany prostokąt. W tym celu skorzystaliśmy z metod appendRotation() oraz appendTranslation(). Po wykonaniu tych obliczeń dołączyliśmy macierz projection, stosując metodę append() na obiekcie matrix. var matrix:Matrix3D = new Matrix3D(); matrix.appendRotation(getTimer() * .05, Vector3D.Y_AXIS); matrix.appendRotation(getTimer() * -.05, Vector3D.X_AXIS); matrix.appendTranslation(0, 0, 2); matrix.append(projection);
Po wykonaniu wszystkich potrzebnych obliczeń na macierzy matrix, można ją przekazać do shadera, gdzie jest przechowywana w rejestrze 0, na którym operuje Vertex Shader. context3D.setProgramConstantsFromMatrix(Context3DProgramType.VERTEX, 0, matrix, true);
Na koniec, aby wyświetlić trójkąty tworzące nasz prostokąt, wywołaliśmy metodę drawTriangles(), przekazując obiekt indexBuffer3D. context3D.drawTriangles(indexBuffer3D);
Away3D 4.x Away3D w wersji 4.x, czyli więcej zabawy (w dobrym znaczeniu), więcej mocy, mniej barier i to wszystko przy niewielkich różnicach w implementacji — tak bym jednym zdaniem określił przesiadkę z Away3D 3.6 na wersję 4.x. Od razu odniosę się do określenia wersji mianem 4.x. Otóż silnik ten nadal jest rozwijany do nowej, oficjalnej stabilnej wersji. Jeszcze wiele może się zmienić, dlatego gdy sięgniesz po tę książkę i dotrzesz do tego miejsca, jest bardzo prawdopodobne, że najnowsza odsłona Away3D będzie zdecydowanie nowsza. Numeracją wersji zupełnie się nie przejmuj. Pobierz jedną wersję, na niej się ucz, porównuj i analizuj, co nowego dobrego się pojawiło, a co zepsuło, bo tak też może się zdarzyć. W tym rozdziale przećwiczymy jeden przykład z zastosowaniem Away3D 4.x, w którym użyjemy kamer, obiektów, materiałów i światła, tak by dać Ci ogólny zarys i pokazać szybko, co fajnego można zrobić w nowym Away3D albo jak ładnie może to wyglądać. Pobieraj pliki i do dzieła.
Rozdział 13. Więcej zabawy z 3D
579
Instalacja biblioteki W zasadzie instalacja tej wersji nie różni się od instalacji poprzedniej wersji. Należy ściągnąć archiwum z jednego z dostępnych źródeł: http://away3d.com/download/ http://github.com/away3d/ http://away3d.googlecode.com/svn/ Zawartość archiwum trzeba wypakować i dodać do bibliotek projektu, pamiętając o strukturze katalogów. W źródłach Away3D 4.x pojawił się dodatkowy katalog pb zawierający pliki Pixel Bender, z których korzysta silnik, dlatego trzeba pamiętać również o jego uwzględnieniu w źródłach. Najlepiej jest stworzyć osobny folder, skopiować do niego zarówno pb, jak i src i określić ten folder jako źródło biblioteki Away3D.
Podstawowy przykład z kulą ziemską Czego możemy się spodziewać po nowym Away3D? Przede wszystkim wzrostu wydajności, polepszenia efektów wizualnych i dźwiękowych, zniesienia wielu barier związanych z software’owym renderowaniem. Z użyciem tego silnika powstało już kilkanaście ciekawych minigier oraz stron. Można je przejrzeć w galerii na stronie http://away3d.com. W poprzednim podrozdziale przedstawiliśmy przykład wyświetlenia obiektu podobnego do Plane, znanego z Away3D, pokrytego teksturą. Wymagało to poznania nowego języka AGAL choćby w minimalnym stopniu. Nadal twierdzę, że znajomość tego języka jest istotna z uwagi na to, że dzięki jego umiejętnemu wykorzystaniu można uzyskać lepsze efekty niż za pomocą niejednego gotowego silnika 3D. Nie oznacza to jednak, że silniki 3D są złe lub mało wydajne, niektóre rzeczy po prostu często można zrobić lepiej po swojemu. Wróćmy do Away3D. W kolejnych rozdziałach tej książki poznawaliśmy poszczególne tematy związane z programowaniem aplikacji 3D — od wyświetlania najprostszych obiektów po ich „ubieranie”, transformacje, osadzanie dźwięków w przestrzeni czy też wykorzystanie kamer 3D. W tym podrozdziale przedstawimy jeszcze jeden przykład związany z Away3D, tym razem z wykorzystaniem API Stage3D. W przykładzie tym wyświetlimy kulę ziemską złożoną z kilku warstw wraz z chmurami, umieszczoną w przestrzeni kosmicznej. Umieścimy również źródło światła, tak aby oświetlało ono jedną stronę naszego obiektu kuli ziemskiej, i dodamy
580
Flash i ActionScript. Aplikacje 3D od podstaw
kamerę zachowującą się jak HoverCamera3D. Użyłem określenia „zachowującą się”, ponieważ nie wszystko, co zaraz napiszemy, ma swoje odwzorowanie w klasach, które już poznaliśmy. Nie martw się tym jednak. Mając opanowane wiadomości z poprzednich rozdziałów, łatwo zmienisz podejście, a nawet w pewnych sytuacjach możesz stwierdzić, że nowe jest bardziej logiczne i wygodniejsze. Cały przykład umieścimy w jednej klasie bez rozdrabniania się na mniejsze, tak jak robiliśmy to np. w przykładach wykorzystania kamer 3D. W tej chwili chcemy jedynie zobaczyć, jak tworzy się aplikacje w nowym Away3D. Efekt, jaki uzyskamy po przepisaniu i skompilowaniu kodu źródłowego przykładu, przedstawiono na rysunku 13.21.
Rysunek 13.21. Zrzut ekranu z przykładu zastosowania Away3D 4.x
Może rysunek 13.21 nie oddaje tego w pełni, ale poziom szczegółów jest znacznie większy niż w poprzednio tworzonych przykładach z wizualizacją kuli ziemskiej.
Rozdział 13. Więcej zabawy z 3D
581
Do uzyskania efektu przedstawionego na rysunku 13.21 potrzebne będą konkretne tekstury, które dostępne są wraz z plikami kodu źródłowego tego przykładu na stronie ftp://ftp.helion.pl/przyklady/flacpo.zip. package { import import import import import import import import import import import import import import import import import import import import import
[SWF(backgroundColor="#000000", frameRate="60", width="1024", height="768")] public class Main extends Sprite { [Embed(source="../assets/earth.jpg")] public var EarthJPG:Class; [Embed(source="../assets/earthSpecular.jpg")] public var EarthSpecularJPG:Class; [Embed(source="../assets/earthNight.jpg")] public var EarthNightJPG:Class; [Embed(source="../assets/earthNormals.jpg")] public var EarthNormalsJPG:Class; [Embed(source="../assets/clouds.jpg")] public var CloudsJPG:Class; [Embed(source="../assets/space_posX.jpg")] public var PosXJPG:Class; [Embed(source="../assets/space_negX.jpg")]
582
Flash i ActionScript. Aplikacje 3D od podstaw public var NegXJPG:Class; [Embed(source="../assets/space_posY.jpg")] public var PosYJPG:Class; [Embed(source="../assets/space_negY.jpg")] public var NegYJPG:Class; [Embed(source="../assets/space_posZ.jpg")] public var PosZJPG:Class; [Embed(source="../assets/space_negZ.jpg")] public var NegZJPG:Class; private private private private private private private private private private private private private private
var var var var var var var var var var var var var var
public function Main():void { if (stage) init(); else addEventListener(Event.ADDED_TO_STAGE, init); } private function init(e:Event = null):void { removeEventListener(Event.ADDED_TO_STAGE, init); scene = new Scene3D(); camera = new Camera3D(); hoverCameraController = new HoverController(camera, null, 180, 0, 1000); view = new View3D(); view.scene = scene; view.camera = camera;
Rozdział 13. Więcej zabawy z 3D
583
addChild(view); initSpace(); initLights(); initEarth(); initClouds(); stage.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler); stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler); addEventListener(Event.ENTER_FRAME, onEnterFrame); } private function initLights():void { light = new PointLight(); light.x = 10000; light.ambient = 1; light.diffuse = 1; lightPicker = new StaticLightPicker([light]); } private function initEarth():void { earthSpecularBitmapData.colorTransform(earthSpecularBitmapData.rect, new ColorTransform(1, 1, 1, 1, 64, 64, 64)); var fresnelSpecular:FresnelSpecularMethod = new FresnelSpecularMethod(true); fresnelSpecular.fresnelPower = 1; fresnelSpecular.normalReflectance = 0.1; fresnelSpecular.shadingModel = SpecularShadingModel.PHONG; earthGeometry = new SphereGeometry(350,200,100); earthMaterial = new TextureMaterial(new BitmapTexture(new EarthJPG().bitmapData)); earthMaterial.normalMap = new BitmapTexture(new EarthNormalsJPG().bitmapData); earthMaterial.ambientTexture = new BitmapTexture(new EarthNightJPG().bitmapData); earthMaterial.specularMethod = fresnelSpecular; earthMaterial.specularMap = new BitmapTexture(new EarthSpecularJPG().bitmapData); earthMaterial.lightPicker = lightPicker; earthMaterial.gloss = 5; earthMaterial.specular = 1; earthMaterial.ambientColor = 0xFFF68F; earthMaterial.ambient = 1; earth = new Mesh(earthGeometry, earthMaterial); view.scene.addChild(earth); } private function initClouds():void {
584
Flash i ActionScript. Aplikacje 3D od podstaw var alphaClouds:BitmapData = new BitmapData(2048, 1024, true, 4294967295); alphaClouds.copyChannel(new CloudsJPG().bitmapData, alphaClouds. rect, new Point(), BitmapDataChannel.RED, BitmapDataChannel.ALPHA); cloudsGeometry = new SphereGeometry(360,200,100); cloudsMaterial = new TextureMaterial(new BitmapTexture(alphaClouds)); cloudsMaterial.alphaBlending = true; clouds = new Mesh(cloudsGeometry, cloudsMaterial); view.scene.addChild(clouds); } private function initSpace():void { spaceMaterial = new BitmapCubeTexture(new PosXJPG().bitmapData, new NegXJPG().bitmapData, new PosYJPG().bitmapData, new NegYJPG(). bitmapData, new PosZJPG().bitmapData, new NegZJPG().bitmapData); space = new SkyBox(spaceMaterial); view.scene.addChild(space); } private function mouseDownHandler(e:MouseEvent):void { lastPanAngle = hoverCameraController.panAngle; lastTiltAngle = hoverCameraController.tiltAngle; lastMouseX = stage.mouseX; lastMouseY = stage.mouseY; mouseMove = true; stage.addEventListener(Event.MOUSE_LEAVE, onStageMouseLeave); } private function mouseUpHandler(e:MouseEvent):void { mouseMove = false; stage.removeEventListener(Event.MOUSE_LEAVE, onStageMouseLeave); } private function onStageMouseLeave(e:Event):void { mouseMove = false; stage.removeEventListener(Event.MOUSE_LEAVE, onStageMouseLeave); } private function onEnterFrame(event:Event):void { earth.rotationY -= .025; clouds.rotationY -= .035; if (mouseMove) {
To cały kod źródłowy naszego przykładu. Teraz przyjrzyjmy się poszczególnym jego fragmentom, aby przedstawić różnice występujące między Away3D 3.6 a Away3D 4.x. Pierwsze importowane klasy dowodzą, że kod nie cały jest różny od tego, który już znamy, tzn. w Away3D 4.x również mamy podstawowe komponenty: View3D, Scene3D oraz Camera3D. W dalszej kolejności pojawiły się nowości w postaci klas HoverController, StaticLightPicker, FresnelSpecularMethod, SpecularShadingModel, SphereGeometry oraz BitmapCubeTexture. Pozostałe klasy są już nam dobrze znane. Nowe klasy omówimy według kolejności ich zastosowania w kodzie przykładu. Pierwsze różnice w stosunku do stosowania Away3D 3.6 widzimy już przy tworzeniu obiektu kamery w metodzie init(), a dokładniej w nadaniu jej funkcjonalności kamery HoverCamera3D. Otóż w nowej wersji Away3D (w nowszych prawdopodobnie również tak będzie), nie ma podziału na kamery, jakie znaliśmy z Away3D 3.6. Jest tylko jedna klasa kamery Camera3D umieszczona w pakiecie away3d.cameras, którą tworzy się identycznie, jak robiliśmy to do tej pory. Dla uzyskania efektu HoverCamera3D musieliśmy zastosować kontroler w postaci obiektu klasy HoverController z pakietu away3d.controllers, podając w jego argumentach obiekt kamery, granice kątów odchylenia oraz dystans. hoverCameraController = new HoverController(camera, null, 180, 0, 1000);
Widok oraz scenę w Away3D 4.x tworzy się w identyczny sposób jak w wersji 3.6, takie samo jest przypisywanie kamery do widoku, tutaj również stosuje się właściwość camera dostępną w obiekcie klasy View3D. Żeby uniknąć jednej długiej metody, w której wszystkie obiekty są tworzone i obsługiwane, podzieliliśmy kod na drobniejsze fragmenty i umieściliśmy w metodach, których nazwy określają ich zadanie. Zaczynając od initSpace() — wywołania tej metody tworzy panoramę przestrzeni kosmicznej. W tym celu użyliśmy klasy SkyBox umieszczonej w pakiecie away3d.primitives. W porównaniu do klas panoram z biblioteki Away3D 3.6 klasie SkyBox w sposobie implementacji i działania bliżej do znanej nam klasy SkyBox6. Tutaj panorama ma postać sześcianu, który odpowiednio
586
Flash i ActionScript. Aplikacje 3D od podstaw
wypełnia całą przestrzeń widoku, a tekstury nałożone na jego boki wyświetlane są do wewnątrz. Tworząc obiekt space, jako argument podaliśmy obiekt klasy BitmapCubeTexture dostępnej w pakiecie away3d.textures. space = new SkyBox(spaceMaterial);
Obiekt tej klasy pełni rolę tablicy przechowującej obiekty BitmapData, które wykorzystane są do stworzenia tekstury pokrywającej boki sześcianu. spaceMaterial = new BitmapCubeTexture(new PosXJPG().bitmapData, new NegXJPG().bitmapData, new PosYJPG().bitmapData, new NegYJPG().bitmapData, new PosZJPG().bitmapData, new NegZJPG().bitmapData);
Kolejność podawanych obiektów BitmapData musi zgadzać się z indeksami boków, które odpowiadają układowi współrzędnych o kierunkach określonych regułą lewej dłoni. W tabeli 13.13 zostały wymienione argumenty konstruktora BitmapCubeTexture oraz boki sześcianu, na które wskazują. Tabela 13.13. Argumenty konstruktora BitmapCubeTexture oraz boki, na które wskazują
Argument
Bok
posX
prawy
negX
lewy
posZ
przedni
negZ
tylny
posY
górny
negY
dolny
W metodzie initLights() stworzyliśmy obiekt klasy PointLight z pakietu away3d.lights, z którego działaniem już się zetknęliśmy w rozdziale 5., „Światło”. Tak samo jak PointLight3D, obiekt klasy PointLight imituje źródło, z którego światło emitowane jest w każdym kierunku o intensywności malejącej proporcjonalnie do odległości. W naszym przykładzie ustawiliśmy pozycję światła na osi x globalnego układu współrzędnych oraz określiliśmy poziomy jasności otoczenia i rozproszenia światła. light = new PointLight(); light.x = 10000; light.ambient = 1; light.diffuse = 1;
W Away3D 4.x sposób dodawania światła do sceny różni się od sposobu, który stosowaliśmy do tej pory. Obiektu źródła światła nie dodaje się już bezpośrednio
Rozdział 13. Więcej zabawy z 3D
587
do sceny, tylko do obiektu klasy StaticLightPicker z pakietu away3d.materials. Obiekt tej klasy posiada tablicę lights, w której trzymane są instancje klas z pakietu away3d.lights. Tworząc obiekt klasy StaticLightPicker, należy podać w argumencie obiekt tablicy Array zawierający przynajmniej jeden obiekt światła. Kolejne obiekty można dodawać lub usuwać, stosując metody dostępne w klasie tablicy. lightpickers.
lightPicker = new StaticLightPicker([light]);
Mając gotowy obiekt klasy StaticLightPicker, należy go użyć bezpośrednio na obiekcie materiału, co przedstawimy za chwilę. Metoda initEarth() jest najdłuższą ze wszystkich w tym przykładzie, ponieważ w niej zapisaliśmy proces tworzenia naszej kuli ziemskiej. W pierwszej kolejności stworzyliśmy obiekt klasy FresnelSpecularMethod dostępnej w pakiecie away3d. materials.methods. Obiekty znajdujące się w tym pakiecie określają sposoby cieniowania powierzchni zależne np. od odległości źródła światła czy też od kąta widzenia powierzchni. W naszym przykładzie zastosowaliśmy odbicie Fresnela, podając w konstruktorze wartość true, i wprowadziliśmy ustawienie, że intensywność tego efektu będzie zależna od kąta, pod jakim powierzchnia znajduje się względem obserwatora. W kolejnych linijkach kod ustawiający intensywność odbicia oraz model cieniowania, jaki ma być zastosowany przez Fragment Shadera. var fresnelSpecular:FresnelSpecularMethod = new FresnelSpecularMethod(true); fresnelSpecular.fresnelPower = 1; fresnelSpecular.normalReflectance = 0.1; fresnelSpecular.shadingModel = SpecularShadingModel.PHONG;
Jako materiału pokrywającego kulę użyliśmy obiektu klasy TextureMaterial, ulokowanej w pakiecie away3d.materials.W zasobach biblioteki Away3D 3.6 nie ma takiej klasy, a do pokrycia powierzchni obiektu teksturą stosowaliśmy obiekty klas: BitmapMaterial, BitmapFileMaterial oraz TransformBitmapMaterial. W wersji Away3D 4.x pomyślano o tym, aby nie mieszać kilku bądź kilkunastu rodzajów materiałów, które bazują na teksturach. Zamiast tego stworzono nowy pakiet away3d.textures i w nim umieszczono wszystkie możliwe klasy generujące tekstury. Dzięki takiemu podziałowi wszystko jest bardziej poukładane i łatwiejsze w użyciu. Tworząc obiekt kasy TextureMaterial, należy podać obiekt klasy pochodnej od Texture2DBase, na której nie jest stosowane jakiekolwiek źródło światła. W naszym przypadku skorzystaliśmy z klasy BitmapTexture, podając obiekt BitmapData z wcześniej dodanego zasobu graficznego. earthMaterial = new TextureMaterial(new BitmapTexture(new EarthJPG().bitmapData));
588
Flash i ActionScript. Aplikacje 3D od podstaw
Ale to nie wszystko. Klasa TextureMaterial pozwala na swobodne mieszanie różnego rodzaju tekstur, dlatego też dla uzyskania ładniejszego i bardziej realistycznego efektu dodaliśmy jeszcze następujące tekstury: mapy normalnych earthMaterial.normalMap = new BitmapTexture(new EarthNormalsJPG().bitmapData);
teksturę cieni, która w naszym przypadku prezentuje kulę ziemską nocą earthMaterial.ambientTexture = new BitmapTexture(new EarthNightJPG().bitmapData);
teksturę mapy odbijania światła earthMaterial.specularMap = new BitmapTexture(new EarthSpecularJPG().bitmapData);
Poza zastosowaniem różnych rodzajów tekstur trzeba również przypisać właściwościom, z których one korzystają, odpowiednie wartości. W naszym przykładzie ustaliliśmy poziomy ostrości połysku, odbicia światła, jego kolor, określiliśmy sposób cieniowania i przede wszystkim użyliśmy obiektu lightPicker. W Away3D 4.x światła dodane do obiektu klasy StaticLightPicker przypisuje się bezpośrednio do konkretnych obiektów znajdujących się na scenie. Dzięki temu jesteśmy w stanie określić, które z utworzonych źródeł światła mają oddziaływać na wybrany obiekt. earthMaterial.specularMethod = fresnelSpecular; earthMaterial.lightPicker = lightPicker; earthMaterial.gloss = 5; earthMaterial.specular = 1; earthMaterial.ambientColor = 0xFFF68F; earthMaterial.ambient = 1;
Utworzone tekstury trzeba na coś położyć, tak więc w następnej kolejności stworzyliśmy trójwymiarowy obiekt kuli i dodaliśmy go do sceny. W wersji Away3D 3.6 do stworzenia obiektu 3D wystarczy wybrać odpowiednią klasę z pakietu away3d.primitives, np. Sphere, podać wymiary, liczbę segmentów oraz obiekt materiału. W przypadku Away3D 4.x proces ten wygląda nieco inaczej: w pakiecie away3d. primitives umieszczone są klasy, których obiekty definiują geometrię wraz ze współrzędnymi UV obiektu 3D. Obiekty z tego pakietu same w sobie nie są widoczne na scenie i nie można ich do niej dodać, posiadają jedynie niezbędne informacje o schemacie siatki geometrycznej. W tabeli 13.14 zostały wypisane klasy dostępne w pakiecie away3d.primitives.
Rozdział 13. Więcej zabawy z 3D
589
Jak widać, aż tak wielkich różnic poza nazwami nie ma, sposób implementacji też miejscami jest inny, ale nie na tyle, by miało to sprawić Ci większy problem. Tabela 13.14. Lista klas dostępnych w pakiecie away3d.primitives
Klasy
Generowany obiekt geometrii
PrimitiveBase
Klasa podstawowa dla wszystkich klas niepochodnych od WireframePrimitiveBase
ConeGeometry
stożek
CubeGeometry
sześcian
CylinderGeometry
cylinder
LineSegment
linia
PlaneGeometry
płaszczyzna
RegularPolygonGeometry
wielokąt foremny
SkyBox
panorama
SphereGeometry
kula
TorusGeometry
torus
WireframePrimitiveBase
Klasa bazowa dla klas generujących obiekty nieposiadające ścian, lecz same krawędzie
WireframeCube
krawędzie sześcianu
WireframeCylinder
krawędzie cylindra
WireframePlane
krawędzie powierzchni płaskiej
WireframeSphere
krawędzie kuli
W naszym przykładzie utworzyliśmy obiekt kuli, podając promień i liczby segmentów w pionie i poziomie. earthGeometry = new SphereGeometry(350,200,100);
Jak już zdążyliśmy zauważyć, w bibliotece Away3D 4.x przyjęto założenie, że informacje o geometrii obiektu 3D przechowywane są w osobnych obiektach. Nie ma możliwości umieszczania obiektów z pakietu away3d.primitives bezpośrednio na scenie. W tym celu należy skorzystać z obiektu klasy Mesh. W rozdziale 3., „Obiekty”, poznaliśmy klasę Mesh. Dowiedzieliśmy się, że jej obiekt służy jako warstwa wizualna dla obiektów, których nie można umieścić bezpośrednio na scenie. Chociaż budowa i implementacja obiektu tej klasy w Away3D 4.x uległa zmianie, to nadal pełni on taką samą rolę jak w wersji Away3D 3.6. Chcąc dodać nowy obiekt 3D do sceny, należy stworzyć obiekt klasy Mesh i w jego argumentach podać obiekty geometrii oraz materiału. W naszym przykładzie do stwo-
590
Flash i ActionScript. Aplikacje 3D od podstaw
rzenia trójwymiarowego obiektu kuli posłużyliśmy się obiektami earthGeometry oraz earthMaterial. earth = new Mesh(earthGeometry, earthMaterial);
Samo dodawanie obiektu do sceny jest identyczne jak w Away3D w wersji 3.6: wystarczy zastosować metodę addChild() na obiekcie sceny bezpośrednio lub też poprzez właściwość widoku. view.scene.addChild(earth);
Dla uzyskania jeszcze bardziej realistycznego efektu w metodzie initClouds() dodaliśmy warstwę chmur, również posługując się obiektami klas: SphereGeometry, Mesh oraz TextureMaterial. Tutaj dodatkową czynnością, jaką musieliśmy wykonać, było dodanie przezroczystości dla tekstury. var alphaClouds:BitmapData = new BitmapData(2048, 1024, true, 4294967295); alphaClouds.copyChannel(new CloudsJPG().bitmapData, alphaClouds.rect, new Point(), BitmapDataChannel.RED, BitmapDataChannel.ALPHA); ... cloudsMaterial.alphaBlending = true;
Z pozostałego kodu warto jeszcze wspomnieć o sposobie poruszania kamerą wokół obiektu w poziomie, jak i pionie. Wiemy już z rozdziału 9., „Kamery”, że w przypadku HoverCamera3D w celu obracania kamery wokół obiektu należy manipulować wartościami właściwości panAngle i tiltAngle. W Away3D 4.x również trzeba modyfikować wartości tych właściwości, z tą różnicą, że nie wykonuje się tego bezpośredni na obiekcie kamery, lecz na kontrolerze, w naszym przykładzie hoverCameraController. Pozostałe sposoby wyliczeń są identyczne, co zresztą widać w poniższych dwóch linijkach kodu. hoverCameraController.panAngle = (stage.mouseX - lastMouseX) * .5 + lastPanAngle; hoverCameraController.tiltAngle = (stage.mouseY - lastMouseY) * .5 + lastTiltAngle;
Jeśli chodzi o nasz przykład, są to wszystkie nowe informacje. Jak widać, nie ma jakichś diametralnych różnic lub takich, które nie pozwalają na w miarę płynne i swobodne przejście między wersjami tej biblioteki. Jak wspominałem dużo wcześniej, silnik ten jest stale rozwijany. Z dnia na dzień są wprowadzane jakieś zmiany. Źródło to nadal żyje i nie ma oficjalnie ogłoszonej stabilnej odsłony. Dlatego też nie napisałem szczegółowej instrukcji, bo wszystko się może jeszcze wydarzyć. To, że nie ogłoszono jeszcze stabilnej wersji Away3D z API Stage3D, nie powinno zbytnio przeszkadzać w tworzeniu aplikacji. Wystarczy trzymać się kurczowo jednej wersji i rozsądnie aktualizować kod, aby uniknąć nieprzyjemności związanych z brakiem kompatybilności kodu aplikacji z nowszą wersją biblioteki. Znam to z autopsji.
Rozdział 13. Więcej zabawy z 3D
591
Z mojej strony to wszystko. Polecam śledzenie informacji o nowych wersjach odtwarzacza Adobe Flash Player i bibliotekach 3D.
DAVID POND
CZAKRY OD PODSTAW
(Chakras for Beginners / wyd. orygin. 1999)
Dla moich dzieci i ich dzieci:
Davida juniora,
Edena,
Skylara,
Foresta,
Tawny...
DAVID POND
CZAKRY OD PODSTAW
(Chakras for Beginners / wyd. orygin. 1999)
Dla moich dzieci i ich dzieci:
Davida juniora,
Edena,
Skylara,
Foresta,
Tawny...
![Flash Firmware - Instrukcja [S5830]](https://docer.tips/img/300x300/flash-firmware-instrukcja-s5830_5a7bca47d64ab22d45fbd64b.jpg)
