画像

表示用に以下の画像を用意した

自作画像なので二次配布しないのであれば自由にどうぞ

フィールドマップ作成

上記の画像を使い Tiledでフィールドを作ってみた

中央がフィールドで、左がHOLD、右がNEXTのイメージ

~~HOLDの機能作れなかったら左の表示は消します~~

適当にエクスポート

出来上がったファイル

field.tmx

<?xml version="1.0" encoding="UTF-8"?>
<map version="1.10" tiledversion="1.10.2" orientation="orthogonal" renderorder="right-down" width="32" height="24" tilewidth="32" tileheight="32" infinite="0" nextlayerid="3" nextobjectid="1">
 <tileset firstgid="1" source="mino_block.tsx"/>
 <layer id="1" name="mainfield" width="32" height="24">
  <data encoding="csv">
1,1,1,1,1,1,1,1,1,1,9,1,1,1,1,1,1,1,1,1,1,9,1,1,1,1,1,1,1,1,1,1,
1,1,1,1,1,1,1,1,1,1,9,1,1,1,1,1,1,1,1,1,1,9,1,1,1,1,1,1,1,1,1,1,
1,1,1,1,1,1,1,1,1,1,9,1,1,1,1,1,1,1,1,1,1,9,1,1,1,1,1,1,1,1,1,1,
1,1,1,33,34,34,34,34,35,1,9,1,1,1,1,1,1,1,1,1,1,9,1,33,34,34,34,34,35,1,1,1,
1,1,1,36,1,1,1,1,37,1,9,1,1,1,1,1,1,1,1,1,1,9,1,36,1,1,1,1,37,1,1,1,
1,1,1,36,1,1,1,1,37,1,9,1,1,1,1,1,1,1,1,1,1,9,1,36,1,1,1,1,37,1,1,1,
1,1,1,38,39,39,39,39,40,1,9,1,1,1,1,1,1,1,1,1,1,9,1,36,1,1,1,1,37,1,1,1,
1,1,1,1,1,1,1,1,1,1,9,1,1,1,1,1,1,1,1,1,1,9,1,36,1,1,1,1,37,1,1,1,
1,1,1,1,1,1,1,1,1,1,9,1,1,1,1,1,1,1,1,1,1,9,1,36,1,1,1,1,37,1,1,1,
1,1,1,1,1,1,1,1,1,1,9,1,1,1,1,1,1,1,1,1,1,9,1,36,1,1,1,1,37,1,1,1,
1,1,1,1,1,1,1,1,1,1,9,1,1,1,1,1,1,1,1,1,1,9,1,36,1,1,1,1,37,1,1,1,
1,1,1,1,1,1,1,1,1,1,9,1,1,1,1,1,1,1,1,1,1,9,1,36,1,1,1,1,37,1,1,1,
1,1,1,1,1,1,1,1,1,1,9,1,1,1,1,1,1,1,1,1,1,9,1,36,1,1,1,1,37,1,1,1,
1,1,1,1,1,1,1,1,1,1,9,1,1,1,1,1,1,1,1,1,1,9,1,36,1,1,1,1,37,1,1,1,
1,1,1,1,1,1,1,1,1,1,9,1,1,1,1,1,1,1,1,1,1,9,1,36,1,1,1,1,37,1,1,1,
1,1,1,1,1,1,1,1,1,1,9,1,1,1,1,1,1,1,1,1,1,9,1,36,1,1,1,1,37,1,1,1,
1,1,1,1,1,1,1,1,1,1,9,1,1,1,1,1,1,1,1,1,1,9,1,36,1,1,1,1,37,1,1,1,
1,1,1,1,1,1,1,1,1,1,9,1,1,1,1,1,1,1,1,1,1,9,1,36,1,1,1,1,37,1,1,1,
1,1,1,1,1,1,1,1,1,1,9,1,1,1,1,1,1,1,1,1,1,9,1,36,1,1,1,1,37,1,1,1,
1,1,1,1,1,1,1,1,1,1,9,1,1,1,1,1,1,1,1,1,1,9,1,36,1,1,1,1,37,1,1,1,
1,1,1,1,1,1,1,1,1,1,9,1,1,1,1,1,1,1,1,1,1,9,1,36,1,1,1,1,37,1,1,1,
1,1,1,1,1,1,1,1,1,1,9,9,9,9,9,9,9,9,9,9,9,9,1,38,39,39,39,39,40,1,1,1,
1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,
1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1
</data>
 </layer>
</map>

これとなんか画像のオブジェクトファイル？みたいのが必要

拡張子tsxなのは草、typescriptじゃなくね？

mino_block.tsx

<?xml version="1.0" encoding="UTF-8"?>
<tileset version="1.10" tiledversion="1.10.2" name="mino_block" tilewidth="32" tileheight="32" tilecount="64" columns="8">
 <image source="mino_block.png" width="256" height="256"/>
</tileset>

環境構築

poetryが入っていること前提に環境構築していく

バージョンとかライブラリとか適当に指定

Python のバージョン: 3.12
ライブラリ: pygame, pytmx

出来上がったのが以下のファイル

authorsは自分の名前入れてね

pyproject.toml

[tool.poetry]
name = "tetris-like"
version = "0.1.0"
description = ""
authors = [""]

[tool.poetry.dependencies]
python = "^3.12"
pygame = "^2.5.2"
pytmx = "^3.32"


[build-system]
requires = ["poetry-core"]
build-backend = "poetry.core.masonry.api"

これ使ってpoetry initとかすれば多分環境作れるはず

とりあえず描画

インストールしたpygameとpytmxを使ってこのフィールドを描画してみる

main.py

import pygame
from pytmx import util_pygame as tmx_util

class Game:
    TILE_SIZE = 32
    def __init__(self):
        pygame.init()
        self.screen = pygame.display.set_mode((1024, 768))

    def load_map(self, filename):
        self.tmx_data = tmx_util.load_pygame(filename)

    def draw_tile(self, x, y, tile_id):
        tile_image = self.tmx_data.get_tile_image_by_gid(tile_id)
        if tile_image:
            self.screen.blit(tile_image, (x * self.TILE_SIZE, y * self.TILE_SIZE))

    def run(self):
        self.map_loaded = False

        clock = pygame.time.Clock()
        running = True

        while running:
            for event in pygame.event.get():
                if event.type == pygame.QUIT:
                    running = False

            if not self.map_loaded:
                self.load_map('field.tmx')
                self.map_loaded = True

            self.screen.fill((0, 0, 0))

            for layer in self.tmx_data.layers:
                if layer.name == "mainfield":
                    for x, y, gid in layer.iter_data():
                        self.draw_tile(x, y, gid)

            pygame.display.flip()
            clock.tick(60)

        pygame.quit()

if __name__ == "__main__":
    game = Game()
    game.run()

実行してみた結果

正しく表示できていそう

まとめ

Tiledでフィールドを作りpygame,pytmxを使って描画した

次回: テトリス風落ち物パズルを作る part02 ミノ配置 #Python - Qiita