MAKAR | AR/VR/MR 教學

教學

春節AR動畫教學

春節AR動畫教學
2023兔年到來,這次MAKAR產出春節AR互動,做法非常簡單,不需要複雜的動畫技巧,使用PPT以及搭配MAKAR的新功能遮罩,就能做出放鞭炮和拉春聯的動畫效果,你可以自行更改春聯文字,用AR傳送獨一無二的的新年祝福!
 
請先下載素材:https://drive.google.com/drive/folders/1njYx6aOkR5U1D6cbf5LfMikc6Gt3IZ6r?usp=sharing
 


【利用PPT製作動畫】
 
  1. 把2D鞭炮匯入PPT後,使用內建「剪裁」功能,切割成六塊再組裝。

 
  1. 下至上設定「動畫」>「擦去」,效果選項設定「自下」

 
  1. 若需要調整動畫出現時間點,可點「動畫窗格」做調整。


 
  1. 完成後按下「匯出」>「建立視訊」,將剛剛的動畫匯出成影片檔案。

 
 
 
【利用PPT製作春聯】
 
  1. 為了讓字體看起來像書法體,可至此網站下載免費商用的字體:http://www.ziti.net.cn/mianfeiziti/
 
下載後安裝至電腦。
本次範例使用「衡山毛筆フォントKouzanBrushFont.ttf」字體。
 


 
  1. 將春聯素材匯入PPT,用剛下載的字體打上春聯祝福語,最後匯出成完整的PNG圖片。
 


 
【進入MAKAR編輯器】
 
  1. 將所有素材匯入MAKAR

 
  1. 把鞭炮動畫拉至編輯器,影片的背景為PPT的白色,需要去背。

 
  1. 用滴管吸白色背景。

 
  1. 去背完成。

 
  1. 把icon和火柴放進編輯器,依序擺放至如圖的位置。

 
  1. 新增文字編輯,放到鞭炮的上方。

 
  1. 拉兩個煙火影片至編輯器,調整到合適的位置,並用同樣方式去背。

 
  1. 除了icon、火柴、鞭炮、文字之外,其餘物件先關掉眼睛(隱藏物件)。


 
【設定點燃鞭炮】
 
  1. 拉一個cube,將它壓縮成一條線,放到鞭炮的下方偽裝成物件本身的樣子。

 
  1. 將cube、木柴、文字、鞭炮動畫影片,個別設定邏輯物件。

 
  1. 打開邏輯編輯器,將可見度、點擊執行、移動等控制項加入,依下圖做調整。


 

【設定放鞭炮】
 
  1. 加入「當…與…產生碰撞」和「平行運行」控制項,並設定當木柴和Cube碰撞時,會出現兩支煙火的動態影片。

 
  1. 再拉出一個「平行運行」控制項,設定煙火的影片向上跑,當放完鞭炮時,鞭炮和煙火隨即消失。為了不讓等等的春聯出現地太突兀,放上「暫停…秒」控制項。


 

【設定拉春聯】
 
  1. 設定出現春聯、遮罩的控制項,並將遮罩設定向下跑,製造拉開春聯的效果。

 



【設定拉春聯】
 
  1. 設定出現春聯、遮罩的控制項,並將遮罩設定向下跑,製造拉開春聯的效果。
 





如何體驗
 
拿起手機,輸入ID並掃描辨識圖就能進行體驗囉~
 
1.安裝MAKAR APP
2.掃描QR code或搜尋ID:XRlover選擇作者

 
  1. 點擊AR空間辨識「春節AR互動」專案啟動,點擊「開始體驗」。


4. 進去專案後,點擊「分享專案」還可獲得專案連結,快速分享給他人



 

邏輯編輯器應用-類馬力歐AR動畫



▲ 本次運用的動畫包括:旋轉、比例放大、移動及跳躍、碰撞、可見度
▲ 本次運用的物件包括:
金幣、蘑菇、碼卡龍(走路)、道路(MAKAR內建素材庫下載得到)


 
  1. 將道路和碼卡龍拉到編輯器中,將碼卡龍轉向。

 

 
  1. 將蘑菇和金幣拉到編輯器中,並取得適當的距離。

 

 
  1. 將碼卡龍、金幣、蘑菇設定為邏輯物件。

 

 
  1. 打開邏輯編輯器,開始編輯。



 
【碼卡龍移動與跳躍】
 
  1. 場景中,一小格子為10公分、一大格子為1公尺,依照這個基準預設碼卡龍的步行距離。

 

 
  1. 從「轉變」>「轉換」,拉出「在…秒內移動…物件…米…」,接下來的動作都是以這個積木運行。



 
STEP(1)步行一段距離

將積木設定「在1秒內移動 形狀物件碼卡龍(走路) 1米 向後」,雖然金幣從起始點算起位於1.3公尺的地方,但由於碼卡龍的身形較大,可將距離提前設定為1米後跳躍,看起來較為自然,可自行依照實際情況做微調。



 
※ 物件移動方向設定「向後」但物件卻看起來向右,因為物件的屬性在轉向後並非為X=0,Y=0,Z=0,所以必須依照實際情況做調整。 



STEP(2)跳躍
將積木設定「在0.08秒內移動 形狀物件碼卡龍(走路) 0.4米 向上」,複製第二個設定向下。距離和速度可自行做調整。
 

 


STEP(3)繼續步行一段距離
將積木設定「在1秒內移動 形狀物件碼卡龍(走路) 1米 向後」,讓碼卡龍在吃完金幣後繼續自然向前。
 


 ※ 積木會依照排列的順序,依序執行動畫。 

 



【碼卡龍吃蘑菇後,體型變大、蘑菇消失】
 
  1. 從「轉變」>「比例縮放」,拉出「設定…比例為…」,設定碼卡龍的比例為0.18。

 

 
  1. 從「動作」>「材質」,拉出「設定…可見度…」,設定蘑菇的可見度為不成立。



 
  1. 從「事件」>「碰撞」,拉出「當…與…產生碰撞,發生…」,將上兩個積木放置於內,並設定碼卡龍與蘑菇碰撞。





 
【金幣自行旋轉】
 
  1. 從「轉變」>「轉換」,拉出「在…秒內用…時針…角度…轉動…」,設定「在1秒內 用順時針 角度360°轉動 形狀物件金幣」。

 

 
  1. 從「控制」>「循環」,拉出「永遠執行…」,並將剛剛的積木放置於內。

 

 
  1. 金幣就會不斷自行旋轉。




【吃掉金幣後,金幣消失】
 
  1. 從「動作」>「材質」,拉出「設定…可見度…」,設定金幣的可見度為不成立。

 

 
  1. 從「事件」>「碰撞」,拉出「當…與…產生碰撞,發生…」,將上一個積木放置於內,設定碼卡龍與金幣碰撞。





 
如何體驗
拿起手機,輸入ID並掃描辨識圖就能進行體驗囉~
 
1. 安裝MAKAR APP
2. 掃描QR code或搜尋ID:XRlover選擇作者





3. 點擊AR空間辨識「類馬力歐AR動畫」專案啟動,點擊「開始體驗」

元宇宙籤筒-應用變數與陣列製作MR專案

本篇教學已融入MAKAR Blockly進行專案製作,其中應用積木包含:轉變、動作、控制、事件、變數與陣列等。設定變數防止同時點擊觸發物件發生,並設置可見度關閉所有物件後出現籤筒,點擊籤筒後透過陣列出現隨機整數獲得結果。
 
  1. 啟動PPT素材,編輯貼圖文件後輸出JPG

 
  1. 檔案>另存新檔>JPG圖

 
  1. 啟動Blender>匯入FBX>切換Shading介面>更換貼圖



 
設置基礎物件
  1. 擺放三隻模型(可根據需求擺設),並建立文字答對囉及答錯囉。

 
  1. 擺放籤筒位置,並將lottery02、lottery02(1)、lottery02(2)置入lottery01底下。
  2. 籤詩擺入後重疊即可,並根據需求調整角度。

 
  1. 關閉三隻模型元件以外所有場景物件眼睛

 
  1. 於所有物件上添加邏輯功能

 
  1. 開啟邏輯工具

 
  1. 設定基礎物件可見度

 
  1. 新增變數>防止同時點擊,並建立積木設定為不成立。



 
 
  1. 新建積木>假如執行
   (1). 設定假如為「防止同時點擊=不成立」
   (2). 設置物件可見度成立
     說明:設置答錯囉文字顯示
   (3). 新增變數設定「防止同時點擊=成立」
     說明:設定後在(4)停止前都無法點擊其他物件
   (4). 暫停1秒
   (5). 設置物件可見度不成立
     說明:設置答錯囉文字關閉
   (6). 設置「防止同時點擊=不成立」
     說明:關閉不能點擊他物件狀況
   (7). 完成後複製2組,調整為其他兩個物件觸發狀態。


 

 
  1. 設定長頸鹿出現籤筒與籤詩前的動作
    1. 複製設置可見度調整為不成立,共三組(長頸鹿、貓頭鷹、貓)
    2. 設定籤筒lottery01可見度成立
    3. 新增變數>開始抽籤>成立



設定抽筒功能
  1. 新建「點擊執行」積木>設定動畫
  2. 新建「假如執行」積木>放入開始抽籤=成立時。此時可以重複點擊開始抽籤效果。
  3. 設定僅能點擊一次,新建變數為不成立,並將積木置放於動畫上方。
  4. 新建變數:抽籤結果
  5. 設定抽籤結果為「運算子>從□和□之間的隨機整數」積木。
  6. 設定為「從0和5之間的隨機整數」積木。
    • 設定隨機整數為0-5(01234),在程式邏輯架構中,隨機範圍的舉例如下
    • 範例一:若需要5個範圍,設置為0~5時,則為01234。
    • 範例二:若需要5個範圍,設置為1~6時,則為12345。
    • 範例三:若需要3個範圍,設置為6~9時,則為678。
  7. 設置籤詩可見度,發現動畫與籤詩出現太相近則添加暫停1秒積木。



 
  1. 建立空陣列,變數將會自動新增「MyList」項目
  2. 資料>陣列>「新增添加□至□」
  3. 添加後>將變數放入「新增添加圖1至MyList」
  4. 由於順序設定,複製添加共三個,並放置「建立空陣列MyList」積木後方。

 
  1. 將設置可見度成立改為>資料>陣列>「□中的□物件」

 
  1. 設定重複抽籤
    1. 事件>點擊執行
    2. 設置Lottery (1)可見度不成立
    3. 複製動畫並將向上改為向下(設置回歸原位)
    4. 設置開始抽籤成立

 
  1. 完成後可以按下執行進行體驗囉!

 

MAKAR 邏輯編輯器-教學影片

Blockly概念-01基礎轉變概念



Blockly概念-02基礎轉變概念




Blockly概念-03基礎轉變概念




Blockly概念-04基礎轉變概念與平行運算概念




Blockly概念-05事件與碰撞概念




 

Blockly概念-06碰撞事件發生顏色及文字轉變




 

MAKAR Blockly線下課程




 

元宇宙籤筒-應用變數與陣列製作MR專案

基礎邏輯編輯(四):碰撞事件發生顏色及文字轉變

設定方塊碰撞後文字轉變

1. 將兩個方塊、按鍵各別設定邏輯。建議方塊更改名稱為01、02,以便操作。





2. 點擊「邏輯」>從「事件」>拉出「點擊…執行…」。



3. 欲點擊按鍵,藍色方塊會移動至綠色方塊。「轉變」>「在…秒內,形狀物件…米…」移動積木,放置積木下方,並依照圖示設定細項。






4. 從左側拉出文字功能,並修改文字內容為「請拼出完成的方塊」



5. 從事件中,拉出「當形狀物件…與形狀物件…發生碰撞」的積木,各別設定01與02。



6. 將文字設定邏輯,再從邏輯編輯器中從「動作」>拉出「設置文字物件…」積木,更改文字為「恭喜你完成了」。



7. 按下執行,點擊按鍵後,方塊會向右移動,當碰撞到綠色積木時,上頭的文字即會改變。




設定碰撞後文字顏色和方塊顏色發生改變

1. 從「動作」> 拉出「設置文字物件…的顏色為…」顏色設定轉換紅色並放在剛才的積木下方。



2. 從「動作」> 拉出「設置…的…為顏色…」,將此積木複製後皆放在下方,物件設定方塊01、02,並設定顏色轉換紅色。



3. 按下執行,點擊按鍵後,方塊會向右移動,當碰撞到綠色積木時,文字及顏色皆會改變。



 

基礎邏輯編輯(三):碰撞事件概念

1. 在畫面中拉入兩個方塊,將方塊設定不同的顏色,並將名稱做更改,粉色方塊01、藍色塊02,以利操作。預期粉色方塊去碰撞藍色方塊,並在碰撞之後,藍色方塊自行再轉一圈。







2. 將01和02設定成邏輯物件。
 




(一)先設定各個方塊會發生的事情
1. 拉出並設定「在1秒內旋轉形狀物件01,順時鐘,角度360圍繞半徑2公尺」。





2. 複製同樣的控制項,但將它設定「在1秒內旋轉形狀物件02,逆時鐘,角度360圍繞半徑2公尺」。







(二)再設定點擊觸發
1. 拉出並設定「點擊形狀物件01,執行…」,會執行「在1秒內旋轉形狀物件01,順時鐘,角度360圍繞半徑2公尺」。





(三)再設定碰撞觸發
1. 拉出並設定「當形狀物件01與形狀物件02產生碰撞,發生…」,會發生「在1秒內旋轉形狀物件02,逆時鐘,角度360圍繞半徑2公尺」。







※ 若想要重複物件碰撞的話,拉出「重複在1秒內旋轉形狀物件01,順時針,圍繞半徑2公尺」並放在點擊觸發的控制向下。


基礎邏輯編輯(二):物件移動


【移動方法一】

1. 點選球的物件後,按「新增功能」>「邏輯」,它變成邏輯物件。





2. 點選上方的「邏輯」,按左側的「轉變」>「在…內移動…米…向前」,拖曳至中央。





3. 關閉邏輯編輯器並按下執行,物件會按照剛剛所設定的邏輯編輯去執行。





4. 雖然設定「向前」但物件卻是往右,因為物件的屬性,位置和旋轉的值並非X=0,Y=0,Z=0,因此在屬性的右上方按下小方塊,物件位置的屬性就會歸零,這時候再按下執行即是向前移動。





※ 一小格是10公分、一大格是1公尺,可以在控制向設定你想要的移動距離以及速度。

5. 若將球的LOGO擺正,位置和旋轉的值就不會是X=0,Y=0,Z=0,這時候在選擇移動方向時就會有所不同,必須花時間去測試預期的方向。



【移動方法二】

1. 現在使用「在…秒內將形狀物件移至X:… Y:… Z:…」的控制項。設定LOGO的位置X=2,Y=0,Z=0,按下執行。





2. LOGO會如影片所示跑斜斜的方向。





3. 以一個方塊來解釋,當物件在世界的中心的時候,位置的座標X=0,Y=0,Z=0,當設定X=2時,方塊會跑至右側。再次按下執行後,LOGO就會在1秒內跑至方塊的位置(X=2,Y=0,Z=0)









4. 若是假設LOGO X=2,Y=5,Z=1,LOGO就會跑到空間的上面。因此基本上就是根據世界中心的座標軸(X=0,Y=0,Z=0)來調整座標,移動物件。





※  關於執行順序

1. 在邏輯編輯器中,當有兩個指令並排在一起的時候,它會先將上面的指令執行完畢後,才會再執行下面一個指令。

▲範例:「在1秒內將形狀物件移至X=2,Y=0,Z=0」下面接「在1秒內用逆時針,角度270轉動形狀物件」,按下執行後,物件就會先跑到指定位置,再做旋轉的動作。







2. 若需要控制像同時一起執行時,可拉出綠色區塊的「平行運行」,再將兩項控制項移至平行運行中,當按下執行時即可同時發生。





 

基礎邏輯編輯(一):文字轉變、顏色轉換

1. 從左側的素材庫中,將「Text」拉至中間,新增文字。





2. 因為素材本身是一般物件,所以點選物件後,按「新增功能」>「邏輯」,它變成邏輯物件。





3. 點擊上方的「邏輯」,這邊即是編排邏輯的地方,左邊有各式各樣的動作細項。





4. 在左排點選「事件」,並拉出第一個「點擊執行」的控制項,此時藍色的框框會顯示剛剛新增的文字物件「Text」。







5. 再從左排點選「動作」,並在文字的分類點選「設置…文字…」,點選之後跑出的預設文字Hello!。





6. 關掉邏輯編輯器視窗,按下執行,點選文字後即會跑出Hello!的文字。可自行更換文字。









7. 若是想要更改文字的顏色,也可在左排點選「事件」,在文字的分類點選「設置文字…的顏色為…」,並如圖所示將控制項拉至下方,和上一個並排。按下執行後顏色就會變成預設的紅色。








8. 左側的項目可針對想要做轉變、控制等,自由地做新增。若是要刪除已拉出來的控制項,將它拉到左下方的垃圾桶即可。