いいですね!
次は「円の代わりに画像を使ってアニメーション」する 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 連携)
次、どうしましょう?
「キャラを動かせるようにしたい」「衝突判定を追加したい」などあれば、どんどんいけますよ!