Tutorial pour Magic Set Editor

      Aucun commentaire sur Tutorial pour Magic Set Editor

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.

Design vierge

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.

Masque

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.

Fichiers du Tutoriel MSE

Fichiers réalisés lors du tutoriel sur la création d’un template Magic Set Editor

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *