Images et Animation en 2D

Mail: Stephane.Lavirotte@unice.fr

Web: http://stephane.lavirotte.com/

Université de Nice - Sophia Antipolis

Présentation et Auteur:

Stéphane Lavirotte

Un peu d’Histoire

Images dans les Jeux Vidéo

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

Des images oui, mais des Sprites

Introduction

5 Stéphane Lavirotte

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

6 Stéphane Lavirotte

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

Icons

Figurines

Dessin du terrain

Eléments avant plan

Ecrans de titre

8 Stéphane Lavirotte

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

9 Stéphane Lavirotte

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 !

12 Stéphane Lavirotte

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)

13 Stéphane Lavirotte

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

14 Stéphane Lavirotte

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)

16 Stéphane Lavirotte

Animation

17 Stéphane Lavirotte

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

18 Stéphane Lavirotte

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 !

19 Stéphane Lavirotte

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

20 Stéphane Lavirotte

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

22 Stéphane Lavirotte

http://www.sparkrift.com/tag/live

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

23 Stéphane Lavirotte

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, …

24 Stéphane Lavirotte

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

25 Stéphane Lavirotte

Un espace limité qu’il faut gérer

Organisation de l’Espace

26 Stéphane Lavirotte

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

27 Stéphane Lavirotte

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)

28 Stéphane Lavirotte

Texte Autonome Infini

Scrolling 1 axe Scrolling 2 axes Montage

Scrolling différentiel Axe des Z Vues Multiples

29 Stéphane Lavirotte

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

30 Stéphane Lavirotte

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

31 Stéphane Lavirotte

Des fonctions utiles pour le TD

Glossaire

Stéphane Lavirotte 32 25/10/2013

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

33 Stéphane Lavirotte