Coronaで簡単なARアプリを作りましょう

今回はCoronaでARアプリの雛形を作りましょう。
極力にシンプルにしたいと思いますが、時間のある方ならこれをベースにいろいろ出来ると思います！

これで一応アプリはできましたが、この季節のでちょっとクリスマスっぽさを与えましょう（サンタはどこにいるだろうな〜と思った時に役たつ！）

さって、始めよう！
最初はカメラの画像をrectに貼ります

main.lua

display.setStatusBar( display.HiddenStatusBar )

--画面の大きさのrectを作って
local cameraView = display.newRect( 0, 0, display.contentWidth, display.contentHeight )
cameraView.x = display.contentCenterX
cameraView.y = display.contentCenterY

--これでカメラの画像をtextureとして使えます
cameraView.fill = { type="camera" }

カメラのtextureは全画面をカバーしませんのでちょっと伸ばしましょう（iPhone4なら問題はないけど）

main.lua

cameraView.xScale = 1.2
cameraView.yScale = 1.2

これだけだとカメラの画像は静的になっています。TEXTUREを毎フレーム更新するためにはdrawModeを変更しなければなりません。

main.lua

display.setStatusBar( display.HiddenStatusBar )
--カメラが毎フレームに更新するためにdrawModeを変えます
display.setDrawMode( "forceRender" )

これをするといろいろ描画の最適化は無効になるので基本的にアプリは重くなります。そのためカメラでやりたいことを終わりましたら、忘れずにdrawModeを戻しましょう

main.lua

display.setDrawMode( "default" )

カメラとGraphics2.0でいろんなfilterも使えます！
http://docs.coronalabs.com/guide/graphics/effects.html
　(※Proライセンスは必要です)

main.lua

cameraView.fill.effect = "filter.bloom"

さらにもう一つのrectを作って、二つの画像は使えます (カメラを複数使うでなにか面白いことも出来るかもしれません)

main.lua

local cameraViewSmall = display.newRect( 0, 0, display.contentWidth/5, display.contentHeight/5 )
cameraViewSmall.x = 60
cameraViewSmall.y = 40
cameraViewSmall.fill = { type="camera" }
cameraViewSmall.strokeWidth = 2
cameraViewSmall:setStrokeColor( 1, 0, 0, 1 )

これでカメラはできました、次は方向をとるためにデバイスからheadingを取ります

main.lua

--方向を示すためのtextです
local heading = display.newText({
    text = "-",
    y = 40,
    x = display.contentCenterX,
    width = 128,
    fontSize = 32,
    align = "center"
})
-- 赤だと見やすい
heading:setFillColor( 1, 0, 0, 1 )

local headingData = {}
function updateHeading(e)
    --真北と磁北は存在します
    -- メモ：http://ja.wikipedia.org/wiki/真北
    -- 磁北を使う、e.geographic(真北は上手くいきません、原因は不明)
    headingData.raw = e.magnetic
    headingData.rotation = math.floor(headingData.raw)

    heading.text = headingData.rotation
end

Runtime:addEventListener('heading', updateHeading)

カメラ表示の上にサンタの無料素材を貼りましょう、そしてそれを北に合わせます

main.lua

local headingMarker = display.newImageRect( "headingMarker.png", 160, 160 )
headingMarker.x = display.contentCenterX
headingMarker.y = display.contentCenterY
headingMarker.isVisible = false

local headingData = {}
function updateHeading(e)
    --真北と磁北は存在します
    -- メモ：http://ja.wikipedia.org/wiki/真北
    -- 磁北を使う、e.geographic(真北は上手くいきません、原因は不明)
    headingData.raw = e.magnetic
    headingData.rotation = math.floor(headingData.raw)

    --サンタは北に合わせます
    headingMarker.x = display.contentCenterX -((180+headingData.raw)%360 -180)*8
    headingMarker.isVisible = true

    -- 方向を計算
    if(headingData.rotation >= 0 and headingData.rotation < 23) then
        heading.text = headingData.rotation..' N'
        heading.x = display.contentCenterX
    elseif(headingData.rotation >= 23 and headingData.rotation < 68) then
        heading.text = headingData.rotation..' NE'
        heading.x = display.contentCenterX
    elseif(headingData.rotation >= 68 and headingData.rotation < 113) then
        heading.text = headingData.rotation..' E'
        heading.x = display.contentCenterX
    elseif(headingData.rotation >= 113 and headingData.rotation < 158) then
        heading.text = headingData.rotation..' SE'
        heading.x = display.contentCenterX
    elseif(headingData.rotation >= 158 and headingData.rotation < 203) then
        heading.text = headingData.rotation..' S'
        heading.x = display.contentCenterX
    elseif(headingData.rotation >= 203 and headingData.rotation < 248) then
        heading.text = headingData.rotation..' SW'
        heading.x = display.contentCenterX
    elseif(headingData.rotation >= 248 and headingData.rotation < 293) then
        heading.text = headingData.rotation..' W'
        heading.x = display.contentCenterX
    elseif(headingData.rotation >= 293 and headingData.rotation < 360) then
        heading.text = headingData.rotation..' NW'
        heading.x = display.contentCenterX
    end    
end

Runtime:addEventListener('heading', updateHeading)

一番上にクリスマスの無料素材フレームを使おう

main.lua

local frame = display.newImageRect( "frame.png", display.actualContentWidth, display.actualContentHeight )
frame.x = display.contentCenterX
frame.y = display.contentCenterY

かなりシンプルでサンプルをDLする意味はあまりありませんが、一応、こちらにサンプルを置きます〜
Github: https://github.com/gould/corona-x-mas

備考：残念ながら今の時点（2014/12/15）ではAndroidはカメラをtextureとして使えませんのでこのアプリはiOSでしか使えません。Android 対応が出来たらこちらの記事を更新するかもしれません。