請更新您的瀏覽器

您使用的瀏覽器版本較舊,已不再受支援。建議您更新瀏覽器版本,以獲得最佳使用體驗。

科技

陪小朋友學程式,微軟Kodu Game Lab邊玩邊學

T客邦

更新於 2019年08月18日17:35 • 發布於 2019年08月18日06:30 • MikaBrea

在 STEAM 教育當中,透過遊戲讓小朋友理解程式的運作方式與流程,固然是非常重要的部分。而當孩子對程式設計有了基本概念後,重點就擺在如何讓小朋友產生興趣,實踐程式開發技能。

「 Kodu Game Lab 」是由微軟所推出的「視覺化遊戲程式設計語言」,特別注意「遊戲」兩個字,沒錯,過去小朋友可以從遊戲中學習程式的運作,而現在反過來,孩子可以透過 Kodu Game Lab 來設計自己的遊戲,而且同樣不必面對繁雜的程式碼,一切以視覺化的方式運作。Kodu 不但能激起小朋友「創造」的興趣,即便是大人也可以輕鬆從旁指導、教學,無論哪個年齡層都能從中體會到「玩」遊戲的樂趣。

與其說Kodu Game Lab是一套程式學習工具,筆者認為還更像是「遊戲開發工具」,從場景編排到角色互動,都擁有極高的創造性。

▲ 與其說 Kodu Game Lab 是一套程式學習工具,筆者認為還更像是「遊戲開發工具」,從場景編排到角色互動,都擁有極高的創造性。

Kodu Game Lab
https://www.kodugamelab.com/

用玩遊戲來學習寫遊戲

不可否認,沒有人能夠抵抗電子遊戲的魅力,但開發一套遊戲是專業且曠日廢時的事情嗎?相信大多數人會認為,這項任務涉及了許多複雜的部分,單靠一己之力難以完成,不過事實上,製作遊戲是再簡單不過的事情,只要你願意動手。在過去,日本廠商 Enterbrain 曾推出任何人都能輕鬆上手的遊戲製作工具「RPG製作大師」,從中誕生的遊戲一度蔚為風潮,甚至形成了獨特的「RM社群」,甚至於獨門的遊戲類別。由微軟推出的 Kodu Game Lab,在某種程度上非常類似於RPG製作大師,但卻更強調讓孩子運用腳本設計、場景互動,去理解程式的實踐方法並整合自己的技能。

 

Kodu Game Lab不脫離視覺化程式語言常用的「拼圖」概念,雖然有所限制但已擁有無窮的可能性。

▲ Kodu Game Lab 不脫離視覺化程式語言常用的「拼圖」概念,雖然有所限制但已擁有無窮的可能性。

介面稍複雜,可玩性更高

正如同遊戲規則有複雜與簡單的差別,Kodu Game Lab 相較於前面介紹的 Blockly Games 與Code.org,各方面都來得更加進階,但卻不會難以上手,反倒擁有更高的可玩性。Kodu 專注於製作遊戲,所以設計者得顧及更多的面向,不僅僅是思考「如何讓遊戲動起來」如此簡單。在 Kodu Game Lab 中,小朋友得考慮如何佈置場景,如何使物件有正確的互動,如何設定計分規則,如何實踐勝負判定等,一連串與遊戲相關的行為,只要某個環節出了錯,就沒辦法讓遊戲達到理想中的樣貌。換句話說,當開啟了Kodu內的一個新世界,就是真正啟動了一套新遊戲開發專案,不單純只有理解程式的運作概念而已。 

龐大社群成為支援後盾

既然 Kodu Game Lab 擁有非常高的可玩性,那勢必會如同 RPG 製作大師一樣,創造出一個擁有極大潛力的Kodu社群,而微軟一開始就想到了這點。社群是 Kodu 最大的進步與學習動力,不但可以找到各種引導教學,也可以體驗別人開發出來的 Kodu 遊戲,當然最重要的是能夠上傳自己製作的遊戲,與世界上的每個人分享。即便是最專業的程式設計者,能夠讓別人體驗到自己的作品,永遠都是創作一套軟體最大的動機。Kodu Game Lab 的社群功能,能夠讓小朋友切實的體會到開發程式的成就感。

 社群上有不少Kodu作品,不單單只有展示學習成果而已,還是一套規則完整,遊戲性豐富的世界。

▲ 社群上有不少 Kodu 作品,不單單只有展示學習成果而已,還是一套規則完整,遊戲性豐富的世界。

 

從微軟網站免費取得,安裝 Kodu Game Lab

相較於許多視覺化的程式設計平台,如 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開發環境,所以下載安裝程式時,記得要挑對版本,才不會浪費時間得額外搜尋安裝包。

1.首先開啟Kodu Game Lab網站,點選左上角的「Get Kodu」綠色按鈕。

▲ 1.首先開啟 Kodu Game Lab 網站,點選左上角的「Get Kodu」綠色按鈕。

2.請點選「.exe」副檔名,容量較大的安裝程式,再按「NEXT」下載。該檔案才內含有必要的開發環境安裝包。

▲ 2.請點選「.exe」副檔名,容量較大的安裝程式,再按「NEXT」下載。該檔案才內含有必要的開發環境安裝包。

3.安裝完畢後,點選桌面上綠色的「Kodu Game Lab」執行程式。

▲ 3.安裝完畢後,點選桌面上綠色的「 Kodu Game Lab 」執行程式。

4.程式啟動後,可以設定創作者名稱,記得輸入自訂的4位數Pin碼,再按OK進入主畫面。

▲ 4.程式啟動後,可以設定創作者名稱,記得輸入自訂的4位數Pin碼,再按OK進入主畫面。

5.Kodu的主選單擁有中文介面,右上角可以看見登入的創作者名稱,建議可以到「選項」中,開啟「顯示畫面播放速率」。

▲ 5.Kodu 的主選單擁有中文介面,右上角可以看見登入的創作者名稱,建議可以到「選項」中,開啟「顯示畫面播放速率」。

透過社群功能,尋找別人製作的遊戲

前面提過 Kodu Game Lab 最大的亮點,就是擁有強大社群後盾,在開始動手設計遊戲之前,不妨先進入「社群」功能,來看看全世界的孩子們,都用 Kodu 設計出了哪些令人驚豔的作品。在 Kodu 中,每個人所設計的遊戲,都會被打包成「世界」的概念呈現,這有一點類似《Minecraft》,而下載他人製作好的世界,即是下載一套了他人設計好的遊戲,而且可以再行發揮創意,修改世界中的各種元素。使用 Kodu Game Lab 的社群功能時,會需要電腦連上網路,並可以用關鍵字的方式尋找特定世界,或是透過官網的排行榜下載最新、最熱門的世界。

1.進入Kodu Game Lab主畫面後,點選「社群」。

▲ 1.進入 Kodu Game Lab 主畫面後,點選「社群」。

2.接著就可以看見全世界Kodu創作者上傳的世界,下方的藍色箭頭方格,表示該世界被下載的次數。

▲ 2.接著就可以看見全世界 Kodu 創作者上傳的世界,下方的藍色箭頭方格,表示該世界被下載的次數。

3.任選一個世界即可進行「下載」,有些較大的世界會花多一點時間。下載完畢後該世界會顯示綠色勾勾,再點選「玩」即能體驗。

▲ 3.任選一個世界即可進行「下載」,有些較大的世界會花多一點時間。下載完畢後該世界會顯示綠色勾勾,再點選「玩」即能體驗。

4.「社群」可以用關鍵字進行世界搜尋,旁邊也擁有簡單的排序過濾器。只不過筆者測試後發現,兩者都有點不太靈敏。

▲ 4.「社群」可以用關鍵字進行世界搜尋,旁邊也擁有簡單的排序過濾器。只不過筆者測試後發現,兩者都有點不太靈敏。

5.如果覺得內建的社群功能很難用,可以轉而到官網下載他人創作好的世界,官網另有熱門下載排行榜等排序能夠參考。

▲ 5.如果覺得內建的社群功能很難用,可以轉而到官網下載他人創作好的世界,官網另有熱門下載排行榜等排序能夠參考。

內建入門課程,先讓Kodu動起來!

即便已經有過程式開發經驗,或者熟悉 Code.org 及 Blockly Games 等視覺化程式設計語言的大人或小朋友,第一次接觸到 Kodu Game Lab 時,總還是會感到有些疑惑,畢竟 Kodu 的操作概念和上述兩者完全不同。對此,微軟很貼心的在 Kodu 中,預設建立好了超級多的世界做為引導教學,先從熟悉操作介面入手,接著才是一步步應用 Kodu 的各種功能,打造屬於自己的遊戲。比較麻煩的是,Kodu 一開始並沒有告訴操作者,引導教學的世界得自行手動載入,也沒有任何相關提示,所以如果起初就從「建立新世界」開始玩起的話,自然就會手忙腳亂,不知所以了。

1.官方的導引教學究竟在哪呢?首先來到Kodu Game Lab主畫面,點選「載入世界」。

▲ 1.官方的導引教學究竟在哪呢?首先來到 Kodu Game Lab 主畫面,點選「載入世界」。

2.沒錯,官方的教學就藏在這邊。先進入第一個世界「First Tutorial」吧!

▲ 2.沒錯,官方的教學就藏在這邊。先進入第一個世界「First Tutorial」吧!

3.比較可惜的是,官方教學在文字說明上,依然為英文呈現,但用詞都非常簡單,不容易構成問題。用滑鼠點選「繼續」。

▲ 3.比較可惜的是,官方教學在文字說明上,依然為英文呈現,但用詞都非常簡單,不容易構成問題。用滑鼠點選「繼續」。

4.首先要切換到Kodu的編輯模式,如畫面指示按一下鍵盤上的「ESC」。

▲ 4.首先要切換到 Kodu 的編輯模式,如畫面指示按一下鍵盤上的「ESC」。

5.進入編輯模式後,就會看到下方出現一排工具列了。再來點選Kodu機器人圖示的「物件工具」。

▲ 5.進入編輯模式後,就會看到下方出現一排工具列了。再來點選 Kodu 機器人圖示的「物件工具」。

6.在畫面中用左鍵點擊任何地方,會跳出新增選單,游標往上點一下Kodu。

▲ 6.在畫面中用左鍵點擊任何地方,會跳出新增選單,游標往上點一下 Kodu。

7.此時剛剛點擊滑鼠的位置,就會出現我們放置的Kodu機器人了!按下工具列的綠色三角形「開始玩」,執行遊戲看看。

▲ 7.此時剛剛點擊滑鼠的位置,就會出現我們放置的 Kodu 機器人了!按下工具列的綠色三角形「開始玩」,執行遊戲看看。

8.什麼事都沒發生,因為剛剛只新增了物件。現在切換回編輯模式的「物件工具」,移到Kodu身上後按右鍵後點選「編排程式」。

▲ 8.什麼事都沒發生,因為剛剛只新增了物件。現在切換回編輯模式的「物件工具」,移到Kodu身上後按右鍵後點選「編排程式」。

9.這個畫面就是該物件的程式編輯器,首先我們要讓Kodu能夠接收玩家操作指令,點選第一排WHEN旁邊的加號。

▲ 9.這個畫面就是該物件的程式編輯器,首先我們要讓 Kodu 能夠接收玩家操作指令,點選第一排 WHEN 旁邊的加號。

10.依序新增「鍵盤」和「箭號鍵」到WHEN的後方,這代表玩家可以用上、下、左、右來操作Kodu機器人。

▲ 10.依序新增「鍵盤」和「箭號鍵」到 WHEN 的後方,這代表玩家可以用上、下、左、右來操作 Kodu 機器人。

11.接著於DO後方的加號新增「移動」指令,這代表箭號鍵的功用是讓Kodu機器人能夠移動。完成後點「開始玩」體驗看看吧!

▲ 11.接著於 DO 後方的加號新增「移動」指令,這代表箭號鍵的功用是讓 Kodu 機器人能夠移動。完成後點「開始玩」體驗看看吧!

理解程式執行順序,創造世界場景

在前一個教學中,我們成功讓 Kodu 機器人在世界中動起來,可以遵守玩家的鍵盤操作。下一個教學中,繼續深化程式架構的概念,接著要讓操作者理解 Kodu Game Lab 的程式執行邏輯,使Kodu機器人能夠自己移動並尋找到蘋果。在懂得 WHEN 與 DO 代表的意義與如何使用後,就可以進入 Kodu Game Lab 最大的特色「場景設計」。利用簡單的筆刷、材質等,Kodu 允許操作者鋪陳世界中的地面樣貌,山丘、山巒等地型工具,更可以用來打造錯綜複雜的遊戲世界。雖然打造場景的工作並不困難,但重點在於能否與遊戲內容互相結合,使美術擺設進一步昇華成遊戲機制的一部分。

1.於載入世界的畫面,找到「Programming」開頭的第二個教學並載入。

▲ 1.於載入世界的畫面,找到「Programming」開頭的第二個教學並載入。

2.首先用「物件工具」新增三個蘋果及一個Kodu機器人,在世界中的任一地點。

▲ 2.首先用「物件工具」新增三個蘋果及一個 Kodu 機器人,在世界中的任一地點。

3.如果找不到蘋果的話,它就藏在「物件」的下一層選單中喔!

▲ 3.如果找不到蘋果的話,它就藏在「物件」的下一層選單中喔!

4.物件配置完成後,再來開始針對Kodu編寫程式。在WHEN增加「看」與「蘋果」,DO增加「移動」和「向前」。

▲ 4.物件配置完成後,再來開始針對 Kodu 編寫程式。在 WHEN 增加「看」與「蘋果」,DO增加「移動」和「向前」。

5.第一排程式僅讓Kodu能找到蘋果,現在於第二排程式的WHEN新增「碰到」、「蘋果」,DO則增加「吃」的動作。

▲ 5.第一排程式僅讓 Kodu 能找到蘋果,現在於第二排程式的 WHEN 新增「碰到」、「蘋果」,DO 則增加「吃」的動作。

▲ 6.完成後就執行看看吧!Kodu 機器人會自動找到三個蘋果,並且把它們一一吃掉喔。

7.下一個是場景設計教學,找到「Add/Paint」開頭的世界並載入。

▲ 7.下一個是場景設計教學,找到「Add/Paint」開頭的世界並載入。

8.進入編輯模式後,點選工具列「地面刷具」,開始對遊戲場景進行更動。後面的圖示則可改變地貌,如升高或降低。

▲ 8.進入編輯模式後,點選工具列「地面刷具」,開始對遊戲場景進行更動。後面的圖示則可改變地貌,如升高或降低。

9.「地面刷具」可以改變遊戲世界的地面;用滑鼠左鍵新增,滑鼠右鍵刪除地面。

▲ 9.「地面刷具」可以改變遊戲世界的地面;用滑鼠左鍵新增,滑鼠右鍵刪除地面。

10.地面的材質紋理是可以改變的,點選「地面刷具」上方左邊的圖示,就會出現大量材質可供挑選。

▲ 10.地面的材質紋理是可以改變的,點選「地面刷具」上方左邊的圖示,就會出現大量材質可供挑選。

11.而刷具本身的造型也可以改變,點選「地面刷具」上方右邊的圖示,就會出現圓形、方型等選項。

▲ 11.而刷具本身的造型也可以改變,點選「地面刷具」上方右邊的圖示,就會出現圓形、方型等選項。

新增關鍵步驟,完成你的第一個Kodu遊戲!

經過前面的教學,無論大人或小孩對於 Kodu Game Lab 的基本操作方式,以及程式本身的運作邏輯,應該都有了大致認識。在開始從頭打造一個全新的遊戲之前,不妨先參考教學中,已經完成大部分場景設計,多數程式碼編排完畢的世界,透過新增關鍵步驟的方式,應用先前所學,產出自己的第一個 Kodo 遊戲。這次進行教學的世界為「Maze Tutorial 1」,玩家要扮演白色小Kodu,走入迷宮尋找藍色的Kodu機器人,並將其帶回甜蜜的家,但這個世界中缺少了幾個關鍵程式碼,導致遊戲無法正常執行,接下來就跟著教學一步步將它補上吧!

1.稍微於載入遊戲畫面,往後拉找到「Maze Tutorial 1」,開啟這個未完成的世界。

▲ 1.稍微於載入遊戲畫面,往後拉找到「Maze Tutorial 1」,開啟這個未完成的世界。

2.雖然場景都編排好了,但Kodu機器人們缺少了關鍵程式。先找到迷宮出發點的白色Kodu,右鍵開啟選單點「編排程式」。

▲ 2.雖然場景都編排好了,但 Kodu 機器人們缺少了關鍵程式。先找到迷宮出發點的白色Kodu,右鍵開啟選單點「編排程式」。

3.白色Kodu可以用觸控和搖桿操作,但卻不能用鍵盤,所以要為他追加輸入指令。在第三排的WHEN新增「鍵盤」和「箭號鍵」。

▲ 3.白色 Kodu 可以用觸控和搖桿操作,但卻不能用鍵盤,所以要為他追加輸入指令。在第三排的 WHEN 新增「鍵盤」和「箭號鍵」。

4.當然也不要忘了於DO的後面新增「移動」指令,如此一來白色Kodu就可以透過鍵盤輸入進行操作了!

▲ 4.當然也不要忘了於 DO 的後面新增「移動」指令,如此一來白色 Kodu 就可以透過鍵盤輸入進行操作了!

5.離開程式編輯畫面,點工具列的綠色三角形「開始玩」,玩家此刻可以探索迷宮囉~

▲ 5.離開程式編輯畫面,點工具列的綠色三角形「開始玩」,玩家此刻可以探索迷宮囉~

6.透過玩家操作,白色Kodu成功找到藍色Kodu,但她卻不會跟著玩家移動,這樣要如何將她帶出迷宮呢?

▲ 6.透過玩家操作,白色 Kodu 成功找到藍色 Kodu,但她卻不會跟著玩家移動,這樣要如何將她帶出迷宮呢?

7.此時就要來針對藍色Kodu撰寫程式。回到編輯模式,切換到「物件工具」後,右鍵開啟藍色Kodu的選單,點擊「編排程式」。

▲ 7.此時就要來針對藍色 Kodu 撰寫程式。回到編輯模式,切換到「物件工具」後,右鍵開啟藍色 Kodu 的選單,點擊「編排程式」。

8.在第一列的「看」後面新增「Kodu」,再追加「白色」以精確定義,不然藍色Kodu會被不明人士帶走喔!

▲ 8.在第一列的「看」後面新增「Kodu」,再追加「白色」以精確定義,不然藍色 Kodu 會被不明人士帶走喔!

9.接著於WHEN的各個指令後方,追加一個「線性視野」選項,目的在於讓Kodu懂得迴避牆、石頭等阻礙,只跟著玩家移動。

▲ 9.接著於 WHEN 的各個指令後方,追加一個「線性視野」選項,目的在於讓 Kodu 懂得迴避牆、石頭等阻礙,只跟著玩家移動。

10.於DO後方新增「移動」、「向前」、「快速」等指令,讓藍色Kodu看到白色Kodu後會跟著走,程式就算完成了。

▲ 10.於 DO 後方新增「移動」、「向前」、「快速」等指令,讓藍色 Kodu 看到白色 Kodu 後會跟著走,程式就算完成了。

11.實際執行一次遊戲,探索迷宮把藍色Kodu帶回甜蜜的家吧!

▲ 11.實際執行一次遊戲,探索迷宮把藍色 Kodu 帶回甜蜜的家吧!

          本文同步刊載於PC home雜誌
 
         

Sony Ear Duo- 無線開放式耳機內建語音助理


          歡迎加入PC home雜誌粉絲團

想看小編精選的3C科技情報&實用評測文,快來加入《T客邦》LINE@

查看原始文章

更多科技相關文章

01

智原孵MCU小金雞,握中國第四大市占!在紅海市場拚CP值,雅特力以高度可替代性搶客

今周刊
02

realme新機配理光鏡頭 POCO由Bose調校音響

卡優新聞網
03

美國宣布對中國晶片加徵關稅 延至2027年6月實施

路透社
04

【獨家】佐翼科技完成2億元Pre-A輪募資,核心產品「爬牆機器人」攻進半導體龍頭

創業小聚
05

川普政府招聘AI專才 2.5萬人搶進「科技部隊」

路透社
06

俄羅斯拚10年內設月球核電廠 支援探測及國際合作

路透社
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...