[Tuto Ren'Py] Personnaliser l'interface graphique avancé (****)

Bonjour,

Commentaire
J'ai aucun retour... Je voudrais bien savoir si ce que je fais sers à quelque chose...

Connaissances requises :
- Personnaliser l'interface graphique (***)
- Utiliser des variables expert (***)

A quoi ca sert ?
Voila mon menu principal.

Spoiler:

Il est beau nan ? Comment ça nan ? Bon OK, je plaisante...

Pour eviter d'avoir le meme VN que les autres, on va aller bricoler le menu principal par defaut de Ren'Py.
C'est pas qu'il est moche mais il est assez moche quoi...

A quoi ca ressemble ?

Donc voilà, je vais vous présenter le prototype de menu principal de mon VN. On m'a dit que j'avais des goûts de ***** donc à priori, il pourrait changer.

Voilà le menu principal :

Spoiler:

C'est juste une image avec des boutons moches cliquables. Pourquoi difficulté (****) dans ce cas ? Parce qu'on va aller plus loin.

Spoiler:

Ca, c'est ce qui se passe quand vous passez la souris au dessus d'un bouton. Dans cet exemple, j'avais passé la souris au dessus de Nouvelle partie. On voit ma souris d'ailleurs...

Spoiler:

Ca, c'est le menu principal après que le joueur gagne au moins une fois la première route en démasquant ce personnage. (Le menu n'a pas été actualisé avec la dernière version d'Elusia qui pleure.)

Spoiler:

Bien sur, on peut aussi débloquer des boutons...

Mais comment tu fais ca ?

Il y a plusieurs méthodes pour faire ça. Je vais exposer la mienne parce que je trouve que c'est la plus simple pour des artistes comme vous.

Il vous faut minimum 3 images soeurs :
- ground : qui est l'image de base sans bouton
- idle : qui est ground mais avec les boutons au repos
- hover : qui est idle mais comme si on avait la souris sur tous les boutons à la fois.

Maintenant, il faut créer une "imagemap", une image avec des endroits spéciaux. Ici, les endroits spéciaux seront les boutons. Il faut donner la localisation des endroits spéciaux nommés "hotspot" et donner ce que ça fait si on clique dessus. Pour les hotspots, il faut donner 4 chiffres qui sont les coordonnées x1, y1, x2 et y2. x1 et y1 sont les coordonnées du point en haut à gauche de votre image et x2 et y2 sont les coordonnées du coin en bas à droite. (0,0) étant situé en haut à gauche de l'écran. Pour obtenir les coordonnées, j'ai utilisé inkscape. Je crois que Ren'Py sait le faire mais je ne sais pas activer cette fonction.

On obtient donc un code d'imagemap suivant :

Code:


screen main_menu:
    tag menu

    imagemap:
        ground "UI/mm_ground.png"
        idle "UI/mm_idle.png"
        hover "UI/mm_hover.png"
        hotspot (35, 480, 170, 600) action Start()
        hotspot (175, 480, 345, 600) action ShowMenu("load")
        hotspot (350, 480, 525, 600) action ShowMenu("preferences")
        hotspot (530, 480, 658, 600) action void()
        hotspot (659, 480, 780, 600) action Quit(confirm=False)


Avec ce code et mes images dans le dossier "UI", j'obtient les captures d'écran 1 et 2. L'avant dernier hotspot invoque "void()", cela signifie qu'en plus de ne rien faire, il n'est pas affiché. Pour l'afficher, il faut le mettre sur l'image de base, chose que je ne fais jamais. Tous les autres boutons sont affichés et peuvent être sélectionnés. Dans "action", il faut bien sur mettre l'utilité de ce bouton.

Ensuite, on va essayer de faire la capture 3. Pour cela, il faut une condition. Dans mon VN, il y a une variable nommée "persistent.route" qui détermine où on en est dans le jeu. Au départ, cette variable est à 0. Puis quand on va finir la première route et que le menu sera changé, la variable passe à 1. On a donc le code suivant :

Code:


screen main_menu:
    tag menu
    if not persistent.route:
        imagemap:
            ground "UI/mm_ground.png"
            idle "UI/mm_idle.png"
            hover "UI/mm_hover.png"
            hotspot (35, 480, 170, 600) action Start()
            hotspot (175, 480, 345, 600) action ShowMenu("load")
            hotspot (350, 480, 525, 600) action ShowMenu("preferences")
            hotspot (530, 480, 658, 600) action void()
            hotspot (659, 480, 780, 600) action Quit(confirm=False)
    elif persistent.route == 1:
        imagemap:
            ground "UI/mm_ground2.png"
            idle "UI/mm_idle.png"
            hover "UI/mm_hover.png"
           
            hotspot (35, 480, 170, 600) action Start()
            hotspot (175, 480, 345, 600) action ShowMenu("load")
            hotspot (350, 480, 525, 600) action ShowMenu("preferences")
            hotspot (530, 480, 658, 600) action void()
            hotspot (659, 480, 780, 600) action Quit(confirm=False)


La différence entre la première image map invoquée si on commence le jeu et la seconde invoquée quand on a fini la première route, c'est que "ground", l'image de fond, l'image de base, appelez ça comme vous voulez n'est pas la même. C'est une image comme ground sauf que y'a un masque brisé. De même, pour débloquer la galerie de CG, vous devez recréer une imagemap (optionnel mais plus facil) avec la fonction qui appelle votre galerie de CG à la place du void. Le bouton apparaitra de lui même.

Juste pour vous montrer ce qu'il vous faut en terme d'image, je mets ci dessous les liens des images que moi j'ai utilisé :
https://github.com/Ryouzanki/Sous_le_masque/blob/master/game/UI/mm_ground.png
https://github.com/Ryouzanki/Sous_le_masque/blob/master/game/UI/mm_idle.png
https://github.com/Ryouzanki/Sous_le_masque/blob/master/game/UI/mm_hover.png
https://github.com/Ryouzanki/Sous_le_masque/blob/master/game/UI/mm_ground2.png

Voir aussi :
- Je veux bien voir vos menus principaux apres ca !

ça sera très utile pour ceux qui se lance dedans

A supposé qu'il y en aie qui aillent assez loin.

Merci beaucoup ^^ Je pense que je vais essayer (je mettrais le rendu, mais faut d'abord que je fasse les images XD)

J'attends avec impatience le rendu alors.

Re-merci pour le tuto, c'était long (pas eu trop le temps) mais j'ai fais un teste (il me reste a faire le menu une fois que le joueur à fini le jeu une fois). Je changerai peut-être le fond, il est pas définitif ^^ (j'ai des goûts bizarre apparemment XD)
Le menu :

Spoiler:

Quand on passe la souris sur un bouton :

Spoiler:

Ah bah voilà !! C'est moi qui te remercie pour le feedback !

Ca fait bel effet d'avoir un menu cool ET fonctionnel hein ?

Ouais, c'est quand même plus sympa ^^
En plus t'explique super bien donc c'est plus facile que ça en a l'air ^^

Je te montre ce que j'ai pu faire avec ce tuto. Je cherche désespérément à personnaliser toute l'interface graphique, donc je galère pas mal avec le langage python que je ne connais pas. Mais j'ai tout de même réussi à changer la phase de lancement du jeu grâce à toi. Alors merci pour avoir partagé tes connaissances

voici le menu "au repos" :

Spoiler:

Et voici le menu avec la souris qui passe par exemple sur le bouton "galerie" (ça donne l'illusion que le bouton s'est enfoncé) :

Spoiler:

Rien est définitif graphiquement, deux trois choses peuvent encore changer, mais globalement, voilà à quoi ça ressemble. Il faut que je m'attaque au changement de personnage lorsque son parcours "a été joué". Je n'ai pas encore bien saisi comment faire, mais je vais bucher dessus.

c'est quoi ce VN ! *o* je suis amoureuse du mec en capuche x'D
Il est bien le tuto de Ryou hein ? =D

Nan mais oui pour mes trucs en Python, j'ai potasser pendant 2 semaines de vacs pour faire ce que je voulais. Le mieux reste de trouver sur le net des bouts de code Python et de les réadapter aux besoins.

A part ça, ton menu est vraiment bien Et l'idée du bouton est un peu plus terre à terre et travaillé que mon étoile XD Ce titre et ces couleurs sombres donnent vraiment envie d'y jouer ! Ce sera quoi comme VN ? Un Otome Game ? (VN pour public féminin où on drague des hommes XD)

Pour le changement de personnage, pour résumer, dès qu'on lance le jeu, Ren'Py va regarder une variable qui déterminera quel menu d'accueil il va afficher. Il faut juste changer cette variable dans le jeu au moment voulu.
Enfin, si t'as besoin de quoi que ce soit d'autre, n'hésite pas à demander. Mon VN est inactif par manque d'inspiration donc je suis disponible rapidement en général.

Effectivement, c'est un otome game. Il est destiné à ma nièce qui aime bien ce genre de jeu mais on en trouve difficilement en français (même si elle est douée en anglais, traduire la gonfle à force ^^)... Donc, j'essaie de lui en créer un. Je me rends compte que c'est une pure folie. J'espère seulement y arriver avant de mourir sous la surcharge de travail.

Courage moi !

Oh, charmante attention Moi à force de jouer en anglais, quand on me demande si tel VN était en français ou en anglais, j'arrive plus à m'en souvenir X]
Ce n'est pas vraiment pure folie, t'as juste commencé par la partie la plus dure. La partie graphique et design est la plus dure. Ensuite t'as juste les dialogue à taper et les embranchements à configurer et c'est (long mais) fini.

Bon courage, je suis sûr que ça plaira à ta nièce

Bonjour

J'ai découvert le forum grâce à ces tutos. J'ai voulu m'entrainer à refaire le menu d'un jeu et manque de pot ça fonctionne pas...

Enfin ça a fonctionné lorsque la dernière valeur du hotspot était à 30 sinon après ça part en vrille voyez plutôt :


En commentant des hotspot


Sans rien commenter


C'est sensé être blanc en normal et rouge pour le hover :/

Une idée du problème ? Car j'y suis depuis un moment dessus et je vois pas ce que j'ai fait de mal...


Merci

Bonsoir,

Désolé pour l'attente... Qu'entends tu par "ça fonctionne pas" ? Parce que c'est vague et dans mon métier, on entend ça tous les jours et un peu pour tout et n'importe quoi ^^'

Pour commencer, tu as incrusté les boutons blancs dans ton image de fond, donc techniquement, il seront toujours affichés.

Ensuite, je pense que tes images de fond sont mal décalées parce que même sur le lien commenté, y'a déjà une *****.

Enfin, pourrais tu poster la partie du code incriminé ainsi que (très important) les images utilisées ?

Ryou.

Désolé de ne pas avoir été assez précis

Le souci a été réglé il y a un petit temps maintenant. Il s'agissait du cache du jeu qui pose quelques soucis avec les hotspot. J'ai donc désactivé l'option du cache dans options.rpy et tout est revenu.

Même si maintenant j'ai préféré utiliser des imagebutton ^^

Par contre j'ai d'autres soucis je vais ouvrir un thread ça sera moins flood même si ça reste graphique. Vu qu'il n'y a pas de zone pour cela je vais le poster ici :p

Donc nouveau souci avec un bouton encore !

J'ai suivi un tuto pour ajouter une CG au jeu. Tout cela fonctionne super bien sauf la modification du textbutton en imagebutton qui refuse de fonctionner. Alors oui c'est vague mais dès que je met imagebutton j'ai une erreur de script au moment d'afficher la CG qui contient plusieurs pages...

Voici le code :

Code:


screen cg_gallery_autres:
    tag menu
    frame background "cg/mode/cg_ground.jpg":
        grid gal_rows gal_cols:
            ypos 83
            xpos 124
            $ i = 0
            $ next_cg_page_autres = cg_page_autres + 1           
            if next_cg_page_autres > int(len(gallery_cg_items_autres)/gal_cells):
                $ next_cg_page_autres = 0
            for gal_item_autres in gallery_cg_items_autres:
                $ i += 1
                if i <= (cg_page_autres+1)*gal_cells and i>cg_page_autres*gal_cells:
                    add g_cg_autres.make_button(gal_item_autres + " butt", gal_item_autres + " butt", im.Scale("cg/mode/unindicate.png", thumbnail_x, thumbnail_y), xalign=0, yalign=0, idle_border=None, background=None, right_padding=0, left_padding=0, bottom_padding=0, top_padding=0, right_margin=10, left_margin=0, bottom_margin=9)
            for j in range(i, (cg_page_autres+1)*gal_cells): #we need this to fully fill the grid
                null
               
        frame:
            yalign 0.97
            vbox:
                if len(gallery_cg_items_autres)>gal_cells:
                    textbutton _("Page Suivante") action [SetVariable('cg_page_autres', next_cg_page_autres), ShowMenu("cg_gallery_autres")]
                    #imagebutton auto "cg/mode/cg_next_%s.png" xpos 382 ypos 536 focus_mask None action [SetVariable('cg_page_autres', next_cg_page_autres), ShowMenu("cg_gallery_autres")]

Pourquoi diable cela ne fonctionne-t-il pas ?

Vraiment sympa tes tutos, Ryouzanki. Sincèrement!
Je sent qu'ils vont bien m'aider à me faire la main pour m'entraîner avant le Nanoreno de Lemmasoft, merci!
Au fait, est-ce qu'il y a une section où on peu poser des questions pour le code ou bien il n'y a que la partie tutos?
S'il n'y a que la partie tutos, alors j'ai hâte de voir tes prochains cours, Ren'py-sensei ~

Je tiens à préciser que j'ai résolu mon souci

Il s'agissait simplement que mes images étaient en jpg et non png... d'où le bug... Comment ai-je pu passer à côté de ça ?

Sorry, j'avais lu ton post Pierrou et puis ça m'est sortit de la tête XD

Pour ce qui est de Ren'py, MelowBee, tu peux sortir de la sous section "tutoriel" pour poster ce que tu veux. Je ne ferais plus de tutos, j'estime avoir couvert suffisamment le sujet pour que vous puissiez faire ce que vous voulez et puis, pour les rares intéressés, je suis toujours dispo à priori, et sinon mon Skype a le même pseudo que je porte ici.