アプリケーション(boilersGraphics.exe)が配置されているフォルダを開き、boilersGraphics.exeをダブルクリックします。
- 画面左側のツールから直線ツールを選択します。
- キャンパス上でドラッグして直線を描画します。
- 画面左側のツールから四角形ツールを選択します。
- キャンパス上でドラッグして四角形を描画します。
- 画面左側のツールから円ツールを選択します。
- キャンパス上でドラッグして円を描画します。
- Shift押しながらドラッグすると幅と高さが等しい円が描けます。
- Alt押しながらドラッグすると、マウスダウンした点を中心にした円が描けます。
- 画面左側のツールから多角形ツールを選択します。
- 多角形ウィンドウが表示されます。ここでは、多角形を構成する頂点の情報を入力します。頂点の情報は角度（度）と半径です。頂点の情報は追加ボタンを押下することで、追加できます。必要のない頂点の情報は削除ボタンで削除することができます。
- 多角形を構成する頂点の情報を入力したら、始点Xと始点Yを入力します。
- 描画ボタンを押下します。
- キャンパス上でドラッグして多角形を描画します。
- 画面左側のツールからベジエ曲線ツールを選択します。
- キャンパス上でドラッグしてベジエ曲線を描画します。
- ベジエ曲線を描画すると、制御点１と制御点２が現れます。これらをドラッグしてベジエ曲線の制御点の位置を調節します。
- 画面左側のツールから画像ツールを選択します。
- ファイルダイアログが開きます。描画したい画像ファイルを選択します。
- キャンパス上でドラッグして画像を描画します。
- Shift押しながらドラッグすると画像のアスペクト比を維持したまま描画できます。
- 画面左側のツールから文字ツールを選択します。
- キャンパス上でドラッグして描画範囲を決定します。
- 画面左側のツールから選択ツールを選択します。
- 2で決定した描画範囲をクリックして選択します。
- レタリングダイアログが開きます。ここでは描画する文字列、フォント、太字か、イタリックか、フォントサイズ、自動改行するかを指定します。
- 例えば、文字列：boiler's Graphics、フォント：メイリオ、太字：チェックしない、イタリック：チェックしない、フォントサイズ：30、自動改行：チェックしないの場合は下記GIFアニメのようになります。
- 画面左側のツールから縦書きツールを選択します。
- キャンパス上でドラッグして描画範囲を決定します。
- 画面左側のツールから選択ツールを選択します。
- 2で決定した描画範囲をクリックして選択します。
- レタリングダイアログが開きます。ここでは描画する文字列、フォント、太字か、イタリックか、フォントサイズ、自動改行するかを指定します。
- 例えば、文字列：ボイラーズグラフィックス、フォント：メイリオ、太字：チェックしない、イタリック：チェックしない、フォントサイズ：30、自動改行：チェックするの場合は下記GIFアニメのようになります。
FUI (Fictional User Interface) 制作向けに、等幅フォント前提のテキスト・自動生成ダミーデータ・連番列を素早く配置できる 3 つの専用ツールが追加されています。デフォルトフォントとして JetBrains Mono をアプリ同梱しています。
詳しい使い方とプロパティ仕様は docs/fui/phase2-tutorial.md を参照してください。
- 画面左側のツールから「モノスペーステキスト」ツールを選択します。
- キャンパス上でドラッグして配置範囲を決定します。
Textプロパティに表示したい文字列 (複数行可) を設定すると、等幅フォントで描画されます。
- 画面左側のツールから「データジェネレータ」ツールを選択します。
- キャンパス上でドラッグして配置範囲を決定します。
- 配置直後に Hex × 8 件のダミーデータが自動生成されます。
Type(Hex / Binary / IPv4 / IPv6 / UUID / Timestamp / RandomCode / LogLine の 8 種)、Seed、Count、Separator、Layoutを変更すると同期的に再生成されます。
- 画面左側のツールから「数値列」ツールを選択します。
- キャンパス上でドラッグして配置範囲を決定します。
- デフォルト設定 (
0..10Step1Horizontal) で生成された連番列が表示されます。 Start/End/Step/Format("D3"/"X4"/"F2"等の .NET 書式指定子) /Separator/Direction(Horizontal / Vertical / Grid) を変更すると同期的に再生成されます。
これら 3 要素は Phase 1 のパーツ機構と統合されており、
ExposedPropertyで主要プロパティ (MonoText: Text/FontSize/Foreground/Background/LetterSpacing、DataGen: Seed/Count/Separator、NumSeq: Start/End/Step/Format/Separator) を公開して再利用パーツの一部にできます。
Phase 2.5 で「行 × 列の格子状にテキストを並べる」テキストマトリクスと、「PolyBezier に沿って 1 文字ずつ文字を並べる」テキストパスが追加されています。
詳しい使い方とプロパティ仕様は docs/fui/phase2-5-tutorial.md を参照してください。
- 画面左側のツールから「テキストマトリクス」ツールを選択します。
- キャンパス上でドラッグして配置範囲を決定します。
- デフォルト 4×4 の連番テーブルが表示されます。
CellMode(Sequential / DataGenerator / CustomList の 3 モード)、Rows/Columns/Separator/ 各モード固有のプロパティを変更すると同期的に再生成されます。
- 先にベジエ曲線ツールでパスを描いておきます。
- 画面左側のツールから「テキストパス」ツールを選択します。
- キャンパス上でドラッグして配置範囲を決定します。
- 配置後、
PathReferenceIdに参照する PolyBezier のID(Guid) を設定すると、Textが PolyBezier に沿って 1 文字ずつ並びます。 StartOffset/Spacing/Side(Above/On/Below) /Rotation(Tangent/Upright) で配置を調整できます。
Phase 3 で「L 字 (Orthogonal) コネクタ」「ベジエコネクタ (Anchor 接続版)」「アンカー (吸着点)」「ノード - エッジ風グラフモード」が追加されています。
詳しい使い方とプロパティ仕様、Phase 1 パーツ統合例は docs/fui/phase3-tutorial.md を参照してください。設計仕様は docs/fui/phase3-connectors.md にあります。
- 画面左側のツールから「L 字コネクタ」を選択します。
- キャンパス上でドラッグ開始 → 終点でリリースすると、
RoutingMode = Autoで 1 中間点が自動挿入された L 字が確定します。 - ドラッグ終端が既存図形の 9 点アンカー (暗黙) や明示 AnchorViewModel に 吸着距離 (デフォルト 10 px) 以内なら、自動でアンカー参照が設定され、図形移動に追従します。
RoutingModeをManualにするとMidPointsを 0..N 個任意に編集できます。CornerRadiusで折れ点を丸めることもできます。
- 画面左側のツールから「ベジエコネクタ」を選択します。
- ドラッグで始点 → 終点を指定。制御点は自動で 1/3, 2/3 位置に配置されます。
- アンカー吸着の挙動は L 字コネクタと同じです。
- 画面左側のツールから「アンカー」を選択します。
- 図形 (DesignerItem) の内側をクリックすると、その図形 ID + 相対座標 (RelativeX/Y) を持つアンカーが配置されます。
- アンカーは図形の位置・サイズ・回転に追従します。
- 任意の図形を選択し、右クリックメニューの「ノード化 / ノード解除」をクリックすると
IsNodeフラグがトグルされます。 IsNode = trueの図形を選択すると、その図形を参照しているコネクタが「太さ 1.5 倍 + 色反転」で強調表示されます。選択解除で元に戻ります。
設定 → 設定ダイアログ → 「アンカー吸着距離 (px)」で全コネクタ共通の吸着距離を変更できます (0 〜 任意。推奨 5 〜 30)。
Phase 4 で「組込 4 テーマ (Bladerunner / Matrix / MedicalBlueWhite / AmberCrt)」「線種ライブラリ 6 種」「擬似グロー」が追加されています。FUI らしい世界観をテーマ単位で一括適用できます。
詳しい使い方とプロパティ仕様、Phase 1 パーツ統合例は docs/fui/phase4-tutorial.md を参照してください。設計仕様は docs/fui/phase4-styles-themes.md にあります。
- メニューバー「キャンバス → テーマ選択 / パレット適用...」を選びます。
- テーマ (Bladerunner / Matrix / MedicalBlueWhite / AmberCrt)、適用範囲 (選択中図形 / アクティブレイヤー / プロジェクト全体)、適用対象 (Edge のみ / Fill のみ / 両方) を選びます。
- 「適用」ボタンで対象範囲の EdgeBrush / FillBrush がテーマの primary / background 色で書き換わります。Ctrl+Z で取り消し可能です。
ダイアログの「線種」コンボボックスで Solid / Dash / Dot / DashDot / LongDash / Stepped (段階線) のいずれかを選び「適用」を押すと、対象範囲の StrokeDashArray と StrokeLineJoin が書き換わります。未選択なら StrokeDashArray は変更しません。
ダイアログの「グロー設定を適用」をチェックして「適用」すると、テーマの DefaultGlow (Radius / Intensity / Color) が対象範囲の図形に流し込まれます。各図形は GlowRadius > 0 の間 WPF DropShadowEffect でグロー化されます。図形ごとに GlowRadius = 0 をセットすればグローを外せます。
パーツエディタの「Phase 4 公開可能プロパティ (グロー)」セクションで GlowRadius / GlowIntensity / GlowColor をピン留めすると、パーツインスタンスごとにグローパラメータをカスタマイズできます。
- 画面左側のツールからスナップポイントツールを選択します。
- キャンパス上で任意の点をクリックしてスナップポイントを追加します。
- 画面右側のレイヤーウィンドウで追加されたアイテム（スナップポイント）を右クリックし、スナップポイントを移動を選択します。
- スナップポイントの移動先の点の座標を入力します。
- スナップポイントを移動したら、そのスナップポイントを使って図形を描画します。
- 画面左側のツールから選択ツールを選択します。
- グループ化したい、キャンパス上の任意の図形をクリックします。複数の図形を選択状態にするにはShiftキーを押しながらクリックします。
- 画面上部のツールバーからグループ化をクリックします。
- グループ化解除したいキャンパス上の図形を選択します。
- 画面上部のツールバーからグループ化解除をクリックします。
メニュー > ファイル > 開く
または
メニュー > ファイル > 名前を付けて保存
メニュー > ファイル > 上書き保存
または
メニュー > ファイル > エクスポート
または
複数の図形をひとまとめにして「パーツ」として登録し、配置のたびに公開パラメータで形を変えられる再利用可能な単位を作る機能です。FUI (Fictional User Interface) 制作向けに、同じ図形パターンを繰り返し使うワークフローを支援します。
詳しい使い方とチュートリアルは docs/fui/phase1-tutorial.md を参照してください。
- 画面左側のツールから選択ツールを選択します。
- パーツにしたい図形をクリックして選択します。複数選択にはShiftキーを押しながらクリックします。
- 選択した図形を右クリックし、「パーツ化…」を選択します。
- パーツ名を入力するダイアログが開くので、名前を入力して OK を押します。
- 元の場所にパーツインスタンスが配置され、内部の図形はパーツ定義として登録されます。
- キャンパス上のパーツインスタンスをダブルクリックします。
- 専用のパーツ編集ウィンドウが開き、パーツ定義の中身を編集できます。
- 「矩形を追加」ボタンで図形を追加、「選択を削除」ボタン (または Delete キー) で削除できます。
- 右側のプロパティパネルで選択中の図形の位置・サイズ・枠線・色を編集できます。
- ウィンドウを閉じると変更は同じパーツ定義の全インスタンスに反映されます。
パーツ編集ウィンドウの右側「公開パラメータ」セクションから、パーツ定義に対して公開パラメータを追加・削除できます。
- パーツ編集ウィンドウを開き、右側パネル下部の「公開パラメータを追加…」を押します。
- ダイアログで名前、型 (Double / Int / Boolean / Point / Color / Brush / String / Enum)、デフォルト値を入力します。
- OK で追加されると、そのパーツ定義を参照する全インスタンスに公開状態を示す「公」バッジが表示されます。
- 不要になった公開パラメータは一覧項目右端の「×」ボタンで削除できます。
- キャンパス上のパーツインスタンスを右クリックし、「複製して新パーツとして登録」を選択します。
- 元のパーツ定義のディープコピーが新パーツとして登録され、専用編集ウィンドウが開きます。
- 新パーツは元パーツから独立しているため、自由に編集しても元のパーツには影響しません。
- キャンパス上のパーツインスタンスを右クリックし、「パーツから切り離す」を選択します。
- インスタンスが生の図形群に展開され、以後パーツ定義との関連が失われます。
- パーツ定義そのものや他のインスタンスは影響を受けません。Undo で切り離し前の状態に戻せます。
- エクスポート: パーツインスタンスを右クリック → 「パーツをエクスポート…」で
.bgpart形式の単独ファイルとして保存。 - インポート: メニュー > ファイル > 「パーツをインポート… (.bgpart)」で
.bgpartを読み込み、現プロジェクトのパーツ定義に追加。
切り離し後などで、もうどのインスタンスからも参照されていないパーツ定義が残ることがあります。
- メニュー > ファイル > 「未使用パーツ定義を削除…」を選択します。
- 未使用件数を確認するダイアログが出るので OK を押すと一括削除されます。
- Undo で削除前の状態に戻せます。
詳しい操作は以下のチュートリアルを参照してください。
docs/fui/phase5-tutorial.md— Timeline / Track / Keyframe / 再生 / PNG 連番書出docs/fui/phase5-5-tutorial.md— WPF Storyboard / MAUI Animation XAML 出力docs/fui/phase6-tutorial.md— テキスト系 5 種 (MonoText / DataGen / NumSeq / TextMatrix / TextOnPath) の XAML 出力対応
要点:
- 画面下部
TimelineExpander を開く。 - 図形のプロパティダイアログで各行の ◇ ボタンをクリックして現時刻にキーフレームを打つ。
- Now を別時刻に進めて値を変更 → もう一度 ◇ で 2 つ目のキーフレーム。これで補間アニメ完成。
- トランスポートバーの ▶ で再生 / Loop チェックで折返し。
- 「PNG 連番...」「WPF XAML...」「MAUI XAML...」ボタンから書き出し可能。
- PNG 連番: 各フレームを 0001.png〜 として保存。
- WPF XAML:
UserControl+Storyboardの.xaml(+ オプションで.xaml.cs) を生成、実 WPF アプリへコピペで組み込み可能。 - MAUI XAML:
ContentViewの.xaml+ Animation コードビハインドの.xaml.csを生成、実 .NET MAUI アプリへコピペで組み込み可能。