Images et Animation en 2D

(1)

Images et Animation en 2D

Mail: [email protected] Web: http://stephane.lavirotte.com/

Université de Nice - Sophia Antipolis

Présentation et Auteur:

Stéphane Lavirotte

(2)

Un peu d’Histoire

Images dans les Jeux Vidéo

10/25/2013 Stéphane Lavirotte 2

(3)

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é

(4)

… 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

(5)

Des images oui, mais des Sprites

Introduction

5 Stéphane Lavirotte

(6)

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

(7)

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)

(8)

Des images fixes

 Eléments de décor

 Icons

 Figurines

 Dessin du terrain

 Eléments avant plan

 Ecrans de titre

(9)

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

(10)

Sprite: On a toujours besoin d’un plus petit que soi !

 Historiques  Actuels

Stéphane Lavirotte 10

(11)

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

(12)

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 !

(13)

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)

(14)

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

(15)

What is a Sprite Sheet ?

(16)

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)

(17)

Animation

(18)

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

(19)

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 !

(20)

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

(21)

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

(22)

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

(23)

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

(24)

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

(25)

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

(26)

Un espace limité qu’il faut gérer

Organisation de l’Espace

(27)

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

(28)

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)

(29)

Texte Autonome Infini

Scrolling 1 axe Scrolling 2 axes Montage

Scrolling différentiel Axe des Z Vues Multiples

(30)

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

(31)

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

(32)

Des fonctions utiles pour le TD

Glossaire

Stéphane Lavirotte 32

25/10/2013

(33)

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