Chcę stworzyć podobny efekt tunelu w COCOS2D (iOS). Czy ktoś mógłby zasugerować jakieś wskazówki?
Do tej pory próbowałem z kilkoma duszkami w kształcie pierścienia ze zmniejszającą się skalą i ustawionym środkiem do tego samego punktu i utrzymując również Z zmniejszające się dla każdego mniejszego duszka.
Dzięki temu animowanie go za pomocą CCScaleTo i zmiana rozmiaru na 2,0 z czasem trwania animacji, ale i tak nie zbliża się do efektu tunelu pokazanego w odnośniku.
Dzięki, Sam
Odpowiedzi:
Znalazłem opis implementacji od autora tego efektu:
Z pewnością było dużo pracy, aby stworzyć iluzję głębi w płaszczyźnie 2D.
Zasada jest jednak bardzo prosta: koła zaczynają się na środku ekranu ze skalą 0. Następnie pierwszy okrąg tunelu zaczyna skalować proporcjonalnie do upływu czasu (skalowanie liniowe nie działa), a po pewnym czasie drugi okrąg zaczyna skalować , a następnie 3 i 4 itd.
Następnie proporcjonalnie obniżasz wartość alfa dla kół (te z tyłu mają wartość alfa niższą niż te z przodu, aby uzyskać iluzję rozmycia), definiujesz ścieżkę, którą musi kroczyć każde koło, przesuwając X i Y jego współrzędne, następnie umieszczasz statek kosmiczny na środku ekranu. Przechylenie urządzenia powoduje, że tunel przesuwa się w lewo i prawo, w górę iw dół (ale to sprawia wrażenie, że statek kosmiczny porusza się zamiast tego!).
Kiedy kręgi znikną z ekranu, szybko znikną i zostaną przywrócone do początkowej pozycji (aby zaoszczędzić pamięć, więc nie muszę tworzyć nowych kręgów, ale używam tych samych ponownie).
Przepraszam za mój angielski, ale mam nadzieję, że to wyjaśniło ogólny pomysł :)
Już prawie jesteś z wieloma sprajtami pierścieniowymi o malejącej wartości Z i skali. Po prostu nie centruj ich wszystkich.
Musisz śledzić punkt, w którym tunel ma trafić w odległe horyzonty zdarzeń. Możesz przesuwać ten punkt w czasie, jak chcesz.
Następnie, podczas umieszczania każdego nowego duszka, umieść go w tym punkcie, skaluj na małą skalę, ustaw krycie tak, jak chcesz, a następnie zacznij CCSpawnod CCScaleToi CCFadeTo, na przykład:
sprite->runAction(CCSpawn::create(
CCScaleTo::create(2.0f, 1.5f),
CCFadeTo::create(5.0f, 255),
nullptr));Wstępnie utwórz wszystkie duszki i obróć, który z nich jest z tyłu, aby utrzymać jego wydajność.
Prawdopodobnie spróbowałbym to uporządkować za pomocą warstwy tła i efektów cząsteczek. Możesz przetestować efekty w projektancie cząstek i odtworzyć je później w warstwie tła.
Szczerze mówiąc, nie sądzę, że obraz jest renderowany za pomocą kamery 2D. Wygląda na to, że gra jest renderowana przy użyciu systemu renderowania 3D. Ale ponieważ chcesz korzystać z cocos2d, musisz samodzielnie zasymulować macierz transormacji 3D. Oto pomysł na początek: wiesz, że w scenie 3D każdy obiekt jest zdefiniowany przez 3 wartości skalarne, x, yiz. Najprostszą metodą, jakiej można użyć, jest skalowanie zgodnie z sugestią, ale nie w miarę implementacji! ccScaleTospowoduje liniowe skalowanie w czasie, co nie zapewni efektu 3D. Możesz zacząć od skalowania obiektu według wartości 1/z. Jest to w jakiś sposób identyczne z najprostszą matrycą projekcyjną, jaką możesz wymyślić! jeśli uważasz, że nawet to Cię nie satysfakcjonuje, spójrz na bardziej nowoczesne i bardziej złożone matryce projekcyjne .
Uwaga dodatkowa: implementacja niestandardowej matrycy projekcyjnej w cocos2D będzie nieco brudna. jeśli naprawdę nie podoba ci się ten efekt, zdecydowanie zalecamy zmianę silnika na inny z obsługą 3D.
Oto jak to zrobiłem, w pseudokodzie
Aktywuj efekt tunelu:
createCircle ()
Kontrola (z paralaksą)
Pozycja to Punkt Zniknięcia, dlatego nie można przenosić warstw bez przesunięcia punktu Znikania. Jeśli jednak przesuniesz punkt kontrolny, warstwa wydaje się poruszać, ale Punkt Zniknięcia pozostaje taki sam - tworzy to efekt paralaksy, ponieważ przesunięcie ccp (0,2,0,2) na bliskiej warstwie (na dużą skalę) ma większy efekt niż poruszając to samo na odległej warstwie.
Zawijasz wszystko w warstwy tego samego rozmiaru, aby upewnić się, że zmiana położenia kotwicy spowoduje taki sam ruch na wszystkich warstwach.