Organisation/Initialisierung eines Phaser Projekts

Im folgenden Tutorial werden einige verschiedene Möglichkeiten gezeigt, wie man Phaser Initialisieren und die Funktionen des Spiels organisieren kann. Beginnend dabei, dass alles im globalen Scope abgelegt wird, über die Zusammenfassung in einem State, bis hin, dass der State von Phaser.State erbt. Wenn man sein Projekt in mehrere Dateien aufteilen möchte, sollte man zusätzlich ein Blick auf Webpack, Grunt, Browserify und RequireJs werfen.

(mehr …)

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.
(mehr …)

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.