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.

Starting Up our Algebra Game

Software is eating the world. Yet, it is a marvel of how readily the younger generation eats up software like Angry Bird, Storybird, Youtube, mobile app games etc.

We have learned an enormous insight to the Terence Tao's algebra game and want to make this fun game accessible to more people especially the younger generation. In the next few months, as we launch some of the mobile app software revolving around the Algebra Game, I hope that this is one small step towards developing learning technologies that make an impact no matter how small. To make Advance Personalized Learning at scale possible, we want to make learning mathematics and computer science a cool thing for everyone. We will post pictures of our learning endeavours on our Algebra Game Facebook Page and hope to release more fun software in the future  — stay tuned!

Terence Tao's Algebra Game

Terence Tao, a famous mathematics professor at the UCLA, blogged about various issues on Gamifying High-School Mathematics in 2012. He also introduced an interesting mathematical puzzle to gamify elementary algebra, i.e., solving a single linear algebra equation with one variable, on his blog.

The idea of Tao's algebra game is to reduce a given linear algebra equation to "x = numerical_solution" through a selection of a finite number of given clues. This algebra game was created using the MIT Scratch software tool and can be played here (requires Java). Let's give an example using a screenshot of the game (taken from Tao's blog) as shown below. Initially, the puzzle is the algebra equation "5x + 3 = x + 11" and the given clues are the three possibilities "Subtract 1", "Divide by 2" and "Subtract x". A player chooses one of the possibilities by clicking on the avatar icon. Say, suppose the player chooses "Subtract 1", the algebra equation changes to "5x + 2 = x + 10" (since both sides of the original equation "5x + 3 = x + 11" get subtracted by one).

Of course, one possible "solution" to the puzzle below is the sequence of "Subtract 1" then "Subtract x" then "Divide by 2" then "Subtract 1"and then finally "Divide by 2" to yield "x = 2". A total of five moves to reach the desired state. What matters is not the final value of x (which can be eye-balled easily), rather, it is the inquisitive problem-solving process while playing.





Tao's algebra game is absolutely fun (and some of the higher levels are fairly challenging, even for an adult like me).  The benefit is obvious: children learn a real subject (e.g., elementary algebra) while playing.  Particularly pleasant is the mathematical depth behind the game. The twelve levels (from easy to hard) in Tao's Scratch mock-up version were cleverly hand-crafted. Yet, there are a few intriguing questions:  First, how to engineer the difficulty level of the game automatically?   Second, how does a computer (not human player) solve a given puzzle efficiently, i.e., with the fewest number of moves?   Third, how to engage the human players in an entertaining manner so that they keep on playing it and, unknowingly, develop a better number sense or mathematical intuition and that such an improvement can be measured?

Another practical question is the means by which these kind of educational games can be readily deployed on existing computing platforms to reach the target audience players (in this case, the target audience is presumably 8 to 12 years old primary school students, and why not adults? I like playing it too). The MIT Scratch software tool is relatively easy (even for 6 years-old) to create games and animations on desktop PC's and laptops, and accessible only through a web browser.  If this were a Facebook game, can it reach K12 students since Facebook requires users to be older than 13?  If this were a mobile app game, can it reach the target audience who may not have personal mobile devices or audience who only have desktop PC's and laptops?

Googling Arithmetic Limerick

While using Google to scour the Internet for poems on arithmetic and algebra, I came across the following three limericks. The first is similar in spirit to the Carroll's poem and the next two are similar to Diophantus puzzle in my earlier posts. 

Leigh Mercer, a noted British wordplay, wrote the following (excerpt from Word Ways, 1980, pp. 36):

A dozen, a gross, and a score 

Plus three times the square root of four 

Divided by seven 

Plus five times eleven 

Is nine squared and not a bit more.

Interestingly, Google's omnipotent search engine can "solve" this limerick automatically by entering the following slightly modified verse into the Google search bar:

(a dozen, and a gross, and a score plus three times the square root of four) divided by seven plus five times eleven



The following two are by David Pleacher, a retired mathematician:

Said a certain young lady named Gwen 
of her tally of smitten young men, 
"One less and three more 
Divided by four 
Together give one more than ten." 

How many boyfriends had she? Answer here.

Some freshmen from Trinity Hall 
Played hockey with a wonderful ball; 
They found that two times its weight, 
Plus weight squared, minus eight, 
Gave "nothing" in ounces at all. 

What was the weight of the ball? Answer here.

Diophantus Puzzle

Diophantus was a Greek mathematician whose work laid down important foundation for the development of algebra. Listed on Wikipedia is an interesting puzzle to guess the age of Diophantus:

'Here lies Diophantus,' the wonder behold.

Through art algebraic, the stone tells how old:

'God gave him his boyhood one-sixth of his life,

One twelfth more as youth while whiskers grew rife;

And then yet one-seventh ere marriage begun;

In five years there came a bouncing new son.

Alas, the dear child of master and sage

After attaining half the measure of his father's life chill fate took him. 

After consoling his fate by the science of numbers for four years, he ended his life.'

This Diophantus puzzle has a similar flavor to the Carroll's puzzle in my previous post. Here, however, a finite sequence of moves (in fact, events in the timeline) is applied to an unknown - Diophantus's age. 
How long did Diophantus live?