Inkscape utilisé dans la création de décors de jeu

Le jeu Littlest goddess est un jeu de plateforme en langage Python crée par l’équipe Cine-Science Logic, lors des fréquents concours de programmation de jeu pyweek.

C’est un jeu de plate-forme dans lequel il faut aider la petite déesse Devika à retrouver son animal de compagnie, utilisant différentes bibliothèques (simulation physique, effets avec les shaders OpenGL, etc…), mais le plus intéressant pour nous, est qu’ils ont utilisé Inkscape pour construire les niveaux.

Voici une capture d’écran :

 

D’après le commentaire des développeurs du jeu, voici ce qu’Inkscape leur a apporter :

« L’utilisation d’Inkscape pour la conception des niveaux est la meilleur idée que quelqu’un puisse avoir, c’est un réellement un parfait moteur de layout 2d. Il produit un très bon XML et cela signifie pour nous qu’il est aisé d’analyser le SVG et de le charger directement dans le jeu. Si il n’y avait pas eu le bug d’ODE (une bibliothèque de gestion de physique) dans Ubuntu, nous aurions pu faire des choses dingues avec des polygônes convexes et tout le reste. Il est clair que si nous n’avions pas utilisé Inkscape, nous n’aurions pas pu réaliser notre jeu. »

En v.o. :

« Using inkscape to design your levels is the best idea anyone could ever have, its a *perfect* 2d layout engine it really really is. the fact that it produces nice xml means that its fairly easy to parse the .svg it produces and load it stright into your game. if it wasn’t for the trimesh ode bug in ubuntu we could of done some crazy stuff with convex polgons and everything. if we hadn’t of used inkscape we plain couldn’t of made our game, thats a fact! »

Voici donc un autre domaine d’application trouvé pour Inkscape.

Créer un soleil rayonnant

Voici un petit didacticiel pour créer un objet type soleil rayonnant dans un style naïf.
Attention ce didacticiel ne fonctionne pas avec Inkscape <=0.45.1 en raison d’un bug avec le centre de rotation et les pavages de clones. Il faut utiliser la version 0.46 (ou supérieure) pour pouvoir le pratiquer.

Pour cela on commence par faire un triangle qui représentera un rayon de soleil, en créant 3 points avec l’outil courbe de Bézier/segment de droite (b) comme ci dessous

On voit ici (après être repassé en mode sélection (b) et en cliquant sur le triangle (2 fois s’il n’était pas sélectionné), que le barycentre (la petite croix qui représente le centre de rotation) est au centre…

Il va donc falloir la déplacer à l’extrémité droite du triangle, au point qui servira de centre du soleil. Pour cela, presser la touche alt qui sert à sélectionner la croix (alt n’est pas indispensable dans ce cas, mais est utile lorsque la croix chevauche plusieurs point), puis déplacez-la avec la souris. Utiliser Ctrl vous aidera à la déplacer horizontalement, pour l’amener plus précisément au sommet de droite du triangle.

Avant de dupliquer ce triangle, il reste une dernière chose à faire, récupérer la longueur du triangle (cf la case L (largeur) dans la barre d’option de l’outil en haut (sur la capture d’écran en anglais, W comme width) J’ai personnellement choisi de le redimensionner pour qu’il fasse 100 de longueur, en entrant 100 dans ce champ.

Nous allons maintenant cloner ce triangle avec rotation pour obtenir la forme désirée. Il faut pour cela aller dans le menu édition >cloner >Créer un pavage avec des clones. On conservera la mode P1 – translation. Il peut être plus prudent, si cet outil à déjà été utilisé avec des paramètres modifiés, d’appuyer sur le bouton R-à-Z (remise à zéro) en bas à gauche de cette fenêtre. Ensuite il faut cliquer sur l’onglet translation (shift en anglais), puis dans le champ par colonne entrer la valeur négative de la largeur du triangle (dans mon cas, -100). Cela permet de compenser le décalage de la largeur de l’objet, qui est effectué par défaut, par le mode P1 – translation.

Il reste à remplir dans l’onglet Rotation, la rotation ajouté à chaque colonne (per column en anglais, sousligné dans l’image), puis en fonction de cela le nombre de clones en colonnes (en bas à droite) :
Il n’y a plus qu’à appuyer sur le bouton Créer pour voir le résultat. Il est possible d’appuyer sur Supprimer, pour revenir en arrière si cela ne convient pas à votre figure et à l’effet désiré, puis d’appuyer de nouveau sur Créer après avoir changé les paramètres.

Nous avons maintenant la figure désirée, le reste de ce didacticiel est plutôt pour le côté pratique des manipulations dans certains cas. Il est maintenant possible de modifier l’objet original, les clones se déformerons simultanément.

Nous allons donc maintenant fusionner les clones, afin de n’avoir plus qu’un objet à manipuler, ce qui permettra de faciliter sa gestion pour la suite. Pour cela, il faut :

  1. Sélectionner tous les objets (menu édition=>sélectionner tout ou touche ctrl+a). On voit ici qu’il y a une multitude d’objets.
  2. Délier tous les clones (menu édition=>cloner=>délier le clone ou touches maj+alt+d)
  3. Fusionner l’objet (menu Chemin=>union ou touches ctrl++)

Et voila, nous avons notre objet, prêt à d’autres manipulations… On peut éventuellement ajouter un cercle au milieu (puis le fusionner) pour avoir un soleil du type du soleil rouge japonais.

Filtres blend sous Inkscape (SVN)

Sur le SVN d’Inkscape a été posté un fichier d’exemple des filtres blend nouvellement ajoutés à Inkscape. En gros, les filtres blend sont les équivalents des modes de calque sous Gimp.

Les filtres de blend ont été ajouté dans Inkscape SVN, un exemple est donné dans les sources, mais pas installé dans le répertoire d’exemple pour le moment.

Au moins 5 modes sont gérés. Sur l’image de gauche à droite et de haut en bas :

sans filtre – normal
multiply (produit) – screen (écran)
darken (assombri) – ligthen (éclairci).

Pour utiliser un filtre, il n’y a pour le moment pas d’interface, mais c’est un des projets du « Google summer of code ». Il faut donc éditer le fichier SVG manuellement ou passer par l’éditeur XML intégré à Inkscape (maj+ctrl+X).

En éditant le source, dans le style du chemin, il faut ajouter un champs ’filter’ :
filter:url(#filter2888) ;
et dans les définitions , ajouter une définition de filtre :

<filter inkscape:collect= »always »
id= »filter2888″>
<feblend mode= »normal »
id= »feBlend2814″
in= »SourceGraphic »
in2= »BackgroundImage » />
</filter>

Ou bien, dans l’éditeur XML, ajouter un nœud : svg:filter id= »filter2888″

y ajouter un champs inkscape:collect always
puis y insérer un nœud fils : svg:feBlend id= »feBlend2814″
y ajouter les champs : in:SourceGraphic
in2:BackgroundImage
mode:normal

Dans les deux cas, le mode (normal dans les exemples) peut être remplacé par le mode désiré.