Understanding sRBG (Part 2)

In the previous post we explained most of theory behind sRGB. We have a little bit more theory to cover and then we can see how to use these concepts in practice and why they are useful in game development with some examples with OpenGL and Unity.

We said that the transfer function for linear sRGB (sometimes referred to as simply "RGB", or "linear space") is, as the name suggests, linear, while for sRGB it is not. But what is a transfer function? Essentially, it is a simple function which returns the color intensity given a number, in other words it “maps” numbers to color intensities. If we express the intensity as a float for example , we could say the minimum intensity is 0.0 and the maximum is 1.0 (intensities from 0 to 1 are also said to be  “normalized”), and if we also express numbers in the same way they will also range from zero to one. The “number” here is what our application uses or image data stores, and the “color intensity” is what your monitor will actually display.

Usually many image formats use only one byte to store a primary color, so numbers range from 0 (0.0) to 255 (1.0).
Here's how the transfer function for linear sRGB and sRGB looks like:

The red curve is the sRGB (non-linear) function, while the blue line is linear sRGB.
On the X axis you have the numbers, on the Y axis you have the resulting color intensity.

Now let’s take a closer look at the sRGB (non-linear) function, which is approximately an exponential function with exponent 2.2:

The numbers we are using are the same, 0 to 1, however they map to different intensities. In linear sRGB, “0.5” means 0.5 intensity for example, but in sRGB it means much less, about 0.2 intensity. So (R=0.5, G=0.5, B=0.5) is middle grey in linear sRGB but is a darker color in sRGB.

If you try to visualize how the numbers from 0 to 1 map into that curve adding for ex. 0.1 between samples, you will notice that darker intensities are quite near each other, but as the color intensity gets lighter, they are more distant. These means sRGB has more precision on dark tones than light ones, while in linear sRGB the precision is the same for all intensities.
If we had infinite numbers, precision wouldn’t matter, because you would be able to express every color intensity in either sRGB or linear sRGB. However colors are usually stored in a limited amount of bytes, so precision does matter.

As we said in the previous post, all modern monitors expect the image in sRGB format. So if you set a color byte as "122" they will interpret it as 0.2 and not as 0.5. If you store your image in linear space, you will end up with an image which is darker than you intended it to be.

If you are confused about the reason of all this, don't worry, everything will become clear by the end of this post.

The first thing you may be wondering is: Why sRGB function isn't linear? Why bother mapping numbers with a curve and get 0.5 -> 0.2, when 0.5 -> 0.5 is much easier to understand?

There are basically two reasons for this.
Let's start with the first: Do you remember those old big cathode computer monitors and televisions we used some years ago? For electrical reasons we do not cover here, their input/output curve looks like exactly the sRGB curve. Which means if you tell one of those old monitors: "Okay, here's an input of 0.5" it will display an intesity of about 0.2 instead.
So it is convenient to store images in sRGB to begin with. The number stored in the image is the input to the television/monitor without further conversions or precision loss.
So one reason is compatibilty with these monitors.

However modern monitors do not have this issue and their response is linear, so why not throw away all those old things and store everything in linear format?
Here's the second reason: The human eye happens to better discern dark tones than light tones so giving more precision to dark tones makes a lot of sense. Why waste precision in something your eye cannot discern? That's why modern monitors use sRGB and, despite being linear, "mimic" the behaviour of the old monitors by applying the same curve. The sRGB curve has usually and exponent of 2.2 (the exponent is also called "gamma") so all you have to do to transform from linear to non-linear is applying that gamma or the inverse 1/2.2 to convert back and forth. Modern monitors also allow you to customize this exponent to make images appear generally darker or brighter. (But usually this is not needed, as changing the backlight luminosity is more appropriate in most cases)

Okay that's all for theory! In the next post we will get our hands dirty and write some code in OpenGL and Unity.

Stay tuned!


Understanding sRGB

Back in school, you were probably told that you can obtain every possible color by mixing only three "primary" ones, like red, green and blue.
Here's the shocking truth: actually, this is not possible. You can't obtain all visible colors by mixing only three colors ( or four, or more for what matters ).
It is true, however, that red, green an blue mixed together capture all visible “chromes” you can see. That is, any color you can name, like “yellow”, “violet”, “pink”, can be made out of those three.
However, even if you choose accurately the red, green and blue to mix, you will not be able to make a very sarurated orange, or violet,  or pink for example, despite the fact that your eye can see that color without problems, so it’s still a visible color.

Wait, what? How do computers show every possible color by emitting usually a red, blue and green light then?
In fact, they don't! Displays can only emit a pretty wide range of what you can see, but it would be a lie to say "all colors". The reason for this, is that almost every modern display adopts the sRGB color space, and they can only display colors that are in that space.
To understand what this sRGB is all about, let's start with eye and human color reception.

Wavelengths of visible light

Light is an electromagnetic wave and, as such, it propagates with a wave length, frequency and amplitude. The human eye is able to "capture" light with a wave length from approximately 390 to 700 nano-meters, which is what we perceive as "visible light". Light outside that range is not visible to our eye and gets those fancy names such as "infra-red", "ultra-violet", "micro-waves", "x-rays", etc.
This "invisible light" is used in countless occasions, from medical usage, wireless communications to warming up food in a microwave oven.

So how does the human eye "capture" the visible light we are interested in? It does so by using many "groups" of cones, each of them containing exactly three cones, which are stimulated by light in three different ways: One is particurlary sensible to high frequency light (blue), the second to middle frequency (green), and the third to low frequency (red). Aha! So our eye does use three receptors (a tristimulus) to capture light, so by using at least three colors for our monitors maybe we are on the right track.

Unfortunately, it is not as simple as that... .
Remember, I said they are “particularly” sensible to that light, not “only”. In fact, if we take a look at the response curve of each cone, we can see that actually they greatly overlap:

Sensitivity (Y axis) of each cone for each wavelenght (X axis)

What this means, is that it just doesn't exist a certain color (a certain wave length) which stimulates only one of those cones. Looking at the graph, this means finding a value for X in which only one curve is greater than zero. To make matters worse, light of a single wavelength ( also called pure monochromatic light ) does not exist in nature for physical reasons, so a ray of light will be always a mix of frequencies. (Even lasers which are close to emitting a single wavelength, cannot emit exactly one)

Tests have been conducted to represent, mathematically, all visible colors, and it has been found that they can be expressed with three mathematical coordinates, XYZ. Each of these coordinates costitutes the intensity of an “imaginary color”, a color with a wavelength that does not exist and is hypothetical. These three “imaginary colors” combined together can make any possible color, and this time for real!
As we are dealing with three quantities here, you can guess we can express them in an XYZ Cartesian cube. However only a part of this cube is made of actually visible colors.
To more conveniently visualize visible colors, these three coordinates are further transformed, and a XY graph (ignoring Z) looks like this:

Visible color gamut

The third coordinate, Z, changes the overall brightness of the colors you see in the above graph.
So, as you can see, all visible colors together form a toungue-like shape, and this is called the “color gamut”.
Interesting... but, wait a second, how can we see all visible colors in this image on our monitor to begin with, if we just said monitors cannot display all colors?
Yes, we are cheating here. The image uses only colors your display can show, but in reality part of that shape is made up of colors your monitor is unable to reproduce.
However the real usefulness of this XY representation is that it enables us to tell which part of the visible colors three chosen primary ones can reproduce. This is as simple as connecting them to form a triangle on the gamut, what’s inside the triangle is what you can reproduce.

Now finally we can take a look at how does the "sRGB" triangle looks like:

sRGB color gamut

As you can see, sRGB does a pretty good job including most of the reds but fails to reproduce colors especially towards a saturated green. You may be wondering, why not choose a primary colors which are nearer to the edges or, ideally, on the edges to include more colors? One reason for this is cost, producing phoshors for monitors which morereproduce colors near edges is expensive. The other reason lies on the fact that we have a limited number of bits to express colors, so a wider gamut doesn't necessarily mean a better appearence since the bigger the gamut, more "spread out" reproducible colors will be.
sRGB is a very good compromise of cost and appearance, and thus is widely used. There are however other color spaces such as "AdobeRGB" which have a wider gamut, meant especially for photography and printing. There are even color spaces which have four primary colors instead of three to form a quadrilateral, but most often the benefits don't out weight costs.

Now that we understood what colors are inside the sRGB color space and which primary colors are chosen as R, G, and B, we need a way to identify the intensities of each of those using numbers, so that we can store them in a computer. If we call "0" the minimum intensity and "1" the maximum intensity, and the other intensities are in between, the most straightforward way is to express that as-it-is in a number from 0.0 to 1.0. *
This is what is often called "linear sRGB", because it is sRGB with a linear transfer function (linear conversion from numbers to light intensities). Often it is referred as simply "RGB".

However, the original transfer function for sRGB is not linear. We will see the reasons why it is not, how that impacts the image, and why you should be aware of it while using OpenGL, or even tools like Unity while making games, explained in the next post!

* In OpenGL, for example, RGB8 texture format uses one byte per primary color, which means 256 different intensities for each and a total of roughly 16 million possible combinations.


Premium Vs. Freemium

If you read the title, you probably know what I'm talking about: two of the most discussed models in the mobile gaming world.

In case you don't know what these terms mean, I'll give you a brief explaination.

Premium are games which you buy upfront and play as much as you want (This is what you're used to do if you play console games, or PC games).

Freemium are games which are free, but during gameplay you can purchase virtual currencies, power ups or other goodies which usually let you advance at a faster pace than you normally would. These are called IAPs in the app store (Which stands for In App Purchases).

A quite recent article from App Annie shows that Freemium is generally much more profitable than Premium in the App Store. This means that, strange as it may seem, free apps are making more money than paid apps. Why is that?

I think the reason behind this is that people before iPhone and Android came out weren't really used to pay to get games on their phone. On a console, instead,  it sounds pretty natural to buy a game before you can play it. And it's not suprising that the majority of today's console/PC gamers hate freemium while mobile gamers generally dislike premium: they just want to play on their phone for free and if they like the game they'll end up spending money on IAPs.

The main problem with Freemium is that it's extremely hard to balance. Gameplay may suffer for being too much crippled or slowed down in order to make space for IAPs and players can easily get annoyed and give a bad rating to the game for being too much IAP heavy, even if the developer thought the balance felt quite right.

Another model which is kind of a middle way between Premium and Freemium consists in giving the app for free and offer a "full" version or additional content as IAP. This is what games like Pangolin, RuzzleHardest game ever and many others are doing. I personally believe this kind of IAP is the fairest and I think I will take this route for my next game and see how it goes.

If you have any thoughts as player/developer feel free to leave a comment below! :)


Best App Ever Nominations

Every year the folks at 148Apps hold the Best App Ever Awards, in which users can nominate what they think are the best apps in different categories. If you enjoyed playing Tiny Stack or you feel it is deserving, please consider voting it in one or more of the following categories! :)

If you wish to vote, just click these buttons then "Nominate" (No registration is required)

Nominate Tiny Stack for Best Puzzle Game
Nominate Tiny Stack for Most Addictive Game


Tiny Stack sales data exposed!

As promised, today I'm here to talk about the sales data of Tiny Stack. If you are a developer I hope this post will help you as much as reading about other indie developer's sales has helped me!

Almost one month has passed since Tiny Stack's launch and I've tried different marketing techniques to promote my game during this period. I will talk about what actually worked and what failed miserably.

So, let's jump to the sales data:
First Month Sales

Tiny Stack has sold a total 62 copies so far and if we consider its free downloads and the lite version, the game has been played by over one thousand people worldwide.

Sales started with an initial launch spike (A), with 21 people downloading the game thanks to the launch buzz on social networks. After losing exposure on the "New releases" list, sales had quickly dropped to 2-3 units a day. Then we see a spike in (B), which i believe was generated by reviewers tweeting about the game on Twitter.

The next Spike is (C), when the game was covered on iPhone Italia, an italian tech blog. Actually, this is the only one who wrote about Tiny Stack out of the over 80 review sites I've contacted with promo codes!

Then I wanted to try a strategy which is well-known on the App Store: Free for a day. Halloween seemed like the perfect day to try this strategy out! You can see the results in (D) with obviosly 0 paid sales. I thought this strategy would have helped the game to get a larger user base and some extra publicity, but I was partially wrong.
The game did receive over 200 downloads that day, but as you can see it also didn't help sales at all! I think that the only case in which this marketing strategy is effective is when you are promoting something else inside your app (E.g. a game sequel) or when your app is IAP heavy. Mine was neither of those so it was pretty pointless in my case. Fortunately, though, I didn't get any bad review in the process.

Finally, in (E) a lite version of the game was released resulting in a new spike. Unlike the Free-for-a-day strategy, the lite version had an impact on sales so it is definitely helpful. The lite version has been downloaded almost one thousand times and roughly 1 person out of 100 decided to purchase the full version. In-App analitycs shows that an high number of players (20 out of 100) press the "full version" button to see what it is about. :)

That's all for now!

Tiny stack has grossed around 40$ so far, but fortunately the costs for the development were as low as 200$, so it is not a big loss right now and I think the game may eventually breakeven in the feature :)

The costs were so low because I took care of graphics, programming and game design completely alone, using open source tools and frameworks (Yes, it was a lot of work but it was fun!). I spent around 160$ on sounds/music and the rest on advertising. 

While these numbers are far from stellar, I think they are pretty decent for a first project. But, more importantly, knowing that my game is being played by thousands of players around the world is an enough reason for me to stay motivated and keep doing what I love: Making games!


The Tough Life of an Indie iOS Developer

Hi everyone!

A little more of one week has passed since the launch of Tiny Stack, and a lot of things have happened since then. I've also learned a lot of lessons during the process, and I'm here to share them!

Lesson no. 1: Have realistic expectations
Fortunately I had realistic expectations since I started working on my project, but this is a mistake many newbie developers do: Fooled by past success stories they think they can become instant millionares building a quality app/game for the app store. Sure, you have to build a quality app if you want to become successful but there's a 99% chance your app won't sell as you thought it would! A survey states more than half of applications submitted earn less than 500$ through their lifetime.

Lesson no. 2: Make as many apps as you can!
This is very important and technically none in the app store become successful by just building one game. If you search for the most popular iOS games you will see they weren't their developers first application! Even Rovio has failed different times before the success of Angry Birds.

Lesson no. 3: Getting noticed is hard
The biggest challenge in the AppStore is not building an app, but getting that app noticed! Especially if your'e working as indie or alone. Your game will appear in the new released lists and maybe attract the attention of a dozen of people. The day after your app will be already buried in the list by the amazing amount of new apps being submitted.

Lesson no. 4: Getting your game reviewed is hard
I've learned review sites usually review only the popular game of the moment and the games they see in the top charts, which seems reasonable since those are the apps users are most interested in.
I spent a whole day contacting review sites and all I got were a lot of robot replies, a few human replies and no review yet. I still think contacting review sites is a must for a new indie developer, but unfortunately chances they will review your game are very tiny. If you want to get reviewed easily you have to be in the top charts, which brings to the question: How do you get there?
Another lesson: Send promo codes! Some people think sending unsollicited promo codes is a bad idea and a big waste. Absolutely not! By sending promo codes you've made extremely convenient for them to give your game a quick try. So my 2 cents are: Send promo codes unless the site explicitly states they do no want one.

Lesson no. 5: You have to give something for free!
It should be obvious that marketing a free app is much easier than marketing a paid one. People love free things!
iOS apps are ridiculously cheap nowadays, yet that small price is a big barrier between you and your customers. That sounds quite crazy, but people won't spend a buck they spent for a coffee, for an iOS app which lasts a lot longer and is generally more useful. Angry birds became truly successful only after a lite version was released. Other successful games like Doodle Jump and Cut the rope provide a free version. Tiny Tower and Pocket Frogs use the freemium model which has proven to be successful too, because it's based on something (more or less) free.

That's all for now! I may share the sales data of Tiny Stack in the next few months if they are interesting enough, so stay tuned! :)

Also if you have any tidbit to share, please post a comment below!


Available now on the AppStore!

Tiny Stack is now available on the App Store, and it costs less than a cup of coffee!
If you own an iPhone/iPad/iPod and bought my game I'd love to hear comments from you!
Follows the iTunes link.

Enjoy ;)