# Moving background as player moves

**URL:** <https://discourse.processing.org/t/moving-background-as-player-moves/25854>\
**Category:** Processing.py\
**Created:** [December 1, 2020, 6:59am UTC](https://discourse.processing.org/t/moving-background-as-player-moves/25854 "2020-12-01T06:59:20Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![millionish](https://avatars.discourse-cdn.com/v4/letter/m/d9b06d/32.png) [@millionish](https://discourse.processing.org/u/millionish)\
**Post date:** [December 1, 2020, 6:59am UTC](https://discourse.processing.org/t/moving-background-as-player-moves/25854/1 "2020-12-01T06:59:20Z")

</div>

I am making a 2D top-down shooter game similar to Hotline Miami. I want the background to move as player moves (zoomed in). How do I do this?

As of now, I’ve coded only the player movement part without background.

Sample pic is shown below (background is bigger, it’s just the zoomed in part):

 ![Capture.PNG](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/0/002222c0b59cb0497e4be9add162eaf412a5abd2.jpeg)

My code is:

```auto
up_pressed = False
left_pressed = False
right_pressed = False
down_pressed = False

path = os.getcwd()

img = loadImage(path + "/images/" + "shootermain.png")
img_aim = loadImage(path + "/images/" + "aim2.png")

x = 250
y = 250
speed = 5

def setup():
    size(1500, 850)

def draw():
    global x, y
    background(255)

    if up_pressed:
        y -= speed
    elif left_pressed:
        x -= speed
    elif right_pressed:
        x += speed
    elif down_pressed:
        y += speed
    
    
    with pushMatrix():
        translate(x, y)
        angle = atan2(mouseX-x, mouseY-y)
        rotate(angle*-1)
        fill(255)
        # rect(-50, -50 , 100, 100) # player
        image(img, -50, -50, 100, 100, 300, 300, 0, 0)
        strokeWeight(0)
        fill(255, 0, 0)
        rect(0, 0, 1.5, 200) # beam
        # image(img_aim, mouseX, mouseY)
  
        

def keyPressed():
    global up_pressed, left_pressed, right_pressed, down_pressed

    if key == 'w':
        up_pressed = True
    elif key == 'a':
        left_pressed = True
    elif key == 'd':
        right_pressed = True
    elif key == 's':
        down_pressed = True

def keyReleased():
    global up_pressed, left_pressed, right_pressed, down_pressed

    if key == 'w':
        up_pressed = False
    elif key == 'a':
        left_pressed = False
    elif key == 'd':
        right_pressed = False
    elif key == 's':
        down_pressed = False

```

---

<div class="post-metadata">

**Author:** ![tabreturn](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tabreturn/32/3697_2.png) [@tabreturn](https://discourse.processing.org/u/tabreturn)\
**Post date:** [December 1, 2020, 7:17am UTC](https://discourse.processing.org/t/moving-background-as-player-moves/25854/2 "2020-12-01T07:17:22Z")

</div>

What if you move the background image position, but keep the player in the same place (in the centre of the screen)? So, the background image is larger than the viewable area, and you pan it about. In other words, your `x`/`y` variables control the background coordinates, not the player’s.

---

<div class="post-metadata">

**Author:** ![millionish](https://avatars.discourse-cdn.com/v4/letter/m/d9b06d/32.png) [@millionish](https://discourse.processing.org/u/millionish)\
**Post date:** [December 1, 2020, 7:22am UTC](https://discourse.processing.org/t/moving-background-as-player-moves/25854/3 "2020-12-01T07:22:07Z")

</div>

yes that would work too!

---

<div class="post-metadata">

**Author:** ![millionish](https://avatars.discourse-cdn.com/v4/letter/m/d9b06d/32.png) [@millionish](https://discourse.processing.org/u/millionish)\
**Post date:** [December 1, 2020, 8:31am UTC](https://discourse.processing.org/t/moving-background-as-player-moves/25854/4 "2020-12-01T08:31:06Z")

</div>

How do I do that? I’m sorry I’m just a beginner

---

<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:** [December 1, 2020, 8:47am UTC](https://discourse.processing.org/t/moving-background-as-player-moves/25854/5 "2020-12-01T08:47:57Z")

</div>

You need to assign your background position to be some x - some offsetx and some y - some offsety. Where offset y and offsetx is calculated when you press the arrow keys and therefore gets updated. Its the same principle as drag and drop ill post some code later

---

<div class="post-metadata">

**Author:** ![tabreturn](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tabreturn/32/3697_2.png) [@tabreturn](https://discourse.processing.org/u/tabreturn)\
**Post date:** [December 1, 2020, 9:13am UTC](https://discourse.processing.org/t/moving-background-as-player-moves/25854/6 "2020-12-01T09:13:12Z")

</div>

Something like –

```python
def draw():
    ...
    # your x/y variables control the background coordinates
    image(background_image, x, y)
    
    with pushMatrix():
        # keep the player in the same place (in the centre of the screen)
        translate(width/2, height/2)
        angle = atan2(mouseX-width/2, mouseY-height/2)
        rotate(angle*-1)
        image(player_image, -50, -50, 100, 100)

    ...

```

However, your movement will be inverted. You’ll need to change `y -= speed` to `y += speed`, and so on.

---

<div class="post-metadata">

**Author:** ![millionish](https://avatars.discourse-cdn.com/v4/letter/m/d9b06d/32.png) [@millionish](https://discourse.processing.org/u/millionish)\
**Post date:** [December 1, 2020, 9:43am UTC](https://discourse.processing.org/t/moving-background-as-player-moves/25854/7 "2020-12-01T09:43:48Z")

</div>

wow works nicely! How do I add collision detection with all walls and objects? there are so many of them

---

<div class="post-metadata">

**Author:** ![tabreturn](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tabreturn/32/3697_2.png) [@tabreturn](https://discourse.processing.org/u/tabreturn)\
**Post date:** [December 1, 2020, 9:50am UTC](https://discourse.processing.org/t/moving-background-as-player-moves/25854/8 "2020-12-01T09:50:55Z")

</div>

Perhaps start another topic for that. There are various approaches …

You might look at _AABB collision_ as a starting point.

---

<div class="post-metadata">

**Author:** ![millionish](https://avatars.discourse-cdn.com/v4/letter/m/d9b06d/32.png) [@millionish](https://discourse.processing.org/u/millionish)\
**Post date:** [December 3, 2020, 5:05pm UTC](https://discourse.processing.org/t/moving-background-as-player-moves/25854/9 "2020-12-03T17:05:33Z")

</div>

Is there any way to fade the surrounding background around the player and light it up as player moves? Something like shown in sample image below?

![sample.PNG](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/e/e85a5659e2089bad3d8e9e334776e15f10942a6e.jpeg)

---

<div class="post-metadata">

**Author:** ![tabreturn](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tabreturn/32/3697_2.png) [@tabreturn](https://discourse.processing.org/u/tabreturn)\
**Post date:** [December 3, 2020, 5:45pm UTC](https://discourse.processing.org/t/moving-background-as-player-moves/25854/10 "2020-12-03T17:45:06Z")

</div>

Maybe an additional [tilemap](https://discourse.processing.org/t/collision-detection-with-walls-and-objects/25856)-type layer – one that overlays your entire stage with tiles ranging between solid black and fully-transparent. These could include gradient ‘edge’ tiles.

---

<div class="post-metadata">

**Author:** ![millionish](https://avatars.discourse-cdn.com/v4/letter/m/d9b06d/32.png) [@millionish](https://discourse.processing.org/u/millionish)\
**Post date:** [December 5, 2020, 1:23pm UTC](https://discourse.processing.org/t/moving-background-as-player-moves/25854/11 "2020-12-05T13:23:50Z")

</div>

I didn’t understand why the coordinates of image in your code is negative (i.e. (player\_image, -50, -50, 100, 100)). Can you explain pls. It works, but I want to understand.

Also, can you tell me the best and easiest way to place enemies around (non-movable) and after 3 gunshots, kill it?

---

<div class="post-metadata">

**Author:** ![tabreturn](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tabreturn/32/3697_2.png) [@tabreturn](https://discourse.processing.org/u/tabreturn)\
**Post date:** [December 5, 2020, 8:14pm UTC](https://discourse.processing.org/t/moving-background-as-player-moves/25854/13 "2020-12-05T20:14:30Z")

</div>

The negative x-y coordinates for `player_image` offset the point of rotation, so that it pivots around its centre. If you set those coordinates to (0, 0), the player image pivots on its top-left corner:

![Screenshot from 2020-12-06 09-04-26](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/b/ba2d3ba2ae6a7ce221f6260b1f93641fcce2f96d.png)

Left image: `image(player_image, -50, -50, 100, 100)`  
Right image: `image(player_image, 0, 0, 100, 100)`

---

<div class="post-metadata">

**Author:** ![tabreturn](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tabreturn/32/3697_2.png) [@tabreturn](https://discourse.processing.org/u/tabreturn)\
**Post date:** [December 5, 2020, 11:57pm UTC](https://discourse.processing.org/t/moving-background-as-player-moves/25854/14 "2020-12-05T23:57:14Z")

</div>

It’s probably best to create a new class of enemy objects:

```python
class Enemy(object):
    
    def __init__ (self, x, y):
        self.x = x
        self.y = y
        self.lives = 3
    
    def display(self):
        circle(self.x, self.y, 50)

```

Each enemy begins with 3 lives, stored in the `self.lives` attribute.

You’ll want the enemy objects to pan about with your stage/background, so you adapt your code to use another `pushMatrix()` –

```python
...
enemy1 = Enemy(200, 300)
enemy2 = Enemy(400, 120)

...

def draw():
    ...
    # your x/y variables control the background coordinates
    with pushMatrix():
        translate(x, y)
        image(background_image, 0, 0)
        enemy1.display()
        enemy2.display()

    ...

```

I’m not sure what type of detection you’ll use for bullet-enemy collisions. For simplicity, I’d recommend _AABB_ or _circle-circle_ collision – depending which shape conforms best to your bullets and enemies. Again, I’d recommend a new class for bullet objects. Once you’ve got all that working, you can look at deducting enemy lives each time one is struck with a bullet.

---

<div class="post-metadata">

**Author:** ![millionish](https://avatars.discourse-cdn.com/v4/letter/m/d9b06d/32.png) [@millionish](https://discourse.processing.org/u/millionish)\
**Post date:** [December 6, 2020, 8:10pm UTC](https://discourse.processing.org/t/moving-background-as-player-moves/25854/15 "2020-12-06T20:10:03Z")

</div>

can we have two pushMatrix functions together in one program?

---

<div class="post-metadata">

**Author:** ![tabreturn](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tabreturn/32/3697_2.png) [@tabreturn](https://discourse.processing.org/u/tabreturn)\
**Post date:** [December 6, 2020, 8:10pm UTC](https://discourse.processing.org/t/moving-background-as-player-moves/25854/16 "2020-12-06T20:10:45Z")

</div>

As many as you like. You can also nest them, if that’s what you need.

---

<div class="post-metadata">

**Author:** ![millionish](https://avatars.discourse-cdn.com/v4/letter/m/d9b06d/32.png) [@millionish](https://discourse.processing.org/u/millionish)\
**Post date:** [December 6, 2020, 8:11pm UTC](https://discourse.processing.org/t/moving-background-as-player-moves/25854/17 "2020-12-06T20:11:30Z")

</div>

but when I use pushMatrix for enemies and players both separately, the player sprite vanishes (however it still moves)

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [December 6, 2020, 10:42pm UTC](https://discourse.processing.org/t/moving-background-as-player-moves/25854/18 "2020-12-06T22:42:22Z")

</div>

Show your code

You must use pushMatrix and popMatrix together

---

<div class="post-metadata">

**Author:** ![tabreturn](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tabreturn/32/3697_2.png) [@tabreturn](https://discourse.processing.org/u/tabreturn)\
**Post date:** [December 6, 2020, 10:48pm UTC](https://discourse.processing.org/t/moving-background-as-player-moves/25854/19 "2020-12-06T22:48:22Z")

</div>

In Python Mode, you have two options –

```auto
# this requires no popMatrix()
with pushMatrix():
    translate(10, 10)
    square(0, 0, 50)

# this is the popMatrix() alternative
pushMatrix()
translate(10, 10)
square(0, 0, 50)
popMatrix()

```

---

<div class="post-metadata">

**Author:** ![millionish](https://avatars.discourse-cdn.com/v4/letter/m/d9b06d/32.png) [@millionish](https://discourse.processing.org/u/millionish)\
**Post date:** [December 8, 2020, 6:13pm UTC](https://discourse.processing.org/t/moving-background-as-player-moves/25854/21 "2020-12-08T18:13:59Z")

</div>

yeah it works now! Thanks! In my game, I’m trying to implement a clock/timer. It works as of now but only problem is I need to make the frameRate to 1 but it affects the whole program’s frameRate. How do I change frameRate only for the clock function?

```auto
def clock():
    global sec, minutes, hours, col
        
    sec+=1
    if(sec == 60):
        sec = 0
        minutes+=1
    if(minutes == 60):
        minutes = 0
        hours+=1
    if(hours == 24):
        hours = 0
        minutes = 0
        sec = 0
            
    textSize(25)
    fill(255, 0, 0)
    text(floor(sec), 185, 110)
    text(floor(minutes), 135, 110)
    text(floor(hours), 85, 110)
    
    if(sec % 2 == 0):
        col = color(0)
    else:
        col = color(255, 0, 0)
    
    fill(col)
    textSize(30)
    text(":", 120, 110)
    text(":", 170, 110)

```

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [December 8, 2020, 6:16pm UTC](https://discourse.processing.org/t/moving-background-as-player-moves/25854/22 "2020-12-08T18:16:04Z")

</div>

> **[Countdown Class (Python)](https://Gist.GitHub.com/GoToLoop/a476ac6a01d18700240853fed33c0e57)**
>
> Countdown Class (Python). GitHub Gist: instantly share code, notes, and snippets.

  

> **[Countdown Class II (Python)](https://Gist.GitHub.com/GoToLoop/893dc18856a7842b76a92d8aea837da1)**
>
> Countdown Class II (Python). GitHub Gist: instantly share code, notes, and snippets.

[Next page](https://discourse.processing.org/t/moving-background-as-player-moves/25854.md?page=2)