effet tunnel cocos2d

Je cherche à créer un effet tunnel similaire dans COCOS2D (iOS). Quelqu'un pourrait-il suggérer des pointeurs?

ref Vidéo 1

ref Vidéo 2

Jusqu'à présent, j'ai essayé avec plusieurs sprites en forme d'anneau avec une échelle décroissante et positionnés au centre sur un même point et en maintenant Z décroissant pour chaque sprite plus petit.

Avec cela, l'animer avec CCScaleTo et changer la taille à 2.0 avec la durée de l'animation, mais cela ne se rapproche pas de toute façon de l'effet tunnel montré dans la référence.

Merci, sam

J'ai trouvé la description d'implémentation de l'auteur de cet effet:

Il fallait sûrement beaucoup de travail pour créer l'illusion de profondeur dans un plan 2D.

Le principe est cependant très simple: les cercles commencent au milieu de l'écran avec l'échelle 0. Ensuite, le premier cercle du tunnel commence à évoluer proportionnellement au temps écoulé (l'échelle linéaire ne fonctionne pas) et après un certain temps, le deuxième cercle commence à évoluer , puis les 3e, 4e et ainsi de suite.

Vous réduisez ensuite proportionnellement la valeur alpha pour les cercles (ceux à l'arrière ont une valeur alpha inférieure à ceux à l'avant pour donner l'illusion de flou), vous définissez un chemin que chaque cercle doit suivre, en déplaçant les X et Y coordonnées de celui-ci, puis vous mettez un vaisseau spatial au milieu de l'écran. L'inclinaison de l'appareil fait que le tunnel se déplace de gauche à droite, de haut en bas (mais cela donne l'impression que le vaisseau spatial se déplace à la place!).

Une fois que les cercles sortent de l'écran, ils sont rapidement estompés et remis en position initiale (pour économiser de la mémoire donc je n'ai pas besoin de créer de nouveaux cercles mais je réutilise les mêmes).

Désolé pour mon anglais, mais j'espère que cela a expliqué l'idée générale :)

Vous êtes presque là avec plusieurs sprites en anneau de valeur et d'échelle Z décroissantes. Ne les centrez pas tous.

Vous devez garder une trace du point où vous voulez que le tunnel frappe l'horizon des événements lointain. Vous pouvez déplacer ce point dans le temps comme vous le souhaitez.

Ensuite, lorsque vous placez chaque nouveau sprite, placez-le à ce point, redimensionnez-le petit, définissez son opacité comme vous le souhaitez, puis démarrez un CCSpawnavec CCScaleToet CCFadeTo, par exemple:

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

Pré-créez tous les sprites et faites pivoter celui qui est à l'arrière pour le garder efficace.

J'essaierais probablement de le trier avec une couche de fond et des effets de particules. Vous pouvez tester les effets dans le concepteur de particules et les jouer ensuite dans la couche d'arrière-plan.

Pour être honnête, je ne pense pas que l'image soit rendue à l'aide d'une caméra 2D. Il semble que le jeu soit rendu à l'aide d'un système de rendu 3D. Mais comme vous souhaitez utiliser cocos2d, vous devez simuler vous-même cette matrice de transormation 3D. Voici une idée pour commencer: vous savez dans une scène 3D, chaque objet est défini par 3 valeurs scalaires, x, y et z. La méthode la plus simple que vous pouvez utiliser est la mise à l'échelle comme vous l'avez suggéré, mais pas comme vous l'avez implémentée! ccScaleToentraînera une mise à l'échelle linéaire dans le temps, ce qui ne produira pas de sensation 3D. Vous pouvez commencer par mettre à l'échelle l'objet par la valeur de 1/z. C'est en quelque sorte identique à la matrice de projection la plus simple à laquelle vous pouvez penser! si vous sentez que cela ne vous satisfait pas, jetez un œil à des matrices de projection plus modernes et plus complexes .

Remarque: l'implémentation d'une matrice de projection personnalisée dans cocos2D sera un peu sale. si vous n'aimez vraiment pas l'effet, je vous suggère fortement de changer votre moteur en un avec prise en charge 3D.

Voici comment je l'ai fait, en pseudo-code

Activez l'effet tunnel:

1. Créer un CCRepeatForever (CCFunc (createCircle))
2. Ajoutez un nœud à votre scène appelé "ViewNode"

createCircle ()

1. Créez un calque, positionnez-le au centre de la scène. Ajoutez-le en tant qu'enfant à "ViewNode".
2. exécuter l'action: CCSequence (CCEaseExponentialIn (CCScaleTo), CCRemoveSelf)
3. Mettez des trucs dans votre couche, c.-à-d. Cirkels, ennemis, vaisseaux spatiaux, peu importe.

Contrôle (avec parallaxe)

1. Pour toutes les couches avec effet tunnel (c'est-à-dire les enfants de ViewNode)
2. mettre à jour la position d'ancrage en fonction de la position tactile.

La position est le point de fuite, par conséquent, vous ne pouvez pas déplacer les calques sans déplacer le point de fuite. Cependant, si vous déplacez le point d'ancrage, le calque semble se déplacer, mais le point de fuite reste le même - cela crée un effet de parallaxe, car le déplacement de ccp (0.2,0.2) sur un calque proche (à grande échelle) a plus d'effet que déplacer le même sur une couche éloignée.

Vous enveloppez tout dans des calques de même taille, pour vous assurer que le repositionnement de l'ancre crée le même mouvement dans tous les calques.