Mit User Apps kann man immer wieder was dazu lernen. So ging es auch mir vor einigen Wochen, als ich erstmals mit den sogenannten Canvas in Berührung kam. Dank dem HTML User Interface ist es möglich, viele der neuen HTML5-Features zu verwenden. Da ich mein neues Spiel SkyJump! programmieren wollte, führte für mich kein Weg daran vorbei, mich mit Canvas zu beschäftigen. Tipps zum Starten mit Canvas und wie meine erste App damit aussieht, könnt ihr hier sehen.

Wenn man etwas programmiert und Neues erschafft, so komme ich mir wie eine Art Künstler vor. Die Pinsel stellen die Scriptsprachen dar und die Leinwände sind für mich nun Canvas.

Canvas muss man sich wie eine weiße Leinwand vorstellen, die darauf wartet von dir mit Leben gefüllt zu werden.

Bei Canvas handelt es sich um ein HTML5-Element, das mit Hilfe von JavaScript „bemalt“ werden kann. So ist es möglich beispielsweise Grafiken, Graphen, einfache Animationen oder sogar ganze Spiele zu programmieren und/oder anzeigen zu lassen. Gerade für User Apps ist es ein erheblicher Gewinn wenn man mit Canvas richtig umgehen kann. Doch aller Anfang ist schwer.

Wie man am besten mit Canvas beginnt

Einen wirklichen Tipp hab ich dafür nicht wirklich. Es ist wie immer in der Programmierung – man muss eine Idee haben. Sobald ihr ein konkretes Konzept habt oder wisst was ihr haben wollt, müsst ihr euch überlegen ob Canvas wirklich die richtige Wahl dafür sind. Es lässt sich sehr viel mit Canvas realisieren, aber für eine Quizapp wäre es meiner Meinung nach zu umständlich alles jedesmal dynamisch zu generieren. Für Jump ’n Run-Spiele allerdings ist es die optimale Wahl, da man gezielt mit Grafiken und den dazu gehörigen Berechnungen ganze Landschaften und Levels definieren kann ohne viel Aufwand zu betreiben. Dies war mit der Grund, warum ich mich bei der Entwicklung meiner neuen App SkyJump! für Canvas entschieden habe.

Wie sieht so ein Canvas aus

Wer im Internet sucht, findet einige gute Seiten die wirklich anfängerfreundlich die Arbeit mit Canvas erklären. Einige erklären erstmal die Funktionalitäten (was alles möglich ist) und andere arbeiten direkt mit einem Beispiel, das sie realisieren wollen. Da die Erklärung der einzelnen Funktionen die möglich sind, sehr zeitaufwendig wäre, folgt hier eine kleine Auflistung mit nützlichen Links rund um das Thema Canvas und HTML5 die auch mir geholfen haben:

• Allgemeine Erklärungen zu Canvas in deutscher Sprache
• Realisierung einer Uhr mit Schritt für Schritt-Anleitung in englischer Sprache

Warum man Canvas nutzen sollte

Canvas haben den großen Vorteil, dass man mit ihnen im Handumdrehen witzige Effekte und Spielereien gestalten kann, ohne auch nur ein Bildbearbeitungsprogramm bedienen zu müssen.

Ebenfalls positiv zu erwähnen ist die Tatsache, dass Canvas zum Standard von HTML5 gehören und durch die hohe Unterstützungsrate unter den Browsern so von allen modernen Browsern gleichermaßen unterstützt werden (auch Android und iOS!) und darum auch in jedem modernen Browser gleichermaßen verwendet werden können.

Meine erste eigene User App mit Canvas

Da ich ja bereits oben beschrieben habe, dass ich mich erst seit ein paar Wochen mit Canvas beschäftigte, wollte ich unbedingt mal austesten, was damit überhaupt möglich ist. Herausgekommen dabei ist SkyJump! Es ist ein Doodle Jump-Clone im knuddeligen Design, wie man es inzwischen von mir gewohnt ist.

Hierbei ist es die Aufgabe, einen Himmelsstürmer auf Wolken hüpfen zu lassen, damit er immer weiter nach oben kommt. Da aber Bilder mehr als tausend Worte sagen, habe ich euch ein kleines Video gemacht:

Details: Bei diesem Spiel werden Canvas und Divs verwendet um ein immer wieder individuelles Spielerlebnis zu ermöglichen. Sämtliche Spielobjekte werden dynamisch mit Javascript erstellt, berechnet und anschließend animiert. So ist jedes Spiel einzigartig und jedes Spiel etwas anders.

Ich freue mich auf euren Besuch im Channel SkyJump und viel Spaß bei euren ersten Schritten mit Canvas!