Dans cet article, nous allons apprendre comment mettre des images dans le jeu (images de fond et de personnages). Pour trouver des images sur internet, voir notre article : Trouver des images.
1. Bases
Les images sont comptées en pixels (px) plutôt qu’en cm ou autre système de mesure. Un pixel est un carré de couleur comme on peut le voir ici :
Par défaut l’écran de Ren’Py est de 800×600 px. Si vous mettez une image trop grande vous ne la verrez pas en entier, si vous mettez une image trop petite, elle ne remplira pas tout l’écran :
Image trop petite pour Ren’Py
Vos images de fond doivent donc faire 800 x 600 px (pixels) et les personnages environ 250 à 400 px de largeur et 250 à 500 px de hauteur suivant la corpulence de votre personnage.
Important : Les images peuvent avoir différents formats (un format, c’est ce que vous trouvez après le nom de votre image ou de votre fichier, par exemple le format de Power Point est ppt ou pptx). Seules les images en format png et jpg sont acceptées dans Ren’Py !
De plus, quand vous nommez votre image, je vous conseille de mettre ni d’espace, ni de signe de ponctuation, ni d’accent dans son nom. Par exemple ne nommez pas votre image Joséphine contente ! mais josephine_contente
Il est important que les personnages que vous mettez dans le jeu soient dégagés de leur fond originel. Par exemple, dans l’image ci-dessous, le personnage de gauche a été bien préparé, bien découpé, alors que celui de droite a encore son fond blanc originel.
- Source : Images de Wikimedia Commons
Dans un jeu Ren’py, il peut être très pertinent d’avoir un même personnage avec différentes expressions. Par exemple, si le joueur réussit une épreuve le personnage affichera un sourire et si le joueur échoue, le personnage semblera triste :
-
-
sophie_surprise.png
-
-
sophie_triste.png
-
-
sophie_question.png
-
-
sophie_rire.png
-
-
sophie_salutation.png
-
-
sophie_heureuse.png
-
-
sophie_idee.png
Vous pouvez utiliser ce personnage ainsi que celle de Mathieu directement dans votre jeu Ren’Py (ces images sont prêtes, bien découpées et aux bonnes dimensions), elles sont disponibles pour vous dans cet article et d’autres se trouve également dans celui-ci.
Pour vos jeux, vous pouvez utiliser des dessins papiers que vous scannerez ensuite (ou photographierez) , faire des photos ou faire des dessins à l’ordinateur ou sur votre tablette, ou bien encore choisir des images sur internet libres de droits.
Pour savoir comment créer vos propres images ou les modifier (comme redimensionner, enlever le fond blanc ou changer l’expression d’un personnage), vous pouvez consulter notre article : Créer et modifier des images.
Vous trouverez beaucoup d’images utilisables (gratuitement et légalement) sur Wikimedia Commons.
2. Mettre vos images dans le jeu
La première chose à faire, une fois vos images prêtes et aux bonnes dimensions, est de les mettre dans votre dossier de jeu. Pour cela, ouvrez Ren’Py, sélectionnez votre jeu et cliquez sur game (dans Open Directory) :
Cliquer sur game permet de tomber directement dans le dossier où mettre les images.
Cela vous permettra de tomber directement dans le dossier du jeu où mettre les images, mais vous pouvez aussi y accéder de manière conventionnelle en cliquant sur celui-ci, puis cliquez dans game.
Vous pouvez ensuite y mettre toutes les images que vous voulez utiliser (copier-coller). Certains préfèrent, avant cela, créer un dossier « Images » à cet endroit (puis mettre les images dans le dossier). Vous pouvez faire l’un ou l’autre.
Une fois vos images mises dans le dossier du jeu, vous pouvez les utiliser.
3. Indiquer les images à utiliser dans le jeu
Entrez dans le script (script.rpy) de votre jeu. De la même manière dont vous avez défini vos personnages, il va falloir définir vos images.
Par défaut, un exemple est donné dans votre script aux lignes 3 et 4 :
Ce symbole # fait en sorte que la ligne de code ne soit pas prise en compte par le jeu, on s’en sert souvent pour faire des commentaires ou montrer des exemples.
Que signifie cette ligne ? image eileen happy = « eileen_happy.png »
image pour dire que l’on parle d’une image, eileen happy est le nom choisi pour son utilisation dans le jeu et eileen_happy.png est son nom de fichier.
Admettons que vous avez fait une image de personnage qui a pour nom sophie_contente.png (attention ne mettez ni d’accent, ni d’espace, ni de signe de ponctuation dans vos noms d’images; vérifiez aussi qu’elles sont bien en png ou jpg), vous pourriez écrire la ligne de code suivante:
image sophie contente = « sophie_contente.png »
Vous n’êtes pas obligée que ce soit le même nom d’un côté du signe égal que de l’autre, mais il faut que le nom de l’image donné à gauche soit le plus simple et précis possible pour ensuite vous y retrouver. Si par exemple, vous avez une image qui s’appelle classroom_68867999.png, vous pourriez écrire :
image salle classe = « classroom_68867999.png »
Définissez toutes vos images de la même manière (que ce soit des images de fond ou de personnages n’a pas ici d’importance).
Par exemple, images utilisées dans le jeu The Question :
Si vous avez mis vos images dans un dossier, il faut indiquer au programme d’aller chercher l’image dans le dossier voulu. Par exemple, si le nom de ce dossier est images et que vous avez mis l’image « sylvie_normale.png » dans ce dossier, la ligne de code sera :
image sylvie normale = « images/sylvie_normale.png »
De manière logique si vous avez fait des sous-dossiers (par exemple mis l’image dans un dossier personnages dans le dossier images), cela donnerait :
image sylvie normale = « images/personnages/sylvie_normale.png »
et ainsi de suite…
4. Utiliser vos images dans le jeu
Dans la programmation vous ne ferez pas appel, de la même manière, à des images de fond et des images de personnages.
Pour faire apparaître une image de fond la commande est scene et pour un personnage, c’est show.
Admettons que vous ayez deux images de fond : salle classe et cour recreation (que vous avez défini come indiqué dans la section précédente). Pour faire appel à la première image de fond, écrivez scene classe puis continuez votre histoire. Ensuite quand vous voulez changer votre image de fond pour l’autre, il suffit d’appeler la nouvelle image de fond donc scene recreation qui remplacera automatiquement la première.
Comme d’habitude, faîtes attention que tout soit bien aligné (si vos couleurs de mots ne sont pas les mêmes que dans l’exemple, c’est qu’il y a une erreur).
Admettons que vous avez deux images de personnages : sophie contente et mathieu content.
Pour faire appel à la première image, ce sera : show sophie contente
La différence ici avec une image de fond, c’est que vous devez enlever ensuite cette image pour en mettre une nouvelle, sinon elles vont se superposer comme ceci :
Pour éviter cela, il faut cacher le premier personnage avec la commande hide avant de mettre la deuxième. Par exemple :
5. Mettre les personnages à droite ou à gauche
Pour mettre un personnage à droite il suffit de mettre at right après le show de l’image, pour la mettre à gauche c’est at left. Par exemple :
Ce qui donnera :
Voilà, vous savez maintenant mettre des images dans votre jeu !
Pour savoir comment mettre des images dans vos choix, voir l’article : Cours 2 – Proposer des choix au joueur.
Ren'Py 
