Suite à mes articles sur les cartes de champions et de primes de match pour Blood Bowl, réalisées via Magic Set Editor, j'ai eu des retours me demandant comment je les avais réalisées. Voici donc un petit tutorial pour réaliser des cartes avec des éléments simples.
Penser la carte en amont
Première étape, il faut réfléchir à ce que l'on souhaite intégrer sur la carte. Le meilleur moyen est de "poser" la carte sur papier, ou d'en faire un design vierge dans un logiciel de dessin.
Pour ma part, histoire que ça puisse resservir, je vais partir sur une carte pour Song of Blades and Heroes. Il y aura plusieurs champs de types différents ainsi :
- un nom de carte (du texte simple)
- un descriptif avec les règles spéciales (du texte multi-lignes)
- un coût (un nombre)
- une valeur d'activation (liste de choix)
- une valeur de combat (un nombre)
- un type de carte (Personnalité / Troupe)
- une image
Quelques minutes sur Paint.Net me donnent ce premier dessin, simple, pas très beau, mais suffisant pour le tutorial.
Créer le "jeu" dans Magic Set Editor
Dans le répertoire d'installation de Magic Set Editor (MSE), ouvrez le répertoire data. C'est ici que se trouvent tous les fichiers qui génèrent les différents templates. Trouvez un bon suffixe pour votre jeu. Pour le tutorial, je prendrais sobah. Créons un répertoire nommé sobah.mse-game. Dans ce répertoire, créons un fichier texte nommé game, sans extension.
Pour l'édition des fichiers textes, je vous conseille Notepad++. Pour commencer, il va falloir passer le fichier en UTF8 (Encodage / Encoder en UTF-8). Histoire de travailler plus facilement, allez dans Paramétrage / Préférences pour modifier comment fonctionnent les tabulations. Dans l'onglet Menu langage/tabulations, décocher l'option Insérer des espaces. Enfin, activez l'affichage des tabulations via le menu Affichage / Symboles Spéciaux / Afficher les blancs et les tabulations. Pourquoi ? Parce que Magic Set Editor fait une grande utilisation des tabulations, alors autant bien les afficher.
Quelques informations de description sur votre jeu sont ensuite nécessaires. On va remplir comme suit le fichier game :
mse version: 2.0.0
short name: SBH
full name: Song of Blades & Heroes
icon: icon.png
position hint: 4
installer group: sobah/default
Parmi les données inscrites, short name et full name servent à afficher votre set de cartes. icon permet d'associer une image à votre set. Ce sera celle affichée dans la liste supérieure lorsque vous choisissez le set de cartes. Une icône d'environ 70 pixel de large est demandée, à placer dans le même répertoire que le fichier game. Dernier élément d'importance, position hint indique à quel rang vous souhaitez voir votre jeu. Magic The Gathering est généralement en première position, mais vous pouvez décider de placer le vôtre en premier si vous ne souhaitez utiliser que celui-ci.
Variables de jeu
Nous allons maintenant continuer l'édition du fichier game par l'ajout des variables du jeu. Dans le jargon de MSE, cela s'appelle des fields. Ils peuvent être de plusieurs types (text, image, choice, ...) et seront ensuite réutilisés dans les styles.
La documentation est assez complète et permet de bien cerner les différentes options. Voici comment nous allons définir le nom et les règles spéciales :
card field:
type: text
name: card_name
description: Nom de la carte
card list column: 1
card list visible: true
identifying: true
card field:
type: text
name: special_rules
description: Règles spéciales
show statistics: false
card list visible: false
card list allow: false
multi line: true
Les espaces présents avant les lignes sont des tabulations. La hiérarchie est très importante ici, il ne faut surtout pas inclure d'espace inutile (d'où l'intérêt de les afficher). Le name est à utiliser avec précaution. Un nom sans caractères spéciaux, sans espace, est préférable. Il sera réutiliser dans les feuilles de style. C'est ici également qu'on définit si le texte est multiline ou pas. La doc permet de connaître les valeurs par défaut de nombreux champs, consultez-la.
Passons aux valeurs chiffrées :
card field:
type: choice
name: quality_value
description: Valeur d'activation
card list column: 2
card list visible: true
identifying: true
initial: 4+
choice: 1+
choice: 2+
choice: 3+
choice: 4+
choice: 5+
choice: 6+
card field:
type: text
name: combat_value
description: Valeur de combat
card list column: 3
card list visible: true
script: only_numbers(value)
card field:
type: text
name: points_value
description: Points cost of the card
card list column: 4
card list visible: true
identifying: true
script: only_numbers(value)
card field:
type: choice
name: card_type
description: Type de carte
card list column: 6
card list visible: true
initial: standard
choice: standard
choice: personality
Les informations sont pratiquement identiques, et on peut voir que le type de points_value et combat_value est encore text. Et oui, il n'y a pas de champs numériques. Pour rendre numérique ces champs, on va jouer avec les scripts. Il s'agit d'instructions qui permettent de réaliser des contrôles / modifications sur les données. Ici, indiquons que l'on souhaite uniquement des nombres, avec only_numbers(value). On reparlera des scripts un peu plus loin.
quality_value est de type choice. Cela signifie que l'utilisateur pourra sélectionner un élément parmi une liste. Nous indiquons une liste de choix avec tous les éléments choice: xxx. Parmi ces éléments, nous répétons la valeur de celui qui sera choisi par défaut, avec initial: 4+. Dans les faits, un field de type choice affichera un menu déroulant. card_type est du même acabit, proposant deux choix.
Pour en terminer avec les fields, nous allons rajouter deux champs image. Je reviendrais après le code sur le pourquoi de deux images.
card field:
type: image
name: img_description
description: Image de la carte
editable: true
show statistics: false
card list visible: false
card list allow: false
save value: true
card field:
type: choice
name: img_bg
description: Image de fond de la carte
show statistics: false
card list visible: false
card list allow: false
initial: standard
choice: standard
Le premier field décrit l'image qui nous servira à illustrer la carte. On définit le type, on ne l'affiche pas dans les stats, rien de bien sorcier. Pour la seconde, c'est un peu plus compliqué. Le type image permet d'afficher une image "éditable". Or, nous allons avoir besoin d'une image de fond non-éditable. Nous allons pour cela prendre un choice, que l'on transformera via la feuille de style en image. Un seul choix possible (standard), mais plus tard, on pourrait définir plusieurs fonds (pour différentes factions, armées, ...).
Et voilà , le fichier game est terminé. Ou presque ...
Script
Les scripts sont des bouts de code qui permettent de réaliser presque tout et n'importe quoi sur les données. Pour ce tutorial, on va rester dans du simple, et uniquement réaliser un script pour s'assurer que les valeurs rentrées dans certains champs sont uniquement numériques.
Créons un autre fichier dans le répertoire du jeu, et nommons-le script. Toujours pas d'extension, et un encodage en UTF-8. Dedans, juste ce bout de code, qui à l'aide d'une expression régulière, s'assure que seuls les caractères numériques sont acceptés comme données :
only_numbers := filter_text@(match: "^[0123456789]+")
On retrouve le only_numbers spécifié dans le fichier game. Retournons-y, d'ailleurs, dans ce fichier. Il faut lier le fichier script, pour que MSE puisse le retrouver. Avant la définition des fields, mais après les spécifications du jeu, insérons la ligne qui suit :
init script: include file: script
On a inclus notre fichier de script, qui peut maintenant correctement s'utiliser dans la définition des fields !
Feuille de style
Revenons dans le répertoire data de MSE, et créons-y un nouveau répertoire. Nommons-le sobah-standard.mse-style. C'est dans ce répertoire que nous allons définir le style de notre carte. Un même jeu peut avoir pleins de cartes de type différent, et autant de répertoire de style. Dans notre répertoire, on va créer un fichier de texte vide, en UTF-8, nommé style.
Comme pour le fichier game, ce fichier comporte des informations descriptives.
mse version: 2.0.0
game: sobah
short name: Standard
icon: icon.png
position hint: 1
installer group: sobah/default
depends on:
package: sobah.mse-game
card width: 298
card height: 402
card dpi: 120
Pour le game, insérez le nom du répertoire contenant le fichier game, moins l'extension mse-game. L'icône sert à représenter le style, et doit faire environ 70 pixels de large. Là aussi, il faut placer le fichier dans le répertoire du fichier style. Le position hint sert à indiquer la position du style parmi tous les styles du jeu.
Pour les dimensions de la carte, prenez les informations du fichier image précédemment créé. Il va nous rester maintenant à définir le style de chaque élément pour l'intégrer sur la carte.
Définition du style
Comme précédemment, un coup d'oeil à la doc officielle est une très bonne aide pour connaître les différents champs.
Pour commencer, ouvrez votre image dans un éditeur / visualiseur d'image, qui vous permet de visualiser les coordonnées d'une sélection. Par exemple, avec Paint.Net, quand on sélectionne une zone, on voit les coordonnées apparaître dans la zone d'informations inférieures de l'écran.
Sélectionnez la zone dans laquelle vous souhaitez voir apparaître le titre. Cela vous donnera les coordonnées à renseigner pour le style du champ. A la suite des informations sur la taille de la carte, insérez ceci :
card style:
card_name:
left: 15
top: 10
width: 272
height: 58
alignment: middle center
font:
name: Arial
size: 16
color: rgb(0, 0, 0)
weight: bold
z index: 1
On réutilise ici comme définition de champ le name du field créé dans le fichier game. Les tabulations sont très importantes ! card_name doit être précédé d'une tabulation, left de deux, color de trois.
On définit ici la position de l'élément, à l'aide de left, top, width et height. Le z index est à 1. Il sert à ordonner la hauteur des éléments, qui peuvent se superposer. Un z index haut signifie que l'élément est au-dessus des autres (comme une pile de feuilles, par exemple).
On précise qu'on souhaite centrer le texte verticalement et horizontalement par l'alignment, et on définit la police utilisée. Pour cela, on peut remarquer qu'il y a un décalage en tabulations. MSE distingue ainsi les "groupes" d'éléments, ici l'ensemble de la définition de la font, soit un nom, une taille, une couleur et son poids (gras ou normal).
On va procéder de même pour les autres champs textes classiques :
special_rules:
left: 9
top: 259
width: 276
height: 131
font:
name: Arial
size: 10
color: rgb(0, 0, 0)
z index: 1
combat_value:
top: 162
left: 243
width: 38
height: 42
font:
name: Arial
size: 16
color: rgb(255, 100, 1000)
weight: bold
z index: 1
points_value:
top: 358
left: 6
width: 55
height: 34
font:
name: Arial
size: 16
color: rgb(0, 0, 128)
z index: 2
quality_value:
top: 99
left: 243
width: 37
height: 40
font:
name: Arial
size: 16
color: rgb(0, 128, 0)
z index: 1
points_value a vu son z index passer à 2, car sinon il serait masqué par special_rules. Voilà un des intérêts de cette fonctionnalité.
J'ai également inclus dans cette liste quality_value, qui est de type choice. Par défaut, ces éléments sont rendus au format texte. Ce qui signifie que le texte affiché dans le menu déroulant est celui qui sera affiché sur la carte. Ce que l'on souhaite, ici.
Passons maintenant aux images. Tout d'abord, les deux images éditables.
img_description:
top: 80
left: 10
width: 278
height: 162
z index: -1
card_type:
left: 2
top: 2
width: 10
height: 10
z index: 1
render style: image
popup style: in place
choice images:
standard: ico-standard.png
personality: ico-personality.png
Le premier élément, img_description, est une image que l'utilisateur pourra charger dans chaque carte. C'est un champ qui s'active par un double-click, avec l'explorateur de fichiers qui s'ouvre ensuite. Il y aura du texte par-dessus cette image, nous mettons donc un z index de -1 (car il y a un petit truc à mettre au niveau 0 ensuite).
Le second est un élément de type choice. Par défaut, le render style est de type text. Nous souhaitons avoir une icône (un point dans une image 10*10) pour indiquer que la carte concerne une Personnalité. Pour cela, on modifie le render style, et on renseigne l'image à afficher pour chaque choix dans choice image. Cela peut servir, dans d'autres jeux, à gérer divers éléments par des icônes. Peu importe le nombre de choix, on peut leur affecter chacun une icône différente (ou la même pour plusieurs choix).
La carte est presque terminée, il nous reste le cadre de fond à intégrer via le field img_bg.
img_bg:
left: 0
top: 0
width: 298
height: 402
z index: 0
render style: image
popup style: in place
mask: card-mask.png
choice images:
standard: card-blank.png
On a, si l'on s'en souvient, définit img_bg comme un choice. Comme pour l'icône de Personnalité, on va transformer le choix en image. Ici, un seul choix donc une seule image, et elle prend toute la carte. Le z index est à 0, pour que les champs éditables s'écrivent dessus.
Il reste la question du mask. On souhaite afficher une image dans la carte, mais certaines informations seront au-dessus de cette image (combat / qualité). Qui plus est, notre modèle vierge n'a pas de transparence pour laisser passer la carte. Il faut donc définir un masque. C'est une image toute simple, en noir et blanc, qui définit en noir les zones transparentes d'un élément. Ici, on colorie la zone où doit s'afficher l'image en noir, le reste en blanc.
It's Over !
On a une carte fonctionnelle, pas très belle, mais normalement vous devriez avoir compris le principe. Fouillez les templates existants à la recherche d'idées.
L'élément font peut être pas mal modifié. Trouvez les bonnes polices, les bons effets (shadow, color, ...), tout est dans la doc. On peut également jouer avec des rotations (propriétés angle). Bref, une fois le template de base réalisé, vos compétences de graphistes feront le reste.
Si vous avez des questions, posez-les en commentaires, ou par mail. De même, si vous trouvez des erreurs, ou des trucs pas clairs, signalez-les moi, que je les corrige / améliore.
[sdm_download id="1930" fancy="1" button_text="Télécharger"]