Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
  1. Code
  2. Games

Use Vector Regions to Implement Field of View in a Flash Game

Read Time:13 minsLanguages:

In this tutorial, you will learn how to cast a field of view of a turret guarding a specific location. When an enemy is within the turret's field of view, the turret will shoot at them. Vector math will be used to help in implementing this field of view.

Final Result Preview

Let's take a look at the final result we will be working towards. Click on the turret at the bottom of stage to begin the simulation.

Step 1: Field of View

I'm sure most readers have used cameras. Every camera has a view angle, defined by the type of lens attached. There are narrow and wide view angles. View angles constrain the field of view into a sector. From a top-down position, they look like the diagram below. If you take a picture, eveything within the grayed area will be captured.

Field of view: narrow and wideField of view: narrow and wideField of view: narrow and wide

The turret's field of view in our simulation is like that of a camera. If there's an enemy within its field of view, a guard will respond (sound an alarm, take aim, shoot, etc).

Step 2: Basic Concept

Mathematical conditions to determine item within FOV

The diagram above shows the field of view of turret. Usually the angle of view will be equal on both the left and the right. The radius will also be consistent throughout the sector. So to check whether an enemy is within a turret's field of view, these two mathematical conditions can be used:

  1. Distance between turret and enemy is less than radius.
  2. Angle from turret's line of sight to enemy is less than 30°.

Step 3: Define Field of View Using Vector

We shall use vector math to help us. In this case, the vectors in consideration are vLine2 and vLine3. We can:

  • Compare magnitudes of vLine2 and vLine3 to validate Condition 1 from Step 2.
  • Compare angle sandwiched between vLine2 and vLine3 to validate Condition 2 from Step 2.

Using the formula of dot product between Vectors, we can find the angle sandwiched between two vectors. I have included a Flash presentation above to facilitate your understanding. Click on the buttons at the bottom to scroll through the frames.

Here is the Actionscript in Vector2D (which I've used in previous tutorials, like this one) that does the job. Note that line 257 helps to determine whether the angle is on the negative or positive side. However, this is not going to help us much here as direction is not important. More explanations on this topic in the next part of this series.

Step 4: Implementation

I have included a presentation below that implements the concept of field of view. Feel free to click and drag the bigger gray circles around. Observe area covered by the field of view indicated by darker dots.

Step 5: Important ActionScript

If you'd like to see the ActionScript for the presentation above, feel free to open up AppFan.as from the source download - it's commented to facilitate understanding. I shall only include here the important snippet that checks the conditions.

I've highlighted the conditional statement that each of the little dots on the stage is evaluated against it to see if its within the highlighted area.

Step 6: Variations

To add variation to the use of field of view, we can implement far and near attenuation. In fact, we just went through far attenuation. For far attenuation, enemies that are further away (further than the far attenuation distance) cannot be seen by the turret. For near attenuation, enemies that are too close (less than near attenuation) cannot be seen by turret. This may sound irrational, but imagine the turret sitting on a high cliff while the enemy sneaks right under the cliff.

Okay, perhaps you are not convinced, so here is another example of different use. A guard carries a short sword, a bow and arrows. When an enemy is too far off, he may just want to keep a close eye on him. When the enemy comes within shooting range, he shoots arrows. When the enemy comes too close, he fights with short sword. You may even implement different types of guards: bowmen and swordsmen. Enemies within shooting range are dealt with by bowmen while those at at close range are dealt with by swordsmen.

By understanding the conditions introduced in Step 2, variations can be introduced into our simulation or game.

Step 7: Define Field of View Conditions

I've included a Flash presentation below to showcase different cases and their corresponding set of conditions. Click on the buttons to check out the different cases.

Step 8: Programming Field of View Conditions

The following is a snippet of code for implementing the conditions as laid out in Step 7. You may want to view the whole source code in Region2.as to check out the whole implementation.

Step 9: Implementation

Here's an implementation of ideas explained in Step 6. Click on the black circle and drag it aroud the stage to check whether it's sitting within the visible region. Right-click on stage to pop context menu out, then select from "Basic FOV", "Far/Near Attenuation" and "Observe/Arrow/Sword" to check out the different examples.

Step 10: The Scenario

Now to put into context whatever we have learnt, we are going to create a simulation. Here's the scenario:

A turret is stationed at one end of the stage. Its role is to eliminate as many troops that invade its space as possible. Of course, turret will have to see those troops (within field of view) in order to shoot lasers - and bye-bye troops. Since it can only shoot a beam of laser at any instance, it's going to choose the closest enemy in sight.

On the other hand, troops will try to successfully cross to the other side. They will have to cross a river and, as they do, they will slow down. Now these troops are going to respawn on top of stage whenever they die or go out of stage.

Image depicting scenario 1Image depicting scenario 1Image depicting scenario 1

Step 11: Basic Setup

The implementation of this example will be hard-coded. The basic setup is as below. On initialisation we will draw the graphics of elements (river, troops, turret) and position then nicely. On clicking on the purple turret, animation will start. On every frame we will see them animate according to the behaviours of each element.

Below are the variables of this class.

Step 12: Draw and Position River

Drawing and positioning river. Pretty simple.

Step 13: Draw and Position Troops

Drawing troops will be simple. However, I wanted a "V" formation on troops. So I position the troop at the bottom of "V" first, followed by troops on both sides of its wing. You may want to adjust its center position through center and the spacing between troops through xApart and yApart. Note that troops and its corresponding troopVelo share the same index. All troops are heading south.

Step 14: Draw and Position Turret

Here, we shall draw, position, and orient the turret and its field of view to face north towards the enemy. Note that the line of sight is facing north.

A little detail here on the drawing the line of sight. I've included image below for clarification:

Image to clarify points in drawing FOV

Step 15: Troops' Behaviour

Troops will be animated across time. Here's their behaviour. Note that the last two lines of code are commented. If you would like dead troops to be removed from animation, you may uncomment them.

Step 16: Turret's Behaviour

The turret will guard its post by panning its field of view around, but within certain angles. Here, I've defined the panning angle to be between -135 and -45 (using Flash angles). If there's an enemy within sight, it will attack it. But if there's more than one enemy, it's going to choose the closest to attack.

Step 17: Getting Closest Enemy

The turret will locate the closest enemy in its field of view and react by shooting a laser at it. To see how it finds the closest enemy, check out the ActionScript implementation below.

Step 18: Launching Simulation

You may now press Ctrl + Enter in FlashDevelop and observe this simulation. Click the turret to start the demo below.

Step 19: A Step Further

We can make use of this understanding to:

  • Implement a field of view for enemies.
  • Implement more turrets.
  • Introduce variation to the field of view as explained in Step 9.

...and so on.

Hopefully, this will spark some ideas and perhaps help in your next simulation or game.


Thanks for reading. As usual, do drop a comment to let me know if this has been helpful to you. I'll be writing the next tutorial to check out how enemies can stay out of turret's field of view by "hiding" behind obstacles. Stay tuned.

Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.