Posts Tagged: 2015

Web Spinner

Status Complete
Development Period Weekend of August 22nd
Target Platform Windows
Development Plaform Game Maker Studio

Here’s a link to my entry

I made this game for Ludum Dare #33. Ludum Dare is a competition where you make a game in 48 hours base on a theme. In this case the theme was “You Are The Monster”. I know several people who are afraid of spiders so I thought it might be fun to make a game where you play as a spider, I also thought it would be interesting playing with the web mechanic. Not including the brain stroming, I ended up completing the game in 16 hours.

Initial Brainstorming

When preparing for the game I tried doing some research into how spiders built their web and also watch a video of the process the spider went through. This video illustrates the concept I was trying to portray. The web remains connected to the spider and the spider must move along the web it has already layed in order to add more lines to it’s web. I also read through the spider wikipedia article. Here’s a quote from the article which I made use of for the design of the game

About half the potential prey that hit orb webs escape. A web has to perform three functions: intercepting the prey (intersection), absorbing its momentum without breaking (stopping), and trapping the prey by entangling it or sticking to it (retention). No single design is best for all prey. –Wikipedia

That said flies wouldn’t always get caught, if they did get caught the web would sometimes break (longer strands are easier to break), and they would occasionally break free after being caught for a certain amount of time.

Programming

I enjoyed the programming for this game. To create and manage a web and had to implement a graph datastructure and in addition to that several operations had to be implemented to make the system work well. When a spider placed a line it needed to create a new vertex (intersection point) and split the edge (web strand) that the spider was currenly on. Additionally I needed to add an edge linking the new vertex and the previous vertex that the spider placed and also needed to split any edges that this new edge overlapped with and the new edge needed to also be split accordingly.

For the spider movement it was always had an edge that it was associated with and it had a value between 0 and 1 representing where it was on the edge. When the spider hit a vertex a new edge would need to be selecting based on the position of the mouse. I decided to add momentum to the spider’s movement so that it could go around corners easier. In order to select which way the spider would go at a vertex I would move the mouse in the corresponding direction. If I moved the mouse too early the spider would often turn around before it hit the vertex. The momentum fixed this issue but it meant you couldn’t quickly change the direction of the spider. In addition to selecting the new edge I had to transform the velocity. The spiders velociy was stored as how quickly it was moving on the edge and it used the 0 to 1 coordinate system that I mentioned early. Ths meant that the spiders speed would correspond to different numbers depending on which edge it was on

One of the challenges was detecting line-line intersections (for when webs overlap) as well as detecting line-circle intersections (for the flies). I ended up consulting the internet and there are some very elegant ways of doing this using vector operations so I implented them into the game and it wored pretty well.

Art

Even though it’s not my specialtly it’s fun to occasionly dabble with art. I did a lot of tracing of reference images to get the look that I wanted. I thought it would be cool to have a large impressive background with the spider operating at a much smaller scale in the foreground. Eventually I decided on a city skyline with a moon for the background and for the web to be attached to a fence in the forground. I feel like the barb wire was one of the things which emphasize the scale of the web and it helped create contrast with the background as a result.

To make the the background and traced the moon, new york city, and added some gradient and blurs to make it look correct. For the foreground I traced a pole and a piece of barb wire. The spider also started out as a trace but I made some minor modifications to make it rounder and more cartoony. Once I tested it out in the game I noticed that the spider seemed to blend in with the background. I initially tried to solve this by making the design of the spider more elaborate but just couldn’t make that look right. Then I tried adding some clouds over the background and that worked out well.

Game Design

Game design was tricky. In order to add a end state I added a hunger bar which was regenerated by eating flies. Then I needed to design it so that it would be more difficult to find flies as time went on. I wanted the web placement to be strategic. Players should be trying to fight the tradeoff between coverage and density. With high coverage you’re more likely to catch flies however you’ll probably have longer strands which will be easily broken. The safer strategy is the aim for high web density. With this strategy your web won’t break easily however if your coverage is too low you won’t catch enough flies. To make the strategy work this way and manage the difficulty curve I had to adjust several variables and as well as how they changed over time. These variables included fly spawn frequency, probability of fly getting caught, how long the flies stay stuck, web hit points and web recovery rate. I also decided to keep flies from spawning for the first 10 seconds to give the player some time to setup the initial structure of the web.

When I was doing final testing I still wasn’t sure I had the design working the way I wanted it too. When I played and concentrated I could always reach a point where I had high density and high coverage this is not ideal, but I wasn’t sure how clear the mechanics would be to players so I didn’t want to make it more difficult.

Results

Initially the game was crashing for a lot of people. I tried playing it for extended periods of time but couldn’t recreate the crash. I had a friend of mine test out the game and it took him 5 seconds to crash it, apparently all you had to do was create webs repeatedly by clicking as fast as you can. After I could recreate the error fixing it wasn’t a major issue.

After it was fixed people were mainly having issues with the controls and it didn’t seem like a lot of the deeper mechanics were clear to the players. After watching some other friends play it, it looked like the momentum was one of the reasons why the movement was difficult, but I didn’t want to remove that for fear that it will create a different issue. Also people were generally placing the mouse based on where they wanted the final position of the spider to be rather than the direction they wanted the spider to go in the short term. I’m not sure how I could fix this without adding some sort of pathfinding. This would be difficult since I’d need to search the web for the point that’s closest to the mouse and additionally I’d have to implement A* or something like that and I’m not sure how well it would run in real time. For the clarity issue I can’t think of a way to fix this without front loading a lot of information on the player.

My ranking ended up being #572 (out of the 1199 compo entries) which is ok but the category I was most proud of was innovation where I ranked #89 which is really good and I”m glad that showed through because I did work hard to make a unique game. I think I’d score it at a 73/100 because even though I’m proud of the technical achivement behind the game I don’t think the final product was fun for people to play and controls and the vagueness of the mechanics created a large barrier to entry.

Raytracing Graphics Renderer

Status Complete
Development Period September 2015
Target Platform Web
Development Language Typescript

This was a project for my Computer Graphics class. We were given a program which could render an animation using raytracing and we needed to modify the program so that it included anti-aliasing and motion blur.

I thought raytracing was interesting. It essentailly emulates what’s happens in real life by simulating how rays of light interact with the environment. It’s pretty intuitive and due to the way it’s designed, more complicated graphics phenomenon such as shadows, reflections and motion blur can be easily implemented. This makes the final image look really pretty which is why companies like Pixar use raytracing to render the graphics in their films.

The problem with raytracing is that it’s really slow. Animation companies require insane amonts of computing power to render their movies and even then it takes several minutes to render each frame. There are two reasons why it’s so slow. 1. There’s a lot of information to process. When each ray hit’s an object it casts more rays to check for reflections and other light sources. This results in several layers of recursion and creates a combinatorial explosion. 2. Due to the nature of the algorithm it can’t be computed in parrallell. This means that it has to rely on the CPU rather than the graphics card.

The other method used for graphics is called rasteriztion. It involves using a series of triangles which are colored, positioned, and oriented in such a way that it looks like a real object. It’s really fast becuase each of the verties of the triangles can be processed in parallel on the graphics card and then the triangles are quickly drawn using a rasteriztion algorithm. This techiniques allows for video games to have both good looking graphics and high frame rates. The draw back is that it’s really difficult to simulate more complicated phenomenon. It has taken many years of research to get rasterzation techniques to generate the images that are possible today.

Allow me to explain how we were required to modify the raytracing algorithm for this project. By default 1 ray is sent out for each pixel and it will determine the color of that pixel based on which objects in hits and how the lighting effects that point on the object. The problem with this is that the edges of objects end up being really jagged since each ray either hits or misses objects and at lower resolutions the edges of objects turn out looking pixelated. To fix this issue we used super sampling. Each pixel sends out several rays and then the results from those rays are averages to get the final color. This results in much smoother edges.

This other issue was motion blur. Here there are still multiple rays sent out for each pixel only the rays are cast out at different times. If the object is moving fast and it’s only overlapping with a particular pixel for a fraction of a frame then many of the rays will miss the object which results in a blurring effect.

Anyway I thought this process was pretty cool so I figured I’d share it.