陪小朋友學程式，微軟Kodu Game Lab邊玩邊學
在 STEAM 教育當中，透過遊戲讓小朋友理解程式的運作方式與流程，固然是非常重要的部分。而當孩子對程式設計有了基本概念後，重點就擺在如何讓小朋友產生興趣，實踐程式開發技能。<p>「 Kodu Game Lab 」是由微軟所推出的「視覺化遊戲程式設計語言」，特別注意「遊戲」兩個字，沒錯，過去小朋友可以從遊戲中學習程式的運作，而現在反過來，孩子可以透過 Kodu Game Lab 來設計自己的遊戲，而且同樣不必面對繁雜的程式碼，一切以視覺化的方式運作。Kodu 不但能激起小朋友「創造」的興趣，即便是大人也可以輕鬆從旁指導、教學，無論哪個年齡層都能從中體會到「玩」遊戲的樂趣。</p> <p><img style="display: block; margin-left: auto; margin-right: auto;" src="https://cdn1.techbang.com/system/images/519290/original/85d8ee0d16888c00c78dc4fec78f6233.jpg?1561902092" alt="與其說Kodu Game Lab是一套程式學習工具，筆者認為還更像是「遊戲開發工具」，從場景編排到角色互動，都擁有極高的創造性。"><label class="caption" style="width: 600px; display: block; text-align: left; color: #555; line-height: 22px; padding: 0 3px 22px 3px; border-bottom: 2px solid #f0f0f0; margin: 5px auto 1rem auto;"><span style="color: #2382c5; padding-right: 5px;"> ▲ </span>與其說 Kodu Game Lab 是一套程式學習工具，筆者認為還更像是「遊戲開發工具」，從場景編排到角色互動，都擁有極高的創造性。</label></p> <blockquote> <p><strong><u> Kodu Game Lab <br></u></strong><a href="https://www.kodugamelab.com/">https://www.kodugamelab.com/</a></p> </blockquote> <h2>用玩遊戲來學習寫遊戲</h2> <p>不可否認，沒有人能夠抵抗電子遊戲的魅力，但開發一套遊戲是專業且曠日廢時的事情嗎？相信大多數人會認為，這項任務涉及了許多複雜的部分，單靠一己之力難以完成，不過事實上，製作遊戲是再簡單不過的事情，只要你願意動手。在過去，日本廠商 Enterbrain 曾推出任何人都能輕鬆上手的遊戲製作工具「RPG製作大師」，從中誕生的遊戲一度蔚為風潮，甚至形成了獨特的「RM社群」，甚至於獨門的遊戲類別。由微軟推出的 Kodu Game Lab，在某種程度上非常類似於RPG製作大師，但卻更強調讓孩子運用腳本設計、場景互動，去理解程式的實踐方法並整合自己的技能。</p> <p> <img style="display: block; margin-left: auto; margin-right: auto;" src="https://cdn1.techbang.com/system/images/519291/original/d3ec7e762af2ad6b5ccc7907f9e25347.jpg?1561902092" alt="Kodu Game Lab不脫離視覺化程式語言常用的「拼圖」概念，雖然有所限制但已擁有無窮的可能性。"><label class="caption" style="width: 600px; display: block; text-align: left; color: #555; line-height: 22px; padding: 0 3px 22px 3px; border-bottom: 2px solid #f0f0f0; margin: 5px auto 1rem auto;"><span style="color: #2382c5; padding-right: 5px;"> ▲ </span> Kodu Game Lab 不脫離視覺化程式語言常用的「拼圖」概念，雖然有所限制但已擁有無窮的可能性。</label></p> <h3>介面稍複雜，可玩性更高</h3> <p>正如同遊戲規則有複雜與簡單的差別，Kodu Game Lab 相較於前面介紹的 Blockly Games 與Code.org，各方面都來得更加進階，但卻不會難以上手，反倒擁有更高的可玩性。Kodu 專注於製作遊戲，所以設計者得顧及更多的面向，不僅僅是思考「如何讓遊戲動起來」如此簡單。在 Kodu Game Lab 中，小朋友得考慮如何佈置場景，如何使物件有正確的互動，如何設定計分規則，如何實踐勝負判定等，一連串與遊戲相關的行為，只要某個環節出了錯，就沒辦法讓遊戲達到理想中的樣貌。換句話說，當開啟了Kodu內的一個新世界，就是真正啟動了一套新遊戲開發專案，不單純只有理解程式的運作概念而已。 </p> <h3>龐大社群成為支援後盾</h3> <p>既然 Kodu Game Lab 擁有非常高的可玩性，那勢必會如同 RPG 製作大師一樣，創造出一個擁有極大潛力的Kodu社群，而微軟一開始就想到了這點。社群是 Kodu 最大的進步與學習動力，不但可以找到各種引導教學，也可以體驗別人開發出來的 Kodu 遊戲，當然最重要的是能夠上傳自己製作的遊戲，與世界上的每個人分享。即便是最專業的程式設計者，能夠讓別人體驗到自己的作品，永遠都是創作一套軟體最大的動機。Kodu Game Lab 的社群功能，能夠讓小朋友切實的體會到開發程式的成就感。</p> <p><img style="display: block; margin-left: auto; margin-right: auto;" src="https://cdn0.techbang.com/system/images/519292/original/0fecfbcfb80806bee4865af288db609b.jpg?1561902093" alt=" 社群上有不少Kodu作品，不單單只有展示學習成果而已，還是一套規則完整，遊戲性豐富的世界。"><label class="caption" style="width: 600px; display: block; text-align: left; color: #555; line-height: 22px; padding: 0 3px 22px 3px; border-bottom: 2px solid #f0f0f0; margin: 5px auto 1rem auto;"><span style="color: #2382c5; padding-right: 5px;">▲ </span>社群上有不少 Kodu 作品，不單單只有展示學習成果而已，還是一套規則完整，遊戲性豐富的世界。</label></p> <p> </p> <h2>從微軟網站免費取得，安裝 Kodu Game Lab</h2> <p>相較於許多視覺化的程式設計平台，如 Code.org 等，都是將服務建立在網頁上，透過瀏覽器就進行存取， Kodu Game Lab 由於功能較為複雜，而且真的有開發遊戲的能力，所以必須下載主程式進行安裝。根據 Kodu Game Lab 網站說明，只要運行 Windows XP 最新版本以上的作業系統，理論上都能安裝Kodu，硬體部分則外要求顯示卡得具備 DirectX 9.0c 及 Shader Model 2.0功能，換句話說不是太舊的顯示卡都應該能夠支援。值得注意的是，Kodu 需要.NET Framework 4.0及 XNA Framework 4.0開發環境，所以下載安裝程式時，記得要挑對版本，才不會浪費時間得額外搜尋安裝包。</p> <p><img style="display: block; margin-left: auto; margin-right: auto;" src="https://cdn1.techbang.com/system/images/519294/original/70fb8e57e1f4d80344ef172ba1ae144a.png?1561903690" alt="1.首先開啟Kodu Game Lab網站，點選左上角的「Get Kodu」綠色按鈕。"><label class="caption" style="width: 600px; display: block; text-align: left; color: #555; line-height: 22px; padding: 0 3px 22px 3px; border-bottom: 2px solid #f0f0f0; margin: 5px auto 1rem auto;"><span style="color: #2382c5; padding-right: 5px;"> ▲ </span>1.首先開啟 Kodu Game Lab 網站，點選左上角的「Get Kodu」綠色按鈕。</label></p> <p><img style="display: block; margin-left: auto; margin-right: auto;" src="https://cdn2.techbang.com/system/images/519295/original/16b59ac6f9a93228e18a61d019bd541b.png?1561903690" alt="2.請點選「.exe」副檔名，容量較大的安裝程式，再按「NEXT」下載。該檔案才內含有必要的開發環境安裝包。"><label class="caption" style="width: 600px; display: block; text-align: left; color: #555; line-height: 22px; padding: 0 3px 22px 3px; border-bottom: 2px solid #f0f0f0; margin: 5px auto 1rem auto;"><span style="color: #2382c5; padding-right: 5px;"> ▲ </span>2.請點選「.exe」副檔名，容量較大的安裝程式，再按「NEXT」下載。該檔案才內含有必要的開發環境安裝包。</label></p> <p><img style="display: block; margin-left: auto; margin-right: auto;" src="https://cdn1.techbang.com/system/images/519296/original/242c93b6fc673ba623b87127830ea5d9.png?1561903691" alt="3.安裝完畢後，點選桌面上綠色的「Kodu Game Lab」執行程式。"><label class="caption" style="width: 600px; display: block; text-align: left; color: #555; line-height: 22px; padding: 0 3px 22px 3px; border-bottom: 2px solid #f0f0f0; margin: 5px auto 1rem auto;"><span style="color: #2382c5; padding-right: 5px;"> ▲ </span>3.安裝完畢後，點選桌面上綠色的「 Kodu Game Lab 」執行程式。</label></p> <p><img style="display: block; margin-left: auto; margin-right: auto;" src="https://cdn0.techbang.com/system/images/519297/original/9109b1cbb01778fc43c8039b349f6c93.png?1561903691" alt="4.程式啟動後，可以設定創作者名稱，記得輸入自訂的4位數Pin碼，再按OK進入主畫面。"><label class="caption" style="width: 600px; display: block; text-align: left; color: #555; line-height: 22px; padding: 0 3px 22px 3px; border-bottom: 2px solid #f0f0f0; margin: 5px auto 1rem auto;"><span style="color: #2382c5; padding-right: 5px;"> ▲ </span>4.程式啟動後，可以設定創作者名稱，記得輸入自訂的4位數Pin碼，再按OK進入主畫面。</label></p> <p><img style="display: block; margin-left: auto; margin-right: auto;" src="https://cdn1.techbang.com/system/images/519298/original/a3fa88332bf294da99268170b52075b0.png?1561903692" alt="5.Kodu的主選單擁有中文介面，右上角可以看見登入的創作者名稱，建議可以到「選項」中，開啟「顯示畫面播放速率」。"><label class="caption" style="width: 600px; display: block; text-align: left; color: #555; line-height: 22px; padding: 0 3px 22px 3px; border-bottom: 2px solid #f0f0f0; margin: 5px auto 1rem auto;"><span style="color: #2382c5; padding-right: 5px;"> ▲ </span>5.Kodu 的主選單擁有中文介面，右上角可以看見登入的創作者名稱，建議可以到「選項」中，開啟「顯示畫面播放速率」。</label></p> <h2>透過社群功能，尋找別人製作的遊戲</h2> <p>前面提過 Kodu Game Lab 最大的亮點，就是擁有強大社群後盾，在開始動手設計遊戲之前，不妨先進入「社群」功能，來看看全世界的孩子們，都用 Kodu 設計出了哪些令人驚豔的作品。在 Kodu 中，每個人所設計的遊戲，都會被打包成「世界」的概念呈現，這有一點類似《Minecraft》，而下載他人製作好的世界，即是下載一套了他人設計好的遊戲，而且可以再行發揮創意，修改世界中的各種元素。使用 Kodu Game Lab 的社群功能時，會需要電腦連上網路，並可以用關鍵字的方式尋找特定世界，或是透過官網的排行榜下載最新、最熱門的世界。</p> <p><img style="display: block; margin-left: auto; margin-right: auto;" src="https://cdn0.techbang.com/system/images/519299/original/41e6b1f5ea0cddac19785a5829edbda2.png?1561903774" alt="1.進入Kodu Game Lab主畫面後，點選「社群」。"><label class="caption" style="width: 600px; display: block; text-align: left; color: #555; line-height: 22px; padding: 0 3px 22px 3px; border-bottom: 2px solid #f0f0f0; margin: 5px auto 1rem auto;"><span style="color: #2382c5; padding-right: 5px;"> ▲ </span>1.進入 Kodu Game Lab 主畫面後，點選「社群」。</label></p> <p><img style="display: block; margin-left: auto; margin-right: auto;" src="https://cdn2.techbang.com/system/images/519300/original/007d72b64df524cbe57ce4f990a3e2cf.jpg?1561903774" alt="2.接著就可以看見全世界Kodu創作者上傳的世界，下方的藍色箭頭方格，表示該世界被下載的次數。"><label class="caption" style="width: 600px; display: block; text-align: left; color: #555; line-height: 22px; padding: 0 3px 22px 3px; border-bottom: 2px solid #f0f0f0; margin: 5px auto 1rem auto;"><span style="color: #2382c5; padding-right: 5px;"> ▲ </span>2.接著就可以看見全世界 Kodu 創作者上傳的世界，下方的藍色箭頭方格，表示該世界被下載的次數。</label></p> <p><img style="display: block; margin-left: auto; margin-right: auto;" src="https://cdn2.techbang.com/system/images/519301/original/0fcb448057a91e283a5643b97b4d83be.png?1561903775" alt="3.任選一個世界即可進行「下載」，有些較大的世界會花多一點時間。下載完畢後該世界會顯示綠色勾勾，再點選「玩」即能體驗。"><label class="caption" style="width: 600px; display: block; text-align: left; color: #555; line-height: 22px; padding: 0 3px 22px 3px; border-bottom: 2px solid #f0f0f0; margin: 5px auto 1rem auto;"><span style="color: #2382c5; padding-right: 5px;"> ▲ </span>3.任選一個世界即可進行「下載」，有些較大的世界會花多一點時間。下載完畢後該世界會顯示綠色勾勾，再點選「玩」即能體驗。</label></p> <p><img style="display: block; margin-left: auto; margin-right: auto;" src="https://cdn0.techbang.com/system/images/519302/original/dd4b0fff5bdf746f11875cd3e9492103.png?1561903776" alt="4.「社群」可以用關鍵字進行世界搜尋，旁邊也擁有簡單的排序過濾器。只不過筆者測試後發現，兩者都有點不太靈敏。"><label class="caption" style="width: 600px; display: block; text-align: left; color: #555; line-height: 22px; padding: 0 3px 22px 3px; border-bottom: 2px solid #f0f0f0; margin: 5px auto 1rem auto;"><span style="color: #2382c5; padding-right: 5px;"> ▲ </span>4.「社群」可以用關鍵字進行世界搜尋，旁邊也擁有簡單的排序過濾器。只不過筆者測試後發現，兩者都有點不太靈敏。</label></p> <p><img style="display: block; margin-left: auto; margin-right: auto;" src="https://cdn0.techbang.com/system/images/519303/original/f4a160c247a04fc861830f2ee931dd1e.jpg?1561903776" alt="5.如果覺得內建的社群功能很難用，可以轉而到官網下載他人創作好的世界，官網另有熱門下載排行榜等排序能夠參考。"><label class="caption" style="width: 600px; display: block; text-align: left; color: #555; line-height: 22px; padding: 0 3px 22px 3px; border-bottom: 2px solid #f0f0f0; margin: 5px auto 1rem auto;"><span style="color: #2382c5; padding-right: 5px;"> ▲ </span>5.如果覺得內建的社群功能很難用，可以轉而到官網下載他人創作好的世界，官網另有熱門下載排行榜等排序能夠參考。</label></p> <h2>內建入門課程，先讓Kodu動起來！</h2> <p>即便已經有過程式開發經驗，或者熟悉 Code.org 及 Blockly Games 等視覺化程式設計語言的大人或小朋友，第一次接觸到 Kodu Game Lab 時，總還是會感到有些疑惑，畢竟 Kodu 的操作概念和上述兩者完全不同。對此，微軟很貼心的在 Kodu 中，預設建立好了超級多的世界做為引導教學，先從熟悉操作介面入手，接著才是一步步應用 Kodu 的各種功能，打造屬於自己的遊戲。比較麻煩的是，Kodu 一開始並沒有告訴操作者，引導教學的世界得自行手動載入，也沒有任何相關提示，所以如果起初就從「建立新世界」開始玩起的話，自然就會手忙腳亂，不知所以了。</p> <p><img style="display: block; margin-left: auto; margin-right: auto;" src="https://cdn0.techbang.com/system/images/519304/original/b932f2c4e370e3ebcc29b7683b66c071.png?1561903881" alt="1.官方的導引教學究竟在哪呢？首先來到Kodu Game Lab主畫面，點選「載入世界」。"><label class="caption" style="width: 600px; display: block; text-align: left; color: #555; line-height: 22px; padding: 0 3px 22px 3px; border-bottom: 2px solid #f0f0f0; margin: 5px auto 1rem auto;"><span style="color: #2382c5; padding-right: 5px;"> ▲ </span>1.官方的導引教學究竟在哪呢？首先來到 Kodu Game Lab 主畫面，點選「載入世界」。</label></p> <p><img style="display: block; margin-left: auto; margin-right: auto;" src="https://cdn1.techbang.com/system/images/519305/original/e3061a80ede133a7b4c5b60bd3832e2f.png?1561903882" alt="2.沒錯，官方的教學就藏在這邊。先進入第一個世界「First Tutorial」吧！"><label class="caption" style="width: 600px; display: block; text-align: left; color: #555; line-height: 22px; padding: 0 3px 22px 3px; border-bottom: 2px solid #f0f0f0; margin: 5px auto 1rem auto;"><span style="color: #2382c5; padding-right: 5px;"> ▲ </span>2.沒錯，官方的教學就藏在這邊。先進入第一個世界「First Tutorial」吧！</label></p> <p><img style="display: block; margin-left: auto; margin-right: auto;" src="https://cdn0.techbang.com/system/images/519306/original/5a5fdbb7b6b61d55749ec2c677a9339e.png?1561903883" alt="3.比較可惜的是，官方教學在文字說明上，依然為英文呈現，但用詞都非常簡單，不容易構成問題。用滑鼠點選「繼續」。"><label class="caption" style="width: 600px; display: block; text-align: left; color: #555; line-height: 22px; padding: 0 3px 22px 3px; border-bottom: 2px solid #f0f0f0; margin: 5px auto 1rem auto;"><span style="color: #2382c5; padding-right: 5px;"> ▲ </span>3.比較可惜的是，官方教學在文字說明上，依然為英文呈現，但用詞都非常簡單，不容易構成問題。用滑鼠點選「繼續」。</label></p> <p><img style="display: block; margin-left: auto; margin-right: auto;" src="https://cdn2.techbang.com/system/images/519307/original/e3e5447594f4e99620ea127f58a3af1f.jpg?1561903883" alt="4.首先要切換到Kodu的編輯模式，如畫面指示按一下鍵盤上的「ESC」。"><label class="caption" style="width: 600px; display: block; text-align: left; color: #555; line-height: 22px; padding: 0 3px 22px 3px; border-bottom: 2px solid #f0f0f0; margin: 5px auto 1rem auto;"><span style="color: #2382c5; padding-right: 5px;"> ▲ </span>4.首先要切換到 Kodu 的編輯模式，如畫面指示按一下鍵盤上的「ESC」。</label></p> <p><img style="display: block; margin-left: auto; margin-right: auto;" src="https://cdn1.techbang.com/system/images/519308/original/b28f8731ea724e792e4fda9e65918fa3.png?1561903884" alt="5.進入編輯模式後，就會看到下方出現一排工具列了。再來點選Kodu機器人圖示的「物件工具」。"><label class="caption" style="width: 600px; display: block; text-align: left; color: #555; line-height: 22px; padding: 0 3px 22px 3px; border-bottom: 2px solid #f0f0f0; margin: 5px auto 1rem auto;"><span style="color: #2382c5; padding-right: 5px;"> ▲ </span>5.進入編輯模式後，就會看到下方出現一排工具列了。再來點選 Kodu 機器人圖示的「物件工具」。</label></p> <p><img style="display: block; margin-left: auto; margin-right: auto;" src="https://cdn1.techbang.com/system/images/519309/original/00d6973f797959cc8db24dff7d69fff1.png?1561903885" alt="6.在畫面中用左鍵點擊任何地方，會跳出新增選單，游標往上點一下Kodu。"><label class="caption" style="width: 600px; display: block; text-align: left; color: #555; line-height: 22px; padding: 0 3px 22px 3px; border-bottom: 2px solid #f0f0f0; margin: 5px auto 1rem auto;"><span style="color: #2382c5; padding-right: 5px;"> ▲ </span>6.在畫面中用左鍵點擊任何地方，會跳出新增選單，游標往上點一下 Kodu。</label></p> <p><img style="display: block; margin-left: auto; margin-right: auto;" src="https://cdn1.techbang.com/system/images/519310/original/1b92e16e6c9229a8ddf472520b513ff1.png?1561903885" alt="7.此時剛剛點擊滑鼠的位置，就會出現我們放置的Kodu機器人了！按下工具列的綠色三角形「開始玩」，執行遊戲看看。"><label class="caption" style="width: 600px; display: block; text-align: left; color: #555; line-height: 22px; padding: 0 3px 22px 3px; border-bottom: 2px solid #f0f0f0; margin: 5px auto 1rem auto;"><span style="color: #2382c5; padding-right: 5px;"> ▲ </span>7.此時剛剛點擊滑鼠的位置，就會出現我們放置的 Kodu 機器人了！按下工具列的綠色三角形「開始玩」，執行遊戲看看。</label></p> <p><img style="display: block; margin-left: auto; margin-right: auto;" src="https://cdn0.techbang.com/system/images/519311/original/159dd7c964e165d27833238fcc9a1994.png?1561903886" alt="8.什麼事都沒發生，因為剛剛只新增了物件。現在切換回編輯模式的「物件工具」，移到Kodu身上後按右鍵後點選「編排程式」。"><label class="caption" style="width: 600px; display: block; text-align: left; color: #555; line-height: 22px; padding: 0 3px 22px 3px; border-bottom: 2px solid #f0f0f0; margin: 5px auto 1rem auto;"><span style="color: #2382c5; padding-right: 5px;"> ▲ </span>8.什麼事都沒發生，因為剛剛只新增了物件。現在切換回編輯模式的「物件工具」，移到Kodu身上後按右鍵後點選「編排程式」。</label></p> <p><img style="display: block; margin-left: auto; margin-right: auto;" src="https://cdn0.techbang.com/system/images/519312/original/1fa960bd8e490851f1d6fadc4bd83e3a.png?1561903887" alt="9.這個畫面就是該物件的程式編輯器，首先我們要讓Kodu能夠接收玩家操作指令，點選第一排WHEN旁邊的加號。"><label class="caption" style="width: 600px; display: block; text-align: left; color: #555; line-height: 22px; padding: 0 3px 22px 3px; border-bottom: 2px solid #f0f0f0; margin: 5px auto 1rem auto;"><span style="color: #2382c5; padding-right: 5px;"> ▲ </span>9.這個畫面就是該物件的程式編輯器，首先我們要讓 Kodu 能夠接收玩家操作指令，點選第一排 WHEN 旁邊的加號。</label></p> <p><img style="display: block; margin-left: auto; margin-right: auto;" src="https://cdn1.techbang.com/system/images/519313/original/de5bc3f4f841f27c01a023ead9092ca2.png?1561903887" alt="10.依序新增「鍵盤」和「箭號鍵」到WHEN的後方，這代表玩家可以用上、下、左、右來操作Kodu機器人。"><label class="caption" style="width: 600px; display: block; text-align: left; color: #555; line-height: 22px; padding: 0 3px 22px 3px; border-bottom: 2px solid #f0f0f0; margin: 5px auto 1rem auto;"><span style="color: #2382c5; padding-right: 5px;"> ▲ </span>10.依序新增「鍵盤」和「箭號鍵」到 WHEN 的後方，這代表玩家可以用上、下、左、右來操作 Kodu 機器人。</label></p> <p><img style="display: block; margin-left: auto; margin-right: auto;" src="https://cdn1.techbang.com/system/images/519314/original/890db74dce0a0ef3e7d50a8314adf842.png?1561903888" alt="11.接著於DO後方的加號新增「移動」指令，這代表箭號鍵的功用是讓Kodu機器人能夠移動。完成後點「開始玩」體驗看看吧！"><label class="caption" style="width: 600px; display: block; text-align: left; color: #555; line-height: 22px; padding: 0 3px 22px 3px; border-bottom: 2px solid #f0f0f0; margin: 5px auto 1rem auto;"><span style="color: #2382c5; padding-right: 5px;"> ▲ </span>11.接著於 DO 後方的加號新增「移動」指令，這代表箭號鍵的功用是讓 Kodu 機器人能夠移動。完成後點「開始玩」體驗看看吧！</label></p> <h2>理解程式執行順序，創造世界場景</h2> <p>在前一個教學中，我們成功讓 Kodu 機器人在世界中動起來，可以遵守玩家的鍵盤操作。下一個教學中，繼續深化程式架構的概念，接著要讓操作者理解 Kodu Game Lab 的程式執行邏輯，使Kodu機器人能夠自己移動並尋找到蘋果。在懂得 WHEN 與 DO 代表的意義與如何使用後，就可以進入 Kodu Game Lab 最大的特色「場景設計」。利用簡單的筆刷、材質等，Kodu 允許操作者鋪陳世界中的地面樣貌，山丘、山巒等地型工具，更可以用來打造錯綜複雜的遊戲世界。雖然打造場景的工作並不困難，但重點在於能否與遊戲內容互相結合，使美術擺設進一步昇華成遊戲機制的一部分。</p> <p><img style="display: block; margin-left: auto; margin-right: auto;" src="https://cdn1.techbang.com/system/images/519561/original/1f324282ee5cc221db56f1bd03bd3930.png?1562125432" alt="1.於載入世界的畫面，找到「Programming」開頭的第二個教學並載入。"><label class="caption" style="width: 600px; display: block; text-align: left; color: #555; line-height: 22px; padding: 0 3px 22px 3px; border-bottom: 2px solid #f0f0f0; margin: 5px auto 1rem auto;"><span style="color: #2382c5; padding-right: 5px;"> ▲ </span>1.於載入世界的畫面，找到「Programming」開頭的第二個教學並載入。</label></p> <p><img style="display: block; margin-left: auto; margin-right: auto;" src="https://cdn2.techbang.com/system/images/519562/original/c04f235d05451b5a77f90dfd7d160394.png?1562125433" alt="2.首先用「物件工具」新增三個蘋果及一個Kodu機器人，在世界中的任一地點。"><label class="caption" style="width: 600px; display: block; text-align: left; color: #555; line-height: 22px; padding: 0 3px 22px 3px; border-bottom: 2px solid #f0f0f0; margin: 5px auto 1rem auto;"><span style="color: #2382c5; padding-right: 5px;"> ▲ </span>2.首先用「物件工具」新增三個蘋果及一個 Kodu 機器人，在世界中的任一地點。</label></p> <p><img style="display: block; margin-left: auto; margin-right: auto;" src="https://cdn2.techbang.com/system/images/519563/original/bc9229bf7929ee95410eeb0382968d79.png?1562125434" alt="3.如果找不到蘋果的話，它就藏在「物件」的下一層選單中喔！"><label class="caption" style="width: 600px; display: block; text-align: left; color: #555; line-height: 22px; padding: 0 3px 22px 3px; border-bottom: 2px solid #f0f0f0; margin: 5px auto 1rem auto;"><span style="color: #2382c5; padding-right: 5px;"> ▲ </span>3.如果找不到蘋果的話，它就藏在「物件」的下一層選單中喔！</label></p> <p><img style="display: block; margin-left: auto; margin-right: auto;" src="https://cdn1.techbang.com/system/images/519564/original/3905a56f404984f698d458e9d87a9a96.png?1562125434" alt="4.物件配置完成後，再來開始針對Kodu編寫程式。在WHEN增加「看」與「蘋果」，DO增加「移動」和「向前」。"><label class="caption" style="width: 600px; display: block; text-align: left; color: #555; line-height: 22px; padding: 0 3px 22px 3px; border-bottom: 2px solid #f0f0f0; margin: 5px auto 1rem auto;"><span style="color: #2382c5; padding-right: 5px;"> ▲ </span>4.物件配置完成後，再來開始針對 Kodu 編寫程式。在 WHEN 增加「看」與「蘋果」，DO增加「移動」和「向前」。</label></p> <p><img style="display: block; margin-left: auto; margin-right: auto;" src="https://cdn2.techbang.com/system/images/519565/original/4261037034a66e87578569ca9ad90174.png?1562125435" alt="5.第一排程式僅讓Kodu能找到蘋果，現在於第二排程式的WHEN新增「碰到」、「蘋果」，DO則增加「吃」的動作。"><label class="caption" style="width: 600px; display: block; text-align: left; color: #555; line-height: 22px; padding: 0 3px 22px 3px; border-bottom: 2px solid #f0f0f0; margin: 5px auto 1rem auto;"><span style="color: #2382c5; padding-right: 5px;"> ▲ </span>5.第一排程式僅讓 Kodu 能找到蘋果，現在於第二排程式的 WHEN 新增「碰到」、「蘋果」，DO 則增加「吃」的動作。</label></p> <p><label class="caption" style="width: 600px; display: block; text-align: left; color: #555; line-height: 22px; padding: 0 3px 22px 3px; border-bottom: 2px solid #f0f0f0; margin: 5px auto 1rem auto;"><span style="color: #2382c5; padding-right: 5px;"><img src="https://cdn1.techbang.com/system/images/519566/original/2bb2a9ed8695d14ae3e86c04f192ac1c.jpg?1562125520">▲ </span>6.完成後就執行看看吧！Kodu 機器人會自動找到三個蘋果，並且把它們一一吃掉喔。</label></p> <p><img style="display: block; margin-left: auto; margin-right: auto;" src="https://cdn2.techbang.com/system/images/519567/original/2db28b86a15ae7c2fc725f3f5ccef805.png?1562125521" alt="7.下一個是場景設計教學，找到「Add/Paint」開頭的世界並載入。"><label class="caption" style="width: 600px; display: block; text-align: left; color: #555; line-height: 22px; padding: 0 3px 22px 3px; border-bottom: 2px solid #f0f0f0; margin: 5px auto 1rem auto;"><span style="color: #2382c5; padding-right: 5px;"> ▲ </span>7.下一個是場景設計教學，找到「Add/Paint」開頭的世界並載入。</label></p> <p><img style="display: block; margin-left: auto; margin-right: auto;" src="https://cdn0.techbang.com/system/images/519568/original/321372a0fedac0d6c372f3f85455c17a.png?1562125522" alt="8.進入編輯模式後，點選工具列「地面刷具」，開始對遊戲場景進行更動。後面的圖示則可改變地貌，如升高或降低。"><label class="caption" style="width: 600px; display: block; text-align: left; color: #555; line-height: 22px; padding: 0 3px 22px 3px; border-bottom: 2px solid #f0f0f0; margin: 5px auto 1rem auto;"><span style="color: #2382c5; padding-right: 5px;"> ▲ </span>8.進入編輯模式後，點選工具列「地面刷具」，開始對遊戲場景進行更動。後面的圖示則可改變地貌，如升高或降低。</label></p> <p><img style="display: block; margin-left: auto; margin-right: auto;" src="https://cdn0.techbang.com/system/images/519569/original/f473c5fc3ce8f6ba518e961e99be7632.png?1562125522" alt="9.「地面刷具」可以改變遊戲世界的地面；用滑鼠左鍵新增，滑鼠右鍵刪除地面。"><label class="caption" style="width: 600px; display: block; text-align: left; color: #555; line-height: 22px; padding: 0 3px 22px 3px; border-bottom: 2px solid #f0f0f0; margin: 5px auto 1rem auto;"><span style="color: #2382c5; padding-right: 5px;"> ▲ </span>9.「地面刷具」可以改變遊戲世界的地面；用滑鼠左鍵新增，滑鼠右鍵刪除地面。</label></p> <p><img style="display: block; margin-left: auto; margin-right: auto;" src="https://cdn0.techbang.com/system/images/519570/original/c1a2671542e5dba6b08967840acb92ce.png?1562125523" alt="10.地面的材質紋理是可以改變的，點選「地面刷具」上方左邊的圖示，就會出現大量材質可供挑選。"><label class="caption" style="width: 600px; display: block; text-align: left; color: #555; line-height: 22px; padding: 0 3px 22px 3px; border-bottom: 2px solid #f0f0f0; margin: 5px auto 1rem auto;"><span style="color: #2382c5; padding-right: 5px;"> ▲ </span>10.地面的材質紋理是可以改變的，點選「地面刷具」上方左邊的圖示，就會出現大量材質可供挑選。</label></p> <p><img style="display: block; margin-left: auto; margin-right: auto;" src="https://cdn1.techbang.com/system/images/519571/original/7819baf4478d64ad8408a2ac452a7452.png?1562125524" alt="11.而刷具本身的造型也可以改變，點選「地面刷具」上方右邊的圖示，就會出現圓形、方型等選項。"><label class="caption" style="width: 600px; display: block; text-align: left; color: #555; line-height: 22px; padding: 0 3px 22px 3px; border-bottom: 2px solid #f0f0f0; margin: 5px auto 1rem auto;"><span style="color: #2382c5; padding-right: 5px;"> ▲ </span>11.而刷具本身的造型也可以改變，點選「地面刷具」上方右邊的圖示，就會出現圓形、方型等選項。</label></p> <h2>新增關鍵步驟，完成你的第一個Kodu遊戲！</h2> <p>經過前面的教學，無論大人或小孩對於 Kodu Game Lab 的基本操作方式，以及程式本身的運作邏輯，應該都有了大致認識。在開始從頭打造一個全新的遊戲之前，不妨先參考教學中，已經完成大部分場景設計，多數程式碼編排完畢的世界，透過新增關鍵步驟的方式，應用先前所學，產出自己的第一個 Kodo 遊戲。這次進行教學的世界為「Maze Tutorial 1」，玩家要扮演白色小Kodu，走入迷宮尋找藍色的Kodu機器人，並將其帶回甜蜜的家，但這個世界中缺少了幾個關鍵程式碼，導致遊戲無法正常執行，接下來就跟著教學一步步將它補上吧！</p> <p><img style="display: block; margin-left: auto; margin-right: auto;" src="https://cdn2.techbang.com/system/images/519572/original/e6aadb73d45b34ba93fab4241d117cf9.png?1562125702" alt="1.稍微於載入遊戲畫面，往後拉找到「Maze Tutorial 1」，開啟這個未完成的世界。"><label class="caption" style="width: 600px; display: block; text-align: left; color: #555; line-height: 22px; padding: 0 3px 22px 3px; border-bottom: 2px solid #f0f0f0; margin: 5px auto 1rem auto;"><span style="color: #2382c5; padding-right: 5px;"> ▲ </span>1.稍微於載入遊戲畫面，往後拉找到「Maze Tutorial 1」，開啟這個未完成的世界。</label></p> <p><img style="display: block; margin-left: auto; margin-right: auto;" src="https://cdn0.techbang.com/system/images/519573/original/860f598c225bd8b688be419738cae68d.png?1562125702" alt="2.雖然場景都編排好了，但Kodu機器人們缺少了關鍵程式。先找到迷宮出發點的白色Kodu，右鍵開啟選單點「編排程式」。"><label class="caption" style="width: 600px; display: block; text-align: left; color: #555; line-height: 22px; padding: 0 3px 22px 3px; border-bottom: 2px solid #f0f0f0; margin: 5px auto 1rem auto;"><span style="color: #2382c5; padding-right: 5px;"> ▲ </span>2.雖然場景都編排好了，但 Kodu 機器人們缺少了關鍵程式。先找到迷宮出發點的白色Kodu，右鍵開啟選單點「編排程式」。</label></p> <p><img style="display: block; margin-left: auto; margin-right: auto;" src="https://cdn2.techbang.com/system/images/519574/original/ce2ea5f4053deaf1865327f6769b17ad.png?1562125703" alt="3.白色Kodu可以用觸控和搖桿操作，但卻不能用鍵盤，所以要為他追加輸入指令。在第三排的WHEN新增「鍵盤」和「箭號鍵」。"><label class="caption" style="width: 600px; display: block; text-align: left; color: #555; line-height: 22px; padding: 0 3px 22px 3px; border-bottom: 2px solid #f0f0f0; margin: 5px auto 1rem auto;"><span style="color: #2382c5; padding-right: 5px;"> ▲ </span>3.白色 Kodu 可以用觸控和搖桿操作，但卻不能用鍵盤，所以要為他追加輸入指令。在第三排的 WHEN 新增「鍵盤」和「箭號鍵」。</label></p> <p><img style="display: block; margin-left: auto; margin-right: auto;" src="https://cdn1.techbang.com/system/images/519575/original/b98895664936659ca28d8c3f7e8c04a4.png?1562125704" alt="4.當然也不要忘了於DO的後面新增「移動」指令，如此一來白色Kodu就可以透過鍵盤輸入進行操作了！"><label class="caption" style="width: 600px; display: block; text-align: left; color: #555; line-height: 22px; padding: 0 3px 22px 3px; border-bottom: 2px solid #f0f0f0; margin: 5px auto 1rem auto;"><span style="color: #2382c5; padding-right: 5px;"> ▲ </span>4.當然也不要忘了於 DO 的後面新增「移動」指令，如此一來白色 Kodu 就可以透過鍵盤輸入進行操作了！</label></p> <p><img style="display: block; margin-left: auto; margin-right: auto;" src="https://cdn1.techbang.com/system/images/519576/original/3db1312d7753850288b35099efa92132.png?1562125704" alt="5.離開程式編輯畫面，點工具列的綠色三角形「開始玩」，玩家此刻可以探索迷宮囉～"><label class="caption" style="width: 600px; display: block; text-align: left; color: #555; line-height: 22px; padding: 0 3px 22px 3px; border-bottom: 2px solid #f0f0f0; margin: 5px auto 1rem auto;"><span style="color: #2382c5; padding-right: 5px;"> ▲ </span>5.離開程式編輯畫面，點工具列的綠色三角形「開始玩」，玩家此刻可以探索迷宮囉～</label></p> <p><img style="display: block; margin-left: auto; margin-right: auto;" src="https://cdn1.techbang.com/system/images/519577/original/01ed55bcbbbc891e72db28b080b61312.jpg?1562125705" alt="6.透過玩家操作，白色Kodu成功找到藍色Kodu，但她卻不會跟著玩家移動，這樣要如何將她帶出迷宮呢？"><label class="caption" style="width: 600px; display: block; text-align: left; color: #555; line-height: 22px; padding: 0 3px 22px 3px; border-bottom: 2px solid #f0f0f0; margin: 5px auto 1rem auto;"><span style="color: #2382c5; padding-right: 5px;"> ▲ </span>6.透過玩家操作，白色 Kodu 成功找到藍色 Kodu，但她卻不會跟著玩家移動，這樣要如何將她帶出迷宮呢？</label></p> <p><img style="display: block; margin-left: auto; margin-right: auto;" src="https://cdn0.techbang.com/system/images/519578/original/6cb2ce029a6cdeac8b8197d41856a98f.png?1562125705" alt="7.此時就要來針對藍色Kodu撰寫程式。回到編輯模式，切換到「物件工具」後，右鍵開啟藍色Kodu的選單，點擊「編排程式」。"><label class="caption" style="width: 600px; display: block; text-align: left; color: #555; line-height: 22px; padding: 0 3px 22px 3px; border-bottom: 2px solid #f0f0f0; margin: 5px auto 1rem auto;"><span style="color: #2382c5; padding-right: 5px;"> ▲ </span>7.此時就要來針對藍色 Kodu 撰寫程式。回到編輯模式，切換到「物件工具」後，右鍵開啟藍色 Kodu 的選單，點擊「編排程式」。</label></p> <p><img style="display: block; margin-left: auto; margin-right: auto;" src="https://cdn2.techbang.com/system/images/519579/original/ede6219e2b8ba99a41e54fa691b403a8.png?1562125706" alt="8.在第一列的「看」後面新增「Kodu」，再追加「白色」以精確定義，不然藍色Kodu會被不明人士帶走喔！"><label class="caption" style="width: 600px; display: block; text-align: left; color: #555; line-height: 22px; padding: 0 3px 22px 3px; border-bottom: 2px solid #f0f0f0; margin: 5px auto 1rem auto;"><span style="color: #2382c5; padding-right: 5px;"> ▲ </span>8.在第一列的「看」後面新增「Kodu」，再追加「白色」以精確定義，不然藍色 Kodu 會被不明人士帶走喔！</label></p> <p><img style="display: block; margin-left: auto; margin-right: auto;" src="https://cdn2.techbang.com/system/images/519580/original/bcefa579f8b15d163bc534f0c7f08ceb.png?1562125707" alt="9.接著於WHEN的各個指令後方，追加一個「線性視野」選項，目的在於讓Kodu懂得迴避牆、石頭等阻礙，只跟著玩家移動。"><label class="caption" style="width: 600px; display: block; text-align: left; color: #555; line-height: 22px; padding: 0 3px 22px 3px; border-bottom: 2px solid #f0f0f0; margin: 5px auto 1rem auto;"><span style="color: #2382c5; padding-right: 5px;"> ▲ </span>9.接著於 WHEN 的各個指令後方，追加一個「線性視野」選項，目的在於讓 Kodu 懂得迴避牆、石頭等阻礙，只跟著玩家移動。</label></p> <p><img style="display: block; margin-left: auto; margin-right: auto;" src="https://cdn1.techbang.com/system/images/519581/original/a0bacbb5543c8e0b56d33468d86b206e.png?1562125707" alt="10.於DO後方新增「移動」、「向前」、「快速」等指令，讓藍色Kodu看到白色Kodu後會跟著走，程式就算完成了。"><label class="caption" style="width: 600px; display: block; text-align: left; color: #555; line-height: 22px; padding: 0 3px 22px 3px; border-bottom: 2px solid #f0f0f0; margin: 5px auto 1rem auto;"><span style="color: #2382c5; padding-right: 5px;"> ▲ </span>10.於 DO 後方新增「移動」、「向前」、「快速」等指令，讓藍色 Kodu 看到白色 Kodu 後會跟著走，程式就算完成了。</label></p> <p><img style="display: block; margin-left: auto; margin-right: auto;" src="https://cdn0.techbang.com/system/images/519582/original/2d79260e3228108dd7f8abd6e842b4b5.jpg?1562125708" alt="11.實際執行一次遊戲，探索迷宮把藍色Kodu帶回甜蜜的家吧！"><label class="caption" style="width: 600px; display: block; text-align: left; color: #555; line-height: 22px; padding: 0 3px 22px 3px; border-bottom: 2px solid #f0f0f0; margin: 5px auto 1rem auto;"><span style="color: #2382c5; padding-right: 5px;"> ▲ </span>11.實際執行一次遊戲，探索迷宮把藍色 Kodu 帶回甜蜜的家吧！</label></p> <blockquote> <strong><br> 本文同步刊載於PC home雜誌<br> </strong> <a href="http://www.facebook.com/pchomefans" target="_blank" rel="noopener"><img style="border-width: 1px; outline-width: 0px; max-width: 100%; height: 70px;" src="https://cdn2.techbang.com/system/images/333351/original/3edb83bc645cb96ede1198f4e5755570.jpg?1453791101" alt="Sony Ear Duo－ 無線開放式耳機內建語音助理" width="200" height="70" data-original="/system/images/333351/original/3edb83bc645cb96ede1198f4e5755570.jpg?1453791101"></a><br> 歡迎加入<a href="https://www.techbang.com/admin/posts/http%EF%BC%9A/www.facebook.com/pchomefans" target="_blank" rel="noopener">PC home雜誌粉絲團</a>！</blockquote><a href="https://www.facebook.com/TKbang">加入T客邦Facebook粉絲團</a><img src="http://feeds.feedburner.com/~r/techbang/~4/k3FtJYpJTeA" height="1" width="1" alt=""/>
