Previously we learned to integrate Web View on the mobile app to create an avatar and add it to the scene. If you haven’t checked out the first part of this series, we highly recommend checking it out, since the skills, knowledge and project settings from it are required here as well.
In this blog post, we’ll learn how to augment the imported avatar on a horizontal plane. We’ll also add animations and move them around by tapping at the desired location on the plane.
Let’s begin by downloading the AR packages.
Now, let’s set up the scene for AR by adding a few components.
The Ready Player Me SDK comes with an inbuilt idle animation and a walking animation. We need to download the animation to rotate the avatar either on the left side or the right side.
Note: If you are still not sure how the animation is downloaded, feel free to check out this video.
We’ll have to create and set up an Animation controller with different boolean parameters. With the help of those parameters, we’ll be able to transition between different animations states.
To place the avatar on the detected surface and move them to the touch location, we’ll have to write a few scripts. We already have a script to import the avatar from the Ready Player Me website using web view. We need to modify it a little to meet our requirements.
Create a new script named ARPlaneDetection and copy the following code. The code will make a list of all the planes ARPlaneManager has detected, filter out the 1st plane that has an area of more than 0.5 units i.e 0.5m square.
Once that plane is found,
As we are disabling the AR Plane Manager, the shape and size of the plane get fixed. The plane will not grow bigger even if you scan other areas. As AR plane scanning is not perfect, leaving the AR Plane Manager enabled will allow the found planes to grow but it will detect new planes which can overlap the existing one. When you tap at that particular location the avatar will not move, this can break the experience.
Create a new script named ARTapToPlace and copy the following code. The code will store the new touch position on the found plane and invoke an event. Later on, this new touch position will be used to move the avatar to that position using the event.
Create a new script named AvatarAnimationController and copy the following code. The code will be used to start and stop the appropriate animation when the respective methods are called. i.e start turn animation when the avatar has to turn, walk when the avatar has to move, etc.
Create a new script named MovementController and copy the following code. The code will listen to the Unity event declared in the ARTapToPlace script. When the event gets invoked, the avatar is made to rotate and move it to the new position.
Angle calculation Explained:
Case 1: Considering touch position 1
For this case, the angle will be calculated between Vector A and Vector B in a clockwise direction as that’s the shortest path. So the returned value will be positive between 0 and +180.
Case2:
For this case, the angle will be calculated between Vector A and Vector C in a clockwise direction as that’s the shortest path. So the returned value will be positive between 0 and -180.
Dot product for rotation explained
Let’s now add the components we have created to get the desired result.
With that, we have completed creating our scene. All that’s remaining now is to test it and see if it works as intended.
Ps: It will work correctly, I have already tested it and made sure all the above code is correct... haha.
To test the app,
Wait till the build gets completed and the app will automatically be launched on your phone. Now you can test it by tapping at a different location on the floor and by tapping outside the floor area. While testing, you can see that the avatar moves to the location of touch on the floor. If you touch anywhere apart from the floor the avatar will not move.
In this blog, we saw how we can use the imported Avatar for AR. So what next? Well, what we saw was just one application the Ready Player Me Android integration. There are many other ways you can make use of the avatar as well, for example, you can use it as your main character in a game.
You can try out different things in AR as well. You can have a joystick to control your Ready Player Me Avatar in AR, make it run, jump, etc.
If you've enjoyed the insights shared here, why not spread the word? Share the post with your friends and colleagues who might also find it valuable.
Your support means the world to us and helps us create more content you'll love.