UGamela Blog

Without a better title to relate, my first english blogpost:

My last action concerning UGamela has been cloning Microsofts redis for Windows repository. I’m quite happy that I found prebuilt libraries in there, I really don’t want to install Visual Studio just to compile this database. Still, I’m glad MS is supporting this! The production will probably run on a linux machine, that’s the ideal hosting for redis.

So it is decided: redis will be database foundation. A simple key-value store which works in memory and can be dumped to harddisk.

Also I’m working with Backbone at my work as webdeveloper (still as a student, but yeah, I’ve got a job as javascript developer!) and I will probably use it in UGamela as a framework. Also, Twitter Bootstrap helps me -not being a designer- making a nice interface.

Then I got this insane idea to have a full fledged developer admin front-end with CodeMirror, but that might be just my wish to have a better javascript development environment. Still, it would be nice to code the game in the game^^ – a game content creator, which will need imba security, because it probably won’t work without evil eval().

I’m not sure if I should spend time on it, it might speed up the rest of the development.

Bin über den Winter weit weniger voran gekommen, wie ich gehofft hatte – Ich mache nur kleine Schritte zur Zeit.

Meist, so wie jetzt gerade beschäftigt mich mehr die Umgebung der Entwicklung, ein Buildprozess soll verschiedene Aufgaben automatisieren:

• Erstellung der game.js für den Client (hier werden Module nach Abhängigkeiten zusammengesucht und mit CommonJS require() bereitgestellt, Client und Server haben die selbe Codebase)
• Verkettung von CSS Dateien (HTML5 boilerplate)
• JHint Codecheck
• Ausführung von Tests
• Spezialversion „production“ (Kompression von JS und CSS Dateien)

Vor allem für den ersten Punkt habe ich eine ganze Weile gesucht, habe ja letztes mal schon browserify geschrieben, mittlerweile verwende ich webmake für die Erstellung der Client Datei. SourceURL hilft dabei in der großen Datei beim Debuggen nicht die Übersicht zu verlieren. Die „production“ Version gehe ich erstmal nicht an, webmake fehlt das Feature noch und gebraucht wird das sowieso noch nicht.

Tests habe ich leider noch viel zu wenig bis gar nicht, das ist nicht gut, aber nachträglich Tests schreiben ist mühsam und unangenehm, und in einen test-driven Prozess kann ich mich leider bisher nicht einfinden.

Diese Aufgaben werden nun gesammelt von grunt bzw. einer Abwandlung (HTML5 boilderplate) zusammengefasst, die Möglichkeit alles bei Dateiänderungen automatisch auszuführen, ist auch integriert, spinnt aber noch ein wenig auf Windows, NodeJS fs.watch() ist noch nicht platformunabhängig stabil und meist wird nur der Linux funktionale Teil unterstützt.

Ich bin mittlerweile auf github aktiv, ärgere mich aber meist eher wenn ich ein Tool nicht so nutzen kann wie ich es gerne hätte, und dann erstmal mit fremdem Code beschäftigt bin, trotzdem sehr schön wie sich dort eine Community bauen lässt, viel Infrastruktur ist bereits gegeben, für OpenSource Projekte einfach umsonst : ).

Zudem steht demnächst an meine ganze Entwicklung (inkl. des Blogs) auf Englisch umzustellen. Die Community von NodeJS ist international und ich denke das ich dort vielleicht einige fähige Leute für meine Sache gewinnen kann. UGamela selbst war ja auch schon immer international, das Spanisch, Polnisch, Französisch und Deutsch in den Foren und im Code hat aber nicht zur Entwicklung beigetragen. Ich weiß noch wie ich mühsam polnische Quelltext Kommentare übersetzt habe (o.O).

Ich spiele zur Zeit gerne StarCraft II in meiner Freizeit. Herrliches Echtzeit Strategie Spiel!

NodeJS lässt sich mittlerweile sehr einfach unter Windows installieren. Das ist ein guter Fortschritt. Ich habe auch feststellen können Aptana Studio macht was ich will, kann aber auch sein, dass ich mich einfach mittlerweile dran gewöhnt habe.

Letzte Woche habe ich mal grundsätzlich ein Markup auf gesetzt, bisher sind die Widgets (Menü, Planet, Resourcen, Gebäudeliste) aber noch statisch. Ich brauche dann auch bald einen Designer, damit ich mich nicht ewig mit dem CSS rumschlagen muss. Ich möchte auch ein Touch-Interface für Smartphones, damit man das Spiel gut unterwegs spielen kann.

Als nächstes möchte ich das Interface ein bischen dynamischer gestalten. Die Ressourcenverwaltung habe ich schonmal früher geschrieben, da waren jetzt aber noch eine Änderungen notwendig. An der Ressourcenberechnung habe ich schon lange gearbeitet (Implementierungen in PHP, MySQL und JavaScript).

Über die Gebäudeliste soll man dann als nächstes bauen können.

Ich habe mir mit der async Bibliothek einen eigenen Build Prozess gebaut, der meinen Code zusammenfasst und kompressieren kann und mich ein an die asyncrone I/O und den Callback-Stil gewöhnt. Nebenbei lerne ich an der Uni in Programmierparadigmen Haskell, die funktionale Sprache überhaupt. JavaScript mischt objektorientiert und funktional. Funktionale Programmierung hat durchaus gute Seiten, obwohl der Einstieg oder Umstieg von zB. Java schwierig sein kann. Besonders in Haskell ist Code deutlich kürzer, viele Dinge lassen sich mit einem Einzeiler erledigen. Sehr gut, dass in JavaScript Funktionen erster Klasse (first-class) sind.

Ich beobachte einige NodeJS Projekte über die Mailingliste und github, und habe begonnen einige auszuprobieren. Leider nicht immer mit Erfolg. Man merkt doch noch sehr, dass NodeJS noch sehr jung ist.

Erfolgreich habe ich live.js und underscore eingebunden. Mein Buildprozess ist in der Lage Dateien zu beobachten und live.js aktualisiert ständig HTML, CSS und JavaScript, so kann man Codeänderungen direkt im Browser beobachten.

So wirklich funktioniert browserify für mich nicht, ich werde wohl bei meinem eigenen Buildprozess bleiben und Dateien manuell hinzufügen. Ich brauche aber definitv eine Implementierung für require() im Browser, da werde ich evtl. ein wenig Code übernehmen.

Nachdem ich letztes Semester nicht dazu kam mich viel mit meinem Browsergameprojekt zu beschäftigen, wahrscheinlich vor allem wegen des Praxis-Software-Projekts der Uni, beschäftige ich mich zur Zeit nebenher wieder damit, wobei ich momentan auch noch das neue Semester ordne. Wie kompliziert ein Studiengang im Aufbau sein kann!

http://nodejs.org
Ich habe mich ein wenig eingerichtet. Da ich Windows-Nutzer bin, stellte sich das als nicht unkompliziert heraus, da NodeJS Windows nicht wirklich unterstützt. Die Installation unter Cygwin ist zur Zeit nicht zu empfehlen. Wobei da Besserung seitens der NodeJS Entwickler versprochen ist.
Es gibt einige Vorträge, die ich mir angesehen habe. Auf meinem Laptop habe ich Dualboot, kann daher auf Ubuntu ausweichen zur Entwicklung. Die Installation erweist sich dort mit ein wenig Konsole-Kenntnissen als nicht so schwierig. Auf meinem Hauptrechner ist das komplizierter, weil ich nicht das Betriebsystem zum Programmieren wechseln will. Die Installation auf Cygwin hatte ich vor ein paar Monaten erfolglos probiert. Ich kann Ubuntu aber in einer Virtual-Machine betreiben. VMWare bietet einen Unity-Modus, in dem die Oberflächen zusammengeführt werden. So kann ich ein Ubuntu Terminal unter Windows7 offen haben, fein. Ich kann einen Ordner auf dem Host(Windows) freigeben und auf dem Gast (Ubuntu) mounten, so kann die Entwicklungsumgebung auf dem Host laufen lassen.

v8 lässt sich direkt über den Chrome Browser debuggen, da bin ich noch gespannt wie die Anbindung funktioniert.
Langsam bilden sich kleine Frameworks unter NodeJS, interessant finde ich vor allem express. Teils lese ich im Quellcode von interessanten Projekten um den Aufbau und die Nutzung der NodeJS-API zu verstehen. Die asynchronen Aufrufe sind mir noch ungewohnt.

Allgemein bietet JavaScript sprachliche Aspekte die man nicht aus Java und nur wenig aus PHP kennt. So werden manche Probleme über Currying gelöst, in JavaScript sind Funktionen First-Class.

Was mir sehr gefällt, ist dass sich auch komplexe Aufgaben in wenigen Zeilen lösen lassen. So sieht man wie der NodeJS Entwickler während(!) eines Vortrags in 20 Zeilen einen simplen Netzwerk Chat schreibt.

Ich versuche den funktionalen Aspekt den JavaScript bietet (für Simplizität) und die gelernte Objektorientierung (für Erweiterbarkeit) zu verbinden. Derweil höre ich dieses Semester einige passende weiterführende Vorlesungen.

Leider bin ich mir noch nicht sicher wieviel Zeit ich dieses Semester diesem Projekt widmen kann, hoffe allerdings viel, das letzte Jahr lag irgendwie nur alles Brach.

Das kommende UGamela wird komplett in JavaScript geschrieben, kein PHP und auch kein Python wie ich überlegt hatte. Ein Argument ist einfach durchschlagend: Da man die kommende Version als RIA (Rich Internet Application) bezeichnen kann, ist die ganze Oberfläche in JavaScript gebaut. Um das MVC-Pattern anwenden zu können, werden auch auf Clientseite alle Models implementiert. Anstatt sich nun doppelte Arbeit zu machen und das Spiel doppelt zu implementieren (in JavaScript auf Clientseite und in einer anderen Sprache auf Serverseite), schreibe ich den Code nur einmal und verwende ihn auf beiden Seiten. Natürlich gibt es auch Code, der nur auf einer Seite verwendet wird: clientseitig Views oder serverseitig OR-Mapping (sofern ich mich nicht doch noch zu CouchDB durchringen kann).

Weiterlesen „Struktur UGamela 0.6“

Ich kam noch nie dazu hier einen Codefetzen vorzustellen (außer des Beitrags zum Dekorierer). Nun nutze ich diese Gelegenheit eine meiner ersten JavaScript Klassen zu besprechen.

Gleichzeitig handelt es sich um das Muster Wertobjekt (ValueObject), welches unveränderlich ist.

Vorweg muss noch gesagt werden, dass alle Attribute als Konvention protected gelten, public wird nicht benötigt und private lässt sich über Closures realisieren. Einfache Attribute tragen zudem den Anfangsbuchstaben ihres Typs (z.B. s für String).

Objekte der Klasse stellen eine Menge eines Rohstoffs dar.

/**
 * Represents an amount of a resource
 * @param {number} amount
 * @param {string} type
 */
function Resource(amount, type) {
    var nAmount = amount;
    var sType = type;

    if (amount < 0) {
        throw new IllegalArgumentException("amount has to be positive");
    }

    /**
     * @method Resource
     * @return {number} amount of the resource
     */
    this.getAmount = function() {
        return nAmount;
    };

    /**
     * @method Resource
     * @return {string} resource type
     */
    this.getType = function() {
        return sType;
    };
}

/**
 * Addition of two resources produces a new resource with the sum amount
 * the new object uses the old one as prototype
 * @param {Resource} resource
 * @return {Resource} new Resource object
 */
Resource.prototype.plus = function(resource) {
    if (!(resource instanceof Resource && this.getType() == resource.getType())) {
        throw new IllegalArgumentException("resources don't match.");
    }
    var newRes = Object.create(this); // create a new object based on the current one
    // execute the Resource constructor on it
    Resource.call(newRes, this.getAmount() + resource.getAmount(), this.getType());
    return newRes;
};

/**
 * Subtraction of two resources produces a new resource with a smaller amount
 * @param {Resource} resource
 * @return {Resource} new Resource object
 */
Resource.prototype.minus = function(resource) {
    if (!(resource instanceof Resource && this.getType() == resource.getType())) {
        throw new IllegalArgumentException("resources don't match.");
    }
    if (this.getAmount() < resource.getAmount()) {
        throw new IllegalArgumentException("can't substract a higher amount");
    }
    var newRes = Object.create(this);
    Resource.call(newRes, this.getAmount() - resource.getAmount(), this.getType());
    return newRes;
};

Interessant ist vor allem die Stelle, an der dynamisch neue Objekte der selben Klasse zurückgegeben werden (plus() und minus()), ich möchte Resource noch erweitern können und evtl. für die verschiedenen Rohstoffsorten eigene Klassen ableiten, daher sollten diese Methoden dann nicht nach einer mathematischen Operation auf die Klasse Resource zurückschrumpfen. In PHP kann man „new“ einfach einen String übergeben, in Java muss man einen Umweg über eine Factory oder Reflection machen.

In JavaScript bietet es sich an, das momentane Objekt als Prototyp für das neue zu verwenden und dieses durch den Resource Konstruktor zu initialisieren.

Ich weiß noch nicht, ob mir dieses Pattern noch öfter begegnen wird, aber vor allem bei Wertobjekten (ValueObject), die mit Vererbung erweiterbar bleiben sollen ist dies praktisch. Allgemein wenn man ein neues Objekt des selben Typs wie das momentane zurückgeben möchte.

Jetzt kann ich eine Kindklasse ResourceContainer schreiben, die noch Funktionalität für Gewicht und Volumen des Rohstoffs bereitstellt (z.B zum Beladen von Schiffen):

/**
 * stores resources, adds weight and volume to a resource object
 * @inherits Resource
 * @param {Object} amount
 * @param {Object} type
 */
function ResourceContainer(amount, type) {
    Resource.call(this, amount, type); // inherit priviledged Resource methods
}
ResourceContainer.prototype = Object.create(Resource.prototype); // inherit nonpriviledged Resource methods

Resource.DESITY.metal = 7.85;
Resource.WEIGHT.metal = 1000;

/**
 * @return {number} weight of the resoure amount
 */
ResourceContainer.prototype.getWeight = function() {
    return this.getAmount() * Resource.WEIGHT[this.getType()];
};

/**
 * @return {number} volume of the resource amount
 */
ResourceContainer.prototype.getVolume = function() {
    return this.getAmount() * Resource.DENSITY[this.getType()];
};

Ich beginne langsam die Prototypennatur von JavaScript zu verwenden, bin aber immer noch sehr von Klassen von PHP und Java geprägt.

Nun, über ein halbes Jahr habe ich mich jetzt mit Softwareentwicklung und Objektorientierung beschäftigt. Immer im Hinterkopf meine Browsergame Idee gehalten und festen Glauben in PHP in Verbindung mit viel JavaScript im Browser gehalten. In diesem Moment, da ich versuche mir alles schön herzurichten um wirklich loszulegen, springen mir die Schwierigkeiten mit PHP nur so entgegen.

Zuerst suche ich eine geeignetes Test-Framework, am besten BDD getrieben. Für JavaScript wimmelt es nur so von solchen Frameworks: Screw.Unit, jsspec, jspec, inspec etcetc. PHP bietet genau eines: PHPSpec, dessen Projekt vor über einem Jahr eingeschlafen ist. So bleibt nur noch PHPUnit, welches nicht wirklich BDD zulässt.

Okay, also mache ich mich daran meine IDE einzurichten und ein paar Klassen anzulegen. Netbeans stellt sich aber als sehr schwachbrüstig heraus, was Refaktorisieren in PHP angeht. Die Java Aufgaben für die Uni habe ich mit Eclipse gelöst, daher ist das mein nächster Anlaufpunkt. Naja, Eclipse ist auch nicht viel besser, aber moment, da gab es doch Zend Studio für Eclipse, das mich früher schon mehrfach enttäuscht hat, als es nach Version 5.5 mit Eclipse vereint wurde. Mittlerweile ist es allerdings in Version 7.1 und bittet seine Nutzer doch von 5.5 umzusteigen. Gut, denke ich mir, vielleicht ist es wirklich besser geworden.

Fehlanzeige, Zend geht seit Version 6.0 den Bach runter, die neue Version untstützt nichteinmal Drag and Drop von Text im Editor, ohne das kann ich einfach nicht arbeiten. Wieder runtergeschmissen (das dritte Mal, ich glaub nicht, dass ich das so schnell wieder versuche).

Nun steh ich da, mit dickem Hals auf PHP. Je mehr ich darüber nachdenke finde ich nur Nachteile, weil ich an PHP festhalten will, um irgendwann einmal eine Referenz zu haben und das Spiel auf jeden Webspace klatschen zu können. Nun, das muss nicht sein, wieso all diese Schwierigkeiten in Kauf nehmen, nur um dann einen Haufen Kinder am Hals zu haben die mit der Objektorientierung nicht klar kommen.

Wenn ich mich jetzt gegen PHP entscheide stehen mir plötzlich alle Möglichkeiten offen: Python, Java, … Aber ich weiß etwas besseres:

JavaScript serverseitig! Damit muss ich auch nicht mehr Code duplizieren wenn ich reiche Funktionalität im Browser haben will, weil ich die gleichen Scripte, die auf dem Server laufen, auch im Browser laufen lassen kann (gut, mit ein paar Feinheiten), trotzdem ist das viel besser, als den Code in PHP und JS duplizieren zu müssen.

Nun habe ich die Wahl, JavaScript serverseitig ist mittlerweile mit einigen verschiedenen Grundsystem möglich. Aptana Jaxer bietet sich an, da ich die IDE bereits für JavaScript nutze. CouchDB wäre mal ein interessanter Ansatz.

Insgesamt wird das ganze um einiges Noob-feindlicher, was aber sowieso schon zur Debatte stand.

Weitere Infos kommen, sobald ich mich entschieden habe.

Edit: Ich habe den Artikel eine Woche zurückgehalten, um nicht irgendwelche voreiligen Entscheidungen in den Raum zu stellen.

Seitdem wurde ich weiter enttäuscht: Mein Favorit Aptana Jaxer scheint nicht mehr wirklich gepflegt zu werden – in der IDE lässt es sicht nicht mehr installieren, auf der Aptana-Seite ist es verschwunden und auf jaxer.org sind bereits einige Links tot. Schade, das Projekt sah vielversprechend aus.

Alternativen gibt es zum Glück genug, bisher sieht Myna am vielversprechendsten aus. Ich habe die Entscheidung allerdings ein wenig verschoben und schreibe vorerst die Clientseite und verlagere danach Elemente nachträglich auf den Server.

Insgesamt beabsichtige ich einen sehr fließenden Ablauf im Browser zu erreichen. Die Ajaxabfragen werden dann im Hintergrund ausgeführt, nach Möglichkeit unabhängig von der momentanen Aktion des Users, damit es nicht zu Wartezeiten kommt.

Testgetriebene Entwicklung.

Ich habe mich entschieden nach diesem bewährten Schema vorzugehen. Dabei arbeite ich mich gerade in das schreiben solcher Tests ein. Die Schwierigkeit besteht darin, die richtigen Tests zu schreiben. Diese Tests können dann während der Entwicklung immer wieder verwendet werden um den Code zu prüfen. Ich werde dafür Tests mit PHPUnit sowie JSUnit schreiben, denn mittlerweile bin ich mir sicher, dass beide Parts ähnlichgroße Komplexität erreichen werden.

Warum? Weil diese bewährte Strategie mir hilft Fehler früh zu erkennen und spätere Änderungen zu erleichtern. Sobald alle Tests erfolgreich durchlaufen bin ich fertig.

Leider fehlt mir noch die große Vorraussicht alle Tests von vornherein zu schreiben, ich werde Stück für Stück vorgehen müssen. Gleichzeitig überlege ich zuerst ein UML Diagramm anzulegen.

Ich dachte es wird Zeit für einen Statusbericht, ich bin gerade wieder dabei intensiv zu programmieren und zu lernen.

Leider muss ich zugeben, dass ich in den letzten Wochen nicht wirklich vorwärts gekommen war. Fehlende Motviation und Wissen waren wohl die Gründe. Momentan begreife ich die Objekt-Orientierung in JavaScript, die doch relativ schwierig zu entdecken ist, zumindest war sie das für mich. Wohl einfach aufgrund der größtenteils funktionalen Verwendung von JS. JS OOP programmiert sich zudem ganz anders wie PHP OOP, weil JavaScript vorallem auf Prototypen setzt.

Weiterlesen „Statusbericht“

Die Entwicklung des (PHP-)Codes schleicht eher voran, als dass es wirklich vorwärts geht. Dafür formt sich eine Idee, die mehr und mehr auf die browserseitige Scriptsprache JavaScript setzt. Ich habe bereits geschrieben, dass ich Templates mit JavaScript parse, nun sollen ganze Inhalte nur mit JavaScript generiert werden. Views des MVC werden in dieser Sprache geschrieben. Dabei muss man aber extrem auf die Sicherheit aufpassen. Clientseitig darf man nur mit Daten arbeiten, die sowieso öffentlich sind. Ein gewisser Arbeitsaufwand bleibt deshalb immer auf der Serverseite hängen, die bei diesem Projekt mit PHP gebaut ist.

Nun verwende ich zu großen Anteilen die zwei verbreitetsten Websprachen, die beide von vielen Leuten verachtet werden, weil sie vor allem von Amateuren verwendet werden.

Besonders JavaScript scheint eine interessante Vorgeschichte zu haben. Vor einigen Monaten, als ich anfing JS zu lernen, kam ich auf D. Crockford und habe mir seine Videovorträge angesehn. Ich habe JS somit direkt OOP gelernt, wie es sich eigentlich gehört. JS ist sehr objekt-orientiert, Crockford nennt sie „ausdrucksstark“. Die genau Übersetzung ist mir unklar, ist aber auch egal, denke ich.

Ich kann diesen Artikel nur empfehlen, notfalls auch übersetzt, für diejenigen die weniger gut Englisch können. Um Englisch kommt man aber beim Programmieren kaum herum und Crockford schreibt und redet eigentlich ein sehr gut verständliches und deutliches Englisch. Auch seine Videos kann ich nur weiterempfehlen, es lohnt sich!

Ich entwerfe also ein kleines Grundgerüst in JavaScript, das mit dem serverseitigen Teil, den ich in PHP geschrieben habe, zusammenarbeitet. Dabei ist vor allem der ganze AJAX-Kram sehr nervig. Da alles asyncron ist, muss man ständig mit Callbacks arbeiten (Man übergibt die Funktion, die ausgeführt wird, sobald der Request abgeschlossen ist und die Daten zur Verfügung stehen), was ständig zu Verschachtelungen führt, die ich eigentlich umgehen möchte.

Derweil feiere ich mein Abi und mache ein wenig Urlaub mit Freunden. Ich werde also nicht permanent hieran arbeiten, aber hoffentlich dennoch vorwärts kommen.