туннельный эффект cocos2d

Я хочу создать похожий туннельный эффект в COCOS2D (iOS). Может ли кто-нибудь предложить какие-либо указатели?

ссылка видео 1

ссылка видео 2

До сих пор я пробовал использовать несколько спрайтов в форме кольца с уменьшающимся масштабом и позиционированием центра в одной и той же точке и поддержанием уменьшения Z также для каждого меньшего спрайта.

При этом анимируйте его с помощью CCScaleTo и измените размер на 2,0 с продолжительностью анимации, но он все равно не приблизится к туннельному эффекту, показанному в ссылке.

Спасибо сэм

Я нашел описание реализации от автора этого эффекта:

Конечно, было много работы, чтобы создать иллюзию глубины в 2D плоскости.

Принцип очень прост: круги начинаются в середине экрана со шкалой 0. Затем первый круг туннеля начинает масштабироваться пропорционально прошедшему времени (линейное масштабирование не работает), и через некоторое время второй круг начинает масштабирование. затем 3-й, 4-й и так далее.

Затем вы пропорционально понижаете альфа-значение для окружностей (у тех, кто находится далеко сзади, альфа-значение ниже, чем у тех, что впереди, чтобы создать иллюзию размытия), вы определяете путь, которому должен следовать каждый круг, перемещая X и Y координаты этого, а затем вы положите космический корабль в середине экрана. Наклон устройства заставляет туннель смещаться влево и вправо, вверх и вниз (но создается впечатление, что космический корабль движется вместо этого!).

Как только круги исчезают с экрана, они быстро исчезают и возвращаются в исходное положение (для экономии памяти, поэтому мне не нужно создавать новые круги, но я использую те же самые).

Извините за мой английский, но я надеюсь, что это объяснило общую идею :)

Вы почти там с несколькими спрайтами кольца с уменьшением значения Z и масштаба. Просто не центрируйте их всех.

Вы должны отслеживать точку, где вы хотите, чтобы туннель достиг далекого горизонта событий. Вы можете перемещать эту точку со временем так, как вам нравится.

Затем, когда вы размещаете каждый новый спрайт, размещаете его в этой точке, уменьшаете его, устанавливаете непрозрачность, как вам нравится, затем начинайте CCSpawnс CCScaleToи CCFadeTo, например:

sprite->runAction(CCSpawn::create(
    CCScaleTo::create(2.0f, 1.5f),
    CCFadeTo::create(5.0f, 255),
    nullptr));

Предварительно создайте все спрайты и поверните, какой из них находится сзади, чтобы сохранить его эффективность.

Я бы, вероятно, попытался отсортировать его по фоновому слою и эффектам частиц. Вы можете проверить эффекты в конструкторе частиц и потом воспроизвести их в фоновом слое.

Честно говоря, я не думаю, что изображение отображается с помощью 2D-камеры. Похоже, что игра отображается с использованием системы 3D-рендеринга. Но поскольку вы хотите использовать cocos2d, вам нужно смоделировать эту матрицу трехмерного преобразования самостоятельно. Вот идея для начала: вы знаете, что в трехмерной сцене каждый объект определяется 3 скалярными значениями x, y и z. Самый простой метод, который вы можете использовать, это масштабирование, как вы предложили, но не так, как вы реализовали! ccScaleToприведет к линейному масштабированию с течением времени, что не даст 3D-ощущения. Вы можете начать с масштабирования объекта по значению 1/z. Это как-то идентично самой простой матрице проекции, которую вы можете себе представить! если вы чувствуете, что это вас не устраивает, взгляните на более современные и более сложные матрицы проекций .

Примечание: реализация матрицы проекции в cocos2D будет немного грязной. если вам действительно не нравится эффект, я настоятельно рекомендую сменить ваш движок на другой с поддержкой 3D.

Вот как я это сделал, в псевдокоде

Активировать туннельный эффект:

1. Создать CCRepeatForever (CCFunc (createCircle))
2. Добавьте узел к вашей сцене под названием «ViewNode»

CreateCircle ()

1. Создайте слой, положение в центре сцены. Добавьте его как дочерний элемент "ViewNode".
2. действие запуска: CCSequence (CCEaseExponentialIn (CCScaleTo), CCRemoveSelf)
3. Поместите вещи в свой слой, то есть цирки, враги, космические корабли, что угодно

Контроль (с параллаксом)

1. Для всех слоев с туннельным эффектом (т.е. потомки ViewNode)
2. обновить позицию привязки на основе позиции касания.

Позиция - это точка исчезновения, поэтому вы не можете перемещать слои, не перемещая точку исчезновения. Однако, если вы перемещаете опорную точку, слой, кажется, перемещается, но точка исчезновения остается той же - это создает эффект параллакса, потому что перемещение ccp (0.2,0.2) на близком слое (в большом масштабе) имеет больший эффект, чем двигая то же самое на дальнем слое.

Вы оборачиваете все в слои одинакового размера, чтобы убедиться, что перемещение якоря создает одинаковое движение во всех слоях.