Using array of images to spawn enemies in game


I’m new to Processing and I’m trying to create a part of the game where enemies appear on the left side of the screen and move towards the right side of the screen in a 5 second interval. I’m using an array of images, and each time I want the code to randomise:

  1. Which image out of the array is spawned
  2. The y co-ordinate of the image

I’m not sure where to start. Any guidance would be greatly appreciated.

1 Like

Hello @dsdsdsds,

A good place to start:

Break down what is required first:

  1. Array of images < Assuming you have already done this.
  2. Access a random element of the array.
    This reference may help:
    random() / Reference /
    You will have to convert the float to an int to access elements of array:
    int() / Reference /
  3. Search for timer (or related keywords) in this forum for examples of timers.
  4. Write some code to understand each element above.
  5. Start piecing the elements of code together and later integrate it into your project.



hi, welcome to the community!

I think this tutorial helps:

If you have specific questions, it would be great if you can post your code (even if it’s super simple).


Thanks for the guidance, I’ve looked through the resources provided and others that I found online and wrote some code for what I’m trying to achieve.

I’m dealing with a problem:

When the first image or “enemy” spawns, it will work correctly for the length of spawnInterval, but after this period, instead of a new image spawning at x = 0, the current image on the sketch will teleport to a new randomised y co-ordinate, with the speed noticeably increasing once this happens.

As well as that, a new image spawns on top of the previous one and they move simultaneously.

My goal is to have it work so a new image will spawn at every 2.5 second interval, and that the images will disappear once they reach the width of the sketch, which in this case is 800px. I also want the speed to stay the same for every enemy.

I’m unsure how to achieve that at this point, any help would be appreciated.

Here is my starting code:

String[] imageNames = {"square1.png", "square2.png", "square3.png", "square4.png", "square5.png"};
PImage[] images = new PImage[imageNames.length];
PImage bg;
int playerX, playerY, currentTime;
int spawnInterval = 2500;
float y, startTime;
float x = 0;
float speed = 3;
boolean[] imageVisible = new boolean[images.length];

void setup()
  bg = loadImage("background.png");
  size(800, 600);
  playerX = width/2;
  playerY = height/2;
  startTime = millis();

  for (int i = 0; i < images.length; i++) {
    images[i] = loadImage(imageNames[i]);
    imageVisible[i] = false;

void draw()
  image(bg, 0, 0);
  playerX = mouseX;
  playerY = mouseY;
  fill(255, 0, 0);
  ellipse(playerX, playerY, 30, 30);

void imageMovement()
  for (int i = 0; i < images.length; i++)
    if (imageVisible[i])
      x+= speed;
      image(images[i], x, y);
      if (x >= width)
        imageVisible[i] = false;

void timeLoop()
  currentTime = millis();
  if (currentTime - startTime >= spawnInterval)
    startTime = currentTime;

void spawnImage()
  int randomIndex = int(random(images.length));
  y = random(height - images[randomIndex].height);
  image(images[randomIndex], x, y);
  imageVisible[randomIndex] = true;

You may wish to consider an object oriented approach:


It make take some time but the reward is well worth the effort.


You can use:
ArrayList<PImage> images = new ArrayList<PImage>();

However, you really should create an Enemy class.

class Enemy{
float x,y;
void show(){
//show image

Then, just create an ArrayList of Enemies.
ArrayList<Enemy> enemies = new ArrayList<Enemy>();

You should have a Player class too.

Avoid calling image(PImage img, float x, float y, float xSize, float ySize); it degrades performance.

Always call image(PImage img, float x, float y) instead.

If you need to resize your images, resize the file so the computer does not have to resize them EVERY time.

1 Like

Why use int(4.0f) when (int) 4.0f is likely better?

The Processing method dist(float x1, float y1, float x2, float y2) is very inefficient (no clue why).
Use this instead:

    double fastDist(double x1, double y1, double x2, double y2) {
        return Math.sqrt((x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2));
1 Like

We can also clone [ via get() ] the PImage and resize() it once in setup(), before draw() starts.



That is a good approach.
I had no idea such a thing existed.