Monday, December 12, 2016

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.

Wednesday, September 21, 2016

Algebra Game and Algebra Maze on Google Play Store!


We launched our very first mobile apps of Algebra Game and Algebra Maze on the Google Play Store a few weeks ago. 

From day one, the Algebra Game team members basically hit the ground running to put the ideas into code. 

Designing mobile app games is a totally interesting challenge in trying to make the same piece of software work on different hardware before walking through the entire online app submission process (which is something new for 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 the Algebra Game puzzle. (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 will aid in cleverer puzzle generation in future improved app release and we will flesh out that too once neatly ironed out.

The Algebra Maze on the Google Play Store currently has forty-five levels altogether, and these are the game levels played by sixty-two primary school students at our first Algebra Game Challenge in Spring 2016. Now that we have posted the first version out, we have embarked on newer game design for the Algebra Maze (and, naturally, to also nail down the math behind our Algebra Maze). We are also 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.



Saturday, June 4, 2016

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 who was a visionary pioneer in the fields of computing, information theory, communications and machine intelligence. I chaired a seminar on quantum information theory given by the 2016 Shannon Award Lecturer Alexander Holevo on May 6th. Also, a Claude Shannon Centenary workshop was organised on May 19th by Professor Raymond Yeung at the CUHK Institute of Network Coding, in which 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 about using linear programming and cloud computing to automatically generate a mathematical proof or counterexample to Shannon-type inequalities in information theory. Fancy that! Shannon's Master thesis that engendered the birth of digital logic computing in 1938 and his seminal work on information theory in 1948, and these two seemingly-disparate subjects converge!



Next, 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. We also had educational exhibits of Claude Shannon and replicas of some of his fun and thought-provoking robotic machines —Rubik-cube manipulators using Lego —on display. 



One of the CS Challenge's tasks was to program a robot to solve a maze and in the process to let the younger generation know more about Claude Shannon (recall that Shannon's Theseus mouse was the very first digitally-programmed maze-solver). The maze 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 informationIn 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. 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!



Saturday, April 9, 2016

Algebra Game Challenge





The inaugural Computer Science (CS) Challenge in Hong Kong will be held on 21 May 2016. The CS Challenge is a one-day contest jointly organized by the Computer Science Department of the City University of Hong Kong, the Hong Kong Digital Game-based Learning Association and Ming Pao Education, and is open to all upper primary and secondary school students in Hong Kong. Three CS-related themes have been designed to challenge the young students to a battle of wits at the Amphitheater of the City University of Hong Kong.

We are very excited to have the Algebra Game Challenge being one of the three CS Challenges. The Algebra Game Challenge will feature the Algebra Game and Algebra Maze with some of their new puzzle levels. The other two challenges are digital games - one a computer game to move animals across hurdles via abstract thinking skills required in computer coding and the other to program a cute robot to solve a physical maze.

The CS Challenge also plays a dual role as part of the Claude Shannon Centenary, 2016 Hong Kong, whose purpose is to mark the life and ideas of Claude Shannon, an American mathematician and engineer, who was a visionary pioneer in the fields of computing, information theory, communications and machine intelligence. Among his many genius creation is Shannon's Maze-solving Theseus Mouse in 1951. This machine 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.

During the CS Challenge, educational exhibits of Claude Shannon and replicates of his fun and thought-provoking robotic machines will be on display. We hope the younger students get to know more about Claude Shannon and his marvellous creations as they bravely enter the Maze as Theseus did.

Saturday, February 20, 2016

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 an entrepreneurship symposium at the City University of Hong Kong (see Facebook photos). We had the pleasure to share with the audience our Algebra Game gamification software and our idea of a Gamification Foundry. This Gamification Foundry is essentially a data analytics platform driven by cloud computing that can serve as a new two-way educational technology in the era of personalized learning.

With this Gamification Foundry, children players can:
  • learn elementary mathematics by playing brilliantly-crafted games.
  • “see” the source-code and remix them to create game variants to enhance their computational thinking skills.
Teachers are always in the loop. Educators can gain insights to these learning processes that can be analysed by big data analytics. Children’s online game-playing learning behavior can be integrated into offline classroom teaching under the supervision of their teachers. We are engineering this gamification foundry as a way to personalize the learning of mathematics and even 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).

Saturday, January 2, 2016

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.