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