Le premier site francophone dédié au développement Pocket PC

ASpriteCE (partie 1)

Partie 1
Partie 2
Concours

C'est un composant ActiveX

Un composant ActiveX est aussi appellé un contrôle ActiveX, comme les contrôles Listview, Treeview, Liaison série, etc... Un contrôle est visuel, il doit être placé dans un conteneur (généralement une fenêtre eVB) pour être exploitable et généralement s'affiche lors de l'exécution du programme qui l'utilise (certains contrôles ne s'affichent pas, comme par exemple le contrôle Timer). Les composants ActiveX visuels sont des fichiers avec une extension '.OCX' sur PC et '.DLL' sur le Pocket PC.

ASpriteCE de SpriteHand Sofware

ASpriteCE est un contrôle ActiveX qui permet, avec des langages comme eVB ou NS Basic, de créer des jeux. Ce contrôle permet entre autre de gérer des images, les sprites, le scrolling et bien sûr les sons (tous les ingrédients d'un jeu). Ce contrôle révolutionnaire est édité par SpriteHand Software. Vous pouvez actuellement (octobre 2001) le télécharger gratuitement en version béta. Ce contrôle devrait être vendu au prix de 24$ à sa sortie officielle.

Etape 1 : Télécharger

Pour commencer, vous devez télécharger ASpriteCE.

Télécharger le programme d'installation de ASpriteCE béta depuis CodePPC

ou aller sur la page ASpriteCE de SpriteHand Software, rubrique téléchargement.

Etape 2 : Dézipper le fichier téléchargé et installer ASpriteCE sur votre PC

Une fois que vous avez téléchargé le fichier "aspritece_1_0_02.zip" vous devez le dézipper (je sais, ce n'est pas français). Perso, je l'ai dézippé dans un dossier du même nom, que j'ai placé dans le dossier "C:\Windows CE Tools\wce300\MS Pocket PC" de ma machine de développement, là au moins, il est bien rangé.

Depuis ce dossier, vous devez lancer le script "Install.vbs" qui s'occupe d'ajouter dans la base de registre de votre PC toutes les entrées nécessaires.

Etape 3 : Installer le contrôle sur votre Pocket PC

Pour cela nous allons lancer eVB et utiliser le "Control Manager" que vous lancez par les menus "Tools->Remote Tools->Control Manager". Lorsque le "Control Manager" est connecté à votre Pocket PC, vous devez lister les contrôles qui y sont présents, en sélectionnant "Pocket PC (default Device)" représentant votre Pocket PC connecté.

Puis, depuis cette liste, exécutez un click droit et choisissez dans le menu l'item "Add New Control". Vous devez allez chercher dans le dossier "Bin" de ASpriteCE sur votre PC le fichier "ASpriteCE.dll" correspondant au processeur de votre Pocket PC.

Dans eVB, il faut cocher le composant

Pour pouvoir utiliser ce contrôle dans votre application, il faut cocher sa référence dans la liste des composants (project-> Components) ce qui l'ajoute à la boîte à outils.

A partir de maintenant, vous pouvez placer un contrôle ASpriteCE sur vos feuille en le sélectionnant depuis la boîte à outils.

Nos premiers pas avec ASpriteCE

Pour nous faire la main avec les fonctions de base de ce contrôle et comprendre sa philosophie, nous allons écrire un petit programme qui va faire déplacer 2 étoiles sur l'écran, à des vitesses différentes. Ces 2 étoiles sont animées et rebondissent sur les bords de l'écran.

Etape 1 : Initialiser le contrôle

Dans l'événement "Form_Load" de la feuille où se trouve le contrôle. Ici, le contrôle a pour nom "Game1". C'est la méthode "DrawInit" qui se charge d'initialiser complètement le contrôle, et il est impératif de bien lancer cette commande avant toutes les autres. Cette méthode prend comme paramètre le hWnd de la feuille où il est posé :

Rem On place le contrôle en haut à gaucge
Call Game1.Move(0, 0)

Rem On lui donne la même taille que l'image
Rem de fond (240x198) que nous allons utiliser ensuite
Game1.Width = ScaleX(240, vbPixels, vbTwips)
Game1.Height = ScaleY(198, vbPixels, vbTwips)

Rem Initialisation du contrôle
Call Game1.DrawInit(Me.hWnd, 0, 0)

Etape 2 : Charger le fond

Nous allons ensuite charger le fond. C'est sur lui que les sprites seront dessinés. C'est la méthode "DrawBackgroundImage" qui charge le fond :

Rem Chargement du fond
Call Game1.DrawBackgroundImage(App.Path & "\fond.jpg", 0, 0)

Etape 3 : Créer les sprites

Petit rappel : Les sprites sont des dessins, qui peuvent être animées et qui sont gérés sous forme de plans, ce qui permet de créer des sprites qui passent dernière d'autres sprites, avec donc des zones transparentes.

Le sprite est créé a partir d'une image qui peut contenir, dans le cas d'une animation, la somme de toutes les images nécessaire à l'animation. J'ai repris dans les exemples fournis avec le contrôle le fichier star.gif qui est formé des 8 images de l'animation d'une étoile qui affiche en son centre les chiffres 1 à 8 pendant l'animation :

Les deux sprites que nous allons créer, utiliseront le même fichier d'image, "Star.gif". La création d'un sprite s'effectue avec la méthode "CreateSprite" qui prend comme paramètres le numéro du sprite (commence à zéro), le fichier d'image, les coordonnées (x,y) du coin suppérieur gauche de la première image de fichier d'image, la largeur et la hauteur du sprite à l'écran, le nombre de frames dans le fichier d'image, et le nombre de frames par ligne (si il y a plusieurs lignes dans le fichier d'image). Les sprites créés avec le fichier "star.gif" sont de taille 16x15 :

Rem Création du 1er Sprite
Call Game1.SpriteDefine(0, App.Path & "\star.gif", 0, 0, 16, 15, 8, 8)

Rem Création du 2ème Sprite
Call Game1.SpriteDefine(1, App.Path & "\star.gif", 0, 0, 16, 15, 8, 8)

Rem On définie la position en 20,20 du 1er sprite
Call Game1.SpriteSetPosition(0, 20, 20)

Rem On définie la position en 150,90 du 2ème sprite
Call Game1.SpriteSetPosition(1, 150, 90)

Rem Affichage des sprites
Game1.SpriteFrameRate(0) = 1
Game1.SpriteFrameRate(1) = 2
Call Game1.TimerStartTimer(50)

Rem On fait maintenant bouger les sprites, dans 2 directions différentes
Call Game1.SpriteSetDirection(0, 45, 5)
Call Game1.SpriteSetDirection(1, 135, 10)

Lors de la création d'un sprite, il faut utiliser la métode "SpriteSetPosition" pour le placer correctement à l'écran.

On indique aussi que le sprite n°1 (code 0) sera mis à jour à chaque échéance du timer central du contrôle, alors que le sprite n°2 (code 1) sera mis à jour toutes les 2 échéances du timer central. Pour cela, on utilise la propriété "SpriteFrameRate(Numero sprite)"

La méthode "TimerStartTimer" lance le timer central du contrôle, celui qui donne vie à tous les sprites que vous créez. La valeur 50 indique que le timer se déclenchera tous les 1000/50=20 fois par secondes.

Nos sprites sont par défaut immobiles. Avec la méthode "SpriteSetDirection" vous pouvez définir pour chaque sprite la direction qu'il doit prendre et à quelle vitesse. La direction est définie de la manière suivante :

et la vitesse est le nombre de pixels qui changent entre 2 étapes du déplacement (ici 5 pour le 1er sprite et 10 pour le 2ème).

Etape 4 : Répondre à l'événement de collision

A partir du moment où vous avez défini un comportement pour vos sprite (ici il sont animés tous les deux et se déplacent), le coeur du contrôle applique à chaque cycle toutes les modifications nécessaires.

Si on ne fait rien, nos 2 sprites vont très vite sortir de l'écran ! Il faut donc réagir en cas de collision avec l'un des bords de l'écran. Pour celà, le contrôle génère un événement particulier "SpriteCollisionEdge". Cet événement indique quel sprite est concerné par la collision, et quel bord de l'écran est en collision. Chaque bord de l'écran possède un numéro :

Dans le code qui suit, nous faisons en sorte que le sprite rebondisse sur les bords de l'écran :

Private Sub Game1_SpriteCollisionEdge(ByVal lSpriteNum As Long, ByVal iEdges As Long)

 Dim wAngle As Integer
 Dim wVelocity As Integer
         
 Call Game1.SpriteGetDirection(lSpriteNum, wAngle, wVelocity)
         
 Select Case iEdges
         
  Case 3, 2
   If wAngle = 45 Then
    wAngle = 315
   ElseIf wAngle = 135 Then
    wAngle = 225
   End If
         
  Case 7, 6
  If wAngle = 315 Then
   wAngle = 45
  ElseIf wAngle = 225 Then
   wAngle = 135
  End If
         
  Case 1, 8
   If wAngle = 315 Then
    wAngle = 225
   ElseIf wAngle = 45 Then
    wAngle = 135
   End If
         
  Case 5, 4
   If wAngle = 135 Then
    wAngle = 45
   ElseIf wAngle = 225 Then
    wAngle = 315
   End If
         
        
 End Select
         
 Call Game1.SpriteSetDirection(lSpriteNum, wAngle, wVelocity)

End Sub

Télécharger le programme d'exemple de cet article

Nous continuerons la gestion des sprites dans la 2ème partie.

Stéphane Sibué