# Display sprites in sequence
**URL:** https://discourse.processing.org/t/display-sprites-in-sequence/39016
**Category:** Beginners
**Tags:** homework
**Created:** [September 30, 2022, 5:26pm UTC](https://discourse.processing.org/t/display-sprites-in-sequence/39016 "2022-09-30T17:26:24Z")
**Posts on this page:** 8
**Page:** 1
### Author:  [@dmlong](https://discourse.processing.org/u/dmlong)
#### Post date: [September 30, 2022, 5:26pm UTC](https://discourse.processing.org/t/display-sprites-in-sequence/39016/1 "2022-09-30T17:26:24Z")
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.
```auto
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;
}
}
}
}
```
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [September 30, 2022, 10:56pm UTC](https://discourse.processing.org/t/display-sprites-in-sequence/39016/2 "2022-09-30T22:56:10Z")
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();
}
---
### Author:  [@dmlong](https://discourse.processing.org/u/dmlong)
#### Post date: [October 1, 2022, 3:05am UTC](https://discourse.processing.org/t/display-sprites-in-sequence/39016/3 "2022-10-01T03:05:59Z")
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.
---
### Author:  [@glv](https://discourse.processing.org/u/glv)
#### Post date: [October 1, 2022, 4:24am UTC](https://discourse.processing.org/t/display-sprites-in-sequence/39016/4 "2022-10-01T04:24:23Z")
Hello @dmlong,
This is a very common timer.
Some examples:
- [http://learningprocessing.com/examples/chp10/example-10-04-timer](http://learningprocessing.com/examples/chp10/example-10-04-timer)
- [https://discourse.processing.org/t/need-assistance-with-timing-millis/18854/4](https://discourse.processing.org/t/need-assistance-with-timing-millis/18854/4)
Reference:
> **[Reference](https://processing.org/reference/millis_.html)**
>
> Returns the number of milliseconds (thousandths of a second) since starting an applet. This information is often used for timing animation sequences.
`:)`
---
### Author:  [@dmlong](https://discourse.processing.org/u/dmlong)
#### Post date: [October 1, 2022, 7:25am UTC](https://discourse.processing.org/t/display-sprites-in-sequence/39016/5 "2022-10-01T07:25:59Z")
Hi, so I’ve implemented a timer in my class, however I can’t seem to initialize the sprites array inside the class.
```auto
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?
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [October 1, 2022, 7:35am UTC](https://discourse.processing.org/t/display-sprites-in-sequence/39016/6 "2022-10-01T07:35:23Z")
In the constructor of the class load the
sprites into the array
OR keep the array outside the class, before setup()
---
### Author:  [@dmlong](https://discourse.processing.org/u/dmlong)
#### Post date: [October 1, 2022, 7:50am UTC](https://discourse.processing.org/t/display-sprites-in-sequence/39016/7 "2022-10-01T07:50:39Z")
```auto
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?
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [October 1, 2022, 9:10am UTC](https://discourse.processing.org/t/display-sprites-in-sequence/39016/8 "2022-10-01T09:10:22Z")
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