Ce site est optimisé pour être consulté depuis un navigateur moderne dans lequel JavaScript est activé.

Faire une animation sur la création de jeux vidéo libres

doudoulolita

J'ai importé le module avec

import itertools

puis j'ai changé ma fonction update:

    def update(self, time):
        frame = itertools.cycle(self._images)
        self.image = frame.next()

Résultat:

  File "17_class_sprite_miks.py", line 64, in <module>
    persos[i].affiche(persos[i].image, persos[i].rect.topleft)
  File "17_class_sprite_miks.py", line 39, in affiche
    screen.blit(self.image, (x, y)) 
TypeError: argument 1 must be pygame.Surface, not str

doudoulolita

Là, ça ne plante pas mais les persos ne bougent toujours pas les jambes :/

#!/usr/bin/ env python
# -*- coding: utf-8 -*-

# donne la largeur et la hauteur de l'écran
largeur_ecran = 900
hauteur_ecran = 472

# importe la bibliothèque Pygame
import pygame
from pygame.locals import *
from sys import exit
from Vector2 import *
import itertools

class Perso(pygame.sprite.Sprite):    
    """ Un sprite défini par son nom, son image et la position de son image"""
    images = ['static.png', 'walk.png']

    def __init__(self, nom, x, y, fps = 10):
        pygame.sprite.Sprite.__init__(self)
        self.nom = nom
        self.image = pygame.image.load(self.nom+"/"+self.images[0]).convert_alpha()
        self.image2 = pygame.image.load(self.nom+"/"+self.images[1]).convert_alpha()
        self.images =[self.image, self.image2]
        self.rect = self.image.get_rect()
        self.rect.topleft = (x, y)
        self.time= pygame.time.get_ticks()
   
    def affiche(self, image, (x,y)):     
        screen.blit(self.image, (x, y)) 

    def update(self, time):
        self.rect.right += 1
        frame = itertools.cycle(self.images)
        self.image = frame.next()

Ensuite, tout est identique à tout à l'heure.

tshirtman

arf, non il faut définir frame(s) dans __init__ (donc self.frames) sinon là tu réinitialise à chaque fois la séquence.

doudoulolita

Retour sur l'installation de recorditnow au boulot, hyper saccadé même à 25 ou 30 frames /s.

doudoulolita

Avec gtk-recordmydesktop, cela marche sur plusieurs postes, très fluide, et surtout, grand avantage, sur celui qui est relié au vidéoprojecteur. A la limite, celui-là peut nous suffire pour notre animation.
Par contre, on ne peut transférer directement le fichier vidéo .ogv sur youtube (vidéo du plus beau vert) ni l'importer dans Kdenlive (pixels de couleurs étranges, rien de reconnaissable) 🙁
Je vais voir si on peut choisir un autre format dans recordmydesktop ou trouver facilement un convertisseur.
L'idée à l'heure actuelle est de faire jouer 2 enfants sur le poste du vidéoprojecteur, ils font la capture d'écran et les commentaires des autres enfants qui regardent le grand seront enregistrés.
La vidéo une fois montée devra être mise sur Youtube ou Dailymotion pour que toi, Tshirtman puisse la voir (et les enfants plus tard)
On peut aussi leur donner des tableaux à emplir avec des commentaires écrits, mai ils aiment beaucoup moins.

tshirtman

ah oui, en général je passe un coup de ffmpeg si je veux l'envoyer sur youtube, j'avais le même soucis de vidéo toute verte…

ffmpeg -i ton_fichier.ogv nouveau_fichier.avi

juste comme ça ça suffit je pense.

doudoulolita

J'ai enfin réussi à faire marcher Miks et Rizzie ! C'est pas super super joli mais le principe est OK.
J'ai aussi commenté mon code.

#!/usr/bin/ env python
# -*- coding: utf-8 -*-

# donne la largeur et la hauteur de l'écran
largeur_ecran = 900
hauteur_ecran = 472

# importe la bibliothèque Pygame
import pygame
from pygame.locals import *
from sys import exit
from Vector2 import *
import itertools

class Perso(pygame.sprite.Sprite):    
    """ Un sprite défini par son nom, ses 2 images et la position du rectangle qui inclut son image"""
    images = ['static.png', 'walk.png']
    # la liste des images de mouvements d'un sprite : statique et marche. Elles donneront les frames.

    def __init__(self, nom, x, y, fps = 10):
        pygame.sprite.Sprite.__init__(self)
        self.nom = nom # le nom du sprite sera celui donné en argument
        self.image = pygame.image.load(self.nom+"/"+self.images[0]).convert_alpha() 
        self.image2 = pygame.image.load(self.nom+"/"+self.images[1]).convert_alpha()
        # télécharge les 2 images de la liste images en ajoutant le nom du dossier du personnage
        self.frame =[self.image, self.image2] # liste les frames
        self.rect = self.image.get_rect() # surface du rectangle correspondant à l'image
        self.rect.topleft = (x, y) # coordonnées du coin haut droit du rectangle du sprite
        self.time = pygame.time.get_ticks() # horloge
   
    def affiche(self, image, (x,y)):     
        screen.blit(self.image, (x, y)) # affiche l'image à la position indiquée

    def update(self, time):
        self.rect.right += 1 # bouge le rectangle de l'image d'1px vers la droite
        self.frame = itertools.cycle(self.frame) # pour définir la frame à utiliser, parcourt la liste self.frames
        self.image = self.frame.next() # prend la frame suivante de la liste self.images comme nouvelle image
        
#initialise pygame
pygame.init()

# définit la taille de la fenêtre
screen = pygame.display.set_mode((largeur_ecran, hauteur_ecran), 0, 32)
# donne le titre de la fenêtre
pygame.display.set_caption("Miks et rizzie vont-ils marcher correctement ?")

# dictionnaire des sprites: 'miks' et 'rizzie' avec leurs noms, le nom de leur image et leur position
persos = { 'miks':Perso("miks", 100, 100), 'rizzie':Perso("rizzie", 100, 200) } 
time = 0 # intitalise l'heure

while True:    
    # pour fermer la fenêtre
    for event in pygame.event.get():
        if event.type == QUIT:
            exit() 
    # affiche l'arriere-plan en blanc
    background = screen.fill((255,255,255))
    # parcourt le dictionnaire des personnages (persos)
    for i in persos:   
        persos[i].affiche(persos[i].image, persos[i].rect.topleft) # utilise la fonction affiche pour afficher les images
        persos[i].update(time) # utilise la fonction update pour passer à l'image suivante

    # réactualise l'affichage
    pygame.display.update()

tshirtman

Je ne vois pas comment ça peut marcher >_<

#!/usr/bin/ env python
# -*- coding: utf-8 -*-

# donne la largeur et la hauteur de l'écran
largeur_ecran = 900
hauteur_ecran = 472

# importe la bibliothèque Pygame
import pygame
#from pygame.locals import * # évite ce genre de code, tu n'utilise rien de cet import *, c'est une pollution inutile de ton namespace
from sys import exit
#from Vector2 import * # pareil, évite le import *, importe les noms explicitement, comme tu fais pour exit à la ligne au dessus
from itertools import cycle

class Perso(pygame.sprite.Sprite):    
    """ Un sprite défini par son nom, ses 2 images et la position du rectangle qui inclut son image"""
    images = ['static.png', 'walk.png']
    # la liste des images de mouvements d'un sprite : statique et marche. Elles donneront les frames.

    def load_image(self, name):
        return pygame.image.load(self.nom + "/" + img).convert_alpha()

    def __init__(self, nom, x, y, fps = 10):
        pygame.sprite.Sprite.__init__(self)
        self.nom = nom # le nom du sprite sera celui donné en argument
        # télécharge les 2 images de la liste images en ajoutant le nom du dossier du personnage
        self.frames = cycle(map([self.load_image(x) for x in self.images]) # ittérateur sur les images chargées

        self.pos = (x, y) # coordonnées du coin haut droit du rectangle du sprite
   
    def affiche(self):
        screen.blit(self.image, self.x - self.rect.width / 2, self.y - self.rect.height) # affiche l'image de telle sorte que x, y soit au milieu du bords bas de l'image.

    def update(self, time):
        self.pos[0] += 10.0 / time # bouge le rectangle de l'image de 10px vers la droite par secondes
        self.image = self.frames.next() # prend la frame suivante de la liste self.images comme nouvelle image
        self.rect = self.image.get_rect() # surface du rectangle correspondant à l'image

if __name__ == '__main__':
    #initialise pygame
    pygame.init()

    # définit la taille de la fenêtre
    screen = pygame.display.set_mode((largeur_ecran, hauteur_ecran), 0, 32)
    # donne le titre de la fenêtre
    pygame.display.set_caption("Miks et rizzie vont-ils marcher correctement ?")

    # dictionnaire des sprites: 'miks' et 'rizzie' avec leurs noms, le nom de leur image et leur position
    persos = { 'miks':Perso("miks", 100, 100), 'rizzie':Perso("rizzie", 100, 200) }

    pygame.time.get_ticks() # horloge

    while True:
       time = pygame.time.get_ticks() # horloge

        # pour fermer la fenêtre
        for event in pygame.event.get():
            if event.type == QUIT:
                exit()

        # affiche l'arriere-plan en blanc
        background = screen.fill((255,255,255))
        # parcourt le dictionnaire des personnages (persos)
        for i in persos:
            persos[i].update(time) # utilise la fonction update pour passer à l'image suivante
            persos[i].affiche() # utilise la fonction affiche pour afficher les images

        # réactualise l'affichage
        pygame.display.update(time)

Bon, j'ai pas testé (je peux pas ici), mais ça devrait être un peu mieux comme ça, s'il y a des trucs que tu comprends pas, demande.

doudoulolita

Un petit perfectionnement: les personnages peuvent aller à gauche ou à droite selon les flèches du pavé directionnel qu'on utilise. Et les personnages se retournent dans le bon sens grâce au code que j'ai inclus dans la fonction nommée agauche

        self.image = pygame.transform.flip(self.image, 1, 0)
        self.image2 = pygame.transform.flip(self.image2, 1, 0)

Code entier du programme à ce stade:

#!/usr/bin/ env python
# -*- coding: utf-8 -*-

# donne la largeur et la hauteur de l'écran
largeur_ecran = 900
hauteur_ecran = 472

# importe la bibliothèque Pygame
import pygame
from pygame.locals import *
from sys import exit
import itertools

class Perso(pygame.sprite.Sprite):    
    """ Un sprite défini par son nom, ses 2 images et la position du rectangle qui inclut son image"""
    images = ['static.png', 'walk.png']
    # la liste des images de mouvements d'un sprite : statique et marche. Elles donneront les frames.

    def __init__(self, nom, x, y, fps = 10):
        pygame.sprite.Sprite.__init__(self)
        self.nom = nom # le nom du sprite sera celui donné en argument
        self.image = pygame.image.load(self.nom+"/"+self.images[0]).convert_alpha() 
        self.image2 = pygame.image.load(self.nom+"/"+self.images[1]).convert_alpha()
        # télécharge les 2 images de la liste images en ajoutant le nom du dossier du personnage
        self.frame =[self.image, self.image2] # liste les frames
        self.rect = self.image.get_rect() # surface du rectangle correspondant à l'image
        self.rect.topleft = (x, y) # coordonnées du coin haut droit du rectangle du sprite
        self.time = pygame.time.get_ticks() # horloge
   
    def affiche(self, (x,y)):
        screen.blit(self.image, (x, y)) # affiche l'image à la position indiquée
        pygame.time.wait(2) # attend 2 ms
        
    def adroite(self, time):
        self.rect.right += 1 # bouge le rectangle de l'image de 1px vers la droite
        
    def agauche(self, time):
        # retourne l'image vers la gauche
        self.image = pygame.transform.flip(self.image, 1, 0)
        self.image2 = pygame.transform.flip(self.image2, 1, 0) 
        self.rect.right -= 1 # bouge le rectangle de l'image de 1px vers la gauche       
        
    def update(self, time):
        self.frame = itertools.cycle(self.frame) # pour définir la frame à utiliser, parcourt la liste self.frames
        self.image = self.frame.next() # prend la frame suivante de la liste self.images comme nouvelle image
        
#initialise pygame
pygame.init()

# définit la taille de la fenêtre
screen = pygame.display.set_mode((largeur_ecran, hauteur_ecran), 0, 32)
# donne le titre de la fenêtre
pygame.display.set_caption("Miks et rizzie vont-ils marcher correctement ?")

# dictionnaire des sprites: 'miks' et 'rizzie' avec leurs noms, le nom de leur image et leur position
persos = { 'miks':Perso("miks", 100, 100), 'rizzie':Perso("rizzie", 100, 200) } 
time = 0 # intitalise l'heure

while True:    
    # pour fermer la fenêtre
    for event in pygame.event.get():
        if event.type == QUIT:
            exit() 
    # affiche l'arriere-plan en blanc
    background = screen.fill((255,255,255))
    
    if event.type == KEYDOWN:
        if event.key == K_RIGHT:
            for i in persos:   
                persos[i].adroite(time) # utilise la fonction adroite pour avancer d1px vers la droite 
                persos[i].affiche(persos[i].rect.topleft) # utilise la fonction affiche pour afficher les images            
                persos[i].update(time) # utilise la fonction update pour passer à l'image suivante  
            
        elif event.key == K_LEFT:
            for i in persos: 
                persos[i].agauche(time) # utilise la fonction agauche pour reculer d1px vers la gauche
                persos[i].affiche(persos[i].rect.topleft) # utilise la fonction affiche pour afficher les images             
                persos[i].update(time) # utilise la fonction update pour passer à l'image suivante               
    else:                                                
        for i in persos: 
            # parcourt le dictionnaire des personnages (persos)
            persos[i].affiche(persos[i].rect.topleft) # utilise la fonction affiche pour afficher les images
        
    # réactualise l'affichage
    pygame.display.update()

J'aimerai maintenant pouvoir choisir le perso qui agit grâce à la touche M pour miks et à la touche R pour rizzie mais j'ai du mal à trouver comment conserver ce choix d'un bout à l'autre de la boucle.

Peut-être est-ce à ce stade que je dois créer un groupe qui contiendra mes persos ?

doudoulolita

Tshirtman a écrit#from pygame.locals import * # évite ce genre de code, tu n'utilise rien de cet import *, c'est une pollution inutile de ton namespace
from sys import exit
#from Vector2 import * # pareil, évite le import *, importe les noms explicitement, comme tu fais pour exit à la ligne au dessus
from itertools import cycle

Cette ligne de code ne suffit pas

from itertools import cycle # remplace la ligne: import itertools

J'obtiens:

  File "20_class_sprite_miks.py", line 73, in <module>
    persos[i].update(time) # utilise la fonction update pour passer à l'image suivante  
  File "20_class_sprite_miks.py", line 45, in update
    self.frame = itertools.cycle(self.frame) # pour définir la frame à utiliser, parcourt la liste self.frames
NameError: global name 'itertools' is not defined

Si je vire cette autre ligne:

from pygame.locals import *

J'obtiens:

Traceback (most recent call last):
  File "20_class_sprite_miks.py", line 61, in <module>
    if event.type == QUIT:
NameError: name 'QUIT' is not defined

Par contre, comme je ne l'utilise pas ici, on peut virer sans problème:

from Vector2 import *

tshirtman

doudoulolita a écrit

Tshirtman a écrit#from pygame.locals import * # évite ce genre de code, tu n'utilise rien de cet import *, c'est une pollution inutile de ton namespace
from sys import exit
#from Vector2 import * # pareil, évite le import *, importe les noms explicitement, comme tu fais pour exit à la ligne au dessus
from itertools import cycle

Cette ligne de code ne suffit pas

from itertools import cycle # remplace la ligne: import itertools

J'obtiens:

  File "20_class_sprite_miks.py", line 73, in <module>
    persos[i].update(time) # utilise la fonction update pour passer à l'image suivante  
  File "20_class_sprite_miks.py", line 45, in update
    self.frame = itertools.cycle(self.frame) # pour définir la frame à utiliser, parcourt la liste self.frames
NameError: global name 'itertools' is not defined

Ben oui, du coup c'est cycle, au lieu de itertools.cycle 🙂

Si je vire cette autre ligne:

from pygame.locals import *

J'obtiens:

Traceback (most recent call last):
  File "20_class_sprite_miks.py", line 61, in <module>
    if event.type == QUIT:
NameError: name 'QUIT' is not defined

Ah oui, donc tu utilise un symbole dans pygame.locals, importe le, mais juste lui (et d'autres quand tu as besoin), pas * 🙂

from pygame.locals import QUIT

Par contre, comme je ne l'utilise pas ici, on peut virer sans problème:

from Vector2 import *

yep 🙂

doudoulolita

J'ai récupéré mon code sur un ordi plus puissant, d'une part il y avait une petite erreur d'indentation que je viens de corriger sur le code présenté plus haut; d'autre part, comme mon ordi est plus rapide, je préfère augmenter le pygame.time.wait() à 5 au lieu de 2.

J'essaierai tes indications plus tard, là je me prépare à aller bosser :/

doudoulolita

Le code demande plusieurs import de pygame.locals que j'ai mis ici à la suite:

# importe la bibliothèque Pygame
import pygame
from pygame.locals import QUIT, KEYDOWN, K_RIGHT, K_LEFT
from sys import exit
from itertools import cycle

Ce qui est bien, c'est que la console m'indique à chaque fois ce qui manque :cool:

on change alors effectivement la fonction update ainsi:

    def update(self, time):
        self.frame = cycle(self.frame) # pour définir la frame à utiliser, parcourt la liste self.frames
        self.image = self.frame.next() # prend la frame suivante de la liste self.images comme nouvelle image

J'espère que mon code te plaît plus comme ça 🙂
Il semble que le fait que ça marche ne suffisent pas à faire un code correct, si je comprends bien. Il faut l'optimiser au maximum, c'est ça ?

tshirtman

L'optimiser pour la claretée (pas forcément pour la vitesse), afin qu'il soit debuggable et plus facile à étendre. 🙂

Edit: je ne comprends pas pourquoi tu reconstruit ton iterrateur a chaque update. Non seulement c'est inutile, mais ça ne devrait pas marcher...

doudoulolita

tshirtman a écrit Edit: je ne comprends pas pourquoi tu reconstruit ton iterrateur a chaque update. Non seulement c'est inutile, mais ça ne devrait pas marcher...

Il s'avère que ça marche quand même, je dois avoir la chance des débutants 😉
L'itérateur, c'est bien ça ?

self.frame = cycle(self.frame) # pour définir la frame à utiliser, parcourt la liste self.frames

Où est-ce que je le place si je ne le mets pas dans la fonction update ?

tshirtman

dans __init__ 🙂

edit: mais il n'a pas de sens comme ça en fait, là tu le redonne lui même pour l'initialiser >_>

il te faut une variable qui contiens toutes les images, comme j'ai fait, et ensuite initialiser cycle avec cette variable (comme j'ai fait), ensuite, tu as juste besoin de faire le next dans update().

doudoulolita

Petit apparté sur un logiciel canadien destiné en particulier aux étrangers qui veulent apprendre le français: Jnavigue
Pour l'instant, le clavier est en QWERTY.
La créatrice de ce projet n'a plus de subventions pour ce projet à l'heure actuelle mais espère en retrouver pour l'aider à continuer.
De notre côté, à l'EPN, nous recevons des publics d'ASL (Ateliers Socio-linguistiques) et ce logiciel nous serait bien utile s'il était en AZERTY.
C'est du python + Renpy, avis aux développeurs amateurs !

Tuto trouvé sur Renpy: Hyakki Yako

doudoulolita

tshirtman a écritdans __init__ 🙂

edit: mais il n'a pas de sens comme ça en fait, là tu le redonne lui même pour l'initialiser >_>

il te faut une variable qui contiens toutes les images, comme j'ai fait, et ensuite initialiser cycle avec cette variable (comme j'ai fait), ensuite, tu as juste besoin de faire le next dans update().

Pour mettre toutes les images dans une variable, c'est bien une liste commes celles-là ?

# avant def __init__
images = ['static.png', 'walk.png'] 

# dans def __init__
self.image = pygame.image.load(self.nom+"/"+self.images[0]).convert_alpha() 
self.image2 = pygame.image.load(self.nom+"/"+self.images[1]).convert_alpha()
self.frame =[self.image, self.image2]

tshirtman

certes, mais il ne faut pas qu'elle porte le même nom!

là tu écrase self.frame avec cycle(self.frame), si ça marche, c'est sans doute par un comportement non documenté... en tout cas c'est très inefficace...

doudoulolita

Suite de mon apparté: J'ai réussi à faire un petit jeu très simple avec juste un menu interactif et quelques images avec Ren'py.

Je pense que comme avec Kturtle, le langage est suffisamment simple pour que des enfants de 9-10 ans ou de jeunes ados l'utilisent. Ren'py permet de faire facilement une sorte de livre interactif et en plus, il peut être amélioré grâce à python.

Le code est donc très simple pour démarrer mais il faut bien respecter les indentations dans l'éditeur de Ren'py pour les menus en particulier (4 espaces pour une indentation)

J'ai suivi ce tuto (en anglais): Renpy - a simple game en remplaçant les images par celles de mes petits persos Miks et Rizzie + les image de fonds d'USF qui avaient quasiment la bonne taille (800 x 600 par défaut dans Ren'py).

Au départ, on créé un nouveau projet grâce au menu de Ren'py. Ensuite, il faut placer les images dans le dossier game de votre projet et lancer l'éditeur et le jeu, toujours grâce au menu de Ren'py. On supprime ce qu'il y a dans script.rpy et on le remplace par son propre code.

Voici mon fichier script.rpy où je déclare mes images, définit mes caractères qui seront représentés par une lettre, puis je lance le jeu avec label start et j'affiche les premières images, puis le menu. Ensuite, j'affiche le mot fin.

image bg bixlevel = "BiX_level.png"
image bg ciel = "biglevel-background.png"

image rizzie calme = "static1.png"
image rizzie colère = "kick1.png"

image miks calme = "static.png"
image miks bisous = "smash-straight2.png"

define M = Character('Miks', color="#c8ffc8")
define R = Character('Rizzie', color="#c8c8ff")

label start:
    scene bg ciel
    show rizzie calme

    R "Veux-tu venir avec moi à Bixland ?"      

    hide rizzie
    show miks calme    

menu:
    "Oui, je te suis": 
        jump bixlevel

    "Non, je reste ici":
        jump ciel        

label fin:  
    ".:. Fin"

    scene black
    with dissolve

Les images affichées par scene viennent se placer en haut de l'écran et les images des personnages (tout petits et détourés dans mon cas) affichées grâce au code show se placent dans la section du bas de l'écran.
J'ai ajouté un fichier ciel.rpy. Le code jump ciel situé dans script.rpy va essayer de trouver le label ciel même s'il est dans un autre fichier, comme ici.

label ciel:
    scene bg ciel
    show miks calme
    
    M "J'aime bien ce ciel bleu, on ira plus tard à Bixland"
    
    "--- un peu plus tard ---"
    M "On y va maintenant ! Lance la  téléportation !"
    jump bixlevel

Autre fichier ajouté: bixlevel.rpy. dissolve permet une transition entre l'affichage des images. Les chaînes de caractères sont soit placées telles quelles, soit on ajoute la lettre correspondant au personnage, telle qu'on l'a défini dans script.rpy. Cela s'affiche en bas de l'écran.

label bixlevel:
    
    scene bg bixlevel
    with dissolve
    show miks calme

    "Téléportation !."
    "Miks est heureux"    
    
    show miks bisous

    M "Viens que je t'embrasse !"

Voir des images ici.

« Page précédente Page suivante »