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

画像を表示

local sky = display.newImage("sky.jpg")

local sky = display.newImage("sky.jpg")
local cloud = display.newImage("cloud2.png")
cloud.x = 0
cloud.y = 0

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

local sky = display.newImage("sky.jpg")
local cloud = display.newImage("cloud2.png")

-- display 480x800

cloud.x = 240
cloud.y = 600

local sky = display.newImage("sky.jpg")
local cloud = display.newImage("cloud2.png")

-- display 480x800

cloud.x = 240
cloud.y = 600

local star = display.newImage("star.png")
star.x = 180
star.y = 200
star.rotation = 20

-- 物理エンジンを使う
local physics = require("physics")
physics.start()

local sky = display.newImage("sky.jpg")
local cloud = display.newImage("cloud2.png")

-- display 480x800

cloud.x = 240
cloud.y = 600

-- 物理エンジンの対象に追加
-- friction : 摩擦
physics.addBody(cloud, {friction = 0.5})
-- cloud を背景に固定
cloud.bodyType = "static"

local star = display.newImage("star.png")
star.x = 180
star.y = 200
star.rotation = 20

-- 物理エンジンの対象に追加
-- density : 密度
-- bounce : 跳ね返り係数
physics.addBody(star, {density=2.0, friction=0.5, bounce=0.5})

-- 物理エンジンを使う
local physics = require("physics")
physics.start()

local sky = display.newImage("sky.jpg")
local cloud = display.newImage("cloud2.png")

-- display 480x800

cloud.x = 240
cloud.y = 600

-- 物理エンジンの対象に追加
-- friction : 摩擦
physics.addBody(cloud, {friction = 0.5})
-- cloud を背景に固定
cloud.bodyType = "static"

-- 星の生成を関数にする
-- math.random(hoge) : 0 ～ hoge - 1
local function createStar()
 local star = display.newImage("star.png")
 star.x = math.random(480)
 star.y = -100
 star.rotation = 20

 -- 物理エンジンの対象に追加
 -- density : 密度
 -- bounce : 跳ね返り係数
 physics.addBody(star, {density=2.0, friction=0.5, bounce=0.5})
end

-- 500ms 毎 createStart() を 10 回呼び出す
timer.performWithDelay(500, createStar, 10)

■ Hello Corona2

テキストを表示

local sky = display.newImage("sky.jpg")
local hello = display.newText("hello", 0, 0)
local hello2 = display.newText("hello world", 50, 50, native.systemFont, 40)
local hello3 = display.newText("hello corona", 0, 0, native.systemFont, 80)
hello3.x = display.contentWidth / 2
hello3.y = display.contentHeight / 2
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

local screenW, screenH = display.contentWidth, display.contentHeight

local sky = display.newImage("sky.jpg")

local physics = require("physics")
physics.start()

-- display.setStatusBar( display.HiddenStatusBar )

local droid = display.newImage("androids2.png")
droid.x = screenW / 2
droid.y = 720
physics.addBody(droid, "static", {friction=0.5, bounce=0.3})

local scaleFactor = 1.0
local physicsItem1 = (require "cupcake").physicsData(scaleFactor)
local physicsItem2 = (require "donut").physicsData(scaleFactor)
local physicsItem3 = (require "eclair").physicsData(scaleFactor)

local cupcake = display.newImage("cupcake.png")
cupcake.x = screenW / 2 - 100
local donut = display.newImage("donut.png")
donut.x = screenW / 2
local eclair = display.newImage("eclair.png")
eclair.x = screenW / 2 + 100

physics.addBody( cupcake, physicsItem1:get("cupcake") )
physics.addBody( donut, physicsItem2:get("donut") )
physics.addBody( eclair, physicsItem3:get("eclair") )
--cupcake.x = screenW / 2;
--cupcake.y = cupcake.height / 2;

local function addItemTouch( event )
    local s = display.getCurrentStage()
    if "began" == event.phase then
        local scaleFactor = 1.0
        local id = math.random(3);
        local physicsData;
        local item;
        if id == 1 then
         physicsData = (require "cupcake").physicsData(scaleFactor)
         item = display.newImage("cupcake.png")
         physics.addBody( item, physicsData:get("cupcake") )
        elseif id == 2 then
         physicsData = (require "donut").physicsData(scaleFactor)
         item = display.newImage("donut.png")
         physics.addBody( item, physicsData:get("donut") )
        else
         physicsData = (require "eclair").physicsData(scaleFactor)
         item = display.newImage("eclair.png")
         physics.addBody( item, physicsData:get("eclair") )
        end
         
        item.x = event.x
        item.y = event.y
        item.isFocus = true
        item.id = event.id
    end 
end

local xyText = display.newText( "Tap Screen!", 0, 0, native.systemFont, 40 )
xyText.x = screenW / 2
xyText.y = 40
xyText:setTextColor(255, 255, 255)

system.activate( "multitouch" )
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 ]]

-- ここはコメント

--[[
ここはコメント
--]]

---[[
ここはコメントではない
--]]

* if文

if hoge == true then
  fuga()
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