[TnT 2025] Comment j'ai porté Doom sur navigateur grâce au Web Assembly

Le portage de jeux vidéos permet de découvrir de nouvelles technologies tout en s'amusant. En plus, c'est un excellent point d'entrée dans le monde du développement de jeux vidéos. Cela est d'autant plus vrai grâce au Web Assembly qui simplifie le portage de jeux sur navigateur.

Durant cette session, je partage mon retour d'expérience sur la réalisation de mon premier portage. Je vous expliquerai pourquoi j'ai choisi de porter Doom. Ensuite, je montrerai étape par étape comment j'ai réussi à intégerer le Canvas et l'AudioContext en JavaScript pour avoir un rendu qui peut aller jusqu'à 60 fps.

A l'issue de cette conférence, vous ne verrez plus le portage de jeux vidéos de la même manière. Donc, si vous êtes passionnés par les jeux vidéos ou que vous souhaitez découvrir comme le WASM contribue aux portage de jeux, cette session est faite pour vous.

Transcript

1. Comment ça a commencé
2. Destination finale
4. @yostane #TechAtWorldline Yassine Benabbas DevRel / Enseignant / membre du LAUG Amateur de jeux rétro 😍 Kotlin, WASM, AI, ...
5. blog.worldline.tech @TechAtWorldline @techatworldline.bsky.social @worldlinetech
7. WebAssembly (WASM) Format d'instruction binaire portable Standard W3C Exécutable par les navigateurs et environnements non-Web 00 61 73 6d 01 00 00 00 01 05 01 60 00 01 7f 03 |.asm.......`....| 02 01 00 07 16 01 12 67 65 74 55 6e 69 76 65 72 |.......getUniver| 73 61 6c 4e 75 6d 62 65 72 00 00 0a 06 01 04 00 |salNumber.......| 41 2a 0b 00 0a 04 6e 61 6d 65 02 03 01 00 00 |A*....name.....| 1 2 3 4
8. 00 61 73 6d 01 00 00 00 01 05 01 60 00 01 7f 03 |.asm.......`....| 02 01 00 07 16 01 12 67 65 74 55 6e 69 76 65 72 |.......getUniver| 73 61 6c 4e 75 6d 62 65 72 00 00 0a 06 01 04 00 |salNumber.......| 41 2a 0b 00 0a 04 6e 61 6d 65 02 03 01 00 00 |A*....name.....| 1 2 3 4 Format texte pour une lecture facile
9. (module (func (result i32) (i32.const 42) ) (export "getUniversalNumber" (func 0)) ) 1 2 3 4 5 6 00 61 73 6d 01 00 00 00 01 05 01 60 00 01 7f 03 |.asm.......`....| 02 01 00 07 16 01 12 67 65 74 55 6e 69 76 65 72 |.......getUniver| 73 61 6c 4e 75 6d 62 65 72 00 00 0a 06 01 04 00 |salNumber.......| 41 2a 0b 00 0a 04 6e 61 6d 65 02 03 01 00 00 |A*....name.....| 1 2 3 4 format wat Format texte pour une lecture facile https:/ /github.com/WebAssembly/wabt
10. Navigateur Code source Moteur JS Basé sur: https://wasmlabs.dev/articles/docker-without-containers/ WASM dans le web ...
11. Navigateur Code source Moteur JS Basé sur: https://wasmlabs.dev/articles/docker-without-containers/ WASM dans le web Compilateur / Toolchain WASM wasm-pack ... ...
12. Navigateur Code source Moteur JS Basé sur: https://wasmlabs.dev/articles/docker-without-containers/ WASM dans le web Compilateur / Toolchain WASM wasm-pack ... ... Binaire WASM Code glue
13. Navigateur Code source runtime WASM Moteur JS Basé sur: https://wasmlabs.dev/articles/docker-without-containers/ WASM dans le web Compilateur / Toolchain WASM wasm-pack ... ... Binaire WASM Code glue
14. Je dois réaliser un projet en WASM !
16. .NET et le WASM .NET : Framework Open Source de dév. d'apps Mulit-plateformes et Fullstack WASM est une cible de .Net :
17. .NET et le WASM .NET : Framework Open Source de dév. d'apps Mulit-plateformes et Fullstack WASM est une cible de .Net : Blazor: framework front wasm-tools: compilation vers WASM
18. @page "/counter" <h1>Counter</h1> <p>Current count: @currentCount</p> <button @onclick="IncrementCount">Click me</button> @code { private int currentCount = 0; private void IncrementCount() { currentCount++; } } 1 2 3 4 5 6 7 8 9 10 Blazor Framework de développement d'applications web HTML + CSS + C# (à la place du JS / TS) Rendu côté serveur ou client (via WASM)
19. public partial class MyClass { [JSExport] internal static string Greeting() { var text = $"Hello, {GetHRef()}"; Console.WriteLine(text); return text; } [JSImport("window.location.href", "main.js")] internal static partial string GetHRef(); } 1 2 3 4 5 6 7 8 9 10 11 12 13 setModuleImports('main.js', { window: { location: { href: () => globalThis.window.location.href } } }); const text = exports.MyClass.Greeting(); console.log(text); 1 2 3 4 5 6 7 8 9 10 .NET 7+ wasm-tools
20. public partial class MyClass { [JSExport] internal static string Greeting() { var text = $"Hello, {GetHRef()}"; Console.WriteLine(text); return text; } [JSImport("window.location.href", "main.js")] internal static partial string GetHRef(); } 1 2 3 4 5 6 7 8 9 10 11 12 13 setModuleImports('main.js', { window: { location: { href: () => globalThis.window.location.href } } }); const text = exports.MyClass.Greeting(); console.log(text); 1 2 3 4 5 6 7 8 9 10 .NET 7+ wasm-tools
21. public partial class MyClass { [JSExport] internal static string Greeting() { var text = $"Hello, {GetHRef()}"; Console.WriteLine(text); return text; } [JSImport("window.location.href", "main.js")] internal static partial string GetHRef(); } 1 2 3 4 5 6 7 8 9 10 11 12 13 setModuleImports('main.js', { window: { location: { href: () => globalThis.window.location.href } } }); const text = exports.MyClass.Greeting(); console.log(text); 1 2 3 4 5 6 7 8 9 10 .NET 7+ wasm-tools
22. Je dois porter un jeu .NET vers WASM !
24. Portage de jeux Pouvoir lancer un jeu sur d'autres plateformes Réécriture partielle ou complète du code source d'origine Pas du portage: machine virtuelle ou emulateur YouTubeur MVG
25. Sorti en 1993 sur DOS
26. Sorti en 1993 sur DOS Moteur
27. Sorti en 1993 sur DOS Moteur + wad Ressources sf2
28. Sorti en 1993 sur DOS 🌟 Doom est facilement portable par conception 🌟 Moteur + wad Ressources sf2
29. http://mrglitchsreviews.blogspot.com/2012/09/doom-console-ports.html DOOM a été porté sur plusieurs platformes 25 official licensed ports https://www.thegamer.com/doom-how-many-platforms-ports-consoles
30. https://www.link-cable.com/top-10-weird-doom-ports/
31. Portage d'Olivier Poncet
32. Source: https://www.yahoo.com/news/1995-bill-gates-gave-crazy-180900044.html
33. ManagedDoom Port en .NET de ManagedDoom V1 utilise (V2 utilise ) Mon portage est un fork de ManagedDoom V1 LinuxDoom SFML silk.net
34. ManagedDoom Port en .NET de ManagedDoom V1 utilise (V2 utilise ) Mon portage est un fork de ManagedDoom V1 LinuxDoom SFML silk.net id-Software/DOOM
35. ManagedDoom Port en .NET de ManagedDoom V1 utilise (V2 utilise ) Mon portage est un fork de ManagedDoom V1 LinuxDoom SFML silk.net id-Software/DOOM sinshu/managed-doom
36. ManagedDoom Port en .NET de ManagedDoom V1 utilise (V2 utilise ) Mon portage est un fork de ManagedDoom V1 LinuxDoom SFML silk.net id-Software/DOOM sinshu/managed-doom yostane/MangedDoom-Blazor
38. Stratégie de portage Cloner sininshu/managed-doom Changer la cible de compilation vers WASM Réimplémenter les classes SFML : dall-e
39. Stratégie de portage Cloner sininshu/managed-doom Changer la cible de compilation vers WASM Réimplémenter les classes SFML : 1. Par des bouchons jusqu'à ce que ça compile dall-e
40. Stratégie de portage Cloner sininshu/managed-doom Changer la cible de compilation vers WASM Réimplémenter les classes SFML : 1. Par des bouchons jusqu'à ce que ça compile 2. Implémenter les bouchons dall-e
41. Stratégie de portage Cloner sininshu/managed-doom Changer la cible de compilation vers WASM Réimplémenter les classes SFML : 1. Par des bouchons jusqu'à ce que ça compile 2. Implémenter les bouchons 3. Faire le minimum de traitements côté JS (rendu) dall-e
42. Stratégie de portage Cloner sininshu/managed-doom Changer la cible de compilation vers WASM Réimplémenter les classes SFML : 1. Par des bouchons jusqu'à ce que ça compile 2. Implémenter les bouchons 3. Faire le minimum de traitements côté JS (rendu) dall-e
43. Stratégie de portage Cloner sininshu/managed-doom Changer la cible de compilation vers WASM Réimplémenter les classes SFML : 1. Par des bouchons jusqu'à ce que ça compile 2. Implémenter les bouchons 3. Faire le minimum de traitements côté JS (rendu) dall-e
44. using SFML.Audio; namespace ManagedDoom.Audio { public sealed class SfmlSound : ISound, IDisposable { private SoundBuffer[] buffers; } } 1 2 3 4 5 6 7 8 9 Exemple de classe qui dépend de SFML
45. using SFML.Audio; namespace ManagedDoom.Audio { public sealed class SfmlSound : ISound, IDisposable { private SoundBuffer[] buffers; } } 1 2 3 4 5 6 7 8 9 using SFML.Audio; private SoundBuffer[] buffers; 1 2 namespace ManagedDoom.Audio 3 { 4 public sealed class SfmlSound : ISound, IDisposable 5 { 6 7 } 8 } 9 Exemple de classe qui dépend de SFML Non disponible Le namespace SFML.Audio La classe SFML SoundBuffer
46. namespace SFML.Audio { public class SoundBuffer { public SoundBuffer(short[] samples, int v, uint sampleRate) { // TODO: implement } internal void Dispose() { // TODO: implement } } } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 Alors, implémentons là
47. namespace SFML.Audio { public class SoundBuffer { public short[] samples; private int v; public uint sampleRate; public SoundBuffer(short[] samples, int v, uint sampleRate) { this.samples = samples; this.v = v; this.sampleRate = sampleRate; } public Time Duration { get; internal set; } } } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 Implémentation finale
48. namespace SFML.Audio { public class SoundBuffer { public short[] samples; private int v; public uint sampleRate; public SoundBuffer(short[] samples, int v, uint sampleRate) { this.samples = samples; this.v = v; this.sampleRate = sampleRate; } public Time Duration { get; internal set; } } } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 public short[] samples; private int v; public uint sampleRate; public SoundBuffer(short[] samples, int v, uint sampleRate) { this.samples = samples; this.v = v; this.sampleRate = sampleRate; namespace SFML.Audio 1 { 2 public class SoundBuffer 3 { 4 5 6 7 8 9 10 11 12 13 } 14 15 public Time Duration { get; internal set; } 16 } 17 } 18 Implémentation finale
49. namespace SFML.Audio { public class SoundBuffer { public short[] samples; private int v; public uint sampleRate; public SoundBuffer(short[] samples, int v, uint sampleRate) { this.samples = samples; this.v = v; this.sampleRate = sampleRate; } public Time Duration { get; internal set; } } } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 public short[] samples; private int v; public uint sampleRate; public SoundBuffer(short[] samples, int v, uint sampleRate) { this.samples = samples; this.v = v; this.sampleRate = sampleRate; namespace SFML.Audio 1 { 2 public class SoundBuffer 3 { 4 5 6 7 8 9 10 11 12 13 } 14 15 public Time Duration { get; internal set; } 16 } 17 } 18 public Time Duration { get; internal set; } namespace SFML.Audio 1 { 2 public class SoundBuffer 3 { 4 public short[] samples; 5 private int v; 6 public uint sampleRate; 7 8 public SoundBuffer(short[] samples, int v, uint sampleRate) 9 { 10 this.samples = samples; 11 this.v = v; 12 this.sampleRate = sampleRate; 13 } 14 15 16 } 17 } 18 Implémentation finale
50. Boucle de jeu en C# while (waitForNextFrame()){ const input = getPlayerInput(); const { frame, audio } = UpdateGameState(input, WAD); render(frame); play(audio); }
51. Boucle de jeu en C# while (waitForNextFrame()){ const input = getPlayerInput(); const { frame, audio } = UpdateGameState(input, WAD); render(frame); play(audio); } waitForNextFrame() à remplacer par requestAnimationFrame() en JS qui utilise une callback
52. Boucle de jeu en JS function gameLoop(){ if (canAdvanceFrame()){ const input = getPlayerInput(); const { frame, audio } = UpdateGameState(input, WAD); render(frame); play(audio); } requestAnimationFrame(gameLoop); } requestAnimationFrame(gameLoop); 1 2 3 4 5 6 7 8 9 10 11
53. Boucle de jeu en JS function gameLoop(){ if (canAdvanceFrame()){ const input = getPlayerInput(); const { frame, audio } = UpdateGameState(input, WAD); render(frame); play(audio); } requestAnimationFrame(gameLoop); } requestAnimationFrame(gameLoop); 1 2 3 4 5 6 7 8 9 10 11 if (canAdvanceFrame()){ const input = getPlayerInput(); const { frame, audio } = UpdateGameState(input, WAD); render(frame); play(audio); } function gameLoop(){ 1 2 3 4 5 6 7 8 requestAnimationFrame(gameLoop); 9 } 10 requestAnimationFrame(gameLoop); 11
54. Boucle de jeu en JS function gameLoop(){ if (canAdvanceFrame()){ const input = getPlayerInput(); const { frame, audio } = UpdateGameState(input, WAD); render(frame); play(audio); } requestAnimationFrame(gameLoop); } requestAnimationFrame(gameLoop); 1 2 3 4 5 6 7 8 9 10 11 if (canAdvanceFrame()){ const input = getPlayerInput(); const { frame, audio } = UpdateGameState(input, WAD); render(frame); play(audio); } function gameLoop(){ 1 2 3 4 5 6 7 8 requestAnimationFrame(gameLoop); 9 } 10 requestAnimationFrame(gameLoop); 11 function gameLoop(){ requestAnimationFrame(gameLoop); requestAnimationFrame(gameLoop); 1 if (canAdvanceFrame()){ 2 const input = getPlayerInput(); 3 const { frame, audio } 4 = UpdateGameState(input, WAD); 5 render(frame); 6 play(audio); 7 } 8 9 } 10 11
55. Boucle de jeu en JS function gameLoop(){ if (canAdvanceFrame()){ const input = getPlayerInput(); const { frame, audio } = UpdateGameState(input, WAD); render(frame); play(audio); } requestAnimationFrame(gameLoop); } requestAnimationFrame(gameLoop); 1 2 3 4 5 6 7 8 9 10 11 if (canAdvanceFrame()){ const input = getPlayerInput(); const { frame, audio } = UpdateGameState(input, WAD); render(frame); play(audio); } function gameLoop(){ 1 2 3 4 5 6 7 8 requestAnimationFrame(gameLoop); 9 } 10 requestAnimationFrame(gameLoop); 11 function gameLoop(){ requestAnimationFrame(gameLoop); requestAnimationFrame(gameLoop); 1 if (canAdvanceFrame()){ 2 const input = getPlayerInput(); 3 const { frame, audio } 4 = UpdateGameState(input, WAD); 5 render(frame); 6 play(audio); 7 } 8 9 } 10 11 function gameLoop(){ if (canAdvanceFrame()){ const input = getPlayerInput(); const { frame, audio } = UpdateGameState(input, WAD); render(frame); play(audio); } requestAnimationFrame(gameLoop); } requestAnimationFrame(gameLoop); 1 2 3 4 5 6 7 8 9 10 11
56. Architecture de ManagedDoom V1
57. Boucle for (boucle de jeu) Architecture de ManagedDoom V1
58. Boucle for (boucle de jeu) Touches appuyées (keyup) Touches relâchées (keydown) ['Z', 'Q'] ['space'] Architecture de ManagedDoom V1 1 iteration du Doom Engine Mise à jour de l'état du jeu wad DOOM.wad sf2 SoundFont.sf2
59. Boucle for (boucle de jeu) Touches appuyées (keyup) Touches relâchées (keydown) ['Z', 'Q'] ['space'] Architecture de ManagedDoom V1 Frame buffer Audio buffer 1 iteration du Doom Engine Mise à jour de l'état du jeu wad DOOM.wad sf2 SoundFont.sf2
60. Boucle for (boucle de jeu) Touches appuyées (keyup) Touches relâchées (keydown) ['Z', 'Q'] ['space'] Architecture de ManagedDoom V1 Frame buffer Audio buffer SFML Video SFML Audio 1 iteration du Doom Engine Mise à jour de l'état du jeu wad DOOM.wad sf2 SoundFont.sf2
61. Boucle for (boucle de jeu) Touches appuyées (keyup) Touches relâchées (keydown) ['Z', 'Q'] ['space'] Architecture de ManagedDoom V1 Frame buffer Audio buffer SFML Video SFML Audio 1 iteration du Doom Engine Mise à jour de l'état du jeu wad DOOM.wad sf2 SoundFont.sf2
62. Boucle for (boucle de jeu) Touches appuyées (keyup) Touches relâchées (keydown) ['Z', 'Q'] ['space'] Architecture de ManagedDoom V1 Frame buffer Audio buffer SFML Video SFML Audio 1 iteration du Doom Engine Mise à jour de l'état du jeu .NET WASM ~70% OK .NET WASM wad DOOM.wad sf2 SoundFont.sf2
63. Architecture de Blazor Doom wad DOOM.wad requestAnimationFrame Canvas Appel JS Appel JS Frame buffer Audio buffer Audio Context sf2 SoundFont.sf2 Touches appuyées (keyup) Touches relâchées (keydown) ['Z', 'Q'] ['space'] 1 iteration du Doom Engine Mise à jour de l'état du jeu Appel .Net / WASM
66. <html> <head> <!-- Sets .Net interop and starts the game loop --> <script type="module" src="./main.js"></script> </head> <body> <canvas id="canvas" width="320" height="200" style="image-rendering: pixelated" /> </body> </html> 1 2 3 4 5 6 7 8 9 10 Point d'entrée
67. <html> <head> <!-- Sets .Net interop and starts the game loop --> <script type="module" src="./main.js"></script> </head> <body> <canvas id="canvas" width="320" height="200" style="image-rendering: pixelated" /> </body> </html> 1 2 3 4 5 6 7 8 9 10 <!-- Sets .Net interop and starts the game loop --> <script type="module" src="./main.js"></script> <html> 1 <head> 2 3 4 </head> 5 <body> 6 <canvas id="canvas" width="320" height="200" 7 style="image-rendering: pixelated" /> 8 </body> 9 </html> 10 Point d'entrée
68. <html> <head> <!-- Sets .Net interop and starts the game loop --> <script type="module" src="./main.js"></script> </head> <body> <canvas id="canvas" width="320" height="200" style="image-rendering: pixelated" /> </body> </html> 1 2 3 4 5 6 7 8 9 10 <!-- Sets .Net interop and starts the game loop --> <script type="module" src="./main.js"></script> <html> 1 <head> 2 3 4 </head> 5 <body> 6 <canvas id="canvas" width="320" height="200" 7 style="image-rendering: pixelated" /> 8 </body> 9 </html> 10 <canvas id="canvas" width="320" height="200" style="image-rendering: pixelated" /> <html> 1 <head> 2 <!-- Sets .Net interop and starts the game loop --> 3 <script type="module" src="./main.js"></script> 4 </head> 5 <body> 6 7 8 </body> 9 </html> 10 Point d'entrée
69. Exécution de la boucle de jeu import { dotnet } from "./dotnet.js"; const { getAssemblyExports, getConfig } = await dotnet.create(); const exports = await getAssemblyExports(getConfig().mainAssemblyName); await dotnet.run(); function gameLoop(timestamp) { if (timestamp - lastFrameTimestamp >= 1000 / 30) { lastFrameTimestamp = timestamp; exports.BlazorDoom.MainJS.UpdateGameState(keys); } requestAnimationFrame(gameLoop); } 1 2 3 4 5 6 7 8 9 10 11 12 main.js
70. Exécution de la boucle de jeu import { dotnet } from "./dotnet.js"; const { getAssemblyExports, getConfig } = await dotnet.create(); const exports = await getAssemblyExports(getConfig().mainAssemblyName); await dotnet.run(); function gameLoop(timestamp) { if (timestamp - lastFrameTimestamp >= 1000 / 30) { lastFrameTimestamp = timestamp; exports.BlazorDoom.MainJS.UpdateGameState(keys); } requestAnimationFrame(gameLoop); } 1 2 3 4 5 6 7 8 9 10 11 12 import { dotnet } from "./dotnet.js"; const { getAssemblyExports, getConfig } = await dotnet.create(); const exports = await getAssemblyExports(getConfig().mainAssemblyName); await dotnet.run(); 1 2 3 4 5 function gameLoop(timestamp) { 6 if (timestamp - lastFrameTimestamp >= 1000 / 30) { 7 lastFrameTimestamp = timestamp; 8 exports.BlazorDoom.MainJS.UpdateGameState(keys); 9 } 10 requestAnimationFrame(gameLoop); 11 } 12 main.js
71. Exécution de la boucle de jeu import { dotnet } from "./dotnet.js"; const { getAssemblyExports, getConfig } = await dotnet.create(); const exports = await getAssemblyExports(getConfig().mainAssemblyName); await dotnet.run(); function gameLoop(timestamp) { if (timestamp - lastFrameTimestamp >= 1000 / 30) { lastFrameTimestamp = timestamp; exports.BlazorDoom.MainJS.UpdateGameState(keys); } requestAnimationFrame(gameLoop); } 1 2 3 4 5 6 7 8 9 10 11 12 import { dotnet } from "./dotnet.js"; const { getAssemblyExports, getConfig } = await dotnet.create(); const exports = await getAssemblyExports(getConfig().mainAssemblyName); await dotnet.run(); 1 2 3 4 5 function gameLoop(timestamp) { 6 if (timestamp - lastFrameTimestamp >= 1000 / 30) { 7 lastFrameTimestamp = timestamp; 8 exports.BlazorDoom.MainJS.UpdateGameState(keys); 9 } 10 requestAnimationFrame(gameLoop); 11 } 12 function gameLoop(timestamp) { requestAnimationFrame(gameLoop); import { dotnet } from "./dotnet.js"; 1 const { getAssemblyExports, getConfig } = await dotnet.create(); 2 const exports = await getAssemblyExports(getConfig().mainAssemblyName); 3 await dotnet.run(); 4 5 6 if (timestamp - lastFrameTimestamp >= 1000 / 30) { 7 lastFrameTimestamp = timestamp; 8 exports.BlazorDoom.MainJS.UpdateGameState(keys); 9 } 10 11 } 12 main.js
72. Exécution de la boucle de jeu import { dotnet } from "./dotnet.js"; const { getAssemblyExports, getConfig } = await dotnet.create(); const exports = await getAssemblyExports(getConfig().mainAssemblyName); await dotnet.run(); function gameLoop(timestamp) { if (timestamp - lastFrameTimestamp >= 1000 / 30) { lastFrameTimestamp = timestamp; exports.BlazorDoom.MainJS.UpdateGameState(keys); } requestAnimationFrame(gameLoop); } 1 2 3 4 5 6 7 8 9 10 11 12 import { dotnet } from "./dotnet.js"; const { getAssemblyExports, getConfig } = await dotnet.create(); const exports = await getAssemblyExports(getConfig().mainAssemblyName); await dotnet.run(); 1 2 3 4 5 function gameLoop(timestamp) { 6 if (timestamp - lastFrameTimestamp >= 1000 / 30) { 7 lastFrameTimestamp = timestamp; 8 exports.BlazorDoom.MainJS.UpdateGameState(keys); 9 } 10 requestAnimationFrame(gameLoop); 11 } 12 function gameLoop(timestamp) { requestAnimationFrame(gameLoop); import { dotnet } from "./dotnet.js"; 1 const { getAssemblyExports, getConfig } = await dotnet.create(); 2 const exports = await getAssemblyExports(getConfig().mainAssemblyName); 3 await dotnet.run(); 4 5 6 if (timestamp - lastFrameTimestamp >= 1000 / 30) { 7 lastFrameTimestamp = timestamp; 8 exports.BlazorDoom.MainJS.UpdateGameState(keys); 9 } 10 11 } 12 exports.BlazorDoom.MainJS.UpdateGameState(keys); import { dotnet } from "./dotnet.js"; 1 const { getAssemblyExports, getConfig } = await dotnet.create(); 2 const exports = await getAssemblyExports(getConfig().mainAssemblyName); 3 await dotnet.run(); 4 5 function gameLoop(timestamp) { 6 if (timestamp - lastFrameTimestamp >= 1000 / 30) { 7 lastFrameTimestamp = timestamp; 8 9 } 10 requestAnimationFrame(gameLoop); 11 } 12 main.js
73. Exécution de la boucle de jeu import { dotnet } from "./dotnet.js"; const { getAssemblyExports, getConfig } = await dotnet.create(); const exports = await getAssemblyExports(getConfig().mainAssemblyName); await dotnet.run(); function gameLoop(timestamp) { if (timestamp - lastFrameTimestamp >= 1000 / 30) { lastFrameTimestamp = timestamp; exports.BlazorDoom.MainJS.UpdateGameState(keys); } requestAnimationFrame(gameLoop); } 1 2 3 4 5 6 7 8 9 10 11 12 import { dotnet } from "./dotnet.js"; const { getAssemblyExports, getConfig } = await dotnet.create(); const exports = await getAssemblyExports(getConfig().mainAssemblyName); await dotnet.run(); 1 2 3 4 5 function gameLoop(timestamp) { 6 if (timestamp - lastFrameTimestamp >= 1000 / 30) { 7 lastFrameTimestamp = timestamp; 8 exports.BlazorDoom.MainJS.UpdateGameState(keys); 9 } 10 requestAnimationFrame(gameLoop); 11 } 12 function gameLoop(timestamp) { requestAnimationFrame(gameLoop); import { dotnet } from "./dotnet.js"; 1 const { getAssemblyExports, getConfig } = await dotnet.create(); 2 const exports = await getAssemblyExports(getConfig().mainAssemblyName); 3 await dotnet.run(); 4 5 6 if (timestamp - lastFrameTimestamp >= 1000 / 30) { 7 lastFrameTimestamp = timestamp; 8 exports.BlazorDoom.MainJS.UpdateGameState(keys); 9 } 10 11 } 12 exports.BlazorDoom.MainJS.UpdateGameState(keys); import { dotnet } from "./dotnet.js"; 1 const { getAssemblyExports, getConfig } = await dotnet.create(); 2 const exports = await getAssemblyExports(getConfig().mainAssemblyName); 3 await dotnet.run(); 4 5 function gameLoop(timestamp) { 6 if (timestamp - lastFrameTimestamp >= 1000 / 30) { 7 lastFrameTimestamp = timestamp; 8 9 } 10 requestAnimationFrame(gameLoop); 11 } 12 import { dotnet } from "./dotnet.js"; const { getAssemblyExports, getConfig } = await dotnet.create(); const exports = await getAssemblyExports(getConfig().mainAssemblyName); await dotnet.run(); function gameLoop(timestamp) { if (timestamp - lastFrameTimestamp >= 1000 / 30) { lastFrameTimestamp = timestamp; exports.BlazorDoom.MainJS.UpdateGameState(keys); } requestAnimationFrame(gameLoop); } 1 2 3 4 5 6 7 8 9 10 11 12 main.js
74. public partial class MainJS // this name is required { public static void Main() { app = new ManagedDoom.DoomApplication(); } [JSExport] // Can be imported from JS public static void UpdateGameState(int[] keys) { // computes the next frame and sounds managedDoom.UpdateGameState(keys); } } 1 2 3 4 5 6 7 8 9 10 11 12 13 import { dotnet } from "./dotnet.js"; const { getAssemblyExports, getConfig } = await dotnet.create(); const exports = await getAssemblyExports(getConfig().mainAssemblyName); await dotnet.run(); function gameLoop(timestamp) { if (timestamp - lastFrameTimestamp >= 1000 / 30) { lastFrameTimestamp = timestamp; exports.BlazorDoom.MainJS.UpdateGameState(keys); } requestAnimationFrame(gameLoop); } 1 2 3 4 5 6 7 8 9 10 11 12 main.js Exécution de la boucle de jeu
75. Audio https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Audio_concepts Echantillon 1 / fréquence d'échantillonage
76. Audio 0.5 1 0.75 0 -0.75 -1 -0.5 0 https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Audio_concepts Echantillon 1 / fréquence d'échantillonage + Fréquence d'échantillonage
77. Audio 0.5 1 0.75 0 -0.75 -1 -0.5 0 https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Audio_concepts AudioContext Echantillon 1 / fréquence d'échantillonage + Fréquence d'échantillonage
78. Audio 0.5 1 0.75 0 -0.75 -1 -0.5 0 https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Audio_concepts AudioContext Echantillon 1 / fréquence d'échantillonage + Fréquence d'échantillonage 🔊
79. Gestion des bruitages void PlayCurrentFrameSound(SoundBuffer soundBuffer) { int[] samples = Array.ConvertAll(soundBuffer.samples, Convert.ToInt32); BlazorDoom.Renderer.playSoundOnJS(samples, (int)soundBuffer.sampleRate); } 1 2 3 4 5 namespace BlazorDoom { [SupportedOSPlatform("browser")] public partial class Renderer { [JSImport("playSound", "blazorDoom/renderer.js")] internal static partial string playSoundOnJS( int[] samples, int sampleRate ); } } 1 2 3 4 5 6 7 8 9 10 11 12
80. Gestion des bruitages export function playSound(samples, sampleRate) { audioContext = new AudioContext({ sampleRate: sampleRate, }); const length = samples.length; const audioBuffer = audioContext.createBuffer( 1, length, sampleRate ); var channelData = audioBuffer.getChannelData(0); for (let i = 0; i < length; i++) { // noralize the sample to be between -1 and 1 channelData[i] = samples[i] / 0xffff; } var source = audioContext.createBufferSource(); source.buffer = audioBuffer; source.connect(audioContext.destination); source.start(); } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
81. Gestion des bruitages export function playSound(samples, sampleRate) { audioContext = new AudioContext({ sampleRate: sampleRate, }); const length = samples.length; const audioBuffer = audioContext.createBuffer( 1, length, sampleRate ); var channelData = audioBuffer.getChannelData(0); for (let i = 0; i < length; i++) { // noralize the sample to be between -1 and 1 channelData[i] = samples[i] / 0xffff; } var source = audioContext.createBufferSource(); source.buffer = audioBuffer; source.connect(audioContext.destination); source.start(); } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 const length = samples.length; const audioBuffer = audioContext.createBuffer( 1, length, sampleRate ); export function playSound(samples, sampleRate) { 1 audioContext = new AudioContext({ 2 sampleRate: sampleRate, 3 }); 4 5 6 7 8 9 10 11 var channelData = audioBuffer.getChannelData(0); 12 for (let i = 0; i < length; i++) { 13 // noralize the sample to be between -1 and 1 14 channelData[i] = samples[i] / 0xffff; 15 } 16 17 var source = audioContext.createBufferSource(); 18 source.buffer = audioBuffer; 19 source.connect(audioContext.destination); 20 source.start(); 21 } 22
82. Gestion des bruitages export function playSound(samples, sampleRate) { audioContext = new AudioContext({ sampleRate: sampleRate, }); const length = samples.length; const audioBuffer = audioContext.createBuffer( 1, length, sampleRate ); var channelData = audioBuffer.getChannelData(0); for (let i = 0; i < length; i++) { // noralize the sample to be between -1 and 1 channelData[i] = samples[i] / 0xffff; } var source = audioContext.createBufferSource(); source.buffer = audioBuffer; source.connect(audioContext.destination); source.start(); } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 const length = samples.length; const audioBuffer = audioContext.createBuffer( 1, length, sampleRate ); export function playSound(samples, sampleRate) { 1 audioContext = new AudioContext({ 2 sampleRate: sampleRate, 3 }); 4 5 6 7 8 9 10 11 var channelData = audioBuffer.getChannelData(0); 12 for (let i = 0; i < length; i++) { 13 // noralize the sample to be between -1 and 1 14 channelData[i] = samples[i] / 0xffff; 15 } 16 17 var source = audioContext.createBufferSource(); 18 source.buffer = audioBuffer; 19 source.connect(audioContext.destination); 20 source.start(); 21 } 22 var channelData = audioBuffer.getChannelData(0); for (let i = 0; i < length; i++) { // noralize the sample to be between -1 and 1 channelData[i] = samples[i] / 0xffff; } export function playSound(samples, sampleRate) { 1 audioContext = new AudioContext({ 2 sampleRate: sampleRate, 3 }); 4 const length = samples.length; 5 const audioBuffer = audioContext.createBuffer( 6 1, 7 length, 8 sampleRate 9 ); 10 11 12 13 14 15 16 17 var source = audioContext.createBufferSource(); 18 source.buffer = audioBuffer; 19 source.connect(audioContext.destination); 20 source.start(); 21 } 22
83. Musique SF2: format qui définit quel son que doit émettre chaque note Note 0 Note 1
84. Streaming de la musique sf2 Temps
85. Streaming de la musique sf2 Temps
86. Streaming de la musique sf2 Temps
87. Streaming de la musique sf2 Temps
88. Streaming de la musique sf2 Temps
89. Streaming de la musique sf2 Temps Temps
90. Streaming de la musique Temps Temps sf2
91. Streaming de la musique Temps Temps AudioContext 😢 émet des glitchs sur des petits extraits + ne gère pas le streaming nativement sf2
92. Streaming de la musique Temps Temps AudioContext 😢 émet des glitchs sur des petits extraits + ne gère pas le streaming nativement Solution 🎶🥳 Regrouper les extraits en un tampon assez grand + planifier le moment de lancement sf2
93. Streaming de la musique function playMusic(samples) { // On lit le tampon audio s'il est assez rempli if (this.#currentMusicBufferIndex >= this.#musicBuffer.length) { const currentTime = this.#audioContext.currentTime; const duration = this.#currentMusicBufferIndex / this.musicSampleRate; // On planifie l'extrait pour qu'il se lance après le précédent source.start(this.expectedBufferEndTime, 0, duration); this.expectedBufferEndTime = currentTime + duration; } // Remplissage du tampon avec l'extrait courant for (let i = 0; i < samples.length; i++) { this.#currentChannelData[this.#currentMusicBufferIndex + i] = samples[i] / 32767; } this.#currentMusicBufferIndex += samples.length; } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 Inconvénient : la musique se lance avec un retard (le temps de remplir le premier tampon)
94. Streaming de la musique function playMusic(samples) { // On lit le tampon audio s'il est assez rempli if (this.#currentMusicBufferIndex >= this.#musicBuffer.length) { const currentTime = this.#audioContext.currentTime; const duration = this.#currentMusicBufferIndex / this.musicSampleRate; // On planifie l'extrait pour qu'il se lance après le précédent source.start(this.expectedBufferEndTime, 0, duration); this.expectedBufferEndTime = currentTime + duration; } // Remplissage du tampon avec l'extrait courant for (let i = 0; i < samples.length; i++) { this.#currentChannelData[this.#currentMusicBufferIndex + i] = samples[i] / 32767; } this.#currentMusicBufferIndex += samples.length; } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 // On lit le tampon audio s'il est assez rempli if (this.#currentMusicBufferIndex >= this.#musicBuffer.length) { // Remplissage du tampon avec l'extrait courant for (let i = 0; i < samples.length; i++) { this.#currentChannelData[this.#currentMusicBufferIndex + i] = samples[i] / 32767; } function playMusic(samples) { 1 2 3 const currentTime = this.#audioContext.currentTime; 4 const duration = this.#currentMusicBufferIndex / this.musicSampleRate; 5 // On planifie l'extrait pour qu'il se lance après le précédent 6 source.start(this.expectedBufferEndTime, 0, duration); 7 this.expectedBufferEndTime = currentTime + duration; 8 } 9 10 11 12 13 14 this.#currentMusicBufferIndex += samples.length; 15 } 16 Inconvénient : la musique se lance avec un retard (le temps de remplir le premier tampon)
95. Streaming de la musique function playMusic(samples) { // On lit le tampon audio s'il est assez rempli if (this.#currentMusicBufferIndex >= this.#musicBuffer.length) { const currentTime = this.#audioContext.currentTime; const duration = this.#currentMusicBufferIndex / this.musicSampleRate; // On planifie l'extrait pour qu'il se lance après le précédent source.start(this.expectedBufferEndTime, 0, duration); this.expectedBufferEndTime = currentTime + duration; } // Remplissage du tampon avec l'extrait courant for (let i = 0; i < samples.length; i++) { this.#currentChannelData[this.#currentMusicBufferIndex + i] = samples[i] / 32767; } this.#currentMusicBufferIndex += samples.length; } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 // On lit le tampon audio s'il est assez rempli if (this.#currentMusicBufferIndex >= this.#musicBuffer.length) { // Remplissage du tampon avec l'extrait courant for (let i = 0; i < samples.length; i++) { this.#currentChannelData[this.#currentMusicBufferIndex + i] = samples[i] / 32767; } function playMusic(samples) { 1 2 3 const currentTime = this.#audioContext.currentTime; 4 const duration = this.#currentMusicBufferIndex / this.musicSampleRate; 5 // On planifie l'extrait pour qu'il se lance après le précédent 6 source.start(this.expectedBufferEndTime, 0, duration); 7 this.expectedBufferEndTime = currentTime + duration; 8 } 9 10 11 12 13 14 this.#currentMusicBufferIndex += samples.length; 15 } 16 // On planifie l'extrait pour qu'il se lance après le précédent source.start(this.expectedBufferEndTime, 0, duration); function playMusic(samples) { 1 // On lit le tampon audio s'il est assez rempli 2 if (this.#currentMusicBufferIndex >= this.#musicBuffer.length) { 3 const currentTime = this.#audioContext.currentTime; 4 const duration = this.#currentMusicBufferIndex / this.musicSampleRate; 5 6 7 this.expectedBufferEndTime = currentTime + duration; 8 } 9 // Remplissage du tampon avec l'extrait courant 10 for (let i = 0; i < samples.length; i++) { 11 this.#currentChannelData[this.#currentMusicBufferIndex + i] 12 = samples[i] / 32767; 13 } 14 this.#currentMusicBufferIndex += samples.length; 15 } 16 Inconvénient : la musique se lance avec un retard (le temps de remplir le premier tampon)
96. 0 1 2 3 1 1 2 3 0 1 2 3 Rendu des images tableau à 1 dimension + palette de couleurs 2 2 0 1 Image Palette de couleurs Canvas 12 * 4 bytes (r, g, b, a) chaque pixel contient l'id de la couleur
97. 0 1 2 3 1 1 2 3 0 1 2 3 Rendu des images tableau à 1 dimension + palette de couleurs 2 2 0 1 Image Palette de couleurs Canvas 12 * 4 bytes (r, g, b, a) chaque pixel contient l'id de la couleur
98. 0 1 2 3 1 1 2 3 0 1 2 3 Rendu des images tableau à 1 dimension + palette de couleurs 2 2 0 1 Image Palette de couleurs Canvas 12 * 4 bytes (r, g, b, a) chaque pixel contient l'id de la couleur
99. 0 1 2 3 1 1 2 3 0 1 2 3 Rendu des images tableau à 1 dimension + palette de couleurs 2 2 0 1 Image Palette de couleurs Canvas 12 * 4 bytes (r, g, b, a) chaque pixel contient l'id de la couleur
100. 0 1 2 3 1 1 2 3 0 1 2 3 Rendu des images tableau à 1 dimension + palette de couleurs 2 2 0 1 Image Palette de couleurs Canvas 12 * 4 bytes (r, g, b, a) chaque pixel contient l'id de la couleur
101. 0 1 2 3 1 1 2 3 0 1 2 3 Rendu des images tableau à 1 dimension + palette de couleurs 2 2 0 1 Image Palette de couleurs Canvas 12 * 4 bytes (r, g, b, a) chaque pixel contient l'id de la couleur
102. 0 1 2 3 1 1 2 3 0 1 2 3 Rendu des images tableau à 1 dimension + palette de couleurs 2 2 0 1 Image Palette de couleurs Canvas 12 * 4 bytes (r, g, b, a) Pixels distribués de haut en bas puis et de gauche à droite chaque pixel contient l'id de la couleur
103. Transmission des pixels du C# au JS namespace BlazorDoom { [SupportedOSPlatform("browser")] public partial class Renderer { [JSImport("drawOnCanvas", "blazorDoom/renderer.js")] internal static partial string renderOnJS(byte[] screenData, int[] colors); } } 1 2 3 4 5 6 7 8 9 10 export function drawOnCanvas(screenData, colors) { // } 1 2 3 public class DoomRenderer { // Called by updateGameState private void Display(uint[] colors) { BlazorDoom.Renderer.renderOnJS(screen.Data, (int[])((object)colors)); } } 1 2 3 4 5 6 7 8
104. Remplissage du canvas export function drawOnCanvas(screenData, colors) { const context = getCanvas().context; const imageData = context.createImageData(320, 200); let y = 0; let x = 0; for (let i = 0; i < screenData.length; i += 1) { const dataIndex = (y * width + x) * 4; setSinglePixel(imageData, dataIndex, colors, screenData[i]); if (y >= height - 1) { y = 0; x += 1; } else { y += 1; } } context.putImageData(imageData, 0, 0); } function setSinglePixel(imageData, dataIndex, colors, colorIndex) { const color = colors[colorIndex]; imageData.data[dataIndex] = color & 0xff; // R imageData.data[dataIndex + 1] = (color >> 8) & 0xff; // G imageData.data[dataIndex + 2] = (color >> 16) & 0xff; // B imageData.data[dataIndex + 3] = 255; // Alpha } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
105. Remplissage du canvas export function drawOnCanvas(screenData, colors) { const context = getCanvas().context; const imageData = context.createImageData(320, 200); let y = 0; let x = 0; for (let i = 0; i < screenData.length; i += 1) { const dataIndex = (y * width + x) * 4; setSinglePixel(imageData, dataIndex, colors, screenData[i]); if (y >= height - 1) { y = 0; x += 1; } else { y += 1; } } context.putImageData(imageData, 0, 0); } function setSinglePixel(imageData, dataIndex, colors, colorIndex) { const color = colors[colorIndex]; imageData.data[dataIndex] = color & 0xff; // R imageData.data[dataIndex + 1] = (color >> 8) & 0xff; // G imageData.data[dataIndex + 2] = (color >> 16) & 0xff; // B imageData.data[dataIndex + 3] = 255; // Alpha } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 if (y >= height - 1) { y = 0; x += 1; } else { y += 1; export function drawOnCanvas(screenData, colors) { 1 const context = getCanvas().context; 2 const imageData = context.createImageData(320, 200); 3 let y = 0; 4 let x = 0; 5 for (let i = 0; i < screenData.length; i += 1) { 6 const dataIndex = (y * width + x) * 4; 7 setSinglePixel(imageData, dataIndex, colors, screenData[i]); 8 9 10 11 12 13 } 14 } 15 context.putImageData(imageData, 0, 0); 16 } 17 18 function setSinglePixel(imageData, dataIndex, colors, colorIndex) { 19 const color = colors[colorIndex]; 20 imageData.data[dataIndex] = color & 0xff; // R 21 imageData.data[dataIndex + 1] = (color >> 8) & 0xff; // G 22 imageData.data[dataIndex + 2] = (color >> 16) & 0xff; // B 23 imageData.data[dataIndex + 3] = 255; // Alpha 24 } 25
106. Remplissage du canvas export function drawOnCanvas(screenData, colors) { const context = getCanvas().context; const imageData = context.createImageData(320, 200); let y = 0; let x = 0; for (let i = 0; i < screenData.length; i += 1) { const dataIndex = (y * width + x) * 4; setSinglePixel(imageData, dataIndex, colors, screenData[i]); if (y >= height - 1) { y = 0; x += 1; } else { y += 1; } } context.putImageData(imageData, 0, 0); } function setSinglePixel(imageData, dataIndex, colors, colorIndex) { const color = colors[colorIndex]; imageData.data[dataIndex] = color & 0xff; // R imageData.data[dataIndex + 1] = (color >> 8) & 0xff; // G imageData.data[dataIndex + 2] = (color >> 16) & 0xff; // B imageData.data[dataIndex + 3] = 255; // Alpha } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 if (y >= height - 1) { y = 0; x += 1; } else { y += 1; export function drawOnCanvas(screenData, colors) { 1 const context = getCanvas().context; 2 const imageData = context.createImageData(320, 200); 3 let y = 0; 4 let x = 0; 5 for (let i = 0; i < screenData.length; i += 1) { 6 const dataIndex = (y * width + x) * 4; 7 setSinglePixel(imageData, dataIndex, colors, screenData[i]); 8 9 10 11 12 13 } 14 } 15 context.putImageData(imageData, 0, 0); 16 } 17 18 function setSinglePixel(imageData, dataIndex, colors, colorIndex) { 19 const color = colors[colorIndex]; 20 imageData.data[dataIndex] = color & 0xff; // R 21 imageData.data[dataIndex + 1] = (color >> 8) & 0xff; // G 22 imageData.data[dataIndex + 2] = (color >> 16) & 0xff; // B 23 imageData.data[dataIndex + 3] = 255; // Alpha 24 } 25 setSinglePixel(imageData, dataIndex, colors, screenData[i]); function setSinglePixel(imageData, dataIndex, colors, colorIndex) { const color = colors[colorIndex]; imageData.data[dataIndex] = color & 0xff; // R imageData.data[dataIndex + 1] = (color >> 8) & 0xff; // G imageData.data[dataIndex + 2] = (color >> 16) & 0xff; // B imageData.data[dataIndex + 3] = 255; // Alpha } export function drawOnCanvas(screenData, colors) { 1 const context = getCanvas().context; 2 const imageData = context.createImageData(320, 200); 3 let y = 0; 4 let x = 0; 5 for (let i = 0; i < screenData.length; i += 1) { 6 const dataIndex = (y * width + x) * 4; 7 8 if (y >= height - 1) { 9 y = 0; 10 x += 1; 11 } else { 12 y += 1; 13 } 14 } 15 context.putImageData(imageData, 0, 0); 16 } 17 18 19 20 21 22 23 24 25
108. Fire / Tirer Valider / validate Open / Ouvrir Se déplacer Sélectionner un autre WAD
110. Les possibilités du WASM sont infinies
111. Les possibilités du WASM sont infinies Le portage est accessible à tous
112. Les possibilités du WASM sont infinies Le portage est accessible à tous Le dév de jeu est un bon moyen pour apprendre tout en s'amusant
113. @yostane Yassine Benabbas #TechAtWorldline
114. Liens et crédits https://mspoweruser.com/this-doom-digital-camera-source-port-is-amazing-and-bizarre/ https://www.link-cable.com/top-10-weird-doom-ports/ pixabay.com https://www.flaticon.com/ users: freepik Doom text generator: https://c.eev.ee/doom-text-generator Veuillez donner votre avis Diapositives Code source