efeito de túnel cocos2d

Estou procurando criar um efeito de túnel semelhante no COCOS2D (iOS). Alguém poderia sugerir alguma indicação?

ref Vídeo 1

ref Vídeo 2

Até agora eu tentei com vários sprites em forma de anel com escala decrescente e posicionados no centro para o mesmo ponto e mantendo Z diminuindo também para cada sprite menor.

Com isso, animá-lo com CCScaleTo e alterar o tamanho para 2.0 com duração da animação, mas não chega nem perto do efeito de túnel mostrado na referência.

Obrigado sam

Eu encontrei a descrição da implementação do autor deste efeito:

Certamente foi muito trabalhoso criar a ilusão de profundidade em um plano 2D.

O princípio é muito fácil: os círculos começam no meio da tela com a escala 0. Então, o primeiro círculo do túnel começa a ser dimensionado proporcionalmente ao tempo decorrido (o dimensionamento linear não funciona) e, após algum tempo, o segundo círculo começa a ser dimensionado , depois a 3ª e a 4ª e assim por diante.

Você reduz proporcionalmente o valor alfa dos círculos (os que estão na parte traseira têm um valor alfa menor que os da frente para dar a ilusão de desfoque), define um caminho que todo círculo deve seguir, movendo os X e Y coordenadas, então você coloca uma nave espacial no meio da tela. Inclinar o dispositivo faz com que o túnel se desloque para a esquerda e para a direita, para cima e para baixo (mas isso dá a impressão de que a espaçonave está se movendo!).

Quando os círculos saem da tela, eles rapidamente desaparecem e são colocados na posição inicial (para economizar memória, não sendo necessário criar novos círculos, mas reutilizá-los).

Desculpe pelo meu inglês, mas espero que tenha explicado a ideia geral :)

Você está quase lá com vários sprites de anel com valor e escala Z decrescentes. Só não centralize todos eles.

Você precisa acompanhar o ponto em que deseja que o túnel atinja o horizonte de eventos distantes. Você pode mover esse ponto ao longo do tempo da maneira que desejar.

Em seguida, ao colocar cada novo sprite, coloque-o nesse ponto, reduza-o pequeno, defina a opacidade da maneira que desejar e inicie um CCSpawncom CCScaleToe CCFadeTo, por exemplo:

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

Pré-crie todos os sprites e gire qual deles está na parte de trás para mantê-lo eficiente.

Eu provavelmente tentaria classificá-lo com uma camada de fundo e efeitos de partículas. Você pode testar os efeitos no designer de partículas e reproduzi-los na camada de fundo depois.

Para ser sincero, não acho que a imagem seja renderizada usando uma câmera 2D. Parece que o jogo é renderizado usando um sistema de renderização em 3D. Mas como você deseja usar o cocos2d, você precisa simular essa matriz de transormação 3D. Aqui está uma idéia para começar: você sabe que em uma cena 3D, todo objeto é definido por três valores escalares, x, ye z. O método mais simples que você pode usar é dimensionar conforme sugerido, mas não como implementado! ccScaleToresultará em uma escala linear ao longo do tempo, que não produzirá uma sensação 3D. Você pode começar com o objeto de escala pelo valor de 1/z. De certa forma, isso é idêntico à matriz de projeção mais simples que você pode imaginar! se você achar que isso não o satisfaz, dê uma olhada em matrizes de projeção mais modernas e mais complexas .

Nota lateral: a implementação da matriz de projeção personalizada no cocos2D ficará um pouco suja. se você realmente não gosta do efeito, sugiro que mude seu mecanismo para outro com suporte a 3D.

Aqui está como eu fiz isso, em pseudo-código

Ativar efeito de túnel:

1. Criar um CCRepeatForever (CCFunc (createCircle))
2. Adicione um nó à sua cena chamado "ViewNode"

createCircle ()

1. Crie camada, posição no centro da cena. Adicione-o como filho ao "ViewNode".
2. executar ação: CCSequence (CCEaseExponentialIn (CCScaleTo), CCRemoveSelf)
3. Coloque coisas na sua camada, ou seja, cirkels, inimigos, naves espaciais, o que for.

Controle (com paralaxe)

1. Para todas as camadas com efeito de túnel (ou seja, filhos de ViewNode)
2. atualizar a posição da âncora com base na posição de toque.

A posição é o Ponto de fuga, portanto, você não pode mover camadas sem mover o ponto de fuga. No entanto, se você mover o ponto de ancoragem, a camada parecerá se mover, mas o Ponto de Fuga permanecerá o mesmo - isso cria um efeito de paralaxe, porque mover ccp (0.2,0.2) em uma camada próxima (em larga escala) tem mais efeito do que movendo o mesmo em uma camada distante.

Você agrupa tudo em camadas do mesmo tamanho, para garantir que o reposicionamento da âncora crie o mesmo movimento em todas as camadas.