前幾天有個網友問我遊戲裡有個會放大縮小圖片的效果是怎麼做的,為什麼會有不規律的感覺,其實並不是我寫了多複雜的程式碼,只是善用可樂引擎的api而已,今天把這個小技巧分享給大家。

可樂的動畫系統中,有分圖片的影格(連續播放),還有物理效果的joint(物理性的結合播放),以及transitiontransition是一個滿節省資源的api,同樣一張圖片可以達成翻轉,放大縮小,移動等的效果,利用transition的onComplete,就可以輕鬆達成呼吸的感覺。

transition的官網解說在這,基本上分幾個重點:
1.可樂很貼心的已經簡易了幾個常用的動作,scale(放大縮小),move(移動),fade(淡入淡出)
transition.fadeIn()
transition.fadeOut()
transition.moveBy()
transition.moveTo()
transition.scaleBy()
transition.scaleTo()
但是這些動作都是單一行為,無法組合使用
2.transition.to(),這個function才可以讓你組合多重的變化,例如我要再放大的同時改變位置:
transition.to( square, { xScale = square.width * 1.3, x = square.x + 100, time = 500} )
xScale->改變物件大小
x->移動物件位置
3.easing,這個參數非常重要,官網提供的參數在這,它是效果的運動曲線,有這個參數在才不會讓你的變化顯的死板,效果為以下影片,有看到圖片蹦出來的一瞬間嗎?那個QQ的感覺,就像看見正妹抬頭挺胸地走過去(誤)

好,你們別鬧了,以下為呼吸的程式碼,特別注意的是onComplete,onComplete為動畫完成時要執行的動作,一定要寫成function,然後把function name餵給onComplete,切記不能括號,不然就直接執行,而不是成為一個call back的效果。

有興趣朋友們可以從這下載,將obj1那一行拿掉之後,就會有圖像發火的感覺。

--loop function 
function breathe(obj)
 local function loop(obj)
 --the obj is fire.png
 if (obj.scale ~= 1) then 
 obj.scale = 1
 breathe(obj)
 else
 obj.scale = obj.scaleValue
 breathe(obj)
 end
 end
 transition.scaleTo( obj, { xScale = obj.scale, yScale = obj.scale, time = 1000, onComplete = loop, transition = easing.outBounce } )
end
--create object for transition effect
local obj = display.newImage('fire.png', display.contentCenterX, display.contentCenterY)
--local obj1 = display.newImage('img.png', display.contentCenterX, display.contentCenterY)

--set original scale
obj.scale = 1
--set will change scale
obj.scaleValue = 2
--go function
breathe(obj)

以上,為本次一個粗淺的小技巧分享。

 

Categories: Corona sdk 實作

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *

Related Posts

Corona sdk 實作

CORONA SDK 音樂播放

使用可樂的好處就是比一般的遊戲引擎還快上手,一是不需要做太多設定,二是 Read more…

Corona sdk 實作

Corona SDK影格動畫(2)

因為工作的關係,很久很久沒有更新網誌了,目前卡牌部分已經暫停下來,在此 Read more…

Corona sdk 實作

Corona SDK 跳動的數字

以上,就是本次教學,謝謝大家。     &nbsp Read more…