In Python, how can i make an interactive button using images in arcade?

Question

I'm trying to create an interactive button in arcade, using python. I'm using os to import images and wondered if I could convert the clicking function to the image. I hope to open up a new window by clicking on the image. I am aware that tkinter is mostly used for that but i'm creating a game and don't want to use tkinter. I'm also not fond of using PyGame. I'm not sure how you can apply boundaries on an image imported from os either.

I've looked up a tutorial on arcade.academy on how to use buttons in arcade but it required drawing shapes and inputting text manually using aracade shapes. I've also tried a tutorial in outputting coordinates into the python shell while i'm clicking random points on a canvas, trying to incorporate it into an image. The sample code below is not completed but I've tried doing it that way.

import arcade
import os
SCREEN_WIDTH = 700
SCREEN_HEIGHT = 700
class MyGame(arcade.Window):
    def __init__(self):
        super().__init__(SCREEN_WIDTH, SCREEN_HEIGHT, "sprites")
        file_path = os.path.dirname(os.path.abspath(__file__))
        os.chdir(file_path)
        self.player_list = None
        self.player_sprite = None
        self.set_mouse_visible(True)
        self.pressed = (False)
        arcade.set_background_color(arcade.color.AMAZON)
    def Button(self, center_x, center_y, action_function):
        self.player_list = arcade.SpriteList()
        self.player_sprite = arcade.Sprite("osss.png", 0.5)
        self.player_sprite.center_x = center_x
        center_x = 50
        self.player_sprite.center_y = center_y
        center_y = 50
        self.player_list.append(self.player_sprite)
        self.action_function = action_function

    def on_draw(self):
        arcade.start_render()
        self.player_list.draw()
    def on_mouse_motion(self, x, y, dx, dy):
        self.player_sprite.center_x = x
        self.player_sprite.center_y = y
    def update(self, delta_time):
        x = self.center_x
        y = self.center_y
        if not self.pressed:
            x -= self.Button_height
            y += self.Button_height

    def on_press(self):
        self.pressed = True

    def on_release(self):
        self.pressed = False

    def check_mouse_press_for_buttons(x, y, self): #Button.on_press()
        for button in self.player_list:
            if x > button.center_x + button.width / 2:
                continue
            if x < button.center_x - button.width / 2:
                continue
            if y > button.center_y + button.height / 2:
                continue
            if y < button.center_y - button.height / 2: 
                continue
        def check_mouse_release_for_buttons(x, y, dx, dy, button_list):  #make the action happen
            for button in button_list:
                if button.pressed:
                    button.on_release()
                    arcade.draw_randomrect_filled(x, y, dx, dy, arcade.color.PINK)

    def on_release(self):
        super().on_release()
        self.action_function()


def main():
    window = MyGame()
    window.Button(center_x, center_y, action_function)
    arcade.run()
if __name__ == "__main__":
   main()

I do get a lot of 'undefined' error messages. I haven't really assigned my values all that well. I am also expecting a rejection, a lot of people tell me this can't be done.

Answer 1

You can use arcade.gui.UITextureButton class. Example:

import arcade
import arcade.gui


class App(arcade.Window):
    def __init__(self):
        super().__init__(400, 300, 'Button')
        self.manager = arcade.gui.UIManager()
        self.manager.enable()
        box = arcade.gui.UIBoxLayout()
        button = arcade.gui.UITextureButton(x=0, y=0, texture=arcade.load_texture('btn.png'), texture_hovered=arcade.load_texture('btn_hovered.png'), texture_pressed=arcade.load_texture('btn_pressed.png'))
        box.add(button.with_space_around(bottom=20))
        button.on_click = self.on_click_button
        self.manager.add(arcade.gui.UIAnchorWidget(anchor_x='center_x', anchor_y='center_y', child=box))

    @staticmethod
    def on_click_button(event):
        print('Button clicked!')

    def on_draw(self):
        arcade.start_render()
        self.manager.draw()


App()
arcade.run()

Output: