Schlagwort-Archive: javascript

Games, 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!

 

ACE, Javascript, MacGap, Monkey X

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

Cangaja, Javascript, Spine

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 ;-)

 

Box2D, Cangaja, Javascript

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

Ein Kommentar

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!

Allgemein

JavaScript: Emscripten unter OS X installieren

2 Kommentare

Der letze Beitrag hat es schön gezeigt, wie schnell man in die Tiefen der Technik abdriften kann ;-) Um an diesen anzuknüpfen geht es nun darum Emscripten auf Mac OS X zu installieren.

In der Tutorial Sektion ist ein Gist enthalten mit dem es wirklich sehr einfach ist Emscripten zu installieren.

# Based on https://github.com/kripken/emscripten/wiki/Tutorial

# prerequisites
cd ~/
brew install node
sudo ln -s /usr/bin/python2.7 /usr/bin/python2
curl http://llvm.org/releases/3.2/clang+llvm-3.2-x86_64-apple-darwin11.tar.gz > llvm.tgz
tar xzvf llvm.tgz
ln -s clang+llvm-3.2-x86_64-apple-darwin11 llvm

# emscripten
git clone git://github.com/kripken/emscripten.git
cd emscripten
LLVM=~/llvm/bin ./emcc
LLVM=~/llvm/bin ./emcc tests/hello_world.cpp -o hello.html
open hello.html

Ein kleiner Blocker ist auch hier enthalten, da git nicht auf OS X vorhanden ist. Also bevor der Gist funktioniert vorher noch schnell den git-osx-installer herunterladen und installieren.

Wird das Gistfile über die Konsole mit sh gistfile1.sh aufgerufen ist dann ungefähr folgendes zu sehen. Am Schluß wird dann noch eine hello.html Seite geöffnet.

  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100 67.8M  100 67.8M    0     0   632k      0  0:01:49  0:01:49 --:--:--  639k
x clang+llvm-3.2-x86_64-apple-darwin11/
x clang+llvm-3.2-x86_64-apple-darwin11/bin/
...
...
...
...
...
x clang+llvm-3.2-x86_64-apple-darwin11/share/man/man1/
x clang+llvm-3.2-x86_64-apple-darwin11/share/man/man1/clang.1
Cloning into 'emscripten'...
remote: Finding bitmap roots...
remote: Counting objects: 46622, done.
remote: Compressing objects: 100% (15932/15932), done.
remote: Total 46622 (delta 30419), reused 46395 (delta 30205)
Receiving objects: 100% (46622/46622), 87.13 MiB | 641.00 KiB/s, done.
Resolving deltas: 100% (30419/30419), done.
Checking connectivity... done

==============================================================================
Welcome to Emscripten!

This is the first time any of the Emscripten tools has been run.

A settings file has been copied to ~/.emscripten, at absolute path: /Users/csg/.emscripten

It contains our best guesses for the important paths, which are:

  LLVM_ROOT       = /usr/bin
  PYTHON          = /usr/bin/python2
  NODE_JS         = /usr/local/bin/node
  EMSCRIPTEN_ROOT = /Users/csg/emscripten

Please edit the file if any of those are incorrect.

This command will now exit. When you are done editing those paths, re-run it.
==============================================================================

INFO     root: (Emscripten: Running sanity checks)

Emscript sollte nun erfolgreich installiert sein. Der nächste Beitrag erscheint Asap.

Javascript

JavaScript: Emscripten erste Versuche unter OS X

2 Kommentare

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

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

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, Javascript

Cangaja: Statusbericht ;o)

Schreibe einen Kommentar

cangaja-picTja, was soll ich sagen… meine anfängliche Spielerei mit dem Canvas Element und auch mit JavaScript hat sich ganz schön weit entwickelt. Mittlerweile ist ein kleines JS Game Framework, genannt Cangaja (CanvasGameJavaScript) daraus geworden.

Dieses ist eigentlich inspiriert durch Monkey und die dafür existierenden 2D FrameWorks. Hier gibt es das Mojo Framework von Monkey selbst und noch viele andere die darauf aufbauen. Hier seien nur schnell Diddy FW, fantomEngine FW und das Ignition FW genannt. Monkey hat eine geniale Multiplatformunterstützung die ihres gleichen sucht, aber trotzdem bin ich ins Canvas/JavaScript Lager abgedriftet ;-)

Auch die JavaScript FW Front ist gerade massiv in Bewegung. Man kommt aus dem Staunen nicht mehr heraus. Altbekannte Libraries wie z.B. mrdoobs three.js oder das neue pixi.js von GoodBoyDigital leisten beeindruckende Features. Aber auch „einfache“ leicht zu programmierende Frameworks wie Quintus haben ihren Charme. Mit Ludei’s CocoonJS und Ejecta sind zwei sehr interessante Lösungen am Start mit denen man HTML5 Entwicklungen auf Mobile Geräte in fast nativer Performance bringen kann.

Aber zurück zu Cangaja, dieses steht auf Github für jedermann zur Verfügung. Eine kleine Demo- bzw. Featureübersicht ist hier zu finden. Für alle FrameWork Teile gibt es dort einzelne Beispiele. Mittlerweile bin ich auch in die Verlegenheit gekommen eine API Dokumentation zu erstellen, dabei war mit YUIDOC eine große Hilfe. Diese wird in Zukunft hoffentlich intensiv gepflegt.

Enthaltene Features sind: Sprites (unterstützt TexturePacker, wie auch alle ableitenden Klassen), Animationen, Emitter, Particle, Director, Screens, Layer, Buttons, Fonts (unterstützt GlyphDesigner), Maps (unterstützt Tiled), Box2D Wrapper (unterstützt PhysicsEditor), usw., usw.

Manches ist weit fortgeschritten, manches hätte besser smarter gelöst werden können, anderes wird in Zukunft noch geändert ;-) Die Wunschliste ist groß…

 

Extbase/Fluid, Typo3

Extbase / Fluid: Inline Javascript einfügen?

Ein Kommentar

Schön ist es vielleicht nicht wenn man in Extbase/Fluid Inline JavaScript ins Fluid-Template mit aufnehmen will. Aber in manchen Fällen kommt man einfach nicht drum herum ;-) Die Stelle an der es tricky wird ist wenn dynamische Werte mit der geschweiften Klammer in das JavaScript mit aufgenommen werden sollen.

In diesem Fall muss mit einem <![CDATA[ … ]]> gearbeitet werden.

<script type="text/javascript">
	<![CDATA[
	$(document).ready(function(){
		$('.selector]]>{myvalue}<![CDATA[').click()
	})
	]]>
</script>

Ein anderes Szenario ist wenn die eingefügten Inhalte ebenfalls JavaScript oder Json enthalten. Hier müssen die Daten mit dem Fluid „format.html“ ViewHelper eingefügt werden.

<script text="type/javascript"> 

var myObject= <f:format.html parseFuncTSPath="">{json}</f:format.html>

</script>