XebiCon'18 - Comment j'ai développé un jeu vidéo avec des outils de développement web ?

@Xebiconfr #Xebicon18 @alxdergham
Build the future
Comment j'ai développé un jeu vidéo avec des outils de développement web ?
Alexandre Dergham, développeur full stack

Qui suis-je ?
Alexandre Dergham
Développeur full stack

Comment j'ai développé un jeu vidéo avec des outils de
développement web ?

Quelles étaient mes motivations ?

Quelles étaient mes motivations ?
5

Features du jeu

Features du jeu : 2 rôles
7

Features du jeu : Jeu de rôle
8

Features du jeu : mono-joueur, tour à tour
9

Features du jeu : offline
10

Features du jeu : offline
11

Features du jeu : affichage
12

Features du jeu : repérage
13

Features du jeu : édition de contenu
14

Features du jeu : éditeur de niveau
15

Features du jeu : Le jeu !
16

Features du jeu : Le jeu !
17

Solutions techniques

Solutions techniques : Architecture
BDD
Back-end
Jeu
(Web)
Editeur de
niveaux
(Web)
19

Solutions techniques : Front-end du jeu (Avant)
20

Solutions techniques : Front-end du jeu (5 ans après)
21

Solutions techniques : Front-end (Éditeur de niveaux)
22

Solutions techniques : Back-end
23

Conception technique
de l’appli web

Conception technique : Au départ...
Service A
Controller 2
Controller 1
Service B
Service D
Service C
HTML
Directive X
Directive Y
Service E
Service F
Ecran Section d’écran Modèle
25

Conception technique : … et maintenant
Service A
Composant 2
Composant 3
Composant 1
Service B
Service D
Service C
Ecran Section d’écran Modèle
Composant 4 Composant 5
26
Module X
Module Z
Module Y
Module D

Conception technique : … et maintenant
27
ScreensModule
SceneDisplayModule GameModule

Conception technique : Affichage de la scène de jeu
28
Controller 1
Controller 2
Controller 3
SceneDisplayComponent
Service
Service
Service

Conception technique : Services stateful
29
SceneDisplayComponent
Service
Service
Service
@Component({
selector: 'scene-display',
providers: [
SceneDisplayService,
CameraBuilderService,
SpriteServiceService,
…
],
})
export class SceneDisplayComponent { … }

Conception technique : Timeline
30
AngularJs
1.2
AngularJs
1.3
Angular 4 Angular 5
HTML
CSS
BabylonJS
MVC
GameEngine
GameDesign Components
Framework
Affichage
Design
04/11/2013
01/2016
03/2016
AngularJs
1.4
05/2017 01/2018

Méthodologie
(Mine)Craftsmanship

Méthodologie : TDD
32

Méthodologie : E2E
33

Challenges techniques

Challenges techniques : Gestion du son et événements
35

36
AudioFXComponent
AudioService
Subscribe PlaySound
RequestPlaySound
RxJS

@Injectable()
export class AudioService {
public lastPlayedFXSource = new Subject<string>();
public lastPlayedFXChanged$ = this.lastPlayedFXSource.asObservable();
public playSound(fxPath: string): Promise<boolean> {
this.lastPlayedFXSource.next(fxPath);
}
}
37

@Component({ … })
export class AudioFXComponent implements AfterViewInit, OnDestroy {
private subscription: Subscription;
constructor(private audioService: AudioService) {}
public ngAfterViewInit (): void {
this.subscription = this.audioService.lastPlayedFXChanged$.subscribe(
(currentSoundFX) => this.playSound(currentSoundFX));
}
38

Challenges techniques : Ajout et réutilisation de contenu
39
Game engine
Game
design

40
CharacterSkillService
Skill
Fireball Heal
Design Pattern
Strategy
useSkill(actor, target)
useSkill(actor, target) useSkill(actor, target)

@Injectable()
export class HealSpell extends Skill {
public use (actor: Actor, target: Actor) : void {
target.health += actor.spellPower;
actor.mana -= 10;
}
}
41

@Injectable()
export class FireballSpell extends Skill {
public use (actor: Actor, target: Actor) : void {
target.health -= actor.spellPower;
actor.mana -= 20;
}
}
42

@NgModule({
providers: [
{provide: 'HealSpell', useClass: HealSpell},
{provide: 'FireballSpell', useClass: FireballSpell},
})
export class SkillsModule {}
43

@Injectable()
export class CharacterSkillsService {
public constructor ( private injector: Injector) {}
public useSkill (skillName: string, actor: Actor, target: Actor) : void {
const skill: Skill = this.injector.get(skillName);
skill.use(actor, target);
}
}
44

Challenges techniques : Injection de dépendances
45
CombatService
DispelMagic
CombatService

Challenges techniques : Dépendances cycliques
46
CombatService
DispelMagic
CombatService
This.injector.get(‘DispelMagic’)

Challenges techniques : Parseurs pour le game design
47

48

49

Challenges techniques : Level design
50

Challenges techniques : Level design
51

Challenges techniques : Gestion de la mise à jour du modèle
52

Challenges techniques : Gestion de la mise à jour du modèle
@Injectable()
export class PointerActionService {
public constructor ( private zone: NgZone) {}
public initPointerMove (sceneDisplay: SceneDisplay) : void {
sceneDisplay.scene.onPointerMove = (evt) => {
this.zone.runOutsideAngular(() => {
…
});
};
53

Challenges techniques : Migration AngularJS -> Angular5
54

Challenges techniques : Migration AngularJS -> Angular5
55
$scope.$emit
$scope.$on
RxJS
Service @Injectable
Directive
@Component
Controller
8 mois!!

Conclusion

Conclusion : Quels outils pour quels besoins ?
57

58
Injection de dépendances
Gestion d’événements
BrowserAnimationModule
ZoneJS

59
Gestion du model avec
Redux
Simplicité de mise en place

60
Enregistrement de
document JSON
Simplicité de mise en place

Conclusion : Les compétences acquises
61

62

63

Conclusion : La suite
64

65
BDD
Back-end
Jeu
(Web)
Editeur de
niveaux
(Web)

66

@Xebiconfr #Xebicon18 @alxdergham 67

XebiCon'18 - Comment j'ai développé un jeu vidéo avec des outils de développement web ?

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (11)

Semelhante a XebiCon'18 - Comment j'ai développé un jeu vidéo avec des outils de développement web ?

Semelhante a XebiCon'18 - Comment j'ai développé un jeu vidéo avec des outils de développement web ? (19)

Mais de Publicis Sapient Engineering

Mais de Publicis Sapient Engineering (20)

XebiCon'18 - Comment j'ai développé un jeu vidéo avec des outils de développement web ?