2011年3月14日月曜日

Corona を使ってみた。

Corona SDK は AnscaMobile 社 (http://www.anscamobile.com/) が提供しているライブラリ

・iPhone/iPad/Android 向けのアプリケーションを作成できる
・Lua 言語で記述 (AS2 に似てるらしい)
・開発環境は Mac OS X か Microsoft Windows
・UI の API は OpenGL ベース

# 残念ながら linux は未対応です。

・自分の端末に入れるだけならばトライアル（無料・無期限）で使える
・商用としてiPhone/Androidマーケットに登録するアプリをビルドするときに商用ライセンス(一年）が発生する


■ 参考サイト
・日本 Android の会定例（2011年3月）の木村君の講演
　・Ustream 録画
　・スライド

・面白法人カヤックのFlashチームのブログ
　・Corona で スマートフォン アプリ開発をしよう。インストール編 | エントリー | _level0.KAYAC | flash ActionScript blog -
　・Corona で スマートフォン アプリ開発をしよう。HelloWorld 編 | エントリー | _level0.KAYAC | flash ActionScript blog -
　・Corona で スマートフォン アプリ開発をしよう。開発編 | エントリー | _level0.KAYAC | flash ActionScript blog -


■ 事前準備

* Android の apk を出力するには、JDK をインストールして PATH を通しておく


■ Corona SDK のインストール

* http://www.anscamobile.com/corona/ の Download からダウンロード
* メールとパスワード設定
* registering メールが来るので、validate リンクをクリック

* Mac or Windows の Corona SDK をダウンロードし、インストーラを起動


■ Corona Simulator

* Corona SDK をインストールすると、スタートメニューに Corona SDK というのができるので、この中の Corona Simulator を起動

* [Window] - [View As] で端末のスキンを変えられる (Droid, NexusOne, myTouch, GalaxyTab)


■ 端末にインストールできる実行ファイル(Android だと apk)の作成

* Corona Simulator で [File] - [Build...] から Build for Android ダイアログを開く
* Application Name, Version, Package, Target OS Compativility, Save to Folder などを設定
* 出力先に apk ファイルが作成される


■ Hello Corona

画像を表示

view plainprint?
  1. local sky = display.newImage("sky.jpg")  




view plainprint?
  1. local sky = display.newImage("sky.jpg")  
  2. local cloud = display.newImage("cloud2.png")  
  3. cloud.x = 0  
  4. cloud.y = 0  




x, y は画像の中心位置っぽい


view plainprint?
  1. local sky = display.newImage("sky.jpg")  
  2. local cloud = display.newImage("cloud2.png")  
  3.   
  4. -- display 480x800  
  5.   
  6. cloud.x = 240  
  7. cloud.y = 600  




view plainprint?
  1. local sky = display.newImage("sky.jpg")  
  2. local cloud = display.newImage("cloud2.png")  
  3.   
  4. -- display 480x800  
  5.   
  6. cloud.x = 240  
  7. cloud.y = 600  
  8.   
  9. local star = display.newImage("star.png")  
  10. star.x = 180  
  11. star.y = 200  
  12. star.rotation = 20  




view plainprint?
  1. -- 物理エンジンを使う  
  2. local physics = require("physics")  
  3. physics.start()  
  4.   
  5. local sky = display.newImage("sky.jpg")  
  6. local cloud = display.newImage("cloud2.png")  
  7.   
  8. -- display 480x800  
  9.   
  10. cloud.x = 240  
  11. cloud.y = 600  
  12.   
  13. -- 物理エンジンの対象に追加  
  14. -- friction : 摩擦  
  15. physics.addBody(cloud, {friction = 0.5})  
  16. -- cloud を背景に固定  
  17. cloud.bodyType = "static"  
  18.   
  19. local star = display.newImage("star.png")  
  20. star.x = 180  
  21. star.y = 200  
  22. star.rotation = 20  
  23.   
  24. -- 物理エンジンの対象に追加  
  25. -- density : 密度  
  26. -- bounce : 跳ね返り係数  
  27. physics.addBody(star, {density=2.0, friction=0.5, bounce=0.5})  




view plainprint?
  1. -- 物理エンジンを使う  
  2. local physics = require("physics")  
  3. physics.start()  
  4.   
  5. local sky = display.newImage("sky.jpg")  
  6. local cloud = display.newImage("cloud2.png")  
  7.   
  8. -- display 480x800  
  9.   
  10. cloud.x = 240  
  11. cloud.y = 600  
  12.   
  13. -- 物理エンジンの対象に追加  
  14. -- friction : 摩擦  
  15. physics.addBody(cloud, {friction = 0.5})  
  16. -- cloud を背景に固定  
  17. cloud.bodyType = "static"  
  18.   
  19. -- 星の生成を関数にする  
  20. -- math.random(hoge) : 0 ～ hoge - 1  
  21. local function createStar()  
  22.  local star = display.newImage("star.png")  
  23.  star.x = math.random(480)  
  24.  star.y = -100  
  25.  star.rotation = 20  
  26.   
  27.  -- 物理エンジンの対象に追加  
  28.  -- density : 密度  
  29.  -- bounce : 跳ね返り係数  
  30.  physics.addBody(star, {density=2.0, friction=0.5, bounce=0.5})  
  31. end  
  32.   
  33. -- 500ms 毎 createStart() を 10 回呼び出す  
  34. timer.performWithDelay(500, createStar, 10)  





■ Hello Corona2

テキストを表示

view plainprint?
  1. local sky = display.newImage("sky.jpg")  
  2. local hello = display.newText("hello", 0, 0)  
  3. local hello2 = display.newText("hello world", 50, 50, native.systemFont, 40)  
  4. local hello3 = display.newText("hello corona", 0, 0, native.systemFont, 80)  
  5. hello3.x = display.contentWidth / 2  
  6. hello3.y = display.contentHeight / 2  
  7. hello3:setTextColor(0, 0, 128)  





■ Eclipse プラグイン

LuaForge: LuaEclipse: Project Filelist

luaeclipse-1.2.0.zip をダウンロードし、解凍すると features, plugins フォルダができるので、中のファイルを eclipse.exe と同じディレクトリの features, plugins フォルダ内にコピーする。

Eclipse を起動して、
[Help] - [Install New Software...]

Add ボタンをクリックして以下を追加

LuaEclipse Update Site

LuaEclipse 1.2 にチェックマークつけてインストール

# 真ん中を除かないとエラーが消えなかった




■ Lua インタプリタ

Lua Binaries Download

＊ Windows の場合

lua5_1_4_Win32_bin.zip
をダウンロードして解凍

Eclipse を起動して
[Window] - [Preferences] - [Lua] - [Installed Interpreters]
を開いて Add ボタンをクリックして、Path に解凍したフォルダ内の lua5.1.exe を指定する
チェックマークにチェックを入れて OK を押す




■ Eclipse で lua

[File] - [New] - [Project...]

Lua から New Lua Project を選択して Next
Project name: を入力して Finish




■ PhysicsEditor (http://www.physicseditor.de/)

* 透過 png からアウトラインを抽出して .lua ファイルにエクスポートしてくれるツール


■ Hello Corona with PhysicsEditor

view plainprint?
  1. local screenW, screenH = display.contentWidth, display.contentHeight  
  2.   
  3. local sky = display.newImage("sky.jpg")  
  4.   
  5. local physics = require("physics")  
  6. physics.start()  
  7.   
  8. -- display.setStatusBar( display.HiddenStatusBar )  
  9.   
  10. local droid = display.newImage("androids2.png")  
  11. droid.x = screenW / 2  
  12. droid.y = 720  
  13. physics.addBody(droid, "static", {friction=0.5, bounce=0.3})  
  14.   
  15. local scaleFactor = 1.0  
  16. local physicsItem1 = (require "cupcake").physicsData(scaleFactor)  
  17. local physicsItem2 = (require "donut").physicsData(scaleFactor)  
  18. local physicsItem3 = (require "eclair").physicsData(scaleFactor)  
  19.   
  20. local cupcake = display.newImage("cupcake.png")  
  21. cupcake.x = screenW / 2 - 100  
  22. local donut = display.newImage("donut.png")  
  23. donut.x = screenW / 2  
  24. local eclair = display.newImage("eclair.png")  
  25. eclair.x = screenW / 2 + 100  
  26.   
  27. physics.addBody( cupcake, physicsItem1:get("cupcake") )  
  28. physics.addBody( donut, physicsItem2:get("donut") )  
  29. physics.addBody( eclair, physicsItem3:get("eclair") )  
  30. --cupcake.x = screenW / 2;  
  31. --cupcake.y = cupcake.height / 2;  
  32.   
  33. local function addItemTouch( event )  
  34.     local s = display.getCurrentStage()  
  35.     if "began" == event.phase then  
  36.         local scaleFactor = 1.0  
  37.         local id = math.random(3);  
  38.         local physicsData;  
  39.         local item;  
  40.         if id == 1 then  
  41.          physicsData = (require "cupcake").physicsData(scaleFactor)  
  42.          item = display.newImage("cupcake.png")  
  43.          physics.addBody( item, physicsData:get("cupcake") )  
  44.         elseif id == 2 then  
  45.          physicsData = (require "donut").physicsData(scaleFactor)  
  46.          item = display.newImage("donut.png")  
  47.          physics.addBody( item, physicsData:get("donut") )  
  48.         else  
  49.          physicsData = (require "eclair").physicsData(scaleFactor)  
  50.          item = display.newImage("eclair.png")  
  51.          physics.addBody( item, physicsData:get("eclair") )  
  52.         end  
  53.            
  54.         item.x = event.x  
  55.         item.y = event.y  
  56.         item.isFocus = true  
  57.         item.id = event.id  
  58.     end   
  59. end  
  60.   
  61. local xyText = display.newText( "Tap Screen!", 0, 0, native.systemFont, 40 )  
  62. xyText.x = screenW / 2  
  63. xyText.y = 40  
  64. xyText:setTextColor(255, 255, 255)  
  65.   
  66. system.activate( "multitouch" )  
  67. Runtime:addEventListener( "touch", addItemTouch )  




遊んでみたい方はこちらから。(Android 2.2 以上 : スペック低いと厳しいかも)
DroidFall.apk


■ SpriteDeck (http://www.spritedeck.com)

* Visual Game Designer for Corona SDK
* Corona で使える画面を作成できるツール
* 画面を作成してエクスポートすると **.lua と _**.lua が作成される
* _**.lua : アプリケーション画面
* **.lua : アプリケーションロジック
* ライセンスを購入しないとファイルが保存できない（トライアルあり）


■ Hello Corona with SpriteDeck

* SpriteDeck を使って作ってみた。

* 感想
　* いまいちなところ
　　* Hello Corona! って表示されるだけのアプリの容量が 1.8M
　　* SpriteDeck では、円、矩形、テキスト、ボタン　くらい
　　* グラデーションなどは指定できない

　* いいところ
　　* 座標は数値指定で細かく調整できる
　　* サイズを変えたり、配置を換えたりが簡単
　　* テキストの Font は変えられない
　　* Physics Body, Body Type, Sensor などが GUI から設定できる
　　* Density, Bounce, Friction も GUI から設定できる

　* その他
　　* 無料版だとプロジェクトが保存できないので、実質あまり使えない




■ Lua 言語

* Lua 5.1 リファレンスマニュアル
* ドキュメント
* デモ

* Lua アプリケーションコードは main.lua から実行される
* 追加のコードは require 関数でファイル名を指定

* 変数名を数字からはじめることはできない
* 大文字小文字を区別する
* 1.2e-2, 0xff などの表記が可能

* 変数の型を宣言する必要はない
* 基本的な型 : nil, boolean, number, string, function, table

* table : 連想配列、nil 以外の任意の値をインデックスとして使用可能
　　* フィールドにメソッドを保持することが可能
　　* t = {} のように記述して table 作成

* コメントは -- (ハイフン2つ)
* ブロックをコメントアウトするときは [[ hoge ]]
view plainprint?
  1. -- ここはコメント  
  2.   
  3. --[[  
  4. ここはコメント  
  5. --]]  
  6.   
  7. ---[[  
  8. ここはコメントではない  
  9. --]]  


* if文
view plainprint?
  1. if hoge == true then  
  2.   fuga()  
  3. end  

* 1行に2文書くときは ; を付ける？1行ならいらない
* インクリメント (++) は使えない hoge += 1 のように書く
* 文字列連結は + ではなく ..

* オブジェクトの主なプロパティ
　* object.x
　* object.y
　* object.width
　* object.height
　* object.rotation
　　　回転角度
　　　360 以上もあり

　* object.alpha
　　　透過率 : 0 - 1.0
　　　1.0 を超えるとエラーになる

　* object.isVisible
　* object.xScale
　* object.yScale
　* object.contentWidth
　* object.contentHeight






　
投稿者 時刻:
ラベル: ,

3 件のコメント:

  1. muxukeikei2011年3月15日 0:00

    画像の位置の基準点に関してはobject:setReferencePoint(display.TopLeftReferencePoint)とかobject.xReference / yReferenceなどで変えれるですよー

    返信削除
  2. ymmtny2011年3月15日 11:22

    DroidFallのモチーフはいいですね、さすがです。進化が楽しみです。

    返信削除
  3. yanzm2011年3月19日 12:28

    デフォルトが真ん中ってだけなんですね。 > 画像の位置の基準点
    なれると真ん中の方が楽かも。

    返信削除

登録: コメントの投稿 (Atom)