[Tuto Ren'Py] Les images lvl 1 (*)

Bonjour,

Commentaire
Ouah, ça fait un petit moment que j'ai rien foutu, période d'examens impose. J'ai pas de nouvelle de la personne qui devait prendre la relève donc je vais rusher les (*).

Allons au vif du sujet, un VN sans image c'est assez useless... C'est juste un roman classique. Alors dans ce tuto, on va voir les images ! Tout d'abord, par défaut, Ren'Py possède 3 layers ou "calque" comme vous les appelez ici je crois. Celui tout au fond sert pour le fond (Thank you Captain Obvious !), celui juste au dessus sert pour afficher des personnages et le dernier affiche les menus au dessus de tout. Chacun de ces layers peut être décomposé en sous-layers (Pour foutre un personnage derrière un autre.).

Connaissances requises :
- Utiliser des variables

A quoi ça sert ?
Question bête.

A quoi ça ressemble ?
On met un fond, un décor quoi !
On peut bien sur "parler" par dessus le fond et les menus restent. Ensuite, on va ajouter un personnage.

Spoiler:

Dans cet exemple, j'ai délibérément fait apparaitre mon personnage dehors, pour montrer qu'on n'est pas forcé de le foutre au milieu.

Spoiler:

Sur le screenshot, ça se voit pas, mais quand j'ai cliqué, le personnage a "glissé" jusqu'au milieu.

Spoiler:

Ici, le personnage a parlé et à changé de visage avant même de finir sa phrase.

Spoiler:

Encore un changement de visage.

Spoiler:

Un screenshot foireux où un de mes contacts MSN se connecte...

Spoiler:

Le personnage a quitté la scène.

Spoiler:

Mais comment tu fais ça ?
Déjà, on va déclarer les images sous 2 catégories : "personnages" et "fond" ou bg pour background en anglais. (Désolé, écrire mes programmes avec de l'anglais c'est devenu un réflexe ^^")

Code:

# Personnages
image elusia normal = "CG/elusia normal.png"
image elusia happy = "CG/elusia happy.png"
image elusia angry = "CG/elusia angry.png"
image elusia sad = "CG/elusia sad.png"

# background
image parc = "back/parc.jpg"


Attention, vous pouvez mettre vos images directement dans le dossier "game" et faire

Code:

image elusia sad = "elusia sad.png"

Moi je rajoute "CG/" car mes images d'Elusia sont contenues dans le dossier "CG" lui même dans "game". Vous pouvez tout mettre dans game mais j'ai un peu 150 images/musiques/sons donc j'ai fait un peu de ménage. (Mes images de fonds sont dans un dossier nommé "back") De préférence, déclarez les images avec 2 mots : le nom et l'émotion. C'est plus facile de s'y retrouver et mettez un espace entre les deux, vous verrez pourquoi.

On va donc appeler le fond avec :

Code:

scene parc with dissolve

"scene" est un mot clef qui indique que l'image qui sera appelée sera un fond. De préférence, prenez des fonds qui font la taille de votre jeu. En général 800*600, moi j'ai péché le parc sur google image en lui spécifiant que je voulais du 800*600. Attention : Lorsque vous appelez "scene", TOUS les personnages présents partent et il faut les rappeler chacun. Le "with dissolve" est optionnel. Il sert juste a faire apparaitre l'image en fondu et pas en mode " *PAF* je suis là ! ". Il y a aussi "with fade" qui met un écran noir entre les deux images en dissolve. Ces deux fonctions marchent aussi avec les personnages.

On fait ensuite apparaître Elusia tout à gauche.

Code:

show elusia normal at bord_gauche

Ne copiez pas mon code, ça marchera pas. Parce que "bord_gauche" n'existe pas, c'est une fonction que j'ai créé moi même. "Alors on fait comment ?". Par défaut, Ren'Py connait déjà "left" (gauche), "right" (droit) et "center" (centre). Vous pouvez donc faire :

Code:

show elusia normal at left

Si vous ne précisez rien :

Code:

show elusia normal

Le personnage apparaîtra au centre. Bon ! Mon personnage est à gauche et je veux le centrer. Je pourrais faire :

Code:

show elusia normal at center

Mais je ne le ferais pas. Cette commande aura pour résultat de "téléporter Elusia au centre". Il faut ajouter "with move" pour la faire "glisser".

Pour la couper dans sa parole, on utilise extend. Ainsi :

Code:

show elusia normal at center with move
    e "Il fait beau..."
    show elusia happy
    extend "Une journée parfaite pour aller au parc !"

Il y a quelque chose de magique là non ?
On pourrait croire qu'il faut "enlever" "elusia normal" pour mettre "elusia happy" et bah non ! Ren'Py regarde les noms : Elusia normal et Elusia happy. Il constate que les images concernent la même personne. Donc il va remplacer l'une par l'autre comme un grand ! D'où l'utilité de nommer ainsi ses images. (Oui oui on peut faire des jumeaux mais avec une commande spéciale qu'on verra avec les "modifications des images" dans les tutos lvl (***).) En plus, en constatant que c'est la même personne, il ne demandera pas la position. Pour un personnage à gauche, tant que vous ne direz rien, le personnage restera à gauche par défaut.

Voilà le code total. Vous ne pourrez l'utiliser qu'en changeant les images du parc et d'Elusia. Il faut bien sur du png pour gérer la transparence d'Elusia. Vous n'aurez pas les boutons en haut ni les même boîtes de dialogue décorées bien sûr à moins d'utiliser la fenêtre de mon VN personnel :3

Code:

# Déclarations des personnages
define e = Character('Elusia', color="#FF69B4")
define r = Character('Ryouzanki', color="#4169E1")

# Image personnage Elusia
image elusia normal = "CG/elusia normal.png"
image elusia happy = "CG/elusia happy.png"
image elusia angry = "CG/elusia angry.png"
image elusia sad = "CG/elusia sad.png"

# background
image parc = "back/parc.jpg"

label start:
    scene parc with dissolve
    r "Voilà un fond de parc."
    show elusia normal at Position(xpos=0.0)
    r "Elusia va arriver, cachons-nous."
    show elusia normal at center with move
    e "Il fait beau..."
    show elusia happy
    extend "Une journée parfaite pour aller au parc !"
    show elusia angry
    e "Une minute... Je parle toute seule moi ?"
    show elusia sad
    e "Je suis barge..."
    hide elusia
    r "Elle est partie."

Voir aussi :
- Modification d'image (***)

Question ! Question ! La photo du fond c'est à Morges, le jardin des tulipes ? *^*

WOAH... Je ne pensais pas que l'on pouvait reconnaître un parc sur une photo ! Toutes mes félicitations, tu as parfaitement raison, il s'agit bien du parc de l'indépendance à Morges !

Tes tutos sont géniaux, j'attendais plus que celui là pour commencer à les tester. (a)

Ryouzanki a écrit:WOAH... Je ne pensais pas que l'on pouvait reconnaître un parc sur une photo ! Toutes mes félicitations, tu as parfaitement raison, il s'agit bien du parc de l'indépendance à Morges !

Héhé ! J'y ai été genre ... 3-4 fois ! Mais j'ai beaucoup aimé

Salut, j'ai une question ^^
Si on a plusieurs personnages sur l'écran et qu'on veut qu'il change d'expression ou qu'ils apparaissent à l'écran en même temps, comment on fait ? Parce que si on fait

Code:

"fille" "blablabla"
show girl happy
show boy happy

Ils changent d'expression chacun leur tour (et quand les personnages sont surpris par exemple ça fait bizarre).

Excuse moi mais je ne comprends pas ce que tu veux parce que les changements d'expression sont instantanés...

Code:

"Deux personnages vont apparaître."
show ryou normal at left
show elusia normal at right

Ce code fait correctement apparaître Ryouzanki à gauche sans expression et Elusia a droite sans expression dès que je clique.

Code:

"Les 2 vont se mettre en colère."
show ryou angry
show elusia angry at right

Celui ci leur donne l'expression "angry" ou en colère à l'instant où je clique. J'ai vérifié en faisant des tests sur plusieurs ordinateurs, c'est quasi-instantané alors je ne vois pas ce que tu cherches ^^'

Ah merci, alors j'ai du faire une erreur, je vais recommencer merci ^^
edit : ah oui, ça marche XD