Archiv der Kategorie: Javascript

Games: Riamond Rush

Nach einer kleinen anfänglichen JavaScript Spielerei hat es Riamond Rush nun endlich in den ersten Store geschafft. Google play macht den Anfang und auch der Einzug in den iTunes App Store ist schon in Planung. Dank Ludei ist es ein leichtes sein HTML5 Spiel/App auf verschiedene Plattformen zu „portieren“.

Wer kein Smartphone besitzt kann Riamond Rush auch im Browser (bevorzugt Chrome ;-) am Rechner spielen.

Je nach Endgerät unterscheidet sich etwas die Steuerung. Im Browser wird Riamond mit den Cursortasten gesteuert, mit D kann man Ihn zum graben bewegen falls es das Level erlaubt. Falls man sich in einem Level in eine ausweglose Situation gebracht hat wird dieses mit R neu gestartet.

Auf Smartphones/Tablets gehorcht Riamond dem Finger auf dem Touchdisplay. Gegraben wird mit dem Button unten rechts, Levelneustart mit Button oben rechts.

Viel Spaß beim spielen!

 

TYPO3: RTE – Javascript in href nutzen

Manchmal möchte man gerne anstatt der zur Verfügung stehenden Linkmöglichkeiten des Wizards in RTE direkt eine Javascript Funktion aufrufen.

Wechselt man z.B. im Textelement im RTE in die HTML Ansicht, kann unten stehendes Markup einkopiert werden. Mit den zusätzlichen Attributen lässt der RTE das href Attribut in Ruhe und lässt dieses so wie es ist.

<a href="javascript:mySuperFunc()" data-htmlarea-external="1" rtekeep="1">JS href link in RTE</a>

 

Monkey-X: Yame – yet another monkey editor ;-)

yame-editor-monkeyIch hatte Zeit und Lust einen Editor oder eine mini IDE für Monkey-X zu schreiben. Dieser verwendet als Basis das MacGap Projekt. Um Zugriff auf das lokale Dateisystem zu bekommen wurde dieses von mir leicht modifiziert. MacGap selbst ist ähnlich zu PhoneGap ein HTML5 Wrapper in dem HTML5 Anwendungen auf dem Desktop laufen können.

Als Herz des Editors kommt ACE zum Einsatz, dieser wurde um einen neuen Highlighting Modus für Monkey erweitert. Codefolding wäre theoretischer weise möglich, aber da steige ich ganz ehrlich gesagt gerade nicht ganz durch ;o)

Ziel war es die Mac typischen Shortcuts und Drag’n’Drop Funktionalität zu haben und den Editor selbst minimalistisch zu halten. Dieser wurde von mir auf den  Name (yet another monkey editor) getauft ;-)

Download:
https://www.motions-media.de/developing/yame/Yame.app.zip

Sources:
http://github.com/samowitsch/macgap/tree/yame
http://github.com/samowitsch/ace/tree/monkey

Extbase / Fluid: Image ViewHelper erweitern für Lazyloading

Mobile ist im kommen. Vielleicht kann es auch auf umfangreichen Seiten mit vielen Bilder nötig sein, Bilder erst zu laden wenn diese im sichtbaren Bereich erscheinen um Ladezeiten zu verkürzen bzw. aufzuteilen. Twitter und Facebook nutzen diese Technik und bei der Bildersuche in Suchmaschinen dürfte dieses Feature schon mal aufgefallen sein.

Im jQuery Plugin Fundus gibt es eine Lösung: Lazy Load Plugin for jQuery . Weitere Argumente für Lazy Loading sind auf dieser Homepage zu finden ;-)

Und zu guter letzt auch noch ein LazyImage ViewHelper für Fluid. Dieser erweitert den Standard ViewHelper und tauscht das „src“-Attribut gegen das „data-original“-Attribut für das jQuery Plugin.

<?php
namespace YourVendor\YourExtKey\ViewHelpers;

/***************************************************************
 *  Copyright notice
 *
 *  All rights reserved
 *
 *  This script is part of the TYPO3 project. The TYPO3 project is
 *  free software; you can redistribute it and/or modify
 *  it under the terms of the GNU General Public License as published by
 *  the Free Software Foundation; either version 2 of the License, or
 *  (at your option) any later version.
 *
 *  The GNU General Public License can be found at
 *  http://www.gnu.org/copyleft/gpl.html.
 *
 *  This script is distributed in the hope that it will be useful,
 *  but WITHOUT ANY WARRANTY; without even the implied warranty of
 *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 *  GNU General Public License for more details.
 *
 *  This copyright notice MUST APPEAR in all copies of the script!
 ***************************************************************/

class LazyImageViewHelper extends \TYPO3\CMS\Fluid\ViewHelpers\ImageViewHelper {

	/**
	 * Initialize arguments.
	 *
	 * @return void
	 */
	public function initializeArguments() {
		parent::initializeArguments();
		$this->registerTagAttribute('data-original', 'string', 'original image for lazy loading', FALSE);
	}

	/**
	 * Resizes a given image (if required) and renders the respective img tag
	 *
	 * @see http://typo3.org/documentation/document-library/references/doc_core_tsref/4.2.0/view/1/5/#id4164427
	 * @param string $src a path to a file, a combined FAL identifier or an uid (integer). If $treatIdAsReference is set, the integer is considered the uid of the sys_file_reference record. If you already got a FAL object, consider using the $image parameter instead
	 * @param string $width width of the image. This can be a numeric value representing the fixed width of the image in pixels. But you can also perform simple calculations by adding "m" or "c" to the value. See imgResource.width for possible options.
	 * @param string $height height of the image. This can be a numeric value representing the fixed height of the image in pixels. But you can also perform simple calculations by adding "m" or "c" to the value. See imgResource.width for possible options.
	 * @param integer $minWidth minimum width of the image
	 * @param integer $minHeight minimum height of the image
	 * @param integer $maxWidth maximum width of the image
	 * @param integer $maxHeight maximum height of the image
	 * @param boolean $treatIdAsReference given src argument is a sys_file_reference record
	 * @param FileInterface|AbstractFileFolder $image a FAL object
	 *
	 * @throws \TYPO3\CMS\Fluid\Core\ViewHelper\Exception
	 * @return string Rendered tag
	 */
	public function render($src = NULL, $width = NULL, $height = NULL, $minWidth = NULL, $minHeight = NULL, $maxWidth = NULL, $maxHeight = NULL, $treatIdAsReference = FALSE, $image = NULL) {
		if (is_null($src) && is_null($image) || !is_null($src) && !is_null($image)) {
			throw new \TYPO3\CMS\Fluid\Core\ViewHelper\Exception('You must either specify a string src or a File object.', 1382284106);
		}
		$image = $this->imageService->getImage($src, $image, $treatIdAsReference);
		$processingInstructions = array(
			'width' => $width,
			'height' => $height,
			'minWidth' => $minWidth,
			'minHeight' => $minHeight,
			'maxWidth' => $maxWidth,
			'maxHeight' => $maxHeight,
		);
		$processedImage = $this->imageService->applyProcessingInstructions($image, $processingInstructions);
		$imageUri = $this->imageService->getImageUri($processedImage);

		$this->tag->addAttribute('data-original', $imageUri);
		$this->tag->addAttribute('width', $processedImage->getProperty('width'));
		$this->tag->addAttribute('height', $processedImage->getProperty('height'));

		$alt = $image->getProperty('alternative');
		$title = $image->getProperty('title');

		// The alt-attribute is mandatory to have valid html-code, therefore add it even if it is empty
		if (empty($this->arguments['alt'])) {
			$this->tag->addAttribute('alt', $alt);
		}
		if (empty($this->arguments['title']) && $title) {
			$this->tag->addAttribute('title', $title);
		}

		return $this->tag->render();
	}
}

?>

 

Cangaja: Support für Spine 2D Animationen in Cangaja

spine 2d in cangajaMit den 2D Animtionstools Spine oder Spriter habe ich schon lange geliebäugelt. Als ich mir das Spine Runtime Repository auf github angeschaut habe und dort das JavaScript Beispiel für die Turbulenz HTML5 Game Engine gesehen habe, dachte ich mir dass die Spine Runtime eigentlich gar nicht so schwer zu integrieren ist. Außerdem ist hier eine sehr gute Runtime Dokumentation zu finden.

Also habe ich eine erste einfache Spine Klasse in Cangaja integriert, siehe Demo. Die meisten Features funktionieren schon.

Bei Skalierung und Transparenz von Elementen muss ich noch genauer schauen ob das in der spine-js runtime schon nicht unterstützt wird bzw. noch nicht richtig von mir implementiert wurde.

Auch bei Texturen die z.B. auf der X- oder Y-Achse gespiegelt sind gibt es noch einen kleines Positionierungsproblem.

Im nächsten Schritt wäre natürlich eine Kollisionsabfrage interessant oder sogar eine Verbindung mit Box2D Bodies wären ein sehr cooles Feature.

Auch die Spine Animation Events bieten interessante Einsatzmöglichkeiten. Abgesehen davon besitze ich im Moment nur die eingeschränkte Demoversion von Spine in der das Exportieren von Animationen deaktivert ist. Mal sehen was Zeit und Motivation in Zukunft bringt ;-)

 

JavaScript: Destructable Terrain in JavaScript mit Cangaja (Box2D, poly2tri, Clipper)

Destructible terrain in JavaScript

Auf dieses Feature bin ich ein klein wenig stolz ;-) Ich habe in Cangaja ein destructible Terrain implementiert! Mehr oder weniger angespornt von einem Kollegen, der dieses Feature immer wieder erwähnt hat und haben wollte, hat mich dieses Thema irgendwie nie richtig los gelassen…

Infos im Web sind rar, aber dennoch sehr inspirierend gewesen. „Digging into Box2D destructible terrain“ von Emanuele Feronato und das folgende Tutorial wurden mit Spannung erwartet. Die Tutorials werden aber in nicht abwartbaren Abständen veröffentlicht ;-)

Die richtige Idee kam aber erst beim betrachten von „Destructible terrain using SFML + Box2D + Clipper + Poly2Tri“ . Das war der Moment in dem ich dachte, dass ist doch gar nicht so schwer zu implementieren! Mit Clipper und Poly2tri die es als JavaScript Version gibt, wird der Hauptteil der Arbeit erledigt.

Die Terrain Funktion hat noch ein zwei kleine Bugs, die wie ich hoffe noch ausgemerzt werden können. Die Demo dazu läuft aber schon sehr gut!

JavaScript: Emscripten erste Versuche unter OS X

Wahnsinn! Was man nicht alles ausprobieren muss ;-) Als ich mal wieder Lust hatte an meinem Cangaja Framework weiter zu arbeiten, kam mir die Idee eine neuere Box2D Version einzubinden.

Aktuell ist Box2DWeb, ein Port der Box2dFlash Version 2.1a in Cangaja in Verwendung. Die Version der original C++ Version von Box2D ist aber mittlerweile schon bei Version 2.2.1 2.3.0. Eine der nennenswerten Neuerungen seit der Version 2.2 (Version ohne Gewähr ;-) sind Chain Shapes mit denen man viele Eckpunkte verbinden kann um statische Objekte zu erzeugen.

Auf der Suche nach einer aktuelleren Box2D Version für Javascript bin ich auf ‚Port of Box2D to JavaScript using Emscripten‚ gestoßen. Dieses nutzt Emscripten um C/C++ Code über LLVM nach JavaScript zu kompilieren. Eine genauere Erklärung und die Vorteile davon werden hier erläutert -> Asm.js: The JavaScript Compile Target.

Gesagt getan wurde von mir die Emscripten Version von Box2D herunter geladen. Wie sich aber heraus stellte war diese nicht so einfach zu implementieren wie naiverweise Gedacht ;-) Nach einigen Recherchieren bin ich auf diesen Blogeintrag „Playing with the Emscripten port of Box2D“ gestoßen, der die Eigenheiten vom Emscripten kompilierten Box2D JavaScript Code genauer unter die Lupe nimmt.

Nachdem diese Hürden umschifft waren ging es weiter bei der Implementierung. Nach den ersten kleinen Erfolgen mit Circle Shape und Polygon Shape tauchten die nächsten Schwierigkeiten auf, die nicht genauer eroiert werden konnten da in der Konsole keine Fehlermeldung ausgegeben wurde.

Um besser nachvollziehen zu können was dort eigentlich passiert, wollte ich DebugDraw einbauen, aber das sollte auch nicht so leicht von statten gehen. Zumindest wird hier aber der Fehler ‚Finished up all reserved function pointers. Use a higher value for RESERVED_FUNCTION_POINTERS.‘ ausgegeben.

Nach etwas stöbern über Google in der Issues List von kripken’s / box2d.js kam heraus dass es eventuell nötig ist box2d.js neu zu kompilieren, schock schwere Not ;-)

Dazu muss aber zuerst Emscripten unter OS X installiert sein. Wie es weiter geht ist im nächsten Beitrag nach zu lesen

JavaScript: Private statische Elemente mit Closure in JavaScript

var ExampleClass = (function(){

	//privates statisches Attribut
	var staticVar = 0;

	//private statische Methode
	function staticMethod(){
	}

	return function(fooValue,barValue){
		//private Attribute
		var foo, bar;

		//private Methode
		function fooPrivate(){

		}

		//foo Setter
		this.setFoo = function(value){
			foo = value;
		}
		//foo Getter
		this.getFoo = function(){
			return foo;
		}
		//bar Setter
		this.setBar = function(value){
			bar = value;
		}
		//bar Getter
		this.getBar = function(){
			return bar;
		}

		//Konstruktorcode
		staticVar++;
		if (staticVar > 5) throw new Error('Es können nur maximal 5 Instanzen erzeugt werden.');

		this.setFoo(fooValue);
		this.setBar(barValue);
	}
})();

 

JavaScript: Private Elemente mit Closure in JavaScript

var ExampleClass = function(fooValue, barValue){
	//private Attribute
	var foo, bar

	//private Methode
	function fooPrivate(){

	}

	//foo Setter
	this.setFoo = function(value){
		foo = value;
	}
	//foo Getter
	this.getFoo = function(){
		return foo;
	}
	//bar Setter
	this.setBar = function(value){
		bar = value;
	}
	//bar Getter
	this.getBar = function(){
		return bar;
	}

	//Konstruktorcode
	this.setFoo(fooValue);
	this.setBar(barValue);
}

 

Cangaja: Erstes Spieledemo!

So, das erste kleine Cangaja Spieledemo ist programmiert. Es ist zwar noch etwas rudimentär, aber schon spielbar. Ziel war es ein erstes kleines leichtes Projekt umzusetzen, um die Tauglichkeit des Cangaja Frameworks zu testen.

Die Wunsch- bzw. Featureliste für das Cangaja Framework ist lang und teilweise sehr sportlich ;-) Freie Zeit und vor allem der Spaß am weiterentwickeln wird zeigen ob noch weitere Features ins FW einfließen werden… Wie in diesem Blogbeitrag schon geschrieben ist die HTML5/Canvas/Framework Front gerade massiv in Bewegung und hat hochkarätige Lösungen hervorgebracht.