Pyhton Kivy Drag Control Button For Game

How to Create a Draggable Button Control in Kivy for Your Game (Python Tutorial)

If you're building a mobile game with Kivy, you'll definitely need smooth controls! 🎮 In this tutorial, we'll create a draggable button inside a circle, like a mini-joystick, using Python Kivy.

This control is perfect for character movement, camera control, or any kind of input in your mobile games.

Full Python Code for a Kivy Drag Control Button

from kivy.app import App 
from kivy.uix.label import Label 
from kivy.uix.widget import Widget 
from kivy.uix.screenmanager import Screen, ScreenManager 
from kivy.graphics import Color, Rectangle, Line, Ellipse 
from kivy.clock import Clock 
from kivy.animation import Animation 
from kivy.core.window import Window 
import math 

# Get screen width and height
w, h = Window.size

class sample(Widget):
    def __init__(self, **kwargs):
        super().__init__(**kwargs) 
        self.size = (w, h)
        self.radius = 100
        self.center_pos = [w // 2, h // 2]
        self.player_size = 40
        
        with self.canvas:
            # Draw the player (draggable button)
            self.player = Ellipse(
                pos=(self.center_pos[0] - self.player_size // 2, self.center_pos[1] - self.player_size // 2),
                size=(self.player_size, self.player_size)
            )
            # Draw the boundary circle
            self.circle = Line(circle=(w // 2, h // 2, self.radius))

    def on_touch_move(self, touch):
        x, y = touch.x, touch.y
        center_x, center_y = self.center_pos
        dx, dy = x - center_x, y - center_y
        angle = math.atan2(dy, dx)
        distance = math.sqrt(dx ** 2 + dy ** 2)

        if distance < self.radius:
            self.player.pos = (
                (center_x - 20) + (math.cos(angle) * distance),
                (center_y - 20) + (math.sin(angle) * distance)
            )
        else:
            self.player.pos = (
                (center_x - 20) + (math.cos(angle) * self.radius),
                (center_y - 20) + (math.sin(angle) * self.radius)
            )

        return super().on_touch_down(touch)
    
    def on_touch_up(self, touch):
        # Reset player to center when released
        self.player.pos = (self.center_pos[0] - 20, self.center_pos[1] - 20)
        return super().on_touch_up(touch)

class myapp(App):
    def build(self):
        return sample()

if __name__ == "__main__":
    myapp().run()

🎥 Full Video Tutorial: Drag Control Button for Game in Python Kivy for Android

​:contentReference[oaicite:0]{index=0} This tutorial provides a step-by-step guide on creating a draggable button control in Kivy, suitable for Android game development.

How This Works

• A circle is drawn at the center of the screen.
• A draggable player (small ellipse) starts in the center.
• When the user touches and moves inside the circle, the player moves freely.
• If the user moves outside the circle, the player sticks to the circle's boundary.
• When the user lifts their finger, the player resets back to the center!

Where You Can Use This

• Virtual joystick controls for character movement.
• Camera movement controls.
• Mini-games that need drag input.
• Any custom UI elements for your Kivy app.

Final Words

Building mobile games with Kivy becomes super exciting when you add custom controls like this! This draggable button is a great start for more complex game input systems.

If you found this tutorial helpful, don’t forget to share it! ✨

Stay tuned for more Kivy game development tricks! 🚀