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!

Ultimately, user experience matters the most. And we expect to get as much feedback as possible to further improve our mobile app games. Check them out and let us know!  We will be glad to hear from you.  Algebra Game Team members meanwhile take a break from crunching maths and writing software to savor yummy mooncakes.

Claude Shannon Centenary and the 1-bit Maze (A-Maze-ing Dash Challenge)

The Claude Shannon Centenary 2016 in Hong Kong is a series of events held in Hong Kong to mark the life and legacy of Claude Shannon, an American mathematician and engineer, who was a visionary pioneer in the fields of computing, communications and artificial intelligence.  I chaired a seminar on quantum information theory given by the 2016 Shannon Award Lecturer Alexander Holevo on May 6th.  A Claude Shannon Centenary workshop was also organised on May 19th by Professor Raymond Yeung at the CUHK Institute of Network Coding, where I gave a talk titled "To prove or to disprove: information inequalities and sparse optimization". 

I also delivered this as an invited talk at Tsinghua University in Beijing on May 14th ("纪念Shannon诞辰一百周年学术论坛"). My talk was on the automated generation of mathematical proof to Shannon-type inequalities in information theory using linear programming and cloud computing.  Fancy that! A topic that would be impossible without Shannon's Master thesis that engendered the birth of digital logic in 1938 and his seminal work on information theory in 1948, and these two seemingly-disparate subjects converge!

A local outreach activity Computer Science Challenge was held on 21 May at the City University of Hong Kong for 180 middle school children (62 upper primary and 118 secondary school students) who formed teams to compete in three digital game challenges. The CS Challenge is part of the Claude Shannon Centenary, 2016 Hong Kong. During the CS Challenge, educational exhibits of Claude Shannon and replicates of his fun and thought-provoking robotic machines —Rubik-cube manipulators using Lego — were also on display. 

One of the CS Challenge's tasks was to program a robot to solve a maze. This was inspired by Shannon's Maze-solving Theseus Mouse, which was the world's first digitally-programmed maze-solver in 1951. Shannon's Theseus Mouse ushered in the age of machine intelligence when a computer (using telephone relays) is capable of searching for a solution by trial and error and then remembering the solution. It was also Shannon's Theseus Mouse that inspired Paul Baran, the Internet pioneer to come up with the packet switching principle and dynamic routing underlying our Internet technologies.

The maze in the CS Challenge for secondary school students was designed with Shannon's entropy — a coin flip decides one of two possible maze entrances, i.e., the robot starts from the left entrance with a Head or otherwise from the right entrance with a Tail. The left and right entrances entail a left and right corner respectively, and the two passages meet at the intersection of a corridor to the exit. Now, a fair coin flip generates one bit of information. In this way, as the coin is flipped only after the robot has been programmed, this 1-bit uncertainty prevents the participants from hard-coding the robot's movement (i.e., no dead reckoning); The robot has to hit an obstacle (i.e., the corner wall) and navigate its way by trial and error. We hope that students know about Claude Shannon and his marvellous creations as they bravely enter the Maze as Theseus did. Check out more pictures and the video below on the 1-bit maze. What a memorable and a-maze-ingly fun 2016 CS Challenge we had!

Gamification for Learning Mathematics

As seen by the popularity of Whitehouse's push for Computer Science For All, gamification has been used very successful to promote basic computational thinking knowledge. There are indeed vast potentials in how gamification can be useful for teaching and learning of K-12 foundational subjects such as mathematics.  This is simply because, digital games on a digital computer and ideas of computing (and mathematics) are intimately related. The level of public reception and enthusiasm in the Whitehouse's Computer Science for All was reminiscent of the Nimrod when one of the earliest digital games (Nim) was put into a digital computer and went on a whirlwind roadshow tour in 1951.

Recently, we gave a talk on Ed-tech on gamification for learning mathematics at a university's entrepreneurship symposium, sharing with the audience our Algebra Game software and the idea of a Mathematics Gamification Foundry. This Gamification Foundry is a cloud-based data analytics platform that can serve as a new two-way educational technology in the era of personalized learning.

With this Gamification Foundry, student players can:

• learn mathematics by playing brilliantly-crafted games.
• “see” under the hood of the games and even remix them to create game variants to enhance problem-solving skills and computational thinking.

Teachers are always in the loop. Educators can gain insights to these learning processes that can be analysed by big data analytics. Insights gained from students' online game-playing can be integrated with classroom teaching, and dedicated reports can be automatically generated for school teachers and parents. We are engineering this gamification foundry as a personalized way to learn mathematics and computer science. 

Beyond enhancing numeracy and computational thinking skills, we also hope to explore whether our Algebra Game software can be useful to children with dyscalculia – a math disability in learning or comprehending arithmetic (estimated to be one in twenty). It was suggested that computer games can diagnose and treat dyscalculia in a recent Nature article Dyscalculia: Number games, Nature 493, 150–153 (10 January 2013).

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.