搜尋

貓咪跑步 ( 連續背景 )

這篇文章會介紹,如何在 Scratch 3 裡使用變數、定位、座標、重複、更換造型...等積木,實作貓咪跑步時,背景會在後方移動的效果 ( 連續背景不間斷的效果 )。

相關文章參考:變數定位重複更換造型

角色設定

在角色編輯區,保留貓咪的角色,使用「上傳」,加入一張連續背景的圖片 ( 參考:Scratch 角色設定 )。

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

Scratch 3 教學 - 貓咪跑步 ( 連續背景 )

上傳後可以在角色區域看到一個貓咪角色,以及一張連續背景圖片。

Scratch 3 教學 - 貓咪跑步 ( 連續背景 )

如何設計連續背景

如果要自己設計 Scratch 3 的連續背景圖片,可以參考以下幾個重點:

  • 圖片尺寸為 480 x 360,符合 Scratch 3 的舞台大小 ( 太大的圖片上傳會被強制縮小,太小的圖片要手動放大,所以設計剛剛好比較保險 )。
  • 圖片的左右兩側不要有複雜的圖案,因為 Scratch 移動角色到邊緣時,會有一些自動計算的突出 ( 無法完全超過邊緣 ),到時候會需要將圖片重疊接合來避開這個狀況。
  • 圖片互相組合時,用重疊 20 點的方式預覽,確認重疊之後看起來還是很接近原本的圖片。

Scratch 3 教學 - 貓咪跑步 ( 連續背景 )

積木程式原理 ( 貓咪 )

貓咪的第一組程式,先使用定位和圖層移到最上層,將貓咪放到指定位置,接著設定迴轉方式為「左-右」,避免貓咪旋轉,再來使用重複無限次積木,搭配「如果...那麼」和「偵測鍵盤按下」的功能,按下鍵盤向右鍵以及向左鍵時,讓貓咪角色每 0.1 進行造型切換,並且面朝 90 度 ( 面向右邊 ) 或 -90 度 ( 面向左邊 ),點擊綠旗,按下鍵盤向右鍵以及向左鍵,就會看到貓咪在舞台中原地跑步。

Scratch 3 教學 - 貓咪跑步 ( 連續背景 )

貓咪的第二組程式,負責控制背景的移動 ( 因為到時候背景會有三張,將控制程式撰寫在貓咪角色比較好管理 ),首先建立兩個「所有角色都共用」的變數,分別是「速度」和「消失點」,「速度」表示按下鍵盤時,背景圖片位置改變的幅度,「消失點」表示背景圖片移動到什麼地方就會消失 ( 更換位置 )

速度變數移動的方向的數值,和貓咪方向相反,這樣才能做到按下向右鍵時,背景往左移動,按下向左鍵時,背景往右移動的效果。

Scratch 3 教學 - 貓咪跑步 ( 連續背景 )

積木程式原理 ( 背景圖 )

將第一張背景圖定位在舞台的右邊,座標使用 (235,0),使用 235 的原因為了和第二張背景圖接合 ( 如果剛好 240 會造成移動切換時出現空隙 ),接著使用重複無限次判斷圖片位置,如果圖片向左移動到消失點,就讓圖片移動到右側的消失點,如果圖片向右移動到消失點,就讓圖片移動到左側的消失點

Scratch 3 教學 - 貓咪跑步 ( 連續背景 )

點擊綠旗,按下鍵盤的左右鍵,應該就能看到背景在移動。

Scratch 3 教學 - 貓咪跑步 ( 連續背景 )

複製一個背景角色 ( 第二個背景 ),修改定位為 ( -235,0 )。

Scratch 3 教學 - 貓咪跑步 ( 連續背景 )

再複製一個背景角色 ( 第三個背景 ),定位在舞台正中間,圖層放在最下層 ( 避免背景切換時短暫的留白 )。

Scratch 3 教學 - 貓咪跑步 ( 連續背景 )

完成效果

角色的程式全部完成後,點擊綠旗,按下鍵盤的左右鍵,就能看到背景移動,彷彿貓咪在畫面中左右跑來跑去。

Scratch 3 教學 - 貓咪跑步 ( 連續背景 )

範例解答

範例解答:貓咪跑步 ( 連續背景 )

意見回饋

如果有任何建議或問題,可傳送「意見表單」給我,謝謝~

Scratch 3 教學

基本介紹

關於 Scratch 3 使用 Scratch 3 註冊與登入 操作介面 我的東西

圖形與聲音

繪製造型&背景 編輯音效

程式積木

積木種類 動作 外觀 音效 事件 控制 偵測 運算 變數 清單 函式積木

擴充功能

音樂 畫筆 視訊偵測 文字轉語音 翻譯

技巧&觀念

全域變數、區域變數 控制指定分身 雲端變數 雲端變數記錄文字 變數串接文字 文字轉清單 中斷與停止程式 廣播訊息並等待 鍵盤與滑鼠 突破角色尺寸限制 角色與舞台邊界 重複積木的等待時間 清單數字排序 清單最大值最小值

入門範例

鍵盤控制貓咪 指向中間的箭頭 水果音樂鋼琴 貓咪的影分身之術 貓咪的細胞分裂 螃蟹跑來跑去 吃水果 摸蝴蝶 小狗追棒球 魚兒水中游 小鳥往前飛 舞棍阿伯 小時鐘 搖骰子 轉動的眼球 抽獎輪盤 大樂透電腦選號 移動到邊緣切換場景 人物依序跳舞 ( 廣播 ) 按鈕控制貓咪 ( 廣播 )

進階範例

貓咪跑步 ( 連續背景 ) 貓咪跑步 ( 超長背景 ) 大型數字 ( 圖形數字 ) 拖拉怪獸碰撞牆壁 鍵盤鋼琴 ( 記錄音符 ) 中文字逐字稿 英文字逐字稿 計算機 1 ( 顯示數字 ) 計算機 2 ( 加減乘除 ) 雲端聊天室 推貓咪 ( 視訊偵測 ) 圍捕小魚 ( 視訊偵測 ) 戳泡泡 ( 視訊偵測 )

視覺特效範例

視差效果 水中吐泡泡 雪花隨風飄 鍵盤鋼琴 ( 音符動畫 ) 無限循環畫中畫 水底探照燈 狙擊望遠鏡 ( 兩倍變焦 ) 貓咪萬花筒 仙女棒 ( 光跡效果 ) 駭客任務背景特效 放煙火 1 ( 往上發射 ) 放煙火 2 ( 爆炸效果 )

繪圖範例

鏡射畫圖 ( 對稱圖形 ) 小畫家 ( 舞台上畫圖 ) 記錄畫圖軌跡 繪製圓形 繪製橢圓形 繪製立方體 ( 會動 ) 繪製正多邊形 繪製正多角星形 ( 單純 ) 繪製正多角星形 ( 多線 ) 繪製拋物線 繪製折線圖 蜘蛛結網 ( 八邊形網 ) 繪製舞台方格 繪製正弦波形 ( sin ) 正弦波毛毛蟲動畫 顯示聲波圖形

物理&模擬範例

鐘擺運動 簡單磁鐵效果 兩個磁鐵的磁力線 立體空間 ( 三度空間 ) 循跡移動 拋物線發射炮彈 地球繞著太陽轉 彈跳的籃球 電風扇 ( 控制強度 ) 拉不走的彈力球 慣性移動 ( 滑鼠 ) 慣性移動 ( 鍵盤 )

入門遊戲範例

猴子接香蕉 打地鼠 刮刮樂 吹風機吹頭髮 太空狗閃躲隕石 九九乘法測驗 英文單字測驗 釣魚遊戲 拍西瓜 ( 儲存最高分 ) 形狀配對拼圖 台灣地圖拼圖 英文打字機 射擊外星人 猜數字 ( 猜大小 ) 猜數字 ( 幾 A 幾 B ) 連連看 ( 產生器 ) 連連看

進階遊戲範例

青蛙過河 青蛙過馬路 反彈球 ( 乒乓球 ) 打磚塊 狙擊氣球 ( 兩倍變焦 ) Flappy Bird 走迷宮 ( 基本 ) 大型迷宮 ( 鍵盤控制 ) 大型迷宮 ( 滑鼠控制 ) 翻翻卡 ( 卡牌記憶 ) 九宮格拼圖 音階記憶 貪吃蛇 小雞下樓梯

遊戲設計技巧

角色 ( 地上移動 ) 角色 ( 蹲下、左右轉 ) 角色 ( 跳耀、兩段跳 ) 角色 ( 牆壁、爬牆 ) 地圖 ( 清單轉換 ) 地圖 ( 二維陣列 ) 地圖 ( 控制移動 ) 地圖 ( 牆壁碰撞偵測 ) 地圖 ( 吃東西偵測 )