Voici un tutoriel expliqué pas à pas pour les débutants sur le SDK Iphone
Si vous comprenez parfaitement l'anglais allez directement ici :
http://www.iphonegamekit.com/how-to-program-a-d-pad-joystick-for-iphone/
Donc, vous voulez apprendre à programmer un "D-pad" en forme de joystick tactile ou stick directionnel pour votre jeu/application iPhone hein ? Très bien. Nous allons commencer.
Etape 1 : Votre "Joystick"
La première chose à faire est de créer votre Joystick/stick directionnel. Utilisez votre éditeur graphique préféré (le mien est Photoshop) et essayez d'arriver à quelque chose comme ceci :
http://img15.hostingpics.net/pics/840591joystickdpad2.png
Ceci est une photo des deux éléments de la manette disposés l'un à côté de l'autre.
Le premier élément est l'arrière-plan, le "D-pad", qui a des flèches haut/bas/droite/gauche.
Le second est le bouton de la manette qui se déplace avec le pouce.
Si vous êtes maniaque sur les bords, n'hésitez pas à recadrer ces éléments de l'image.
Etape 2 : Intégration de votre Joystick
À ce stade, vous allez avoir besoin d'un moteur de jeu de travail. Je recommande fortement Cocos2d parce qu'il est facile à utiliser et possède beaucoup de soutien de son auteur (son nom est Ricardo) et la communauté Cocos2D.
A noter cependant que Cocos2D a été conçu au préalable sur MAC OS !!
Si vous êtes sur windows, cliquez sur le lien à la fin de ce tuto.
Une fois que vous avez un moteur de jeu, vous allez également avoir besoin d'un code de jeu de base pour commencer. Si vous êtes nouveau à tout cela, vous pouvez télécharger le code source du jeu iPhone Quexlor Lite et l'utiliser comme base pour votre propre jeu.
Maintenant que vous avez un jeu à travailler, la première chose que nous devons faire est d'ajouter quelques variables membres de notre Heads-Up Display Layer (HUD):
Ensuite, on intègre la partie graphique du Joystick que vous avez créé sur Photoshop :
La partie "graphique" est intégrée en utilisant une fonction de Cocos2D nommée SpriteWithFile. Cette méthode renvoie un pointeur CCSprite que nous retenons (et la libération dans le dealloc).
Le bouton de la manette est placée au-dessus de celle-ci, prêt à nous déplacer grâce à notre pouce.
Etape 3 : La finalisation
On règle l'opacité de chaque élément de la manette à zéro (ce qui fait qu'il devient transparent) et de le faire disparaître puis le faire clignoter lorsque le jeu démarre en utilisant le code suivant:
Ceci lance une séquence d'actions:
1) Un délai d'une seconde et demie
2) Une disparition pour 75% d'opacité sur une seconde et demie.
3) Clignote trois fois sur les deux tiers d'une seconde.
Etape 4 : Interactions tactiles & Interprétation
Afin de déplacer le bouton de la manette, nous devons répondre à des événements tactiles. Voici un exemple de code qui fait cela :
Quand on touche d'abord l'écran de l'iPhone, on obtient le message ccTouchBegan. Tant qu'on est encore en contact avec l'écran, on continue à faire passer le message ccTouchMoved.
Lorsque l'on retire le doigt de la surface, on obtient ccTouchEnded.
La fonction ccTouchBegan est la pièce maîtresse du programme. On vérifie essentiellement pour voir si le point de contact est dans les limites de l'arrière-plan de la manette en utilisant la fonction isTouchingJoybtn, et si c'est le cas, on stocke les informations sur l'écran tactile et on commence à actionner le bouton de la manette.
Etape 5 : Prise en compte du théorème de Pythagore (eh oui, des maths !)
Vu que l'arrière-plan de la manette est un cercle, on a besoin d'un code spécial pour déterminer si le pouce est en contact avec elle. Un test avec un rectangle serait beaucoup trop carré. Heureusement, on peut déployer une équation géométrique simple pour nous aider. Tout le monde se souviens de la relation AC² = AB² + BC² ?
Dans notre cas, A est la distance X du pouce au centre du joystick, B est la distance Y et C est la distance en diagonale (ou rayon).
La fonction distanceFromJoypadSquared calcule simplement ce rayon. On utilise ensuite dans la fonction isTouchingJoybtn pour finalement déterminer OUI ou NON si le pouce est en contact avec le joystick :
Etape 6 : Déplacer le stick directionnel
Lorsque l'on déplace le bouton de la manette, il faut :
1) S'assurer que le bouton de la manette ne se déplace pas en dehors des limites du fond de la manette.
2) stocker la valeur de l'angle et la distance du bouton de la manette afin qu'on puisse l'utiliser pour contrôler notre principal caractère.
La fonction Joybtn de déplacement commence par le calcul de la position de contact précédent et le décalage de la position de contact de courant.
On ajoute ensuite le décalage de la position du bouton de la manette de jeu actuelle pour calculer le delta, ou la nouvelle position du bouton de manette de jeu souhaitée.
L'angle de ce delta est ensuite enregistré pour plus tard et le bouton de la manette de commande est fixée dans les limites de l'arrière-plan de la manette de commande.
Etape 7 : Test !
On a maintenant une variable particulière qui va s'avérer assez pratique lorsque l'on veut déplacer le personnage principal autour de l'écran. Cette variable est appelée joybtnAngle.
Cet angle peut être utilisé pour déplacer en douceur le personnage à l'écran (comme dans la vidéo ci-dessous) ou il peut être «cassé» à l'une des huit directions possibles afin de donner à votre jeu un toucher plus rétro D-pad.
Vous pouvez télécharger le code source complet sur le jeu QuexlorLite pour voir ce joystick en action.
Enjoy !
Vidéo du joystick ici : http://www.youtube.com/watch?feature=player_embedded&v=IS5Er0q51Bc
Logiciel nécessaire : - Cocos2D -> http://www.cocos2d-iphone.org/download
Si vous êtes sur windows, suivez ce tuto :
http://www.avid-insight.co.uk/2010/07/installing-cocos2d-on-windows-7/
NOTE : J'ai traduit tout le tuto en m'aidant de Google et en corrigeant le plus possible pour le rendre un minimum compréhensible. Si besoin, n'hésitez pas à éditer mon post !
Pourquoi avoir fait ça ? Afin de divulguer ce tutoriel le mieux possible ! C'est le seul tuto clair que j'ai pu trouvé !
Dans quelques années/mois, le tuto risque d'être effacé due à un problème technique ou parce que le site hébergeur pourrait fermer un jour ou l'autre.
J'ai donc décidé de lui fournir un "lien de secours"
Modifié par cameron69210 (02 May 2013 - 12:55)
Si vous comprenez parfaitement l'anglais allez directement ici :
http://www.iphonegamekit.com/how-to-program-a-d-pad-joystick-for-iphone/
Donc, vous voulez apprendre à programmer un "D-pad" en forme de joystick tactile ou stick directionnel pour votre jeu/application iPhone hein ? Très bien. Nous allons commencer.
Etape 1 : Votre "Joystick"
La première chose à faire est de créer votre Joystick/stick directionnel. Utilisez votre éditeur graphique préféré (le mien est Photoshop) et essayez d'arriver à quelque chose comme ceci :
http://img15.hostingpics.net/pics/840591joystickdpad2.png
Ceci est une photo des deux éléments de la manette disposés l'un à côté de l'autre.
Le premier élément est l'arrière-plan, le "D-pad", qui a des flèches haut/bas/droite/gauche.
Le second est le bouton de la manette qui se déplace avec le pouce.
Si vous êtes maniaque sur les bords, n'hésitez pas à recadrer ces éléments de l'image.
Etape 2 : Intégration de votre Joystick
À ce stade, vous allez avoir besoin d'un moteur de jeu de travail. Je recommande fortement Cocos2d parce qu'il est facile à utiliser et possède beaucoup de soutien de son auteur (son nom est Ricardo) et la communauté Cocos2D.
A noter cependant que Cocos2D a été conçu au préalable sur MAC OS !!
Si vous êtes sur windows, cliquez sur le lien à la fin de ce tuto.
Une fois que vous avez un moteur de jeu, vous allez également avoir besoin d'un code de jeu de base pour commencer. Si vous êtes nouveau à tout cela, vous pouvez télécharger le code source du jeu iPhone Quexlor Lite et l'utiliser comme base pour votre propre jeu.
Maintenant que vous avez un jeu à travailler, la première chose que nous devons faire est d'ajouter quelques variables membres de notre Heads-Up Display Layer (HUD):
// in Hud.h
@interface HudLayer : CCLayer
{
CCSprite* joypad,*joybtn,
CGPoint touchPos;
float joybtnDistSquared,joybtnAngle;
BOOL isMovingJoybtn;
}Ensuite, on intègre la partie graphique du Joystick que vous avez créé sur Photoshop :
-(id) init
{
self = [super init];
if(self != nil)
{
// set this so we can register with touch dispatcher
isTouchEnabled = YES;
// load our joystick background
joypad = [[CCSprite spriteWithFile:@"joypad.png"] retain];
joypad.position = ccp(70,70);
joypad.opacity = 0;
[self addChild:joypad z:1];
// load joypad button
joybtn = [[CCSprite spriteWithFile:@"joybtn.png"] retain];
joybtn.position = ccp(70,70);
joybtn.opacity = 0;
[self addChild:joybtn z:2];
}
return self;
}La partie "graphique" est intégrée en utilisant une fonction de Cocos2D nommée SpriteWithFile. Cette méthode renvoie un pointeur CCSprite que nous retenons (et la libération dans le dealloc).
Le bouton de la manette est placée au-dessus de celle-ci, prêt à nous déplacer grâce à notre pouce.
Etape 3 : La finalisation
On règle l'opacité de chaque élément de la manette à zéro (ce qui fait qu'il devient transparent) et de le faire disparaître puis le faire clignoter lorsque le jeu démarre en utilisant le code suivant:
[joypad runAction:[CCSequence actions:
[CCDelayTime actionWithDuration:1.5f],
[CCFadeTo actionWithDuration:1.5f opacity:192],
[CCBlink actionWithDuration:0.66f blinks:3],
nil]];Ceci lance une séquence d'actions:
1) Un délai d'une seconde et demie
2) Une disparition pour 75% d'opacité sur une seconde et demie.
3) Clignote trois fois sur les deux tiers d'une seconde.
Etape 4 : Interactions tactiles & Interprétation
Afin de déplacer le bouton de la manette, nous devons répondre à des événements tactiles. Voici un exemple de code qui fait cela :
-(BOOL) ccTouchBegan [decu]UITouch*)touch withEvent [decu]UIEvent*)event
{
// started touching somewhere in the joystick pad?
if( !isMovingJoybtn && [self isTouchingJoybtn:touch] )
{
touchPos = joypad.position;
// initially move the joystick button to touch point
[self moveJoybtn:touch];
// we are now moving the joystick button
isMovingJoybtn = YES;
}
// returning YES means we claim the touch
// (always return YES because we want to claim
// touching the whole screen when player dies)
return YES;
}
-(void) ccTouchMoved [decu]UITouch*)touch withEvent [decu]UIEvent*)event
{
// keep moving the joystick button
if( isMovingJoybtn )
[self moveJoybtn:touch];
}
-(void) ccTouchEnded [decu]UITouch*)touch withEvent [decu]UIEvent*)event
{
// stop moving joystick
[self stop];
}
-(void) ccTouchCancelled [decu]UITouch*)touch withEvent [decu]UIEvent*)event
{
// stop moving joystick
[self stop];
}Quand on touche d'abord l'écran de l'iPhone, on obtient le message ccTouchBegan. Tant qu'on est encore en contact avec l'écran, on continue à faire passer le message ccTouchMoved.
Lorsque l'on retire le doigt de la surface, on obtient ccTouchEnded.
La fonction ccTouchBegan est la pièce maîtresse du programme. On vérifie essentiellement pour voir si le point de contact est dans les limites de l'arrière-plan de la manette en utilisant la fonction isTouchingJoybtn, et si c'est le cas, on stocke les informations sur l'écran tactile et on commence à actionner le bouton de la manette.
Etape 5 : Prise en compte du théorème de Pythagore (eh oui, des maths !)
Vu que l'arrière-plan de la manette est un cercle, on a besoin d'un code spécial pour déterminer si le pouce est en contact avec elle. Un test avec un rectangle serait beaucoup trop carré. Heureusement, on peut déployer une équation géométrique simple pour nous aider. Tout le monde se souviens de la relation AC² = AB² + BC² ?
Dans notre cas, A est la distance X du pouce au centre du joystick, B est la distance Y et C est la distance en diagonale (ou rayon).
La fonction distanceFromJoypadSquared calcule simplement ce rayon. On utilise ensuite dans la fonction isTouchingJoybtn pour finalement déterminer OUI ou NON si le pouce est en contact avec le joystick :
-(CGFloat) distanceFromJoypadSquared [decu]CGPoint)p
{
// remember a squared + b squared = c squared?
return ccpLengthSQ(ccpSub(p, joypad.position));
}
-(BOOL) isTouchingJoybtn [decu]UITouch*)touch
{
// the joypad is a circle, so return yes if
// distance from center is less than radius
CGFloat c2 = [self distanceFromJoypadSquared:touchToPoint(touch)];
return (c2 < kJoypadRadiusSquared);
}Etape 6 : Déplacer le stick directionnel
Lorsque l'on déplace le bouton de la manette, il faut :
1) S'assurer que le bouton de la manette ne se déplace pas en dehors des limites du fond de la manette.
2) stocker la valeur de l'angle et la distance du bouton de la manette afin qu'on puisse l'utiliser pour contrôler notre principal caractère.
-(void) moveJoybtn [decu]UITouch*)touch
{
// get previous touch point and determine offset
CGPoint prev = (isMovingJoybtn ? touchToPreviousPoint(touch) : joybtn.position);
CGPoint offset = ccpSub(touchToPoint(touch), prev);
if( offset.x || offset.y )
{
// get new purported joybtn position and delta to joypad center
touchPos = ccpAdd(touchPos, offset);
CGPoint delta = ccpSub(touchPos, joypad.position);
CGPoint newPos = touchPos;
// get its angle and distance
joybtnAngle = ccpToAngle(delta);
joybtnDistSquared = [self distanceFromJoypadSquared:newPos];
// clamp it inside the joypad
if( joybtnDistSquared > kJoypadRadiusSquared )
{
newPos = ccpAdd(joypad.position,
ccpMult(ccpForAngle(joybtnAngle), kJoypadRadius));
joybtnDistSquared = kJoypadRadiusSquared;
}
// set it to the new position
[joybtn setPosition:newPos];
}
}
-(void) stop
{
isMovingJoybtn = NO;
joybtn.position = joypad.position;
}La fonction Joybtn de déplacement commence par le calcul de la position de contact précédent et le décalage de la position de contact de courant.
On ajoute ensuite le décalage de la position du bouton de la manette de jeu actuelle pour calculer le delta, ou la nouvelle position du bouton de manette de jeu souhaitée.
L'angle de ce delta est ensuite enregistré pour plus tard et le bouton de la manette de commande est fixée dans les limites de l'arrière-plan de la manette de commande.
Etape 7 : Test !
On a maintenant une variable particulière qui va s'avérer assez pratique lorsque l'on veut déplacer le personnage principal autour de l'écran. Cette variable est appelée joybtnAngle.
Cet angle peut être utilisé pour déplacer en douceur le personnage à l'écran (comme dans la vidéo ci-dessous) ou il peut être «cassé» à l'une des huit directions possibles afin de donner à votre jeu un toucher plus rétro D-pad.
Vous pouvez télécharger le code source complet sur le jeu QuexlorLite pour voir ce joystick en action.
Enjoy !
Vidéo du joystick ici : http://www.youtube.com/watch?feature=player_embedded&v=IS5Er0q51Bc
Logiciel nécessaire : - Cocos2D -> http://www.cocos2d-iphone.org/download
Si vous êtes sur windows, suivez ce tuto :
http://www.avid-insight.co.uk/2010/07/installing-cocos2d-on-windows-7/
NOTE : J'ai traduit tout le tuto en m'aidant de Google et en corrigeant le plus possible pour le rendre un minimum compréhensible. Si besoin, n'hésitez pas à éditer mon post !
Pourquoi avoir fait ça ? Afin de divulguer ce tutoriel le mieux possible ! C'est le seul tuto clair que j'ai pu trouvé !
Dans quelques années/mois, le tuto risque d'être effacé due à un problème technique ou parce que le site hébergeur pourrait fermer un jour ou l'autre.
J'ai donc décidé de lui fournir un "lien de secours"
Modifié par cameron69210 (02 May 2013 - 12:55)
afin d'obtenir des liens de ce genre : 
