# Battle interface

**URL:** https://discourse.processing.org/t/battle-interface/32184
**Category:** Project Guidance
**Created:** [September 10, 2021, 7:51pm UTC](https://discourse.processing.org/t/battle-interface/32184 "2021-09-10T19:51:14Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![MoonAlien822](https://avatars.discourse-cdn.com/v4/letter/m/65b543/32.png) [@MoonAlien822](https://discourse.processing.org/u/MoonAlien822)
#### Post date: [September 10, 2021, 7:51pm UTC](https://discourse.processing.org/t/battle-interface/32184/1 "2021-09-10T19:51:14Z")

</div>

how do you make a battle interface like pokemon?  
 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/a/ad1da4470484944bef64b9730e7329e187e472e0.jpeg)

or perhaps more like this ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/3/31b994f04da7b3d8f305119956753248d1fc9171.png)

with battle interface i mean you see the two images(one of the enemy and one of the player that i made on [pixelart.com](http://pixelart.com)), a health bar and different actions you can take

---

<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 10, 2021, 10:49pm UTC](https://discourse.processing.org/t/battle-interface/32184/2 "2021-09-10T22:49:49Z")

</div>

Hi @MoonAlien822,

If you are only asking about the interface in itself, you roughly need this:

- Pixel art images (sprites in .png format for example) of the creatures / ground / background…

- Depending on how much you want to draw using Processing, you can use basic shapes and primitives to display the life point bars, texts, buttons…

- Animations makes the game dynamic and not boring.

- For the programming side of things, you should use Object Oriented Programming with classes and objects because it suits well this kind of game.

Have fun! 😋

---

<div class="post-metadata">

### Author: ![MoonAlien822](https://avatars.discourse-cdn.com/v4/letter/m/65b543/32.png) [@MoonAlien822](https://discourse.processing.org/u/MoonAlien822)
#### Post date: [September 14, 2021, 8:17pm UTC](https://discourse.processing.org/t/battle-interface/32184/3 "2021-09-14T20:17:37Z")

</div>

thank you, this helped a lot. one more question, i also want to have health bar, how do i do this?

---

<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 14, 2021, 9:03pm UTC](https://discourse.processing.org/t/battle-interface/32184/4 "2021-09-14T21:03:21Z")

</div>

> [@MoonAlien822](#):
>
> how do i do this?

What do you mean? Drawing it? Displaying the animation? Storing the data?

---

<div class="post-metadata">

### Author: ![paulgoux](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@paulgoux](https://discourse.processing.org/u/paulgoux)
#### Post date: [September 14, 2021, 9:44pm UTC](https://discourse.processing.org/t/battle-interface/32184/5 "2021-09-14T21:44:27Z")

</div>

![2021-09-14 22_41_24-Untitled - Paint](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/8/8799522e531d9eaf68c711ffeaaa0e1b49aff03f.jpeg)

the width of the second rect is dependant on a few things, so consider using map, to define the respective position compared to available health pool. Please find the processing reference for map, if you dont know what the function does.  
And also may the use of constrain to keep the values from being too high or too low, again please look at the processing reference for the constrain reference.

Google map + processing  
google constrain + processing