Graphics bug: diagonal snake body parts in board rendering

[thomasweitzel]

The snake's body parts are normally laid out in a rectangular fashion for the games displayed on the https://play.battlesnake.com website. But the display seems "messed up" in the ending screen, where body parts are rendered in a diagonal fashion. Doesn't look right.

Game where bug can be seen (ending position): https://play.battlesnake.com/game/d9494138-f8f8-4227-bf53-aae82670c0b5

Screenshot

[bvanvugt]

Oh interesting! Thanks for reporting this, I'm working on this code this month.

Here's a gif that shows the issue a bit clearer:

I think what's happening is the body part being run into is removed from the snake body render, so the body 'jumps' over that square unintentionally. This was caused by an update to the board render algorithm last month.

That body segment was removed from the polyline to support historical behaviour of showing the snake's head clearly -- but I wonder if that's still necessary. I don't think it's the end of the world if the snake head is drawn over a body segment in this case... 🤔

[bvanvugt]

Here's a proposed solution that simply draws the snake head on top of the body segment. It doesn't look great but it's certainly less awkward? Let me know what you think.

One issue with this solution is that it's unclear exactly how the snake ran into itself -- you need the context of the previous frame 🤔

[thomasweitzel]

Now that I understand the solution (and what it "fixes") that is implemented, I definitely like it more than the proposed solution - because looking at the last frame alone makes it unclear, what the situation really is. As you said: "you need the context of the previous frame".

Maybe drawing an outline for/on the head in a complementary color (bit-wise complement for RGB colors works well and is quick) would be too much effort? Or making the lower body part a little bit transparent?

If it were my choice between keeping the current situation or implementing the proposed fix, I would choose the former 😉

[bvanvugt]

Tried a few more ideas, but nothing that I love yet...

Drop Shadow

But this breaks when the snake is a darker color.

We could use a white shadow when the snake is dark, but detecting this threshold is challenging and imprecise

Lower Head Fill Brightness

brightness(0.9);

Same problem with darker snakes though.

Invert Head Fill

invert(0.5);

This works a bit better but looks weird with mid-gray colors obv.

Invert 50% and Darken 10%

invert(0.5) brightness(0.9);

This is the only effect I can think of that covers all cases, but none of them look great...

[bvanvugt]

Of all these options, I'm most tempted to ship the drop shadow one since it looks the best, even if it's bad for dark colors. Maybe there's another way to solve that 🤔

[coreyja]

I like the drop shadow too! The hiding on dark colors is unfortunate, but agreed that maybe it can be handled 'next'!

[coreyja]

Maybe there's another way to solve that 🤔

Just thinking of other options... Could we lighten the body of the snake? That way there is something to drop shadow against even in the case of a dark color? Probably won't make it super visible but maybe not invisible either lol?

[bvanvugt]

Yeah that would be interesting to try! Maybe apply a brighten filter to the snake, and a drop shadow to the head.

You'll notice I'm intentionally avoiding parsing and interpreting snake.color -- that feels like a rabbit hole of never ending complexity 😅

[bvanvugt]

@thomasweitzel I ended up deploying a variation of the shadow solution that looks like this:

Relevant code is here if you're curious:
https://github.com/BattlesnakeOfficial/board/blob/main/src/lib/components/SvgSnakeHead.svelte#L46

This change is now deployed, as of Board 1.2.22 👍