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

画像を表示

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






 

3 件のコメント:

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

    返信削除
  2. DroidFallのモチーフはいいですね、さすがです。進化が楽しみです。

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

    返信削除