舞台安全框

舞台安全框 1 -Scratch老師該知道的事

不管你怎麼移動、定位 Scratch 的角色,角色絕對不會完全離開舞台。如果你繪製一個正方形,再用移動方式移動到舞台邊緣,會發現留下15 pixels的寬度留在舞台上,這15 pixels的寬度,傑夫老師稱之為舞台安全框。安全框是為了避免讓 scratcher 不管是用滑鼠拖動或用程式的方式將角色移到舞台外(不知道什麼地方),而造成無法控制的狀況。

紅色方形留在舞台區的寬度為15

紅色方形留在舞台區的寬度為15

但是這安全框造成了許多困擾,最基本的當然就是無法將角色平順的移出舞台咯~所以當scratcher 製作動畫時都必須先用滑鼠拖動角色,找出角色最邊緣的座標位置,再用程式移動角色到那個座標位置後再隱藏。

先用滑鼠拖動角色找出最邊緣的座標

先用滑鼠拖動角色找出最邊緣的座標

利用『滑行』是最基本的作法

利用『滑行』是最基本的作法

然而,在很多遊戲中,角色並不是利用『滑行』的方式,而是利用『移動』或『x改變』﹑『y改變』來讓角色移動,那這樣就得用點判斷技巧了,最好的作法是利用『重複直到』,但要注意:是「小於-272」喔!

移動與重複直到的作法

移動與重複直到的作法

也有學生會問,為什麼『重複直到』中不用『碰到邊緣』做判斷呢?『碰到邊緣』的判斷是只要當角色的任何一點碰到邊緣就成立,也就是說當時角色全部都還顯示在舞台上,如果用『碰到邊緣』會造成角色忽然消失的效果,卻不是讓角色平順的移出舞台。

但是,還是有機會需要讓角色平順的移出舞台的時候,有沒有其他方式能做到呢?當然有,傑夫老師下次再為您介紹。

舞台安全框 2 -Scratch老師該知道的事

上一篇傑夫老師介紹了舞台安全框,並且留下了一個問題,就是如何讓角色平順的移出舞台。這一篇,傑夫老師就先來介紹一個「作弊」的方法。

既然是作弊的方法,就並不是真的把角色移出舞台,方法就是做一個16 pixels 的邊框。但問題是怎麼做一個剛剛好 16 pixels 的邊框呢?咦?為什麼不是 15 而是 16? 會提出問題的才是有在認真學習,讓傑夫老師繼續說明。


這就是 Scratch 老師該知道的第二件事:Scratch 的造型繪圖區的方格,每一格就是 4 pixels 寬 x 4 pixels 高。利用這一點,要繪製出一個在舞台四邊各 16 pixels 的角色造型就不是什麼難事了,這也是為什麼不是 15 pixels 的理由。

繪圖區的方格,每一格就是 4x4 pixels

繪圖區的方格,每一格就是 4 pixels x 4 pixels

首先,用向量圖的方式在繪圖區的其中一個角落畫出一個 16x16 的正方形,正好就是 4格寬 x 4格高。繪製時將繪圖區盡量放大,就很容易地能畫出來喔。(畫矩形時按下 shift 鍵,畫出來的就會是正方形,這點應該都知道吧!)

16x16 的方形,正好就是 4格寬 x 4格高

16x16 的方形,正好就是 4格寬 x 4格高

記得先把此角色(不是背景喔)定位在 x=0, y=0 的位置,在舞台上就看到這個(黑色)正方形位於角落。

在舞台上就看到這個黑色正方形位於角落

接下來,簡單的延伸就可以拉出寬 16 pixels 的長方形了。基於 16x16 的這個正方形,先拉出一個底邊之後,再用同樣方式拉出一個側邊。

基於 16x16 的方形拉出底邊與側邊

基於 16x16 的方形拉出底邊與側邊

接下來用複製的方式,很快的就能畫出四個邊。移動時可以用上下左右鍵,就可以做微調移動,這樣就能很精確的做出大小 480x360 的造型了。避免不小心再動到,記得要將這四個邊「建立群組」。

另外的兩邊,用複製的方式就可以

另外的兩邊,用複製的方式就可以

這樣就可以了嗎?當然還沒,要記得讓這個外框角色的圖層移到最上層喔!

外框角色的圖層移到最上層

外框角色的圖層移到最上層

接著,就來試試看吧!不用寫複雜的程式,不用對每個角色一一調整位置,就可以讓各個角色平順的消失在舞台上。

貓咪與方形都能平順的消失在邊緣

貓咪與方形都能平順的消失在邊緣

這個方式,在某些遊戲的場景中,例如遊戲就是需要有個外框,就能派上用場。但是,大多的動畫與遊戲不會有外框,這個方式還是不好。 傑夫老師就留到下次再為您介紹正解。

舞台安全框 3 -Scratch老師該知道的事

傑夫老師介紹了舞台安全框,上一篇介紹了一個「作弊」的方法讓角色平順地移出舞台。 這一篇,就來介紹正解。

留下的都是 15 pixels 的寬度在舞台上

留下的都是 15 pixels 的寬度在舞台上

如果說,上一篇的方法是作弊,那正解其實是"騙" Scratch,利用角色的快速變化,先把角色尺寸變大,讓 Scratch 可以繼續移動角色,但移動之後突然把尺寸變小,這時已經移動到超出小尺寸角色的邊緣座標了,而 Scratch 並不會把小尺寸的角色往回移。這樣,就"騙"過了 Scratch,把角色平順的移出舞台了。


啥~聽不懂!老師就知道,那就直接看程式吧。跟原本的程式不同處在於:『移動』前先放大了尺寸,『移動』後再把尺寸設回原尺寸,這樣就能簡單地做出平順移出舞台的效果。注意看角色最後的x座標值,與原來的 -273 是不是差別很大了呢?

注意看角色最後的x座標值

注意看角色最後的x座標值

是不是很簡單呢?當然,如果你覺得在舞台中間移動時,一直變換大小尺寸很浪費資源,那麼你也可以多加一些判斷,讓角色靠近邊緣時再開始做大小尺寸的變換。

利用同樣的方法,也可以讓角色平順的移入舞台。傑夫老師直接一次做完,讓角色從左到右平順地移入又移出,也就是做到動畫裡面的「入鏡出鏡」的效果。這可是 Scratch 老師應該要會的事喔~

「入鏡出鏡」效果的程式

「入鏡出鏡」效果的程式,

注意其中的x座標值都是要先由實驗得出的

以下是程式執行的結果。

「入鏡出鏡」效果

「入鏡出鏡」效果

舞台安全框很多 Scratch 初學者都搞不清楚,稍微知道的同學只會用第一篇所介紹的最基本的方式,角色到了邊緣就隱藏起來,但是要能夠做到「入鏡出鏡」這樣的效果可是要對 Scratch 很瞭解才做到出來的喔。舞台安全框這個單元就介紹到這邊,希望對你有幫助。 Bye now.