[Projekt] Slope
Verfasst: 04.12.2010, 12:05
Hi,
im Rahmen des Sppro.de-Processing.js-1-Woche-Wettbewerbs für ein kleines Minispiel mit maximal 5 sichtbaren primitiven zur selben Zeit auf dem Bildschirm und gezippt in maximal 4K habe auch ich ein kleines Spiel entwickelt. Da ich von JavaScript das letzte mal vor etwa 5 Jahren Gebrauch gemacht hatte, war ich anfangs etwas skeptisch bezüglich erreichbarer Leistung und Funktionalität, allerdings bietet Processing.js hier mit einem recht kleinen Set an Funktionen einen ganz beachtlichen Rahmen, mit dem sich schnell und leicht auch etwas komplexere Projekte umsetzen lassen. Etwas störend ist, dass Processing.js offenbar als RegEx-Parser realisiert wurde, um eine Java-Schnittstelle und somit Kompatibilität zur Processing-Sprache auch in JavaScript vorzutäuscht, was zwar verdammt gut gelingt, jedoch sind dadurch Fehlermeldungen, sofern überhaupt vorhanden, selten hilfreich. Dafür bietet Processing.js aber eine nette Konsole für 1A printf-Debugging. ;)
Allerdings habe ich an diesem Wettbewerb nicht nur teilgenommen, um mal wieder ein Gefühl für die aktuelle Leistungsfähigkeit von JavaScript zu bekommen, sondern auch, weil ich so endlich mal Gelegenheit hatte, selbst ein wenig 2D-Physik zu implementieren. In dieser Sache kam mir, insbesondere bei der Einbeziehung von Drehimpulsen, die großartige Artikelreihe von Chris Hecker zum Thema Physiksimulation sehr gelegen. Problematisch war am Ende vor allem das Auflösen von sich überschneidenden Objekten, Chris Hecker schlägt hier eine Bisektionssuche nach dem ersten Kontaktpunkt in der Zeit vor. Diese konnte ich im Rahmen der Größenbeschränkung leider nicht umfassend und so stabil genug umsetzen, weswegen ich am Ende die Kollisionserkennung semidynamisch um eine Schätzung der Eindringungstiefe und -richtung erweitert und Objektpositionen schlicht entsprechend korrigiert habe.
Steuerung
Rollen / in der Luft ausrichten: Pfeiltasten / AD
Auf dem Boden anschieben: Pfeiltasten / AD
Springen: Pfeiltaste / W / Space
Interaktive Version (erfordert HTML5-Browser mit aktiviertem JavaScript)
... in 4K: http://dl.dropbox.com/u/1973074/livedev ... eFinal.zip (erfordert das Contest-Bibliothekspaket)
... online: http://dl.dropbox.com/u/1973074/livedev ... Final.html
Bilder
im Rahmen des Sppro.de-Processing.js-1-Woche-Wettbewerbs für ein kleines Minispiel mit maximal 5 sichtbaren primitiven zur selben Zeit auf dem Bildschirm und gezippt in maximal 4K habe auch ich ein kleines Spiel entwickelt. Da ich von JavaScript das letzte mal vor etwa 5 Jahren Gebrauch gemacht hatte, war ich anfangs etwas skeptisch bezüglich erreichbarer Leistung und Funktionalität, allerdings bietet Processing.js hier mit einem recht kleinen Set an Funktionen einen ganz beachtlichen Rahmen, mit dem sich schnell und leicht auch etwas komplexere Projekte umsetzen lassen. Etwas störend ist, dass Processing.js offenbar als RegEx-Parser realisiert wurde, um eine Java-Schnittstelle und somit Kompatibilität zur Processing-Sprache auch in JavaScript vorzutäuscht, was zwar verdammt gut gelingt, jedoch sind dadurch Fehlermeldungen, sofern überhaupt vorhanden, selten hilfreich. Dafür bietet Processing.js aber eine nette Konsole für 1A printf-Debugging. ;)
Allerdings habe ich an diesem Wettbewerb nicht nur teilgenommen, um mal wieder ein Gefühl für die aktuelle Leistungsfähigkeit von JavaScript zu bekommen, sondern auch, weil ich so endlich mal Gelegenheit hatte, selbst ein wenig 2D-Physik zu implementieren. In dieser Sache kam mir, insbesondere bei der Einbeziehung von Drehimpulsen, die großartige Artikelreihe von Chris Hecker zum Thema Physiksimulation sehr gelegen. Problematisch war am Ende vor allem das Auflösen von sich überschneidenden Objekten, Chris Hecker schlägt hier eine Bisektionssuche nach dem ersten Kontaktpunkt in der Zeit vor. Diese konnte ich im Rahmen der Größenbeschränkung leider nicht umfassend und so stabil genug umsetzen, weswegen ich am Ende die Kollisionserkennung semidynamisch um eine Schätzung der Eindringungstiefe und -richtung erweitert und Objektpositionen schlicht entsprechend korrigiert habe.
Steuerung
Rollen / in der Luft ausrichten: Pfeiltasten / AD
Auf dem Boden anschieben: Pfeiltasten / AD
Springen: Pfeiltaste / W / Space
Interaktive Version (erfordert HTML5-Browser mit aktiviertem JavaScript)
... in 4K: http://dl.dropbox.com/u/1973074/livedev ... eFinal.zip (erfordert das Contest-Bibliothekspaket)
... online: http://dl.dropbox.com/u/1973074/livedev ... Final.html
Bilder