Comment puis-je créer un grand fond d'espace qui se répète, d'une manière imperceptible

14

Comment puis-je créer un grand fond d'espace qui se répète pour un jeu rts. Je veux aussi avoir des nébuleuses complexes et des champs de poussière, mais comme les unités auront beaucoup d'espace à explorer, je ne peux pas avoir un jpeg 120000px par 1200000px, donc je veux que l'image se répète, mais pas de lignes de changement entre les segments.

J'utilise ceci avec le framework Babylon de Microsoft pour la toile Web GL

SuperUberDuper
la source
8
Avez-vous envisagé d'utiliser un shader procédural au lieu d'une image? Une simple recherche sur le Web fait apparaître celui-ci, ce qui semble très impressionnant: casual-effects.blogspot.com.au/2013/08/starfield-shader.html
LeFauve
@LeFauve En fait, j'aime beaucoup cette idée. Le jeu se souvient-il des éléments générés par le passé lorsque vous y revenez? Comment puis-je gérer cela dans la mémoire du navigateur?
SuperUberDuper
@SuperUberDuper: Il n'est pas nécessaire qu'il "se souvienne" de quelque chose tant qu'il est généré de manière déterministe et locale. Régénérez simplement les données chaque fois que vous en avez besoin.
R .. GitHub STOP HELPING ICE
@LeFauve: Cela devrait vraiment être une réponse. C'est bien mieux que les réponses données.
R .. GitHub STOP STOPINGING ICE
@R .. Je suis d'accord, ce serait aussi bien d'avoir du code pour cela dans webGL;)
SuperUberDuper

Réponses:

19
  1. Utilisez le défilement de parallaxe. Avoir plusieurs couches d'arrière-plan qui défilent avec différentes fractions de la vitesse du point de vue principal. Plus le calque est bas, plus il défile lentement. Ce n'est pas seulement un excellent moyen de fournir une illusion de profondeur, cela rend également les arrière-plans moins répétitifs car les objets sur les différents calques apparaîtront dans des compositions différentes en raison du fait que les calques ne sont pas synchronisés.

  2. créez vos arrière-plans de manière procédurale. Au lieu d'un énorme graphique d'arrière-plan, ayez plusieurs éléments plus petits et placez-les tous plusieurs fois au hasard dans le monde du jeu.

Et au fait: n'utilisez pas JPEG lorsque vous pouvez l'éviter. C'est un format avec perte qui perd plus de qualité chaque fois que vous le modifiez et l'enregistrez, il est fortement optimisé pour la photographie et ne prend pas en charge la transparence. Utilisez un format sans perte avec canal alpha comme PNG. La seule bonne raison serait que votre image source est uniquement disponible en JPEG (la NASA a publié beaucoup de belles photos d'astronomie qui sont toutes dans le domaine public) et que vous ne voulez apporter aucune modification à celles-ci.

Philipp
la source
7

Un moyen de créer un fond infini pour un jeu 2D est le suivant:

  1. À l'aide d'un logiciel d'édition graphique (comme iDraw pour Mac), créez une image A qui représente une partie de votre arrière-plan. Cette image doit avoir une taille limitée.
  2. Dupliquer A et le mettre en miroir sur l'axe Y, c'est B
  3. Maintenant, collez (horizontalement) ensemble A et B, c'est AB .
  4. Enfin importez l'image AB dans votre jeu et répétez-la horizontalement via le code autant de fois que vous le souhaitez.

J'espère que cela t'aides.

Luca Angeletti
la source
2
Taille limitée, mais pas trop limitée. Plus la tuile est petite, plus la répétition sera généralement évidente.
cHao
1
Ou, au lieu de mettre en miroir, utilisez le filtre Offset dans Photoshop et clonez le tampon sur les bordures, ou utilisez simplement le filtre "Make Seamless" de GIMP (Filter → Map → Make Seamless).
wchargin
5

Les couches fonctionnent bien.

Voici quelques calculs:

Supposons que vous ayez une voie ferrée mal faite de telle sorte que __ __ remarquent l'écart entre eux. Lorsque la roue les roule, elle fait une petite encoche (petite encoche).

Si la longueur de la piste est let que la roue a un rayon, ralors 2pi rla circonférence de la roue,ration=l/(2pi r) si le rapport est de dire 10,25 alors la roue obtenir un cran chaque trimestre il monte un long.

C'est la façon la plus simple à laquelle je peux penser pour expliquer les espaces de couverture.

Supposons donc que vous ayez deux images, si l'une a ce rapport de quart, vous obtiendrez un motif en 4 phases, il se répétera après 4 tuiles. Supposons que vous ayez 1 arrière-plan principal et 2 superpositions, avec m et n phases. Ensuite, le motif se répétera après m * n tuiles.

Bien que cela ne compte pas beaucoup, le motif sera meilleur si les nombres sont co-premiers, c'est-à-dire que le plus grand diviseur commun est 1. Par exemple, supposons que nous ayons quelque chose de phase 6 et quelque chose de phase 4, toutes les autres phases, elles "s'alignent" "dans un sens.

Vous pouvez utiliser cette technique (en particulier avec des particules et des trucs) pour créer beaucoup de trucs "uniques" avec très peu d'effort.

De retour à la roue du train, si le rapport est irrationnel, les encoches couvriront la roue! Mais cela n'a pas vraiment d'importance.

Alec Teal
la source
5

Voici une autre idée qui semble manquer:

En cas d'arrière-plans à longue distance, comme les boîtes de ciel, les couches de parallaxe ne se sentent pas vraiment bien. Pensez aux étoiles par exemple, lorsque vous marchez sur terre, ou mieux encore toute la nuit, toutes les étoiles se déplacent ensemble, bien que nous sachions qu'elles sont à des centaines de pensées ou à des années-lumière les unes des autres. Le fait est qu'ils sont bien trop loin pour que nous puissions remarquer leurs distances. Cela dit, nous voulons toujours une très grande texture (disons 120k * 120k), à dessiner avec notre puissance de calcul limitée (qui peut gérer 8k * 8k au maximum). Comme pour l'utilisation de plusieurs couches de parallaxe, vous devez créer différentes textures, chacune avec différents types de détails. Par exemple, une représente des galaxies, une autre est un tas d'étoiles, etc. Mais cette fois au lieu de les déplacer à des vitesses différentes, elles devraient différer dans leurs tailles. Voici un exemple: pensez à utiliser 3 textures, l'un est 2048 * 2048, un autre est 729 * 729 et le troisième est 625 * 625. Étant donné que ces nombres sont coprimes les uns avec les autres, lors de la combinaison de ces 3 textures en 3 couches, il faut déplacer lcm (2048,729,625) = 764 millions de pixels de l'origine pour voir la même chose en cours de dessin, ce qui ressemble un peu à l'infini. En fait, vous pouvez ajouter d'autres couches ou changer la taille de chaque texture et vous obtiendrez toujours un résultat aussi grand quemultiple le plus commun des tailles de texture.

Ali1S232
la source
2
Ceci et la réponse de @ AlecTeal décrivent une technique appelée le principe de la cigale . C'est un moyen facile de créer un arrière-plan non aléatoire, très grand et non répétitif avec très peu de ressources.
Lie Ryan
4

Cela semble être un travail pour un pixel shader procédural.

Les avantages par rapport à l'utilisation d'une image sont les suivants:

  • Vous n'avez pas besoin de fournir d'énormes bitmaps
  • Il est procédural, il n'a donc pas à répéter une image fixe (il peut varier à l'infini)
  • Si vous voulez un effet paralax, vous pouvez simuler des milliers d'avions, ce qui ne serait pas pratique en utilisant des images
  • Vous pouvez faire des effets très avancés, comme l'éclairage dynamique
  • La plupart du traitement est effectué par votre GPU, laissant le CPU libre pour d'autres parties de votre jeu

Une simple recherche sur le Web fait apparaître ce shader http://casual-effects.blogspot.com.au/2013/08/starfield-shader.html qui ressemble à ce que vous recherchez.

Je ne suis pas un expert de WebGL, mais selon cette page , il semble qu'il utilise le langage GLSL normal (c'est le langage C-Like utilisé par les cartes graphiques pour programmer les shaders). Cela signifie que vous n'aurez probablement pas ou peu de changements à faire pour que cela fonctionne.

Vous pouvez cependant essayer de commencer avec un shader plus basique pour comprendre comment cela fonctionne.

Cette page de blog répertorie toutes les étapes pour implémenter un shader dans WebGL. Cela semble un bon point de départ.

Https://www.shadertoy.com/ est un autre bon endroit pour trouver de merveilleux exemples de shaders.

LeFauve
la source
Super merci !!! J'ai maintenant du mal à choisir une réponse!
SuperUberDuper
2
Eh bien, si vous avez la possibilité d'essayer les shaders, c'est certainement quelque chose qui sera utile à long terme si vous voulez faire de beaux jeux. La première étape est un peu élevée (il m'a fallu 2 semaines pour que mon premier shader ressemble à ce que je voulais) mais cela en vaut la peine à long terme.
LeFauve
2

Vous pouvez couper votre gros jpeg en petits segments et les placer (partie visible), vous n'avez même pas besoin de le stocker en mémoire tout le temps.

Et comme un vieux jeu, certaines «tuiles» peuvent se répéter. C'était une solution courante pour la console NES, c'était même supporté par le matériel.

Alexsey Shestacov
la source
1
Il est extrêmement difficile, voire impossible, de couper un JPEG en JPEG plus petits qui seront assemblés sans problèmes visuels en raison de la compression avec perte. Si vous optez pour des tuiles, vous devrez utiliser un format de fichier de compression sans perte, comme PNG.
LeFauve
1
Je suis d' accord que la PNG est peut - être mieux, dans d' autre part, les textures JPEG sont courantes dans les graphiques 3D, et plus importants JPEG utilisation 16x16 blocs pour le codage en.wikipedia.org/wiki/Macroblock coupe droite peut être pas remarqué , sinon ne codage dans le plus bas taux.
Alexsey Shestacov