How can I animate a circle with PlayN?

Question

This is a follow up to my last question:

How can I draw a circle to the screen with PlayN?

For my simple case, I want to programmatically create a single colored circle and move it across a 2-D plain (doesn't need to use box2d lib).

A real-world example would likely involve animating several circles. Two real-world examples for this case (sorry, I had to remove the links -- not enough karma!):

• Browsmos for Chrome
• Ants AI Challenge

It was suggested in response to my last question that I would want to use the ImmediateLayer class, so I am looking to understand how to properly incorporate this into my game loop.

Here's is my code sample:

public class SimpleCircleAnimation implements Game {

    // Surface    
    private GroupLayer rootLayer;
    private ImmediateLayer surface;
    private Canvas canvas;

    private Circle circle;
    private CanvasImage circleImage;        

    @Override
    public void init() {
        // create root layer
        rootLayer = graphics().rootLayer();

        // a simple circle object
        int circleX = 0; int circleY = 0;
        int circleRadius = 20;
        circle = new Circle(circleX, circleY, circleRadius);

        // create an immediate layer and add to root layer
        ImmediateLayer circleLayer = graphics().createImmediateLayer(new ImmediateLayer.Renderer() {
            public void render (Surface surf) {
                circleImage = graphics().createImage(circle.radius*2,  circle.radius*2);
                canvas = circleImage.canvas();
                canvas.setFillColor(0xff0000eb);
                canvas.fillCircle(circle.radius, circle.radius, circle.radius);
                surf.drawImage(circleImage, circle.x, circle.y);
            }
        });
        rootLayer.add(circleLayer);
    }

    @Override
    public void paint(float alpha) {
    }

    @Override
    public void update(float delta) {
        // move circle
        int newX = circle.x + 4; int newY = circle.y + 4;
        circle.setPoint(newX, newY);
    }

    @Override
    public int updateRate() {
        return 25;
    }
}

This successfully moves the circle diagonally down the screen from left to right. A couple questions:

• Is this implemented properly?
• In the case of multiple animated circles, is the idea with ImmediateLayer that you would create a circle image for each circle within the Renderer callback? Or would you perhaps create an Immediate Layer for each circle and add those to the root layer?

Answer 1

I discovered a detailed practical example of ImmediateLayer usage in the Cute Game source within the PlayN Samples:

CuteGame.java (code.google.com)