Monday, April 7, 2014

Swipe Game - Level Creation Tool

Creating a Line Using Triangles

My Level Creation Tool

Sometimes it's better to start over

Originally I had a tool that just intelligently recorded points I drew using using my tablet. So I started out by just wanting to take these points and create a line that goes through them. However, due to geometry you can get some very weird corners if you're not careful. Those can be seen in the above video. So I opted to rewrite my level creation tool in order to know what my line will look like while I'm creating it.

Imagine a line going through the the center of the above line. The only points that matter are the end points and corner points. I call these points center points. If you place vertices evenly on either side of the center points you get the above line. It's ugly. You can remedy this by adding more center points and vertices around those center points. However, I'm running on mobile. I want as little vertices as possible. Below I'll go over how to do this and make it look right. The only downside to this is that you can get very long corners.

Calculating Vertex placement

Well this is messy now isn't it

Problem

Given the above points how do we find where to place vertices \(V_{1} \) and \(V_{2} \). i.e. How do we find the length of the hypotenuse \(H \) of the above triangle.

Finding a width

So before my Technical writing professor begins to chew me out for the above diagram let me at least explain it. If you remember trig then for our case \[\cos \theta = \frac{W}{H}\] or by rearranging the equation we get \[H = W* \sec \theta\] We can find \( \theta \) by using the dot product. Its easy to calculate the unit vectors \( \hat{A} \) and \( \hat{B} \) given \( P_{1} \), \(P_{2} \), \( P_{3} \). Note, I forgot to give \( A \) and \( B \) their hats in the picture
So then \[ 2 \phi = \arccos (\hat{A} \cdot \hat{B}) \] and \[ \theta = 180 - \phi \]
This could probably all be optimized using some quick trig magic (identities).
Note if \( \theta = 90 \) degrees then \( \sec \theta \) will fail when calculating \(H = W* \sec \theta\) . You need to make a special case for this and make \( H = W \) in case this happens.

Placing the vertices

The last part involves adding the unit vectors \( \hat{A} \) and \( \hat{B} \) to get \( \hat{C} \) (normalize the sum to get \( \hat{C} \) ). \( \hat{C} \) lies exactly between \( \hat{A} \) and \( \hat{B} \) only because they are unit vectors. From there you just move \(P_{2} \) in the direction of \( \frac{H}{2} * \hat{C} \). ie \[ V_{1} = P_{2} + \frac{H}{2} * \hat{C} \] and \[ V_{2} = P_{2} - \frac{H}{2} * \hat{C} \]

A quick comment on triangles

If my next point \( P_{4} \) where to create an angle in the opposite direction of \( \hat{C} \) then my new vertices would be moved in the opposite direction of the vertices previously laid out. This can screw up your triangles when you're creating them. Using the dot product to make sure this doesn't happen can be helpful.

Final Thoughts

This is a tool that runs on my computer so I'm not concerned about how it runs on mobile but next time I might write on how we can shrink/edit the lines quickly on mobile.

Edit: Got Latex to work. WOOO!