Construct 2教學-番外#2 無限捲動
HJ Online Learning Center
APP開發線上教學
  • Register

Construct 2 教學-番外#2 無限捲動 設計

番外篇#2-無限捲動

大家好,我是傅老師。歡迎來到我的Construct 2教學,本節要教您一種常用的背景設置方法:無限捲動。

在"跑酷"(auto-runner)類型的遊戲裡,為了讓路途表現出遙遠旅程之感受,我們是設定背景為無限循環捲動。同樣地技巧亦可使用在網頁banner中,捲動的banner會呈現出更寬廣的感受, 是一種有效利用banner空間的技巧。

 
 
 


 

2-1 無限捲動原理及實作

首先,我們需要一張在X軸上左右可互相銜接的背景圖片。傅老師已經幫各位同學畫好了,請至下列網址下載:

https://dl.dropboxusercontent.com/u/209080340/c2_tutorial/x_inf_scroll_background.zip

下載完畢請建立一個<Tiled Background>物件,並把剛剛下載的圖檔讀入。將postion設為(0,0),size設為(800,200)。

建立[TiledBackground]

我們這次需要使用到一個第三方開發的行為特性(Behavior) --- MoveTo。這個行為特性是由Rexrainbow所開發的,不包含在原版的C2內。這個行為特性可以很直覺地挪動物件,只需要設置好目標 位置,MoveTo會自動地幫我們將物件移到指定位置。還沒安裝的朋友就請馬上點選下列網址, 來安裝Rexrainbow完整的Plugin以及Behavior吧!

rexrainbow的插件下載器V2

加入<MoveTo>行為特性

加入<MoveTo>行為特性

接下來,我們希望一進入遊戲便開始捲動背景圖片。C2進入遊戲後,第一個觸發的事件就是<On start of layout>。請點選事件表中的<Add event>,將這個事件加入。

加入<On start of layout>事件

完成後請在事件右方點選Add action,加入<Move to delta XY>行動,這個行動可將物件依指定的XY軸偏移量(delta offset)做挪動。 現在我們的目的是讓背景整塊移向左方,由於背景圖的寬度是(800),因此我們要將X偏移量設為(-800),Y偏移量設為(0),OK結束。

加入<Move To delta XY>行動

設置XY偏移量

Eventsheet完成

再次按下<F5>預覽,Oh yeah~現在背景開始捲動了。可是怎麼開始捲動就出血(bleeding)了呢?(出血就是背景露出來被看到了)。為了阻止出血,我們得把這個背景圖拉到比螢幕寬度還寬。 目前螢幕寬度與背景圖同樣為800px,那就讓我們把背景圖改成兩倍寬試試看吧!點選[TiledBackground],於參數區將Size改為(1600,200)。

預覽時發生出血

將背景圖寬度改為兩倍

很好,現在背景會捲動了,不會出血了。但是他捲動一次之後就停了,我們要的是無限捲動呀!怎麼辦?

預覽時發現捲動一次就停止

聰明的同學,你可能已經想到了。假設剛剛捲到底時,將圖用看不到的光速擺回原來的位置,再捲一次給使用者看,使用者看起來就好像捲第二次啦; 接著若再次捲到底,再用光速擺回原處捲動給使用者看,他就會覺得捲第三次啦;如果每次捲到底就以光速擺回,對使用者來說不就是無限捲動了嗎?Bingo!用這個邏輯來實作看看吧~

回到事件表,點擊Add event新增一個事件。這次選取[TiledBackground]物件,選取<On hit target position>事件。於其右方新增3個動作

於<On hit target postion>新增三個動作

加入<On hit target position>事件

加入<MoveTo:Stop>行動

加入<Set position>行動

當[TileBackground]到達之前設置的MoveTo目標時,系統會觸發<On hit target position>事件。觸發後我們先使用<MoveTo: Stop>令其停止移動, 再使用<Size & position: set position>來重新擺置物件,這個重擺動作就是用"光速"將[Tilebackground]移至佈局原點(0,0)(傅老師用光速來形容是誇張了些,純粹為了博君一笑)。 接著再以<MoveTo: Move to delta XY>執行捲動。 若再次捲到底這3行就會重來一次,一切符合我們想要的捲動邏輯。

按<F5>預覽,Bingo!這就是我們要的"無限捲動",設計大功告成。

 



2-2 結語

本節我們使用了一幅可以左右銜接的貼圖做為背景,將其向右加倍重覆延伸後,使用了一個簡單的邏輯達成無限捲動效果。拜好用的MoveTo behavior之賜,我們很輕鬆地就達成了目標。

 



2-3 傅老師鼓勵你...

 

  1. 調整MoveTo行為特性的<Max speed>參數,感受一下,你覺得這個參數是什麼意思?
  2. 調整MoveTo行為特性的<Acceleration>、<Deceleration>這兩個參數,感受一下,你覺得這個參數是什麼意思?(建議值:Acceleration=200,Deceleration=100)
  3. 承上,試調參數之後,背景圖的特性會很類似常見的滾動banner(又稱slider),請看這個Wow slider網頁。 滾動banner的圖片每次滾動後畫面都會不同,小小的空間捲動後看起來包山包海,非常豐富。相對之下,本節示範裡我們只是拿同一張圖set position回到原點,怎麼捲都是同一張圖。 有沒有辦法使用本節學到的方法,修改一下做出一個4頁的滾動banner呢?