web-dev-qa-db-fra.com

Obtenir un effet "giggly" en déplaçant lentement un sprite

Comment puis-je supprimer cet effet "giggly" lorsque je déplace lentement un sprite?

J'ai essayé d'ajuster les valeurs d'anticrénelage dans QualitySettings et le mode de filtre dans ImportSettings dans l'éditeur Unity mais cela ne change rien.

enter image description here

Idéalement, je voudrais garder le mode de filtrage sur Point (no filter) et l'anticrénelage activé sur 2x

enter image description here

Le Sprite est situé à l'intérieur d'un composant Sprite Renderer d'un GameObject.

J'ai téléchargé mon projet Unity ici: http://www.filedropper.com/Sprite

Je ne sais vraiment pas comment résoudre le problème ... Quelqu'un peut-il m'aider avec mon projet personnel?

41
user5655032

J'ai concocté une animation rapide pour montrer ce qui se passe ici:

Animation demonstrating source of ripple

La grille représente les pixels de sortie de votre affichage. J'ai superposé dessus le Sprite coulissant que nous voulons échantillonner, si nous pouvions le rendre avec une résolution sous-pixel illimitée.

Les points au centre de chaque cellule de la grille représentent leur point d'échantillonnage. Parce que nous utilisons le filtrage Nearest-Nieghbour/Point, c'est le seul point de la texture auquel ils prêtent attention. Lorsque le bord d'une nouvelle couleur traverse ce point d'échantillonnage, le pixel entier change de couleur à la fois.

Le problème survient lorsque la grille Texel source ne s'aligne pas avec nos pixels de sortie . Dans l'exemple ci-dessus, le Sprite mesure 16 x 16 texels, mais je l'ai mis à l'échelle pour occuper 17 x 17 pixels à l'écran. Cela signifie que, quelque part dans chaque image, certains texels doivent être répétés. Lorsque cela se produit, nous changeons lorsque nous déplaçons le Sprite.

Parce que chaque Texel est rendu légèrement plus grand qu'un pixel, il y a un moment où il relie complètement les points d'échantillonnage de deux pixels adjacents. Les deux points d'échantillonnage atterrissent dans le même Texel agrandi, de sorte que les deux pixels voient ce Texel comme le plus proche à partir duquel échantillonner, et le Texel est envoyé à l'écran à deux endroits.

Dans ce cas, puisqu'il n'y a qu'une différence à l'échelle 1/16, chaque Texel n'est dans cette situation étrange que pour une image ou deux, puis il se déplace vers son voisin, créant une ondulation de pixels doublés qui semble glisser sur l'image.

( On pourrait voir cela comme un type de motif moiré résultant de l'interaction de la grille de Texel et de la grille d'échantillonnage lorsqu'elles sont dissemblables)

Le correctif consiste à s'assurer que vous redimensionnez votre pixel art afin que chaque Texel soit affiché à la taille d'un multiple entier de pixels .

Soit 1: 1

Animation showing ripple-free rendering at 1:1 scale

Ou 2: 1, 3: 1 ...

Animation showing ripple-free rendering at 3:1 scale

L'utilisation d'un multiple plus élevé permet au Sprite de se déplacer par incréments plus court que sa propre taille Texel, sans étirement localisé qui affecte l'apparence souhaitée de l'art.

Donc: portez une attention particulière à la résolution de votre sortie et à la mise à l'échelle appliquée à vos actifs, pour vous assurer de conserver une relation multiple entière entre eux. Le billet de blog qui relie CAD97 contient des mesures pratiques que vous pouvez prendre pour y parvenir.

Modifier: Pour illustrer cela dans le projet Unity que vous avez téléchargé, j'ai modifié les paramètres de l'appareil photo pour faire correspondre vos pixels aux paramètres d'unités, et j'ai présenté les éléments suivants tester. Le Mario en haut a un rapport Texel/pixel légèrement non entier (1,01: 1), tandis que le Mario en bas a 1: 1. Vous ne pouvez voir que les meilleurs artefacts ondulés de Mario:

Two Marios, one exhibiting artifacts

60
DMGregory

Vous pourriez être intéressé par cet article de blog sur la création de jeux 2D "pixel-perfect" dans Unity.

Quelques extraits pertinents:

Si vous démarrez votre jeu de pixels avec tous les paramètres par défaut dans Unity, cela aura l'air terrible!

Le secret pour rendre votre jeu pixélisé agréable est de s'assurer que votre Sprite est rendu sur une frontière de pixels Nice. En d'autres termes, assurez-vous que chaque pixel de votre Sprite est rendu sur un pixel d'écran.

Ces autres paramètres sont essentiels pour rendre les choses aussi nettes que possible.

Sur le Sprite:

  • Assurez-vous que vos sprites utilisent une compression sans perte, par exemple Vraie couleur
  • Désactiver le mipmapping
  • Utiliser l'échantillonnage ponctuel

Dans les paramètres de qualité de rendu:

  • Désactiver le filtrage anisotrope
  • Désactiver l'anticrénelage

Activez l'accrochage aux pixels dans le shader Sprite en créant un matériau personnalisé qui utilise le shader Sprite/Default et en l'attachant au SpriteRenderer.

Aussi, je voudrais juste souligner que À moins que vous appliquiez la physique, N'utilisez jamais FixedUpdate. De plus, si votre Sprite a un collisionneur et se déplace, il devrait avoir un corps rigide cinématique attaché même si vous n'allez jamais utiliser la physique, pour indiquer au moteur que le collisionneur va se déplacer.

9
CAD97

Même problème ici. J'ai remarqué que les paramètres et l'échelle de l'appareil photo sont également assez importants pour résoudre le problème d'ondulation.

0
silkentrance