第1594回-運算思維-MakeCode Arcade-09-參加研習

-
12/17 我到「南投縣延和自造教育及科技中心」參加【MakeCode Arcade做程式】教師研習，兩個多月前玩過一陣子，已經忘得差不多了，得重新練功。

關於 MakeCode Arcade，我曾經寫過：

紹湖校長開場

  • 小工具小遊戲大意義，多樣化讓大家學習更多，意在推廣
  • 講師介紹：楊敏瀟，助教：呂銘達

開場

  • 調查有沒有人已經玩過 WifiBoy
  • MakeCode Arcade 與 micro:bit 相同介面，但有落差
  • 今天將會有很多實作與討論
  • 曾經與現在和國北教有合作計畫
  • 有做過親子研習，家長一起來，最有創意的是小朋友

看影片 9:24

  • 賴睿騏去年去 TED 的演講 做遊戲比玩遊戲好玩 | What's more fun than playing games? Creating them. | 賴睿騏 Ricky Lai | TEDxTaipei - YouTube
  • 以下是摘要
  • 國小學 Scratch 覺得神奇有趣，和同學組隊參加科展和比賽
  • 後來覺得 Scratch 不夠
  • 如何入門進階的程式語言? 點子: 做一個遊戲機
  • 國一寒假做出 WifiBoy
  • 賴說: 過程雖然辛苦，但很好玩 => 我說:這就是硬樂趣 hard fun
  • 參加世界各地的 Maker Faire
  • 東京粉絲愛不釋手，提供修改意見，製作遊戲的樂趣爆棚
  • 選擇 Python 作為 WifiBoy 的學習語言
  • 目標:作一台小機器，讓新手能入門進階程式語言，
  • 45行寫小蜜蜂遊戲
  • 做遊戲的心智圖 => 我要截圖
  • 參考別人的範例，曾惡搞 Hack Pygame 改幾行讓俄羅斯方塊更平易近人
  • 三角函數貪吃蛇，更像真的蛇，將學校學的不知哪天能用的數學用上了
  • 精益求精，不斷最佳化，賴說這是做遊戲最有挑戰的樂趣點
  • 打了兩年多的RPG，怎麼做機器怎麼寫程式怎麼參展
  • 結論 做遊戲真的比玩遊戲還要好玩

開發歷程 9:27

  • wifiboy 一開始 base 在 Python 上，後來才有 MakeCode
  • 賴的父親是研究所同學，幫助完成兒子的夢想，之前連CPU的PIN腳也自己焊
  • 目前已是成熟的產品了
  • 賴目前高一台北成功高中
  • 老人家幫助年輕人完成夢想
  • 探索式學習
  •  education is not the learning of facts, but the training of minds to think 愛因斯坦(圖) 愛因斯坦100年前說過的教育6句話
  • 108課綱素養學習的重點 讓學生讓專家一樣，有探究學習的經驗
  • 情境脈絡化的學習
  • 雅婷逐字稿，可關螢幕繼續錄音辨識
  • 楊說是 computer science 本科畢業，與賴爸是康乃爾同學，天天一起同甘共苦
  • 康乃爾破壞式的教學模式 ex programming language 這門課一學習學六種語言 
  • 做一個計算機，可以算到小數點以下16位
  • 三天沒睡覺，但有同學十分鐘就搞定
  • 拘泥在學習語言的內容，但其實思考邏輯是沒變的，這門課的核心是思考語言的核心價值
  • Fun to Code, Code to Learn
  • 自學的動機，不是只有去學眼前看到的，而是更多...
  • 他發現這是讓小朋友最容易投入的方式

做遊戲：邏輯和思辨的訓練 9:40

  • 姚述勤有拍照，我就專心寫研習摘要，待連結
  • 如何和機器和平相處，也是民主社會的公民素質關鍵
  • 只要是能獨立性處理的工作，未來一定會被機器取代
  • 楊經驗: 業界能被稱為優秀且值得尊敬的關鍵就是思辨能力

每個人都要當工程師嗎? 9:47

  • 不是在學程式語法而已，是新時代思辨素養的基礎訓練，非常合適，有趣的學習方法
  • 邏輯思考、設計思維
  • 初學用 MakeCode Arcade 少數進階學生可在學習 python

跨域素養 9:50

  • 五感
  • 美術：抽象化點圖、造型設計、場景設計
  • 音樂：有沒有音樂玩起來差很多
  • 數學
  • 互動設計：怎樣才好玩？
  • 運算思維：遊戲邏輯、難度控制、角色控制、人工智慧
  • 電子創客
  • 我覺得：人性心理學

MakeCode Arcade 教學平台介紹 9:55

  • 目前兩三天就改一次版本，吸收各國玩家的回饋，擴充和穩定度的提升
  • https://arcade.makecode.com/
  • MS 投入非常大的 TEAM
  • Deck 未來希望用耳機線作為對戰的連線
  • 有的功能有時候有，有時沒有，例如陀螺儀，內部修正期
  • 大架構沒變
  • MakeCode 介於 Scratch 和 micro:bit 之間，楊認為 Scratch 就是一個語言。
  • MakeCode Arcade 移動物件只要一個積木，Scratch 要八個積木，這有好處也有壞處，focus 在邏輯思考運算思維，但壞在..(待整理)
  •  micro:bit 很多都是在做訊號處理，對小朋友沒有那麼有直接的吸引力，但成為很多創客作品的核心。
  • 楊建議: Scratch => MakeCode Arcade  => micro:bit

MakeCode Arcade 特點 9:58

  • 簡單易學好玩好教
  • 低解析度 refresh 快 160*120
  • 限制顏色15色
  • 可直接轉譯成 JavaScript 和 Python
  • expert 可去 github 去下載，開源
  • 我點子: 讓學生自己組裝出遊戲機

MakeCode Arcade 設計理念 10:00

  • 網頁式，無須安裝，可離線使用 (How?)
  • 開源硬體，可學習 DIY 製作遊戲機 (How?)
  • 平台上有模擬器
  • 開源 UF2 Bootloader
  • 開源系統 可自行架設MakeCode Arcade伺服器
  • PNG 源碼，可截圖分享，內建原始積木程式，即拉即用，防駭客  (How?)
  • 下午講不為人知的小技巧

次世代 MakeCode 遊戲化運算思維教學

  • 三合一學習型遊戲機 MakeCode Arcade、MicroPython (Python3)、Arduino IDE
  • 按鍵 80g 上萬次觸壓
  • 外國人survey 十幾種相關產品， 覺得 Wifiboy Arcade 最符合安規，耐用
  • memory collection 小蜜蜂很多隻，沒被 destroy 的話，一直佔記憶體空間，遊戲變慢
  • 杜邦線擴充介面
  • 唯一用硬殼包裝，安全並減少損毀率
  • Arcade 積木程式一次只能存一個遊戲，但 Python Arduino 可存遊戲在 WfiiBoy 的 4MB Flash 上
  • 有電池的版本，插拔次數過多會損耗快
  • 沒電池的版本，也可接行動電源玩
  • 未來可線上升級 UF2 bootloader

MakeCode Arcade 初使用 10:35

  • arcade.makecode.com
  • 內容完整，對自學來說很方便
  • arcade 論壇上有很多人做案例分享
  • 教學上只要教前面六大類積木即可玩得嚇嚇叫
  • 有偵錯模式
  • 設定：配對裝置 OK-D51
  • 10種基本積木類別

  • 觸發事件用文字式的程式語言來寫是比較麻煩的，但在 Arcade 中很簡單
  • 積木不多就可以完成一個遊戲
  • 專注在如何思考
  • 為甚麼 MakeCode Arcade 好教又好學

遊戲教學設計概說 10:52

  • 設計思維 VS 工程師思維，大不同！
  • 工程師依照規格作業，但設計師創造規格
  • 回台灣的思考點、孩子在小學階段，多方探索，形式主義與填鴨妨礙成長

  • Computational Thinking 四概念

    • ex 賴的國中歷史最弱，賴爸說要找出歷史的脈絡，樹狀歸納 

  • 邏輯與思辯訓練

MakeCode Arcade 四種教學方式 11:13

  1. Step by Step Exploration 按部就班引導式
  2. Observation Engineering 範例拆解探索式
  3. Learning by Hacking 源碼觀察推演式 (挑戰學生:怎樣拿到最高分?)
  4. Ideas to Challenge 任意組合創作式
  5. 拍照當插圖

做第一個遊戲 11:22 按部就班引導式

  • 加角色，最好是自己畫主角
  • 移動角色
  • 畫一個迷宮
  • 鏡頭跟隨主角
  • 放三個東西給主角吃，先隱藏起來
  • 新增一個變數: 漢堡
  • 漢堡放置到隨機顏色的格子上
  • 氣氛開始熱烈了
  • 接上 USB 線下載程式
  • 比較難找到漢堡 https://makecode.com/_7ruU9ki4T11a
  • 比較容易找到漢堡 https://makecode.com/_hJXa03YMCbYC
  • 講師的挑戰： 加一個積木 ，便能有 100秒內可以吃到幾個漢堡的比賽功能
  • 我思考：如何一次在多個隨機地點產生漢堡？

中午休息 12:00

  • 親子研習講師，但我沒有足夠的除錯能力。
  • 有公版簡報

做第二個遊戲 13:10 範例拆解探索式 

  • 看「鴨子打披薩」的遊戲過程影片，大家思考看看如何堆積木做出這個遊戲？
  • 我看到: 披薩從右往左飛，可控制鴨子跑來跑去，按A鍵會向右發射一顆小隕石，披薩被隕石擊中，則爆解得分。
  • 模式一：學員講話，講師依照學員講的來操作
  • 模式二：學員分組討論
  • 模式三：學員各自獨立操作
  •  可讓學生用自己的語言再敘述
  • 我的解題過程：
  • 1. 設定鴨子
  • 2. 按A鍵會向右發射一顆小隕石
  • 3. 披薩隨機從右往左飛
  • 4. 披薩被隕石擊中，則爆解得分
  • 拆解1 大致的想法  
  • 拆解2 可以在 arcade.makecode.com 上操作的
  • 探索式學習，非傳統方式把每一個積木的功能全部講一遍，
  • 1:30 開始，限時 15分鐘
  • 1:40 我做好了 ，用了13行程式 https://makecode.com/_WkqTAw0x5Fcr
  • 我還想做: 披薩打到鴨子會發生什麼事？
  • 強大火力 https://makecode.com/_44P8UWEyjTvC
  • 我思考：做不出遊戲，卡關的人的心情
  • 不用按A鍵，自動發射隕石 https://makecode.com/_hzkfKgVmLbkC

楊師技巧講解 14:17

子彈打出去，爆炸的不是你碰到的披薩，而是旁邊的披薩？
  • PNG檔直接拖拉到專案介面，遊戲截圖即可
  • 披薩若被設為發射物，則隕石也是發射物的話，同類別就很難去做變化
  • 如果披薩速度慢，畫面中同時有好幾個披薩
  • 碰撞發生時  first in last out
  • 要把碰撞判斷式中的 pizza 改成 othersprite
  • 若發生 memory out 021 當機
  • 簡報中的拆解3是正解

arcade dice game 八個積木結束
當搖動遊戲機，隨機產生骰子點數
小朋友不懂陣列，但也可以知道怎麼操作
親子組合 家長理解快 小孩學習快創意多

做第三個遊戲 14:40 源碼觀察推演式

  • arcade-pong-game.png 
  • 好神奇喔！直接拖進去就有積木程式碼了，據說是寫在 PNG檔的 metadata 裡面

打乒乓遊戲的探索式學習

  • https://makecode.com/_de33LvLArYiE
  • 學生嘗試回答看看
  • 角色 ball 和 bar 是什麼？碰撞會發生什麼事？
  • ball.x<5 和 ball.x>15 是什麼？
  • ball.y>110 好像會發生什麼事？
  • 不用對小朋友講得太複雜，讓他們去體驗
  • 能不能增加一些漂浮物讓遊戲更有趣
  • 能否控制球反彈的角度？
  • 讓學生學習如何 HACK
  • 創新是從修改開始的 Tinkering
  • 老師要求增加遊戲的功能或遊戲的挑戰，例如打磚塊，是否可以做出來？

深水炸彈

  • arcade-bomb-game.png
  • 用文字式程式語言，這要寫好久啊

門徒效應 15:15

  • 同儕學習
  • 自主學習
  • 第二組學生被告知，學習完成後要教會第三組
  • 多花心思在學習、組織內容、增強責任感、類同於在錯誤中學習

綜論 15:19

  • 遊戲有起承轉合
  • 遊戲框架的創作
  • 引導學生從零打造遊戲
  • 學到 「反覆優化細節」 是成功(好玩)的關鍵
  • 從以為好玩，道不好玩，再到有點好玩，很好玩，非常好玩的過程
  • 親子研習感受最大的是家長，家長很有成就感，會認同，會帶動小孩子的學習
  • 拍一部電影，對故事的勾勒布局能力是否有改變？
  • 國外教小孩不用太複雜，讓小孩自由發揮，中國則是另一個極端，但兩者都是目前霸主
  • 完成一個完整流程的設計思維
  • Composition and Completion
  • 傷痕族：半途而廢的恐懼無法復原

擴展功能 15:30

  • 轉 JavaScripts
  • 齒輪 => 擴展 => 裝大搖桿、控制 servo、坐大數字計時器
  • 可以自己開發積木
  • 進階積木分類
  • 齒輪 => 關於 Arcade 版本：  0.14.9 Microsoft MakeCode 版本：  5.21.14
  • https://arcade.makecode.com/beta
  • 關於 arcade 版本：  0.15.1 Microsoft MakeCode 版本：  5.30.28
  • 實驗 Python enable 目前不穩定
  • 對戰功能，兩台用杜邦線連接

結語

MakeCode Arcade 好教又好學，讓學生玩出運算思維與設計能力！

Question

  • 幾年級以上適合？三個小時要三年級以上
  • 怎麼做出 png ?
  • 不只是學程式設計，遊戲全套包，跨領域才有意義。
  • 教育採購請洽 碁峰資訊張詠傑先生
  • 無電池版可以用開關直接關掉聲音

留言

張貼留言

這個網誌中的熱門文章

第1918回-師師有法寶-4-雄-筆順練習-南一-康軒-翰林-國小國語- QR Code 大合集

-
圖片
雄筆順練習 QR code 南一-康軒-翰林-國小國語 112學年下學期 112下 南一 國語生字 QR Code 雄筆順練習 Google 簡報 、 PDF 112下 翰林 國語生字 QR Code 雄筆順練習 Google 簡報 、 PDF 112下 康軒 國語生字 QR Code 雄筆順練習 Google 簡報 、 PDF 112學年上學期 TPET-生生用平板-師師有法寶-筆順QRCode-南一國語112上-分享用 TPET-生生用平板-師師有法寶-筆順QRCode-翰林國語112上-分享用 TPET-生生用平板-師師有法寶-筆順QRCode-康軒國語112上-分享用 111學年 TPET-生生用平板-師師有法寶-筆順QRCode-南一國語111上-分享用 TPET-生生用平板-師師有法寶-筆順QRCode-南一國語111下-分享用 TPET-生生用平板-師師有法寶-筆順QRCode-康軒國語111上-分享用 TPET-生生用平板-師師有法寶-筆順QRCode-康軒國語111下-分享用 TPET-生生用平板-師師有法寶-筆順QRCode-翰林國語111上-分享用 TPET-生生用平板-師師有法寶-筆順QRCode-翰林國語111下-分享用 前情提要 第1913回-師師有法寶-1-QrCode 三分鐘 第1916回-師師有法寶-2-如何製作QR Code？以生字筆順為例 第1917回-師師有法寶-3-雄-筆順練習- 三分鐘內秀出 QR Code 給學生掃 本回開始 製作歷程 (以下內有興趣再看即可，祝您備課愉快！) 20221120 第1913回-師師有法寶-1-QrCode 三分鐘 20230222 第1916回-師師有法寶-2-如何製作QR Code？以生字筆順為例 20230223 第1917回-師師有法寶-3-雄-筆順練習- 三分鐘內秀出 QR Code 給學生掃 晚上雄哥做出 QR Code 快速產生器，我超級興奮的！ 20230224 週五我用 TPET-生生用平板-師師有法寶-筆順QRCode樣版 試著做做看南一國小國語一二年級下學期每一個的生字，順利完成。 20230225 和范范老師用 TPET-生生用平板-師師有法寶-筆順QRCode樣版 來練習做康軒版國小國語二年級的生字筆順練習 QR Code，原本預計十分鐘做完，做完發現是100分
閱讀完整內容

第1670回-自主學習-如何印出中英對照的 TED 演講逐字稿

-
圖片
昨天在做 第1669回-我家私塾-英文單字-部件組合 時，我發現兒子很多中文字不太會寫，我覺得可能的原因是：平常中文字寫太少。我想要求他每天抄寫100個中文字，可是要抄什麼呢？ 兒子平常不太看書，這兩三個月來我放棄要求他多看書，改成看電影，而且最好是外語發音的影片，這樣他就非得閱讀字幕不可了。我家有訂 MOD 電影199，所以影片資源不是問題。兒子覺得若是英語發音的電影，最好是有中英文字幕並列，這樣還可同時增進英語的語感。 基於上述兩點，若要每天抄寫100個中文字，我第一個想到的是  TED  的演講影片。首先找到他有興趣的影片，在看過影片後，我把  TED  演講影片的逐字稿印出來給兒子看，他閱讀時用螢光筆標注他覺得值得抄寫的句子，然後每天抄一百個字。也許也可以中英文都抄，哈！可能我太貪心了。 好，所以現在問題縮小為：如何印出中英對照的 TED 演講逐字稿？ 如何找到有中文逐字稿的 TED 演講影片？ 我幫各位準備好這個連結： 有中文逐字稿的 TED 演講影片列表 ， 有中文字幕，且以觀看人次排列。 如何印出 中文的 TED 演講逐字稿？ 例如，我瀏覽  有中文逐字稿的 TED 演講影片列表 ，我挑選了  Colm Kelleher: What is Zeno's Dichotomy Paradox? | TED Talk  這部影片，點一下在影片下方的「Transcript」，選擇「中文繁體」，然後您就可以取得中文的 TED 演講逐字稿了！ 您還可以複製貼上到文書處理器中調整一下排版，這樣閱讀起來會更舒適。 如何印出 英文的 TED 演講逐字稿？ 同上述的方法，點一下在影片下方的「Transcript」，選擇「English」即可 如何印出 中英對照 的 TED 演講逐字稿？ 這裡是本篇網誌的重點喔！ 1. 其實你已經有中英對照的 TED 演講逐字稿了 怎麼說呢？啊既然你已經把 中文的 TED 演講逐字稿印在一張A4紙上，也把 英文的  TED 演講逐字稿印在一張A4紙上，把兩張紙擺在桌上，不就是 中英對照 了嗎？ 2. 我想要的是「逐段並列」的中英對照 逐字稿 例如，我瀏覽  有中文逐字稿的 TED 演講影片列表 我挑選了  Colm Kelleher: What is Zen
閱讀完整內容

第1804回- Google 文件如何一次看兩頁？

-
圖片
今天在使用 Google 文件跟學生共同創作一個用餐禮儀短劇的劇本時，編寫到差不多的時候，想要一次展示兩頁給學生看，但發現 Google 文件在現階段沒有這個功能。 在 Google 文件中一次只能看一頁，真不方便！有沒有可能兩頁左右並排來觀看文件呢？ 下班回家吃過晚餐、飯後散步時又想起這件事，回家後打開 Chromebook 上網查了一下資料，有找到一個方法，可以讓 Google 文件 像電腦的文書處理軟體或是PDF檢視器那樣，可以兩頁並排顯示。 我是用關鍵字  2-page view in google docs - Google 搜尋  找到這篇 2-page view in Google Docs (Example)  但我看不懂要怎麼使用這一串指令？ 不死心又繼續找，找到這篇， view 2 pages at once in google docs. ，在註解中有提到： Use this JS in your google doc browser console，我就根據這個線索，在 Chrome 瀏覽器右上方三個點那邊選「更多工具」，然後選「開發人員工具」，點一下「Console」然後把以下這一串指令複製貼上： // Use this JS in your google doc browser console // Courtesy https://coderwall.com/p/qvdxia/2-page-view-in-google-docs (function(d, t, z, s) {     s = d.createElement(t);     s.innerHTML = z + '-outer{left:0px !important;}' + z + '-outer,' + z + '-inner{width:100% !important;}.kix-page{float:left; width:48% !important;}';     d.getElementsByTagName(t)[0].parentNode.appendChild(s); })(document, 'style', '.kix-zoomdocumentplugin'); 複製貼上後
閱讀完整內容