『Python Kivy』官方乒乓球游戏示例解析

本篇文章用于对Kivy框架官方所给出的一个「乒乓球」小游戏的源码进行简单地解析。我会尽可能的将方方面面的内容都说清楚。在文章的最下方为官方所给出的这个小游戏的教程以及游戏源码。

由于篇幅所限，本文只简单介绍Kivy框架，对于Python语言的简介，请大家通过别的文章进行学习。

Kivy简介

Kivy 是基于Python编程语言的一种用于开发跨平台GUI客户端程序的框架。可以打包成iOS、Android、Windows、OSX等多种平台。目前已经实现一次编码，到处运行的目的。

Kivy框架主要包含两种文件，一种为Python源码文件，一种为KV文件。Python源码文件用于控制程序的运行逻辑，KV文件用于定义用户界面。

由于Kivy本质上是使用OpenGL进行界面的绘制的，而且通过对Kivy的经典应用「2048 by kivy」进行了简单的运行，Kivy所开发出的应用，在性能上还是可圈可点的，从某种程度上来说，要比使用HTML5/JS的应用在性能以及稳定性上，要好很多。

关于Kivy框架的基本使用以及开发环境，可以参考我的另外两篇文章：

• 『Python Kivy』什么是Kivy，以及Hello world
• 『Python Kivy』Kivy and PyDev on Eclipse

创建应用

from kivy.app import App
from kivy.uix.widget import Widget

from kivy.properties import NumericProperty, ReferenceListProperty, ObjectProperty
from kivy.vector import Vector
from kivy.clock import Clock

from random import randint

class PongGame(Widget):
    pass

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

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

• App类是创建Kivy应用的基础。我们可以认为它是整个应用的入口，如果在我们的应用中没有引入这个类的话，我们的应用是没有办法运行起来的。
• Widget类是创建一个「Widget」的基础。Widget是我们绘制界面最重要的类，我们的界面元素都应该继承它，不论是内置好的「文本框」还是用于绘制我们自定义界面元素的「画布」，都需要引入这个类，才能够正常工作。
• PongGame是一个「界面元素」类，在整个Pong示例中，小球、球拍等，都是界面元素，所不同的仅仅是界面元素的层级关系。
• PongApp是我们的「主程序」类，主要用于各种操作以及界面元素的交互等的调度。不建议在这里写入太复杂的逻辑，因为如果把复杂逻辑写在这里的话，随着我们应用的不断扩展、维护，这个类将逐步陷入「不可维护」的尴尬境地。
• 最后一块用于「启动应用」。每一个Kivy应用都应该有这段代码。

在Kivy中，我们使用XXXApp来控制应用的运行，使用XXX来控制应用的行为，比如PongApp以及PongGame

绘制界面

kv文件是kivy框架所使用的界面描绘文件，类似于c#的xaml。我们可以在kv文件中，添加各种由kivy框架本身所提供的控件，比如button、label等。还可以在kv文件中使用canvas标签，并在其中绘制各种图形，比如矩形、圆形等

在kv文件中，对于界面的描绘，是__树形__的，也就是说，在最顶层需要一个__根节点__用来作为整个应用的根。

#:kivy 1.8.0

<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"

在上面的kv文件中，

• 第一行#:kivy 1.8.0声明当前kv文件中所用到的kivy的版本。（当前最新的版本是1.9.0 beta）
• canvas向应用中添加了一个画板，用于在界面中绘制乒乓球游戏的各种挡板之类的界面元素。
• 之后在canvas中对画板进行设置，包括画板的位置、尺寸等。
• 每一个根标签，都将对应于在项目文件中的一个类。
• 在最后加入两个标签，并在标签中设置相应的属性，这里包括字号、位置、默认文字。

添加小球

小球类

＃ ...

class PongBall(Widget):
    # 小球在x、y轴上的速度
    velocity_x = NumericProperty(0)
    velocity_y = NumericProperty(0)

    # 创建索引属性列表，以精简对坐标属性的使用。
    velocity = ReferenceListProperty(velocity_x, velocity_y)

    # ``move`` 方法将移动小球一步。
    # 这个方法将会在需要小球移动的时候被调用。
    def move(self):
        self.pos = Vector(*self.velocity) + self.pos

# ...

• 为了让我们的小球会动，我们需要给小球一个位置，然后控制这个位置以一定的速度进行改变，从而实现让小球移动的目的。
• ReferenceListProperty 允许创建一个由其他属性构成的__元组__。在这里，我们提供了两个数值型属性，用于标示坐标。
• 在PongBall类中，我们提供用于控制速度与位置的类属性，以及一个用于控制移动的方法。
• kivy.vector.Vector(*largs) 用于表示一个矢量。利用矢量属性与当前的位置，可以控制移动的方向以及速度。

绘制小球

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

加入球拍

绘制球拍

<PongPaddle>:
    size: 25, 200
    canvas:
        Rectangle:
            pos:self.pos
            size:self.size

...

<PongGame>:
    ...

    player1: player_left
    player2: player_right

    ...

    PongPaddle:
        id: player_left
        x: root.x
        center_y: root.center_y

    PongPaddle:
        id: player_right
        x: root.width-self.width
        center_y: root.center_y

事件处理

class PongPaddle(Widget):
    score = NumericProperty(0)

    def bounce_ball(self, ball):
        if self.collide_widget(ball):
            vx, vy = ball.velocity
            offset = (ball.center_y - self.center_y) / (self.height / 2)
            bounced = Vector(-1 * vx, vy)
            vel = bounced * 1.1
            ball.velocity = vel.x, vel.y + offset

# ...

class PongGame(Widget):
    ball = ObjectProperty(None)
    player1 = ObjectProperty(None)
    player2 = ObjectProperty(None)

    def serve_ball(self, vel=(4, 0)):
        self.ball.center = self.center
        self.ball.velocity = vel

    def update(self, dt):
        self.ball.move()

        # 敲击小球
        self.player1.bounce_ball(self.ball)
        self.player2.bounce_ball(self.ball)

        # 限定小球在屏幕中的上下边界
        if (self.ball.y < self.y) or (self.ball.top > self.top):
            self.ball.velocity_y *= -1

        #went of to a side to score point?
        if self.ball.x < self.x:
            self.player2.score += 1
            self.serve_ball(vel=(4, 0))
        if self.ball.x > self.width:
            self.player1.score += 1
            self.serve_ball(vel=(-4, 0))

    def on_touch_move(self, touch):
        if touch.x < self.width / 3:
            self.player1.center_y = touch.y
        if touch.x > self.width - self.width / 3:
            self.player2.center_y = touch.y

参考资料

• 官方教程
• Python源码
• KV源码