C#-dotnet-GTK-project-template-image

いいですね!
次は「円の代わりに画像を使ってアニメーション」する GTK3 + C# サンプルをお届けします!


目次

🖼 画像をアニメーションで動かすサンプル

マウスクリックで画像(アイコンやスプライトなど)を追加して、それが画面内を動き続けます。


📁 準備:画像ファイルを用意

まず、任意の PNG 画像を用意して、プロジェクトディレクトリに icon.png という名前で保存してください。

例:icon.png(サイズ小さめ推奨、64×64など)


📄 Program.cs

using Gtk;
using Cairo;
using Gdk;
using System;
using System.Collections.Generic;
using System.Timers;

public class AnimatedImageWindow : Window
{
    private DrawingArea drawingArea;
    private Pixbuf image;
    private List<MovingImage> images = new List<MovingImage>();
    private Timer timer;

    public AnimatedImageWindow() : base("GTK3 Image Animation")
    {
        SetDefaultSize(600, 400);
        SetPosition(WindowPosition.Center);
        DeleteEvent += (o, args) => Application.Quit();

        drawingArea = new DrawingArea();
        drawingArea.AddEvents((int)EventMask.ButtonPressMask);
        drawingArea.Drawn += OnDraw;
        drawingArea.ButtonPressEvent += OnClick;

        Add(drawingArea);
        ShowAll();

        // 画像を読み込み
        image = new Pixbuf("icon.png");

        // タイマーでアニメーション更新
        timer = new Timer(16);
        timer.Elapsed += OnUpdate;
        timer.Start();
    }

    private void OnClick(object o, ButtonPressEventArgs args)
    {
        double x = args.Event.X;
        double y = args.Event.Y;

        var rand = new Random();
        double dx = rand.NextDouble() * 4 - 2;
        double dy = rand.NextDouble() * 4 - 2;
        images.Add(new MovingImage(x, y, dx, dy));
    }

    private void OnUpdate(object sender, ElapsedEventArgs e)
    {
        foreach (var img in images)
        {
            img.X += img.DX;
            img.Y += img.DY;

            // 画面端で反射
            if (img.X < 0 || img.X + image.Width > 600) img.DX = -img.DX;
            if (img.Y < 0 || img.Y + image.Height > 400) img.DY = -img.DY;
        }

        Application.Invoke((_, __) => drawingArea.QueueDraw());
    }

    private void OnDraw(object sender, DrawnArgs args)
    {
        Context cr = args.Cr;

        cr.SetSourceRGB(1, 1, 1);
        cr.Paint();

        foreach (var img in images)
        {
            Gdk.CairoHelper.SetSourcePixbuf(cr, image, img.X, img.Y);
            cr.Paint();
        }
    }

    public static void Main()
    {
        Application.Init();
        new AnimatedImageWindow();
        Application.Run();
    }

    private class MovingImage
    {
        public double X, Y, DX, DY;
        public MovingImage(double x, double y, double dx, double dy)
        {
            X = x; Y = y; DX = dx; DY = dy;
        }
    }
}

🧱 .csproj はそのまま OK

GtkSharp のバージョンにより Gdk.Pixbuf が使える


✅ 実行手順

sudo apt install libgtk-3-dev

# プロジェクトディレクトリに画像を置く
cp your-image.png icon.png

# ビルド&実行
dotnet run

🌈 機能まとめ

  • 🖱 クリックした位置に画像が出現
  • 🧲 各画像はバウンドしながら動き続ける
  • 🖼 Cairo + Pixbuf による画像描画

🚀 拡張アイデア

  • 🔄 アニメーションGIFに対応(PixbufAnimation など)
  • 🎮 矢印キーで操作できる主人公キャラ
  • 💥 衝突判定・当たり判定
  • 🎵 サウンド付き(Gtk.Media or SDL 連携)

次、どうしましょう?
「キャラを動かせるようにしたい」「衝突判定を追加したい」などあれば、どんどんいけますよ!

よかったらシェアしてね!
目次