Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
@Xebiconfr #Xebicon18 @alxdergham
Build the future
Comment j'ai développé un jeu vidéo avec des outils de développement we...
@Xebiconfr #Xebicon18 @alxdergham
Qui suis-je ?
Alexandre Dergham
Développeur full stack
@Xebiconfr #Xebicon18 @alxdergham
Comment j'ai développé un jeu vidéo avec des outils de
développement web ?
@Xebiconfr #Xebicon18 @alxdergham
Quelles étaient mes motivations ?
@Xebiconfr #Xebicon18 @alxdergham
Quelles étaient mes motivations ?
5
@Xebiconfr #Xebicon18 @alxdergham
Features du jeu
@Xebiconfr #Xebicon18 @alxdergham
Features du jeu : 2 rôles
7
@Xebiconfr #Xebicon18 @alxdergham
Features du jeu : Jeu de rôle
8
@Xebiconfr #Xebicon18 @alxdergham
Features du jeu : mono-joueur, tour à tour
9
@Xebiconfr #Xebicon18 @alxdergham
Features du jeu : offline
10
@Xebiconfr #Xebicon18 @alxdergham
Features du jeu : offline
11
@Xebiconfr #Xebicon18 @alxdergham
Features du jeu : affichage
12
@Xebiconfr #Xebicon18 @alxdergham
Features du jeu : repérage
13
@Xebiconfr #Xebicon18 @alxdergham
Features du jeu : édition de contenu
14
@Xebiconfr #Xebicon18 @alxdergham
Features du jeu : éditeur de niveau
15
@Xebiconfr #Xebicon18 @alxdergham
Features du jeu : Le jeu !
16
@Xebiconfr #Xebicon18 @alxdergham
Features du jeu : Le jeu !
17
@Xebiconfr #Xebicon18 @alxdergham
Solutions techniques
@Xebiconfr #Xebicon18 @alxdergham
Solutions techniques : Architecture
BDD
Back-end
Jeu
(Web)
Editeur de
niveaux
(Web)
19
@Xebiconfr #Xebicon18 @alxdergham
Solutions techniques : Front-end du jeu (Avant)
20
@Xebiconfr #Xebicon18 @alxdergham
Solutions techniques : Front-end du jeu (5 ans après)
21
@Xebiconfr #Xebicon18 @alxdergham
Solutions techniques : Front-end (Éditeur de niveaux)
22
@Xebiconfr #Xebicon18 @alxdergham
Solutions techniques : Back-end
23
@Xebiconfr #Xebicon18 @alxdergham
Conception technique
de l’appli web
@Xebiconfr #Xebicon18 @alxdergham
Conception technique : Au départ...
Service A
Controller 2
Controller 1
Service B
Servic...
@Xebiconfr #Xebicon18 @alxdergham
Conception technique : … et maintenant
Service A
Composant 2
Composant 3
Composant 1
Ser...
@Xebiconfr #Xebicon18 @alxdergham
Conception technique : … et maintenant
27
ScreensModule
SceneDisplayModule GameModule
@Xebiconfr #Xebicon18 @alxdergham
Conception technique : Affichage de la scène de jeu
28
Controller 1
Controller 2
Control...
@Xebiconfr #Xebicon18 @alxdergham
Conception technique : Services stateful
29
SceneDisplayComponent
Service
Service
Servic...
@Xebiconfr #Xebicon18 @alxdergham
Conception technique : Timeline
30
AngularJs
1.2
AngularJs
1.3
Angular 4 Angular 5
HTML
...
@Xebiconfr #Xebicon18 @alxdergham
Méthodologie
(Mine)Craftsmanship
@Xebiconfr #Xebicon18 @alxdergham
Méthodologie : TDD
32
@Xebiconfr #Xebicon18 @alxdergham
Méthodologie : E2E
33
@Xebiconfr #Xebicon18 @alxdergham
Challenges techniques
@Xebiconfr #Xebicon18 @alxdergham
Challenges techniques : Gestion du son et événements
35
@Xebiconfr #Xebicon18 @alxdergham
Challenges techniques : Gestion du son et événements
36
AudioFXComponent
AudioService
Su...
@Xebiconfr #Xebicon18 @alxdergham
Challenges techniques : Gestion du son et événements
@Injectable()
export class AudioSer...
@Xebiconfr #Xebicon18 @alxdergham
Challenges techniques : Gestion du son et événements
@Component({ … })
export class Audi...
@Xebiconfr #Xebicon18 @alxdergham
Challenges techniques : Ajout et réutilisation de contenu
39
Game engine
Game
design
@Xebiconfr #Xebicon18 @alxdergham
Challenges techniques : Ajout et réutilisation de contenu
40
CharacterSkillService
Skill...
@Xebiconfr #Xebicon18 @alxdergham
Challenges techniques : Ajout et réutilisation de contenu
@Injectable()
export class Hea...
@Xebiconfr #Xebicon18 @alxdergham
Challenges techniques : Ajout et réutilisation de contenu
@Injectable()
export class Fir...
@Xebiconfr #Xebicon18 @alxdergham
Challenges techniques : Ajout et réutilisation de contenu
@NgModule({
providers: [
{prov...
@Xebiconfr #Xebicon18 @alxdergham
Challenges techniques : Ajout et réutilisation de contenu
@Injectable()
export class Cha...
@Xebiconfr #Xebicon18 @alxdergham
Challenges techniques : Injection de dépendances
45
CombatService
DispelMagic
CombatServ...
@Xebiconfr #Xebicon18 @alxdergham
Challenges techniques : Dépendances cycliques
46
CombatService
DispelMagic
CombatService...
@Xebiconfr #Xebicon18 @alxdergham
Challenges techniques : Parseurs pour le game design
47
@Xebiconfr #Xebicon18 @alxdergham
Challenges techniques : Parseurs pour le game design
48
@Xebiconfr #Xebicon18 @alxdergham
Challenges techniques : Parseurs pour le game design
49
@Xebiconfr #Xebicon18 @alxdergham
Challenges techniques : Level design
50
@Xebiconfr #Xebicon18 @alxdergham
Challenges techniques : Level design
51
@Xebiconfr #Xebicon18 @alxdergham
Challenges techniques : Gestion de la mise à jour du modèle
52
@Xebiconfr #Xebicon18 @alxdergham
Challenges techniques : Gestion de la mise à jour du modèle
@Injectable()
export class P...
@Xebiconfr #Xebicon18 @alxdergham
Challenges techniques : Migration AngularJS -> Angular5
54
@Xebiconfr #Xebicon18 @alxdergham
Challenges techniques : Migration AngularJS -> Angular5
55
$scope.$emit
$scope.$on
RxJS
...
@Xebiconfr #Xebicon18 @alxdergham
Conclusion
@Xebiconfr #Xebicon18 @alxdergham
Conclusion : Quels outils pour quels besoins ?
57
@Xebiconfr #Xebicon18 @alxdergham
Conclusion : Quels outils pour quels besoins ?
58
Injection de dépendances
Gestion d’évé...
@Xebiconfr #Xebicon18 @alxdergham
Conclusion : Quels outils pour quels besoins ?
59
Gestion du model avec
Redux
Simplicité...
@Xebiconfr #Xebicon18 @alxdergham
Conclusion : Quels outils pour quels besoins ?
60
Enregistrement de
document JSON
Simpli...
@Xebiconfr #Xebicon18 @alxdergham
Conclusion : Les compétences acquises
61
@Xebiconfr #Xebicon18 @alxdergham
Conclusion : Les compétences acquises
62
@Xebiconfr #Xebicon18 @alxdergham
Conclusion : Les compétences acquises
63
@Xebiconfr #Xebicon18 @alxdergham
Conclusion : La suite
64
@Xebiconfr #Xebicon18 @alxdergham
Conclusion : La suite
65
BDD
Back-end
Jeu
(Web)
Editeur de
niveaux
(Web)
@Xebiconfr #Xebicon18 @alxdergham
Conclusion : La suite
66
@Xebiconfr #Xebicon18 @alxdergham 67
Prochain SlideShare
Chargement dans…5
×

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

50 vues

Publié le

Par curiosité, puis par passion, j'ai développé un jeu vidéo à l'aide des outils et frameworks habituellement utilisés dans des applications web.

Pas commun dites-vous ? Revenons ensemble sur la manière dont je m'y suis pris, les choix techniques et ce qui les a faits évoluer, les challenges et les compétences développées au cours de cette aventure.

Par Alexandre Dergham, Développeurs full-stack chez Xebia

Toutes les informations sur xebicon.fr

Publié dans : Technologie
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

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

  1. 1. @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
  2. 2. @Xebiconfr #Xebicon18 @alxdergham Qui suis-je ? Alexandre Dergham Développeur full stack
  3. 3. @Xebiconfr #Xebicon18 @alxdergham Comment j'ai développé un jeu vidéo avec des outils de développement web ?
  4. 4. @Xebiconfr #Xebicon18 @alxdergham Quelles étaient mes motivations ?
  5. 5. @Xebiconfr #Xebicon18 @alxdergham Quelles étaient mes motivations ? 5
  6. 6. @Xebiconfr #Xebicon18 @alxdergham Features du jeu
  7. 7. @Xebiconfr #Xebicon18 @alxdergham Features du jeu : 2 rôles 7
  8. 8. @Xebiconfr #Xebicon18 @alxdergham Features du jeu : Jeu de rôle 8
  9. 9. @Xebiconfr #Xebicon18 @alxdergham Features du jeu : mono-joueur, tour à tour 9
  10. 10. @Xebiconfr #Xebicon18 @alxdergham Features du jeu : offline 10
  11. 11. @Xebiconfr #Xebicon18 @alxdergham Features du jeu : offline 11
  12. 12. @Xebiconfr #Xebicon18 @alxdergham Features du jeu : affichage 12
  13. 13. @Xebiconfr #Xebicon18 @alxdergham Features du jeu : repérage 13
  14. 14. @Xebiconfr #Xebicon18 @alxdergham Features du jeu : édition de contenu 14
  15. 15. @Xebiconfr #Xebicon18 @alxdergham Features du jeu : éditeur de niveau 15
  16. 16. @Xebiconfr #Xebicon18 @alxdergham Features du jeu : Le jeu ! 16
  17. 17. @Xebiconfr #Xebicon18 @alxdergham Features du jeu : Le jeu ! 17
  18. 18. @Xebiconfr #Xebicon18 @alxdergham Solutions techniques
  19. 19. @Xebiconfr #Xebicon18 @alxdergham Solutions techniques : Architecture BDD Back-end Jeu (Web) Editeur de niveaux (Web) 19
  20. 20. @Xebiconfr #Xebicon18 @alxdergham Solutions techniques : Front-end du jeu (Avant) 20
  21. 21. @Xebiconfr #Xebicon18 @alxdergham Solutions techniques : Front-end du jeu (5 ans après) 21
  22. 22. @Xebiconfr #Xebicon18 @alxdergham Solutions techniques : Front-end (Éditeur de niveaux) 22
  23. 23. @Xebiconfr #Xebicon18 @alxdergham Solutions techniques : Back-end 23
  24. 24. @Xebiconfr #Xebicon18 @alxdergham Conception technique de l’appli web
  25. 25. @Xebiconfr #Xebicon18 @alxdergham 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
  26. 26. @Xebiconfr #Xebicon18 @alxdergham 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
  27. 27. @Xebiconfr #Xebicon18 @alxdergham Conception technique : … et maintenant 27 ScreensModule SceneDisplayModule GameModule
  28. 28. @Xebiconfr #Xebicon18 @alxdergham Conception technique : Affichage de la scène de jeu 28 Controller 1 Controller 2 Controller 3 SceneDisplayComponent Service Service Service
  29. 29. @Xebiconfr #Xebicon18 @alxdergham Conception technique : Services stateful 29 SceneDisplayComponent Service Service Service @Component({ selector: 'scene-display', providers: [ SceneDisplayService, CameraBuilderService, SpriteServiceService, … ], }) export class SceneDisplayComponent { … }
  30. 30. @Xebiconfr #Xebicon18 @alxdergham 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
  31. 31. @Xebiconfr #Xebicon18 @alxdergham Méthodologie (Mine)Craftsmanship
  32. 32. @Xebiconfr #Xebicon18 @alxdergham Méthodologie : TDD 32
  33. 33. @Xebiconfr #Xebicon18 @alxdergham Méthodologie : E2E 33
  34. 34. @Xebiconfr #Xebicon18 @alxdergham Challenges techniques
  35. 35. @Xebiconfr #Xebicon18 @alxdergham Challenges techniques : Gestion du son et événements 35
  36. 36. @Xebiconfr #Xebicon18 @alxdergham Challenges techniques : Gestion du son et événements 36 AudioFXComponent AudioService Subscribe PlaySound RequestPlaySound RxJS
  37. 37. @Xebiconfr #Xebicon18 @alxdergham Challenges techniques : Gestion du son et événements @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
  38. 38. @Xebiconfr #Xebicon18 @alxdergham Challenges techniques : Gestion du son et événements @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
  39. 39. @Xebiconfr #Xebicon18 @alxdergham Challenges techniques : Ajout et réutilisation de contenu 39 Game engine Game design
  40. 40. @Xebiconfr #Xebicon18 @alxdergham Challenges techniques : Ajout et réutilisation de contenu 40 CharacterSkillService Skill Fireball Heal Design Pattern Strategy useSkill(actor, target) useSkill(actor, target) useSkill(actor, target)
  41. 41. @Xebiconfr #Xebicon18 @alxdergham Challenges techniques : Ajout et réutilisation de contenu @Injectable() export class HealSpell extends Skill { public use (actor: Actor, target: Actor) : void { target.health += actor.spellPower; actor.mana -= 10; } } 41
  42. 42. @Xebiconfr #Xebicon18 @alxdergham Challenges techniques : Ajout et réutilisation de contenu @Injectable() export class FireballSpell extends Skill { public use (actor: Actor, target: Actor) : void { target.health -= actor.spellPower; actor.mana -= 20; } } 42
  43. 43. @Xebiconfr #Xebicon18 @alxdergham Challenges techniques : Ajout et réutilisation de contenu @NgModule({ providers: [ {provide: 'HealSpell', useClass: HealSpell}, {provide: 'FireballSpell', useClass: FireballSpell}, }) export class SkillsModule {} 43
  44. 44. @Xebiconfr #Xebicon18 @alxdergham Challenges techniques : Ajout et réutilisation de contenu @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
  45. 45. @Xebiconfr #Xebicon18 @alxdergham Challenges techniques : Injection de dépendances 45 CombatService DispelMagic CombatService
  46. 46. @Xebiconfr #Xebicon18 @alxdergham Challenges techniques : Dépendances cycliques 46 CombatService DispelMagic CombatService This.injector.get(‘DispelMagic’)
  47. 47. @Xebiconfr #Xebicon18 @alxdergham Challenges techniques : Parseurs pour le game design 47
  48. 48. @Xebiconfr #Xebicon18 @alxdergham Challenges techniques : Parseurs pour le game design 48
  49. 49. @Xebiconfr #Xebicon18 @alxdergham Challenges techniques : Parseurs pour le game design 49
  50. 50. @Xebiconfr #Xebicon18 @alxdergham Challenges techniques : Level design 50
  51. 51. @Xebiconfr #Xebicon18 @alxdergham Challenges techniques : Level design 51
  52. 52. @Xebiconfr #Xebicon18 @alxdergham Challenges techniques : Gestion de la mise à jour du modèle 52
  53. 53. @Xebiconfr #Xebicon18 @alxdergham 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
  54. 54. @Xebiconfr #Xebicon18 @alxdergham Challenges techniques : Migration AngularJS -> Angular5 54
  55. 55. @Xebiconfr #Xebicon18 @alxdergham Challenges techniques : Migration AngularJS -> Angular5 55 $scope.$emit $scope.$on RxJS Service @Injectable Directive @Component Controller 8 mois!!
  56. 56. @Xebiconfr #Xebicon18 @alxdergham Conclusion
  57. 57. @Xebiconfr #Xebicon18 @alxdergham Conclusion : Quels outils pour quels besoins ? 57
  58. 58. @Xebiconfr #Xebicon18 @alxdergham Conclusion : Quels outils pour quels besoins ? 58 Injection de dépendances Gestion d’événements BrowserAnimationModule ZoneJS
  59. 59. @Xebiconfr #Xebicon18 @alxdergham Conclusion : Quels outils pour quels besoins ? 59 Gestion du model avec Redux Simplicité de mise en place
  60. 60. @Xebiconfr #Xebicon18 @alxdergham Conclusion : Quels outils pour quels besoins ? 60 Enregistrement de document JSON Simplicité de mise en place
  61. 61. @Xebiconfr #Xebicon18 @alxdergham Conclusion : Les compétences acquises 61
  62. 62. @Xebiconfr #Xebicon18 @alxdergham Conclusion : Les compétences acquises 62
  63. 63. @Xebiconfr #Xebicon18 @alxdergham Conclusion : Les compétences acquises 63
  64. 64. @Xebiconfr #Xebicon18 @alxdergham Conclusion : La suite 64
  65. 65. @Xebiconfr #Xebicon18 @alxdergham Conclusion : La suite 65 BDD Back-end Jeu (Web) Editeur de niveaux (Web)
  66. 66. @Xebiconfr #Xebicon18 @alxdergham Conclusion : La suite 66
  67. 67. @Xebiconfr #Xebicon18 @alxdergham 67

×