One of my favourite things about Morty the Matador is that we have such a wide variety of character skins to choose from. That comes with the need to be able to choose which skin you are going to use for a game. In comes our character selector. I'll go over what we started with, what we changed, and how we got to where we are now.
As you probably already know, Morty the Matador is implemented in the Unity3D Game Engine. With that, the character selector was initially completely implemented using UGUI (the Unity GUI system), for it's simplicity. It makes everything quick and easy to plug in and get working, but it doesn't leave much space for improvement. We used a ScrollRect with a bunch of UI Images to get the scrolling effect, but that meant that we were stuck with static sprites that had to be pre-rendered by a 3D artist. UGUI, while extremely robust, is only designed for fulfill specific needs. What often ends up happening is us re-implementing things ourselves, which is what we did for Morty. We just wanted something more flexible.
Thus, we moved to 3D world space. Instead of using UGUI's canvas space, we opted to use an orthographic camera and 3D objects in world space. World space allows for the use of 3D models, rather than just sprites, which you can transform along the Z-Axis rather than just the X and Y. Moving away from the ScrollRect also allows us for a more robust scrolling system with our own control scheme and elastic physics.
MortySpin - Create, Discover and Share GIFs on Gfycat New and Improved Character Selector
As far as my implementation goes, I used a static orthographic camera and instantiated all of the character models in front of it in a long line along the x-axis. Then I have a script that handles the physics of the swiping which just moves all of the models to the left or right. For the swiping physics, I simply record the velocity of the touch movements for the last few frames and use the average to determine the velocity the scroller should keep moving when the touch ends.
Morty Swipe - Create, Discover and Share GIFs on Gfycat Swiping through the characters
After basic controls were done, we started to work on polishing the whole selector off. We blacked out the characters that haven't yet been bought, which needed a simple unlit shader that had support for a colour. We used LeanTween animations to make the characters pop when they were centered on screen as well as to make the character snap to the center of the screen when the scroller stops between two characters. Lastly, to add a little bit of appeal to purchasing a skin, we added a smoke explosion effect so that it's all the more satisfying.
Morty Smoke - Create, Discover and Share GIFs on Gfycat Purchasing a character
Overall, I think that it turned out pretty well. We had to go through a number of iterations, over the span of a week or two, but I'm happy with what we ended up with. I know there's still room for improvement, such as adding character animations when they are selected but that's probably for another time.
I also included a few of links below about any resources that we used in our character selector:
Smoke Explosion Tutorial: https://www.youtube.com/watch?v=0IrCggoJCno
Unlit Color Shader: http://forum.unity3d.com/threads/unlit-single-color-shader.180833/
LeanTween (it's free!): https://www.assetstore.unity3d.com/en/#!/content/3595
If you guys have any ideas on how to make it better, let us know and we'll see if we can squeeze it in!
Stay tuned for more updates for Morty the Matador!