常常覺得把老是拉一些重複的積木方塊很繁瑣？覺得基本積木功能數量太少？想要自己學會自己做  microbit 自訂積木 嗎？這集就來教大家如何快速客製化自己的積木方塊，並且知道怎麼利用 makecode 這個開發環境測試自己寫的積木。

microbit 自訂積木 的方法有2種，一種是直接利用custom.ts新增到專案內，方便進行測試與調整積木樣式，但積木需與專案一起帶著走；另一種則是可以上傳到GITHUB 網站，即可使用makecode直接網路下載，但建立的方法就比較複雜了，Jimi哥會先在這集講第1種方法，下集會再教第2種方法。

1.microbit 自訂積木 : custom.ts

1.首先先打開makecode開發程式，開啟新專案，並點選到Javascript的標籤頁。

2.打開左邊視窗內的資源管理器(要確定切到 Javascript 的標籤頁才會出現)，並按下”+” ，確定加入custom.ts這個檔案。

3.當畫面出現custom.ts的原始碼後，點選左邊藍色視窗的pxt.json內的[儲存]。(如果是網頁版的makecode可以按F5更新)

預設自訂積木的方塊就會出現在左側。(之後如果每次有更新custom.ts內的程式碼，可直接用上述兩個技巧，會直接更新程式碼到custom積木方塊)

2.Custom Block 架構

現在開始這部分就會比較偏程式語法的內容，其實microbit 的積木方塊就是由Javascript JS語法所撰寫出來(嚴格上是Typescript)，所以一些JS基本的還是必須了解一下，像變數、邏輯判斷、迴圈寫法等，會較為方便些。那我們現在先來研究makecode的積木如何寫的吧!

1. /* …..*/程式註解：後面撰寫的文字是指程式的註解，此部分內容跟你的程式功能無關，單行註解可以用//。

2. Enum 列舉型別：在JS語法中，可將變數限制在某些範圍，並增加程式可讀性用的，以makecode預設的這段程式碼是指宣告一個名字MyEnum的變數，這個變數可以使用One或Two的內容。

3. //% (makecode特別使用)：關於這個語法就是makecode特別使用的喔!當程式碼中出現這個語法，後面就會接著一些跟積木相關的設定，如 //% block等，不懂沒關係，我們這邊等下就會著重在如何修改下面的預設積木參數。

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓    以下是重點    ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

4.//% weight=100 color=#0fbc11 icon=”” ：從//%開始的weight、color、icon就是積木的參數，因為此部分是放在Namespace的上面，所以它是決定custom 類別積木跟其他類別積木的排序(weight)、顏色(color) 、圖案(icon)。

5.Namespace xxxxxx：注意到了嗎？”xxxxxx”就是你想要的類別積木名稱，makecode預設就是custom，當然你也可以自己改，記得按存檔後，左邊積木欄顯示的custom積木就會換成你需要的名字，也請記得撰寫的功能程式碼需在namespace後所包含的大括號{}內。(備註:如果你不想用Namespce所使用的名稱，可以在//% 加上block=”xxxx”，即可指定另一個名稱)

 6./*..@para…*/：這個部分算是function的標準註解區，程式開發者可以註記程式的功能、輸入參數、輸出參數，方便後續使用者使用與確認。

7.Foo 功能積木方塊：//% block 標記為此功能函數為積木方塊，完整的Foo積木方塊區為{積木參數}+{JS功能函數}

    //% block                                

    export function foo(n: number, s: string, e: MyEnum): void {

      // Add code here

    }

而JS如何寫函數的教學，這邊就不再這裡敘述，各位朋友可以去翻翻相關書籍或查網路即可，Jimi哥這邊提醒大家就是記得function 前要寫export，後續此積木方塊才可以使用，除非你很確定這個JS function是為內部程式使用，一般使用就將export加上。

以上就是自訂積木的架構，下面再來補充makecode積木的常用參數有哪些。

3.microbit 自訂積木 常用參數

這邊來講一下如果自己想寫makecode 積木的話，常用的積木的參數是那些，這些參數都是放在 “//%” 後面，細節可以再參考官網內容 https://makecode.com/defining-blocks。

1.block : 通常用在JS 功能區塊，利用block=”xxxx”的寫法，可以指定功能積木的顯示名稱與輸入參數，這邊Jimi哥小提醒，如果你的積木是需要在特別需要輸入參數的，在block的敘述中，記得要把你設定的參數前加上%，舉個範例如下：

---

//% block= ”Input The Weather Temperature %temp_c ”

export function (temp_c :number):number{

……….

}

---

這邊的%temp_c 便是指定輸入的數字(參數)，實際的方塊樣式便會長這樣:

2.weight(權重) ：這個其實就是決定你的自訂積木與其他積木的相對位置，如果你放在namespace前面，就是決定你的自訂類別積木與其他makecode主要類別積木([輸入] 、[音效] 、燈光等)的順序。如果放在JS Function前面，就是你自製積木內部眾多功能積木的順序，這個值需填入數字，越大的數字越接近頂端。

3.color(顏色) : 可以指定積木的顏色，格式就是Html Color，分享一個Jimi哥最常用的方法就是到com 的Html Color Picker 網頁 https://www.w3schools.com/colors/colors_picker.asp，直接挑一個喜歡的顏色，側邊就會顯示該顏色的號碼，如果今天要填入紅色的話，格式就是 color = #ff0000。

4.icon(圖案)：這個參數決定類別積木旁邊的icon圖案，icon怎麼填入呢？ makecode 是參照Font Awesome的網站，網址為 https://fontawesome.com/icons?from=io ，點入設定的icon後，內部就會有icon的代碼，舉例來說，https://fontawesome.com/icons/angellist?style=brands 這個剪刀手勢，unicode代碼是f209，參數就是設定 icon=”\uf209”。

以上4個就是最常用到的積木參數，記住這4個參數，寫出一個完整的積木方塊應該就沒甚麼大問題，最後我們來設計一個簡單的數學自訂方塊範例，順便複習這集的重點。

4.microbit 自訂 數學方塊

 這節的重點Jimi哥就來帶大家修改一下Custom.ts這個程式碼，做成一個簡單數學範例：溫度攝氏轉華氏，數學公式為攝氏*1.8+32=華氏，我們來把來做成一個溫度類別的方塊，並放在側邊欄的最頂端供自己使用。

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓   custom.ts 內容  ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

/**

 * 自訂的積木

 */

//% block=”TEMP” weight=500 color=#660066 icon=”\uf2c8″

namespace custom {

    //% block=”Input the Weather Temperature %c_temp ℃”

    //% weight=100 color=#ff99ff

    export function TempChange(c_temp: number): number {

        return ((c_temp * 1.8) + 32)

    }

}

存檔後，更新後你的makecode就會有自己的自訂方塊!

OK~ 這集主要就是講講 microbit 自訂方塊的寫法，Jimi哥最後的建議就是 … 要開始動手寫之前，先了解一下 Javascript 的語法，包含指定變數、判斷式、迴圈等，在參照一下這集的內容，確認 makecode 所接受的設定，應該就沒甚麼大問題，有想要撰寫自訂方塊的朋友，如果遇到甚麼問題，也歡迎在下面留言給我~~下集就來講如何將自己寫好的自訂方塊上傳到 GitHub 供大家下載喔!