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.

weiterlesen

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

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.

Jede Webseite wird heutzutage immer weiter mit JavaScript überladen. Da freut man sich mal, wenn man mal keines benutzen muss und nur mit HTML und CSS auskommt. In diesem Fall kann man mehrseitige Seiten oder Felder ohne JavaScript erzeugen, in dem man nur mit CSS3-Selektoren und angepassten <input>’s arbeitet. Das ganze ist kompatibel mit allen Browsern, die CSS3 Selektoren unterstützen.  

Input Checkbox als Trigger für Animationen

Im Prinzip verwendet man die Kombination aus den Selektoren ~ oder + und :checked, um relativ erreichbare Elemente zu manipulieren. Dazu platziert man ein ausgeblendetes  <input type="checkbox"> Element mit einem zugehörigen <label> als Auslöser und bindet mit ~ die Veränderungen daran. Im Folgend wird es an einem kleinen Codebeispiel gezeigt. Style:
#state:checked + #field {
  background-color:black;
}
#field {
  display: block;
  width: 100px;
  height: 100px;
  background-color: red;
  transition: background-color 0.2s;
  text-align: center;
  vertical-align: middle;
  line-height: 100px;
  color: wheat;
  margin: 10px;
}
#state {
  display:none;
}
Mit folgendem HTML:
<input type="checkbox" id="state">
<label id="field" for="state">Click Me</label>
Ergebnis:

Beispiel seitliches Klapp-Menü

Natürlich lässt sich dieses auch auf etwas anwenden. Zum Beispiel kann man ein Menü damit auf und zu klappen.

 

Erweiterung mit Radio-Input

Jetzt kann man noch eine Stufe weiter gehen und anstatt der einen Checkbox mehrere Radio’s (oder beides) nehmen und damit kann man mehrere Zustände abbilden und diese sogar miteinander kombinieren.

 

 

Fazit

Somit kann mit einfachen Mitteln eine komplexe Seite zusammengesetzt werden. Zum weiteren Optimieren der Ladezeit, kann man die Inhalte der versteckten Elemente erst später injizieren.