Corona HandsOn #5 ５限目として、CoronaSDKでの音の再生、画面遷移、UIなどについて

1. ColonaLabs.com
13年5月11日土曜日

2. ColonaLabs.com
Code Less, Play More !
with Corona SDK #5
CoronaSDK Ambassador
小野 哲生
13年5月11日土曜日

3. ColonaLabs.com
Corona SDK での音、画面遷移、UI など
五限目。。。
キーンコーン♪
カーンコーン♪
13年5月11日土曜日

4. ColonaLabs.com
Corona SDK での音、画面遷移、UI など
• 音の再生（ BGM、イベント発生時 SE ）
• 画面遷移（ APIの使い方、Data受渡し ）
• UI など （ iPhone５対応、ボタン類 ）
13年5月11日土曜日

5. ColonaLabs.com
事前準備
• https://github.com/TetsuoOno/
CoronaSDK-5_1
• .mp3 をプロジェクトフォルダに追加
(main.luaへBGMとSEの両コードを記述済み)
• 音の再生
Corona SDK での音の再生
13年5月11日土曜日

6. ColonaLabs.com
• 音の再生（ BGM ）
local BGM = audio.loadSound(“bgm.mp3”)
audio.play( BGM )
音は鳴りましたね？（１回だけ）
でも、このままではループしません...orz
ループさせてBGMにしましょう☞
Corona SDK での音の再生
13年5月11日土曜日

7. ColonaLabs.com
• 音の再生（ BGM ）
Corona SDK での音の再生
local BGM = audio.loadSound(“bgm.mp3”)
audio.play( BGM,
{ loops = -1 } )
--channel = 1,
--duration = 30000,
--fadein = 5000,
--onComplete = callbackListener
13年5月11日土曜日

8. ColonaLabs.com
Corona SDK での音の再生
• 音の再生（ SE ）
local SE = audio.loadSound(“se.mp3”)
local function onTouch( event )
audio.play( SE )
end
Runtime:addEventListener(“touch”,
onTouch )
13年5月11日土曜日

9. ColonaLabs.com
• 画面遷移（ APIの使い方）
Corona SDK での画面遷移
事前準備
• https://github.com/TetsuoOno/
CoronaSDK-5_2
• main.lua、scene1.lua、scene2.luaの解説
(各ファイルへはコメント書き込み済み)
• 新規作成時、templateでSceneを選択
13年5月11日土曜日

10. ColonaLabs.com
• 画面遷移（ APIの使い方）：main.lua
Corona SDK での画面遷移
--storyboardAPIの呼出し
local storyboard = require "storyboard"
--同じフォルダ内のscene1.luaへ遷移
storyboard.gotoScene( "scene1" )
13年5月11日土曜日

11. ColonaLabs.com
• 画面遷移（ APIの使い方）：scene1.lua
Corona SDK での画面遷移
--storyboardAPIの呼出し
local storyboard = require "storyboard"
--新しいsceneの作成
local scene = storyboard.newScene( )
13年5月11日土曜日

12. ColonaLabs.com
• 画面遷移（ APIの使い方）：scene1.lua
Corona SDK での画面遷移
-----------------------------------------------------------
-- BEGINNING OF YOUR IMPLEMENTATION
-----------------------------------------------------------
--createSceneまでの間に
--変数・オブジェクト・functionを宣言
local _W = display.contentWidth
local _H = display.contentHeight
local text1
13年5月11日土曜日

13. ColonaLabs.com
• 画面遷移（ APIの使い方）：scene1.lua
Corona SDK での画面遷移
local function onTouch( event )
if("began" == event.phase )then
text1.text = "touch"
text.x = _W/2 ; text.y = _H/2
elseif("ended" == event.phase )then
storyboard.removeAll( )
storyboard.gotoScene( "scene2" )
end
end
13年5月11日土曜日

14. ColonaLabs.com
• 画面遷移（ APIの使い方）：scene1.lua
Corona SDK での画面遷移
function scene : createScene( event )
local group = self.view
--テキストオブジェクトの作成
text1 = display.newText( "", 0, 0, nil, 40 )
--グループに追加
group : insert( text1 )
end
13年5月11日土曜日

15. ColonaLabs.com
• 画面遷移（ APIの使い方）：scene1.lua
Corona SDK での画面遷移
function scene : enterScene( event )
local group = self.view
--function onTouchの呼出し
Runtime : addEventListener(
"touch", onTouch )
end
13年5月11日土曜日

16. ColonaLabs.com
• 画面遷移（ APIの使い方）：scene1.lua
Corona SDK での画面遷移
function scene : exitScene( event )
local group = self.view
--function onTouchの破棄
Runtime : removeEventListener(
"touch", onTouch )
end
13年5月11日土曜日

17. ColonaLabs.com
• 画面遷移（ APIの使い方）：scene2.lua
Corona SDK での画面遷移
-----------------------------------------------------------
-- BEGINNING OF YOUR IMPLEMENTATION
-----------------------------------------------------------
--createSceneまでの間に
--変数・オブジェクト・functionを宣言
local _W = display.contentWidth
local _H = display.contentHeight
local back
13年5月11日土曜日

18. ColonaLabs.com
• 画面遷移（ APIの使い方）：scene2.lua
Corona SDK での画面遷移
local function onTouch( event )
if("began" == event.phase )then
back:setFillColor( 250, 130, 10 )
elseif("ended" == event.phase )then
storyboard.removeAll( )
storyboard.gotoScene( "scene1" )
end
end
13年5月11日土曜日

19. ColonaLabs.com
• 画面遷移（ APIの使い方）：scene2.lua
Corona SDK での画面遷移
function scene : createScene( event )
local group = self.view
--背景の作成
back = display.newRect( 0, 0, _W, _H )
--グループに追加
group : insert( back )
end
13年5月11日土曜日

20. ColonaLabs.com
• 画面遷移（ Data受渡し）
Corona SDK での画面遷移
事前準備
• https://github.com/TetsuoOno/
CoronaSDK-5_3
• scene1.lua、scene0.luaの解説
(各ファイルへはコメント書き込み済み)
13年5月11日土曜日

21. ColonaLabs.com
• 画面遷移（ Data受渡し）：scene1.lua
Corona SDK での画面遷移
--db.luaの読み込み
local db = require( "db" )
--変数の宣言
local score = 0
local scoreText
local highScoreText
13年5月11日土曜日

22. ColonaLabs.com
Corona SDK での画面遷移
• 画面遷移（ Data受渡し）：scene1.lua
--次のステージへ画面遷移
local function touchToNext(event)
--変数aにscoreを代入
local a = score
--dbのstageclear関数にscoreを渡す
stageclear( score )
13年5月11日土曜日

23. ColonaLabs.com
Corona SDK での画面遷移
• 画面遷移（ Data受渡し）：scene1.lua
--scoreを代入したaを渡す
storyboard.gotoScene( "scene2",
{ effect = "slideLeft", time = 1000,
params = { currentScore = a } })
return true
end
13年5月11日土曜日

24. ColonaLabs.com
Corona SDK での画面遷移
• 画面遷移（ Data受渡し）：scene1.lua
function scene:createScene( event )
--抜粋して解説しています。
highScoreText = display.newText("", 0, 0,
native.systemFont, 30)
--gameover関数戻り値highScore代入
highScoreText.text = " HighScore: " ..
highScore
end
13年5月11日土曜日

25. ColonaLabs.com
Corona SDK での画面遷移
• 画面遷移（ Data受渡し）：scene1.lua
function scene:enterScene( event )
--main.luaからcurrentScoreをもらう
if(event.params.currentScore)then
local currentScore =
event.params.currentScore
end
--dbのgameover関数にscoreを渡す
gameover( score )
end13年5月11日土曜日

26. ColonaLabs.com
Corona SDK での画面遷移
• 画面遷移（ Data受渡し）：scene0.lua
function scene:createScene( event )
--今回スコアとdbのハイスコア比較
if( yourScore >= highScore )then
--今回がハイスコア以上の処理
elseif( yourScore < highScore )then
--ハイスコアの更新なしの処理
end
end
13年5月11日土曜日

27. ColonaLabs.com
• iPhone５対応
Corona SDK での UI
事前準備
• https://github.com/TetsuoOno/
CoronaSDK-5_4
• config.lua をプロジェクトフォルダに追加
• config.lua、main.luaの解説
(各ファイルへはコメント書き込み済み)
• ※SDK Ver.1076以上で動作
13年5月11日土曜日

28. ColonaLabs.com
• iPhone５対応：config.lua
Corona SDK での UI
--端末のモデル・ピクセルHを判定
local isTall = (
( "iPhone" == system.getInfo("model") or
"iPod touch" == system.getInfo("model") )
and
( display.pixelHeight > 960 ) )
13年5月11日土曜日

29. ColonaLabs.com
• iPhone５対応：config.lua
Corona SDK での UI
--iPhone,iPod touchで960を越えるピクセル
if( isTall )then
application = {
content = {
width = 640,
height = 1136,
--
else
13年5月11日土曜日

30. ColonaLabs.com
• iPhone５対応：main.lua
Corona SDK での UI
local _W = display.contentWidth
local _H = display.contentHeight
--ボタン、テキスト、変数
local BTN, modelText, isTall
13年5月11日土曜日

31. ColonaLabs.com
• iPhone５対応：main.lua
Corona SDK での UI
--端末の判定（config.luaと同じ）
isTall = (
("iPhone" == system.getInfo("model") or
"iPod touch" == system.getInfo("model") )
and ( display.pixelHeight > 960 ) )
13年5月11日土曜日

32. ColonaLabs.com
• iPhone５対応：main.lua
Corona SDK での UI
BTN = display.newRect( 0, 0, 100, 100 )
BTN : setFillColor( 250, 130, 10 )
BTN . x = _W / 2
if( isTall )then
BTN.y = display.pixelHeight -100
else
BTN.y = _H -100
end
13年5月11日土曜日

33. ColonaLabs.com
• iPhone５対応：main.lua
Corona SDK での UI
modelText = display.newText( "", 0, 0, nil, 50 )
--端末のピクセルHをテキストに代入
modelText.text = display.pixelHeight
modelText.x = _W/2
if( isTall )then
modelText.y = display.screenOriginY +100
else
modelText.y = 100
end
13年5月11日土曜日

34. ColonaLabs.com
• ボタン
Corona SDK での UI
事前準備
• https://github.com/TetsuoOno/
CoronaSDK-5_5
• .pngをプロジェクトフォルダに追加
(コメント書き込み済み)
13年5月11日土曜日

35. ColonaLabs.com
• ボタン
Corona SDK での UI
local _W = display.contentWidth
local _H = display.contentHeight
--widget APIの呼出し
local widget = require( "widget" )
local button = widget.newButton {
defaultFile = "btn1.png",
overFile = "btn2.png", }
button.x = _W/2 ; button.y = _H/2
13年5月11日土曜日

36. ColonaLabs.com
• 標準 UI ボタン類
Corona SDK での UI
サンプル解説（紹介のみ）
•Sample > Interface > NativeDisplayObject
•Sample > Interface > WidgeDemo
13年5月11日土曜日

37. ColonaLabs.com
Corona SDK #5 まとめ
13年5月11日土曜日

38. ColonaLabs.com
Corona SDK #5 まとめ
• 音の再生（ BGM、イベント発生時 SE ）
• 画面遷移（ APIの使い方、Data受渡し ）
• UI など （ iPhone５対応、ボタン類 ）
13年5月11日土曜日

39. ColonaLabs.com
お疲れさまでした。。。
#6へ つづく。。。
13年5月11日土曜日