Images et Animation en 2D

Transcription

1 Images et Animation en 2D Présentation et Auteur: Mail: Web: Université de Nice - Sophia Antipolis

2 Images dans les Jeux Vidéo Un peu d Histoire 10/25/2013 2

3 Quelques grands succès de jeux Space Wars (1977) Asteroid (1979) BattleZone (1980) Tempest (1981) Star Wars (1983) Des Jeux avec des Graphismes Vectorielles 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 3

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 10/25/2013 4

5 Introduction Des images oui, mais des Sprites 5

6 Des images pour tout Des images pour tous les éléments du jeu ou presque 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

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 ( ) Pokémon Noir et Blanc ( ) 10/25/2013 7

8 Des images fixes Eléments de décor Dessin du terrain Icons Eléments avant plan Figurines Ecrans de titre 8

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 9

10 Sprite: On a toujours besoin d un plus petit que soi! Historiques Actuels 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 10/25/

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 Faites toujours attention aux droits quand vous récupérez! 12

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) 13

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 14

15 What is a Sprite Sheet? 10/25/

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) 16

17 Animation 17

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 18

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! 19

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 20

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 10/25/

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 22

23 Déplacer un objet à chaque frame Maîtriser la vitesse du déplacement Contrôle de la Vitesse d Animation 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

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

25 Optimisation pour l affichage Ne redessiner que ce qui a changé: Animation sans Problème d Affichage 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

26 Organisation de l Espace Un espace limité qu il faut gérer 26

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 27

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) 28

29 Texte Autonome Infini Scrolling 1 axe Scrolling 2 axes Montage Scrolling différentiel Axe des Z Vues Multiples 29

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 30

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

32 Glossaire Des fonctions utiles pour le TD 25/10/

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 33