Library Renderers

This library comes with a number of renderers to draw the visual representation of the entity, you have already seen the ArrowPic renderer the first two guides. The supplied renderers are -

	Class	Description
1	ArrowPic	A triangular dart shape with user defined size and colours.
2	CirclePic	A circulare shape with user defined size and colours. An example is the football in Simple Soccer.
3	PersonPic	A head and shoulder view from above with user defined size and colours. See the players in the Simple Soccer simulation.
4	BitmapPic	Uses user supplied bitmap images to render the entity. Can be used to create animated graphics.
5	ObstaclePic	Used for Obstacles, it is similar to the CirclePic renderer but uses the Obstacles collision radius for its size.
6	UmbrellaPic	Similar to CirclePic but looks like a multi-coloured umbrella. Size and colours are user defined. In the Marketplace Patrol sketch it is used to render Obstacles that represent market stalls.
7	BuildingPic	This is used to render buildings in the Marketplace Patrol and the City Patrol sketches. The user can specify the interior and wall colours as well as the wall thickness.
8	WallPic	Simple line to represent a wall. User can specify the wall colour and thickness (stroke weight)

The first four are useful when rendering MovingEntity and Vehicle entities (i.e. autonomous agents).

Creating an Animated Renderer

In this guide will demonstrate how to use the BitmapPic renderer to display a moving tank, and how to adjust animation speed based on how fats the tank is moving. The complete sketch code is shown below but some of it will be explained here.

To create an animated graphic the user must provide a tiled image. This is the image is used -

The image has 8 tiles and has a transparent background. To load and create the viewer we use the statement

  view = new BitmapPic(this, "tanks.png", 8, 1, 0);
				

This first parameter is alway this, the second is the name of the file, the next two are the number of tiles horizontally and vertically and the final parameter is the interval between each frame in milliseconds. If the interval is zero then the animation is paused. Since the tank will be stationary when the sketch starts then the animation should be paused.

The tank will be a Vehicle entity declared in line 4 and created in lines 13 to 21. The values for the tank,s mass, turning rate and maximum force have been tweaked to give a nice animation. Later you should experiment with different values to see what the effect is.

Since the tank has been created from the Vehicle class it has an AutoPilot object and in lines 33 qnd 34 the mouse position is recorded in the target and this is used to make the tank use the arrive behaviour to go to the mouse position.

Finally lines 35 & 36 get the tank's maximum speed and current speed, then uses these to calculate and set the animation frame interval in lines 37 to 43. The formula in line 38 was found by trial and error.

// AnimRenderer_01
World world;
StopWatch sw;
Vehicle tank;
Vector2D target = new Vector2D();
BitmapPic view;

public void setup() {
  size(600, 320);
  world = new World(width, height);
  sw = new StopWatch();
  // Create the mover
  tank = new Vehicle(new Vector2D(width/2, height/2), // position
    40,                 // collision radius
    new Vector2D(0, 0), // velocity
    40,                 // maximum speed
    new Vector2D(1, 0), // heading
    15,                 // mass
    1.5f,               // turning rate
    1000                // max force
  ); 
  // What does this mover look like
  view = new BitmapPic(this, "tanks.png", 8, 1, 0);    
  view.showHints(Hints.HINT_COLLISION | Hints.HINT_HEADING | Hints.HINT_VELOCITY);
  tank.renderer(view);
  // Finally we want to add this to our game domain
  world.add(tank);
  sw.reset();
}

public void draw() {
  double elapsedTime = sw.getElapsedTime();
  target.set(mouseX, mouseY);
  tank.AP().arriveOn(target);
  float speed = (float) tank.speed();
  float maxSpeed = (float) tank.maxSpeed();    
  if (speed > 1) {
    float newInterval = map(speed, 0, maxSpeed, 0.6, 0.04);
    view.setAnimation(newInterval, 1);
  }
  else {
    view.pauseAnimation();
  }
  world.update(elapsedTime);
  background(218, 140, 54);
  world.draw(elapsedTime);
}

The completed sketch

The tank will move towards the mouse if it is over the sketch.