Display sprites in sequence

Processing Beginners
1

Hi all,
So I have an object in Java with a sprite associated to it. I also have an array of 4 different PImages, and I want to gradually change the sprite of that object into each of the PImages in that array (technically “animating” the sprite"), and I want each sprite to last for 0.5 seconds.
Can anyone help me with this?
Here is my approach. These are all written in the draw() method. The object is the brickwall, and sprites is the array containing the sprite. Fireball hitting the brickwall is the trigger event.

wallcounter=0;
        //when fireball hits wall, fireball disappears and wall is destroyed'
        for(int i = 0; i < this.fireballs.size(); i++){
            //detect collision between fireball and wall
            for(int b = 0; b < this.brickwalls.size(); b++){
                if((this.fireballs.get(i).getX() <= this.brickwalls.get(b).getX()+10 & this.fireballs.get(i).getX() >= this.brickwalls.get(b).getX()-10) && 
                (this.fireballs.get(i).getY() <= this.brickwalls.get(b).getY()+10 & this.fireballs.get(i).getY() >= this.brickwalls.get(b).getY()-10)){

                    this.fireballs.remove(i);
                    if(wallcounter < 4 && wallcounter >= 0){
                        this.brickwalls.get(b).setSprite(sprites[0]);
                        wallcounter++;
                    }
                    else if(wallcounter >= 5 && wallcounter < 8){
                        this.brickwalls.get(b).setSprite(sprites[1]);
                        wallcounter++;
                    }
                    else if(wallcounter >= 8 && wallcounter <12){
                        this.brickwalls.get(b).setSprite(sprites[2]);
                        wallcounter++;
                    }else if(wallcounter >= 12 && wallcounter < 16){
                        this.brickwalls.get(b).setSprite(sprites[2]);
                        wallcounter++;
                    }
                    else{
                        this.brickwalls.remove(b);
                        wallcounter = 0;
                    }
            


                    if(i == this.fireballs.size()){
                        break;
                    }
                    if(b == this.brickwalls.size()){
                        break;
                    }
                }
        } 


    }
2 Likes
2

You explained it very well!

You showed your collision detection code and within the code for sprite animation.

I would like you to separate this.

In the collision just set a boolean flag showAnimation to true. The flag resides in the class.

Next step: I am sure that you have a display function in the brick class; here you either show the wall or the animation. Use if(showAnimation) to distinguish between the two.

For the animation instead of wallcounter use a timer:

if( millis() - startTime > 500) {
spriteIndex++;
startTime=milis();
}

3

Hi, thank you for your reply!
Can you explain your last part of code a little bit further? I don’t quite get what it does.

4

Hello @dmlong,

This is a very common timer.

Some examples:

Reference:

:)

1 Like
5

Hi, so I’ve implemented a timer in my class, however I can’t seem to initialize the sprites array inside the class.

package gremlins;
import processing.core.PImage;
import processing.core.PApplet;

public abstract class wall extends PApplet {
    protected int x;
    protected int y;
    protected PImage sprite;
    protected int size;
    protected boolean Exist = true;
    protected int switchTime = 1000;
    public int savedTime = millis();
    public int counter = 0;
    public static PImage[] sprites = new PImage[4];
    
    public wall(int x, int y){
        this.x = x;
        this.y = y;
    }
    
    public void setSprite(PImage sprite) {
        this.sprite = sprite;
    }
    public void draw(PApplet app){
        
        int passedTime = millis() - savedTime;
        int counter = 0;
        if(Exist){
            app.image(this.sprite, this.x, this.y);
        }
        else{
            if(passedTime > switchTime){
                app.image(sprites[counter], this.x, this.y);
                counter++;
                savedTime = millis();
            }
        }
    }
    public int getX(){
        return this.x;
    }
    public int getY(){
        return this.y;
    }
    public void tick(){
        
    }
}

Are there any ways to initialize this array inside my class?

1 Like
6

In the constructor of the class load the
sprites into the array

OR keep the array outside the class, before setup()

7 
    public wall(int x, int y){
        this.x = x;
        this.y = y;
        //load sprites into array
        for(int i = 0; i < 4; i++){
            sprites[i] = loadImage("src/main/resources/gremlins/brickwall_destroyed" + i + ".png");
        }
    }

I loaded it like this, but when I run the app, it gives the following error:
The sketch path is not set.
java.lang.RuntimeException: Files must be loaded inside setup() or after it has been called.
I suppose that I’ll have to initialize the array somewhere in the setup() method of my main app file right?

8

Yes, in setup() use size() command and then initialize the objects/ bricks (and here the images are loaded)

BUT when the images on Sketch level you save memory space