Discussion :

[Timcampy]

Je vais vous présenter un peu la situation:

Deux amis et moi-même avons choisi la spécialité ISN (informatique et sciences du numériques) pour le bac. A la fin de l'année, nous devons présenter un jeu à l'oral que nous avons créé, durant l'année. Je m'occupe principalement de l'aspect graphique du jeu (affichage d'images, animations...) mais bien sûr j'aide pour la partie programmation! Etant débutants, nous aimerions avoir vos avis et votre aide concernant le code que nous développons afin d'avoir un rendu final le plus beau et efficace possible. (pourquoi pas le mettre à disposition sur le net ensuite? )

Les ressources utilisées:

-Pyscripter (+ simple pour la gestion de Python en tant que débutants)
-TKinter
-Adobe CS6
-Gimp


Description des éléments que nous cherchons à développer:

1) Une base entourée de murailles est attaquée par des vagues d'ennemis à intervalles réguliers.

2) Pour chaque ennemi éliminé, un montant d'argent/points est obtenu.

3) En échange d'argent, les murailles peuvent être réparées ou améliorées (système de banque)

4) Entre chaque vague, le joueur a un temps limité pour se préparer à la vague suivante, il se raccourci suivant le nombre de vagues.

5) animation d'un personnage controlé à l'aide des touches fléchées à l'intérieur de la base, animation des zombies.

6) Jauges de vie, murailles, affichage des points, de l'argent, temps avant prochaine vague, nombre de vagues etc.


Le Projet:


1) Le Menu:

Capture d'écran du menu

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
from tkinter import*
 
 
fenetre=Tk()
fenetre.title("Anemia")
 
#Supprime la barre de fenêtre + plein écran
fenetre.geometry(str(fenetre.winfo_screenwidth())+"x"+str(fenetre.winfo_screenheight())+"+0+0")
fenetre.overrideredirect(TRUE)
 
#Création d'une image de fond
can1=Canvas(fenetre,bg='black',height=1024,width=1280)
can1.grid(row=0,rowspan=100,column=0,columnspan=100)
photo=PhotoImage(file='foret.gif')
item=can1.create_image(648,500,image=photo)
 
#Création de boutons
bouton_jouer=Button(fenetre,text='Jouer',command=fenetre.destroy)
bouton_jouer.grid(row=40,column=50)
bouton_regle=Button(fenetre,text='Regles',command=fenetre.destroy)
bouton_regle.grid(row=50,column=50)
bouton_quitter=Button(fenetre,text='Quitter',command=fenetre.destroy)
bouton_quitter.grid(row=60,column=50)
 
fenetre.mainloop()
fenetre.destroy

Questions:
-Comment créer une fenêtre s'ajustant à n'importe quelle taille de l'écran?
-Comment créer une image s'ajustant à cette fenêtre dans ce canevas?
-Possibilité de créer des boutons personnalisés? Images cliquables?





2) Les Graphismes (contenu basé sur RPG Maker):



Animations Zombie 1 (.gif)

Bases par niveau (.gif):




Fond (herbe.gif):

Questions: -Comment intégrer d'abord l'herbe, puis la base par-dessus (j'ai entendu parler de "frames"), cela fonctionne-il comme des calques?
-Comment positionner cette base?

3) Le Code réalisé:


Déplacement d'un pion, réalisé à partir d'un exercice réalisé en cours:

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
from tkinter import *
 
def Clavier(event):
    global PosX,PosY
    touche = event.keysym
    print(touche)
    # deplacement vers le haut
    if touche == 'Up':
        PosY -= 10
    # deplacement vers le bas
    if touche == 'Down':
        PosY += 10
    # deplacement vers la droite
    if touche == 'Right':
        PosX += 10
    # deplacement vers la gauche
    if touche == 'Left':
        PosX -= 10
    # on dessine le pion a* sa nouvelle position
    Canevas.coords(Pion,PosX -10, PosY -10, PosX +10, PosY +10)
 
# Creation de la fenetre principale
Mafenetre = Tk()
Mafenetre.title('Pion')
 
# position de depart du pion
PosX = 230
PosY = 150
 
# Creation du canevas
Largeur = 480
Hauteur = 320
Canevas = Canvas(Mafenetre, width = Largeur, height =Hauteur, bg ='white')
Pion = Canevas.create_oval(PosX-10,PosY-10,PosX+10,PosY+10,width=2,outline='black',fill='red')
Canevas.focus_set()
Canevas.bind('<Key>',Clavier)
Canevas.pack(padx =5, pady =5)
 
# Bouton Quitter
Button(Mafenetre, text ='Quitter', command = Mafenetre.destroy).pack(side=LEFT,padx=5,pady=5)
 
Mafenetre.mainloop()

Question: Comment remplacer cet objet par une animation? (qui s'arrete lorsque la touche est relachée?)



Toute aide nous ayant été apportée sera bien sûr signifiée dans les crédits du jeu


Merci d'avoir lu ce sujet et merci de vos éventuelles réponses!

Timcampy

[wiztricks]

Salut,

Il y a bien trop de questions! Vous avez déjà les réponses pour nombre d'entre-elles dans la FAQ tkinter ou dans le tuto du Swinnen (je vous ai déjà donne les URL). Après, il faut être plus spécifique: pas grand monde n’écrira le code de votre projet a votre place et comme vous débutez, il faudra montrer le code que vous avez déjà fait. C'est important si vous voulez qu'on puisse se mettre a votre niveau (et que vous puissiez comprendre les solutions).

Comme vous débutez, vous ne savez pas encore que l'informatique est un gigantesque bricolage: pour arriver a afficher des "trucs" et les faire bouger de façon sympa, c'est beaucoup de boulot pour comprendre ce qu'on peut faire et pas mal de "compromis" a trouver entre vos rêves et un "assez bien", "passable",...

Juste pour le fun, et illustrer ce qui précède, je me suis amuse a créer une "animation" a partir de ce fichier GIF .
Déjà pour commencer, un GIF anime n'est pas directement utilisable par un GUI comme TK: il va falloir recuperer les images puis les afficher alternativement pour qu'on ai un rendu qui bouge.
Le programme commence par importer tkinter et les classes Image et ImageTk de la bibliothèque Pillow (un fork de PIL):

Code :

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

1
2
import tkinter as tk
from PIL import Image, ImageTk

Puis une fonction récupère les images depuis le fichier:

Code :

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

1
2
3
4
5
6
7
8
9
10
def get_images(path):
    images = []
    im = Image.open(path)
    while 1:
        try:
            images.append(im.copy().convert('RGBA'))
            im.seek(len(images))
        except EOFError:
            break
    return im.info['duration'], images

Cela fait, on regarde un peu les images que ça remonte via une fonction display_images qui affiche la liste des images en utilisant tk.Label:

Code :

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

1
2
3
4
5
def display_images(app, images, duration):
    w = tk.Frame(app)
    for im in images:
        tk.Label(w, image=im).pack()
    return w

Et voila pour la première partie: on sait lire les images d'un GIF anime...
Reste a réaliser l'animation!
Avec Tk (et nombre d'autres GUI) une animation, c'est "bouger les choses" dans un intervalle de temps assez petit.

Cote cuisine:

• un Canvas,
• un item (iid) de type "image" associée a la première image
• et un "callback" (animate) qui:
  
  • remplace l'image courante par la suivante (.itemconfigure)
  • déplace l'item (pour que ça bouge "spatialement") (.move)

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
def animate_images(app, images, duration):
 
    def animate():
        nonlocal ix, count
 
        ix = (ix + 1) % len(images)
        w.itemconfigure(iid, im=images[ix])
        w.move(iid, 10, 10)
        count -= 1
        if count: w.after(duration, animate)
 
    count = 20
    ix = 0
    w = tk.Canvas(app, bg='black')
    iid = w.create_image(0,0, image=images[ix], anchor='nw')
    w.after(duration, animate)
    return w

note: Lorsque count passe a 0, l'animation s’arrête. Sinon il faut gérer les bords, c'est pas horrible mais plus de fonctionnalités = plus de lignes de code sans apporter grand chose a la "demo".

Reste a mettre tout ça en musique:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
if __name__ == '__main__':
    path = 'space_invaders.gif'
    duration, images = get_images(path)
 
    app = tk.Tk()
    tk.Button(text='next', command=app.quit).pack(side='top', anchor='w')
 
    images = [ ImageTk.PhotoImage(im) for im in images ]
 
    for start in display_images, animate_images:
        w = start(app, images, duration)
        w.pack()
        app.mainloop()
        if w in app.children.values(): w.destroy()

Sur que se contenter de déplacer un item de type "oval" sera "moins joli"...
mais "moins complique" sans pour autant (devoir) être "très différent".

- W