Diagramme moléculaire avancé pour le level design – Partie 1

Introduction

L’objectif de l’article est d’étendre – voire enrichir – la grammaire du diagramme moléculaire proposée par Luke McMillan et Nassib Azar dans leur article “The Metrics of Space: Molecule Design” sur Gamasutra afin de répondre aux besoins des étudiants en level design ; que ce soit dans un contexte d’analyse ou de conception.

Parti pris #1 : proposer des solutions d’abord visuelles en noir et blanc (formes, gamme de gris, symboles) puis en couleur et enfin textuelles (chiffres, lettres)

Parti pris #2 : utiliser la distinction entre “espace” et “mission” proposée par Joris Dormans dans sa publication “Adventures in Level Design

Parti pris #3 : utiliser le concept de plan de circulation développé par Benjamin Bauer dans son document “Ben’s Small Bible of Realistic Multiplayer Level Design

La première partie de l’article sera consacrée exclusivement à l’espace et à la circulation d’un point de vue général, sans tenir compte des éléments de gameplay.

La seconde partie de l’article – plus courte – sera consacrée à la mission, avec un focus particulier sur les éléments de gameplay.

(La distinction entre l’espace et la mission est utilisée ici à fin de pédagogie, mais dans la pratique, elle n’existe pas, les deux étant considérées simultanément).

Importance du contexte d’utilisation : en situation de conception, les informations sur “l’espace et la mission” se construisent petit à petit, alors qu’en situation d’analyse on dispose déjà de la totalité des informations. Ainsi le degré d’abstraction est plus facile à atteindre en faisant de la conception qu’en faisant de l’analyse :

  • Conception : abstraction “simple” > plan au sol / blocking > map en volume jouable
  • Analyse : map en volume jouable > (écart énorme) > “abstraction enrichie”

Je tiens à remercier les relecteurs : Mathias Gonot, Alexandre Tournois, Virgile Sadon et Jeremy Schade.

I / Espace

1.1 / Rappels

Un diagramme moléculaire est un graphe composé de :

  • nœuds (“cercles”) représentants des espaces 
  • liens (“traits”) représentant des connexions entre les espaces, qui permettent soit une circulation, soit une visibilité

La différence entre les nœuds se fait par le type d’espace, en général selon leur fonction ou leurs caractéristiques.

La différence entre les liens reliant deux nœuds se fait par le type de connexion :

  • un trait plein représente une circulation en double sens (bidirectionnelle)
  • un trait plein avec une flèche représente une circulation en sens unique (unidirectionnelle)
  • un trait en tirets représente une visibilité seule, sans circulation
  • un trait plus ou moins épais peut représenter une circulation plus ou moins directe
  • un trait plus ou moins long peut représenter une plus grande distance

La suite de l’article s’appuiera sur la carte “Kino der Toten” du jeu “Call of Duty Black Ops”, principalement parce qu’elle était étudiée par mes élèves lors de la rédaction de l’article, et se révèle assez riche pour être représentative.

Diagramme moléculaire de “Kino der Toten”. À noter la circulation en anneau, avec une connexion entre les extrémités Lobby et Stage, la visibilité entre Balcony et Theater, et enfin la circulation par téléportation entre Theater et Projector Room. J’ai pris la liberté de figurer sur le diagramme certains espaces uniquement visibles dans lesquels le joueur ne peut aller : Entrance, Upper Hall, Street, Dumpster et Lower Couch

En principe, un diagramme moléculaire ne prend pas en compte de l’organisation réelle de l’espace : deux nœuds ne sont pas nécessairement à gauche ou à droite l’un de l’autre ; ou au-dessus ou en dessous l’un de l’autre simplement parce que visuellement ils paraissent l’être.
Toutefois, si le diagramme moléculaire représente un espace de jeu sur un seul plan (vu de dessus ou vue de côté) alors il est possible (mais pas forcément souhaitable) de représenter des relations spatiales entre les nœuds en fonction de leur position respective.

1.2 / Circulation

Si les modalités les plus usuelles de circulation entre les espaces sont proposées (double sens, sens unique), certaines modalités méritent de figurer sur un diagramme.

Circulation conditionnée : il peut être pertinent de signaler un accès restreint comme une porte fermée à clef ou une salle gardée, notamment à l’aide d’un verrou ainsi que la mention de la nature de la restriction.

Toujours dans “Kino der Toten”, la circulation entre Stage et Theater est limitée par un rideau (curtain) ; une fois le rideau levée, la connection est alors établie dans les deux sens

Connexions multiples : dans certains cas, il est possible que deux espaces soient reliés par plusieurs connexions, soit similaires (deux portes), soit différentes (une porte et une fenêtre). La recommandation dans ce cas est d’évaluer la pertinence de les signaler – selon les intentions de design.

Toujours dans “Kino der Toten”, il existe deux connections entre Back room et Back alley : d’une part une circulation dans les deux sens, et d’autre part une visibilité – principalement de Back room sur Back alley – à la faveur de fenêtres donnant sur la ruelle

1.3 / Taille relative des espaces

Il est parfois nécessaire ou utile de coder la taille relative des espaces afin de donner une idée d’ensemble, et la solution la plus simple consiste à utiliser la surface des nœuds.

Toujours dans “Kino der Toten”, la surface respective des nœuds donne une information sur la taille relative des espaces ; ainsi Foyer, Stage et Theater sont les espaces les plus grands ; et Projector Room est l’espace le plus petit ; les autres sont de taille comparable. À noter que les principaux espaces uniquement visibles ne figurent pas sur ce schéma

1.4 / Stratification

Si le diagramme moléculaire est particulièrement bien adapté au plan au sol (vue de dessus) ou au plan en coupe (vue de côté) ; il rencontre vite ses limites pour représenter des différences d’élévation ou de profondeur, tout simplement parce qu’il est difficile de représenter des informations en trois dimensions sur un espace en deux dimensions. 

Voici quelques propositions qui ont fait leurs preuves.

Gamme de gris : en choisissant de colorer les nœuds en gris plus ou moins clairs, il est possible d’indiquer une différence de hauteur (sur un plan au sol) ou de profondeur (sur un plan en coupe). Par convention, plus le gris est clair, plus l’espace est “haut” ou “proche” ; et plus le gris est sombre, plus l’espace est “bas” ou “loin”.

Toujours dans “Kino der Toten”, les espace au rez-de-chaussée peuvent être codés en gris moyen et les espaces peuvent être codés en gris clair

Nœuds à strates multiples : le cas peut arriver qu’un nœud contienne plusieurs strates, et dans ce cas cela peut être codé avec des bandes (une par niveau d’élévation ou de profondeur). 

Toujours dans “Kino der Toten”, le Foyer et le Lobby sont à la fois au rez-de-chaussée et au premier étage

Types de connexions entre strates : bien que cela ne soit pas formellement nécessaire, il peut être intéressant de préciser comment sont reliés les espaces, à l’aide de symboles, par exemple : chute (par défaut), glissade, échelle, escalier, ascenseur, escalade, grappin, zipline, trampoline, vol, conduit d’aération ou téléport.

Dans ce schéma, les différences d’élévation entre les espaces sont signalées par une différence de gris

Si l’on applique tous ces principes, voici à quoi pourrait ressembler le diagramme moléculaire de “Kino der Toten” :

Ce diagramme moléculaire “enrichi” de “Kino der Toten” exprime d’une part la position, la taille et la hauteur relative des espaces, et d’autre part les différents types de connexion

1.5 / Superposition

Une conséquence de la conception d’espaces “les uns au-dessus des autres” ou “les uns derrière les autres” c’est qu’ils peuvent se superposer et rendre la création du diagramme difficile. Voyons les solutions.

Travailler par couches distinctes : L’approche usuelle consiste à travailler par couches, c’est-à-dire de grouper ensemble les espaces qui sont au même niveau d’élévation ou de profondeur. Ainsi dans le cas d’un plan au sol, il conviendra de faire des “renvois” d’une couche à l’autre afin de faciliter la navigation.

Toujours dans “Kino der Toten”, la partie de gauche représente les espaces du rez-de-chaussée, alors que la partie de droite représente les espaces à l’étage. J’ai pris la liberté de couper le Lobby et le Foyer en deux nœuds (lower et upper). On voit que la lisibilité reste bonne si les espaces sont groupés, mais tend à diminuer si les espaces sont dispersés

Travailler en éclaté : Une autre approche usuelle consiste à réaliser un “éclaté”, en organisant les différentes parties du diagramme tout autour du bloc central.

Toujours dans “Kino der Toten”, le rez-de chaussée se trouve désormais au centre de l’image, et les différentes parties à l’étage sont projetées en décalé tout autour. La lisibilité du diagramme dépend beaucoup de la structure du niveau

Travailler en vue isométrique : Si vous vous sentez l’esprit aventureux, et que votre diagramme s’y prête, vous pouvez tenter de représenter la superposition dans une seule et même couche. 

Toujours dans “Kino der Toten”, ce diagramme utilise une vue en perspective isométrique afin de représenter la relation entre les espaces du rez-de-chaussée et ceux du premier étage ; on voit bien les paradoxes d’une telle représentation : il est difficile d’insérer certaines connections, de respecter la réalité des superpositions… ou même de réaliser un tel schéma avec trois étages ou plus !

La conclusion de cette série est qu’il est difficile d’avoir à la fois un schéma lisible et un schéma qui respecte les relations spatiales – notamment la superposition. Ainsi je pense qu’il est préférable d’avoir d’abord un schéma clair et lisible, et ensuite, si cela est possible, un schéma qui respecte les relations spatiales.

1.6 / Différentes échelles

L’un des intérêts du diagramme moléculaire est de pouvoir travailler à différentes échelles, de manière fractale : le nœud d’un diagramme à une échelle donnée peut contenir un diagramme à une échelle inférieure. Exemples de différentes échelles : régions > villes > quartiers > bâtiments > pièces…

Dans cet exemple, le nœud Cité du premier diagramme contient lui même un autre diagramme ; j’ai pris la liberté de déplacer la barre du trait indiquant l’accès restreint à proximité des nœuds Cité et Caserne afin d’indiquer où se trouvait la garde

1.7 / Insertion

Prolongement naturel du point précédent (différentes échelles), il existe un cas très courant d’espace-dans-un-espace. Dans ce cas, il est conseillé de fonctionner en parcelles, et de détailler ensuite chaque parcelle.

En imaginant que la base soit un espace complètement ouvert à libre circulation, il est possible de créer plusieurs parcelles, dont le contenu de chacune est détaillé dans un autre diagramme. Cette logique convient aussi à une île.

À noter que dans le cas de l’utilisation de parcelles, on “tord” les règles de constructiondes graphes, en supposant une interconnection complète entre chaque nœud. Une représentation plus correcte serait de tracer un trait de connection entre chaque nœud – ce qui peut vite devenir complexe à la lecture alors que l’objectif est d’avoir une bonne lisibilité.

1.8 / Espace transitionnel

Une difficulté particulière peut survenir quand il existe une connexion entre plusieurs espaces qui se révèle être assez “grande” ou assez “complexe” pour soulever la question de savoir s’il faut la traiter comme un espace (nœud) ou comme une connexion (lien).

Espace de distribution : dans le cas d’espaces de distribution (typiquement des couloirs) il est préférable de les représenter comme des liens, avec une à plusieurs branches, qui peuvent être connectées par des “petits nœuds” (carrefours).

Dans cet exemple, les pièces sont des nœuds majeurs et les embranchements (carrefours) des nœuds mineurs ; le choix de respecter la topologie permet de faciliter la lecture de l’espace

Nous verrons en fin de première partie que la notion d’espace transitionnel s’accordera à la notion de circulation.

1.9 / Type de terrain

Il est parfois nécessaire ou utile de code le type de terrain. La solution la plus évidente serait de coloriser l’intérieur des nœuds, mais comme par convention le gris est utilisé pour renseigner sur la hauteur ou la profondeur, la solution proposée est d’utiliser une pastille de couleur.

Une prudence toutefois : d’une part l’utilisation de la couleur ne respecte pas la contrainte du noir et blanc pour les schémas, et d’autre part cela peut priver l’utilisation de ces couleurs pour coder d’autres informations – notamment de gameplay.

1.10 / Apport des cartes multijoueurs : primauté de la circulation

Dans le design des cartes multijoueurs, la réflexion commence d’abord par le plan de circulation, et se poursuit ensuite par la réflexion sur la configuration de l’espace. C’est une fois ces étapes terminées que le level designer se penche sur la forme réelle de l’espace, avec un plan au sol ou un plan en coupe.

En s’inspirant de la configuration “classique” des appartements des années 70, voici à quoi pourrait ressembler d’une part, le plan de circulation (étape 1) ; et sa transformation en diagramme moléculaire par simple ajout des espaces et leur fonctionnalité (étape 2) ; j’ai pris la liberté de remplacer les cercles par des rectangles à bords arrondis

Par ailleurs, les cartes multi-joueurs doivent prendre en compte les éléments suivants :

  • l’espace doit (en général) être bouclé sur lui-même
  • l’espace peut-être parcouru dans un sens ou dans un autre

Ce qui est très différent de ce qui est attendu d’une carte d’un jeu solo :

  • l’espace est (en général) parcouru dans un sens (du début à la fin du niveau)
  • l’espace contient souvent un chemin principal, quelques chemins secondaires (branches) qui peuvent rejoindre le chemin principal ou être des impasses

1.11 / Introduction de la notion “d’espace-parcours” et conclusion de la première partie

À l’issue de cette première partie, il apparaît qu’il est possible d’étendre le diagramme moléculaire en tant que graphe (nœud et liens), vers le diagramme moléculaire en tant qu’espace-parcours ; c’est-à-dire une combinaison entre une représentation abstraite à la fois de la circulation (le parcours) et de l’espace.

Ainsi, en tirant partie de l’aspect fractal, il serait possible de réaliser des diagrammes moléculaires d’espace-parcours de la façon suivante :

  • nœud(s) d’origine (échelle macro)
  • “zoom” sur chaque nœud macro ; puis détail du plan de circulation interne, puis ajout de nouveaux nœuds, puis affinage de structure de circulation et de la taille des nœuds (échelle méso) 
  • “zoom” sur chaque nœud méso ; etc … (échelle micro, puis nano si besoin)

Voyons comment cela se traduit dans le contexte d’un niveau de jeu.

1.11.1 Q3DM1 (Quake 3 Deathmatch Map #01)

Etape 1 : On part du niveau entier considéré comme un nœud unique

Etape 2 : On ajoute le plan de circulation (abstrait) du joueur au sein du niveau – comme il s’agit d’une carte multi-joueurs, il n’y a pas de sens privilégié

Etape 3 : On propose une “découpe” de l’espace intérieur du niveau en ajoutant les nœuds correspondant aux pièces (qui englobent une partie de la circulation) ; le restant étant considéré comme des couloirs dont les intersections (carrefour) sont représentés par des “petits nœuds” – il s’agit d’une possible interprétation du niveau mais il peut en exister d’autres

Par ailleurs, étant donné que le niveau final est sur un étage (pas de stratification), il n’est pas nécessaire d’introduire de notion de haut ou bas, ni d’informer les différents types de connexion (à ce stade).

J’espère que cet article vous aura intéressé et que sa lecture aura été agréable.

~ ~ ~

Partie 2 : Mission