Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

28 views

Published on

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

Published in: Technology
  • Be the first to comment

  • Be the first to like this

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

×