Tutorials

Spring Festival AR Animation Tutorial

• 2023-01-18
• by MAKAR

• #SpringFestival
• #logic
• #AR
• #VR
• #MAKAR

Spring Festival AR Animation
As the year of the Rabbit arrives in 2023, MAKAR has produced an AR interactive experience for Spring Festival.
The process is very simple and does not require complex animation techniques.
By using PPT and MAKAR's new masking function, you can create animation effects for setting off firecrackers and pulling Spring Festival couplets.
You can even change the text on the couplets and send unique New Year's greetings through AR!
 
Download materials：https://drive.google.com/drive/folders/1njYx6aOkR5U1D6cbf5LfMikc6Gt3IZ6r?usp=sharing
 


【Creating Animation with PPT】
 

1. After importing the 2D firecracker into PPT, use the built-in "crop" function to cut it into six pieces and then reassemble it.

 

2. Go to "Animation" > "Wipe" and set the effect option to "From Bottom".

 

3. If you need to adjust the timing of the animation, you can click on the "Animation Pane" to make adjustments.

 

4. After completing the process, click on "Export" > "Create a Video" to export the animation as a video file.

 
 
 
【Creating Spring Festival Couplets with PPT】
 

1. To make the font look like calligraphy, you can download free commercial fonts from this website：http://www.ziti.net.cn/mianfeiziti/

 
After downloading, install into your computer.
For this example, we will use "KouzanBrushFont.ttf" font from "Hengshan Brush Font"."
 


 

2. Import couplet materials into PPT, use downloaded font to add the couplet, and export it as a complete PNG image.

 


 
【Enter MAKAR】
 

1. Import all the materials into MAKAR.

 

2. Drag the firecracker animation into the editor. The background of the video is the white color of the PPT and needs to be removed.

 

3. Use a dropper to pick up the white background.

 

4. Background removal is complete.

 

5. Put icon and matchstick into the editor and arrange them in the order shown in the image.

 

6. Add a text editor and put it above the firecracker.

 

7. Drag two fireworks videos into editor, adjust them to the appropriate positions, and remove their backgrounds in the same way.

 

8. Except for icon, matchstick, firecracker, and text, turn off other  objects' visibility by clicking eye icon.

 
【Set up firecracker ignition】
 

1. Drag a cube, compress it into a line, and put it under firecracker to disguise it as part of object itself.

 

2. Set a cube, matchstick, text, and firecracker animation video as individual logic objects.

 

3. Open logic editor and add controls such as visibility, click execution, movement, etc., and adjust them as shown in the figure.

 

【Set up firecracker】
 

1. Add "when...collides with..., enter..." and "run parallel do... and do..." and set up a dynamic video of two fireworks when matchstick and cube collide.

 

2. Drag one more "run parallel do... and do...". Set the video of the fireworks to run upwards, and make both the fireworks and firecrackers disappear immediately after the firecrackers have finished. To prevent the upcoming couplets from appearing too abruptly, add a "wait for...second" control.

 

【Set up couplets】
 

1. Set up controls to display Spring Festival couplets and masks, and set the mask to run downwards to create the effect of opening the couplets.

 





How to experience?
 
Pick up your phone and enter the ID, then start the experience~
 
1.Install the MAKAR APP
2.Scan QR code or search for ID:XRlover to select the author.
 

3. Click on the AR space recognition "春節AR動畫" project to launch it, and then click "Start Experience".

​
4.　After entering the project, clicking on "Share Project" allows you to obtain a project link, which you can quickly share with others.


 

Logic－Macaron AR Animation

• 2023-01-11
• by MAKAR

• #AR
• #VR
• #MAKAR
• #logic

▲ Animation：rotation、scale、moving and jumping、collides、visibility
▲ Object：coin、mashroom、Macaron(walking)、street（you can all download on MAKAR resources）


 

1. Drag the road and Macaron into the editor, and rotate Macaron.

 

 

2. Drag mushroom and coin into the editor and position them at appropriate distances.

 

 

3. Set Macaron, coin, and mushroom as logical object.

 

 

4. Open the logic editor and start editing.

 
【Macaron Moving and Jumping】
 

1. In the scene, one small square represents 10 centimeters and one big square represents 1 meter. Set the walking distance of Macaron based on this standard.

 

 

2. From "Transform" > "Transitions", drag out "move...object...meters...in...seconds", and all subsequent actions will be executed based on this block.

 
STEP（1）Walk a certain distance

Set block to "move Macaron (walking) 1 meter backward in 1 second". Although the coin is located 1.3 meters from the starting point, adjusting the distance to 1 meter and having Macaron jump forward can make it look more natural due to its larger size. You can adjust the distance according to the actual situation as needed.



 
※　The object movement direction is set to "backwards", but the object appears to be moving towards the right. This is because the object's properties is not X=0, Y=0, Z=0 after rotating. Therefore, adjustments must be made based on the actual situation.



STEP（２）Jumping
Set the block to "move Macaron(walking) 0.4 meters up in 0.08 seconds" and duplicate it to set it to move downwards. You can adjust the distance and speed as needed.
 

 


STEP（３）Continue walking a certain distance
Set the block to "move Macaron(walking) 1 meter backwards in 1 second" to allow Macaron to continue moving forward naturally after eating the coin.
 


 ※　The blocks will execute the animations in the order they are arranged.

 



【After eating the mushroom, Macaron grows in size and the mushroom disappears.】
 

1. From "Transform" > "Scale", pull out "Set scale of...to..." and set Macaron scale to 0.18.

 

 

2. From "Actions" > "Material", pull out "Set visibility of...to..." and set  mushroom's visibility to false.

 

3. From "Events" > "Collisions", drag out "When...collides with..., enter..." and place the previous two blocks inside it, and set the collision between Macaron and mushroom.

 
【The coin rotates on its own】
 

1. From "Transform" > "Rotation", drag out "turn...object...clockwise by degree...in...sec", and set "turn coin clockwise by degree360 in 1 sec".

 

 

2. From "Control" > "Loops," drag out "forever do..." and place the previous block inside.

 

 

3. The coin will keep rotating automatically.

【After eating the coin, it disappears.】
 

1. From "Actions" > "Materials", drag out "Set visibility of...to..." and set the visibility of the coin to false.

 

 

2. From "Events" > "Collisions", drag out "When... collides with..., enter..." and place the previous block inside it. Set it to detect collisions between the dragon and the coin.

 
How to experience?
Pick up your phone, enter ID, and scan the recognition image to start the experience!
 
1.　Install MAKAR APP
2.　Scan QR code search ID:XRlover





3.　Click on "Macaron AR Animation" project in the AR space recognition and click on "Start Experience".

MAKAR Mask project

• 2023-01-05
• by MAKAR

• #遮罩功能
• #AR
• #VR
• #MAKAR

Abstract:

In this lecture, there is going to demonstrate how to use Mask function in MAKAR editor v3.4 to create a project.




Introduction:

Mask is one of the new function in MAKAR editor, it’s similar to invisible cotton in Harry Potter. You will learn how to make a room invisible in this lesson.



1. Material: https://skfb.ly/6CGo8 license: CC Attribution

This is a kind of isometric scene material.


2. Download the file
We are going to download GLB file for this lesson, though the FBX file looks smaller, it need to conduct extra-process after you download it.





3. MAKAR editor

Make sure your MAKAR editor upgrade to at least version v3.4 or above.



Create a AR Target project. It’s necessary to select a category in latest editor.



Extra: How to create a fire-star recognition target?



The star number in MAKAR represents the recognitive ability. There is a tutorial for AR recognition by Lina, you can check it out. https://becutelina.com/2022/03/24/ar/
In this lesson, I’m going to use the popular AI tool, DALL-E, to generate a unique image target, and use Zalgo text transformation for complicity.




DALL．E (https://openai.com/dall-e-2/ )



Zalgo text generator (https://tw.piliapp.com/cool-text/zalgo-text/)

4. Mask
You can change the 3D model’s material into Mask.





In reality, Mask can cover the object, make it become transparent, such as invisible.

5. Create an invisible room

Import the low_poly_room and drag it in to the scene.



Adjust the Blue face to Top aspect.



As above.



Transform the cube into flat square.



Set flat square as wall of the room, change its material into【color】, RGB=(185, 55, 83).



And set the ceiling as the same.



Add another walls as Mask material to cover whole room, so that it can make the room invisible.



Mask should be a little bigger than walls, and be care for the gap between the wall and mask.



After cover the whole room except the Top aspect, select all elements and drag them into low_poly_room to group them, so that you can move all elements all together.




Select the room model, which is the group leader, move it down behind the Target
image. You will see the mask become transparent during the path, and you should not be worried. Adjust your viewpoint down to the ground(press the right button), you will find out it still invisible underground. And Well done!



6. Advance

There is a feature in MAKAR app. The camera scanned the target image, the room will show up, and if you move away from target, the room will still show up in the middle of your screen. Here is going to show you how to make the room appear only if you scanned the target.



Select the room and add action, and add Logic function on it,



Close the room’s eye to make it disappear.



Click the logic on the top banner, you can turn on logic editor, select 【Action/ set visibility of ______to _____ 】, drag the blockly to the scene, and you just solve it.   
 

Metaverse Draw Lots－Using Variable and Lists of MR Project

• 2022-11-18
• by MAKAR

• #metaverse
• #logic
• #AR
• #VR
• #MR
• #MAKAR

This tutorial includes logic of "Transform, Actions, Controls, Events, Events and List".

We will learn about:
Keep from simultaneous click,
Come up draw lots after setting visibility to false
Randomly come up lot after clicking the box

 

1. Open PowerPoint, edit image and export it.

 

2. file>save it to jpg

 

3. open Blender>import FBX>shift to Shading>change the image

 
Object's basic setting 

1. Drag 3 model to the scene.  
   Add text of "correct " and "wrong".

 

2. Drag box to the scene, and put "lottery02、lottery02(1)、lottery02(2)" to lottery01.
3. Put lots to the box and adjust the angle in needs.

 

4. Close the objects besides 3 models.

 

5. Add all of object logic.

 

6. Open the logic.

 

7. Set the object's visibility to true.

 

8. Add variable>keep from simultaneous click and set the visibility to false.

 

9. Add "If…do" logic.

　　　(1). Set "keep from simultaneous click=false"
　　　(2). Set object's visibility to true.
　　　　　Note: add text of "wrong".
　　　(3). Add variable "keep from simultaneous click=false".
　　　　　Note: you can not click the objects before step4.
　　　(4). Wait for 1 second.
　　　(5). Set object's visibility to false.
　　　　　Note: close the text of "wrong".
　　　(6). Set "keep from simultaneous click=false".
　　　　　Note: close the situation that can not click objects.
　　　(7). Copy 2 and adjust the other object's trigger situation.


 

 

10. Take the model of giraffe for example.
    1. Copy three model and set their visibility to false.
    2. Set lottery01 visibility to true.
    3. Add variables>start to draw lots >true.

Draw Lots Setting

1. Add "When…is clicked" >set the up moving animation.
2. Add "If…do">set variable of start to draw lots to true. You can repeatedly click.
3. Set click for once, add variable to false and put it on the animation's top.
4. Add variable : lot result.
5. Set lot result: operators>random number from …to…
6. Set random number from 0 to 5.
   • Set random number from 0 to 5 (01234) in logic.
   • EX1: set 0~5, it will be 01234.
   • EX2: set1~6, it will be 12345.
   • EX3: set6~9, it will be 678.
7. When setting lot’s visibility, you could know that the coming up of animation and lot is too close, so add wait for 1 sec. 

1. Add "create empty list" and add "MyList" to variable.
2. Add data>lists> add transform item to MyList.
3. Copy 3 and put them behind create empty list.

 

2. Data>list>set set "add my list to lot result" visibility to true.

 

3. Repeatedly click setting
   1. Event>when…is clicked.
   2. Set Lottery (1) visibility to false.
   3. Copy animation and change it to moving down. 
   4. Set "start to draw lots" to true.

 

4. Finish and start to experience! 

Use MAKAR to learn physics－Let's make an AR cannon！

• 2022-10-24
• by 橘子老師

• #MAKAR
• #physics
• #AR
• #VR

1.　Please download the file of cannon.zip and decompress it, import them to MAKAR.
https://drive.google.com/file/d/1HdJHrGcdfRRikf1zViDViWFNuRBjVmCz/view?usp=sharing
Click "New Project"> "Space Recognition", and enter the project name.
Click "OK".





2.　To the left side find and click "New Resources"  >  "3D Model"





3.　Find these two files and import them to the resources.




　
4.　Import image and audio to the resources, Click "New Resources"  > "image" and "New Resources"  > "Audio".





5.　All of the resources were done, drag them to the scene and start to edit objects and arrange logic.

Drag the object of the cannon to the scene and edit  position, rotate, scale. Cancel interactable and add action logic.

drag cannon to the scene.




6.　Set the position, rotate, scale on the right side. And turn off the interactable.





7.　Click "Add Action">"Logic"






It's how it looked when you were done every steps.





8.　Drag  the object of wheel  to the scene and edit position, rotate, scale. Cancel interactable and add action logic.





9.　Next on, drag the image of arror-right，arror-left，arror-up，arror-down，fire to the scene, and edit position, rotate, scale. 





10.　Cancel interactable and add action logic.





11.　Drag the video of explosion to the scene,  and edit position, rotate, scale. Cancel interactable and add action logic.






12.　Drag the video of explosion to the scene,  and edit position, rotate, scale. Cancel interactable and add action logic.





13.　Drag the music to the scene and edit its position.  Cancel interactable and add action logic.
 




14.　Add the light and drag it to the scene.







Edit the light’s position, rotate, and lighting strength.



【Group】

arror-rightt, arror-left, arror-up, arror-down, fire, drag these five objects to the "wheel" object  to make them become a group. Being a group is the most convenient way in MAKAR.  So that there would be a triangle icon on the left top.  You can open and close these objects easily.

15.　Drag Sphere to the scene, and edit the position and size. Cancel interactable and add action logic.






16.　Click two times on the Sphere to edit the name into "ball”





17.　Click logic to arrange logic.



Logic:






1.　There are different blocklies on the left. Please drag one blockly into the blank space to start.




Use variables to design every deta.
 

variables name	project	value	variables name	project	value
ax	cannon-x coordinates	0	vx	ball-x direction velocity	0
ay	cannon-y coordinates	0.24	vy	ball-y direction velocity	0.3
az	Cannon-z coordinates	0.1	vz	ball-z direction velocity	0.4
bx	ball-x coordinates	0	dvy	ball-y direction velocity effected by carron's height	0.1
by	ball-y coordinates	0.33	dvz	ball-z direction velocity effected by by carron's height	0.05
bz	ball-z coordinates	0.4	xx	canoon right left moving distance	0.1
cx	wheel-x coordinates	0	th	setting the angle of cannon's up and down	10
cy	wheel-y coordinates	0.18	bx1	ball-x coordinates  staging value
cz	wheel-z coordinates	0.14	by1	ball-y coordinates  staging value
			bz1	ball-z coordinates  staging value

【About variables】
1.　Drag the blockly of variables, and drop it to  create a variable. Arrange every value according to this sheet.

  



It is how it looked after creating variables.




2.　Drag bx blocky to the right.





3.　Click ”Data” > “1”, and drag it to the bx blockly’s right side. Edit value to 0.

  



【Editting  Variables】





〔Click the right arrow and the cannon will be moved right.〕

1.　Click and drag “Events” > "when…is clicked". Choose “arror-rijgt”for the transform item.

 


2.　Click and drag “Controls” > “If…” to the editing space.

 


3.　Click and drag “Variables” > “bx blockly” like this.





4.　Click and drag “Transform” > “move…to…in…sec” to the editing space





5.　Click and drag “Operators” > “...+...” to the editing space.





6.　Click and drag “Variables” > "set…to…", and edit its different variables.






7.　Please edit the last variables to finish moving right.



 

8.　Click the copy icon on the left up side. So that it will come up a whole blockly.


 

 
【Click the left arrow and the cannon will be moved left.】

Coped blockly can be edited for moving left.

【Click the up arrow and the cannon will be upped.】
 
When by value is bigger than 0.6, it will be stopped.
 

 
 

【Click the down arrow and the cannon will be raised.】

When by value is smaller than 0.331, it will be stopped.


 


【Trajectory of a cannon】



※　vy value is the same as the variables of vy value.
1.　vx value could be 0 because there is no speed of  x direction for cannon.
vz is the z direction, when vz is bigger speed will faster. 
Therefore every loop will go straight  regulately.
z direction is motion with constant velocity.

2. 

y direction, after the cannon is shooted, it will be affected by gravity.
Up speed will be more and more small unitil achieving the max. And starts to go down.

vy value, it is original speed of going up, so that the more vy value it goes, the far height is.
And the vy value is going small by getting higher. It will decrease by 0.05 each time it is looped.

by1, it is y direction of updating staging value,the more by value increases, the less vy value decreases.
When height is going to max, vy value will go to minus, and then the cannon will go down.

3.　Finish all of canonn design.
Finally, close the eye of “ball” and “explosion” to not show them.

4.　Click “Publish”.

Cooperative Learning in MAKAR_Portal

• 2022-10-07
• by

• #Portal
• #AR
• #VR

Abstract
　　This tutorial gives an example of connecting different projects via project link, and it can be achieved the purpose of cooperative learning.  

1. Introduction
　　In the past, it’s not available to have multiple creators to create a huge or complex task in the same project at the same time. Therefore, here is another method you can do. Separate a big project into several small parts, and link each other with “portal ”. This method may help to decrease the loading compared with only one person is responsible for making the entire project.
　　For the demonstration, there three students (A, B, C). Student A and B are individually create two VR projects. We used the templates in MAKAR editor for this tutorial(Green Island & Moon Phase).

2. Project link

　　On mobile device(iPad/iphone), after selecting the project. There is a “sharing button” on the top right corner, then you can copy the link after you tapped the sharing button. And send this link to the student who is responsible for integrating the whole project(student C).



 

Student A(Green Island)：https://is.gd/WdjCSk
Student B(Moon Phase)：https://is.gd/zj1Rg5

3. Create an integrate project
Click top left corner, “+New Project”

前瞻計畫ARVR教材開發重點

• 2021-08-17
• by MAKAR

• #前瞻計畫
• #AR教材
• #VR教材
• #AR
• #VR
• #標案
• #規格
• #數位
• #ARVR
• #軟體
• #免費

近年來因應數位化的學習，許多學校已經融入VR相關的硬體規劃，其中包含手機、平板、HTC VIVE(PC VR)、HTC Focus及EPSON AR…等，過去通常使用相關的現成AR/VR教材或內容，前瞻2.0許多單位大規模導入AR/VR硬體設備，卻苦無數位內容之開發平台，過去許多老師在製作數位教材都需要學習程式語言技術，需要花費大量的時間與成本，透過MAKAR進行數位教材的創建，並且於創建完成後，發佈到各個不同的行動載具中進行觀看。




行動載具分析表
在前瞻計畫中，相信已經有許多學校已經採購了大量的平板電腦及VR頭盔的行動載具，本圖表針對近年來許多學校已採購之硬體提出行動載具分析表，透過本分析表，能夠了解在硬體上的搭配與使用狀況。

   
 教育雲ARVR教材表
因應前瞻基礎建設實施計畫，教育部數位教材支援表（以ARVR支援條列）

3131922－5G New Technology Learning Demonstration School Series Study

• 2021-08-08
• by MAKAR

• #Research
• #AR
• #VR
• #NationalTeacherResearchCenter
• #XR
• #RealityEducation
• #Teachers
• #VRCourses
• #ARCourses
• #TeacherResearch
• #MAKAR