第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 南一-康軒-翰林-國小國語 113學年上學期 更新說明： 1. 南投縣老師有 LoiLo 特典  2. 各版版本各年級獨立一個簡報檔 3. 如需列印，請將簡報另存成 PDF 即可 4. 請幫忙檢查內容是否有誤，並煩請回報給我 5.  使用說明影片-筆順練習 113上 國小國語課本生字 Qr Code 大合集 - YouTube 113上  翰林 國語 一上 生字  QR Code 雄筆順練習   Google 簡報 113上  翰林 國語 二上 生字  QR Code 雄筆順練習   Google 簡報 113上  翰林 國語 三上 生字  QR Code 雄筆順練習   Google 簡報 113上  翰林 國語 四上 生字  QR Code 雄筆順練習   Google 簡報 113上  翰林 國語 五上 生字  QR Code 雄筆順練習   Google 簡報 113上  翰林 國語 六上 生字  QR Code 雄筆順練習   Google 簡報 113上  康軒 國語 一上 生字  QR Code 雄筆順練習   Google 簡報 113上  康軒 國語 二上 生字  QR Code 雄筆順練習   Google 簡報 113上  康軒 國語 三上 生字  QR Code 雄筆順練習   Google 簡報 113上  康軒 國語 四上 生字  QR Code 雄筆順練習   Google 簡報 113上  康軒 國語 五上 生字  QR Code 雄筆順練習   Google 簡報 113上  康軒 國語 六上 生字  QR Code 雄筆順練習   Google 簡報 113上  南一 國語 首冊 注音  QR Code 雄筆順練習   Google 簡報 113上 南一 國語 一上 生字  QR Code 雄筆順練習   Google 簡報 113上  南一 國語 二上 生字  QR Code 雄筆順練習   Google 簡報 113上  南一 國語 三上 生字  QR Code 雄筆順練習   Google 簡報 113上  南一 國語 四上 生字  QR Code 雄筆順練習   Google 簡報 113上  南一 國語 五上 生字  QR Code 雄筆順練
閱讀完整內容

第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'); 複製貼上後
閱讀完整內容

第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
閱讀完整內容