[TUTO] qu'est-ce qu'un sprite ?

Nfred · Message par **Nfred** » jeu. 01/déc./2005 13:33

Qu'est-ce qu'un sprite ?

Un sprite est une image que l'on peut faire déplacer. Voilà la base des premiers jeux du monde informatique.

Le principe reposait sur un fond d'écran fixe au départ et une image qui se déplace sur ce fond d'écran.

Le premier jeu (PONG) était constitué d'un fond noir et de trois sprites :
2 "raquettes"
1 balle

Les raquettes, commandées par des humains, se déplacent de droite à gauche. Celles-ci étaient une image de simple rectangle.

La balle avait un comportement plus complexe : C'était une image représentant un cercle qui rebondissait sur les bords de l'écran et sur les raquettes.

Voici comment créer un sprite avec purebasic :

on initialise en premier Directx pour les librairies graphique

Code : Tout sélectionner

If InitSprite() = 0 Or InitKeyboard() = 0 Or InitMouse() = 0 
  MessageRequester("Erreur", "Impossible d'initialiser DirectX", 0) 
  CloseWindow(#Window) : End 
EndIf

ensuite on ouvre une fenêtre pour travailler

Code : Tout sélectionner

hwnd = OpenWindow(#Window, 0, 0, #Width, #Height, #PB_Window_TitleBar | #PB_Window_ScreenCentered, "") 
OpenWindowedScreen(hwnd, 0, 0, #Width, #Height, 0, 0, 0)

on créé un petit sprite simple

Code : Tout sélectionner

If CreateSprite(#Sprite, 64,64) 
  StartDrawing(SpriteOutput(#Sprite)) 
  Circle(32,32,32,RGB($FF,$0,$0)) 
  Line(32,32,0,32,RGB($00,$0,$0))
  StopDrawing() 
EndIf

Le sprite s'appelle #Sprite, fait 64 pixels sur 64.
le "StartDrawing(SpriteOutput(#Sprite)) dit que l'on va dessiner et que le contenu du dessin ira dans #Sprite.
Le sprite simple est composé d'un cercle et d'une ligne.

Et voici ce que ça donne en programme complet :

ps : Echap pour quitter

Code : Tout sélectionner

;{- déclaration des constantes
#Window = 0 
#Width = 600 
#Height = 600 
#Sprite = 0
;}

;{- Initialisation de DirectX 
If InitSprite() = 0 Or InitKeyboard() = 0 Or InitMouse() = 0 
  MessageRequester("Erreur", "Impossible d'initialiser DirectX", 0) 
  CloseWindow(#Window) : End 
EndIf 
;}

;{- Ouverture de la fenêtre et de l'écran 
hwnd = OpenWindow(#Window, 0, 0, #Width, #Height, #PB_Window_TitleBar | #PB_Window_ScreenCentered, "") 
OpenWindowedScreen(hwnd, 0, 0, #Width, #Height, 0, 0, 0) 
;}

;{- Création des sprites
If CreateSprite(#Sprite, 64,64) 
  StartDrawing(SpriteOutput(#Sprite)) 
  Box(0,0,64,64,RGB(174,135,218))
  Circle(32,32,32,RGB($FF,$0,$0)) 
  Line(32,32,0,32,RGB($00,$0,$0))
  StopDrawing() 
EndIf 
;}

Repeat
  ExamineKeyboard() 
  ClearScreen(174, 135, 218)
  DisplaySprite(#Sprite, x,y) 
  FlipBuffers() 
  If KeyboardPushed(#PB_Key_Escape) : quit = 1 : EndIf 
  Delay(20)
Until quit = 1

Bon le programme principal (boucle repeat) mérite quelques explications que voilà :

ExamineKeyboard()
C'est une fonction pour aller voir le clavier

ClearScreen(174, 135, 218)
On efface l'écran avec en couleur de fond (174,135,218). keske c'est que ces numéros ? lancez le petit programme Paint ->aller dans [couleur] -> modifier les couleurs, définir les couleurs personnalisés. Là sur la droite de la fenêtre il y a 3 couleurs rouge, vert et bleu correspondant à ces valeurs.

DisplaySprite(#Sprite, x,y)
On affiche le sprite (en fait on le charge en mémoire de l'ordi)

FlipBuffers()
On envoi le contenu de la mémoire à la carte vidéo. C'est cette opération qui permet d'afficher vraiment l'écran.

If KeyboardPushed(#PB_Key_Escape) : quit = 1 : EndIf
Dès que la touche échap est pressé la variable quit est égale à 1

Delay(20)
On attend 20ms avant de poursuivre l'exécution. (si vou l'enlevez, vous verrez la CPU du pc passer à 100%. L'ordi va afficher en permanence le sprite voir le clavier et reboucler).

Until quit = 1
On reboucle au "repeat" jusqu'à ce que la variable quit vale 1. Pour les puristes, c'est vrai qu'il aurai fallut initialiser la variable à zéro au début mais bon, j'suis flémard...

Ce programme est très très simple mais c'est la base. à partir de là, on va pouvoir déplacer notre petit sprite.

Code : Tout sélectionner

;{- déclaration des constantes
#Window = 0 
#Width = 600 
#Height = 600 
#Sprite = 0
;}

;{- Initialisation de DirectX 
If InitSprite() = 0 Or InitKeyboard() = 0 Or InitMouse() = 0 
  MessageRequester("Erreur", "Impossible d'initialiser DirectX", 0) 
  CloseWindow(#Window) : End 
EndIf 
;}

;{- Ouverture de la fenêtre et de l'écran 
hwnd = OpenWindow(#Window, 0, 0, #Width, #Height, #PB_Window_TitleBar | #PB_Window_ScreenCentered, "") 
OpenWindowedScreen(hwnd, 0, 0, #Width, #Height, 0, 0, 0) 
;}

;{- Création des sprites
If CreateSprite(#Sprite, 64,64) 
  StartDrawing(SpriteOutput(#Sprite)) 
  Box(0,0,64,64,RGB(174,135,218))
  Circle(32,32,32,RGB($FF,$0,$0)) 
  Line(32,32,0,32,RGB($00,$0,$0))
  StopDrawing() 
EndIf 
;}

Repeat
  ExamineKeyboard() 
  ClearScreen(174, 135, 218)
    If KeyboardPushed(#PB_Key_Pad8) ;{ haut
    y - 1 
  ;}
  ElseIf KeyboardPushed(#PB_Key_Pad2) ;{ bas
    y + 1 
  ;}
  ElseIf KeyboardPushed(#PB_Key_Pad4) ;{ gauche
    x - 1 
  ;}
  ElseIf KeyboardPushed(#PB_Key_Pad6) ;{ droite
    x + 1 
  ;}
  ElseIf KeyboardPushed(#PB_Key_Pad3) ;{ bas&droite
    x + 1 
    y + 1
  ;}
  ElseIf KeyboardPushed(#PB_Key_Pad9) ;{ haut&droite
    x + 1 
    y - 1
  ;}
  ElseIf KeyboardPushed(#PB_Key_Pad7) ;{ haut&gauche
    x - 1 
    y - 1
  ;}
  ElseIf KeyboardPushed(#PB_Key_Pad1) ;{ bas&gauche
    x - 1 
    y + 1
  EndIf ;}
  DisplaySprite(#Sprite, x,y) 
  FlipBuffers() 
  If KeyboardPushed(#PB_Key_Escape) : quit = 1 : EndIf 
  Delay(20)
Until quit = 1

J'ai commencé par me dire que x et y sont les coordonnées du sprite. Si je veux descendre, j'appuie sur une touche et donc y = y+1 (ou y+1).

Si on répète la même procédure pour toutes les touches du pavé numérique on obtient le "déplacement" du sprite.

on peut même rajouter une fonction pour ne pas que le sprite sorte de l'écran :

Code : Tout sélectionner

;{- déclaration des constantes
#Window = 0 
#Width = 600 
#Height = 600 
#Sprite = 0
;}

;{- Initialisation de DirectX 
If InitSprite() = 0 Or InitKeyboard() = 0 Or InitMouse() = 0 
  MessageRequester("Erreur", "Impossible d'initialiser DirectX", 0) 
  CloseWindow(#Window) : End 
EndIf 
;}

;{- Ouverture de la fenêtre et de l'écran 
hwnd = OpenWindow(#Window, 0, 0, #Width, #Height, #PB_Window_TitleBar | #PB_Window_ScreenCentered, "") 
OpenWindowedScreen(hwnd, 0, 0, #Width, #Height, 0, 0, 0) 
;}

;{- Création des sprites
If CreateSprite(#Sprite, 64,64) 
  StartDrawing(SpriteOutput(#Sprite)) 
  Box(0,0,64,64,RGB(174,135,218))
  Circle(32,32,32,RGB($FF,$0,$0)) 
  Line(32,32,0,32,RGB($00,$0,$0))
  StopDrawing() 
EndIf 
;}


Repeat
  ExamineKeyboard() 
  ClearScreen(174, 135, 218)
    If KeyboardPushed(#PB_Key_Pad8) ;{ haut
    y - 1 
    If y <0
      y=0
    EndIf
  ;}
  ElseIf KeyboardPushed(#PB_Key_Pad2) ;{ bas
    y + 1 
    If y > 535
      y=535
    EndIf
  ;}
  ElseIf KeyboardPushed(#PB_Key_Pad4) ;{ gauche
    x - 1 
    If x<0
      x=0
    EndIf
  ;}
  ElseIf KeyboardPushed(#PB_Key_Pad6) ;{ droite
    x + 1 
    If x>535
      x=535
    EndIf
  ;}
  ElseIf KeyboardPushed(#PB_Key_Pad3) ;{ bas&droite
    x + 1 
    y + 1
    If x>535
      x=535
    EndIf
    If y > 535
      y=535
    EndIf
  ;}
  ElseIf KeyboardPushed(#PB_Key_Pad9) ;{ haut&droite
    x + 1 
    y - 1
    If x>535
      x=535
    EndIf
    If y <0
      y=0
    EndIf
  ;}
  ElseIf KeyboardPushed(#PB_Key_Pad7) ;{ haut&gauche
    x - 1 
    y - 1
    If x<0
      x=0
    EndIf
    If y <0
      y=0
    EndIf
  ;}
  ElseIf KeyboardPushed(#PB_Key_Pad1) ;{ bas&gauche
    x - 1 
    y + 1
    If x<0
      x=0
    EndIf
    If y > 535
      y=535
    EndIf
  EndIf ;}
  DisplaySprite(#Sprite, x,y) 
  FlipBuffers() 
  If KeyboardPushed(#PB_Key_Escape) : quit = 1 : EndIf 
  Delay(20)
Until quit = 1

Beau déplacement de Sprite n'est ce pas !

La on triche !!!

On ne déplace rien du tout, on efface et on réaffiche le sprite un pixel plus loin...

Mais c'est comme ça que ça marche !

voili pour le début
Avis aux pro qui souhaite apporter leurs commentaires sur le tuto... Ils sont les bienvenus.

Chris · Message par **Chris** » jeu. 01/déc./2005 14:01

Très bien, ton tuto, mais si tu le lances avec le debugger, tu verras que le pointeur de ta souris garde la forme d'un sablier.

Pour éviter ça, il suffit de mettre While WindowEvent() : Wend juste après ton Delay. Et Delay(1) est suffisant.

Ca permet de récupérer les évenement de la fenêtre pour purger la liste des messages.

La fin du code donne donc :

Code : Tout sélectionner

  DisplaySprite(#Sprite, x,y) 
  FlipBuffers() 
  If KeyboardPushed(#PB_Key_Escape) : quit = 1 : EndIf 
  Delay(1) 
  While WindowEvent():Wend
Until quit = 1