MekaMotion is a part of the MekaMon app that I developed while working at Reach Robotics. It allows the user to create custom animations for the MekaMon robot, by physically manipulating the limbs of the robot in order to create frames of the animation, similar to stop motion animations. These are then interpolated together to create fluid motion.
What is it
Mekamotion allows users to create custom animations for the MekaMon robot, share them with user users, and browse, like, comment on & remix other users animations!
- The app was built in Unity, using C#
- Bluetooth LE (BLE) is used to communicate with the MekaMon Robot
- Communication with MekaCentral, the RESTful web backend for MekaMon, created by the web team at Reach Robotics
- Offline local caching layer
What did I do
I did all the app-side development on this project, and had to work closely with the hardware & web teams at Reach Robotics, to implement new packets needed on the Robot, and for storing & implementing the social & sharing features on their custom backend.
UI graphic design & assets were done by Maff Evans
Part 1 of 2: Animation Tool
This is the main part of MekaMotion, when you create animations
Easy, simple to use interface, designed to be familiar to users that have used other animation tools, but also approached to those that have not
Edit & record frames for a single leg, or multiple legs at once
Multi-select of keyframes, allowing you to copy, paste & adjust multiple frames easily
Interactive tutorial that teaches users step by step how to create a couple of simple animations
Here's some of the interesting things I had to implement for this feature:
- Implemented using an infinite scrolling, pooled horizontal list.
- The elements for each frame are instantiated at startup, cached, and recycled as you scroll.
- This ensures consistent, smooth performance even on low end mobile devices, with no sudden frame spikes that could affect animation playback
- Step by step tutorial, taking you step by stepthrough creating two simple animations, a wave and a pushup
- Implemented using NodeCanvas, with a variety of custom nodes
- Custom tech for highlighting individual UI elements
- Created as part of the system for tutorials, the element highlighting system allows the user to easily highlight any RectTransform in unity by just selecting the RectTransform, and a style of highlight
Part 2 of 2:
UGC & Browser
This is where you can browse animations created by other users, or create & share your own animations!
Browse public animations create & shared by other users of the app
Sort animations by most popular, recently updated, commented on, etc
Like, comment & remix other peoples animations
Share your own animations with the world!
- Implemented using a similar, but more complicated infinite scrolling, pooled horizontal list.
- This version was an extension of the version I wrote for the timeline, except that data had to be requested in pages due to it coming from our web based backend, MekaCentral.
- As you scroll, more data is seamlessly requested & parsed in a background thead, then the data is filled & updated on the main thread (Due to unity's issues with the main API not being threadsafe). On a good internet connection this happens seamlessly, on a fairly slow connection the elements will read "Loading..." if they're scrolled into view before they're loaded.
- Users can like, comment, report, or remix other users animations.
- Remixing allows them to create a copy of other users animations and edit them. These can then be shared again, but maintain dual (or multiple) authorship, showing the different users that have edited them
- Reporting allows users to report dangerous / abusive content. Flagged animations will be marked with a warning, or removed entirely.
Dual synchronized storage system
- Since MekaMon is a mobile app, users may not have internet access, or may suddenly lose access. To allow seamless interaction, I designed a dual system of storage. All content is stored locally, as well as remotely on MekaCentral.
- The system will automatically use the later version and update whichever version is older.
- Data is resyncronized on next app run or login, so if the user saved the animation while offline, it will be uploaded when they next load the app with a data connection.