# Background overwriting character

**URL:** <https://discourse.processing.org/t/background-overwriting-character/3234>\
**Category:** Coding Questions\
**Created:** [September 3, 2018, 8:06pm UTC](https://discourse.processing.org/t/background-overwriting-character/3234 "2018-09-03T20:06:22Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Hedgy](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hedgy/32/1301_2.png) [@Hedgy](https://discourse.processing.org/u/Hedgy)\
**Post date:** [September 3, 2018, 8:06pm UTC](https://discourse.processing.org/t/background-overwriting-character/3234/1 "2018-09-03T20:06:22Z")

</div>

Hey all, I currently am trying to make a zelda like game. Right now I am working on the character. Currently, I have the background being drawn over the character. Here’s a gif of what I mean: [https://gph.is/2oCQdmk](https://gph.is/2oCQdmk)

And here’s my code:

```auto
PImage characterSprite;
	PImage characterUp, characterDown, characterLeft, characterRight;
	boolean isCharacterUp, isCharacterDown, isCharacterLeft, isCharacterRight;
	String currentSprite;
	int characterX, characterY;
	PImage area1;

	public static void main(String[] args) {
		PApplet.main("zeldaremake.ZeldaRemake");
	}
	
	public void settings() {
		size(768,640);
	}
	
	public void setup() {
		characterSprite = loadImage("character.png");
		characterX = width/2;
		characterY = height/2;
		
		area1 = loadImage("area1.png");
	}
	
	public void keyPressed() {
		switch(key) {
		case 'w':
			isCharacterUp = true;
			break;
		
		case 's':
			isCharacterDown = true;
			break;
		
		case 'a':
			isCharacterLeft = true;
			break;
			
		case 'd':
			isCharacterRight = true;
			break;
		}
	}
	
	public void keyReleased() {
		switch(key) {
		case 'w':
			isCharacterUp = false;
			break;
		
		case 's':
			isCharacterDown = false;
			break;
		
		case 'a':
			isCharacterLeft = false;
			break;
			
		case 'd':
			isCharacterRight = false;
			break;
		}
	}

	public void draw() {
		image(area1, 0, 0);
		movement();
		
	}
	
	public void movement() {
		if(isCharacterUp || isCharacterDown || isCharacterLeft || isCharacterRight) {
			if(isCharacterUp == true) {
				image(characterSprite.get(0, 0, 32, 32), characterX, characterY);
				characterY--;
			}
			if(isCharacterDown == true) {
				image(characterSprite.get(32, 0, 32, 32), characterX, characterY);
				characterY++;
			}
			if(isCharacterLeft == true) {
				image(characterSprite.get(64, 0, 32, 32), characterX, characterY);
				characterX--;
			}
			if(isCharacterRight == true) {
				image(characterSprite.get(96, 0, 32, 32), characterX, characterY);
				characterX++;
			}
		}
	}

```

Here are the two images being used:  
 ![character](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/9/9763a297f6dbe1d6f954544777c0b60860aab605.png)

 ![area1](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/c/cdd36e598f8f55a4ae09ce1ff29bd80099a66f47.png)

---

<div class="post-metadata">

**Author:** ![jb4x](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jb4x/32/789_2.png) [@jb4x](https://discourse.processing.org/u/jb4x)\
**Post date:** [September 3, 2018, 8:24pm UTC](https://discourse.processing.org/t/background-overwriting-character/3234/2 "2018-09-03T20:24:01Z")

</div>

Hi Hedgy,

Did you make sure that you are always drawing a characterSprite?  
Maybe some times you never meet any of the conditions? 🤔

---

<div class="post-metadata">

**Author:** ![Hedgy](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hedgy/32/1301_2.png) [@Hedgy](https://discourse.processing.org/u/Hedgy)\
**Post date:** [September 3, 2018, 8:56pm UTC](https://discourse.processing.org/t/background-overwriting-character/3234/3 "2018-09-03T20:56:13Z")

</div>

You’re right. I just had to add `image(characterSprite.get(32, 0, 32, 32), characterX, characterY);` in `draw()` and now its working. Thanks!