Not so random Render Glitch

Processing Coding Questions
1

I’ve been trying to recreate Flappy Bird using Processing within Java. Whenever I try to add spikes to it, it always will mess up with the sizes after the first 3 pairs of spikes (seems to be after spikeCount+1 pairs) and every now and then afterwards. If you know the problem or could help me fix my code, that would be great.

This is the “glitch”:
Picture of normal size in comments.

glitch
glitch.png800×600 79.5 KB

This is the code of my main class where the spikes are created:

    public void fillSpikes() {
        float xPos = this.width;
        for(int i = 0; i < spikeCount; i++) {
            spikes[i] = new Spike(this, speed, xPos);
            xPos = xPos + spikeGap;
        }
    }

    @Override
    public void settings() {
        size(screenWidth, screenHeight);
        background = new Background(this, speed);
        ground = new Ground(this, speed);
        spikeGap = this.width / 2f;

        fillSpikes();
    }

    @Override
    public void draw() {
        background.step();
        background.render();

        for(int i = 0; i < spikeCount; i++) {
            spikes[i].step();
            spikes[i].render();
        }


        ground.step();
        ground.render();
    }

And here is the code from the Spike class itself.
scaleX does stay the same all the time.

    public Spike(PApplet sketch, float speed, float xPos) {
        this.sketch = sketch;
        this.speed = speed;

        spikeX = xPos;
        // Point in the middle of the gap
        spikeY = sketch.random(sketch.height / 8f, 5f * (sketch.height / 8f));
        scaleX = sketch.width / 10.0f;

        gap = sketch.height / 4f;

        spikeTop = sketch.loadImage(imagePathTop);
        spikeBot = sketch.loadImage(imagePathBot);
    }

    public float getX() {
        return spikeX;
    }

    public float getWidth() {
        return scaleX;
    }

    public void step() {
        spikeX = spikeX - speed;
        if(spikeX <= -(this.getWidth())) {
            spikeX = sketch.width;
        }
    }

    public void render() {
        sketch.image(spikeBot, spikeX, spikeY + gap / 2f, scaleX, sketch.height);
        sketch.image(spikeTop, spikeX, spikeY - gap / 2f - sketch.height, scaleX,
                sketch.height);
    }
1 Like
2

This is what it is supposed to look like all the time.

normal
normal.png800×600 71.4 KB

3

My first guess is that you don’t “reset” the PGraphic, so your spike’s are simply repainting over themselves every frame.

However, I see a background.step line, but I don’t know what background is.

Are these all contained on different Layers?

1 Like
4

How do I reset it?
background refers to the background image, its class is very similar to the Spikes class as well as the Ground class. Their animation ( step() ) and drawing ( render() ) functions look like those in the Spike class. They all use the same PApplet sketch created in the MySketch class. I guess this means its all in one layer but I honestly dont know.

Edit: Using background(float rgb) as the first function within draw() seems to work.

1 Like
5

Sorry, maybe “reset” wasn’t the right word.
Maybe try to clear() the layer before drawing a new spike?

6

Clear wouldnt work as I use PImage ( not PGraphic ). At least I only found a clear() method for this class.