Faire Bouton avec pygame

**amelyfred** · 26/06/2015, 18h40

Bonjour à tous,
Alors je débute avec python et pygame et je veux essayer de faire un jeu du pendu (déjà réalisé en mode console) mais avec une interface en utilisant pygame.

Et j'essaye de réaliser un bouton pour chaque lettre sur lequel il faudra cliquer pour proposer une lettre mais je ne sais pas trop comment m' y prendre.
J'ai déjà créé cette fonction qui me permet de dessiner un rectangle avec une lettre à l'intérieur.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
self.rect = pygame.draw.rect(self.fond, (couleurViolet), (100,550,50,50))
self.rend = self.police.render("A",True,(255,255,255))
self.rect = self.rend.get_rect()
self.fond.blit(self.rend,(110,545))
pygame.display.update()

Mais je voudrais remplacer le rectangle par un png.

alors j'ai fait un truc comme ca :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
self.rect = pygame.draw.rect(self.fond, (couleurViolet), (100,550,50,50))
self.rend = self.police.render("A",True,(255,255,255))
self.imageboutton = pygame.image.load("images/boutonLettre.png")
self.rect = self.rend.get_rect()
self.fond.blit(self.imageboutton,(100,550))
self.fond.blit(self.rend,(110,545))
pygame.display.update()

Bon visiblement, j'ai bien l'image de mon bouton qui apparait avec la lettre par dessus.
Mais est ce que ca vous semble correcte ou il y a plus simple?
Comment faire ensuite pour le rendre cliquable?

Merci d'avance pour vos conseils
Fred

**josmiley** · 27/06/2015, 10h31

un truc dans ce genre peut-être:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
fond = pygame.display.set_mode(etc...)
 
class Boutton(object):
 
    police  = pygame.font...etc
    boutton = pygame.image.load("images/boutonLettre.png")
    rect    = boutton.get_rect()
 
    def __init__(self,lettre,position):
 
        self.image  = Boutton.boutton.copy()
        self.rect   = Boutton.rect.copy()
        lettre      = Boutton.police.render(lettre,True,(255,255,255))
        rect_lettre = lettre.get_rect(center=Boutton.rect.center)
        self.image.blit(lettre,rect_lettre)
        self.rect.topleft = position
 
 
A = Boutton('A',(100,550))
fond.blit(A.image,A.rect)
display.flip()

**amelyfred** · 27/06/2015, 12h15

Salut
Ok merci ca fonctionne
Juste pour que je comprenne bien ce que je fais : a quoi sert (object) à la ligne 3

Et donc si je veux déclencher une action lors d'un clique sur un bouton, je dois faire une fonction dans ma classe avec collidepoint?
Merci pour vos conseils

Fred

**josmiley** · 28/06/2015, 09h34

"object" c'est une vieille habitude.

ensuite ça dépend de beaucoup de chose.
- combien y a t-il de bouton dans le programme ?
- font-ils parti d'un clavier où sont-ils isolés ?
- exécutent-ils tous la même action ou chacun a une fonction différente ?
- si c'est un clavier, combien de clavier faut-il ?
- y a t-il une contrainte d'économie de mémoire ?
- ces boutons doivent-ils être réutilisables dans d'autres programmes ?
- etc ...

**amelyfred** · 28/06/2015, 20h19

Les boutons seront juste un bouton par lettre pour que le joueur propose une lettre dans le jeu du pendu.
Une fois clique le bouton disparaîtra pour le partie en cours par exemple
Ils exécuteront la même action c est a dire proposer une lettre ou entrer le nom du joueur

Ensuite il y aura peut être un autre bouton pour lancer une nouvelle partie ou quitter le jeu

**josmiley** · 28/06/2015, 22h37

vaut mieux faire une class Clavier(contenant les boutons sous forme de liste de rects) plutôt qu'une class Boutons.

**amelyfred** · 28/06/2015, 22h41

Ok merci je vais essayer de faire ça

**amelyfred** · 01/07/2015, 22h56

Salut
Pour l'instant j'ai fait cela :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
 
class Clavier(object):
    #Classe clavier qui permet de crééer les boutons du clavier
 
    police = pygame.font.Font("images/BradBunR.ttf",45)
    boutton = pygame.image.load("images/boutonLettre.png")
    boutton2 = pygame.image.load("images/boutonLettre2.png")
    rect = boutton.get_rect()
    rect2 = boutton2.get_rect()
 
    def __init__(self,lettre,position,fenetre):
        self.image  = Clavier.boutton.copy()
        self.image2 = Clavier.boutton2.copy()
        self.rect   = Clavier.rect.copy()
        self.fond = fenetre
        self.lettre = lettre
        self.position = position
 
 
    def creation(self):
        lettre = Clavier.police.render(self.lettre,True,(255,255,255))
        rect_lettre = lettre.get_rect(center=Clavier.rect.center)
        self.image.blit(lettre,rect_lettre)
        self.rect.topleft = self.position
        self.fond.blit(self.image,self.rect)
 
    def clic(self):
        lettre = Clavier.police.render(self.lettre,True,(255,255,255))
        rect_lettre = lettre.get_rect(center=Clavier.rect2.center)
        self.image2.blit(lettre,rect_lettre)
        self.rect.topleft = self.position
        self.fond.blit(self.image2,self.rect)
 
 
#Classe Clavier

et

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
 
#------------------------Création de la fenetre de jeu----------------------------------------
fenetre = pygame.display.set_mode((1150, 700))
fond = pygame.image.load("images/backgroundJeu.jpg").convert()
pygame.display.set_caption("Jeu du pendu")
fenetre.blit(fond,(0,0))
 
#----------------------------Création du Clavier ----------------------------------------------
z1= z2= 100
clavier=[0]*26
for i in range(26):
    if i < 13 :
        clavier[i] = Clavier(chr(65+i),(z1,540),fenetre)
        clavier[i].creation()
        z1 +=75
    else:
        clavier[i] = Clavier(chr(65+i),(z2,615),fenetre)
        clavier[i].creation()
        z2 +=75
#-------------------------------------------------------------------------------------------------
#Création d'une boucle infinie
continuer = 1
pygame.display.flip()
while continuer:
    mouse = pygame.mouse.get_pos()
    for event in pygame.event.get(): #On parcours la liste de tous les événements reçus
        if event.type == QUIT:     #Si un de ces événements est de type QUIT
            continuer = 0
        elif event.type == pygame.MOUSEBUTTONDOWN:
            for i in range(26):
                if clavier[i].rect.collidepoint(mouse):
                    clavier[i].clic()
                    pygame.display.flip()

Bon ca fonctionne, mon clavier apparait bien comme je veux et quand je clique sur un bouton, le rectangle change d'image (ca c'est pour dire que mon bouton est verrouillé)

Est ce que cela vous semble correcte ou largement améliorable?

J'ai encore un peu de mal a comprendre la signification de chaque ligne donc je pense que ca peut s'améliorer.
Comment faire si je veux ensuite réinitialiser tout les clavier avec images/boutonLettre.png?

Merci pour tous vos conseils
Fred

**josmiley** · 01/07/2015, 23h09

tu peux poster un screen de ton clavier stp ?
si tu pouvais aussi poster les images utilisées ça serait encore mieux.

**amelyfred** · 02/07/2015, 19h31

Salut
Voici l'écran avec les bouton qui deviennent gris quand on clique :
Nom : ecran.png
Affichages : 10099
Taille : 661,0 Ko

Voici les images du fond et des boutons

Je voudrais donc pouvoir réinitialiser tous les boutons (au début d'une partie) et que les boutons deviennent gris après avoir cliqué dessus. Et qu'une fois qu'ils sont grisés ils soient verrouillé

Merci pour tous vos conseils qui me permettront d'avancer dans mon apprentissage de python.

**josmiley** · 02/07/2015, 23h37

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
from pygame import *
font.init()
 
scr  = display.set_mode((1150,700))
fond = image.load('backgroundJeu.jpg')
scr.blit(fond,(0,0))
display.flip()
 
class Clavier(list,object):
 
    font   = font.Font(font.get_default_font(),30)
    screen = display.get_surface()
 
    def __init__(self,x,y):
 
        class Bouton(object):
 
            img_unset = image.load('boutonLettre.png')
            img_set   = image.load('boutonLettre2.png')
            rectangle = img_unset.get_rect()
 
            def __init__(self,x,y,lettre):
                self.rect   = Bouton.rectangle.copy()
                self.lettre = lettre
                self.set    = 0
                self.lettre_img   = Clavier.font.render(self.lettre,1,(255,255,255))
                self.lettre_rect  = self.lettre_img.get_rect(center=self.rect.center)
                self.rect.topleft = x,y
 
            @property
            def image(self):
                bouton = (Bouton.img_set if self.set else Bouton.img_unset).copy()
                bouton.blit(self.lettre_img,self.lettre_rect)
                return bouton
 
        self.x = x
        self.y = y
        for e,lettre in enumerate('ABCDEFGHIJKLMNOPQRSTUVWXYZ'):
            px = e%13  * 75 + self.x
            py = e//13 * 75 + self.y
            self.append(Bouton(px,py,lettre))
        self.draw()
 
    def draw(self,index=None):
        if index != None:
            bouton = self[index]
            r = self.screen.blit(bouton.image,bouton.rect)
            display.update(r)
        else:
            r = []
            for b in self:
                r.append(self.screen.blit(b.image,b.rect))
            display.update(r)
 
    def lire_lettre(self,mouse_x,mouse_y):
        #~ retourne la lettre correspondante au clic de souris
        x = (mouse_x - self.x)//75
        y = (mouse_y - self.y)//75
        index = y * 13 + x
        if 0 <=index < 26 and not self[index].set and self[index].rect.collidepoint((mouse_x,mouse_y)):
            self[index].set = 1
            self.draw(index)
            return self[index].lettre
 
    def clear(self):
        #~ reinitialise le clavier
        for b in self:
            b.set = 0
        self.draw()
 
c = Clavier(100,540)
 
while 1:
    ev = event.wait()
    if ev.type == MOUSEBUTTONUP and ev.button == 1:
        lettre = c.lire_lettre(*ev.pos)
        if lettre: print(lettre)
    if ev.type == KEYDOWN and ev.key == K_ESCAPE:
        c.clear()
    if ev.type == QUIT: break

il y a moyen de beaucoup simplifier cependant en utilisant 2 grandes images.

**amelyfred** · 03/07/2015, 07h33

Salut
Ok merci je vais essayer de comprendre tout ceci.
Qu'en t'entends par 2 grandes images?

**josmiley** · 03/07/2015, 09h00

Puisque ce clavier ne sert que pour ce programme on peut le coder en dur en utilisant 2 images du clavier prédessiné, une avec les touches bleues et une avec les touches grises. Certes c'est plus gourmand en mémoire mais c'est aussi plus lisible.

voilà un exemple: https://www.dropbox.com/s/mkhkk04nuo...pendu.zip?dl=0

**amelyfred** · 03/07/2015, 11h01

OK et si je veux griser qu'une touche, je ne blitte qu'une partie du clavier avec les touches grisées, c'est ca?

Bon je vais essayer de faire quelque chose et je reviens si j'ai des soucis (ce qui est fort probable vu que je débute)

**amelyfred** · 03/07/2015, 17h15

Je viens de regarder ta piece jointe et c'est nickel.
Merci

**amelyfred** · 04/07/2015, 09h06

Salut josmiley,
Juste 3 petites questions (je débute donc excuse moi si ca te parait évidement mais je veux bien comprendre ce que je fais)

- La classe Bouton est bien un héritage de la classe clavier. Est il préférable de l'écrire comme tu l'as fait c'est à dire dans la classe clavier ou plutôt (comme je l'avais lu dans des tutos) la mettre après la classe clavier avec class Bouton(Clavier)

-Dans ton exemple tu écris

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
from pygame import Rect, image, display, mouse
...
clavierA = image.load('clavierA.png')

Tu initialises pas pygame, si on initialise pygame, il faut écrire :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
import pygame
from pygame.locals import *
pygame.init()
...
clavierA = pygame.image.load('clavierA.png')

Peux tu m'expliquer la différence entre ces 2 codes?

Autre question: que signifie static method?
Merci d'avance à toi.
Fred

**josmiley** · 04/07/2015, 10h41

salut,

la class Bouton n'hérite pas de Clavier mais de pygame.Rect, elle est contenue dans la méthode init de la class Clavier parce qu'il n'y a que là qu'on en a besoin, mais c'est juste ma façon de coder, c'est pas une obligation.

pygame.init() initialise les modules tel que pygame.font, cependant on peut initialiser ces modules indépendamment. De plus pygame.init() ralenti la fermeture de la fenêtre ... mais je suis sous linux. Tu verras qu'il n'y a pas non plus de pygame.quit() car inutile sous linux mais nécessaire sous windows.

Si tu codes avec python3 tu peux les virer, @staticmethod assure la compatibilité avec python2.
Sinon, ça sert à .... tu verras plus tard.

**amelyfred** · 04/07/2015, 15h57

OK merci pour les explications, je vais essayer de tout déchiffrer. Moi je tourne sous Mac.

**josmiley** · 04/07/2015, 22h35

j'ai légèrement modifié le code pour le rendre plus "intuitif" http://joel-murielle.perso.sfr.fr/clavier_pendu.zip

**amelyfred** · 04/07/2015, 23h39

OK par contre, j'ai l'impression que le programme ne se ferme pas a avec ce nouveau code.

J'arrive a remettre mon clavier à blanc mais comment puis je remettre tout les flag à 0

Fred

Faire Bouton avec pygame

Programmation multimédia/Jeux Python

Discussions similaires

Partager

Partager