Sep 08 2024 65 mins 16
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
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
