{"id":83,"date":"2012-10-24T08:20:00","date_gmt":"2012-10-24T07:20:00","guid":{"rendered":"http:\/\/oneiricworlds.com\/en\/index.php\/2012\/10\/24\/how-to-create-a-smart-tile-based-floor-in-a-diablo-like-game\/"},"modified":"2016-02-26T12:02:00","modified_gmt":"2016-02-26T11:02:00","slug":"how-to-create-a-smart-tile-based-floor-in-a-diablo-like-game","status":"publish","type":"post","link":"https:\/\/oneiricworlds.com\/fr\/2012\/10\/how-to-create-a-smart-tile-based-floor-in-a-diablo-like-game\/","title":{"rendered":"Comment cr\u00e9er un pavage de sol int\u00e9ressant avec des tuiles"},"content":{"rendered":"

Aujourd’hui, je vous pr\u00e9sente une technique pour cr\u00e9er un sol sympa pour un jeu vid\u00e9o en utilisant des \u00ab\u00a0tuiles\u00a0\u00bb. J’expliquerai un peu plus en d\u00e9tail comment \"\"<\/a> rajouter des variations pour casser les r\u00e9p\u00e9titions trop flagrantes. J’ai compris cette m\u00e9thode en \u00e9tudiant attentivement le jeu \u00ab\u00a0Torchlight\u00a0\u00bb (un Diablo-like bien sympa… par certains des cr\u00e9ateurs de Diablo en fait… super \u00e9quipe!)<\/p>\n

<\/a><\/p>\n

I – Tout d’abord qu’est-ce qu’une tuile?<\/h3>\n

Simple! C’est une image comme \u00e7a:<\/p>\n

\"\"<\/a><\/div>\n
Tuile A<\/i> – Un sol en pierre
\n<\/i><\/div>\n

Une tuile a ceci de particulier qu’on peut la r\u00e9p\u00e9ter X fois sans qu’on puisse d\u00e9celer de rupture au niveau des \u00ab\u00a0bords\u00a0\u00bb:<\/p>\n

\"\"<\/a><\/div>\n
\u00a0Tuile A r\u00e9p\u00e9t\u00e9e sur une grille 3×3<\/i><\/div>\n
<\/div>\n

Les tuiles (tile<\/em> en anglais) sont parfois aussi appel\u00e9es \u00ab\u00a0image sans bords\u00a0\u00bb (seamless<\/em> image<\/em> en anglais). Cette technique est \u00e9norm\u00e9ment utilis\u00e9e dans les jeux vid\u00e9os pour cr\u00e9er de vastes sols\/dallages avec une simple image (pour optimiser l’utilisation m\u00e9moire). M\u00eame World of Warcraft l’utilise:<\/p>\n

\"\"<\/a><\/div>\n
Des tuiles repr\u00e9sentant des pav\u00e9s dans World of Warcraft<\/i><\/div>\n

Dans cette image, il n’est pas \u00e9vident de rep\u00e9rer la r\u00e9p\u00e9tition (mais vous pouvez la trouver!), car les formes sont complexes et les artistes de chez Blizzard sont tr\u00e8s bons. Evidemment, si vous utilisez beaucoup de r\u00e9p\u00e9titions, et en particulier sur des surfaces plates, comme les int\u00e9rieurs de b\u00e2timent par exemple, l’illusion ne tiendra pas longtemps. Nous allons voir comment limiter ce probl\u00e8me.<\/p>\n

II – Des variations dans les textures<\/h3>\n

Tout d’abord, on peut utiliser 2 textures (ou plus) pour ajouter un peu de vari\u00e9t\u00e9. Mais, pour que les 2 textures se \u00ab\u00a0connectent\u00a0\u00bb bien, il faut que leur bord\/pourtour soient identiques. Par exemple:<\/p>\n

\"\"<\/a><\/div>\n
\u00a0Tuile B avec les m\u00eames bords que la tuile A<\/i><\/div>\n
<\/div>\n

Le centre de l’image est diff\u00e9rent, mais les bords sont exactement les m\u00eames, de telle sorte que si je mets une tuile B au milieu de tuiles A, voil\u00e0 ce que \u00e7a donne:<\/p>\n

\"\"<\/a><\/div>\n
Tuile B entour\u00e9e de 8 tuiles A<\/i><\/div>\n

En introduisant une variation de texture et en choisissant au hasard l’une ou l’autre, on peut cr\u00e9er un sol moins uniforme. On peut \u00e9videmment rajouter autant de variations qu’on le souhaite, mais cela aura un impact sur la m\u00e9moire utilis\u00e9e. Il faut trouver un bon compromis. Si on travaille sur un jeu en 2D, c’est un truc bien utile! Mais si on travaille sur un jeu en 3D, il y a une autre m\u00e9thode envisageable…<\/p>\n

 <\/p>\n

III – Variations dans les mod\u00e8les\/maillages<\/h3>\n

Pour le moment, on a suppos\u00e9 que toutes les tuiles \u00e9tait appliqu\u00e9es sur un simple plan, comme ceci (en 3D):<\/p>\n

\"\"<\/a><\/div>\n

Tout plat, et tout triste. Toutefois, nous ne sommes pas limit\u00e9s aux plans! On peut ajouter des variations sur le maillage\/mod\u00e8le qui supporte cette texture. Par exemple on peut cr\u00e9er un plan avec:<\/p>\n

\"\"<\/a><\/div>\n
Juste une pierre qui ressort<\/i><\/div>\n

 <\/p>\n

\"\"<\/a><\/div>\n
Ou une pierre instable<\/i><\/div>\n

 <\/p>\n

<\/div>\n
\"\"<\/a><\/div>\n
Ou une pierre plus basse\/affaiss\u00e9e<\/i><\/div>\n

 <\/p>\n

On peut r\u00e9p\u00e9ter ce processus pour chaque tuile. Ceci peut donner lieu \u00e0 un grand nombre de combinaisons qui peut ressembler \u00e0 \u00e7a:<\/p>\n

\"\"<\/a><\/div>\n
Variations de textures et de maillages pour des tuiles de sol en pierre<\/i><\/div>\n

<\/h3>\n

IV – Quelques pr\u00e9cisions et une d\u00e9mo<\/h3>\n

Pas mal n’est-ce pas? Mais voici quelques autres consid\u00e9rations sur le probl\u00e8me:<\/p>\n