# Gradually change the sprite of an object

**URL:** https://discourse.processing.org/t/gradually-change-the-sprite-of-an-object/38851
**Category:** Coding Questions
**Tags:** homework
**Created:** [September 19, 2022, 3:30am UTC](https://discourse.processing.org/t/gradually-change-the-sprite-of-an-object/38851 "2022-09-19T03:30:32Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![dmlong](https://avatars.discourse-cdn.com/v4/letter/d/73ab20/32.png) [@dmlong](https://discourse.processing.org/u/dmlong)
#### Post date: [September 19, 2022, 3:30am UTC](https://discourse.processing.org/t/gradually-change-the-sprite-of-an-object/38851/1 "2022-09-19T03:30:33Z")

</div>

Hi, so I’m working on a homework project, with a character shooting fireballs at walls to destroy them. I’ve been doing well with creating the characters and their projectiles, as well as detecting the collision between the projectiles and the walls. But now I want to change the sprite of the wall when it is shot, so that it gradually transform from a normal wall to a broken wall, to dust, and then to nothing. Can anyone help me with this?  
Here are my codes for the walls.

```auto
import processing.core.PImage;
import processing.core.PApplet;

public abstract class wall {
    protected int x;
    protected int y;
    protected PImage sprite;
    protected int size;
    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){
        app.image(this.sprite, this.x, this.y);
    }
    public int getX(){
        return this.x;
    }
    public int getY(){
        return this.y;
    }
}

```

```auto
import processing.core.PImage;
import processing.core.PApplet;

public class brickwall extends wall {
    
    public PImage sprite;
    public brickwall(int x, int y){
        super(x, y);
    }
    public boolean wallExist(){
        return true;
    }

}
    

```

---

<div class="post-metadata">

### Author: ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)
#### Post date: [September 23, 2022, 10:13am UTC](https://discourse.processing.org/t/gradually-change-the-sprite-of-an-object/38851/2 "2022-09-23T10:13:57Z")

</div>

Hi @dmlong,

First thing I noticed is that you declare your classes with a lower case name which might be confusing with other variable names. Instead use the PascalCase convention like `Wall` and `BrickWall`.

> [@dmlong](#):
>
> But now I want to change the sprite of the wall when it is shot, so that it gradually transform from a normal wall to a broken wall, to dust, and then to nothing.

For that you need some kind of timer. When the wall is touched by a projectile, you trigger a variable to `true` and start counting time. Then each time you draw the wall, you display a different sprite depending on how close to the “end of life” limit a wall have.

See this for implementing a timer: [Brick Game Timer Question - #2 by josephh](https://discourse.processing.org/t/brick-game-timer-question/38605/2)

---

<div class="post-metadata">

### Author: ![NumericPrime](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/numericprime/32/16318_2.png) [@NumericPrime](https://discourse.processing.org/u/NumericPrime)
#### Post date: [September 23, 2022, 11:05am UTC](https://discourse.processing.org/t/gradually-change-the-sprite-of-an-object/38851/3 "2022-09-23T11:05:43Z")

</div>

A system I implement when using sprites is the following:

SpriteHandler.pde

MainSketch.pde

```auto
SpriteHandler standartHandler=new SpriteHandler();
void setup(){}
void draw(){
   standartHandler.run();
}

```

SpriteHandler.pde

```auto
class SpriteHandler {
  ArrayList<Sprite> sprites=new ArrayList<Sprite>();
  SpriteHandler(){
  }
  void register(Sprite s){
    sprites.add(s);
  }
  void run(){
    for(Sprite s:sprites) s.run(s.currframe++);
    for(int i=sprites.size()-1;i>=0;i--) if(sprites.get(i).done()) sprites.remove(i);
  }
}

```

Sprite.pde

```auto
abstract class Sprite{
  int duration=0;
  int currframe=0;
  boolean forceQuit=false;
  boolean done(){
    return duration<=currframe&&duration>0&&!forceQuit;
  }
  void register(){
     standardHandler.register(this);
  }
  abstract void run(int frame);
}

```

In run you can define what the Sprite does.

You can then write a subclass of the Sprite class and use standardHandler.register() to add them

---

<div class="post-metadata">

### Author: ![dmlong](https://avatars.discourse-cdn.com/v4/letter/d/73ab20/32.png) [@dmlong](https://discourse.processing.org/u/dmlong)
#### Post date: [September 23, 2022, 1:25pm UTC](https://discourse.processing.org/t/gradually-change-the-sprite-of-an-object/38851/4 "2022-09-23T13:25:56Z")

</div>

Hi, so I’ve successfully implemented the timer, and it looks like this

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/b/7/b7447a7a550e7e9a11b727316285d2d6a1ec2ee1.png)

```auto
for(int i = 0; i < this.fireballs.size(); i++){
    if(this.brickwall.wallExist()){
        if((fireballs.get(i).getX() <= this.brickwall.getX()+10 & fireballs.get(i).getX() >= this.brickwall.getX()-10) && 
        (fireballs.get(i).getY() <= this.brickwall.getY()+10 & fireballs.get(i).getY() >= this.brickwall.getY()-10)){
            fireballs.remove(i);
            int counter = 0;
            for(PImage p : sprites){
                if(counter == 4){
                    this.brickwall.setSprite(p);
                    this.brickwall.draw(this);
                    counter = 0;
                }
                else{
                    counter++;
                }
            }
            
        }
}
}

```

with sprites being a list of sprites that I’ve created  
It didn’t work. Can you tell me where I’m wrong?  
Thank you
