Camera Vibration in Canvas Based Unity Game

Contributions by Alex Ling

Currently I am maintaining a 2D Unity game (check it out here if you are interested). I was trying to implement a feature that when the user gives illegal input, the whole screen would shake (or vibrate if you would) for a while.

Here’s a GIF as a demo. When the user try to multiply of divide a variable with x, the whole screen will vibrate for 0.3 seconds.

I know what you would say, what’s the big deal here? We can simply randomly move the main camera for 0.3 seconds to achieve the effect. I don’t blame you, because that’s what I thought at first glance.

I attached a CameraShaker.cs script to the main camera. The script looks like this

using UnityEngine; public class CameraShaker : MonoBehaviour { public float shakeAmount = 0.7f; float shakeTime = 0.0f; Vector3 initialPosition; public void VibrateForTime(float time){ shakeTime = time; } void Start() { initialPosition = this.transform.position; } void Update () { if (shakeTime > 0){ this.transform.position = Random.insideUnitSphere * shakeAmount + initialPosition; shakeTime -= Time.deltaTime; } else{ shakeTime = 0.0f; this.transform.position = initialPosition; } } }

And in another script I call the VibrateForTime method:

// ... if (!OperationIsLegal(operation)) { Camera.main.GetComponent<CameraShaker>().VibrateForTime(.3f); return; } // ...

Then I ran the game and tried it… Oh wait! Why isn’t the screen shaking? I quickly found that it’s because the canvas’ renderMode property is at its default value Screen Space - Overlay



When this property is set as Screen Space - Overlay or Screen Space - Camera, the canvas is always attached to the screen (and of course the camera), and so it’s vibrating with the camera. That’s why we can’t see any vibration happen.

So the solution is simply set the renderMode property to World Space in the inspector. In this way the canvas and the camera are decoupled and so the vibration can be seen. This should work in most cases, but for me, I found that when set to World Space, the light blue operator when dragged (see the above GIF) will not be displayed. That’s because to position the blue operator at mouse position the coupling between canvas and camera(screen) is needed.

So my final solution is, set the renderMode of the canvas to World Space when the vibration start, and set it back to Screen Space - Overlay once the vibration finish. Since the vibration time is short, this should not affect the display of the light blue operator. The final version of CameraShaker.cs is shown below:

using UnityEngine; using UnityEngine.UI; public class CameraShaker : MonoBehaviour { public float shakeAmount = 0.7f; public Canvas canvas; float shakeTime = 0.0f; Vector3 initialPosition; public void VibrateForTime(float time){ shakeTime = time; canvas.renderMode = RenderMode.ScreenSpaceCamera; canvas.renderMode = RenderMode.WorldSpace; } void Start() { initialPosition = this.transform.position; } void Update () { if (shakeTime > 0){ this.transform.position = Random.insideUnitSphere * shakeAmount + initialPosition; shakeTime -= Time.deltaTime; } else{ shakeTime = 0.0f; this.transform.position = initialPosition; canvas.renderMode = RenderMode.ScreenSpaceOverlay; } } }

Let’s take a closer look at what I did in VibrateForTime:

// ... canvas.renderMode = RenderMode.ScreenSpaceCamera; canvas.renderMode = RenderMode.WorldSpace; // ...

Before setting the renderMode to WorldSpace, I set it to ScreenSpaceCamera first. That’s because by setting it to ScreenSpaceCamera, the canvas will be automatically positioned and scaled to fit in the camera. If I jump from ScreenSpaceOverlay directly to WorldSpace, the canvas will be out of the sight of the camera, and we will need to manually reposition the canvas in that case.

Algebra Game and Algebra Maze on Google Play Store!

We recently launched our first mobile apps Algebra Game and Algebra Maze on the Google Play Store.  From day one, the Algebra Game team members basically hit the ground running to put ideas into code.  Designing mathematical games in mobile apps is a challenging experiment - binding mathematical elements with the human-computer interface is an art,  making the same piece of software work on different hardware is trial and error,  walking through the entire online app submission process is new to us!  And this whole process doesn't stop there. It continues in a loop whenever new bugs/ideas surface.  Developing software is truly a humble learning experience.  We are working hard on the iOS mobile apps - so expect to see them in App Store soon.

We are also excited to have made inroads into understanding the mathematics behind Tao's Algebra Game.  Figuring out the math to compute the fewest moves for puzzle generation thereby answering some of Terence Tao's questions is actually the ultimate endgame for us :)   This can help in cleverer puzzle generation and we will flesh out that once the math is neatly ironed out.  The Algebra Maze on the Google Play Store currently has forty-five levels altogether,  but we have embarked on newer game design for the Algebra Maze and even contemplating new functionality in these mobile app games to bring out the social element: Math is social!

Oh Hooray! Another Hour of Algebra (OHAHOA)

We celebrated the first OHAHOA Day in December 2015 during the Hour of Code Week at a primary school in Hong Kong. While the children gets to learn some very basic ideas of computer, we had a play-testing trial of the Algebra Maze game for a hundred and fifty Year-3 primary school students (2nd Grade in the US school system) as they not only had an hour of computer but merrily "Oh Hooray! Another Hour of Algebra (OHAHOA)" playing our Algebra Maze game (Facebook photos)!

OHAHOA is a wickedly funny mnemonic for remembering three formulas in trigonometry. The monograph "Twenty Years Before the Blackboard" contains some remarkably funny ones of OHAHOA:

- Oh heck! another hour of algebra    (that dates back to 1972 in the Dictionary of Mnemonics)
- Some of her children are having trouble over algebra    (that dates back to pre-1968)
- Sin - oh! Cos - ah! Tan  - oh/ah!  (1928)

All these, especially the first one, express a deep sense of frustration in learning mathematics. We hope that OHAHOA Day will evolve into multi-pronged learning: Learning to use a computer to learn mathematics. We want to turn frustration into fun.