いろいろ


[記事全体の目次へ移動](https://qiita.com/hijpa/items/056acaa13e935590fdc2)

# GIF

<details><summary>ここをクリックしてください</summary>

![無題の動画 ‐ Clipchampで作成.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3874121/05078b07-a90e-abef-677d-669131320af5.gif)

![無題の動画 ‐ Clipchampで作成 (2).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3874121/bccbe030-c40a-b042-ba52-45b407e57d7b.gif)

</details>

# 画像の輪郭


<details><summary>ここをクリックしてください</summary>

![silhouetteA - コピー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3874121/78ea33d7-1a2f-a71b-e62b-64a9b6c42480.png)

![スクリーンショット (777).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3874121/f3226a4f-f1a4-2410-6e73-1045a5bb0026.png)


```python:
import pygame

# Pygameの初期化
pygame.init()
screen = pygame.display.set_mode((260,160))
# 画像を読み込む
# ここに画像のパスを貼り付ける
image = pygame.image.load(rパス).convert_alpha()

# 画像からマスクを作成
mask = pygame.mask.from_surface(image)

# マスクの形を取得（マスクの矩形を取得）
mask_rect = mask.get_bounding_rects()

# マスクのピクセル情報を取得
mask_outline = mask.outline()
image.set_alpha(0)

clock = pygame.time.Clock()
running = True
while running:
    clock.tick(60)
    for event in pygame.event.get():
        if event.type == pygame.QUIT:
            running = False

    screen.fill((0, 0, 0))  # 背景を白でクリア
    screen.blit(image, (0, 0))  # 画像を表示

    # マスクの輪郭を描画
    for point in mask_outline:
        pygame.draw.circle(screen, (255, 255, 255), point, 1)

    pygame.display.flip()

pygame.quit()


```
</details>

# アニメーション

Zキーで画像が動き出します。

<details><summary>ここをクリックしてください</summary>

```python:

import pygame
import sys
from pygame.locals import *
import time

pygame.init()
screen = pygame.display.set_mode((160, 160))
pygame.display.set_caption('animation')
# ここに画像のパスを貼り付ける
heart1 = pygame.image.load(rパス)
heart2 = pygame.image.load(rパス)
effect1 = False
effect2 = False
show1 = False
show2 = False
y1 = 120
y2 = 60

# スタート時間を初期化
start_time1 = None
start_time2 = None

clock = pygame.time.Clock()
running = True
while running:
    clock.tick(60)
    screen.fill((0, 0, 0))

    if effect1:
        if start_time1 is None:
            start_time1 = time.time()
        if time.time() - start_time1 > 0.01:
            show1 = True
            y1 -= 1
            start_time1 = time.time()  # タイマーをリセット

    if effect2:
        if start_time2 is None:
            start_time2 = time.time()
        if time.time() - start_time2 > 0.05:
            show2 = True
            y2 -= 1
            start_time2 = time.time()  # タイマーをリセット

    if show1:
        screen.blit(heart1, (120, y1))
    if show2:
        screen.blit(heart2, (60, y2))

    pygame.display.update()

    for event in pygame.event.get():
        if event.type == QUIT:
            pygame.quit()
            sys.exit()
        if event.type == KEYDOWN:
            if event.key == K_z:
                effect1 = True
                effect2 = True
            if event.key == K_x:
                y1 = 120
                y2 = 60


```
</details>

# カウントダウン

Zキーでカウントダウンを開始します。

<details><summary>ここをクリックしてください</summary>

```python:
import pygame
import sys
from decimal import Decimal, ROUND_DOWN
from datetime import datetime

# Pygameの初期化
pygame.init()

# ウィンドウのサイズとタイトルを設定
screen_size = (800, 600)
screen = pygame.display.set_mode(screen_size)
pygame.display.set_caption("カウントダウンタイマー")

# フォントの設定
# ここにフォントのパスを貼り付ける
font = pygame.font.Font(パス, 74)

# カウントダウンタイマーの設定（秒単位）
countdown_time = Decimal('5.0')  # 例: 3分 = 180秒のカウントダウン

# 開始時間を記録する変数（初期化）
start_ticks = None

# ゲームループ
clock = pygame.time.Clock()
running = True
while running:
    clock.tick(60)
    for event in pygame.event.get():
        if event.type == pygame.QUIT:
            running = False
        elif event.type == pygame.KEYDOWN:
            if event.key == pygame.K_z:
                # zキーを押したときにカウントダウンを開始
                start_ticks = pygame.time.get_ticks()

    # 画面を白で塗りつぶす
    screen.fill((255, 255, 255))

    if start_ticks is None:
        # カウントダウン開始前に設定された時間を表示
        initial_time = "00:05:00"  # 3分00秒00センチ秒
        text = font.render(initial_time, True, (0, 0, 0))
        countdown_rect = text.get_rect(topright=(screen_size[0] * 0.5, screen_size[1] * 0.5))
        screen.blit(text, countdown_rect.topleft)
    else:
        # カウントダウンが開始されたら経過時間を計算して表示
        milliseconds = pygame.time.get_ticks() - start_ticks
        seconds = Decimal(milliseconds) / Decimal('1000')
        countdown = (countdown_time - seconds).quantize(Decimal('0.01'), rounding=ROUND_DOWN)

        # カウントダウンタイマーが0以下になったら停止
        if countdown <= 0:
            countdown = Decimal('0.00')
            start_ticks = None        
        # 分、秒、センチ秒に変換
        total_seconds = int(countdown)
        minutes = total_seconds // 60
        seconds = total_seconds % 60
        centiseconds = int((countdown - total_seconds) * 100)
        # フォーマットして表示
        time_str = f"{minutes:02}:{seconds:02}:{centiseconds:02}"

        # カウントダウン時間を描画
        text = font.render(time_str, True, (0, 0, 0))
        countdown_rect = text.get_rect(topright=(screen_size[0] * 0.5, screen_size[1] * 0.5))
        screen.blit(text, countdown_rect.topleft)

    # 描画内容を更新
    pygame.display.flip()

# Pygameの終了処理
pygame.quit()


```
</details>



# UIのサイズ変更



<details><summary>ここをクリックしてください</summary>

![UI1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3874121/df7c7fbe-da6d-4ca4-86aa-f7139e5a31fb.png)

![UI2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3874121/aef4cc63-fe26-4efb-bbea-ce7db8e54e47.png)


```python:

import pygame

def draw_nine_slice(surface, image, rect, margins):
    # スライスの位置を定義
    left, top, right, bottom = margins
    width, height = image.get_size()

    # コーナー部分
    corners = [
        (0, 0, left, top),  # 左上
        (width - right, 0, right, top),  # 右上
        (0, height - bottom, left, bottom),  # 左下
        (width - right, height - bottom, right, bottom)  # 右下
    ]

    # 辺部分
    edges = [
        (left, 0, width - left - right, top),  # 上辺
        (0, top, left, height - top - bottom),  # 左辺
        (left, height - bottom, width - left - right, bottom),  # 下辺
        (width - right, top, right, height - top - bottom)  # 右辺
    ]

    # 中央部分
    center = (left, top, width - left - right, height - top - bottom)

    # 描画
    surface.blit(pygame.transform.smoothscale(image.subsurface(center), (rect.width - left - right, rect.height - top - bottom)), (rect.x + left, rect.y + top))

    for (sx, sy, sw, sh), (dx, dy) in zip(corners, [(0, 0), (rect.width - right, 0), (0, rect.height - bottom), (rect.width - right, rect.height - bottom)]):
        surface.blit(image.subsurface((sx, sy, sw, sh)), (rect.x + dx, rect.y + dy, sw, sh))

    for (sx, sy, sw, sh), (dx, dy, dw, dh) in zip(edges, [(left, 0, rect.width - left - right, top), (0, top, left, rect.height - top - bottom), (left, rect.height - bottom, rect.width - left - right, bottom), (rect.width - right, top, right, rect.height - top - bottom)]):
        surface.blit(pygame.transform.smoothscale(image.subsurface((sx, sy, sw, sh)), (dw, dh)), (rect.x + dx, rect.y + dy, dw, dh))

# Pygameの初期化
pygame.init()

# 画面サイズ
screen = pygame.display.set_mode((300, 300))

# 画像のロード
# ここにUIのパスを貼り付ける。
image = pygame.image.load(パス)

# 9スライス表示の範囲とマージン
rect = pygame.Rect(20, 20, 260, 260)
margins = (20, 20, 20, 20)  # 左、上、右、下のマージンを10ピクセルに変更

# メインループ
clock = pygame.time.Clock()
running = True
while running:
    clock.tick(60)
    for event in pygame.event.get():
        if event.type == pygame.QUIT:
            running = False

    screen.fill((255, 255, 255))  # 背景を白で塗りつぶす
    draw_nine_slice(screen, image, rect, margins)
    pygame.display.flip()

pygame.quit()

```


image = pygame.image.load(パス)
エラーが出たら、パスの前にrをつけます。

rect = pygame.Rect(20, 20, 260, 260)
20,20 UIの座標です。
260,260 UIの大きさです。

UIを元のサイズより大きくしすぎたり、小さくしすぎたりすると変になることがあります。
ペイントでサイズを変更してから、使うと変になりづらいです。
ただし、ペイントで大幅にサイズ変更すると、モザイクがかかったようになります。
そうならないようにするためのコードです。

"プログラムでWEBデザインなどである９スライス表示を実装する" これはぴぽや倉庫さんからの引用ですが、そんな感じのコードらしいです。copilotに書いてもらったのでよくわかりません。

</details>