Facebook page Facebook page RSS feed RSS feed

Remember, during those first critical weeks where you are in probation, the company is in probation too. Just saying.

(As usual, a reminder that you can like the facebook page to get updates, and if you are into this kind of stuff you could also follow me on twitter)
Recuerda, durante esas primeras semánas críticas en que estás en periodo de prueba, la empresa también lo está. No, por nada.

(Recuerda que puedes seguir la página de gatillos en Facebook para recibir actualizaciones, y que si te van esas cosas también puedes seguirme en twitter)

Latest blog entries

It seems that the impossible is happening and free SSL certificates are becoming commonplace. About time! If you've hosted sites before you will know how expensive an SSL certificate is, particularly for small sites like this one where there is no revenue.

Thankfully some big companies have joined in an initiative called Let's Encrypt, which does just that: provide you with a free, automatically generated security certificate that is acccepted by all major browsers.

It's worth mentioning that Amazon is doing exactly the same thing if you host sites there, although you'll need to be using either an Elastic Load Balancer or Cloudfront CDN, both of which incur costs (see more at Amazon's Certificate Manager).

Even with all these, the process of setting it up is a bit cumbersome, so I was very happy to find that Dreamhost, the hosting server I use for this site, just enabled one click setup. It's literally one click:

Enabling SSL with just one click

That's all there is to it. Just a note: you'll have to wait a few minutes for it to take effect. If you try it immediately, it shows as using a self-signed certificate which obviously is no good. Be patient.

I did have to fix some references to non-ssl links that I had in the site (for instance, including images with an http:// prefix). For most use cases you can replace references to http:// with just // and it will work both in http and https modes. Or just use https everywhere.

I'm making a little game using Unity, a very simple word game that hopefully I'll soon publish for Android, iPhone and iPad.

Here's the thing, I'm not that good a designer but I don't have enough going on to justify hiring a proper one. Good news is, if you're in a similar situation there's hope for you.

Hey I don't have time to read this thing!

If you scroll below, that will seem like a lot of work.

But think about it this way:

  1. This is reusable. You'll only have to do it once.
  2. You can modify effects, colors, font types and see the results immediately thanks to clones
  3. Crucially, you can change the text and have a new image in seconds

Not convinced? download this Inkscape SVG file and start playing with it right away. Change the font, the text, export, enjoy!

Illustrating the problem

Unity 3D does not support bitmap fonts (not easily at least), so you will be using normal TrueType fonts.

String text = "Shuffle\nFor Points!";
Rect textRect = GuiHelper.calculateLabelRect(new Vector2(Screen.width / 2, 1 * Screen.height / 3), text);
GUI.Label (textRect, text);

In this example I'm using kenvector_future.ttf, part of this bundle and made by Kenney (and on the public domain). It's a nice font, but on a game, using only one colour it feels quite dull.

Take a look:

Text displayed using Unity's GUI.Label and plain-color font

Ugly, isn't it?

Creating a bitmap font label with Inkscape

What we will do is replace the text with a nice image with colors and effects. We will be doing it the clever way too, using clones so that everything is derived from a single original object that can be modified afterwards.

On Inkscape, create a text box at the top level part of the screen. Set a nice font for it, in my experience bold fonts look better (like Stencil Std and Bauhaus).

Use the Text tool to create a box

Now, open the Fill and Stroke settings dialog and mark both "Fill" and "Stroke paint" as unset (select the option marked as '?').

Unset the Fill and Stroke Paint colors

Now, create a background box with a color similar to what they will have as background in your game. Then create three clones of the original text.

Create three clones of the original text
Create three clones of the original text

Now, for the fun part. We are going to modify these clones with different effects, then stack them one over the other.

  1. Clone 1: Choose a color and set it to both fill and stroke. Set a big width, for instance 6. We will use this image as a background, it doesn't have to be readable.

    Clone one is a thick outline of the text

  2. Clone 2: Choose a related color and set it to both fill and stroke. Same width as Clone 1. Set transparency (also known as Opacity) to 60% and blur to 4.0. You can play with these values later.

    Clone two is a blur effect

  3. Clone 3: This will be the one actually going on top of the others so it should be readable. Just choose an appropriate color.

    Clone three is the actual text

Now, bear with me, clone all the clones!. This will make it easier to change colors later.

Select the clones and clone them. Make sure they show as a 'Clone of Clone'.

Select the three "clones of clones" and align them horizontally and verticall against the box, so that they are all in the same position, stacked over each other.

Stack each clone on top of the other.

This is already more acceptable than the original text and looks more "game-like".

Adding some effects

To make it a little prettier, we will add a couple of simple tricks to create a glow effect.

First, create an ellipse of the same size as the box. Then select the three stacked clones and duplicate them. Join the duplicated result in a group (this whole process can be done by just pressing Control + D then Control + G). Finally, select the group, then while pressing shift select the ellipse and select Object/Clip/Set.

Duplicate clones and clip them with an ellipse.

Clipped result.

Now you can play with this clipped result, applying effects to it, changing its color to white and so on.

Adding a bit of coloring and the Metallized Paint effect.

Exporting

Obviously you'll want to export your labels as images. The best way to do this is to temporarily remove or hide the background box (otherwise it would show on the image). In my case I put that box in a separate layer just to be able to do that quickly. After that, select the text and click on File / Export Bitmap.

  • Choose the right size in pixels for your game
  • You may want to export multiple versions with different sizes, for instance a 2x version for retina displays

Final result

Here's an example. The code would look like

int screenCenterX = Screen.width / 2;
int topThird = Screen.height / 3;
Rect titleRect = new Rect(screenCenterX - (shuffleTexture.width / 2), topThird - (shuffleTexture.height / 2), shuffleTexture.width, shuffleTexture.height);
GUI.DrawTexture (titleRect, shuffleTexture);

Adding a bit of coloring and the Metallized Paint effect.

In this case, shuffleTexture is a public Texture2D property of the script and can be set via Unity.

Well, well, well... I finally used the multilanguage support I added long ago. In essence it detects the language you are using and displays images or text based on that. Today I translated the latest Paul the innovator comic to test this feature.

The trick is doing this all in one site without changing URLs so that the facebooks and googles of the world can see just one site. Hope it didn't break anything, let me know if it did.

Bueno, bueno, bueno... Por fin he empezado a usar el soporte multilenguage que añadí al sitio hace un tiempo. Básicamente detecta el lenguage que utilizas y cambio el texto y las imágenes. Hoy he traducido el último Paul the innovator para probarlo (por cierto, no tengo pensado traducir el título del cómic, creo que queda más cool en inglés, pero se aceptan quejas).

La gracia es hacerlo todo de manera que feisbuk, google y compañía vean sólo una página para no tener que liarla demasiado. Espero no haber roto nada, si no, decidmelo.

Comic: Paul the innovator 38

A short post for the benefit of those struggling with this as I was: the little parser that Facebook uses when you share a link is insane, don't trust it.

That parser is what creates thumbnails for links shared in Facebook. It reads the contents of a page and allows you to choose an image. The problem is that more often than not, it can't find the images. It's got a lot of limitations: image size, image position in the document and it also has a tendency to just randomly stop working.

It's particularly bad when you start adding images as CSS backgrounds since those are completely ignored, even if you have fallbacks for crawlers like google etc. So today I once again found myself with this problem, Facebook refusing to use my images anymore. So any link to a comic would not show the actual thumbnail of the comic, which I find extremely annoying.

That meant I finally needed to cave in and use their extensions: I created a thumbnail for each post and added a few tags at the top of the page so that Facebook can find the right image.

To fix it, Create a thumbnail for your images and add the following to your HTML document (head section):

<meta property="og:image" content="http://address.of/your.image_thumb.png">
<meta property="og:title" content="Optional text">

That's it. Want to check if it works? Use the Facebook URL debug page. It will tell you whether the tags were interpreted or not.

Note: for creating a thumbnail you can use Imagemagick, for instance using "convert -crop 300x300+0+0 image.png image_thumb.png".

Older blog entries

See all blog entries