C06 遊戲開始畫面設計

📋 第一章：課程介紹與準備工作

🎯 學習目標

🎨 介面設計

學習設計美觀的遊戲開始畫面，包含背景、標題、按鈕等元素

⚡ 互動功能

實作按鈕點擊、場景切換、音效播放等互動功能

🔧 程式邏輯

掌握遊戲狀態管理、事件處理、條件判斷等程式概念

🎵 多媒體整合

整合背景音樂、音效、動畫效果，提升遊戲體驗

🛠️ 需要的素材

準備以下素材：

背景圖片：遊戲主題相關的背景圖（建議尺寸：480x360）
按鈕圖片：開始遊戲、設定、說明等按鈕圖片
標題文字：遊戲名稱的藝術字體或圖片
背景音樂：適合的背景音樂檔案（建議使用.mp3或.wav）
音效：按鈕點擊音效、切換音效等

📷 [素材準備示意圖]
展示各種遊戲開始畫面需要的素材類型

🎨 第二章：遊戲介面設計基礎

📐 畫面佈局原則

1. 黃金比例佈局

將畫面分為三等分，重要元素放在交叉點上，創造視覺平衡

外觀 將背景切換成 [主選單背景]
外觀 將 x 座標設為 (0) y 座標設為 (0)
外觀 將大小設為 (100) %
                

2. 色彩搭配

選擇符合遊戲主題的配色方案，注意對比度和可讀性

💡 配色建議：

主色調：選擇1-2個主要顏色
輔助色：用於強調重要元素
背景色：選擇不搶眼的中性色調

🖼️ 背景設計

建立背景角色

當 綠旗 被點擊
外觀 將背景切換成 [遊戲主背景]
音效 播放音效 [背景音樂] 到結束
音效 將音量設為 (50) %
                

📷 [背景設計範例]
展示不同風格的遊戲背景設計

📝 標題設計

建立遊戲標題

當 綠旗 被點擊
外觀 說出 [遊戲名稱] (2) 秒
外觀 將 x 座標設為 (0) y 座標設為 (100)
外觀 將大小設為 (150) %
外觀 設定 [顏色] 特效為 (25)
重複 (10) 次
    外觀 將 [亮度] 特效改變 (10)
    控制 等待 (0.1) 秒
                

✅ 效果說明：這段程式碼會讓標題出現閃爍效果，吸引玩家注意力

⚡ 第三章：互動功能實作

🔘 按鈕設計與功能

1. 開始遊戲按鈕

🎮 開始遊戲

當 綠旗 被點擊
外觀 切換造型為 [開始按鈕-正常]
外觀 將 x 座標設為 (0) y 座標設為 (-50)
外觀 顯示

當這個角色被點擊
外觀 切換造型為 [開始按鈕-按下]
音效 播放音效 [按鈕點擊音]
控制 等待 (0.2) 秒
控制 廣播訊息 [開始遊戲]
外觀 隱藏
                

2. 設定按鈕

⚙️ 設定

當 綠旗 被點擊
外觀 切換造型為 [設定按鈕]
外觀 將 x 座標設為 (-100) y 座標設為 (-100)
外觀 顯示

當這個角色被點擊
音效 播放音效 [按鈕點擊音]
控制 廣播訊息 [開啟設定選單]
                

3. 說明按鈕

❓ 遊戲說明

當 綠旗 被點擊
外觀 切換造型為 [說明按鈕]
外觀 將 x 座標設為 (100) y 座標設為 (-100)
外觀 顯示

當這個角色被點擊
音效 播放音效 [按鈕點擊音]
控制 廣播訊息 [顯示說明]
                

🔄 場景切換系統

主控制器設計

當收到訊息 [開始遊戲]
外觀 將背景切換成 [遊戲場景]
音效 停止所有音效
音效 播放音效 [遊戲音樂] 到結束
控制 廣播訊息 [隱藏選單]
控制 廣播訊息 [開始遊戲邏輯]

當收到訊息 [回到主選單]
外觀 將背景切換成 [主選單背景]
音效 停止所有音效
音效 播放音效 [背景音樂] 到結束
控制 廣播訊息 [顯示選單]
                

⚠️ 注意事項：

確保音效檔案大小適中，避免載入過慢
測試不同裝置上的音效播放效果
提供音效開關選項給玩家

📷 [場景切換流程圖]
展示從主選單到遊戲場景的切換過程

🚀 第四章：進階功能與特效

✨ 動畫效果

1. 淡入淡出效果

定義 [淡入效果]
外觀 將 [透明] 特效設為 (100)
外觀 顯示
重複 (10) 次
    外觀 將 [透明] 特效改變 (-10)
    控制 等待 (0.05) 秒

定義 [淡出效果]
重複 (10) 次
    外觀 將 [透明] 特效改變 (10)
    控制 等待 (0.05) 秒
外觀 隱藏
                

2. 按鈕懸停效果

當 綠旗 被點擊
重複無限次
    如果 <觸碰到 [滑鼠游標] ?> 那麼
        外觀 將大小設為 (110) %
        外觀 設定 [亮度] 特效為 (20)
    否則
        外觀 將大小設為 (100) %
        外觀 將 [亮度] 特效設為 (0)
                

🎵 音效管理系統

音效控制器

當 綠旗 被點擊
變數 將 [音效開關] 設為 [開啟]
變數 將 [音樂音量] 設為 (70)
變數 將 [音效音量] 設為 (80)

定義 [播放背景音樂] (音樂名稱)
如果 <(音效開關) = [開啟]> 那麼
    音效 將音量設為 (音樂音量) %
    音效 播放音效 (音樂名稱) 到結束

定義 [播放音效] (音效名稱)
如果 <(音效開關) = [開啟]> 那麼
    音效 將音量設為 (音效音量) %
    音效 播放音效 (音效名稱)
                

💾 遊戲資料儲存

最高分記錄系統

當 綠旗 被點擊
如果 <不是 <(最高分) = []>> 那麼
    變數 將 [最高分] 設為 (0)

當收到訊息 [遊戲結束]
如果 <(目前分數) > (最高分)> 那麼
    變數 將 [最高分] 設為 (目前分數)
    外觀 說出 [恭喜！新紀錄！] (3) 秒
                

💡 進階技巧：

使用雲端變數儲存全域排行榜
設計成就系統激勵玩家
記錄玩家遊戲偏好設定

📷 [進階功能展示]
展示各種動畫效果和特殊功能的實際效果

⚙️ 第五章：效能優化與除錯

🔧 效能優化技巧

1. 圖片資源優化

檔案大小：控制圖片檔案大小，避免載入過慢
圖片格式：選擇適合的圖片格式（PNG透明背景，JPG照片）
解析度：根據Scratch舞台大小調整圖片解析度

2. 程式碼優化

// 避免過多的重複迴圈
❌ 不好的寫法：
重複無限次
    重複無限次
        如果 <按下 [空白鍵] ?> 那麼
            // 處理邏輯

✅ 好的寫法：
重複無限次
    如果 <按下 [空白鍵] ?> 那麼
        // 處理邏輯
                

🐛 常見問題除錯

問題診斷清單

常見問題：

按鈕無反應：檢查角色是否隱藏或被其他角色遮擋
音效不播放：確認音效檔案格式和大小
畫面閃爍：檢查是否有衝突的外觀設定
切換卡頓：減少同時執行的程式數量

📝 第六章：作業設計與學習評量

📋 基礎作業

作業一：設計簡單開始畫面

要求：

包含遊戲標題
至少3個功能按鈕（開始、設定、說明）
背景音樂播放
按鈕點擊音效

評分標準：

介面美觀度 (30%)
功能完整性 (40%)
創意表現 (20%)
程式碼品質 (10%)

🌟 進階挑戰

挑戰一：多層選單系統

設計包含子選單的複雜介面系統，如角色選擇、關卡選擇等

挑戰二：動態背景效果

製作會動的背景，如飄動的雲朵、閃爍的星星等

挑戰三：自適應介面

設計能根據不同情況改變的介面，如日夜模式切換

🎯 學習檢核

完成本課程後，你應該能夠：

✅ 設計美觀的遊戲開始畫面
✅ 實作互動按鈕和場景切換
✅ 整合音效和背景音樂
✅ 運用動畫效果提升體驗
✅ 管理遊戲狀態和資料儲存
✅ 優化程式效能和除錯

📷 [作業範例展示]
展示不同學生作品的優秀範例