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!

Swipes of Fury I

Playtesting at GDC 2014

I went to GDC expo this year. There was lots of interesting emerging tech. The new Unreal Engine is going to be available with a monthly payment. I tried out the Virtuex Omni. It has a lot of potential once they work out the kinks. I could probably have a whole post on just what I saw at GDC but thats not what this blog is about! So instead here's a video of the mobile game I'm currently working on. Swipes of Fury (name pending).

Game State

The state of the game isn't too bad right now as you can see but it still requires some additional VFX and audio to really help the game feel complete. The GUI looks ok in this video but once its thrown on my Dad's Galaxy S4 with an HD screen the GUI becomes so small its basically unreadable. It has about eight total levels right now but I'm going to aim for 50+ since the level building tool I made for it is pretty easy to use.

Feedback

Feedback was overall positive. People loved swiping and getting that cool wave effect BUT the biggest issue was that the players didn't know when they fell off the track and where the start of the swipe was.

Resolving Feedback issues

In order to resolve the biggest issue stated above I've decided to throw away my awful looking arrows and write my own 2D line renderer optimized for this games use. Unity's is no good in this case for two reasons. The first is the obvious overhead in the ways its used. It requires all the points ahead of time and to remove point you need to feed it a whole new list of points. The second is in the way it deals with sharp angles. It tends to focus all the corner points in at a single point creating a steep ugly looking angle. I'll be posting a more detailed post about this later. Below are the things I'll be working on.

1. Optimized 2D line Renderer
2. FX and Audio Messenger System
3. General VFX
4. Level Design
5. Audio Design
6. Rating System
7. Get iOS to like me

Making A Game...

...Always Starts With A Cool Toy

A toy for a game

Me and a former class mate have decided to make a game to release on Google Play. So far we are on the toy building stage. This is a toy that I came up with that's just fun to play with.

But what is it?

It's just a series of water droplets reacting on a mesh. A few years ago I read this book that I think implements this paper. The original paper talks about its implementation in Cinema 4D but with today's PCs it is possible to implement it in real time as long as the mesh is small. Currently its implemented in Unity for PC but with a few tweaks I'm 98% sure it can run on mobile easily. The way it's working right now is that height values are given to the shader through the UV2 coords and used to sample a ramp texture.

Burning Ashes

Ashes! Ashes! We all fall down!

Inspiration

Typically in a high heat situation you see a lot of embers buzzing around. Sometimes if the material that is being lit is very light i.e. paper, leaves, volcanic ash, etc will take to the air before it's fully lit. I've made plenty of embers before but I wanted to try to replicate this effect in UDK. As an extra challenge I didn't want to allow myself to use alpha cutout plug.

Shader Overview

Entire Burning Particles Shader

Three Parts

I wanted to have a texture that was going to be slowly eaten away by heat. To me that meant having three parts to the texture. An unscathed portion that heat hasn't gotten to yet, a burning portion that is still hot, and finally a burned portion that has already burned off.

Burn Erosion

Burn Erosion Portion

Alpha Erosion typically makes materials transparent at different rates with less opaque parts fading out completely first. However, it still makes the entire material fade proportionally. This means that even places that haven't been burned yet would became less opaque. Not what I want.

My solution to this was using an if statement. If my [Texture Value - Opacty Value < Opacity Value] then those pixels were given an eroded (tex val - opacity val) value other wise the pixels were unchanged. It's a little confusing in the shader since i do a 1 minus operation to make both sides of my comparison increasing or decreasing at the same time. Without the one minus the if statement would always be false (Yes, this can be further cleaned up).

The rotator above is just to give some more randomness to the particles along with the standard contrast and brightness adjustments. I also added an inversion option at the end.

Colorizing

Color Mask

So that covers what pixels I decide to erode away. Some pixels will be zero i.e. fully transparent. Those values are fed into the opacity input. That leaves us with two parts left, the burning portion and unscathed portion.

I invert the output from my burn erosion to create a mask. Originally the parts that were completely opaque had a value of one but once I invert them they go to zero. This allows me to add in to those zero parts the value of my texture sample. I colorize the remainder of the mask by multiplying by my vertex color. This gives us our two remaining parts of the embers.

That other arrow you see going into a multiply is to make the burning portion flicker. It's a trick I learned from one of Bill Klidas's tutorials. It's a hack but gives you an easy way to make it appear as if the embers are flickering randomly

Flickering

Its basically adding sin and cos together then finding the abs value. Then I just threw in an add (that's set to .2) so that I could never have a value under .2. The time multiply at the end uses a dynamic parameter to change the flickering rate.

Demo Reel 2013

Demo Reel 2013

What have I been up to?

This reel has a compilation of everything I've done for about the last year that I wanted to show off. It has two different games that I worked on along with some random effects I worked on both real time and pre rendered. And in case you are wondering the music is Jelly Castle (Orchestral Mix) by MDK available free from creative commons.

Audio Wave

This is a game me and my friend Evan Li worked on for our game design class. He did all the game play programming while I worked on the effects and artwork. It's a music based game where you have to click the hexagons in rhythm to the music. Originally the mesh moved much like dropping something into water. but after some playing around it didn't really have the right look or feel. So instead I opted to use the normal information provided originally to sample a ramp texture.

Rule the Tides

This is what I worked on for my last and final semester at The Entertainment Technology Center. I had to split my time between doing game play and UI programming as well as doing effects. The VFX had to be optimized to work on Ipad so instead of using fancy shaders to do the work dynamically I prototyped most of the materials in UDK or Maya then used Maya, After Effects, and Photoshop to create flip books. I had a lot less dynamic variation this way but since most of the effects took place far away color blocking was more important than fine detail.

Maya Fluids Training Part II

 Oil Fire

Working With Textures

Picking up from where I left off in the tutorials; in this tutorial I learned some more about working with texture incandescence. Not only am I changing the texture time over time but I am also scrolling the texture in the direction of the smoke to give a little bit more life. As a side note, it bugs me that I didn't realize the smoke was hitting the fluid container until I was done rendering eight hours later.

Wispy Smoke

Emissions

The emitter for this fluid is a plane under neath the grate. I used a perlin noise texture and animated the texture time to move using an expression. The texture was then used to change how much the plane was emitting depending on it's grey scale values. The emitter's density emission value as a whole was also animated to create puffs of smoke over time. One of the challenges that I came across was having the emitter emit near the center of the plane only. I couldn't figure out why for a while until I changed the number of vertices's the plane has.

Maya Fluids Training Part I

Flamethrower

More Maya Fluids

I decided to focus some more on Maya Fluids for VFX texture generation so I picked up a tutorial from Gnomon Workshop by Wayne Hollingsworth. These tutorials can sometimes be hit or miss but this one is fantastic.

What I learned

I've used textures in fluids and just kinda went "yeah that looks right." However, this time I animated the texture so that it doesn't sit still throughout the ordeal but changes over time breaking up one of the typical VFX killers, noticeable repetition.

Another neat trick I learned is how to break up the Maya Fluids initial emission mushroom by simply animating the emitter's turbulence to be very high at the start and tone it down after a few frames.