Images et Animation en 2D

Présentation et Auteur:
Stéphane Lavirotte

Mail: Stephane.Lavirotte@unice.fr
Web: http://stephane.lavirotte.com/
Université de Nice - Sophia Antipolis
 Images dans les Jeux Vidéo

Un peu d’Histoire

10/25/2013 Stéphane Lavirotte 2

 Des Jeux avec des
Graphismes Vectorielles
 Quelques grands succès de jeux
– Space Wars (1977)
– Asteroid (1979)
– BattleZone (1980)
– Tempest (1981)
– Star Wars (1983)
 Mais les dessins vectoriels n’ont pas reçu
les faveurs des entreprises du jeu
– Coût élevé réparations sur le matériel d’affichage
 A noter:
– La Console Vectrex (1982) propose un affichage
vectoriel grâce à un moniteur dédié

10/25/2013 Stéphane Lavirotte 3

 … vers la 3D
(représentation en Fil de Fer)
 Mais ça c’est une autre histoire:
– Elite de NVG en 1984
 Simulateur de vol galactique
 Créé par David Braben et Ian Bell
 Sur BBC Micro puis NES, Amstrad CPC, …
 Elite est généralement considéré comme
l'un des jeux les plus innovants de
l'histoire du jeu vidéo
– Starglider en 1986
 Simulateur de combats spatiaux
 Inspiré de Star Wars
 Sur ATARI ST, Amiga, Mac, Amstrad CPC,
ZX Spectrum (meilleur jeu en 86), Apple II,
Commodore 64

10/25/2013 Stéphane Lavirotte 4

 Introduction

Des images oui, mais des Sprites

Stéphane Lavirotte 5
 Des images pour tout…
ou presque
 Des images pour tous les éléments du jeu
– Image de fond ou imagettes pour la construction du terrain
– Dessin des plateformes
– Icons pour les objets du jeu
– Dessin des personnages et animation
– Images pour l’écran d’accueil
– Images pour les textures des modèles 3D
 Mais aussi éventuellement
– Menus: boutons, décor des fenêtres, des listes, …
– Affichage de données (score, texte, …) même si on préfèrera les
polices de caractères
– Images de transitions dans les séquences de jeu 2D
 Donc beaucoup d’images de différents types à gérer
Stéphane Lavirotte 6
 Exemples de Jeux 2D
(ou mélange 2D majoritaire/3D)
 Jeux « anciens »
– Plus de jeux 2D que de 3D

 Jeux récents:
– De nombreux Hits en 2D
 Pokémon Platine (2008)
 Mario et Luigi : Voyage au centre de Bowser (2009)
 Pokémon HeartGold et SoulSilver (2009-2010)
 Pokémon Noir et Blanc (2010-2011)

10/25/2013 Stéphane Lavirotte 7

 Des images fixes
 Eléments de décor  Dessin du terrain

 Icons  Eléments avant plan

 Figurines  Ecrans de titre

Stéphane Lavirotte 8
 Sprite
 Représentation visuelle de tous les objets ou éléments
graphique qui peuvent se déplacer à l’écran
– En français: un lutin
– Soit une simple image
– Soit une série d’images que l’on animera par programmation
 Usage des Sprites
– Technique fondamentale en jeux vidéo 2D

 Le plus connu des sprites: ? le pointeur de souris

Stéphane Lavirotte 9
 Sprite: On a toujours besoin
d’un plus petit que soi !
 Historiques  Actuels

Stéphane Lavirotte 10
 Sprites pour la 3D aussi
 Le terme sprite n’est pas réservé aux petites images 2D
basse-résolution
 Se retrouve également dans les jeux 3D
– Traitement de l’interface graphique
– Simplification des objets
– Effets spéciaux
– Systèmes de particules

10/25/2013 Stéphane Lavirotte 11

 Où trouver des Sprites ?
 Soit on créé ses propres sprites
– Finesse du travail (quelques pixels avec des animations)
– Travail confié aux professionnels du genre !

 Soit on récupère des sprites intéressants

– Difficile à modifier après création
– Bibliothèques de sprites existantes
 Inclus dans les jeux comme RPG Maker XP ou VX
 http://reinerstileset.4players.de/englisch.html
 http://www.flyingyogi.com/fun/spritelib.html
 http://jeux.developpez.com/medias/#a_sprites
– Faites toujours attention aux droits quand vous récupérez !

Stéphane Lavirotte 12
 Planches d’images: Sprite Sheet
 Sprite Sheet
– « Tile » ou tuile
concernant les
éléments de décor
(cases)
– « Découpage » en
briques élémentaires
– Taille fixée (souvent
une puissance de 2:
32, 64 ou 128)

Stéphane Lavirotte 13
 Pourquoi plusieurs Images
en un seul Fichier
 Un nombre important d’images pour tous les éléments
du jeu
 Si chaque image est un fichier: de nombreux petits
fichiers
– Problème de stockage sur le disque dur
– Problème de vitesse au chargement
 Donc la solution est de faire des planches d’images
– Meilleur rapport de compression (suivant le format utilisé)
– Plus rapide à lire sur le disque dur
– Redécouper l’image pour avoir les différents mouvements
– Obligation de choisir une taille fixe à chaque type d’élément
– Dans les langages de bas niveau pour changer d’image, il suffit
de bouger un pointeur sur l’image

Stéphane Lavirotte 14
 What is a Sprite Sheet ?

10/25/2013 Stéphane Lavirotte 15

 Chargement et Positions
 Charger l’image contenant toutes les imagettes
 Retrouver les positions de chaque élément
def split(spritesheet, width, height):
sprite = []
for l in range(nombre de lignes):
line = []
for c in range(nombre de colonnes):
x, y = c * width, l * height
rect = (x, y, width, height)
line.append(spritesheet.img_at(rect))
sprite.append(line)
return sprite
 Attention s’il y a des espaces de « séparation » entre les
images (lignes de délimitation)

Stéphane Lavirotte 16
Animation

Stéphane Lavirotte 17
 Qu’est ce que l’Animation 2D
 Donner l’illusion d’un mouvement à partir d’images
fixes
– Découpage en séquences d’images
– Comme pour le mouvement, le temps importe
– Le temps indexe la position courante dans l’animation
 Exemple:
– Un personnage qui marche

Stéphane Lavirotte 18
 Et pourquoi pas un gif animé ?
 Gif animé:
– Image contenant une séquence d’images fixes
– Temps d’attente entre deux images
– Donne l’illusion du mouvement par affichage successif

 Mais:
– Nécessite un thread spécifique pour réaliser l’animation
– On n’a pas de contrôle dynamiquement sur l’animation
– Pas de contrôle fin possible sur les enchainements
– Ou nécessite de faire le contrôle de l’affichage manuellement

 PyGame et de nombreuses librairies pour le jeu ne

gèrent pas les gif animés: solution non viable !

Stéphane Lavirotte 19
 Sprite Sheet: Personnage
 Solution: animation
« à la main »
 « Découpage »
 Problème
– Quelle animation
correspond à quelle
image ?
 Système rigide de
règles
 Stocker les
informations
nécessaires

Stéphane Lavirotte 20
 Qualité de l’Animation
 La qualité de l’animation dépend du nombre de dessins
– Un des premiers très bon exemple: Prince of Persia
 Ex: boire une fiole: 15 dessins pour la prendre et la boire
– Plus on est proche des 24 images par secondes, plus
l’animation sera fluide

10/25/2013 Stéphane Lavirotte 21

 Sprite Sheet Effets Spéciaux
 Identique aux
Personnages
 Animation pour les
effets spéciaux
– En 2D bien sûr
– Mais en 3D aussi
 Evite des calculs couteux

http://www.sparkrift.com/tag/live
Stéphane Lavirotte 22
 Contrôle de la Vitesse
d’Animation
 Déplacer un objet à chaque frame
 Maîtriser la vitesse du déplacement
– On ne déplace pas l’objet d’une valeur fixe à chaque tour de
boucle
– Chaque objet a un paramètre de déplacement (vitesse)
 Basé sur l’utilisation d’une horloge
– Evite les problèmes de performances variables des processeurs
– Gère la durée des cycle de boucle inégaux (on peut avoir plus
de choses à faire à certains moments, mais l’animation doit
rester fluide)
– Comptabilisation du temps écoule à chaque tour de boucle
– Déplacement = Vitesse x Temps
 Valable tant en 2D qu’en 3D
Stéphane Lavirotte 23
 Un Affichage en Couches
 Affichage du plus loin au plus près
– Eléments du terrain ou fond d’écran
– Eléments bâtiments, plates-formes
– Objets
– Personnages de premier plan
 Utilisation de la notion de calques
– Méthode inspirée de l’animation du dessin animé
– Un ou plusieurs calques pour les décors, un calque pour les
personnages, …

Stéphane Lavirotte 24
 Animation sans
Problème d’Affichage
 Optimisation pour l’affichage
– Ne redessiner que ce qui a changé:
 Dans la mesure du possible, on ne redessine pas, on bouge le
calque
 Limite les changements à effectuer sur l’image
– Double Buffering:
 Technique utilisée pour minimiser les artéfacts visuels dus au
temps nécessaire pour dessiner
 Image entièrement redessinée environ 60 fois par secondes sur le
moniteur
 Difficile de ne pas avoir le dessin d’animation sans que l’image soit
complètement modifiée (risque de voir une modification partielle)
 Toute la page ou les portions modifiées de la page sont copiés en
une seule opération

Stéphane Lavirotte 25
Organisation de l’Espace

Un espace limité qu’il faut gérer

Stéphane Lavirotte 26
 Un Espace d’Affichage Limité
 Ecran
– Un des principaux vecteurs de communication entre la
machine et l’utilisateur
– Envahissent notre quotidien (tv, téléphone, voiture, …)
– Est très limité en taille en particulier pour un jeu
– Important de se poser des questions pour une bonne gestion
de cet espace d’affichage
 Différents types d’utilisation de l’espace que l’on peut
trouver dans les programmes interactifs (jeux ou
autres)
 Les interfaces actuelles sont des combinaisons des
différentes techniques de base inventées il y a plus de
40 ans
Stéphane Lavirotte 27
 Différents Types d’Affichages
 Ecran texte (vers 1955): Zork
 Ecran autonome (1972): Pong, Space invaders
 Ecran infini (1979): Asteroïd, PacMan
 Scrolling sur 1 axe (travelling) (1980): 1942, Defender
 Scrolling sur 2 axes: Populous, Sim City
 Montage (1980): Berzerk
 Scrolling différentiel: Sonic
 Axe des Z (profondeur) (1967): Night Driver, Pole
Position
 Vues Multiples (split-screen): Ultima 3, Warcraft, …
 Perspective: FPS (Doom, Unreal), TPS (Tomb Raider)

Stéphane Lavirotte 28
 Texte Autonome Infini

Scrolling 1 axe Scrolling 2 axes Montage

Scrolling différentiel Axe des Z Vues Multiples

Stéphane Lavirotte 29
 Scrolling Différentiel
 Scrolling différentiel ou Scrolling parallax
– Vise à donner une impression de profondeur
– Technique basée sur une vitesse légèrement variable de
portions de décors
– Technique utilisée dans les dessins animés
 Déplacement relatif des Calques
– Les plus proches bougent plus vite
– Les plus éloignés moins vite

Stéphane Lavirotte 30
 Du faux 3D mais du vrai 2D
 3D Isométrique
– Fausse 3D
– Représenter en 2D une partie d’un espace en 3D
– Prise de vue, plongeante (à 45°)
– Donne un effet de profondeur
– Le joueur a l'impression de jouer dans un univers en 3D
– Renforcé par l’ajout d’ombre sur les sprites
– Permet de faire des graphismes très travaillés
– Plus simple à gérer que de la vrai 3D
 Utilisé dans de nombreux jeu
– Warcraft 2
– Simcity 2000

Stéphane Lavirotte 31
 Glossaire

Des fonctions utiles pour le TD

25/10/2013 Stéphane Lavirotte 32

 Glossaire de Commandes
pour les Travaux Dirigés
 pygame.image.load(filename)
– load new image from a file
 pygame.transform.rotate(Surface, angle)
– Rotate an image
 Surface.get_at((x, y))
– get the color value at a single pixel
 Surface. set_colorkey(Color, flags=0)
– Set the transparent colorkey
 Surface.get_rect()
– Get the rectangular area of the Surface
 ramdom.randint(min, max) (import random)
– Return a random integer N such that min <= N <= max
 pygame.sprite.Sprite()
– Simple base class for visible game objects
 pygame.sprite.Group()
– container class for many Sprites
 pygame.sprite.spritecollide(sprite, group, dokill, collided = None)
– find Sprites in a Group that intersect another Sprite

Stéphane Lavirotte 33