16
ColonaLabs.com 1338日金曜日

Corona HandsOn#2

Embed Size (px)

Citation preview

Page 1: Corona HandsOn#2

ColonaLabs.com13年3月8日金曜日

Page 2: Corona HandsOn#2

ColonaLabs.com

   Code Less, Play More !   with Corona SDK #2

CoronaSDK Ambassador     小野 哲生

13年3月8日金曜日

Page 3: Corona HandsOn#2

ColonaLabs.com

Corona SDK でのアニメーション

二限目。。。キーンコーン♪

カーンコーン♪

13年3月8日金曜日

Page 4: Corona HandsOn#2

ColonaLabs.com

Corona SDK でのアニメーション

• transition (CoronaAPIの利用)

• movieclip (外部ライブラリの利用)

• enterFrame (関数でアニメーション)

• spriteSheet (CoronaAPIの利用)

13年3月8日金曜日

Page 5: Corona HandsOn#2

ColonaLabs.com

• transition

local rect = display.newRect(0, 0, 100, 100 )

transition.to( rect, { time = 5000, alpha = 0.5, x = 200, y = 200, rotation = 45} )

Corona SDK でのアニメーション

13年3月8日金曜日

Page 6: Corona HandsOn#2

ColonaLabs.com

Corona SDK でのアニメーション

• movieclip

事前準備• https://github.com/TetsuoOno

CoronaSDK-2_1• 画像・movieclip.lua を追加• main.lua の冒頭に下記を記述local _W = display.contentWidthlocal _H = display.contentHeight

13年3月8日金曜日

Page 7: Corona HandsOn#2

ColonaLabs.com

Corona SDK でのアニメーション

• moviecliplocal movieclip = require( "movieclip" )

image = { }for i = 1, 24, 1 do

table.insert( image, "spiner" .. i .. ".png" )end

anim = movieclip.newAnim( image )anim.x = _W/2 ; anim.y = _H/2anim:play( )

13年3月8日金曜日

Page 8: Corona HandsOn#2

ColonaLabs.com

Corona SDK でのアニメーション

local rect = display.newRect( 0, 0, 100, 10 )

rect.x = display.contentWidth /2rect.y = display.contentHeight /2

local function animate( event ) rect.rotation = rect.rotation + 1

end

Runtime:addEventListener( "enterFrame", animate );

• enterFrame

13年3月8日金曜日

Page 9: Corona HandsOn#2

ColonaLabs.com

Corona SDK でのアニメーション

• spriteSheet

事前準備• https://github.com/TetsuoOno

CoronaSDK-2_2• 画像・ball.lua を追加• main.lua の冒頭に下記を記述local _W = display.contentWidthlocal _H = display.contentHeight

13年3月8日金曜日

Page 10: Corona HandsOn#2

ColonaLabs.com

Corona SDK でのアニメーション

• spriteSheetlocal opt = { frames = require("ball").frames, }local sheet = graphics.newImageSheet(

"ball.png", opt )

local sOpt = { name="ball", start=1, count=14, time=2000 }

local instance = display.newSprite( sheet, sOpt )

instance.x = _W/2; instance.y = _H/2instance:play( )

13年3月8日金曜日

Page 11: Corona HandsOn#2

ColonaLabs.com

• spriteSheet 作成ツール

Corona SDK でのアニメーション

「SpriteHelper」 .lua, physics shape ¥ 1,500

「Sprites」 .lua, template ¥ 850

「Zwoptex」 .lua ¥ Free

「Sprite Master」.lua ¥ 85013年3月8日金曜日

Page 12: Corona HandsOn#2

ColonaLabs.com

• spriteSheet 作成ツールによる .lua の違い

Corona SDK でのアニメーション

ball.lua と numAnim.lua• https://github.com/TetsuoOno

CoronaSDK-2_3• zipをDL

• CoronaでnumAnimを起動• File ☞ Show Project Files ☞ numAnim.lua

13年3月8日金曜日

Page 13: Corona HandsOn#2

ColonaLabs.com

• 番外編 「Kwik」 Photoshop plugin

Corona SDK でのアニメーション

13年3月8日金曜日

Page 14: Corona HandsOn#2

ColonaLabs.com

  Corona SDK #2 まとめ

13年3月8日金曜日

Page 15: Corona HandsOn#2

ColonaLabs.com

  Corona SDK #2 まとめ

• transition (CoronaAPIの利用)

• movieclip (外部ライブラリの利用)

• enterFrame (関数でアニメーション)

• spriteSheet (CoronaAPIの利用)

13年3月8日金曜日

Page 16: Corona HandsOn#2

ColonaLabs.com

お疲れさまでした。。。休憩♨

#3へ つづく。。。

13年3月8日金曜日