カーソルを作成する

図形の描画の仕方と、その動かし方を解説します。三角形を左右に動かすことで、カーソルを表現することができます。

カーソルファイルの作成

Pythonでは、ソースコードを複数のファイルに分割することができます。

例えば今回作成するカーソルも、毎回ゲームを作るたびに書くのは時間がもったいないですよね。そこで、カーソルの部分を別ファイルにして保存し、メインのプログラムで読み込んで使うようにすれば、再利用やカスタマイズも簡単です。

import pygame
from pygame.locals import *

class Cursor():
    def __init__(self, x, y, color):
        self.x = x
        self.y = y
        self.color = color

    def update(self):
        pass

    def draw(self, screen):
        pass

上記のソースコードを、「cursor.py」という名前のファイルに保存します。

他のファイルから「import cursor」でインポートすることで使えるようになります。

図形の描画

このままではインポートしても何も起こらないので、三角形を描画しカーソルを表現します。Pygameには、円を描画するためのdraw.circle()や、四角形を描画するためのdraw.rect()などの関数がありますが、ここでは多角形を描画するdraw.polygon()を使い、三角形を描画します。

import pygame
from pygame.locals import *

class Cursor():

    def __init__(self, x, y, color):
        self.x = x
        self.y = y
        self.color = color

    def update(self):
        pass

    def draw(self, screen):
        pygame.draw.polygon(screen, self.color, ([self.x, self.y], [self.x, self.y + 20], [self.x + 20, self.y + 10]))

draw()の中で、pygame.draw.polygon()で三角形を描画しています。

pygame.draw.polygon(描画するSurface, 色, 頂点のリスト, width)

今回は三角形なので、第三引数に渡す頂点は三つです。widthは外枠の太さです。指定しなければ多角形の内側が指定した色で塗りつぶされます。

これで、三角形が描画されるようになりました。

図形を動かす

ただ三角形を描画して「カーソルです!」というのも味気ないので、左右に動きをつけたいと思います。

import pygame
from pygame.locals import *

class Cursor():
    MOVE_RANGE = 15
    speed = 1

    def __init__(self, x, y, color):
        self.x = x
        self.y = y
        self.color = color
        self.left = self.x
        self.right = self.x + self.MOVE_RANGE

    def update(self):
        self.x += self.speed
        if self.x < self.left or self.x > self.right:
            self.speed = -self.speed

    def draw(self, screen):
        pygame.draw.polygon(screen, self.color, ([self.x, self.y], [self.x, self.y + 20], [self.x + 20, self.y + 10]))

MOVE_RANGEは左右の移動幅です。

update()関数では、x座標にspeedで定義した値をプラスしていき、左右どちらかが移動範囲に達したらspeedの正負を入れ替えます。こうすることで、MOVE_RANGEの幅を行ったり来たりするようになり、だいぶカーソルっぽくなりますね。

カーソルファイルを読み込む

それでは、cursor.pyを実際に読み込んで使ってみましょう。

#!/usr/bin/env python
import pygame
from pygame.locals import *
import sys

# corsor.pyの読み込み
import cursor

SCR_RECT = Rect(0, 0, 640, 480)

class Main():
    def __init__(self):
        pygame.init()
        pygame.display.set_caption("sample")
        screen = pygame.display.set_mode(SCR_RECT.size)

        self.font = pygame.font.Font("data/minamoji04.ttf", 80)
        self.text = self.font.render("留年", True, (255, 255, 255))

        self.image = pygame.image.load("data/rabipple.png")

        # Cursorを作成
        self.cursor = cursor.Cursor(45, 260, (255, 255, 255))

        clock = pygame.time.Clock()
        while True:
            clock.tick(30)
            self.update()
            self.draw(screen)
            pygame.display.update()
            self.key_handler()

    def update(self):
        # Cursorの更新
        self.cursor.update()

    def draw(self, screen):
        screen.fill((0, 0, 0))

        screen.blit(self.text, (120, 240))
        screen.blit(self.image, (360, 80))

        # Cursorの描画
        self.cursor.draw(screen)

    def key_handler(self):
        for event in pygame.event.get():
            if event.type == QUIT:
                pygame.quit()
                sys.exit()

if __name__ == "__main__":
    Main()

まず、cursor.pyファイルを読み込んで使いたいファイルと同じ階層に置き、「import cursor」でインポートします。これで、cursor.pyファイル内に定義されたクラスや関数を使うことができるようになりました。

次に、Mainクラスの__init__()内で、cursorをインスタンス化します。ここで、「cursor.pyの中のCursorクラスを使いますよ~」ということで「ファイル名.クラス名」というように記述することに注意してください。

最後に、update()とdraw()それぞれにcursorのupdate()とdraw()を書いて、完成です。

実行してみると、動くカーソルが描画されているはずです。このように、update()の中に処理を書くことで、動きをつけることができます。

ソースコードのダウンロード