0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

いろいろ

Last updated at Posted at 2024-12-14

記事全体の目次へ移動

GIF

ここをクリックしてください

無題の動画 ‐ Clipchampで作成.gif

無題の動画 ‐ Clipchampで作成 (2).gif

画像の輪郭

ここをクリックしてください

silhouetteA - コピー.png

スクリーンショット (777).png

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)

running = True
while running:
    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()


アニメーション

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

ここをクリックしてください

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

while True:
    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


カウントダウン

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

ここをクリックしてください
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

# ゲームループ
running = True
while running:
    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()


UIのサイズ変更

ここをクリックしてください

UI1.png

UI2.png


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ピクセルに変更

# メインループ
running = True
while running:
    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()

ここにUIのパスを貼り付ける。

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

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

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

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

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?