I was reading a game post mortem from an awesome indie game developer, Daniel Linssen, about some ideas he'd had for The Sun and The Moon:

“My first idea was to make either a top down game or a platformer where you could use the mouse to flip tiles and expose what was beneath the surface. By flipping tiles you could create paths, remove spikes, block enemies, and so on.”

The game he ended up building, The Sun and The Moon, was very different from this idea. There are no tiles that flip.

I wanted to see what this dynamic would be like, the mouse creating a path ahead of a character that revealed what was underneath, on the flipside of the world. With a slight delay, there would be the opportunity to undo the path before the character arrived and seek out a better one. I'm not sure about spikes and enemies yet. But it felt like a great game mechanic to prototype. It's also conceivably within reach but I'd still need to learn a lot.

Here's the initial prototype:

This worked out pretty nicely.

Making the animation less choppy

I asked a few friends who have a good eye for this stuff for suggestions and they were wonderfully helpful!

The first suggestion I tackled (the only one I discuss in this post) was that the animation is a bit choppy. It seems to skip forward.

By the way, this is built using Clojurescript which means the animations were done in CSS. I used CSS animations, not CSS transitions. I used animations because I wanted to introduce a property and then make it go away over the course of the animation. E.g. Start at 0, go to 50, and then go back to 0. Transitions only introduce a property and make the change. That would just be starting at 0 and going to 50.

I've come up with two possibilities for the choppiness:

1. I've asked my keyframes to move 45% of the total distance travelled in 25% of the total time.

2. I've been changing layout properties in my animations. This causes the browser to spend a bunch of time calculating how the layout changes affect everything else in the layout. Too much thinking = slow.

There might be other possibilities. My computer only has 4GB of RAM and every program thinks it should have all of it so my computer is constantly running close the edge of its abilities. (Edit: I found out later that I was getting worse choppiness when my computer is over-stressed so I doubt that when it was working better it was still because of the memory. Unless memory scarcity declines in stages instead of all at once??)

As usual, instead of testing what's causing the delay, I just jumped into solving one possibility. It did seem like good form to remove the layout properties from the animation anyway.

Recreating the tile flip without layout properties

I found a nice tutorial about creating the tile flip animation, from David DeSandro. Here's the resulting tile flip:

A cool perspective

While exploring the card flip tutorial, I found that I could make the whole game field look like you were looking at it from an angle above.

I really like this but when I use it, it cancels out the perspective on the flipping tile. Notice how the tile flip looks more like an elevator door opening and closing. It's not coming up off the plane of the flat tiles.

Getting everything I want

I'm not quite sure why I can't have everything I want. It might take a bit of investigation. I think it has something to do with only being able to use the transform property once for each element. Here's the pseudo code:

HTML Structure:

<div class="box-with-perspective-view"> <!--apply perspective-->
   <div class="grid-that-contains-small-tiles"> <!--use transform: preserve 3d to keep perspective of parent-->
      <div class="tile-in-the-grid"></div> <!--use transform to rotate-->
   </div>
</div>

At this point, I wonder if I should be building small examples of perspective and transform to improve my understanding, or if I should move forward with other ideas for improving the animation. Tough choices. I'll report back either way.

Update Dec 4 2017:

I improved the performance of the prototype. You can play with it online