“OK, so which levels does this occur on?”
“1,2, and 4.”
“And this only happens on mobile?”
“Yes, but only some mobile devices”
We spent a number of hours wondering about the issues, trying every move possible in this maze in a vain attempt to see if we could break the collision detection. Since we had the client’s screenshots, I took a look at them and found that the some of the colors were off very slightly. Because we were doing collision detection against a single hex color, it became clear what the problem was, but not what was causing the problem. The colors were changing for some of the levels, allowing the pawn to blast through them like Kool-Aid Man.
After looking at the colors of the walls in the screenshots given to us by the client, it looked like the color values were being “rounded” somehow. A color like #fdfefc would end up being something like #fcfffc. Because this only occurred on mobile for our clients, we guessed that it was the mobile phone provider of their country being guilty of these changes. It could be some sort of compression used to reduce bandwidth in their country.
That was never proven, but by changing the colors to the “rounded” values of the screenshots, we were able to fix the collision detection issue.
Sometimes bug hunting can take a large number of hours, but this time can be mitigated by asking the right questions;
- What happened, and what should have happened?
- In what environment did this happen? (OS, network, browser and version)
- Can this issue be replicated? What are the steps?
- How often does this issue occur? (Always, usually, sometimes)
In the time that we spent trying to debug this issue, we spent too much time assuming that our mobile phones would accurately behave the same way as the mobile phones of our client. We found that this was not the case, and only made progress once the client provided screenshots.