Initialisation au développement des jeux vidéo

Réalisé par: Hidri Jouda - Haj Ayache Souhail - Elj AsmaPrésenté par: Hidri Jouda – Haj Ayache Souhail

Atelier Gaming

Android

Plan de la présentation Actualité:

– Game Command App– Quelques jeux de GameLoft

Initialisation au développement des jeux vidéos:– Notions de base– Afficher une image sur l’écran: la class SurfaceView– Bouger une image sur l’écran: Thread et Loop– Animer une image: Sprite et frame– Gestion des évènements: onTouchEvent

Conclusion30/11/2011 2

Actualité…

L'ouverture Android OS a permis l’épanouissement d’une énorme quantité de créativité.

Des centaines de jeux sur le marché!

Mais, il est souvent terriblement difficile pour les utilisateurs moyens de trouver des applications qui fonctionnent bien sur leurs appareils spécifiques.

Comment savoir quels jeux sont optimisés?30/11/2011 3

Solution… Game Command

• Proposée par Qualcomm.• Disponible à partir de Janvier 2012.• Gratuite pour les terminals Qualcomm.• permettra aux propriétaires des téléphones et

tablettes tournant cette puce de Qualcomm d’avoir une liste des meilleurs jeux qui sont garantis de marcher sur leurs propres équipements.

30/11/2011 4

Game Command

• On trouvera une liste de jeux marqués « enhanced » ou « featured » qui vont profiter du matériel special.

30/11/2011 5

Quelques jeux de GameLoft

30/11/2011 6

9mm

30/11/2011 7

•Genre: Action

•Sortie le 11 Octobre

•Caractéristiques: Guerre des gangs Possibilité de jouer en ligne avec des amis

•Prix: $6,99

•Note (sur 5) : 4,5

30/11/2011 9

GT Racing 3D

30/11/2011 10

• Genre: Course

• Sortie le 11 Novembre

• Caractéristiques: Plus de 100 voituresGrande variété de pistesMulti-joueurs en local et en ligne jusqu' ‘à 6 personnes

• Prix: $4,99

• Note (sur 5) : 4,730/11/2011 11

30/11/2011 12

13

Let ‘s Golf 3

30/11/2011

• Genre: Sport

• Sortie le 11 Novembre

• Caractéristiques: 6 endroits fantastiques4 joueurs peuvent s'affronter en ligne, en local (Wi-Fi ou

Bluetooth) ou sur le même appareil.Multi-joueurs en local et en ligne jusqu' ‘à 6 personnes

• Prix : free

• Note (sur 5) : 3,630/11/2011 14

30/11/2011 15

Les notions de base

Pour développer un jeux vidéo, qu’il soit un simple jeu d’arcade ou bien un jeu 3D avancé, trois services sont nécessaires:

• le graphisme (permettant de dessiner des images sur l’écran)

30/11/2011 16

• la gestion du temps (permettant la création d’animations)

30/11/2011 17

Les notions de base

• la gestion des évènements (permettant de traiter des informations provenant de l’entrée, input)

Lors de cette présentation, on parlera de ces trois notions.

30/11/2011 18

Les notions de base

Afficher une image sur l’écran: SurfaceView

-Pour afficher une image sur l’écran, on aura besoin de la classe SurfaceView qui hérite de la classe View.-La classe SurfaceView, ré implémentera la méthode onDraw via @override, qui est responsable du rendering (le dessin de l’image sur l’écran).-D’un autre côté, SurfaceView implémentera l’interface SurfaceHolder, qui est responsable du control de la surface (largeur, changement, évènements …).

30/11/2011 19

• Implémentation de la méthode onDraw: @Override protected void onDraw(Canvas canvas) { canvas.drawColor(Color.BLACK); canvas.drawBitmap(bmp, 10, 10, null); }

Pour dessiner une image, on aura également besoin de la classe Canvas. Canvas, est un comme un rectangle dans lequel l’image sera dessinée.On aura besoin de préciser la source de l’image (Bitmap bmp), la position de l’image (l’abscisse et l’ordonné)

30/11/2011 20

Comment récupérer la source de l’image?

30/11/2011 21

Toute image, doit être placée dans le dossier drawable . L’image doit être de type PNG. A chaque fois on ajoute une nouvelle image dans ce dossier, la classe R.drawable se met à jour, dans le fichier R.java.

30/11/2011 22

• Voici un exemple d’une classe Rpublic final class R {

public static final class attr {

}public static final class drawable {

public static final int ball=0x7f020000;public static final int icon=0x7f020002;

}public static final class layout {

public static final int main=0x7f030000;}public static final class string {

public static final int app_name=0x7f040001;

public static final int hello=0x7f040000;}

}

L’image icon.png, est une image existante dans le dossier drawable par défaut. Si on ajoute une image ball.png, on va remarquer que ce fichier va se mettre à jour automatiquement et ajouter la ligne soulignée.Pour chaque image, on a un identifiant unique portant son nom. Cet identifiant est un entier, permettant de retrouver la source de l’image.

30/11/2011 23

Il suffit après de déclarer la variable bmp de type BitmapBitmap bmp

Et l’extraire à partir de sa source: bmp = BitmapFactory.decodeResource(getResources(), R.drawable.icon);

Ensuite appeler la méthode onDraw pour afficher notre image: @Override protected void onDraw(Canvas canvas) { canvas.drawColor(Color.BLACK); canvas.drawBitmap(bmp, 10, 10, null); }30/11/2011 24

30/11/2011 25

Bouger une image sur l’écran: Thread et loop.

• Dans chaque jeux, il existe la notion de boucle. Sous Android, on parle plutôt de Loop.

• Pour un loop, on doit créer un Thread à part qui s’occupe d’un côté de mise à jour continue des variables et d’un autre côté de l’affichage des images.

30/11/2011 26

• Exemple:

30/11/201127

On devra créer une classe qui hérite de la classe Thread. Cette classe s’occupera du loop.Cette classe s’occupera de la gestion du temps et de ce qu’on appelle FPS et UPS:• Frame per second: combien de fois la

méthode onDraw sera appelée par seconde.• Update per second: combien de fois la

méthode update sera appelée par seconde.

30/11/2011 28

Animer une image: Sprite et frame

• Sprite est une image 2D.• On peut créer une classe qui s’occupe de nos

images.• À chaque fois on a besoin d’insérer une

nouvelle image, on peut instancier cette classe qui s’occupera de son chargement, mise à jour et affichage.

30/11/2011 29

- On peut insérer une image sur l’écran en précisant ses coordonnées. - Mais il est également possible de le faire en passant par la classe Rectangle.- On précise la partie à afficher de l’image (rectangle SRC) et la partie de l’écran dans laquelle on veut insérer l’image (rectangle DST)

30/11/2011 30

• En modifiant successivement les coordonnés du rectangle SRC, on pourra avoir une animation.

• Exemple: On affichant successivement l’une de ces trois images, on aura l’impression que cette image est animée.

30/11/2011 31

• Cette technique nous épargnera également le chargement d’une nouvelle image à chaque fois on a besoin de changer l’image affichée.

• Egalement, l’appel de la méthode onDraw en lui donnant deux paramètres de type Rectangle, nous permet de créer un zoom (que ce soit zoom in ou zoom out, selon le rapport de SRC et DST)

30/11/2011 32

Gestion des évènements: OnTouchEvent

• La gestion des évènements, ou bien le Events Handeler est un moyen pour déclencher une action à chaque fois il y a une modification au niveau de l’input: mouvement du doight sur l’écran par exemple.

• A chaque fois il y a un clique sur l’écran, une méthode est appelée OnTouchEvent.

30/11/2011 33

• On pourra mettre dans le corps de cette méthode toutes les actions que nous souhaitons exécuter au moment de cet évènement.

• Cette méthode prend une variable en paramètre de type Event.

• OnTouchEvent(Event e){}

30/11/2011 34

• Cette classe possède deux accesseurs indiquant la position du clique:

getX() et getY();

30/11/2011 35

Nous souhaitons changer la position de l’image vers la position du clique:

Exemple d’utilisation:

30/11/2011 36

Le déplacement vertical est la différence des deux ordonnésLe déplacement horizontal est la différence des deux abscisses.

30/11/2011 37

• On a besoin de savoir le pas (la vitesse) de l’avancement vertical et l’avancement horizontal lors de chaque boucle.

• X+=?• Y+=?

30/11/2011 38

• On doit éviter de se trouver dans le cas suivant:

L’angle de déplacement par boucle doit être le même que l’angle de déplacement total.

30/11/2011 39

• Nous avons l’angle de déplacement et la vitesse principale, et nous avons besoin de la vitesse verticale et la vitesse horizontale:

30/11/2011 40

• Çà donnera les deux lignes suivantes:xSpeed= (float)

Math.cos(Math.atan2(depVert, depHor));ySpeed= (float)

Math.sin(Math.atan2(depVert, depHor));xSpeed *= 5;ySpeed *= 5;

30/11/2011 41

42

Et bien sûr, par la suite, on aura seulement besoin de modifier les deux lignes suivantes:X += xSpeed;Y +=ySpeed;

30/11/2011

• On a ainsi l’impression que l’image se déplace progressivement vers la position du clique.

30/11/2011 43

44

DEMO

30/11/2011

Conclusion

• Ces notions sont les fondements de base pour créer un jeux vidéo d’une façon générale et un jeu sous android.

• On trouve les même notions dans tous les langages capables de créer un jeu.

• D’autres notions sont également intéressantes comme le multijoueur qui permet à deux personnes ou plus de jouer ensemble et la notion d’intelligence artificielle qui permet de jouer contre un adversaire fictif.

30/11/2011 45

30/11/2011 46

Merci