Talking about String Avoider game, Actionscript 2, Flash and Game development.
A really interesting “avoidance game” that was made in those days is String Avoider. The author of this “More than 1 million views” game in Newgrounds explains it in 12 words: “Avoid colliding with walls and guide your string through each unique level”.
And that’s it. The aim of the game is guiding your string through some levels without touching the walls.
It’s very similar to the ball game I am discussing in this site, but this time the ball is controlled by the mouse and has a “tail” that responses in a very “real life” way.
Something very hard to code, you may say. It’s not that hard to reproduce a string movement in Flash, even if the built-in string class does not help us…
(laugh)
… but let’s start with the tutorial.
The string
A string is made of two objects: the head and the tail. The player will control the head, while the tail will follow the head. That’s it.
So, the first thing to do is the creation of the head. The picture below shows how to draw, position and link the head
Then in main scene first frame simply drop this actionscript
tail_len = 2;
tail_nodes = 100;
nodes = new Array();
_root.attachMovie("the_head", "the_head", 1, {_x:250, _y:200});
_root.createEmptyMovieClip("the_tail", 2);
for (x=1; x
Line 1: Defining tail_len variable at 2. What is tail_len? It's the length in pixels of the fixed part between two nodes.
Line 2: Defining tail_nodes as the number of nodes that will contain the tail.
Time to give some explication: in real world, a string can bend in any of its points. In flash world, we do not want it because it will use too much computer resources and we do not need it because it's just a game. So, if we want a string 200 pixels wide, we can use the "real world" method defining tail_len at 1 and tail_nodes at 200, or we can simplify computer's work setting tail_len at 2 and tail_nodes at 100. Just remember that tail_nodes*tail_len = real tail length for high values of tail_nodes.
Line 3: Declaration of the array where will store all nodes positions
Line 4: Attaching the "head" movie on the stage positioning it in middle of it.
Line 5: Creation of an empty movie clip called "tail" that will contain the tail of the string
Lines 6-8: Cycle that creates all nodes positions. Their starting positions, defined as coordinates, at the beginning are equals to head's _x and _y coordinates
Line 9: Function to be executed at every frame
Lines 10-11: Placing the head at current mouse x and y positions
Line 12: Clearing the tail movieclip
Line 13: Setting the line style of the tail movieclip with a stroke height of 2 filled with green. For more information about drawing and line styles, check this tutorial.
Line 14: Placing the "pen" that will draw the tail on the same head _x and _y positions
Line 15: Defining the first node coordinates (nodes[0]) and the same head _x and _y positions. The first node actually could be the head itself, but I wanted a bigger head so I designed it as a separate movieclip.
Line 16: Beginning of the main loop, that will scan all nodes except nodes[0]. In this case, nodes[1] to nodes[99]
Line 17: Obtaining the angle between the xth and the (x-1)th node. This is done using trigonometry. I wrote a tutorial about it here. You may notice that is a bit different than the atan formulas used in that tutorial, but I discovered atan2 is often more useful than atan in applications involving rotation by a specified amount, because it returns a positive beta for all angles between 0 and 180 degrees (even when x is negative).
Thus it eliminates the need for extra code to deal with different values in different quadrants of the circle.
Lines 18-19: Here trigonometry is involved to calculate new node[x] x and y positions according to its angle with node[x-1]
Line 20: New x and y positions are saved in node[x]
Line 21: Drawing a line from the previous pen position to new x and y positions
And that's it! We have our moving string. Time to test for some collisions!
Collisions
I created a movieclip linked as wall and placed it on the stage.
Then the actionscript is:
tail_len = 2;
tail_nodes = 100;
nodes = new Array();
_root.attachMovie("the_head", "the_head", 1, {_x:250, _y:200});
_root.createEmptyMovieClip("the_tail", 2);
_root.attachMovie("wall", "wall", 3, {_x:250, _y:200});
for (x=1; x
Line 6: Placing the wall on stage
Line 22: Hit test between pos_x, pos_y coordinates and the wall
Line 23: If the test is positive, then change the line color to red. In this way you can view where you collided.
And now you're ready to create some string game... download the source code and send me your works!
Never miss an update! Subscribe, and I will bother you by email only when a new game or full source code comes out.