At this point, we will add a new PongBall class to create a widget that will be our ball and make it bounce around.

A PongBall class will need to created. The code is as follows.
```python
class PongBall(Widget):

    # velocity of the ball on x and y axis
    velocity_x = NumericProperty(0)
    velocity_y = NumericProperty(0)

    # referencelist property so we can use ball.velocity as
    # a shorthand, just like e.g. w.pos for w.x and w.y
    velocity = ReferenceListProperty(velocity_x, velocity_y)

    # ``move`` function will move the ball one step. This
    #  will be called in equal intervals to animate the ball
    def move(self):
        self.pos = Vector(*self.velocity) + self.pos
```

Next, the kv rule used to draw the ball is as follows.
```python
<PongBall>:
    size: 50, 50
    canvas:
        Ellipse:
            pos: self.pos
            size: self.size
```

Our files should look like this:

main.py:
```python
from kivy.app import App
from kivy.uix.widget import Widget
from kivy.properties import NumericProperty, ReferenceListProperty
from kivy.vector import Vector


class PongBall(Widget):
    velocity_x = NumericProperty(0)
    velocity_y = NumericProperty(0)
    velocity = ReferenceListProperty(velocity_x, velocity_y)

    def move(self):
        self.pos = Vector(*self.velocity) + self.pos


class PongGame(Widget):
    pass


class PongApp(App):
    def build(self):
        return PongGame()


if __name__ == '__main__':
    PongApp().run()
```
pong.kv:
```python
#:kivy 1.0.9

<PongBall>:
    size: 50, 50 
    canvas:
        Ellipse:
            pos: self.pos
            size: self.size          

<PongGame>:
    canvas:
        Rectangle:
            pos: self.center_x - 5, 0
            size: 10, self.height
    
    Label:
        font_size: 70  
        center_x: root.width / 4
        top: root.top - 50
        text: "0"
        
    Label:
        font_size: 70  
        center_x: root.width * 3 / 4
        top: root.top - 50
        text: "0"
    
    PongBall:
        center: self.parent.center
```

Adding the Ball

To add graphics, we will need to create a .kv file to define the look and feel of the ```PongGame``` class. Make a file called pong.kv (note the .kv extension) in the same directory. Then, add the following contents.

```python
#:kivy 1.0.9

<PongGame>:    
    canvas:
        Rectangle:
            pos: self.center_x - 5, 0
            size: 10, self.height
            
    Label:
        font_size: 70  
        center_x: root.width / 4
        top: root.top - 50
        text: "0"
        
    Label:
        font_size: 70  
        center_x: root.width * 3 / 4
        top: root.top - 50
        text: "0"
```

At this point, you should see a vertical bar in the middle and two zeroes where the player scores will be displayed.

IMPORTANT NOTE: The name of the kv file must match the name of the app, i.e. pong.kv for PongApp (the part before the App ending).

California Polytechnic State University, San Luis Obispo

After fully configuring your workspace, we can get a simple Kivy pong game app set up. You will need to create a directory for the game and a main.py file.
```python
from kivy.app import App
from kivy.uix.widget import Widget


class PongGame(Widget):
    pass


class PongApp(App):
    def build(self):
        return PongGame()


if __name__ == '__main__':
    PongApp().run()
```

Running this should only display a black screen. At this point, we have created a simply Kivy app which creates an instance of our PongGame widget class and returns it as the root element for the application UI.

In the next node, we will draw the Pong backround and scores.


Learn Before

Related

Learn After