loudoweb.fr - [OpenFL] Comment corriger les artefacts entre les tuiles

[OpenFL] Comment corriger les artefacts entre les tuiles



Description du problème

Si l'on place des tuiles côte à côte, il est alors possible d'avoir des artefacts disgracieux entre celles-ci. Elle peuvent apparaître sous la forme de trou ou sous la forme d'une bordure noire.

tiles border artifact on OpenFL

Quelles solutions ?

Pour éviter ceci et obtenir le meilleur résultat possible, trois solutions sont à combiner.

  • Il faudra d'abord veiller à positionner les tuiles avec des nombres entiers.
  • Il faudra également légèrement surdimensionner les tuiles pour combler les trous. Il semble que nombre de développeurs redimensionnent avec un ratio de 1.01 (cf le framework HaxeFlixel) ou même parfois légèrement plus quand parfois les résultats ne sont pas assez convaincants.
  • Pour openfl legacy, il faudra de plus veiller à créer son atlas en cochant la case reduce border artifact dans le logiciel TexturePacker.

    reduce border artifact with TexturePacker

Comment trouver le bon ratio ?

Pour éviter de chercher empiriquement le bon ratio, nous pouvons le calculer. Pour cela, il est indispensable de comprendre ce qui se produit. En effet, lorsqu'on redimensionne une application, il est alors possible que la taille réelle à l'écran de la tuile n'est pas un nombre entier. Il semblerait alors que la tuile soit tronquée et que l'espace entre les tuiles corresponde à peu près à la partie décimale.

Pour illustrer mon propos, voici deux exemples. L'un utilisant un nombre décimal et l'autre un nombre entier

Exemple en surimprimant un carré rouge dont la taille est un nombre décimal. Le carré recouvre parfaitement les trous.
graphics.beginFill(0xff0000);
graphics.drawRect(300, 200, 75 * 0.875, 75 * 0.875);
graphics.endFill();

find the best ratio to fix tiles artifacts

Exemple en surimprimant un carré rouge dont la taille est un nombre entier. Le carré recouvre parfaitement la tuile.
graphics.beginFill(0xff0000);
graphics.drawRect(300, 200, Std.int(75 * 0.875), Std.int(75 * 0.875));
graphics.endFill();

find the best ratio to fix tiles artifacts

Ainsi, avec une simple règle de trois, il est alors possible d'obtenir le ratio minimum pour combler les trous.

Il y a cependant quelques exceptions que j'ai mis en place dans le script que j'ai réalisé ci-dessous. En effet, les résultats ne semblent pas convaincants en utilisant un ratio inférieur à 1.01. Le script choisit donc le ratio en en tenant compte. Aussi, si les tuiles ne sont ni redimensionnées ni positionnées avec des nombres décimaux, il est inutile de corriger le redimensionnement de la tuile car cela pourrait rendre les contacts entre les tuiles visibles. Dans l'image suivante, on voit bien une sorte de coupure verticale dans la version redimensionnée (x1.01). A éviter donc.

find the best ratio to fix tiles artifacts

Pour conclure, voici quelques images sur les résultats obtenus.

Avec openfl next. Le résultat est très bon.

tileScaleHack with openfl next

Avec openfl legacy, il subsiste encore quelques artefacts, toutefois peu visibles.

tileScaleHack with openfl legacy and reduce border artifact option

Attention, avec openfl legacy, il ne faut pas oublier de cocher l'option reduce border artifact dans TexturePacker, sinon le résultat sera moins convaincant.

tileScaleHack with openfl legacy without reduce border artifact option

Script

Script à récupérer sur github

how to fix border artifact between tiles on OpenFL. #openfl #haxe #tileScaleHack

Laissez un commentaire:

blog comments powered by Disqus Comments