Ressources – Trouver des images

Il est interdit d’utiliser dans un jeu des images sous copyright (interdiction de reproduction, encore moins de modifications) sans en demander la permission à son auteur, éditeur. Si la licence d’une image n’est pas indiquée, elle est automatiquement sous copyright.

Vous pouvez, par contre, utiliser des images libres de droits ou du domaine public, ou encore, sous certaines conditions en creatives commons, Voici où ou comment en trouver.

(Je vous rappelle que Ren’Py prend les images en png et jpg et que les images de fond sont par défaut en 800×600 px, les personnages doivent être environ de 250 à 400 px de largeur et 250 à 500 px de hauteur suivant leur corpulence.)

Voici quelques endroits où trouver des images qui ne sont pas sous Copyright pour illustrer vos jeux Ren’Py :

Si vous connaissez d’autres endroits pour trouver des images libres de droits ou du domaine public, n’hésitez pas à me le signaler.

Pour trouver des images libres de droits avec Google images :

  • Chercher une image dans Google Images, par exemple « chiens »
  • Puis cliquer sur l’engrenage pour avoir les options (en haut à droite) et sur « Recherche avancée »

engrenage_google

  • En bas, vous avez alors « droit d’usage » et vous pouvez alors choisir de ne voir que des images libres de droits.

Si vous voulez savoir comment modifier des images, voir notre article : Créer et modifier des images

Guide – Mettre une page titre, un générique, des chapitres

Voici un petit guide vous montrant comment mettre une page titre, un générique, des pages séparant les différents chapitres.

1. Mettre une page titre

Vous aimeriez peut-être faire des changement dans  votre page titre ?

page_titre

La première chose à faire est de créer votre page titre comme une image (800×600 px en .jpg ou .png), Par exemple :

debut

Puis mettre votre image dans le dossier game de votre jeu. Une fois fait, dans le lanceur, cliquer sur options.rpy :

options_rpy

Puis mettre le nom de votre image aux lignes 75 et 80. Par exemple, si votre image s’appelle debut.jpg :

debut_code

Si vous mettez cette image dans un dossier Images, il suffit de l’ajouter (par exemple images/debut.jpg).

Pour mettre de la musique dans la page titre, toujours dans options.rpy, mettre le nom de votre musique à la ligne 178.

Par exemple, pour une musique se nommant musique_introduction (préalablement mis dans le dossier game du jeu), remplacer  # config.main_menu_music = « main_menu_theme.ogg » par :

musique_menu

Ne pas oublier que si vous avez mis votre musique dans un dossier sons, dans game, cela aurait été « sons/musique_introduction.wav » (voir cours sur les sons).

Votre musique se répètera à l’infini. Pour qu’elle se termine quand vous commencez le jeu, aller dans le script de votre jeu et après label start, taper : stop music fadeout 2

music_start

2. Faire des chapitres

Si votre histoire interactive, votre jeu, comporte plusieurs chapitres, vous pouvez les séparer par un écran noir où vous pouvez écrire ce qu’il vous plaît (comme le numéro et le titre du chapitre).

Retourner dans le script de votre jeu Ren’Py.

Pour faire apparaître un écran noir, écrire scene black (de la même manière, vous pourriez mettre n’importe quelle image pour illustrer votre chapitre en mettant scene puis le nom de votre image).

Puis mettre un effet de transition, par exemple, un fondu (dissolve). Ce qui donne :

scene black with dissolve

Puis vous pouvez y ajouter le texte de votre chapitre, par exemple, Chapitre 1. Le commencement. Si vous voulez passer à la ligne suivante entre Chapitre 1. et Le commencement, mettre \n. Ajouter ensuite une petite pause (1.5 seconde) pour que le joueur ait le temps de lire ce texte. Ce qui donnera : show text « Chapitre 1\n Le commencement » with Pause(1.5)

Puis remettre un écran noir avec fondu.

Exemple de code :

chapitre_code

Ce qui donnera :

chapitre_1

3. Faire un générique

Vous pouvez appliquer ce que vous venez d’apprendre dans les deux sections précédentes et choisir de mettre une image ou un fond noir pour votre générique de fin (toujours dans le script de votre jeu).

Par exemple, ici nous choisissons de mettre une image de fond (generique) et ensuite d’y ajouter un texte (pour les illustrations, pour la licence) (Fade est une autre façon de faire une sorte de fondu).

code_generique

Ce qui donnera :

generique_exemple

Pour mettre de la musique dans le générique de fin (voir cours sur les sons), mettre votre musique dans le dossier game du jeu, puis aller dans le script de votre jeu, puis dans le code scene du générique, ajoutez tout simplement la musique comme vous le feriez ailleurs. Par exemple :

musique_fin

Si nous avions mis musique_fin dans un dossier sons, dans game, cela aurait été :

play music « sons/musique_fin.wav »

 

Vous pouvez changer la couleur du texte (en blanc par défaut), augmenter la taille du texte et mettre en gras. Par exemple :

show text « {size=+25}{b}{color=000}Ren’Py réalisé par :{/color} » with Pause(4.0)

Cours 3 : Mettre des images dans Ren’Py

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 :

Image où les pixels sont importantes (Source : Wikimedia commons, de Nickpick910)

Image où les pixels sont importantes (Source : Wikimedia commons, de Nickpick910)

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

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
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 :

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 du jeu.

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 :

ligne4

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 :

images_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.

scene

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 :

superposition

Pour éviter cela, il faut cacher le premier personnage avec la commande hide avant de mettre la deuxième.  Par exemple :

hide

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 :

code_deux_personnages

Ce qui donnera :

deux_personnages

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.

Images – Images de personnages pour vos essais ou vos histoires (2)

Voici des personnages de JNavigue de la Cour d’école (jnavigue.org) que vous pouvez utiliser dans vos jeux Ren’Py. Dessins de Laurent Cloiseau.

Si vous utilisez ces images telles quelles ou de manière modifiée, merci d’indiquer « Images de JNavigue (jnavigue.org) dans votre générique de jeu ».

Anna (images prêtes pour Ren’Py)

Capitaine Atlas (à redimensionner)

Flo (à redimensionner)

Hardi (à redimensionner)

Images – Images de personnages pour vos essais ou vos histoires

Catherine Digras-Dunberry nous offre ses dessins de personnages que vous pouvez utiliser dans Ren’Py que ce soit pour faire des essais ou pour illuster vos histoires. Ces personnages sont déjà à la bonne taille et directement utilisables dans le logiciel. Il s’agit d’une fille (Sophie) et d’un garçon (Mathieu), tous deux arborant différentes expressions.

Vous retrouverez une vidéo avec le jeu d’origine qui utilisait ces images dans l’article de présentation du blogue.

Pour enregistrer une image à la bonne taille cliquez dessus (pour l’ouvrir) puis sur Enregistrer l’image sous…  Vous pouvez aussi l’enregistrer directement à partir de cette page en utilisant Enregistrer le lien sous… 

Sophie

Sophie et sa fleur

Fleur seule

Mathieu

Guide – Créer et modifier des images

Avant de voir comment mettre des images dans Ren’Py, il peut être intéressant de savoir comment créer et modifier des images.

Vous pouvez aussi utiliser des images de personnages mises sur ce blogue :  Images – Images de personnages pour vos essais ou vos histoiresImages – Images de personnages pour vos essais ou vos histoires (2) ou en trouver sur internet.

Pour créer des images vous pouvez soit 1. scanner des dessins ou faire des photos, 2. dessiner sur votre ordinateur (par exemple avec Gimp). Vous pouvez aussi modifier des images que vous trouvez ou corriger les vôtres avec Gimp.

Ces guides peuvent être imprimés et utilisés légalement. ils ont été écrits par deux de mes étudiantes en 2012.

1. Scanner des dessins ou utiliser des photos numériques
  • Scanner des dessins : tutoriel_scanneur (de Catherine Bigras-Dunberry)
  • Prendre des dessins en photos et/ou importer des photos d’un appareil photo numérique à l’ordinateur : tutoriel_appareil_photo (de Catherine Bigras-Dunberry)
2. Créer des images sur votre ordinateur

Pour cela, nous utilisons Gimp qui est un logiciel libre et gratuit que l’on peut télécharger légalement sur le site de clubic.

3. Modifier des images avec Gimp
  • Modifier des images avec Gimp (guide pour les enfants) : Guide- Enfants (de Martine Bélanger)
  • Modifier des images avec Gimp (guide pour les adultes) : Guide- Adultes (de Martine Bélanger)