How Can I Make An Arrow Image Move Rotated Direction?

Question

I have an arrow image that rotates left and right VIDEO as you can see in the video when I click my arrow stops rotating and I want it to move the direction it stopped rotating on how would I do that? right now I only have it so when I click the rotation stops but not really sure how I could make it move the direction it stopped rotating on

I tried to make it so when the player clicks the arrow starts to move but its the same thing it doesnt move towards like the rotated place it will just move my arrow down VIDEO

rotating_arrow = True

move = False
# our main loop
run = True
while run:
    for event in pygame.event.get():
        if event.type == pygame.QUIT:
            run = False

        if event.type == pygame.MOUSEBUTTONDOWN:
            rotating_arrow = False
            move = True


    if move:
        move_angle = bow2.angle + 15 # The arrow is painted approximately 15° downwards
        speed = 20
        move_vec = pygame.math.Vector2(speed, 0).rotate(move_angle)
        bow2.x += move_vec.x
        bow2.y += move_vec.y
        bow2.rect.topleft = round(bow2.x), round(bow2.y)

this is how my rotated image is set



def blitRotate(surf, image, pos, originPos, angle):

    # calcaulate the axis aligned bounding box of the rotated image
    w, h         = image.get_size()
    sin_a, cos_a = math.sin(math.radians(angle)), math.cos(math.radians(angle)) 
    min_x, min_y = min([0, sin_a*h, cos_a*w, sin_a*h + cos_a*w]), max([0, sin_a*w, -cos_a*h, sin_a*w - cos_a*h])

    # calculate the translation of the pivot 
    pivot        = pygame.math.Vector2(originPos[0], -originPos[1])
    pivot_rotate = pivot.rotate(angle)
    pivot_move   = pivot_rotate - pivot

    # calculate the upper left origin of the rotated image
    origin = (pos[0] - originPos[0] + min_x - pivot_move[0], pos[1] - originPos[1] - min_y + pivot_move[1])

    # get a rotated image
    rotated_image = pygame.transform.rotate(image, angle)

    # rotate and blit the image
    surf.blit(rotated_image, origin)

my arrow class

class arrow:
    def __init__(self,x,y,height,width,color):
        self.x = x
        self.y = y
        self.height = height
        self.width = width
        self.color = color
        self.shootsright = pygame.image.load("ner.png")

        self.image = self.shootsright
        self.rect  = self.image.get_rect(center = (self.x, self.y))
        self.look_at_pos = (self.x, self.y)

        self.isLookingAtPlayer = False
        self.look_at_pos = (x,y)
        self.angle = 0
        self.gun_size = self.image.get_size()
        self.pivot = (8,  self.gun_size[1]//2)
        
        
        self.rect = pygame.Rect(x,y,height,width)
    def draw(self):


        blitRotate(window, self.image, self.rect.center,  self.pivot,  self.angle)
        pygame.draw.rect(window,self.color,self.rect)

Rabbid76 · Accepted Answer · 2021-01-06T17:58:54.877

0

If you want to fire a bullet in a certain direction, the direction is defined the moment the bullet is fired, but it does not change continuously. This means that after the arrow is fired, the angle will not change.

Compute the direction of the arrow by the trigonometric functions sin and cos. Define the speed of the arrow. Change the position attributes (x, y) of the arrow in each frame:

speed = 20
self.x += speed * math.cos(math.radians(move_angle))
self.y -= speed * math.sin(math.radians(move_angle))

Update the rect attribute:

self.rect.topleft = round(self.x), round(self.y)

Since the arrow picture is painted at a certain angle, the motion angle may need to be corrected:

move_angle = self.angle - 15 # The arrow is painted approximately 15° downwards

Complete arrow.draw method:

class arrow:
   # [...]

   def draw(self):
        move_angle = self.angle - 15 # The arrow is painted approximately 15° downwards
        speed = 20
        self.x += speed * math.cos(math.radians(move_angle))
        self.y -= speed * math.sin(math.radians(move_angle))
        self.rect.topleft = round(self.x), round(self.y)

        blitRotate(window, self.image, self.rect.center,  self.pivot,  self.angle)
        pygame.draw.rect(window,self.color,self.rect)

edited Jan 06 '21 at 17:58

answered Jan 06 '21 at 08:33

Rabbid76

202,892
27
131
174

I tried to make it so when the player clicks the arrow starts to move but its the same thing it doesnt move towards like the rotated place it will just move my arrow down [VIDEO](https://gyazo.com/0505554d2c7232241f38fb1765e77d35) ***I updated the slide*** – Habib Ismail Jan 06 '21 at 17:06
what do you mean? my image angle starts at 0 in the class then starts to rotate upwords + 1 and down + 1 – Habib Ismail Jan 06 '21 at 17:12
[script](https://pastebin.com/c2UdPGZx) its exactly the same as the one you sent me it will just move the arrow down and not the tilted direction I am not sure how to explain this will like in this other [video](https://gyazo.com/d0cf0adddc610346280ef7b29822818a) it will move down instead of the triangle part also yes I am using the same arrow as the one I sent – Habib Ismail Jan 06 '21 at 17:35
I think the problem is that when the arrow is tilted upwords it wont work its only working when my arrow is tilted downwords [video](https://gyazo.com/c67733f2c2fa37291f76e9a34f8ff028) – Habib Ismail Jan 06 '21 at 17:39
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/226941/discussion-between-habib-ismail-and-rabbid76). – Habib Ismail Jan 06 '21 at 17:45
@HabibIsmail I've change the answer. I have overlooked, that `pygame.math.Vector2.rotate` beaves different than `blitRotate`. My bad. I've debugged your code snippet. Now it should work. – Rabbid76 Jan 06 '21 at 18:00
ok it works great! thank you – Habib Ismail Jan 06 '21 at 18:04
@HabibIsmail `move_angle = self.angle - 15` is imortant, since the arrow is drawn diagonally. I have estimated 15°. You may need to measure the angle of the arrow in the picture – Rabbid76 Jan 06 '21 at 18:05
yes I moved the angle to -15 – Habib Ismail Jan 06 '21 at 18:06

How Can I Make An Arrow Image Move Rotated Direction?

1 Answers1