貓咪跑步 ( 超長背景 )

教學原文參考：貓咪跑步 ( 超長背景 )

這篇文章會介紹，如何在 Scratch 3 裡使用變數、定位、改變、重複直到、更換造型...等積木，使用舞台兩倍以上長度的超長背景，實作貓咪跑步時，背景會在後方移動的效果 ( 也是連續背景的作法 )。

相關文章參考：變數、定位、改變、重複直到、更換造型。

角色設定

在角色編輯區，保留貓咪的角色，使用「上傳」，加入一張超長背景 ( 1000x360 ) 的圖片 ( 參考：Scratch 角色設定 )。

連續背景可先使用範例圖片：下載連結

上傳圖片後，切換至「造型」頁籤，點擊下方「轉換成向量圖」，將圖片轉換成向量圖。

因為圖片尺寸大於舞台尺寸，所以上傳後會被「強制縮小」，轉換成向量圖之後，就可以使用「選取工具」，將圖片尺寸「等比例放大」，放大到高度等於 360 為止，並將圖片的中心點對齊畫布中心點。

積木程式原理 ( 背景 )

點擊「背景」圖片角色，設定點擊綠旗時，定位到 (240, 0)。

實際定位以上傳的圖片為主，範例圖片使用 (240, 0)。

編輯按下鍵盤「向右」鍵的動作：

• 使用「重複...直到」積木，直到放開向右鍵時 ( 向右鍵被按下不成立 )，停止重複。
• 每次重複時，判斷圖片的 x 座標是否小於 -240，如果小於 -240，就將 x 座標改為 240 ( 移動到左邊之後，瞬間移動到右邊 )
• 每次重複時，將 x 座標減少 10 ( 往左移動，和鍵盤方向相反 )。

為什麼要使用「重複...直到」？如果單純使用按下鍵盤，會有一段鍵盤等待的時間 ( 約 0.5 秒到 1 秒 )，造成動作不順暢。

編輯按下鍵盤「向左」鍵的動作：

• 使用「重複...直到」積木，直到放開向左鍵時 ( 向左鍵被按下不成立 )，停止重複。
• 每次重複時，判斷圖片的 x 座標是否大於 240，如果大於 240，就將 x 座標改為 -240 ( 移動到右邊之後，瞬間移動到左邊 )
• 每次重複時，將 x 座標增加 10 ( 往右移動，和鍵盤方向相反 )。

積木程式原理 ( 貓咪 )

點擊「貓咪」角色，設定點擊綠旗時，定位到 (0, -65)，剛好站在背景圖的地面上，並設定迴轉方式為「左-右」，避免旋轉時上下顛倒。

編輯按下鍵盤「向右」和「向左」鍵的動作：

• 使用「重複...直到」積木，直到放開向右或向左鍵時 ( 向右鍵或向左鍵被按下不成立 )，停止重複。
• 每次重複時，將貓咪轉向對應的方向 ( 向右 90，向左 -90 )
• 每次重複時，變換貓咪造型。

最終結果

完成後，點擊綠旗，按下鍵盤的左和右，就能看到貓咪跑步時，超長的背景在後方移動。

範例解答

範例解答：貓咪跑步 ( 超長背景 )

延伸練習

如果已經熟悉了貓咪跑步 ( 超長背景 ) 的基本原理，還可以嘗試更多好玩的作法：

• 修改貓咪角色，變成其他動物。

• 更換另外一張超長的背景圖。

關於我

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

• OXXO.STUDIO 部落格
• OXXO.STUDIO 粉絲團
• Steam 教育學習網
• Steam 教育學習網粉絲團