Webduino模擬器「瘋」神榜:用LED 點矩陣學小綠人動畫與分鏡設計

image

光是一個 LED 點矩陣元件,在 Webduino Blockly 積木中就有提供:顯示圖形(數字、文字、圖案)、顯示動畫、跑馬燈…等功能,在這篇文章中,我們就以馬路上常見的「小綠人」為主,看看如何透過分鏡圖,了解「小綠人」的各種動作後,使用線上模擬器來完成小綠人的 LED 點矩陣動畫!


※ Webduino 官方網站:https://webduino.io/

※ Webduino 的Arduino 模擬器網址:http://simulator.webduino.io/

※ 用LED 點矩陣學小綠人動畫分鏡設計 Demo  網址 :https://simulator.webduino.io/#-KqDcXWIvysQ0zklwQLo

註:目前線上模擬器只能在 Windows / MAC 電腦上使用,無法在平板與手機上使用喔!

在 Webduino 線上模擬器中,沒有電壓、連接腳位可連接裝置的限制,所以要玩一些原本因硬體限制,而需要使用麵包板才能完成的應用,都是沒有問題的!


image


一、小綠人動畫分鏡圖

在製作動畫前,我們通常會先做好分鏡圖,將動畫的主要動作拆解成為一個一個畫面,由於 Webduino 支援的 LED 點矩陣為 8X8 = 64 顆 LED,我們把小綠人的動作依這樣的燈數拆解如下:共分成 13 張分鏡圖

image


二、模擬器「硬體」連接與硬體積木程式

VCC:5V、DIN:10、CS:9、CLK:8

image


三、加入 LED 點矩陣:顯示動畫積木

image

可以透過「建立列表」左邊的「齒輪」圖示來增加更多列表變數,增加完成後,記得再按一次「齒輪」圖示,即可將下方的列表積木收合。

image


四、繪製小綠人分鏡圖

要在 LED 點矩陣上顯示自訂的圖形時,有以下兩個方式:

1.使用以下與 LED 點矩陣相同燈數的積木,在需要顯示的方塊上按滑鼠左鍵即可。

image

image


2.若覺得上述的方式還不夠「視覺化」,可以在 LED 點矩陣相關積木上,按滑鼠右鍵 / 說明,就能用更接近實體 LED 點矩陣的顯示方式,將圖形點按出來。

image


當圖形已經點按完成後,可以直接選按上方「代碼」欄位的「複製」鈕,將「代碼」複製至剪貼簿上。

image


回到模擬器頁面後,就能將代碼加入到列表中囉!

用這樣的方式,其實可以大大節省許多程式積木的空間,對於動畫分鏡較多的內容來說,是非常有幫助的!

而且,也可以「反其道而行」,如果想知道代碼內容是什麼圖案時,只要將代碼貼入上圖的「代碼」欄位中,就能在下方的 LED 點矩陣上看到圖形囉!


01


五、測試模擬器

LED 點矩陣動畫切換時間為 100 毫秒,即 0.1 秒。

03


六、如何透過「Piskel」免費線上服務,將圖片轉為 8 X 8 像素圖畫?

如果您不是很清楚該如何將圖片「點陣化」為適合顯示在 LED 點矩陣上的圖形時,可以試著用 http://www.piskelapp.com/  這個免費線上服務喔!

image

其實 Piskel 也有提供 Windows、MAC、Linux 的軟體版本,方便沒有網路時使用喔!

image


若覺得英文界面不習慣,也可以用 Google 翻譯將網站變成中文喔!雖不見得完全正確,但應該可以增加一些熟悉度才對!

image


1.選按「Create Sprite」,開始新的設計

image

2.設定圖檔大小 Resize

image

寬、高都設為「8」後,按下「Resize」

image


接著,就針對如何在 Piskel 網站上如何自製像素圖與如何匯入圖檔轉換為像素圖兩種方式,用影片的方式跟大家說明一下囉!

1.使用 Piskel 網站自製像素圖與動畫


2.利用 Piskel 網站將圖檔轉換為像素圖與動畫



※ 延伸閱讀:

張貼留言

這個網誌中的熱門文章

原來Google雲端硬碟也能開放「匿名上傳」,做為學生作業、比賽稿件上傳就不用再傷腦筋了!(Google Apps Script應用服務指令碼)

OnlineVideoConverter 雲端影片擷取服務,讓您不只下載 youtube 影片,更能直接下載指定範圍的影片內容,幫您省下影片下載後再剪輯轉檔的時間!(也有瀏覽器擴充工具,讓使用率較高的人更方便!)

「Google 語音輸入法」、「訊飛中文語音輸入法」APP ,讓智慧型裝置也能輕鬆「離線」進行語音輸入!