Creating a Custom Renderer

This library comes with a number of renderers to draw the visual representation of the entity. This guide describes how to create your own renderer.

I suggest that you create a new tab in the Processing IDE for your renderer code as this will help you organise and locate your code more easily. So I am going to start with the same code form the Getting Started guide and add a new tab called jet.pde

You can use this code as the basic starting code for virtually any renderer -

public class JetPlane extends PicturePS {

  public JetPlane(PApplet app) {
    super(app);
  }

  public void draw(BaseEntity owner, 
      float posX, float posY, 
      float velX, float velY, 
      float headX, float headY, float etime) 
  {
    // First calculate the angle the entity is facing
    float angle = PApplet.atan2(headY, headX);

    // Can remove the next 4 lines if you never want to show hints
    if (hints != 0) {
      Hints.hintFlags = hints;
      Hints.draw(app, owner, velX, velY, headX, headY);
    }

    // Cast owner to the actual class used
    MovingEntity entity = (MovingEntity) owner;
    
    pushStyle();
    pushMatrix();
    translate(posX, posY);
    rotate(angle);

    // Drawing code goes here
     
    
    // End of drawing code
    popMatrix(); 
    popStyle();
  }
}

This renderer is called JetPlane but you can name your renderers anything you like (within the rules of Java and not the same as the sketch name), you would need to change lines 2 and 4 to match.

Lines 4-6 is the simplest constructor we can use with our renderer. You can have other constructors where you pass additional information but you must keep the PApplet parameter and the first line in your constructor must be super(app);

The draw method (starting at line 8) does the actual drawing. This method has a lot of parameters and they must all be present in the method header statement, even if you don't get to use them when drawing.

Line 14 calculates the angle the entity is facing and is only needed if the entity has to be drawn aligned to its heading. For example, in Simple Soccer the players are heading aligned but the ball doesn't need to be aligned because it is symmetrical.

Lines 17-20 draw steering behaviour hints if they have been added to the renderer. These are really useful if the entity is not moving realistically or how you want it to.

Notice that in the draw method header the parameter owner is of type BaseEntity (see line 8). Since BaseEntity is the parent class for all game entities it means we can use this coding pattern for any game entity. The only problem is that owner can only be used to access the methods in BaseEntity. It is useful to cast owner to the actual class it was created from, in this case MovingEntity. The variable entity can be used to access all the methods available in MovingEntity.

Lines 25-28 inclusive prepare the drawing matrix ready for drawing the entity shape. This will be followed by the Processing commands to draw the shape. When drawing the shape you should imagine the entity being at the origin [0,0] and facing east (along X axis). The actual positioning and rotation of the entity has been done for you in lines 27 & 28. Finally we restore the drawing matrix back to its previous state ready for the next entity.

The last thing to do is add the code that will draw the plane. Inside the draw method at line 31, add the following statements.

    // Drawing code goes here
    fill(140,140,150);
    stroke(0);
    strokeWeight(2);
     // Front wing
    beginShape(TRIANGLES);
    vertex(20,0);
    vertex(-10,-20);
    vertex(-10,20);
    endShape();
    // Rear wing
    beginShape(TRIANGLES);
    vertex(-20,0);
    vertex(-30,-10);
    vertex(-30,10);
    endShape();
     // Fusilage
    ellipseMode(CENTER);
    ellipse(0,0,60,10);

Custom renderer on display