Soccer field scroll and sprites animation

Java 2D
#1

I am currently writting a football game called Open Kick-Off

Unfortunately, due to lack of time, activities, work, family and so on, this project had no activities since a long time.
But recently, I decided to restart to work on this project, just because I have some programming interest about AI and java.

Open Kick-Off aims at programming a free, opensource, GPL’ed soccer game similar to the famous Dino Dini’s KickOff 2

And here you can see which result I expect for the scrolling and sprites animation

I am using right now the following principle to display the football ground, and handle scrolling

public class FootballGround extends Panel implements KeyListener, FootballDimensions, Runnable
{
    public static Image	grassSquareImage;
    public static Image	BALL_IMG;
    public static Image	GRASS_IMG;
    ...

    public void paint (Graphics g) { update (g); }

    public void update (Graphics g)
    {
        if (_offGraphics==null)
        {
            _offImage = createImage (SCREEN_WIDTH, SCREEN_HEIGHT);
            _offGraphics = _offImage.getGraphics();
            _offGraphics.setColor (Color.black);
        }

        paintGrass (_offGraphics);
        paintLines (_offGraphics);

        if (_match.getBall().getHeight()<Player.PLAYER_HEIGHT)
        {
            paintBall(_offGraphics);
            paintPlayers (_offGraphics);
        }
        else
        {
            paintPlayers (_offGraphics);
            paintBall(_offGraphics);
        }
        paintScore (_offGraphics);
        paintRadar (_offGraphics);
        ...
        
    /** This function tiles the grass on the screen */
    private void paintGrass (Graphics g)
    {
        Dimension grassDim = new Dimension ( grassSquareImage.getWidth(this), grassSquareImage.getHeight(this));

        if(GRASS_IMG==null)
        {
            Image grassSquareImage = JARImageLoader.loadImage ("grass.gif");
            GRASS_IMG = createImage (SCREEN_WIDTH+grassDim.width, SCREEN_HEIGHT+grassDim.height);
            Graphics grassGraphics = GRASS_IMG.getGraphics();

            for (int x=0; x<SCREEN_WIDTH+grassDim.width; x+=grassDim.width)
            {
                for (int y=0; y<SCREEN_HEIGHT+grassDim.height; y+=grassDim.height)
                {
                    grassGraphics.drawImage (grassSquareImage, x, y, this);
                }
            }
        }

        g.drawImage (GRASS_IMG,
                -  new Long(Math.round((_camera.getLocation().x+SCREEN_HALF_WIDTH) * PIXELS_PER_METER)).intValue() % grassDim.width,
                -  new Long(Math.round((_camera.getLocation().y+SCREEN_HALF_HEIGHT) * PIXELS_PER_METER)).intValue() % grassDim.height,
                this);
    }

but i am not satisfied, I aims to display the orginal pitch

Here are the pitch I want to use for the game which is described as tiles here

So my 1st question is following

According to your experience which would be the best means to achieve the result expected, should I stay on the tiles principle, could you give me inputs, trials or concrete stuff that I can apply
For example how to build the array of tiles that describe the final football ground? Any tools for doing that ?

My 2nd question is for sprites animation

I have the original sprites in this format, what would be the best way to iterate in this image and extract the sprite I want to use.
What would be the best way to do for the sprite animation, should I keep the file like this or extract all sprites in each single file.

Thank for helping and support
Sebastien

#2

This reply only discuss the format and handling of the images, not the scrolling.

I would have created an image library to contain all your graphics needed. Keep the images as you did, all tiled up. And then create a simple reader that takes a few arguments to understand how it can cut up the pieces into images (Buffered or Volatile).


private ArrayList loadTiledImage(String filename, int rows, int cols) {

GraphicsEnvironment ge = GraphicsEnvironment.getLocalGraphicsEnvironment();
GraphicsConfiguration gc = ge.getDefaultScreenDevice().getDefaultConfiguration();

ArrayList array = new ArrayList();
BufferedImage im = loadTiledImageFile(filename); // error checks removed
int width = im.getWidth() / cols;
int height = im.getHeight() / rows;
int transparency = im.getColorModel().getTransparency();

for (int r = 0; r < rows; r++) {
	for (int c = 0; c < cols; c++) {
		BufferedImage copy = gc.createCompatibleImage(width, height, transparency);
		Graphics2D g2 = copy.createGraphics();
		g2.drawImage(im, 0, 0, width, height, c*width, r*height, (c*width)+width, (r*height)+height, null);
		g2.dispose();
		array.add(copy);
	}
}
return array;
}

So now you have an array with all the tiles in it. You should be able to define either sequence for animation or world maps using the indices of this array. Put this array in a HashMap so you can grab it with a simple call: ArrayList playerTiles = (ArrayList)imgLibHashMap.get(“player”) or ArrayList playFieldTiles = (ArrayList)imgLibHashMap.get(“playField”).

So for instance you could have a playfield like this:


// very difficult to find the indices to populate this array
private static final int[] PLAYFIELD = {
	0, 0, 0, 0, 0, 0, 0, 0,0 ,0, 0, 0, 0, 0,
                      34, 35, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4    
};

But it would probably be easier to use a tool to cut the pieces up and then store it in some index format you easily can read. (if there are no tool, build one or ask me to build it for you)

I prefer to put my graphics in a zip file and rename it to something like gamedata.dat. My loadTileImageFile method knows how to locate and extract the file from the zip file.

Peter Wahlgren