Implementing Forward Kinematics

This tutorial continues our quest to solve the problem of forward kinematics. After exploring a mathematical solution in The Mathematics of Forward Kinematics, we will see how to translate it into C# for Unity. The next tutorial, An Introduction to Gradient Descent, will finally show the theoretical foundations to solve inverse kinematics.

The other post in this series can be found here:

At the end of this post you can find a link to download all the assets and scenes necessary to replicate this tutorial.

Continue reading

The UGC Dilemma: post-mortem of a level editor

It is undeniable that user generated content is getting more and more relevant for games. When a player has the power to create their own content , they engage with the game in a completely new way. But if you’re a developer, you should know that creating a proper level editor can be even more time consuming that creating the game itself. Giving players the chance to create content is not enough: it has to be fun. On top of that, level editors need to be intuitive, or players won’t be able to use them properly. The best solution is a trade off between giving players the power to create whatever they want, and the need to simplify it.

500px-Puzzle_Creator_initial_viewA perfect example of this is Valve’s Puzzle Creator, which beautifully captures the essence of Portal’s gameplay. There is no space for scripting or custom events, making most of the original levels from Portal impossible to replicate. Valve has made a very clear design choice: they add constraints, but in a way that guide players’ creativity.

This post go through some of the challenged I encountered while working on the level editor for 0RBITALIS, and how I solved them. I will show in the second part how the editor actually works.

Continue reading

“Still time” – Development log #4

As promised in my previous development blog about “Still Time”, it’s time to show how levels are processed in order to achieve their polished look.

  • [Step 1: tiles map] The level is assembled from a very minimalistic tiles set. The colours used in those tiles are not the ones that will actually appear on the screen. However, they indicates how they will be processed. Blue for unreachable areas, red for room backgrounds and green for lights. There are other colours as well, but they are not shown here in these screenshots.
  • [Step 2: background] The background is made using a small image of bricks. Its look, however, is very artificial because they are constantly repeated with no changes.
  • [Step 3: background noise] A layer of Perlin noise is added to the background. This will automatically generate the illusion of a variety among bricks.
  • [Step 4: darkness] A mask of darkness is superimposed to the level. It will cover the unreachable areas.
  • [Step 5: diffusive light] In order to smooth the edges of the mask, light from the red areas is diffused using Gaussian noise. With the same principle, light sources and some other objects are intentionally made brighter.
  • [Step 6: dynamic light] In the last step of processing, dynamic lights are added. These Are obtained diffusing a very strong light from the green areas. Objects in front of light sources are subtracted from this mask. Finally, the dynamic light layer is blurred and added. This will produce nice occlusion effects when the character is standing in front of a window.
Step 1: tiles map01 Step 2: background02
Step 3: background noise03 Step 4: darkness mask04
Step 5: diffusive light05 Step 6: dynamic light06

“Still time” – Development log #3

Despite the fact that the style of “Still Time” is absolutely minimalistic, a huge effort has been put into its visual effects. In this post I will show how some frames are post-processed.

  • [Step 1: dark overlay] A dark mask is superimposed to the original image. To speed up the process, there are four separate images for each edge (top, bottom, left, right). The central part of the frame is multiplied with a grey Perlin noise mask. This will result in a nice vintage effect.
  • [Step 2: screen curvature] To better simulate the style of an old CRT monitor, the frame is curved. This effect is achieved with a displacement mask that is generated directly in the game.  This allows a more fine control over the amount of curvature and enables smooth animations and transitions.
  • [Step 3: RGB lines] Monitors use a grid of red, green and blue lights to produce an image. In some cheap CRT models, this grid can be perceived looking closely to the image. To simulate this effect, thick RGB lines are drawn on top of the image.

Step 0: original image


Step 1: black overlay


Step 2: screen curvature


Step 3: RGB lines


In the next development blog about “Still Time” I will show how in-game frames are actually processed.