Tutorial:Trackers

From FANG

You should be able to follow these instructions without downloading or installing any software. You can use the FANG Engine Sandbox now without creating any account, or you can use the FANG Engine Playground.

Be sure read the Explanations of the Source Code in each of the tables below. Also if you are having trouble, try visiting the FAQ.

Under Construction

This page is currently being written. The instructions below should work for JavaWIDE. An Eclipse version is coming soon.

1. Make a New Page

In a new browser tab or window, open the FANG Engine Sandbox, FANG Engine Playground, or your local JavaWIDE site (your instructor will tell you about this if you have one). At the end of the address bar, you will see index.php/Main_Page.

To make a new page, you want to replace Main_Page with the title of the new page you want to create. Replace Main_Page with YourName/firsttracker/SpriteDisplay where you replace YourName with your actual name. For example, if you name were Jane Doe, you would replace Main_Page with JaneDoe/firsttracker/SpriteDisplay. The end of the address in the address bar should look like index.php/JaneDoe/firsttracker/SpriteDisplay (with your actual name used).

Press enter to load the new page. You should see some text like:

There is currently no text in this page, you can search for this page title in other pages or edit this page.

Click on edit this page.

2. Make the Packages and Class

Click on the File:emptygame.png button. This generates the code you need to get started writing code. Click on the Show IDE button. This will show the Java Wiki Integrated Development Environment. This is where you can edit code more easily than in the simple text box. Click on the Hide IDE button. This will make the normal text box visible again. You can toggle the visibility of the IDE in this way.

3. Run the Game

Click on Save page. You should see an empty game appear.

4. JavaWIDE is easier to use than other IDEs

Using JavaWIDE is so easy to use, we don't need a step 4. Go to step 5.

5. Add a Sprite

To test alarms we need sprites. We're going to start by making a red triangle appear in the middle of the screen.

Click on edit at the top of the page. Add the code below which is not already there. Be sure to leave in the <java> tag at the beginning of the page and the </java> tag at the end of the page. These java tags indicate that what is between them is a Java program and not wiki text. You already have some of the code below from the previous instructions: new code is shown in bold.

After editing your code click on Save page. Always test your changes before making more modifications. Run the game. A red triangle should now display on the screen. If the game does not work, reread the instructions above to see what went wrong. Note: the line numbers in this and each of the following tables do not necessarily match the line numbers in your program.

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

package Jam.firsttracker;

import wiki.Wiki;
import fang.*;
import java.awt.*;
import java.awt.geom.*;

/**
 * All about my game here.
 * @author Jam Jenkins
 */
public class SpriteDisplay extends GameLoop
{
  private Sprite tri ;
   
  public void startGame( )
  {
       makeSprites( ) ;
       addSprites( ) ;
  }
   
  private void makeSprites( )
  {
       tri = new PolygonSprite( 3 ) ;
       tri.setScale( 0.1 ) ;
       tri.setLocation( 0.5, 0.5 ) ;
       tri.setColor( Color.RED ) ;
  }
   
  private void addSprites( )
  {
       canvas.addSprite( tri ) ;
  }    
}

6. Make a blank tracker

Trackers move the sprites by changing their location, scale and orientation. We're going to get started by making a Tracker which does not change any of these. In a new browser window or tab make a new page called 'YourName/firsttracker/FirstTracker in your track package and call it 'FirstTracker'.

Creating a helper class is different from creating a game on JavaWIDE. The wiki tags for creating a game are <java> at the beginning and </java> at the end. When you create a helper class, you use the tag <java application="false" applet="false"> at the beginning and </java> at the end because the class you are creating is neither an application nor an applet. Instead it is a helper class that helps the applet run.

Copy the code from the table below into the new page.

1
2
3
4
5
6
7
8
9
10
11
12

<java application="false" applet="false">
package Jam.firsttracker;

import fang.*;

public class FirstTracker extends TrackerAdapter
{     
    public void advanceTime(double timePassed)
    {
    }
}
</java>

Also, edit your SpriteDisplay class by adding the part in bold.

1
2
3
4
5
6
7
8
9
10

  private void makeSprites( )
  {
       tri = new PolygonSprite( 3 ) ;
       tri.setScale( 0.1 ) ;
       tri.setLocation( 0.5, 0.5 ) ;
       tri.setColor( Color.RED ) ;

       FirstTracker track=new FirstTracker();
       tri.setTracker(track);
  }

8. Test your changes

Always test your changes before making more modifications. Run the game. Nothing should change and nothing should be broken. If the game does not work, reread the instructions above to see what went wrong. Nothing changes because the FirstTracker does not change the sprite's scale, orientation or location. In the next step we'll actually make the sprite move.

9. Introduce motion

Now we're going to add some motion. At first the motion will be very simple, but we will make it more complex at later steps. To begin with, we're going to make the sprite move to the right. Edit the code in the FirstTrack class as shown below (changes are in bold). Be sure to read the code explanation to see why we are making them.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

package Jam.firsttracker;

import fang.*;
import java.awt.geom.*;

public class FirstTracker extends TrackerAdapter
{
    public Point2D.Double getTranslation()
    {
         return new Point2D.Double(0.01, 0);
    }

    public void advanceTime(double timePassed)
    {
    }
}

10. Test the changes

Now that we are editing multiple classes to make a single game, we need to alter the tag that starts the Java code for our game class. JavaWIDE is set up to load the most recent version of your game which is measured by the most recent time you changed the class that extends GameLoop. The problem is that we are now changing code that SpriteDisplay depends on (FirstTracker in particular), but we are not changing SpriteDisplay itself. This means that the changes would not be seen if you reload SpriteDisplay.

To fix this, we need to take advantage of the cache attribute. Setting it to false means the code is reloaded everytime it loads the web page. Usually this is wasteful because nothing has changed and there is no reason to reload the applet, but in our case, classes did change, so we set cache="false". In the beginning of the SpriteDisplay page, change the start Java tag from <java> to <java cache="false">. Now everytime you reload the page, it reloads everything the game needs, including all of the code on which it depends.

Save the SpriteDisplay page and make sure the triangle moves to the right. If it does not, check to see what went wrong in this step and the previous one. You will probably notice that the game takes a little longer to load. This is because it loads the code just before loading the game. Once you finish your game, you should change cache="false" back to cache="true" so that others who play your game won't have to wait so long for the code to load.

10. Respond to time

In general, the movement of sprites should correspond to the actual passage of time. This is important in order to make sure that games written work the same on fast computers and slow computers. For example, if the fast computer displays 25 frames/second and the slow computer display only 5 frames/second, you don't want the slow computer to move the sprites 5 times slower. Instead they should move at the same rate, but the display on the slow computer should be less smooth than on the fast computer. We are going to solve this problem by creating two instance variables, one for the velocity and one for the amount to move between frames. Add the following code to your class (new code is bold).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

public class FirstTracker extends TrackerAdapter
{
    private Point2D.Double velocity;
    private Point2D.Double translate;

    public FirstTracker()
    {
         velocity=new Point2D.Double(0.25, 0);
         translate=new Point2D.Double(0, 0);
    }

    public Point2D.Double getTranslation()
    {
         return translate;
    }

    public void advanceTime(double timePassed)
    {
         translate.x=velocity.x*timePassed;
         translate.y=velocity.y*timePassed;
    }
}

11. Test your changes

Always test your changes before making more modifications. Run the game. The red triangle should move to the right and take about 2 seconds to go off the screen. If the game does not work, reread the instructions above to see what went wrong.

12. Add rotation

The getRotationAdditionDegrees method can be used to make the sprite rotate at a given rate. This step will make the sprite rotate at 180 degrees per second (1/2 a rotation).

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

public class FirstTracker extends TrackerAdapter
{
    private Point2D.Double velocity;
    private Point2D.Double translate;
    private double degreesPerSecond;
    private double degrees;

    public FirstTracker()
    {
         velocity=new Point2D.Double(0.25, 0);
         translate=new Point2D.Double(0, 0);
         degreesPerSecond=180;
    }

    public double getRotationAdditionDegrees()
    {
         return degrees;
    }

    public Point2D.Double getTranslation()
    {
         return new translate;
    }

    public void advanceTime(double timePassed)
    {
         translate.x=velocity.x*timePassed;
         translate.y=velocity.y*timePassed;
         degrees=degreesPerSecond*timePassed;
    }
}

13. Test your changes

Always test your changes before making more modifications. Run the game. Does the triangle both move right and rotate? If not, reread the instructions above to see what went wrong. If so, continue to the next step.

14. Comment the code and make your own modifications

The alarm works. Congratulations! Comment the code you've written/copied. Documenting your code is essential if you are to share it or collaborate with others. Now that you have a working version, experiment with it. Make modifications and enhancements.