Posts Tagged ‘mobile’

Mobile Applikationen mit ShiVa3D

Freitag, Januar 14th, 2011


Da die App-Entwicklung mit Flash leider zurzeit nur sehr begrenzt möglich ist (Performance :-/) entwickle ich nun seit einigen Wochen mit ShiVa3D (stonetrip.com).

.

Shiva 3D Pro und Kontra

Pro:

  • ~ Multiplattform: d.h. einmal entwicklen und für Windows, Mac, Linux, iPhone, iPhad, Android,  Palm, Webplayer, Wii und über Umwege (airplay) bald auch für Windows Mobile publishen.
  • ~ eigene IDE, eigene  Skriptsprache (aka Stonescript = Abwandlung von LUA) welche direkt in C/C++ Code übersetzt wird
  • ~ kein Framework das am Gerät läuft (wie z.B. Flash), sondern wirklich native Applikationen
  • ~ aus ShiVa Projekten können Xcode oder Eclipse Android SDK Projekte erstellt und weiterbearbeitet werden
  • ~ aktives Forum (bisher kürzeste Antwortzeit: 3 Minuten)

Kontra:

  • ~ Dokumentation ist ungenügend bzw. teilweise fehlerhaft und unvollständig
  • ~ die IDE stürzt gerne ab oder löscht ganze Szenen (mit 1.9.0.1 “behoben”),
  • ~ die IDE hat auch sonst noch genügend kleine Fehler. Arbeiten ist zwar meist Problemlos möglich, es kann aber sein, dass ein Fehler auch mal 2-3 Stunden Arbeit kostet :-(.
  • ~ IDE Anzeigefehler in Windows Vista (allerdings ist ein Wechsel auf QT geplant, damit sollte das dann erledigt sein)
  • ~ als Einarbeitungszeit in die IDE und StoneScript sollte man mindestens 2 Wochen annehmen
  • ~ kein ordentliches Debugging ( Debugging mit “print()” Ausgaben stinkt :-/ )
  • ~ die StoneScript API wirkt für Flash API verwöhnte Entwickler noch sehr unausgereift und ist nicht immer logisch/intuitiv aufgebaut

Eines der aktuellen Projekte an welchen ich neben der Arbeit privat herumwerke ist ein Physik-Spiel mit 2D Boxen in dem es primär darum geht auf verschiedenste Arten einen Turm zu bauen. Angedacht ist es als Multiplayer und natürlich kann man dem Gegner dessen Turm zerstören ;-). Vielleicht gibts bald einen Prototyp als Webplayer.

Crayon Towers - noch im Anfangsstadium ;)

Crayon Towers - noch im Anfangsstadium ;)

Flash iPhone Entwicklung mit FlashDevelop und dem Adobe “Packager for iPhone”

Freitag, September 17th, 2010

Da Apple seine Richtlinien für Code von Drittanbietern in Form von LLVMs gelockert hat, darf man nun wieder offiziell Adobe Flash-Applikationen für das iPhone und iPad erstellen.

Aus diesem Grund hab ich mich mal hingesetzt und eine FlashDevelop Project Vorlage gemacht, die es ähnlich der Air-Pojekte erlaubt mittels Batch-Dateien ein fertiges .ipa Paket zu erstellen.

Anlaufstellen für Probleme und Fragen bezüglich der Flash Entwicklung für iPhone sind die offizielle Adobe Labs Seite zum iPhone Packager, der dazugehörende Entwicklerleitfaden (pdf), oder das iPhone Packager Forum.

So genug der langen Vorreden, hier nun eine Schritt für Schritt Anleitung zum Erstellen von iPhone Applikationen mit FlashDevelop.

Voraussetzungen

Bevor man anfangen kann müssen erst eine Dinge erledigt werden. Selbst wenn man nicht mit den Apple Werkezugen (Xcode, InterfaceBilder) arbeitet benötigt man trotzdem einen Apple Developer Account (kostet $99 pro Jahr) mit dessen Hilfe man die notwendigen Zertifikate erstellen kann.

  • Zertifikate (“.p12″ und “.mobileprovision”)

    Das Zertifikat mit der Dateiendung .p12 kann man leider nicht direkt bei Apple herunterladen, allerdings lässt es sich zumindest auf einem Mac leicht aus dem .cer Zertifikat exportieren.
    Die .mobileprovision Datei wird online über den Apple Developer Account erstellt. Man kann die .p12 auch in Windows mittels openSSL selbst herstellen, allerdings hat dies bei meinem Test weder in WinXP, noch Vista oder Win7 zuverlässig funktioniert.

    .p12 "Private Key" aus dem Schlüsselbund exportieren

    .p12 "Private Key" aus dem Schlüsselbund exportieren und als .p12-Datei abspeichern

    .mobileprovision Datei Download

    .mobileprovision Datei Download

    Eine genauere Erklärung des Apple Lizenzmodells möchte ich hier nicht geben. Wer noch keinen Apple Developer Account hat oder mehr über die Lizenzierung erfahren möchte, der kann sich z.B. die Aufzeichnung von Saban Ünlüs Vortrag auf der FFK2010 ansehen oder direkt in der Adobe Anleitung nachlesen.

    Wurden die beiden Dateien gespeichert sollten diese in  “iphone_dev.p12” und “iphone_dev.mobileprovision” umbenannt werden. Sie dienen später der Erstellung der .ipa-Datei.

  • Flex 4 SDK und der “Packager for iPhone” seit Air 2.5 ist dieser im Air SDK inkludiert

    Den Flex SDK gibt es im OpenSource Bereich von Adobe zum Download. Ich habe für meine Tests die Version 4.1.0.16076 benutzt (download). Wurde dieser heruntergeladen und entpackt so fehlt noch der iPhone Packager. Hier wurde beim Test die “Version” v1_win_060210 verwendet (download). Der iPhone Packager muss entpackt und dessen Inhalt in den Flex SDK Ordner verfrachtet werden (einfach kopieren und ersetzen). Update: der iPhone Packager ist seit der Air SDK Version 2.5 im Air SDK von Haus aus mit dabei. Also einfach den Air SDK (>= 2.5) in den Flex SDK (z.B. 4.5.1) “kopieren und ersetzen”. Damit ist der SDK, mit dem später die iPhone taugliche SWF-Datei erstellt wird, vollständig.

  • FlashDevelop Iphone Project Template

    Dieser Teil ist einfach zu erledigen. Das FlashDevelop 3.2.2 RTM Template gibt es hier zum Download (iPhone AIR AS3 Projector Template). Diese zip-Datei muss nur entpackt und in das C:\[pfad_zu_FlashDevelop]\FlashDevelop\Projects\ Verzeichnis kopiert werden.

    Update: Das Template funktioniert auch mit FlashDevelop 3.3.0 und 3.3.1, allerdings gibt es in diesen Versionen einen Bug mit dem Flex SDK Pfad (FlashDevelop Bug im Forum) welcher zu Problemen führen kann.

    Update: Möchte man die Grundinstallation vom FlashDevelop sauber halten so kann man das Template auch im Benutzerverzeichnis (“Tools > Application Files …“) speichern.

    FlashDevelop Project Template einfügen

    FlashDevelop Project Template im Ordner "Projects" einfügen.

    Ein Neustart von FlashDevelop ist nicht nötig, man kann das neue Projekt Template sofort im Menü auswählen.

    iPhone Air AS3 Projector

    iPhone Air AS3 Projector

Ein iPhone Projekt

Nach dem nun alle Voraussetzungen erfüllt sind kann man ein iPhone Projekt erstellen. Erfahrene FlashDevelop Benutzer können diesen Teil überspringen und die im Projekt enthaltene readme.txt als kurze Anleitung verwenden.

  • Flex SDK eintrichten

    Da für das iPhone der normale SDK nicht ausreicht muss der bereits vorbereitet “Flex SDK + iPhone Packager” für iPhone Projekte genutzt werden. Rechtsklick auf den Projektnamen -> Properties... -> “Compiler Options” -> “Custom Path to Flex SDK” und dort trägt man nun den Pfad des vorbereiteten Flex SDK Ordners ein.

    Flex SDK Pfad anpassen

    Flex SDK Pfad anpassen

    Den Pfad zum Flex SDK kann man gleich mit Strg + c in die Zwischenablage kopieren, denn er wir im nächsten Schritt auch gebraucht.

  • PackageApplication.bat” anpassen

    In der Datei “PackageApplication.bat” muss auch der Pfad zum Flex SDK angepasst werden. Hierzu einfach in Flashdevelop doppelklick auf die Datei “PackageAppliaction.bat” und den Pfad in Zeile 13 anpassen, indem man “C:\flex_sdk_4_with_iphone_packager\bin” durch den Pfad des bin (!) Ordners des Flex SDK ersetzt.

    Den Flex SDK Pfad in der Datei "PackageApplication.bat" anpassen.

    Den Flex SDK Pfad in der Datei "PackageApplication.bat" anpassen.

  • Das Flash Develop Projekt iPhone fitt machen

    Hat man ein fertiges Projekt erstellt sollte dieses ähnlich wie im Bild unten gezeigt aussehen. Im Vergleich zu einem normalen FladhDevelop Projekt fallen die Ordner “certificates” und “iphone“, sowie das bereits gut gefüllte “bin” Verzeichnis ins Auge.

    Um das Projekt später in eine .ipa packen zu können sollten zuerst die Zertifikat-Dateien in den “certificates” Ordner kopiert werden. Falls noch nicht passiert, müssen diese nun in “iphone_dev.p12” und “iphone_dev.mobileprovision” umbenannt werden.

    Zertifikate nach "certificates" kopieren und richtig benennen.

    Zertifikate nach "certificates" kopieren und richtig benennen.

  • Die SWF kompilieren

    Hat man den Flex SDK in Flashdevelop angepasst so kann man das Projekt wie gewohnt kompilieren und es startet über den “Air Debug Launcher” (adl). Das sollte bei dem mitgelieferten Projekt in etwa so wie im unteren Bild aussehen. Wie man sieht zeigt der adl einen “Device” Eintrag im Menü an über welchen sich die simulierte Umgebung drehen lässt.

    "Air Debug Launcher" mit einer iPhone Applikation

    "Air Debug Launcher" mit einer iPhone Applikation

  • Eine .ipa erstellen

    Um den Vorgang der IPA-Erstellung zu starten muss die “PackageApplication.bat” ausgeführt werden (Rechtsklick -> Execute). Danach wird erst einmal gefragt welche Art von ipa man erstellen möchte. Für die Entwicklungsphase reicht test (1) oder debug (2). Möchte man seine ipa für den AppStore erzeugen dann sollte man (3) wählen. Wird die Applikation nicht im AppStore sondern über das ad-hoc Verfahren verbreitet dann (4). Für weitere Erklärungen welcher Modus welche Bedeutung hat siehe [“Packager for iPhone Developer Guide“, Seite 26ff].

    IPA Erstellung - Typ der IPA auswhlen

    IPA Erstellung - Typ der IPA auswählen

    Als nächstes wird nach dem Passwort des Zertifikats gefragt. Das ist jenes Passwort welches beim Export aus dem Schlüsselbund am Mac zum Schutz des Zertifikates festgelegt wurde. Achtung: Das Passwort ist während der Eingabe sichtbar.

    IPA Erstellung Passwort Eingabe

    IPA Erstellung Passwort Eingabe

    Nun beginnt die Erstellung der IPA Datei, dies kann einige Zeit dauern.

    IPA wird erstellt

    IPA wird erstellt

    Schlussendlich gibt es eine Meldung ob der Vorgang erfolgreich war. Ist ein Fehler aufgetreten wird eine Meldung des Adobe “pfi” Packagers ausgegeben.

    IPA Erstellung war erfolgreich

    IPA Erstellung war erfolgreich

    Schlussendlich sollte im “iphone” Ordner die gerade erstellte ipa-Datei zu finden sein.

    Das fertige (ipa) iPhone Paket

    Das fertige (ipa) iPhone Paket

Da ich zurzeit kein iPhone zur Hand habe konnte ich noch nicht testen, ob die so erstellen Applikationen auch wirklich am iPhone laufen. Allerdings lässt die durchwegs fehlerlose Abarbeitung der Zertifizierung durch das Adobe “pfi” vermuten, dass es  wohl ziemlich sicher klappen wird.
Sobald ich es getest habe werd ich hier ein Update einfügen – Update: So nun ists “amtlich”, die erstellen Projekte laufen auf dem iPhone :)

Zur Übersicht alle Schritte in Kurzform aus der readme.txt:

Instructions for DISTRIBUTING* your application:

1. Download and Install Flex SDK 4.5.x and Air SDK >= 2.5.x
- Flex < 4.5.1 and Air SDK < 2.5 (beta program):
  - if you use Flex SDK < 4.5.1: download link: http://labs.adobe.com/technologies/packagerforiphone/
  - if you use Flex SDK < 4.5.1: merge your Flex SDK and the packagerforiphone (copy packager files into flex sdk folder)
- Flex 4.5.1 and Air SDK >= 2.5:
  - with Air SDK >= 2.5 (http://www.adobe.com/products/air/sdk/) use the Air SDK just like the "Packager for iPhone" (merge Flex SDK and Air SDK)
- set the Flex SDK Path of your project to the merged Flex SDK folder.

2. Creating certificates:
- download and create a ".mobileprovision" and a ".p12" certificate file
- instructions link: (http://download.macromedia.com/pub/labs/packagerforiphone/packagerforiphone_devguide.pdf)
- name the files "iphone_dev.p12" and "iphone_dev.mobileprovision" and copy them to the 'certificates' directory.

3. Packaging the application:
- edit PackageApplication.bat and change the path to Flex SDK,
- run PackageApplication.bat, you will be prompted for the certificate password.
- the packaged application should appear in your project in the 'iphone' directory.

* to test your application from FlashDevelop, just press F5 as usual, be aware that the available APIs on your desktop differ from the iPhone.

    Und hier nochmals das FlashDevelop iPhone Project Template zum Download.

Updated Download (29.07.2011): iPhone-AIR-AS3-Template (Air SDK > 2.5)

Update(1.10.2010): Hab soeben festgestellt, dass der SplashScreen nicht angezeigt wurde am iPhone. Hab den Fehler behoben und die .zip auf den neuesten Stand gebracht. Ursache war wohl, dass die Default.png wohl immer im “root” des Projekts sein muss und nicht im “bin/” Verzeichnis.

Update(8.10.2010): Die Batch kann nun auch den “GPU rendering diagnostics” Modus auf Wunsch aktivieren. Damit lässt sich das Hoch-und Runterladen von Texturen (Bitmaps) auf die GPU (also die Hardwarebeschleunigung) beobachten. Für alle die es genau wissen wollen, im Grunde wird damit nur der Parameter -renderingdiagnostics beim Aufruf der pfi hinzugefügt. Für mehr Details zur Debug Anzeige der Hardwarebeschleuningung sollte man sich den “iPhone developer guide” Seite 30ff ansehen.

Update(14.11.2010): Update in der Batch Datei: Diese hat immer Dateien mit der Einstellung “-target test-ipa” erstellt, auch wenn man z.B. debug ausgewählt hatte (die Dateinamen wurden aber korrekt geändert). Nun funktioniert es richtig ;)

Update(19.07.2011): Der iPhone Packager ist nun im offiziellen Air SDK (ab version 2.5) enthalten sein. Also man muss nun den Flex SDK 4.5.1 und Air SDK (>= 2.5) zusammenkopieren statt früher den Flex SDK und den “Packager of iPhone”.

Update(29.07.2011):
In den aktuellen Versionen des Flex SDK gibt es kein “pfi” mehr. Hier muss stattdessen “adt” verwenden. Dazu einfach in der Datei “PackageApplication.bat.template” in Zeile 64 “pfi” durch “adt” ersetzen.

Zum Fehler:

Error: Cannot find node: versionNumber

Ab Air 2.5 wird die Versionsnummer nicht mehr mit dem Tag “<version>1.0</version>” sondern mit zwei Tags “<versionNumber>1.0.0<versionNumber>” und “<versionLabel>100<versionLabel>” angegeben. Darum muss auch die Datei “application.xml.template” in Zeile 6 entsprechend angpasst werden.

Danke an Philipp N. für den Hinweis und James M. für die Anpassung des Templates für Flash Develop 4 und Air 2.7.