Der Gleisarbeiter

Die 4-Wege Navigation (also das navigieren im Widget ohne den virtuellen Cursor) kann im Widget so funktionieren:
Die Runtime springt von Link zu Link je nachdem in welche Richtung der User auf dem Joypad des Handys klickt. Man kann sich das wie einen unsichtbaren Mauszeiger vorstellen, der dann auf die jeweiligen Navigationselemente fokussiert.
Interessanterweise springt der unsichtbare Zeiger aber auch auf -Tags.

Folgendes Beispiel:

...
< img src="einbild.png">
< a id="quitbutton">Quit
...

Dann müsste der User 2mal auf seinem Joypad nach unten klicken bis der Anchor-Tag aktiviert wird und der Zustand “hover” gesetzt wird. Der unsichtbare Mauszeiger springt erst zu dem Bild, dieses hat keinen “hover”-Zustand also sieht man keine Veränderung, erst beim nächsten Klick sieht man, dass überhaupt etwas beim Klicken passiert.

Das ist nervig und umgehen kann man das, indem man die Bilder z.B. als Div mit einem background-image anzeigt. Dann wird im Beispiel oben das Bild nicht angesprungen, sondern direkt der Link, was dem Handybenutzer auch logischer erscheinen wird.

#einbild_container{
  background-image: url(einbild.png);
  width: bildbreite;
  height: bildhöhe;
  background-repeat: no-repeat;
}


< div id="einbild_container">
< a id="quitbutton">Quit


Game development tutorial on Android – Part 1

First I have to say that I am using Eclipse and the Android plugin to program, because it really minifies the work needed. If your using another IDE you have to change some of the steps according to your IDE’s workflow, but the code stays the same.

I decided that my game should have a welcome screen and an options menu to start the game (or later when playing to pause or stop the game). That is easily done with Android.
First lets create a new project in Android, name it what you like, I chose “Space Janitor” (I assume that you already now how to create new Android project, otherwise refer to one of the many tutorials).

Weiterlesen »

I am currently learning more on Android development and for me the best way to learn something new is to try it out by myself. It’s the same when I learn new ways of programming: reading books and tutorials is fine, but when I try to build my own apps I learn even more.

So I decided to write a simple game for the Android platform, not that there aren’t already enough games in the Android Market, more because in the last weeks I mostly concentrated on developing games for the Vodafone mobile widget runtime. I made a game called “Space Janitor”, which I now want to port to the Android platform. I would like to extend the game at some points, i.e. making use of the device accelerometer sensors to move the spaceship to the left or to the right, or vibrating the mobile when being hit by an asteroid. That would be real fun.

Another good way to learn is to try to explain the things one learned to others. That was a great way to learn during my university time, because the professors always wanted to have something explained So if one already explained the learned things to others, it was no problem to explain it again to the professor. I now decided to keep track of my development by writing some blog posts about how to develop the game, thus explaing it to others. But I would also very much appreciate your comments on how to improve the quality and the speed of my code as I would call myself just a novice in Android programming. Maybe you’ve also got some more tipps for game improvement, game handling, gameplay, etc.

I will somewhat unregularly post new entries in my blog, so keep in touch.

Space Janitor ist zur App of the Week ausgesucht worden, momentan leider “nur” in Italien

Mal schauen wann es in Deutschland zu haben ist.

Heute wurde mein erstes Spiel für die Vodafone Mobile Widget Runtime vom Vodafone-Team freigeschaltet. Hoffentlich ist es dann auch bald auf den deutschen Vodafone-Widget Seiten zu finden, bis dahin kann man es unter diesem Link direkt herunterladen und aufs Handy, z.B. per Bluetooth, laden.

Mit einem Klick auf die übertragene Datei wird dann der Widget Manager von Vodafone (falls noch nicht auf dem Handy, dann hier runterladen) und das Spiel gestartet.

Geflogen wird mit den Tasten 2, 4, 6 und 8 für vorne, links, rechts und runter, und das Ziel des Spieles ist möglichst viele Satelliten einzusammeln ohne von den Asteroiden getroffen zu werden.

Viel Spaß beim Müllsammeln!

Update:
11.06.09: Habe soeben erfahren, dass Space Janitor schon 460mal von der Vodafone Plattform heruntergeladen wurde. Wer’s jetzt noch nicht hat, sofort holen!

Dieser Blogpost auf der Betavine-Seite schreibt, dass es kein “keypress”-Eventtype in der Vodafone Mobile Widget Runtime gibt.
Das bedeutet aber nicht, dass in Mobile Widgets überhaupt keine KeyEvents abgefangen werden können. “keydown” und “keyup” können sehr wohl verwendet werden.

Hier ein Beispiel unter Verwendung von jQuery:

$(function(){
  $(document).keyup(function(e){
    if(!gameOver){
      switch(e.keyCode){
        case 52: //this is left! (4 on mobile)
           // move left functions
           break;
        case 50: //this is up! (2 on mobile)
           // move up functions
           break;
        case 54: //this is right (6 on mobile)
           // move right functions
           break;
        case 56: //this is down! (8 on mobile)
           // move down functions
           break;
        }
     }
  });
});

Übrigens, auch für Mobile Widgets kann man sehr schön gameQuery (ein Addon für jQuery) verwenden.
Über die mobile Spieleentwicklung mit Widgets aber ein anderes Mal ein kleines Tutorial.

Hier ein kleines Widget, das ich heute gebaut habe, um herauszufinden, welche Tasten auf dem Handy welche Keycodes werfen, damit ich diese dann verarbeiten kann.

Das Widget sollte demnächst auch im Vodafone Widget Portal zur Verfügung stehen (wenn alles gut läuft), ansonsten gibt’s das auch hier schon zum Download (keycode_listener.wgt)

BTW: Natürlich läuft das Widget auch ganz normal im Opera Browser und fängt auch hier die Keycodes der Tasten ab. Ist also für jeden Entwickler interessant.

Beim Erstellen des wgt-Archivs sollte man nicht die Funktion des Finders “… komprimieren” bzw. “compress …” verwenden, da die Vodafone Widget Runtime dieses Archiv auf Grund der 64bit-Komprimierungsmethode nicht erkennt.

Statt dessen z.B. über die Konsole:

  zip -r widgetname.wgt *

Momentan arbeite ich an einem Widget für die Vodafone Widget Runtime. Diese Widgets orientieren sich an Opera Widgets, allerdings stößt man manchmal auf interessante Probleme.

Ein Icon für das Widget kann in der config.xml definiert werden per

<icon>Pfad/zum/icon.png</icon>

Das Problem ist jedoch, wenn man den gesamten Widget-Ordner komprimiert (was nach den Opera Widget Specifications OK ist) und auf dem Mobilgerät einspielt, so wird das Widget-Icon nicht angezeigt.

Lösung:
Anstatt den gesamten Ordner zu komprimieren, nur die Dateien und Unterverzeichnise im Widget-Hauptordner komprimieren!

Anstatt

  zip -r widgetname.wgt widgetordner/

also

  zip -r widgetname.wgt *

im jeweiligen Ordner ausführen.

Dann gehts.