Install Circle Chain on your iPhone for free and get the source code!! 645 downloads to go - last updated: April 21, 2012

Create a Flash game like Talesworth – Step 2: Line of sight

May 31, 2010 • Actionscript 3, Flash, Game design by Emanuele Feronato • 7 Comments

As you can see if you play Talesworth, your hero will keep on running according to the same rules “run straight until you hit a wall, then turn right by 90° until you find a walkable tile, and keep on running” unless he sees a loot.

If the hero sees a loot, he changes the way he’s walking to grab the loot.

In this second part I’ll focus on the line of sight on a tile based level.

The concept is simple: the hero can see in the four directions until a wall (or some other solid object) blocks his line of sight.

This can be easily done with a couple (four, to tell the truth) of while loops, looking for the closest wall on each direction.

The following is the first script you found at step 1, the one you are moving the hero with arrow keys, with a graphical representation of the line of sight.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128

package {
	import flash.display.Sprite;
	import flash.events.KeyboardEvent;
	import flash.events.Event;
	public class talesworth4 extends Sprite {
		public var map:Array=new Array();
		public var hero_pos:Array= new Array();
		public var wall:wall_mc;
		public var floor:floor_mc;
		public var hero:hero_mc;
		public var key_pressed:int=0;
		public var hero_is_moving:Boolean=false;
		public var hero_x_dir:int=0;
		public var hero_y_dir:int=0;
		public var steps:int=4;
		public var tile_size:int=32;
		public var line_of_sight:Sprite=new Sprite();
		public function talesworth4():void {
			map=[[0,1,1,1,1,1,1,1,1,1,1,1],[0,1,2,2,2,2,2,2,2,1,1,1,1],[0,1,1,1,1,2,1,1,2,1,1,2,1,1],[0,0,1,1,1,2,1,1,2,1,1,2,1,1],[0,0,0,1,1,2,1,1,2,1,1,2,1,1,1],[0,0,0,1,1,2,2,2,2,2,1,2,2,2,1],[0,0,1,1,1,2,1,1,1,2,1,2,1,1,1,1],[0,0,1,1,1,2,1,1,1,1,1,2,1,1,1,1],[0,0,1,2,2,2,2,2,2,2,2,2,2,2,2,1],[0,0,1,2,1,1,2,1,1,1,1,1,1,1,2,1],[0,0,1,2,2,2,2,1,1,1,1,1,0,1,2,1],[0,0,1,1,1,1,1,1,1,1,1,0,0,1,1,1]];
			hero_pos=[3,1];
			draw_map();
			place_hero();
			addChild(line_of_sight);
			stage.addEventListener(KeyboardEvent.KEY_DOWN, on_key_down);
			stage.addEventListener(KeyboardEvent.KEY_UP, on_key_up);
			stage.addEventListener(Event.ENTER_FRAME,on_enter_frame);
		}
		public function draw_map():void {
			for (var i:int=0; i<map.length; i++) {
				for (var j:int=0; j<map[i].length; j++) {
					switch (map[i][j]) {
						case 1 :
							wall = new wall_mc();
							wall.y=i*tile_size;
							wall.x=j*tile_size;
							addChild(wall);
							break;
						case 2 :
							floor=new floor_mc();
							floor.name="floor_"+j+"_"+i;
							floor.y=i*tile_size;
							floor.x=j*tile_size;
							addChild(floor);
							break;
					}
				}
			}
		}
		public function place_hero():void {
			hero = new hero_mc();
			hero.x=tile_size*(hero_pos[0]);
			hero.y=tile_size*(hero_pos[1]);
			addChild(hero);
		}
		public function on_key_down(e:KeyboardEvent):void {
			key_pressed=e.keyCode;
		}
		public function on_key_up(e:KeyboardEvent):void {
			if (e.keyCode==key_pressed) {
				key_pressed=0;
			}
		}
		public function on_enter_frame(e:Event):void {
			line_of_sight.graphics.clear();
			line_of_sight.graphics.lineStyle(4,0xff0000);
			// looking for the closest wall to the right
			var i:int=hero_pos[0];
			while (map[hero_pos[1]][i]==2) {
				i++;
			}
			draw_line_of_sight(i-1,hero_pos[1]);
			// looking for the closest wall to the left
			i=hero_pos[0];
			while (map[hero_pos[1]][i]==2) {
				i--;
			}
			draw_line_of_sight(i+1,hero_pos[1]);
			// looking for the closest wall going up
			i=hero_pos[1];
			while (map[i][hero_pos[0]]==2) {
				i--;
			}
			draw_line_of_sight(hero_pos[0],i+1);
			// looking for the closest wall going down
			i=hero_pos[1];
			while (map[i][hero_pos[0]]==2) {
				i++;
			}
			draw_line_of_sight(hero_pos[0],i-1);
			if (! hero_is_moving) {
				switch (key_pressed) {
					case 37 :
						walk(-1,0);
						break;
					case 38 :
						walk(0,-1);
						break;
					case 39 :
						walk(1,0);
						break;
					case 40 :
						walk(0,1);
						break;
				}
			}
			if (hero_is_moving) {
				hero.x+=tile_size/steps*hero_x_dir;
				hero.y+=tile_size/steps*hero_y_dir;
				if ((hero.x+hero.y)%tile_size==0) {
					hero_is_moving=false;
					hero_pos[0]+=hero_x_dir;
					hero_pos[1]+=hero_y_dir;
				}
			}
		}
		function draw_line_of_sight(px,py):void {
			line_of_sight.graphics.moveTo(hero_pos[0]*tile_size+tile_size/2,hero_pos[1]*tile_size+tile_size/2);
			line_of_sight.graphics.lineTo(px*tile_size+tile_size/2,py*tile_size+tile_size/2);
		}
		function walk(px,py):void {
			if (map[hero_pos[1]+py][hero_pos[0]+px]==2) {
				hero_is_moving=true;
				hero_x_dir=px;
				hero_y_dir=py;
			}
		}
	}
}

And this is the result:

Move the hero with arrow keys and see his line of sight change in real time.

No need to download anything, just cut/paste this script on the file you found in the previous example.

Rate this post: 1 Star2 Stars3 Stars4 Stars5 Stars (6 votes, average: 4.50 out of 5)
Loading ... Loading ...
Flash Templates provided by Template Monster are pre-made web design products developed using Flash technology.
They can be easily customized to meet the unique requirements of your project.
Be my fan on Facebook and follow me on Twitter! Exclusive content for my Facebook fans and Twitter followers

This post has 7 comments

  1. Dean

    on May 31, 2010 at 4:44 pm

    Hi Emanuele, I’d like to get in contact with you. Could you please send me a email with a way I can reach you please.

    Thanks.

  2. James

    on June 1, 2010 at 12:33 pm

    Hey Emanuele,

    First of all, great tutorial series, I’m a regular visitor of your site and you have good knowledge about these things and more importantly you know how to explain it…

    I have seen you are master of games building in Flash. I am developing a simple keppy-uppy game in AS2.

    Something like this:
    http://www.mousebreaker.com/games/santakeepyuppy/playgame

    I have my player designed, I am just having problems with the ball and player interaction, there is some physics/maths involved and I’m not very good at both of them.

    Can you do a little demo for me? I know its piece of cake for you. May be you have done something similar before.
    Just let me know whatever resources/help/tutorial you can provide. Any kind of help will be highly appreciated.

    Thanks,
    James

  3. Quintus Kilsdonk

    on June 1, 2010 at 3:32 pm

    Hey emanuele,

    I made a game with your tutorials:
    -car game
    -ball collision
    -artillery game

    here it is: http://www.newgrounds.com/portal/view/537704

    thank you for your tutorials :D
    -Quintus

  4. Sudeep Acharya

    on June 2, 2010 at 6:37 pm

    Ok waiting for step 3

  5. Create a Flash game like Talesworth – Step 3: The loot - Emanuele Feronato

    on June 5, 2010 at 12:42 am

    [...] Create a Flash game like Talesworth – Step 2: Line of sight [...]

  6. Mari

    on June 21, 2010 at 7:36 am

    Hello,
    I’m really sorry to bother you…

    When I play the demo memory game (http://www.webdevplayground.com/2009/09/a-basic-memory-game-with-jquery-and-php/) I can hear the sounds. However, when I play the downloaded version the sound does not play. (I did download swfobject and place it inside of the game file). Would you be so kind as to tell me what did I do wrong and how can I rectify it?

    Thank you so much!!

    Mari

  7. RPG

    on July 20, 2011 at 8:12 pm

    Hi Emanuele,
    Thank you so much for the tutorial.

< >