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 網站將圖檔轉換為像素圖與動畫

 

 

※ 延伸閱讀:

廣告

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com 標誌

您的留言將使用 WordPress.com 帳號。 登出 /  變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 /  變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 /  變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 /  變更 )

連結到 %s