Web GameDev

GameDev nach Feierabend - der Hobby Spieleentwickler Podcast

Viele Engines bieten einen Web-Export an. Andererseits gibt es auch Engines direkt fürs Web. Wofür das gut ist und wofür nicht, klären wir in dieser Folge. Welche Unterschiede gibt es zwischen einem Web-Export in einer herkömmlichen Engine und einem Spiel, welches direkt fürs Web entwickelt wurde? Welche Vorteile hat es für SpielerInnen, welche in der Entwicklung? Mit welchen Limitationen muss man klarkommen? Wir stellen ein paar Tools und Engines vor, die für Web-Games geeignet sind, erklären den Unterschied zwischen DOM-basierten und Canvas-basierten Games und spinnen darüber hinaus ein bisschen rum, welche Web-Tools man wie zweckentfremden kann, um sie in der Entwicklung einzusetzen, oder welche Web-Features auch in herkömmlichen Games sinnvoll sind. Außerdem haben wir neu und shiny einen Discord-Server, auf denm ihr mit uns über diese Folge, unsere anderen Folgen, eure Projekte und alle Themen rund um die Entwicklung von Spielen diskutieren könnt:https://discord.gg/shHJPUd2Ww -- CSS-Property zum Rendern von Pixel-Art -- Wenn man Bilder für Pixel-Art Spiele hochskalieren möchte, wird hierbei per Default eine Interpolation angewandt. Dadurch sehen die Bilder eher unscharf aus, als pixelig. Um dies zu umgehen, kann man die folgende CSS-Eigenschaft verwenden: image-rendering: pixelated; -- Links -- -- Unsere Web Games -- - Ritual Tycoon (https://ritualtycoon.github.io/RitualTycoon/) - HTML5 Game von uns vom GGJ 2016 - rubbrl4zr (GGJ Seite) (https://v3.globalgamejam.org/2017/games/rubbrl4zr) - YouTube-Video von "Rubberlaser" - Ein HTML5 Game von uns vom GGJ 2017 (YouTube-Video (https://www.youtube.com/watch?v=30fSsyqXZ-E)) - JNTetri (https://jntetri.boomshine.de/) - Multiplayer Tetris-Klon in JNGL, im Browser lauffähig - Critical Mission (https://cpfr.gitlab.io/CriticalMissionWebsite/) - Ein Artemis-Klon von Carsten - vor langer Zeit angefangen und nie fertiggestellt... -- Andere erwähnte Spiele -- - Artemis Spaceship Bridge Simulator (https://www.artemisspaceshipbridge.com) - Ein Local-Multiplayer-Co-op-Spiel, das eine Raumschiffbrücke simuliert - Empty Epsilon (https://daid.github.io/EmptyEpsilon/) - Ein Artemis-Klon, OpenSource - MonstersGame (www.monstersgame.de) - Browserspiel aus dem Jahr 2005 (gibt es immer noch) -- Sonstige Links -- - ElectronJS (https://www.electronjs.org/) - Das Tool, um Web-Apps als native Desktop-Applikationen zu verpacken - Discord Game SDK (https://discord.com/developers/docs/developer-tools/game-sdk) - Discords API für Games (einige Features sind bereits deprecated) - Creating a 13KB JS Game using SVG (https://dev.to/lopis/creating-a-13kb-js-game-using-svg-5fjk) - Ein Artikel über Spieleentwicklung mit SVG - Practical SVG (https://practical-svg.chriscoyier.net/) - Ein kurzes Buch rund um das Vektorgrafikformat SVG - Web RTC Data Channels (https://developer.mozilla.org/en-US/docs/Games/Techniques/WebRTC_data_channels) - Dokumentation auf MDN (Mozilla Developer Network) - Audio for Web games (https://developer.mozilla.org/en-US/docs/Games/Techniques/Audio_for_Web_Games) - Dokumentation auf MDN (Mozilla Developer Network) - 2D collision detection (https://developer.mozilla.org/en-US/docs/Games/Techniques/2D_collision_detection) - Dokumentation auf MDN (Mozilla Developer Network) - Game From Scratch - Unity Pricing Changes (https://gamefromscratch.com/unity-announce-massive-pricing-changes/) - hier ging es um die Unity Logo Policy (ab Minute 7:20) - Godot Online Editor (https://editor.godotengine.org/releases/4.3.stable/godot.editor.html) - Godot bietet ebenfalls einen Online-Editor an. Vielen Dank an smarty aus dem Discord für diesen Hinweis! - Gdevelop Web Editor (https://editor.gdevelop.io/) - Simon vom GameDev-Podcast hat uns darauf hingewiesen, dass GDevelop ebenfalls einen Online-Editor anbietet. Vielen Dank dafür! -- Engines & Libraries (Fokus auf "free" und "open source") -- - Phaser (https://phaser.io/) - 2D Game Engine für Javascript (MIT-Lizenz, proprietärer Editor) - Kaplay (https://kaplayjs.com/) - Sehr einfache 2D Game Engine für JS (MIT-Lizenz) - Three.js (https://threejs.org/) - 3D Grafik-Library für Javascript (MIT-Lizenz) - BabylonJS (https://babylonjs.com/) - 3D Game Engine für Javascript (Apache 2.0 - Lizenz) - PlayCanvas (https://playcanvas.com/) - Game Engine für Javascript, auch 3D (MIT-Lizenz, proprietärer Editor) -- Physik: -- - ammo.js (https://github.com/kripken/ammo.js) - Javascript-Port von Bullet Physics (zlib-Lizenz, die Dokumentation soll lückenhaft sein) - box2d.js (https://github.com/kripken/box2d.js/) - Javascript-Port von Box2D, für 2D Physik (zlib-Lizenz) - planck.js (https://github.com/piqnt/planck.js) - Javascript-Rewrite von Box2D, für 2D Physik (MIT-Lizenz) - matter.js (https://github.com/liabru/matter-js) - 2D Physik Engine für Javascript (MIT-Lizenz) -- Gamepad API -- - Gamepad API (https://developer.mozilla.org/en-US/docs/Web/API/Gamepad_API) - Mozilla Developer Network (MDN) Beschreibung der HTML5 Gamepad API - Using the Gamepad API (https://developer.mozilla.org/en-US/docs/Web/API/Gamepad_API/Using_the_Gamepad_API) - Mozilla Developer Network (MDN) Anleitung zur Gamepad API -- YouTube-Kanäle zum Thema -- - SimonDev (https://www.youtube.com/@simondev758) - (nicht der Simon vom GameDev-Podcast 😉) Ein YouTube-Kanal mit viel Three-JS-Content - BabylonJS (https://www.youtube.com/@BabylonJSEngine) - Offizieller BabylonJS-Kanal mit Turorials und Updates - RedStapler (https://www.youtube.com/@RedStapler_channel) - YouTube-Kanal mit vielen Tricks und Hacks zu CSS

अध्यायों

1. Begrüßung (00:00:18)

2. Rebranding (00:00:28)

3. Discord-Server (00:01:00)

4. Wie sind wir auf das Thema gekommen? (00:01:17)

5. LG-Hackathon (00:02:15)

6. Warum sollte man Spiele ins Web bringen? / Rückblick auf Flash Games (00:03:39)

7. Sicherheitsaspekte (00:04:18)

8. Der Browser kann was (00:07:25)

9. Web-Variante in CI-Pipeline deployen (00:08:04)

10. Spiele, die auf jeden Fall in den Browser gehören (00:09:00)

11. Nachteile von Games im Browser: Performance und Berechtigungen (00:10:42)

12. Nicht-technische Gründe, die gegen Games im Browser sprechen (00:11:30)

13. Browser Sandbox und Filesystem-Zugriffe (00:12:01)

14. Web Games auf Steam? (00:12:50)

15. Progressive Web Apps installieren (00:13:30)

16. Javascript muss man schon mögen... (00:14:03)

17. Web Assembly (00:14:35)

18. Zwei verschiedene Arten und Weisen, Games fürs Web zu machen (00:16:21)

19. Keine Web-Exporte in Unreal (00:16:47)

20. Logo-Zwang bei Unity, Logo-Verbot bei Unreal (00:17:28)

21. Was ist Emscripten? (00:18:41)

22. LLVM & Compiler (00:19:00)

23. Vorteile von Web-Exporten (00:20:43)

24. Vorteile, Spiele Direkt für's Web zu machen (00:20:59)

25. DOM-basierte Spiele (00:22:24)

26. Klassische Browsergames (z.B. Monstersgame) (00:23:47)

27. Ritual Tycoon (00:24:28)

28. Animierte GIFs und Pixel-Art ohne Interpolation (00:25:05)

29. Rubberlaser (00:26:25)

30. HTML5 Canvas (00:27:06)

31. Game Loop / Main Loop im Browser: requestAnimationFrame (00:28:20)

32. 3D-Sachen auf ein Canvas malen (00:30:37)

33. Games mit SVGs umsetzen? (00:31:10)

34. Engines für's Web (00:32:48)

35. Phaser (00:33:18)

36. Kaplay.js (00:33:59)

37. Three.js (00:34:27)

38. BabylonJS (00:36:09)

39. Gegenüberstellung Three.js vs. BabylonJS (00:37:09)

40. PlayCanvas (00:38:48)

41. Gamepad API (00:39:15)

42. Physik-Engines für den Browser (00:39:28)

43. GameDev-Tools im Browser (00:40:00)

44. Critical Mission: Eine Raumschiff-Brückensimulation (00:40:20)

45. Der Browser als Entwicklungsumgebung? (00:43:34)

46. Schnack Dialog Editor und Electron Apps (00:45:02)

47. GameDev-Tools auf Itch.io im Browser (00:49:51)

48. ALPACA im Web? (00:50:31)

49. Wie Cloud-Features anbieten, ohne Cloud-Services bezahlen zu müssen? (00:51:50)

50. Discord API (00:52:59)

51. Plugin-Store mit Gitlab? (00:54:05)

52. Multiplayer, Websockets und Web RTC (00:55:12)

53. VSCode ist auch nur eine Website (00:58:58)

54. Machst du's schon und wenn ja warum nicht? (00:59:56)

55. Das Web als Einstiegsplattform für's Programmieren-Lernen (01:00:55)

56. Witz (01:03:28)

57. Kommentare (01:03:43)

58. Outro (01:04:46)

59. Outtakes (01:05:06)