舞台安全框
舞台安全框 1 -Scratch老師該知道的事
不管你怎麼移動、定位 Scratch 的角色,角色絕對不會完全離開舞台。如果你繪製一個正方形,再用移動方式移動到舞台邊緣,會發現留下15 pixels的寬度留在舞台上,這15 pixels的寬度,傑夫老師稱之為舞台安全框。安全框是為了避免讓 scratcher 不管是用滑鼠拖動或用程式的方式將角色移到舞台外(不知道什麼地方),而造成無法控制的狀況。
紅色方形留在舞台區的寬度為15
但是這安全框造成了許多困擾,最基本的當然就是無法將角色平順的移出舞台咯~所以當scratcher 製作動畫時都必須先用滑鼠拖動角色,找出角色最邊緣的座標位置,再用程式移動角色到那個座標位置後再隱藏。
先用滑鼠拖動角色找出最邊緣的座標
利用『滑行』是最基本的作法
然而,在很多遊戲中,角色並不是利用『滑行』的方式,而是利用『移動』或『x改變』﹑『y改變』來讓角色移動,那這樣就得用點判斷技巧了,最好的作法是利用『重複直到』,但要注意:是「小於-272」喔!
移動與重複直到的作法
也有學生會問,為什麼『重複直到』中不用『碰到邊緣』做判斷呢?『碰到邊緣』的判斷是只要當角色的任何一點碰到邊緣就成立,也就是說當時角色全部都還顯示在舞台上,如果用『碰到邊緣』會造成角色忽然消失的效果,卻不是讓角色平順的移出舞台。
但是,還是有機會需要讓角色平順的移出舞台的時候,有沒有其他方式能做到呢?當然有,傑夫老師下次再為您介紹。
舞台安全框 2 -Scratch老師該知道的事
上一篇傑夫老師介紹了舞台安全框,並且留下了一個問題,就是如何讓角色平順的移出舞台。這一篇,傑夫老師就先來介紹一個「作弊」的方法。
既然是作弊的方法,就並不是真的把角色移出舞台,方法就是做一個16 pixels 的邊框。但問題是怎麼做一個剛剛好 16 pixels 的邊框呢?咦?為什麼不是 15 而是 16? 會提出問題的才是有在認真學習,讓傑夫老師繼續說明。
這就是 Scratch 老師該知道的第二件事:Scratch 的造型繪圖區的方格,每一格就是 4 pixels 寬 x 4 pixels 高。利用這一點,要繪製出一個在舞台四邊各 16 pixels 的角色造型就不是什麼難事了,這也是為什麼不是 15 pixels 的理由。
繪圖區的方格,每一格就是 4 pixels x 4 pixels
首先,用向量圖的方式在繪圖區的其中一個角落畫出一個 16x16 的正方形,正好就是 4格寬 x 4格高。繪製時將繪圖區盡量放大,就很容易地能畫出來喔。(畫矩形時按下 shift 鍵,畫出來的就會是正方形,這點應該都知道吧!)
16x16 的方形,正好就是 4格寬 x 4格高
記得先把此角色(不是背景喔)定位在 x=0, y=0 的位置,在舞台上就看到這個(黑色)正方形位於角落。
接下來,簡單的延伸就可以拉出寬 16 pixels 的長方形了。基於 16x16 的這個正方形,先拉出一個底邊之後,再用同樣方式拉出一個側邊。
基於 16x16 的方形拉出底邊與側邊
接下來用複製的方式,很快的就能畫出四個邊。移動時可以用上下左右鍵,就可以做微調移動,這樣就能很精確的做出大小 480x360 的造型了。避免不小心再動到,記得要將這四個邊「建立群組」。
另外的兩邊,用複製的方式就可以
這樣就可以了嗎?當然還沒,要記得讓這個外框角色的圖層移到最上層喔!
外框角色的圖層移到最上層
接著,就來試試看吧!不用寫複雜的程式,不用對每個角色一一調整位置,就可以讓各個角色平順的消失在舞台上。
貓咪與方形都能平順的消失在邊緣
這個方式,在某些遊戲的場景中,例如遊戲就是需要有個外框,就能派上用場。但是,大多的動畫與遊戲不會有外框,這個方式還是不好。 傑夫老師就留到下次再為您介紹正解。
舞台安全框 3 -Scratch老師該知道的事
傑夫老師介紹了舞台安全框,上一篇介紹了一個「作弊」的方法讓角色平順地移出舞台。 這一篇,就來介紹正解。
留下的都是 15 pixels 的寬度在舞台上
如果說,上一篇的方法是作弊,那正解其實是"騙" Scratch,利用角色的快速變化,先把角色尺寸變大,讓 Scratch 可以繼續移動角色,但移動之後突然把尺寸變小,這時已經移動到超出小尺寸角色的邊緣座標了,而 Scratch 並不會把小尺寸的角色往回移。這樣,就"騙"過了 Scratch,把角色平順的移出舞台了。
啥~聽不懂!老師就知道,那就直接看程式吧。跟原本的程式不同處在於:『移動』前先放大了尺寸,『移動』後再把尺寸設回原尺寸,這樣就能簡單地做出平順移出舞台的效果。注意看角色最後的x座標值,與原來的 -273 是不是差別很大了呢?
注意看角色最後的x座標值
是不是很簡單呢?當然,如果你覺得在舞台中間移動時,一直變換大小尺寸很浪費資源,那麼你也可以多加一些判斷,讓角色靠近邊緣時再開始做大小尺寸的變換。
利用同樣的方法,也可以讓角色平順的移入舞台。傑夫老師直接一次做完,讓角色從左到右平順地移入又移出,也就是做到動畫裡面的「入鏡出鏡」的效果。這可是 Scratch 老師應該要會的事喔~
「入鏡出鏡」效果的程式,
注意其中的x座標值都是要先由實驗得出的
以下是程式執行的結果。
「入鏡出鏡」效果
舞台安全框很多 Scratch 初學者都搞不清楚,稍微知道的同學只會用第一篇所介紹的最基本的方式,角色到了邊緣就隱藏起來,但是要能夠做到「入鏡出鏡」這樣的效果可是要對 Scratch 很瞭解才做到出來的喔。舞台安全框這個單元就介紹到這邊,希望對你有幫助。 Bye now.