10c.1 Une introduction au code Alice - Création d`Applis

ZONE D’APPRENTISSAGE DU CODAGE
CHAPITRE 10C APPRENDRE AVEC LE CODE D’ALICE
10c.1 Une introduction au code Alice
Jetez un œil au classement des appli-livres pour téléphone
portable de nos jours : on dirait que les livres interactifs à base
de physique sont partout. Mais lors du démarrage de l’iPad,
il n’y avait qu’une seule appli de ce genre, intitulée Alice for
the iPad (Alice pour l’iPad). Notre équipe, Atomic Antelope,
a créé Alice et nous en avons livré plus d’un demi-million de
copies. Même aujourd’hui, cela reste un des meilleurs exemples
de texte traditionnel transformé en expérience interactive.
Mais ce qui est le plus incroyable, ce qui va vraiment
vous intéresser, c’est que nous avons inclus un véritable
extrait du code source d’Alice dans ce didacticiel. Vous ne
rêvez pas ; vous allez mettre les mains sur le code d’une
appli qui est devenue un véritable bestseller. Le code que
nous allons vous montrer devrait être utile pour tous les
concepteurs d’appli, quel que soit le genre d’appli que
vous choisirez de créer. Non seulement s’aventurer dans
les coulisses d’une appli qui fut un vrai hit est une chance
inouïe, mais les techniques de simulation de la physique
décrites dans ce module vont aussi vous servir pour
d’autres genres d’appli. Et, avant tout, pour les jeux.
Alice utilise un moteur de simulation de physique intitulé
Chipmunk Physics. C’est un dépôt de sous-programmes
précodés créés par une équipe de programmeurs talentueux
de Howling Moon Software, dans le Minnesota. Leur code
permet d’automatiser un grand nombre de procédés qui
déterminent le comportement des objets dans une simulation
du monde physique. Chipmunk Physics et Cocos2d recueillent
des données de l’accéléromètre (le capteur qui se trouve
à l’intérieur de votre téléphone portable et qui envoie des
informations logicielles sur la façon dont l’appareil bouge
ou est orienté) et les utilisent pour agir sur le comportement
d’un monde virtuel. Avec certaines données – par exemple,
l’emplacement de pivots, d’épingles, d’élastiques et de ressorts
virtuels – Chipmunk simulera fidèlement le comportement
qu’adopteraient ces objets dans la réalité. Et le plus incroyable,
c’est que l’utilisation de Chipmunk est gratuite !
Si vous regardiez en détails comment fonctionne Alice, vous
découvririez un monde secret rempli de pivots et de ressorts
sur lesquels les dessins de l’appli sont accrochés. Mais avant de
plonger dans tout ce qui est vraiment technique, voyons voir
comment Alice est composé, d’un point de vue graphique.
Quand vous vous mettrez à créer votre propre appli, vous
trouverez sûrement certaines de nos astuces très utiles.
1
© 2012 Excel With Business
ZONE D’APPRENTISSAGE DU CODAGE
CHAPITRE 10C APPRENDRE AVEC LE CODE D’ALICE
10c.2 La conception d’Alice
L’art d’Alice sort tout droit des illustrations de
Sir John Tenniel dans le roman classique Alice
au pays des merveilles de Lewis Carroll. Il existe
des centaines d’autres livres qui font partie du
domaine public et dont vous pouvez vous inspirer
pour vos propres applis. Créer les dessins de l’appli
Alice nécessite quelques étapes à réaliser à l’aide de
Photoshop.
Tout d’abord, tous les éléments qui se déplacent
doivent être précautionneusement coupés et placés
sur des couches différentes. Ensuite, le décor à
l’arrière-plan a besoin d’être redessiné car sinon, il
risque d’y avoir un « trou » dans le dessin à l’endroit
où les objets en mouvement se trouvaient à l’origine.
Une fois que le décor de l’arrière-plan a été redessiné
sans les parties qui se déplacent, vous pouvez
exporter chaque couche en mouvement en tant
qu’image PNG avec de l’alpha (de la transparence)
tout autour. Le programmeur a désormais une
liberté totale pour attacher les graphismes aux objets
physiques et pour les faire se déplacer librement.
Demandez à votre programmeur si vous avez besoin
de plus de conseils sur la façon de livrer les images et
jeter un coup d’œil aux informations contenues dans
le Module 13 de ce cours.
2
© 2012 Excel With Business
ZONE D’APPRENTISSAGE DU CODAGE
10c.3 Comprendre le moteur Chipmunk
Le moteur Chipmunk Physics est particulièrement
intéressant car vous n’êtes limité que par votre
imagination. Voici un excellent moyen de s’en
rendre compte : imaginez une boîte gigantesque
de Lego Technic, remplie de pivots, de ressorts et
de câbles. C’est l’équivalent dans le monde réel de
ce dont Chipmunk est capable. Vous pouvez faire
des ébauches sur papier pour votre conception, ou
carrément vous représenter celle-ci avec des Lego
Technic. Si c’est possible dans le monde réel, alors
cela fonctionnera dans Chipmunk Physics. Votre
programmeur sera plus au courant de ses possibilités
étendues, mais imaginez plutôt : l’essentiel du
gameplay de véritables hits comme Angry Birds
pourraient être codés sur Chipmunk Physics en une
seule après-midi par un programmeur professionnel.
Ce logiciel est vraiment aussi puissant que ça.
Afin de profiter pleinement de Chipmunk, vous
allez devoir vous pencher sur les APIs (interfaces de
programmation) Cocoa Touch et des procédures plus
complexes de programmation telles que la gestion
de mémoire sous Objective-C. Vous avez le choix :
vous pouvez laisser ce travail à un programmeur
professionnel ou vous pouvez passer du temps à lire
la documentation Apple officielle qui est livrée avec
votre licence de développeur. Quant aux
instructions d’utilisation de Chipmunk
Physics, vous pourrez les trouver
sur http://code.google. com/p/
chipmunk-physics/
Même si vous avez
l’impression pour
le moment
d’être
CHAPITRE 10C APPRENDRE AVEC LE CODE D’ALICE
totalement perdu, vous devriez engranger des
informations utiles grâce à ce module. Même
si, au final, ces informations vous conduisent à
réaliser qu’il vous faut engager un programmeur
professionnel, vous économiserez le temps et l’argent
nécessaires à l’apprentissage d’un moteur physique.
Bien, mettons au clair ce à quoi sert Chipmunk.
Ce système de physique vous permet de définir
le comportement de ce qu’on appelle, dans un
monde où la physique est simulée, les « Corps
Rigides en 2D ». Ne sautez pas encore par la
fenêtre, nous savons que cela sonne complètement
indéchiffrable, mais ce n’est pas vraiment si
compliqué. Il existe quatre genres de dispositifs
physiques différents dans Chipmunk Physics :
• Les espaces (spaces)
• Les corps rigides (rigid bodies)
• Les formes de collision (collision shapes)
• Les collisions/articulations (constraints/joints)
Nous allons vous expliquer ce que
font chacun de ces dispositifs.
Les espaces
Vous l’avez peut-être deviné grâce au nom : un
« espace » est une zone dans laquelle se trouve un
« corps rigide » (voir ci-dessous). Lorsque vous
configurez un « espace », vous devez spécifier la
gravité de l’environnement simulé. Vous définissez
aussi les limites de la zone dans laquelle les « corps
rigides » existent. Tout cela paraîtra beaucoup plus
évident une fois que nous commencerons à analyser
l’échantillon de code plus tard dans ce module.
Les corps rigides
Un corps rigide est une liste de propriétés
attachées à un objet. Par exemple, la masse,
le fonctionnement rotatif, l’inertie, etc.
Toutefois, une distinction importante
à noter est qu’un corps rigide ne
3
© 2012 Excel With Business
ZONE D’APPRENTISSAGE DU CODAGE
possède ni forme, ni dimensions. C’est un ensemble
de propriétés qu’il est ensuite possible d’accrocher
à un objet solide dans le monde physique. Ces
objets solides sont appelés des formes de collision.
Les Formes de Collision
Bien, inspirez bien fort : on va parler un peu de
science. Une Forme de Collision est l’objet physique
qui reprend les propriétés décrites par un Corps
Rigide. En d’autres termes, lorsque vous liez une
Forme de Collision et un Corps Rigide, vous vous
retrouvez avec un objet de l’univers de physique
simulé qui se comporte comme un objet dans la
vraie vie. Les Formes de Collision décrivent aussi
les propriétés de surface d’un objet. La friction
et l’élasticité, par exemple. Dans la Scène de la
Confiture d’Alice (sur laquelle nous nous pencherons
dans un instant), le pot de confiture tombe de la
page et se brise en atteignant le bord de l’écran. Le
pot est une image accrochée à une forme de collision
qui correspond géométriquement aux contours de
l’image. Celle-ci est ensuite reliée à un Corps Rigide
qui décrit des choses telles que la masse du pot.
CHAPITRE 10C APPRENDRE AVEC LE CODE D’ALICE
Docs/. Vous devrez certainement la lire avant
d’être capable de déchiffrer l’échantillon du code
d’Alice, l’une des applis les plus célèbres sur iOS.
La scène du Pot de Confiture
Nous allons décortiquer une véritable scène
fonctionnelle de la célèbre appli Alice for the iPad.
Tout d’abord, visionnez la vidéo de ce module, puis
ouvrez les fichiers d’exemple. Pour commencer,
localiser l’emplacement du fichier Falling.h ; ceci est
le nom arbitraire qui a été choisi pour la scène du Pot
de Confiture. Ce fichier importe les bibliothèques
de code nécessaires pour cette scène, et le fichier .h
est le même pour toutes les scènes de l’appli. Vous
remarquerez que l’appli extrait des bibliothèques
de code dont la page a besoin pour exécuter son
code : Foundation.h, cocos2d.h (les bibliothèques
cocos2d), Chipmunk.h (les bibliothèques
Chipmunk Physics), Constants.h (le fichier de
configuration de l’appli), et PhysicsContent.h
Vous devez donc commencer à réaliser qu’en fait,
les images de Photoshop ne se cognent pas les unes
aux autres dans le monde physique. En réalité, ce
qui se passe, c’est que ce sont les Formes de Collision
et les Espaces qui se cognent derrière les images.
Les Collisions et les Articulations
Les collisions et les articulations sont des dispositifs
qui précisent si les Corps Rigides sont de type
glisser, pivot, bousculer ou ressort. En regardant un
peu les scènes de Alice for the iPad, vous pouvez
deviner quels types de pivots et d’articulations
sont utilisés dans les différentes scènes.
10c.4 Coder avec Chipmunk
Nous vous livrons plein de nouvelles informations
à toute vitesse, alors n’hésitez pas à ralentir
un peu et à vous procurer la documentation
de Chipmunk, téléchargeable sur : http://files.
slembcke. net/chipmunk/release/ChipmunkLatest-
4
© 2012 Excel With Business
ZONE D’APPRENTISSAGE DU CODAGE
CHAPITRE 10C APPRENDRE AVEC LE CODE D’ALICE
– Nous allons examiner le code étape par étape. Allez-y, vous pouvez jeter un œil au contenu de Falling.h :
#import “cocos2d.h”
#import “chipmunk.h”
#import “Constants.h”
#import “PhysicsContent.h”
@interface Falling : PhysicsContent {
Ce fichier recense toutes les
ressources utilisées par la scène.
Vous pouvez voir que la scène
appelle les bibliothèques Cocos2d
ainsi que Chipmunk Physics, puis
qu’elle référence deux fichiers
que nous avons créés pour
définir des parties de l’appli.
}
@end
Figure 10c.1...
Puis, maintenant, au contenu de Falling.m:
#import “Falling.h”
@implementation Falling
-(id)init{
self = [super init];
if(nil != self){
Cela permet de définir les
propriétés du corps rigide
du pot de confiture.
CGSize size = [[CCDirector sharedDirector] winSize];
cpBody *zeroBody = cpBodyNew(INFINITY, INFINITY);
zeroBody->p = cpvzero;
5
© 2012 Excel With Business
ZONE D’APPRENTISSAGE DU CODAGE
CHAPITRE 10C APPRENDRE AVEC LE CODE D’ALICE
cpShape *wallShape = cpSegmentShapeNew(zeroBody,
cpv(0,0), cpv(0,size.height), 5);
wallShape->e = 0.5;
wallShape->u = 1.0;
cpSpaceAddStaticShape(space, wallShape);
wallShape = cpSegmentShapeNew(zeroBody, cpv(0,size.
height), cpv(size.width,size.height), 5);
wallShape->e = 0.5;
wallShape->u = 1.0;
cpSpaceAddStaticShape(space, wallShape);
wallShape = cpSegmentShapeNew(zeroBody, cpv(size.
width,size.height), cpv(size.width,0), 5);
wallShape->e = 0.5;
wallShape->u = 1.0;
cpSpaceAddStaticShape(space, wallShape);
wallShape = cpSegmentShapeNew(zeroBody, cpv(size.width,0), cpv(0,0), 5);
wallShape->e = 0.5;
wallShape->u = 1.0;
cpSpaceAddStaticShape(space, wallShape);
Ce code décrit les « murs » qui servent de frontières pour entourer la
page afin d’empêcher que le pot de confiture ne glisse hors de l’écran de
l’iPad et dans un vide infini. De nombreuses pages d’Alice sont entourées
par des murs invisibles afin de garder les objets sur la page.
CCSprite *marmalade= [CCSprite spriteWithFile:@”marmalade.png”];
[marmalade setPosition:CGPointMake(550, 700)];
[self addChild:marmalade z:-1];
Ce code va chercher les sprites graphiques
du pot de confiture et les accroche à un
objet de notre monde physique.
6
© 2012 Excel With Business
ZONE D’APPRENTISSAGE DU CODAGE
CHAPITRE 10C APPRENDRE AVEC LE CODE D’ALICE
cpVect marmaladeVerts[] = {
cpv(-marmalade.contentSize.width/2,-marmalade.contentSize.height/2),
cpv(-marmalade.contentSize.width/2, marmalade.contentSize.height/2),
cpv( marmalade.contentSize.width/2, marmalade.contentSize.height/2),
cpv( marmalade.contentSize.width/2,-marmalade.contentSize.height/2),
};
Ce code décrit la forme du pot en vertex ; cela permet à Chipmunk Physics de
connaître ses dimensions, mais attention : Chipmunk Physics ignore complètement
les images que vous accrochez à vos objets physiques. Le moteur ne peut voir
que les Formes et les Corps Rigides auxquels vous accrochez les images.
cpFloat mass = 5;
cpBody *marmaladeBody = cpBodyNew(mass,
cpMomentForPoly(mass, 4, marmaladeVerts, cpvzero));
marmaladeBody->p = cpv(570, 700);
cpSpaceAddBody(space, marmaladeBody);
Ce code spécifie le Corps Rigide du pot de
confiture, c’est-à-dire ses propriétés physiques.
cpShape *shape = cpPolyShapeNew(marmaladeBody, 4, marmaladeVerts, cpvzero);
shape->e = 0.3; shape->u = 1.0;
shape->data=marmalade;
cpSpaceAddShape(space, shape);
}
return self;
}
-(void)dealloc{
[super dealloc];
Ce code donne comme consigne à Chipmunk
Physics d’utiliser les vertex que nous avons définis
et donne à l’objet une forme dans l’univers de
Chipmunk. Félicitations ! Vous venez de réussir
votre première appli Chipmunk Physics !
}
@end
7
Figure 10c.2...
© 2012 Excel With Business