Asset and Script Update: Sticky Spider Webs

I woke up this morning with a clear and direct goal to work on and implement Sticky Spider Webs into TRASHTASTIC. I chose this as my first update because i knew it would be easy to create, everything is very basic stuff in this post!

Spider Web Design

Spider Web Design

To start with i went to trusty Google and searched up some pictures of spider webs to help me. I opened up  photoshop and spread out all of the pictures i wanted to draw inspiration from around the my blank canvas. There is a large variety of ways to draw a spider web, simply put i decided to approach my design with a rough and messy attitude. The lines weren’t going to be perfect, i began by setting up guide lines around my canvas, so i could find the centre and also to create a boundary so that my art doesn’t reach the edge and give an ugly “chopped-off” effect in-game. I opened in the centre with a hexagon shape and from there drew lines outwards towards the edge of the canvas, then i drew around the hexagon one segment at time. The spider web formed very slowly at first and wasn’t quite looking organic. But as i drew further and further away from the hexagon i became more fluid in my motions and my art started to resemble something of a spider’s web.

Spider Web Inverted

Spider Web Inverted

I took ideas from the pictures i had found on google, each piece adding to my own web’s design.  Once i had completed the initial design with straight lines around the spider’s web and i was satisfied i began editing the web with the “liquify” tool. Gently pushing the web inwards towards the hexagon to give it a more organic feeling. Now all that was left to do was style the web so it would suit my game. TRASHTASTIC is very bright and colourful, and has a comic and cartoon feel. So naturally i needed my spider web to also share these qualities.

Spider Web in game Engine

Spider Web in game Engine

To create this style i used the stroke tool in photoshop to give my spider web a thick and juicy border. It was starting to look much more like a cartoon now. The last step was to invert the colours so that the outline was black and the web itself was white. You may be asking why i didn’t draw the web in white and save myself a step! Well because drawing anything in white is bloody hard! It’s much easier to draw a picture in black then invert the finished product.

Now that my web was inverted with a black border it was ready to be placed into the game. I’m using the Unity3D engine to create my game. It’s a powerful tool that is free for any independent developer to pick up and try. All i had to do once inside Unity was load my texture file created in photoshop, apply it to an invisible plane, scale it according to size and position the plane anywhere in the level. A great feature in Unity is the Prefab system, instead of having to recreate a new plane and apply and scale my texture each time i can simply save my current spider web as a template for later use. So if my level has 10, 20, 30 spider’s webs it’s just as simple as copying and pasting. I’m also able to rotate or re-size each plane individually or as a whole group.

Creating Triggers for the Spider Web

Creating Triggers for the Spider Web

So my spider web is in the game and looking fancy, but it doesn’t do anything yet. Like any decent spider’s web worth it’s weight we want it to slow down the player character! The first step was to create a new template for the spider web. This time the plane would be laying flat on the ground and slightly smaller than the spider web standing upright. I then added a collider to the spider web on the floor. This is a green box which sends information to and from scripts inside the engine. I set the collider to trigger, and add a couple of lines of code to my character script. This code is from the player’s hit-box, i segregated this from his movement script to make things easier for me to understand and keep track of. If you look at the picture you’ll find everything inside the red boxes were written in relation to the spider web’s trigger collider. Essentially i’m tell the engine that when the player walks into the trigger it should alter his movement and jump speed to a slower rate, giving the player the impression his character is stuck in some seriously sticky spider webs! The reason i have to call GetComponent is because of my segregation of the movement script and the hit-box script. This is the main drawback to writing in multiple scripts as opposed to keeping everything inside as few scripts as possible. I personally prefer this method because that’s how i roll.

So with the script in and a few test runs my Stick Spider Webs are now in the game. All i need to do is simply paste the templates anywhere around the map and watch my character get annoyed as he tries to run! What does it all look like in action, here is an animated GIF file to show off the effect (as well as the animation for killing a spider). And you know what, it’s only lunch time. I’m going to go eat some food!

Sticky Spider Web in Action

Sticky Spider Web in Action

Advertisements

One thought on “Asset and Script Update: Sticky Spider Webs

  1. Pingback: Health Bar, Score, Visual Effects | aftercharlie

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: