Pygame インタラクティブな図形を作成する

スポンサーリンク

今日はいつものpygameの画面を作りますが、それにスパイスを加えるために、インタラクティブな図形を追加します。

では、始めましょう。

スポンサーリンク

Step 1: 基本的なPygameの画面を作る

最初のタスクは、Pygameの画面を作成することです。

また、BGM用に mixer モジュールも追加します。

1. ウィンドウの作成

まず pygame を初期化し、画面の高さと幅を設定してウィンドウオブジェクトを作成します。

また、Xボタンを押すとウィンドウが閉じるといった様々なイベントを処理するための実行ループを追加します。

2. 背景画像の追加

次に、背景画像を追加します。

まず画像をロードし、ウィンドウ全体を覆うように画像を拡大縮小します。

次に、実行ループの中で blitupdate 関数を使用して画像を追加します。

3. BGMの追加

ミキサーモジュールの機能を使って、プログラムに音楽を追加していきます。

まず、音楽ファイルのフォルダから音楽をインポートします。

次に、music.play関数で音楽を再生します。

また、music.set_volume関数で音楽のボリュームを設定します。

基本的なカスタマイズ画面の設計のためのコード全体は以下のとおりです。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import pygame
from pygame.locals import *
from pygame import mixer
 
pygame.init()
width = 500
height = 500
window = pygame.display.set_mode((width,height))
bg_img = pygame.image.load('Image Files/bg.png')
bg_img = pygame.transform.scale(bg_img,(width,height))
 
mixer.init()
mixer.music.load('Music File/Littleidea - wav music file.wav')
pygame.mixer.music.set_volume(0.05)
mixer.music.play()
 
runing = True
while runing:
    window.blit(bg_img,(0,0))
    for event in pygame.event.get():
        if event.type == QUIT:
            runing = False
    pygame.display.update()
pygame.quit()

Step 2: スクリーンに正方形を追加する

正方形を描くには、draw.rect 関数を使います。

ウィンドウオブジェクトの名前、矩形の色、矩形の寸法(幅と高さ、XとYの座標)です。

ブロックの幅と高さは実行ループの前に定義しておきます。

また、それに伴い、ブロックの色も宣言します。

必要なコード行を追加したコードは以下のとおりです。

変更した箇所はハイライト表示されています。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
import pygame
from pygame.locals import *
from pygame import mixer
pygame.init()
width = 500
height = 500
window = pygame.display.set_mode((width,height))
bg_img = pygame.image.load('Image Files/bg.png')
bg_img = pygame.transform.scale(bg_img,(width,height))
 
x=y=50
color = "red"
 
mixer.init()
mixer.music.load('Music File/Littleidea - wav music file.wav')
pygame.mixer.music.set_volume(0.05)
mixer.music.play()
runing = True
while runing:
    window.blit(bg_img,(0,0))
    for event in pygame.event.get():
        if event.type == QUIT:
            runing = False
 
    pygame.draw.rect(window, color, pygame.Rect(x, y, 60, 60))
 
    pygame.display.update()
pygame.quit()

Step 3: 正方形にインタラクティブ性を持たせる

では、次のような方法で正方形を作ってみましょう。

  1. 上矢印キー。y座標を2つ減らす
  2. 下矢印キー:y 座標を 2 つ増やす
  3. 左矢印キー x 座標を 2 つ減少させる
  4. 右矢印キー:x 座標を 2 つ増やす

しかし、算術演算を追加する前に まず、key.get_pressed関数で押されているキーをキャプチャして変数に格納することを確認します。

そして、その変数をチェックし、取り込んだキーを元に座標に必要な変更を加えていきます。

これを行うためのコード行は以下の通りです。

1
2
3
4
5
6
7
8
9
key = pygame.key.get_pressed()
if key[pygame.K_UP]:
    y -= 2
if key[pygame.K_DOWN]:
    y += 2
if key[pygame.K_LEFT]:
    x -= 2
if key[pygame.K_RIGHT]:
    x += 2

Pygameによるインタラクティブな図形の完全な実装

以下のコードは、最終的に完成したコードです。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
import pygame
from pygame.locals import *
from pygame import mixer
 
pygame.init()
 
#window attributes
width = 500
height = 500
window = pygame.display.set_mode((width,height))
bg_img = pygame.image.load('Image Files/bg.png')
bg_img = pygame.transform.scale(bg_img,(width,height))
 
#square attributes
x=y=50
color = "red"
 
#music addition
mixer.init()
mixer.music.load('Music File/Littleidea - wav music file.wav')
pygame.mixer.music.set_volume(0.05)
mixer.music.play()
 
#the running loop
runing = True
while runing:
     
    #add background img
    window.blit(bg_img,(0,0))
     
    #handling events
    for event in pygame.event.get():
        #closing window function
        if event.type == QUIT:
            runing = False
     
    #add the square
    pygame.draw.rect(window, color, pygame.Rect(x, y, 60, 60))
     
    #moving square on pressing keys
    key = pygame.key.get_pressed()
    if key[pygame.K_UP]:
        y -= 2
    if key[pygame.K_DOWN]:
        y += 2
    if key[pygame.K_LEFT]:
        x -= 2
    if key[pygame.K_RIGHT]:
        x += 2
     
    #update display
    pygame.display.update()
 
#quit pygame
pygame.quit()

最終的な出力

下の動画は、上記のコードの最終的な出力を表示したものです。

矢印キーを押すと、正方形がぴったりと動くのがわかると思います。

まとめ

この基本的なインタラクティブシェイプのチュートリアルが、あなたがpygameで何か新しいことを学ぶのに役立てば幸いです!

読んでくれてありがとうございました。

タイトルとURLをコピーしました