Tag: html-css

201419Nov

THREE.BasicThirdPersonGame: Ein WebGL-Game-Starterkit

Für die englische Version meiner Website habe ich ein kleines WebGL-Spiel entwickelt, bei dem es sich um einfaches Jump 'n' Run-Prinzip im dreidimensionalen Raum handelt. Dabei kommen die Bibliotheken THREE.js (3D-Engine) und Cannon.js (Physik-Engine) zum Einsatz. Während der Entwicklung des Spiels ist die Idee zu einem kleinen Framework gekommen, das jetzt unter dem Namen THREE.BasicThirdPersonGame als Open Source-Projekt bereitsteht.

THREE.BasicThirdPersonGame - Game Starter Kit in THREE.js + Cannon.js

Dabei handelt es sich also um eine Basis für mögliche 3D-WebGL-Browserspiele, bei denen der Spieler aus der Perspektive der dritten Person verfolgt wird. Während THREE.js die Darstellung übernimmt, sind durch Cannon.js physikalisch korrekte Berechnungen möglich, was sich unter Anderem durch die Verwendung von Starrkörpern (Rigid bodies) auszeichnet. Eine virtuelle Spielwelt kann dank Rigid bodies mit Eigenschaften wie Gravitation, Reibung und Federung versehen werden.

Weiterlesen...
201417Nov

CustomScrollbar: Eigene Scrollbars auf Websites nutzen

Das Thema ist zwar nicht gänzlich neu, aber aus gegebenem Anlass war es an der Zeit, eine eigene Entwicklung anzufertigen: Die Rede ist von individuellen Scrollbars auf Websites, die per CSS angepasst werden können. Bis heute gibt es keine native Möglichkeit, das Aussehen der Scrollbalken in Webbrowsern anzupassen. Zum einen sind die Scroll-Elemente in Browsern unterschiedlich implementiert (Chrome etwa kommt mit einer eigenen Lösung) und zum Anderen sind die Bedienelemente vom Betriebssystem abhängig. Natürlich gibt es bereits etliche JavaScript- oder jQuery-Lösungen für eigene Scrollbars, doch diese fallen sehr unterschiedlich aus. Ich habe daher ein kleines Skript entwickelt, das auf das eigentliche Verhalten der Browser-Scollbars zurückgreift und keine zusätzlichen Berechnungen benötigt.

CustomScrollbar - Eigene Scrollbars auf Websites nutzen

Dementsprechend bleibt das jeweilige Verhalten des Browser-Scrollings, was das Beschleunigen und Abbremsen des Scrollbalkens beinhaltet. Es wird also lediglich das native Scollbar-Element ausgeblendet und ein eigener div-Container wird darüber gelegt. Enstanden ist daraus schließlich CustomScrollbar, eine kompakte JavaScript-Lösung für die genannte Problematik.

Weiterlesen...
201419Sep

Timesheet.js: Skript für zeitbasierte Balkendiagramme

Um vergangene Ereignisse untereinander auf einer Zeitachse, ähnlich wie bei einem Gantt-Diagramm, darzustellen, gibt es verschiedene Möglichkeiten. Für JavaScript etwa könnte das Skript Timesheet.js behilflich sein, das eine derartige Visualisierung durch CSS3 ermöglicht. Die Mini-Bibliothek benötigt kein externes Framework und lässt sich schnell anpassen.

Timesheet.js - JavaScript library for simple HTML5 / CSS3 time sheets

Als Eingabe wird lediglich ein JavaScript-Array benötigt, das die verschiedenen Ereignisse in serialisierter Form beinhaltet. Timesheet.js kümmert sich um die Darstellung, wobei es einige Einschränkungen gibt: Per CSS ist eine feste Breite von 720px vorgegeben und auch ein Scrollen (wie etwa bei Chronoline.js) innerhalb des Bereichs, in dem die Daten dargestellt werden, ist nicht möglich. Hier muss unter Umständen also Hand angelegt werden, doch aufgrund der Einfachheit des Skripts dürfte dies kein Problem darstellen. Alles Weitere findet sich auf GitHub.

201415Sep

Chartist.js: Skript für responsive SVG-Diagramme

Sie heißen Highcharts, Raphaël, D3.js oder gar C3.js: Interaktive Chart-Bibliotheken, mit denen sich SVG-Diagramme aller Art erstellen lassen. Dank HTML5 ist die Darstellung von Vektorgrafiken und -Graphen kein Problem mehr und durch JavaScript lässt sich Interaktivität hinzufügen.
Dem Entwickler Gion Kunz genügte dieser Zustand allerdings noch nicht, denn er wollte eine SVG-Bibliothek, die noch einfacher zu konfigurieren ist und zudem auch mit responsiven Websites funktioniert. Daher schuf er das Skript Chartist.js, dessen Diagramme sich unter Anderem mit CSS und SASS anpassen lassen. Hier sind zudem Animationen möglich.

Chartist.js - Simple responsive charts

Weiterhin lässt sich die Bibliothek per JavaScript konfigurieren, wobei hier auf eine Art Media Queries zurückgegriffen werden kann:

  • var responsiveOptions = [
  • ['screen and (max-width: 640px)', {
  • showLine: false,
  • axisX: {
  • labelInterpolationFnc: function(value) {
  • return 'Week ' + value;
  • }
  • }
  • }]
  • ];

Dadurch sind auch skalierbare Auswertungen einfach umzusetzen, die zudem auf Smartphones und Tablets optimiert werden können. Mehr Infos gibt es wieder bei GitHub.

201429Aug

Marka: Skript für animierte CSS3-Icon-Transformationen

Mit HTML, CSS3 und entsprechenden Stilen lassen sich diverse Symbole erzeugen. Mit etwas JavaScript können dann animierte Transformationen durchgeführt werden, die beispielsweise an ein Klick-Ereignis gekoppelt sind. Wofür solche Transformationen gut sein können, ist beispielsweise in Googles Design Guidelines für das neue Material Design zu sehen. Auf mobilen Geräten können derartige Animationen verwendet werden, um ein verbessertes Verständnis der verschiedenen Navigationsebenen zu ermöglichen.
Mit Marka steht eine kompakte JavaScript/CSS3-Lösung bereit, mit der sich genau solche Animationen erzeugen lassen.

Marka - Beautiful transformable icons

Mit der Bibliothek kommen 36 einfache Icons die per JavaScript animiert werden können. Neben Form-Transformationen können auch Farbübergänge erzeugt werden. Eine genaue Dokumentation findet sich hier und das gesamte Projekt gibt es wieder bei GitHub.

201310Dez

Type Rendering Mix: Web-Schriftarten richtig glätten

Individuelle Schriftarten auf einer Website sind in erster Linie etwas Positives, da sie dem angedachten Design gerecht werden und für mehr Harmonie sorgen, wenn die gesamte Typografie entsprechend abgestimmt wurde. Allerdings werden Web-Schriftarten nicht in allen Browsern und Betriebssystemen gleich dargestellt. Ich hatte vor einiger Zeit berichtet, da seit Windows Vista und einer aktivierten Hardwarebeschleunigung das GDI-Rendering durch DirectWrite ersetzt wurde. Unter Mac OS X und iOS kommt das Font-Rendering "Core Text" zum Einsatz, das alle Schriftarten etwas kräftiger darstellt. Unter Android und Linux wiederum werden Texte durch FreeType angezeigt.
Um den verschiedenen Betriebssystemen und Browsern gerecht zu werden, kann das Skript Type Rendering Mix genutzt werden: Hiermit werden 2 CSS-Klassen auf das "html"-Element angewendet, die Aufschluss über das Font-Rendering (Rasterizer und Anti-Aliasing-Methode) geben.

Type Rendering Mix - Apply CSS based on the text rasterizer and antialiasing your browser is using

Wenn in einem Webdesign also eine eigene Schriftart verwendet wird, kann die CSS-Klasse "tr-coretext" beispielsweise so angepasst werden, das hier ein leichterer Schriftschnitt verwendet wird (font-weight). So kann in den unterschiedlichen Systemen ein einheitliches Schriftbild besser gewährleistet werden.

201303Dez

HTML5: Tutorial für verschiedene Canvas-Zeicheneffekte

Browser-Zeichentools wie Sketchpad, Harmony oder Livebrush sind inzwischen bekannt. Die Apps sind unterschiedlich komplex und doch sind viele der eingebauten Zeicheneffekte relativ unkompliziert in der Programmierung. Juriy Zaytsev, besser bekannt ist als "kangax" und Schöpfer des unverzichtbaren "ECMAScript 5 compatibility tables", hat einen interessanten Artikel über die Erstellung verschiedener Zeicheneffekte mit dem HTML5-Canvas-Element veröffentlicht.

Perfection Kills -  Exploring canvas drawing techniques

In dem Beitrag erklärt der ehemalige Prototype.js-Core-Entwickler Stück für Stück Möglichkeiten, um eine virtuelle Zeichenfläche bzw. entsprechende Pinsel mit JavaScript zu erzeugen. Vom punkt-basierten Ansatz über Kantenglättung und Bezier-Kurven bis hin zu multiplen Pinselspitzen dürfte für jeden Geschmack etwas dabei sein. Alle Pinsel könne direkt über die eingebundenen CodePen-Widgets ausprobiert und angepasst werden. Viel Spaß beim Zeichnen!

201330Nov

Webentwicklung: Interaktive Tutorials für HTML5-Games

Seit der Einführung des Canvas-Elements steht auch HTML-Spieleentwicklern eine Grafikschnittstelle zur Verfügung, mit der sich auch komplexere Animationen und Effekte umsetzen lassen. Dabei muss nicht mehr auf CSS ausgewichen werden und zudem ist die Entwicklung dank JavaScript und der Canvas-API denkbar einfach. Doch ein HTML5-Spiel besteht nicht nur aus der Kommunikation mit der Schnittstelle, sondern erfordert vor allem Kreativität und natürlich Verständnis für mathematische Gegebenheiten.
Bei Crunchzilla finden sich interaktive Anleitungen für die Entwicklung von Browser-Games: Dabei sind die Tutorials in die Bereiche "Code Monster", "Code Maven" und "Game Maven" unterteilt.

Crunchzilla - Interaktive Tutorials für HTML5-Games

Die Bereiche sind sowohl an Jugendliche als auch an Erwachsene gerichtet: In einem Live-Editor kann JavaScript-Code bearbeitet werden und rechts daneben findet sich die entsprechende Echtzeit-Vorschau. Ein virtueller Mentor führt angehende Spieleentwickler von Beginn an durch die verschiedenen Kurse und gibt Tipps zur Entwicklung bestimmter Szenarien. So werden nach und nach kleine Spiele im Browser entwickelt, die sich durchaus sehen lassen können.