pygameを用いて簡単な格闘ゲームを自作してみた1

# ゲームは好きですか？
この記事を見ていただきありがとうございます。
格闘ゲームを遊んでいる時、自分でも作ってみようと思いpygameでそれっぽいゲームを作ってみました。
pygameを使ってなにか作ってみようかなと思っている方の参考になれば良いなと思い、初めて投稿してみましたので是非とも最後まで読んでいただければ嬉しいです。
pythonもqiita投稿も未熟ですがよろしくお願いします。

# 私の開発環境
PC: MacBook Pro
OS: macOS Catalina バージョン10.15
エディター: PyCharm Community
使用言語: python バージョン3.7.4
モジュール: pygame バージョン1.9.6

# 必要なモジュールをインストール
この記事ではpython(バージョンが3.X)が既にインストールされていることを前提として書いています。
## pygameをインストール
```
$ pip install pygame
```
2019/10/22時点ではとりあえずpygameさえインストールしておけばOK


# 最初に知っておくべきこと(2019/10/24　追加)
今回pygameで扱うウィンドウはpygame windowですが
下の画像のようにウィンドウの左上の角が座標の原点になっていてx軸は右方向が正ですがy軸は下方向が正になっている
![ウィンドウの座標.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/515048/72e93280-736d-45f9-4ae5-f4498f92cb1b.png)


# まずはステージ作り
やはりまずは戦うためのステージが無いと始まらないのでステージをちゃっちゃと作っちゃいましょう。

```bash:ディレクトリ構造
プロジェクト名/
         ├ main.py
         └ game_parts/
                ├ __init__.py
                ├ stage.py
```


```python:main.py
import pygame
import sys
from pygame.locals import QUIT

from game_parts import stage

pygame.init()

SURFACE = pygame.display.set_mode((1500, 900))
FPSCLOCK = pygame.time.Clock()


def main():
    while True:
        for event in pygame.event.get():
            if event.type == QUIT:
                pygame.quit()
                sys.exit()

        # 背景を真っ白に設定する
        SURFACE.fill((250, 250, 250))

        # 戦闘用ステージを作成
        stage.base_stage([0, 550])

        # 画面を更新する
        pygame.display.update()
        # 画面の更新を30fps(1秒間に30枚画面が切り替わる)に設定する
        FPSCLOCK.tick(30)


if __name__ == '__main__':
    main()
```
main.pyのコード解説

```python
for event in pygame.event.get():
    if event.type == QUIT:
        pygame.quit()
        sys.exit()
```
上記のコードは表示されたpygame windowを消すボタンを機能させるためのコード
下画像の黒丸で囲ってある部分が上記のコードを書かないと機能しなくなる
また、上記のコードが無いとステージ等の描画もなぜかされなくなる
<img width="863" alt="スクリーンショット 2019-10-22 18.10.44.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/515048/182cef63-ceaa-7e94-dd46-0f2320922584.png">


```python
SURFACE = pygame.display.set_mode((1500, 900))
```
set_mode((描画するウィンドウの横幅、ウィンドウの高さ))を表しています。set_mode関数は他にもflags,depthの引数も渡すことが可能のようですが今回は使用しません。

```python
# 背景を真っ白に設定する
SURFACE.fill((250, 250, 250))
```
先ほど設定した描画するウィンドウの画面を真っ白に塗りつぶします。
(ステージ等はこのウィンドウ上に上書きする形で描画していきます。)
fill((赤、緑、青))のそれぞれを数字で設定し、色を作る
例えば：
画面を赤に塗りつぶすときは
fill((250, 0, 0))
真っ黒に塗りつぶしたい場合は
fill((0, 0, 0))などのように設定する

```python
# 戦闘用ステージを作成
stage.base_stage([0, 550])
```
上記のコードはステージを作成し、描画するコードですが最初のディレクトリ構造から分かる通り実際にステージを作成する関数は別のファイルに分けています。後に記載

```python
# 画面を更新する
pygame.display.update()
```
上記のコードは変更を画面に反映する際に必要で上記のコードが無いと作成した戦闘用ステージが全く描画されない。

```python
# 画面の更新を30fps(1秒間に30枚画面が切り替わる)に設定する
FPSCLOCK.tick(30)
```
上記のコードは画面の切り替えのフレーム数を設定している。
今回はとりあえず30fpsで設定

```python:stage.py
import pygame

import main


def base_stage(position):
    """
    戦闘用ステージ
    Parameters
    ----------
    position : 対象キャラの位置

    """
    pygame.draw.rect(main.SURFACE, (0, 250, 0), (position[0], position[1], 1500, 50))
```

上記コードの解説

```python
pygame.draw.rect(main.SURFACE, (0, 250, 0), (position[0], position[1], 1100, 50))
```
上記の部分がステージを作る要となる部分です。
今回ステージは簡単に横長い長方形を描画するため四角形を描画するrect関数を使用しました。
rect(描画する対象のウィンドウ, (赤、緑、青), (左上角(下図の赤丸で囲っている部分)のx座標, 左上角のy座標, 四角形の横幅, 四角形の縦幅))

![qiita説明用の図形.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/515048/96acae73-d284-5de3-afcc-87a7c9d5ae6e.jpeg)

# 実際に表示してみる
ここまでのコードを実行した結果が下の図になります。
![スクリーンショット 2019-10-23 13.50.39（2）.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/515048/a135fedb-f920-bcd3-832e-a76bb834815c.png)


かなり寂しい絵ですがここから自分が操作するキャラを加えステージ上を移動したり、敵キャラを加えてその敵を攻撃して体力を削ったりしていきます。

今日のところは一旦この辺で終わります。
次回は自分が操作するキャラの表示とそのキャラを左右に移動させたりジャンプさせたりなどの処理を書いていこうと思います。
ここまで読んでいただきありがとうございました。
では、また

[次回 pygameを用いて簡単な格闘ゲームを自作してみた2](https://qiita.com/kankitu_man/items/4a19d48a34508a8ed7ed)