Web GameDev

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