Currently browsing: Tips

Fixing Cocos2d-x glitches with pixel art games

While developing Hop Raider we found a rare glitch in floor’s tiles: sometimes they had an additional semi-transparent border line which was not supposed to be there. We discovered that some sprites were taking a bigger bounding box than they were supposed to, so when a sprite was drawn an additional line taken from adjacent sprites in the spritesheet was also drawn.

If you look carefully (or not so carefully) to the rock base floor in Hop Raider 1.2.1 or older you can see this glitch. It happens in lava tiles too. And this glitch is iOS/Android-independent. This usually happens in rock base floor, lava and sometimes in right-side dirt floors.

As it was somehow random (and actually it didn’t impact in gameplay and didn’t break overall game experience) we didn’t prioritise fixing this glitch but today I have been able to fix it and wanted to share both, the reason of and the solution to the problem.

We were working on a 1080×1920 px canvas and scaling to each device size on runtime. This helps us with the design and development as we can focus just on one resolution and Cocos2d-x adapts it to wherever the game is running. We wanted to show at least the entire width of the canvas as this is a vertical scroll game and out-of-bounds content will be shown as soon as you move up and camera follows you there so we are scaling in a way that the entire horizontal axis will be draw regardless screen proportion or resolution, so Cocos2d-x has to scale and crop (actually this is not necessary) the content.

Scaling is an ambiguous task. Our tiles have a 90×90 px size, so we can fit 12 tiles in horizontal axis. When the canvas is rendered in a 750×1334 px screen (iPhone 6) we are also rendering 12 tiles per row but each tile has a 62.5×62.5 px size. Note that I am operating here at pixel level, so no retina resolution could help us: we are trying to render a sprite that uses half a pixel.

Cocos2d-x (actually OpenGL) has to choose how to handle this situation as we cannot draw half a pixel. The default behaviour is to interpolate the color of that pixel taking into account neighbouring pixels, and the result is a line that is not really what we wanted. In fact we want a much simpler behaviour: ignore that half pixel!

This can be achieved setting each sprite’s texture’s wrap mode to GL_CLAMP_TO_EDGE:

Bonus: setting texture’s minification and magnification filters to GL_NEAREST will prevent Cocos2d-x from blurring pixel-art when scaling it up and down.

Fixing greyed out songs on iTunes Library

I use iTunes as my main media player and I’m user of iTunes Match since the service was available to Spanish users. It’s a service I really like but recently I’ve experienced an estrange issue: some songs appeared greyed out (even complete albums). I could download them and play them individually but when playing a playlist or album with greyed out songs, iTunes completely skipped them.

Today, thanks to iMore forums, I discovered how to fix this issue.  You have to list all your songs, this can be done following these steps:

  1. Select Music tab on iTunes’ leftmost button bar.
  2. Choose either My Music or Playlists in the middle tab bar.
  3. Open Sort popup by clicking rightmost button in the bar you’ve been interacting with.
  4. Finally, in the dropdown, choose Songs.

You’ll notice that the first column with header has no clear title but a simple check icon. You can customise all the columns but this one, which is always displayed regardless your settings. Checked songs will be playable and unchecked ones won’t. I don’t know why some of my songs where checked and others unchecked neither what really means that a song is checked or not but checking all my songs fixed the issue so, finally, to fix the greyed out issue:

  1. Select all your songs.
  2. Control-click any of them.
  3. On the displayed menu click on Check selection.