iT邦幫忙

2021 iThome 鐵人賽

DAY 11
0
自我挑戰組

Scratch 3 從入門到精通系列 第 11

Day 11 ( 中級 ) 視差效果

  • 分享至 

  • xImage
  •  

視差效果

教學原文參考:視差效果

這篇文章會介紹,如何在 Scratch 3 裡建立五個角色,透過重複無限次、定位、圖層、跟隨滑鼠...等積木,實作簡單的視差效果。

  • 什麼是「視差效果」呢?就是當眼睛在看東西時,越靠近眼睛的東西移動幅度愈大,越遠離的東西移動幅度越小,所以只需要計算不同角色的 x 或 y 座標,就能做出視差效果。

  • 相關文章參考:重複x/y 設為圖層跟隨滑鼠

角色設定

在角色編輯區,刪除貓咪角色,加入三隻恐龍和一棵樹的新角色 ( 參考:Scratch 角色設定 )。

Scratch 3 教學 - 視差效果

接著使用繪畫,使用「方形」,繪製一個地面的新角色 ( 參考:造型與繪圖 )。

Scratch 3 教學 - 視差效果

完成後,在角色區域應該可以看到五個角色 ( 三隻恐龍、一棵樹和一個土地 )。

Scratch 3 教學 - 視差效果

積木程式原理

除了地面之外,其他四個角色都需要撰寫對應的程式,程式積木如下:

  • 紅色三角龍

    紅色三角龍因為是在最前方,所以進行 xy 座標定位之後,使用「圖層移到最上層」,避免被其他角色遮住,接著使用重複無限次積木,將角色的 x 座標設定為滑鼠 x 座標的相反方向,除以滑鼠座標的數字設定為 -5 ( 數字越小,則移動的幅度越小 )。

    定位的 x 數值,在移動時要先加入計算,避免位置跑掉。

    Scratch 3 教學 - 視差效果

  • 藍色雷龍

    藍色雷龍角色積木和紅色三角龍角色類似,但因為藍色雷龍是在第二層,所以「先將圖層移到最上層,再降低一層」,然後除以滑鼠座標的數字設定為 -10 ( 比紅色三角龍小,所以移動的幅度會比較小 )

    Scratch 3 教學 - 視差效果

  • 綠色暴龍

    綠色暴龍角色積木和藍色雷龍角色幾乎相同,差別只在於圖層要下移 2 層,然後除以滑鼠座標的數字設定為 -20 ( 比藍色雷龍小,所以移動的幅度會比較小 )

    Scratch 3 教學 - 視差效果

  • 樹木

    樹木角色積木和綠色暴龍角色幾乎相同,差別只在於使用圖層移到最下層,然後除以滑鼠座標的數字設定為 -30 ( 比綠色暴龍小,所以移動的幅度會比較小 )

    Scratch 3 教學 - 視差效果

完成效果

完成後,點擊綠旗,用滑鼠在舞台上移動,就可以看到簡單的視差效果。

Scratch 3 教學 - 視差效果

範例解答

範例解答:視差效果

延伸練習

如果已經熟悉了視差效果的原理,還可以嘗試更多好玩的作法:

  • 加入「上下移動」也可以有視差效果。( 解答 )

    Scratch 3 教學 - 視差效果

關於我

大家好,我是 OXXO,是個即將邁入中年的斜槓青年,如果對我有點興趣(笑,可以與我聯繫,一起來做點有玩又有創意的東西吧!


上一篇
Day 10 ( 中級 ) 雪花隨風飄
下一篇
Day 12 ( 中級 ) 貓咪跑步 ( 超長背景 )
系列文
Scratch 3 從入門到精通46
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言