遊戲中,常常會冒出一小行的遊戲公告,說伺服器的哪個玩家幹了些什麼事,尤其看到自己想抽的英雄或寶物被別人抽走,仇恨值直接+1000,心想e04為什麼不是我~~

好的,但那不是今天要說的重點,而是那個引人注目的跑馬燈,在歷史傳說遊戲中,也有著類似的元件,以下為遊戲中的參考畫面:

好的,其實程式碼也很精簡,但是在這之前要先瞭解一下可樂的display.newText(),才能順利地做出你心目中的效果,官網在這,整理一下重點還有經過測試要注意的地方:

1.在沒有任何指定的狀況下,錨點預設為中心位置
2.在不知道元件寬度的狀況下,文字預設靠左
3.display.newText( [parent,] text, x, y [, width, height], font [, fontSize] )
當您賦予height值的時候,text將會有Multi-Line的效果,也就是說寬度不夠的時候會換行。
4.display.newText( [parent,] text, x, y [, width, height], font [, fontSize] )
當您並沒有指定width一開始的初始值,那麼元件的寬度是根據文字內容做變化。

另外要提醒兩個小東西

1.善用anchor屬性
2.顏色賦予要用:setFillColor,而非.setFillColor

對於上面的敘述有認知後,來看一下跑馬燈的程式碼:

-- define text data
local d = {
 { text = 'Corona SDK有點強大' },
 { text = '歷史傳說目前正在開發中' },
 { text = '遊戲不就是要玩得愉快' },
 { text = '獨立遊戲一點都不浪漫' },
 { text = '目前正在尋找美術參與ui設計啊!!!' },
 { text = '正妹的事業線永遠讓人很開心' }
}
-- create text object
for k, v in pairs(d) do
 local options = 
 {
 text = v.text, 
 x = display.contentWidth + display.contentWidth * 0.5,
 y = display.contentCenterY,
 width = display.contentWidth,
 font = native.systemFont, 
 fontSize = 18,
 align = "left"
 }
 
 local myText = display.newText( options )
 myText:setFillColor( 1, 0, 0 ) 
 v.obj = myText
end
-- set default index
d.index = 1

local function loop()
 local obj = d[d.index].obj
 -- set will go text position
 obj.x = display.contentWidth
 local function onComplete(obj)
 d.index = d.index + 1
 if (d.index > table.getn(d) ) then d.index = 1 end
 -- trans obj to set position, after go to position
 transition.to( obj, { x = display.contentWidth * -1 , time = 3500, delay = 800, onComplete = loop } )
 end
 -- trans obj to set position
 transition.to( obj, { x = display.contentWidth * 0.5, time = 2000, onComplete = onComplete, transition = easing.outExpo } )
end
-- run function
loop()

這邊稍微說明一下程式碼:

1.為了對齊,我將文字方塊預設都跟畫面的寬度一樣,並且對align下了left(其實這也是可樂的預設值),這樣可以確保每一個文字方塊的寬度,還有文字的起首位置都相同,所以option裡,可以看到width = display.contentWidth和align = “left”。
2.根據可樂的預設,文字錨位在中心,所以一開始我需要將所有的文字方塊都搬移到畫面外,因此我下了x = display.contentWidth + display.contentWidth * 0.5,用意是先把文字方塊的中心點移到畫面極限值,然後再把文字方塊剩下的一半移出去畫面
3.d.index只是為了讓loop知道一開始要搬移哪一個文字方塊,所以建立了一個索引值。
4.local obj = d[d.index].obj,取得目前要搬移文字方塊。
5.transition.to( obj, { x = display.contentWidth * 0.5, time = 2000, onComplete = onComplete, transition = easing.outExpo  } )
讓文字方塊奔跑,transition會決定跑動的感覺。
6.transition.to( obj, { x = display.contentWidth * -1 , time = 3500, delay = 800, onComplete = loop } )
當文字方塊移動完成之後,慢慢地往左搬移出畫面,delay是為了讓玩家能夠有一個緩衝時間看清楚文字內容。

再來看看測試結果:

其實根據程式碼可以發現,文字方塊飛到畫面左邊外之後,玩家其實根本不知道發生了什麼事,只要製作出一個循環的假象,就可以讓人誤以為文字方塊是很有規則性的繞圈圈在跑(其實根本不是),因為是準備要跑的文字方塊在一瞬間移到動畫面的最右側,等待的loop的呼叫,這樣的做法在遊戲中很常使用,大家可以多用用這種技巧,一切都是騙人的…

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…