Stories about Game Development, Azure, Docker, Kubernetes and more

tl;dr: check the code here on GitHub and play the game here on a WebGL enabled browser

This is another blog post/tutorial in my Unity game development tutorials series, the first one being about a 3D game. Here, we’ll explore how to make a very special kind of game, an infinite 3D runner game. Since this post became somewhat big, it is split in two parts (check the second part here).

Chances are high that you have played an infinite 3D runner game at least once in the past years, when this genre became known and successful. These games have a 3rd person camera pointing at the main character who is running towards one direction in a 3D environment, while he tries to avoid various hazardous objects popping around that can kill him upon collision. This environment can be either a big path in which the character can change lanes like in normal traffic (such as in the game Subway Surfers) or can swipe left or right in various points to correctly follow the designated path (like in Temple Run).

Subway Surfers gameTemple Run game

This tutorial we’ve made contains two levels that feature both game mechanics. As you’ll see, these levels share some similarities but also have some notable differences. As usual, you can find the code here on GitHub and play the game here on a WebGL enabled browser.

Assets credits

Since this tutorial is a 3D game, I wouldn’t have something great to show without any 3D assets. Since I have no experience in 3D assets creation, I needed to find some premade ones. What other place to look for that than Unity’s Asset Store? The Asset Store is a wonderful place, where you can easily find low cost (even free) assets for your game. This tutorial would not be made possible if not for these great assets we used:

Game overview

Upon game launch, player can see a screen with two simple buttons. He can choose one of the two game levels, either the “rotated paths” level or the “straight paths” level.

In the “rotated paths” level, Max follows a narrow platform (“path”) till he reaches its end. At some point before this happens, the game engine randomly chooses where to place the next platform, either left, right, or straight ahead. The point where this next path will be placed is at the end of the current path. When Max reaches the current path’s end, player has to swipe in order to go left or right, or just continue on the main path. If player does not swipe in time, then Max may collide with the wall and die (the red walls, depicted in the picture below). When walking on the path, Max can pick the candy that appears in front of him to get some points to increase his score, he can (must!) jump to avoid obstacles and, of course, he can swipe left or right when the platform is about to rotate in order to follow the new path.

Rotated paths level

Important: You’ll see me refer to player’s input as ‘swipe’. As you’ll see below, this game has two input methods (either arrow keys or swipe in a touch screen). So, when we say ‘swipe’, this implies either arrow keys usage or regular swipe usage on a touch screen.

In the “straight paths” level, Max follows a wide platform and continuously moves at a straight direction. Player can swipe left or right to move sideways along imaginary lanes (like in normal traffic), while he can pick candy to increase his score. He also must avoid randomly popping obstacles either by moving on a different lane or by jumping over them. If Max falls into an obstacle, he dies and the game is over.

Straight paths level

In both cases/levels, the game can theoretically continue indefinitely. Game is over when Max falls onto a red wall (rotated paths level) or collides with an obstacle (both levels). When this happens, player can tap the screen to restart the game. Finally, as you can easily see, score is increasing as Max continues to be alive and keep running.

Today, something somewhat weird occured to me. If you build a game in Unity engine, you can easily publish it for Windows Phone, even in old and very low-end devices like the Lumia 520. This phone has a Qualcomm Snapdragon S4 MSM8227 with ISA ARMv7 supported. The Raspberry Pi 2 Model B device also has an ARM v7 processor and can be loaded with Windows 10, that support the Universal Windows Plarform, which Unity supports. You can imagine the question, can a game built with Unity be published into a Raspberry Pi 2?

The Sense HAT is a small and inexpensive board for Raspberry Pi. It sits on top of it and offers a variety of sensors and (most importantly), a 8×8 RGB LED matrix and a 5-direction joystick. More specifically, it offers access to these sensors

Gyroscope

Accelerometer

Magnetometer

Temperature

Barometric pressure

Humidity

Sense HAT on top of a Raspberry Pi 2. You can clearly see the 8×8 RGB LED matrix whereas the joystick is on the bottom right of the HAT.

Absolutely worth mentioning, this board has also gone to space in the Astro Pi mission as part of a competition in the UK! I recently purchased one and, apart from the fun I had interacting with the sensors, I really liked the LED matrix and the joystick. So, I thought, why don’t I try and create a couple of games on it?

2048 is a very cool game that can make you spend hours playing it. Goal is to ‘merge’ tiles of identical values together, in order to have their value duplicated. When player swipes in her desired direction, items are moved towards there and a new item is created. If the player reaches the number 2048, then she has won the game. In this blog post, we’ll discuss how we can create it in Unity via C# and Visual Studio 2015.

As always, you can find the source code here on GitHub and test the game here via WebGL.

Screenshot showing the game in the Unity editor. On the left we can see the score and a restart button, on the middle the main game screen and on the right a visualization of the game’s 2 dimensional array contents, for debugging purposes.

Input methods

We have implemented two methods to get user input in the game. First one is via keyboard’s arrow keys, the other is via swipe in a touch screen (or mouse). We have implemented an enumeration to get user’s input and an interface which must be implemented by each input method we want to use. Moreover, if we need to add another input method in the future, e.g. input from an XBOX controller, we could simply implement the IInputDetector interface.

Suppose that you are creating a game in which your character obtains some awards out of some predefined one, as the game goes by. Or, you’re creating software in which you want your user to select some entries/items (imagine something like a checked list box). In both cases, you could try and use these two approaches

Create or use a data structure (e.g. Dictionary<K,V>) in which you store a reference to all possible items along with the relevant Boolean value. Easy right? In order to answer the question if user has obtained item X, you just check the value of the relevant key in the dictionary.

Create or use a data structure (e.g. List<T>) in which you store references to the items the user has obtained/picked. So, you can use the List.Contains method to check for an item’s existence.

Both described methods are efficient, easy to grasp and use. However, there is another method in which you do not need to use nothing more advanced than a simple integer. We’ll be using binary system arithmetic and logic to accomplish this purpose.

Each number can be written in binary format in a sequence of 1s and 0s. For instance, 15 is binary 1111 and 2 is binary 0010. Most importantly, all numbers that are a power of two start with 1 and finish with some 0s. Check the below list

So, if you assign e.g. “valueA”to 1, “valueB” to 2, “valueC” to 4 etc., you can easily assign multiple values into an integer. How? You just add the relevant base 10 value to this integer, let’s call it storage. For instance, the integer 13 contains 3 values: a)1, b)4, c)8. In binary form, it is written as 1101. The way to check for a value’s existence is a logical bitwise AND between the storage and the respective value. In C#, we use the & for this purpose. If the result of the operation is equal to the value, then storage contains this value. Simple, right? Check the below C# code for the value 19.

Recently, I uploaded on GitHub a lot of .NET and C# samples I have created over the years, as part of my presentations and trainings. You can find them here and download them. All the samples are comprised of few lines of code that do a specific thing, relevant to the sample’s name. Some of the samples are pretty old and have been superceded by new language/framework advancements (e.g. Linq To XML vs XmlReader) but I’ve decided to keep them in case they prove useful to someone. Small description follows for each sample below:

Intro

Recently I became the happy owner of a brand new Raspberry Pi 2. In case you don’t know about it, Raspberry is a pretty powerful computing device in a form factor of a credit card. You can install Windows 10 IoT Core on the Raspberry and code against it using the Universal Windows Platform (UWP_, aka write programs for this small device using C# and XAML. So, I embarked on a new self-education journey and, after some reading, I had to pick a pre-made hands-on sample and replicate it. I picked this one, since the only extra hardware it requires is a shield (Sparkfun Weather Shield) and some cables to connect it with the Raspberry. The sample instructions on hackster.io are pretty straight forward and the source code provided for the Weather Shield + UWP integration is pretty self-explanatory. Only modification I made was to add a timer to pull humidity and temperature from the shield at a fixed time interval.

However, I wanted to take this project one step further. Connect the device to Azure IoT Hub, send data to it, pass the data via a simple Azure Stream Analytics job and store it to Azure Table Storage, expose it via a Web API web service and consume it from an ASP.NET MVC web application. Well, it’s not as difficult as it sounds! I’ll briefly describe the steps I used

Azure IoT Hub

The Azure IoT Hub (in preview, at the time of writing) is a service in which millions of devices can connect and exchange messages. The IoT Hub enables bidirectional communication to and from each device, can manage each device separately and provides a high level of security. To create a new IoT Hub, login into the new Azure management portal and create it. There is also a free tier to support app development, which you can use. If you do not have an active Azure subscription, you can easily create a trial account. Even though it requires a credit card, you will not be charged at all, provided you stay within your spending limits.

It’s been some time since I posted something about my Universal Helpers library. The biggest news is that the library has been updated to support the Universal Windows Platform, allowing its usage on projects for Windows desktops, laptops, tablets, mobile devices and more! Apart from that, I’ve updated the library to include some additional behaviors and helpful classes. Let’s take a walkthrough. All this was made possible due to the release (open source!) of XAML Behaviors for UWP.

Behaviors

DragElementBehavior

Allows you to make a UIElement draggable, either by mouse or touch. It has options for

– allow the user to rotate, via multitouch

– allow the user to scale, via multitouch. User can select the maximum scale and the minimum scale.

– you can assign a container so that the draggable element can never leave the container’s bounds

– option whether the draggable element has inertia (i.e. will continue movement by decelerating when the user drags it and lets it go)

TapStoryboardBehavior

The TapStoryboardbehavior is useful for scenarios where we want to tap an element, start a storyboard and execute a method when the storyboard finishes running. It also has an option to specify whether the method is on the code-behind file or in the VM (i.e. in the DataContext of the page, for MVVM scenarios).

FeedbackBehavior

The FeedbackBehavior allows the user to implement a feedback functionality when an element is tapped and “pointer over”, specifically a scale animation on pointer over and an opacity change when tapped. This is used to notify the end user that she has indeed tapped the specified element.

SelectAllTextOnFocusBehavior

This simple behavior makes all text on a TextBox selected when the user taps on the TextBox.

Validation Behaviors

So, this summer I had my 15’ of fame as Microsoft sponsored some articles/tutorials on the well known game development website Gamasutra. Some of my Unity development blog posts were selected, specifically

This tutorial is meant for educational purposes only to showcase how to build certain types of games. Please respect the copyrights/trademarks of others!

If you are in a hurry, you can try the game here and find the source code here.

Match three games are pretty famous these days. From the original Bejeweled to Candy Crush Saga and even Evolve: Hunters Quest, many games are based on the match 3 mechanism while giving specialized bonuses to the user. Such an example is giving a special item if she matches more than three items. If the user creates a match that includes this bonus, then the whole row or column is destroyed.

In this blog post, we’ll try to dissect in what is needed to build such a game, using Unity 3D, Visual Studio and the C# programming language. Game code was written in Visual Studio (check the free Community edition here). For debugging purposes, don’t forget to check the Visual Studio tools for Unity here.

Let’s start with a screenshot of the game running in the Unity Editor

Only external assets we’re using are some candy graphics (Public Domain, found on OpenGameArt here) and a very cool sound (found on FreeSound here) to build our game. User can drag (in an attempt to swap) one candy either horizontally or vertically. When the swap happens, the game checks for a match. As soon as a vertical or horizontal match of three (or more!) is encountered, the matched candies disappear. Remaining candies collapse, new candies get created to replace them which collapse, too (imagine gravity acting upon them). The game checks if another match of three is encountered (without any user intervention). If this happens, the matched ones disappear again, remaining candies collapse, new candies fall and so on and so forth. This goes on until no match of three exist and user intervention is required for the game to go on. If the user does not touch the screen for a while, potential matches (candies that if one of them gets swapped will form a match of three) start animating, to give the user a small hint in order to continue the game.