Seite 2 von 5

Phaser Tutorial: Wie erstelle ich ein Snake Spiel mit Phaser?

Im folgenden Tutorial wird erklärt, wie man ein Snake-Spiel mit Phaser entwirft und entwickelt. Das Spiel habe ich vor einiger Zeit hier vorgestellt. Verfügbar ist es im Browser und für Android im Play Store.
Weiterlesen

ProcessWire: SEO mit Meta Tags

Suchmaschinenoptimierung (SEO) ist ein Thema, dass man nicht vernachlässigen sollte. Da Suchmaschinen den Inhalt von <meta>-Tags mitunter mehr oder weniger berücksichtigen und anzeigen, zeige ich im Fogenden, wie man die gängigen Meta-Tags in ProcessWire einbinden kann. Dazu erstellt man zuerst die notwendigen Felder und fügt diese dann bei den Templates ein. Zuzüglich müssen diese dann noch im <head>-Tag des Templates eingefügt werden. Das ganze gibt es auch hier als benutzerfreundliches Modul, nur unterstützt es noch nicht nofollow und noindex und lässt sich weniger individualisieren.
Weiterlesen

Audio Router: Verwaltet die Audio-Ausgabe von Programmen unter Windows

Schon lange bin ich auf der Suche nach einem Programm, dass anderen Programmen ein Ausgabegerät zur Tonausgabe zuweisen kann. Wenn man zum Beispiel folgendes Szenario hat: Die Kopfhörer sind vorne und die Stereoanlage ist hinten am PC angeschlossen. Nun möchte man mit dem Browser über die Stereo-Anlage Musik hören und auf den Kopfhörern gleichzeitig was anderes, dann kann man das nicht mit Windows Bordmitteln umsetzen, außer eines der beiden Programme unterstützt die Auswahl des Ausgabegeräts. Das liegt daran, dass Windows alle Programme immer auf dem Standardgerät abspielt, außer die Programme sagen was anderes.

Das Programm Audio Router

Audio Router kann dieses ändern. Ein findiger Hacker hat sich die undokumentierte Sound-Api von Windows angesehen und diese Extrafunktion realisiert. Mit dem Programm kann man anderen Programmen ganz einfach ein Ausgabegerät zuweisen ohne, dass dieses neu geöffnet werden muss. Zusätzlich kann es die Audioausgabe auch spiegeln, sodass auf mehren Geräten derselbe Ton abgespielt wird. Das ganze Funktioniert von Spielen bis hin zu Spotify und Browsern sehr gut.

Das Programm muss nicht installiert werden, aber es benötigt das .Net-Framework zum Laufen. Nachdem man es geöffnet hat, erscheint ein Fenster mit einer Übersicht der installierten Abspielgeräte und der abspielenden Programme. Um das Ausgabegerät zu ändern, reicht ein Klick auf den Pfeil bei dem gewünschten Programm. Danach wählt man zwischen Duplizieren oder Route aus und bestätigt es mit dem gewünschten Zielgerät. 

Wer jetzt noch mehr aus seine Soundkarte raus holen möchte, kann sich ja mal den Softwaremixer und virtuellem Audiokabel Voicemeeter Banana anschauen.

Windows 10

Anscheinend gibt es bei einigen Probleme mit Windows 10. Ich habe mit Windows 10 (64-Bit) auch einige Einschränkungen. Es lässt sich eigentlich nur ein Programm zuweisen, aber das muss geschehen, bevor es Ton abspielt, da sonst der Ton der Anwendung komplett verschwindet. Weiteres Zuweisen ist meist nicht mehr möglich, aber manchmal schon (?). Es kommt dann zu einem „Error Code 0x00000005: Zugriff verweigert“ oder zu keiner Fehlermeldung.

Eine „Lösung“ ist das Zielprogramm, welches geroutet werden soll, als Administrator zu starten. So lässt sich das Programm zumindest sicher routen, aber einen Browser oder ein Spiel dauerhaft als Administrator auszuführen ist keine gute Idee!

Webpack: Phaser Template

Hier habe ich für Webpack ziemlich gute Töne angeschlagen, jetzt solle ich es auch mal ein bisschen untermauern.

Im Folgenden stelle ich eine Basistemplate für Phaser vor, welches hier veröffentlicht ist. Das Template unterstützt die Entwicklung in JavaScript und TypeScript. Weiterhin kopiert es die eingebundenen Assets in den Build-Ordner. Es werden Assets in den Formaten .png, .ogg, .mp3 und .json unterstützt. Bilder werden dabei maximal Optimiert.

Installation

Das Template setzt node.js und npm als installiert voraus. Mit npm installiert ihr webpack global und installiert mit die definierten Abhängigkeiten.

npm install -g webpack 
npm install 

Entwicklung starten

Mit npm run dev kann es auch schon mit dem Programmieren losgehen. Mit dem Befehl werden alle mit require(...) eingebunden Ressourcen im Ordner /build/ gebündelt. Der JavaScript Code wird gebündelt und Grafiken werden dabei optimiert. Gleichzeitig wird Webpack angewiesen, so lange es aktiv ist, alle zukünftigen Änderungen am Quellcode sofort zu integrieren. Zuletzt wird ein lokaler Web-Server auf dem Port 3000 gestartet. Wenn man nun localhost:3000/index.html aufruft, kann man gleich mit dem Testen loslegen. Hierbei werden Änderungen am Code auch gleich im Browser aktualisiert.

Die Entwicklung des Spiels findet im Ordner src statt, hier werden alle Asset- und JavaScript-Dateien abgelegt. Damit die Assets ordentlich geladen werden, müssen sie mit require('Pfad/zu') eingebunden werden, wie hier zu sehen. Das Sorgt dafür, dass die Dateien automatisch zu den Builds hinzugefügt werden.

Veröffentlichen

Mit npm run release wird Webpack mit der Konfigurations-Datei webpack.release.config.js gestartet. Dabei wird im Ordner /release/ ein komplett optimiertes Build abgelegt. Sprich, die Bilder sind optimiert und das JavaScript ist zusammengefasst und komprimiert. Eine SourceMap wird nicht erzeugt. Wenn man in der Webpack-Konfigruration einen „publicPath“ definiert, werden alle Ressourcen mit diesem Pfad versehen und von dort geladen.

© 2017 Johannes Wiese

Theme von Anders Norén↑ ↑