Pythonスクリプト【Pygameで画像をクリックして表示する画像を変えよう】

画像をクリックして別の画像を表示させよう

今回はスプライトを使って画像を表示し、その画像をクリックすると別の画像を表示させてみましょう。
画像は青色と赤色の2種類用意して、青色の画像をクリックすると赤色の画像が表示され、画像以外の部分をクリックすると青色の画像が表示されるようにします。

画像をクリックすると別の画像を表示するプログラム

スプライトクラスを継承したクラスを作り、その中で画像の表示と画像のクリック確認のメソッドを定義しています。
画像の色はあらかじめ決まっていますが、サイズは自由に設定できます。

### インポート
import sys
import pygame
from pygame.locals import *

### 定数
SURFACE = Rect(0,0,400,400)    # 画面サイズ(X軸,Y軸,横,縦)
W_TIME  = 10                   # 待ち時間

############################
### スプライトクラス継承 
############################
class MySprite(pygame.sprite.Sprite):

    ############################
    ### 初期化メソッド(ファイル名,横の長さ,縦の長さ)
    ############################
    def __init__(self, name, x_size, y_size):
        pygame.sprite.Sprite.__init__(self)

        ### 透過変換でファイル読み込み
        self.image = pygame.image.load(name).convert_alpha()

        ### 画像サイズ変更
        self.image = pygame.transform.scale(self.image, (x_size,y_size))

        ### 画像サイズ取得
        width  = self.image.get_width()
        height = self.image.get_height()

        ### 座標設定
        x = SURFACE.centerx - width/2
        y = SURFACE.centery - height/2

        ### 四角形オブジェクト生成
        self.rect = Rect(x, y, width, height)

    ############################
    ### クリック確認
    ############################
    def check(self, pos):
        return self.rect.collidepoint(pos)

    ############################
    ### オブジェクト描画
    ############################
    def draw(self, surface):
        surface.blit(self.image, self.rect)

############################
### メイン関数 
############################
def main():

    ### 変数初期化
    flag = False

    ### 画面初期化
    pygame.init()
    surface = pygame.display.set_mode(SURFACE.size)

    ### スプライト作成
    img1 = MySprite("img1.png", 200, 100)
    img2 = MySprite("img2.png", 300, 150)

    ### 無限ループ
    while True:

        ### 背景色設定
        surface.fill((0,0,0))

        ### スプライト描画(画像をクリックすると赤、画像以外をクリックすると青)
        if flag == False:
            img1.draw(surface)
        else:
            img2.draw(surface)

        ### 画面更新
        pygame.display.update()

        ### ウエイト
        pygame.time.wait(W_TIME)

        ### イベント処理
        for event in pygame.event.get():

            ### マウスボタンイベント
            if event.type == MOUSEBUTTONDOWN:

                ### カーソルがスプライト上にあるかを確認
                if img1.check(event.pos):
                    flag = True
                else:
                    flag = False

            ### 終了処理
            if event.type == QUIT:
                pygame.quit()
                sys.exit()

############################
### メイン関数呼び出し
############################
if __name__ == "__main__":
    main()

100

101

102

103

104

105

### インポート

import sys

import pygame

from pygame.locals import *

### 定数

SURFACE = Rect(0,0,400,400) # 画面サイズ(X軸,Y軸,横,縦)

W_TIME = 10 # 待ち時間

############################

### スプライトクラス継承

############################

class MySprite(pygame.sprite.Sprite):

############################

### 初期化メソッド(ファイル名,横の長さ,縦の長さ)

############################

def __init__(self, name, x_size, y_size):

pygame.sprite.Sprite.__init__(self)

### 透過変換でファイル読み込み

self.image = pygame.image.load(name).convert_alpha()

### 画像サイズ変更

self.image = pygame.transform.scale(self.image, (x_size,y_size))

### 画像サイズ取得

width = self.image.get_width()

height = self.image.get_height()

### 座標設定

x = SURFACE.centerx - width/2

y = SURFACE.centery - height/2

### 四角形オブジェクト生成

self.rect = Rect(x, y, width, height)

############################

### クリック確認

############################

def check(self, pos):

return self.rect.collidepoint(pos)

############################

### オブジェクト描画

############################

def draw(self, surface):

surface.blit(self.image, self.rect)

############################

### メイン関数

############################

def main():

### 変数初期化

flag = False

### 画面初期化

pygame.init()

surface = pygame.display.set_mode(SURFACE.size)

### スプライト作成

img1 = MySprite("img1.png", 200, 100)

img2 = MySprite("img2.png", 300, 150)

### 無限ループ

while True:

### 背景色設定

surface.fill((0,0,0))

### スプライト描画(画像をクリックすると赤、画像以外をクリックすると青)

if flag == False:

img1.draw(surface)

else:

img2.draw(surface)

### 画面更新

pygame.display.update()

### ウエイト

pygame.time.wait(W_TIME)

### イベント処理

for event in pygame.event.get():

### マウスボタンイベント

if event.type == MOUSEBUTTONDOWN:

### カーソルがスプライト上にあるかを確認

if img1.check(event.pos):

flag = True

else:

flag = False

### 終了処理

if event.type == QUIT:

pygame.quit()

sys.exit()

############################

### メイン関数呼び出し

############################

if __name__ == "__main__":

main()

クリックする位置によって表示する画像を変更することができます。

Pygameの詳しい使い方は、以下のPygame公式サイトを参照してください。

Pygame公式サイト