GLSLシェーダーで遊ぶ「Glsl Viewer」
- Digital100 JPY

《操作説明書》 ・本ツールは、直感的な操作で、 複雑なゲーム用エフェクトや弾幕を プログラミング不要で作成できるツールです。 ツールの概要 ・本ツールは、器となる「ベース」に、 様々な効果を持った「パラメータ」を組み合わせていくことで、 リアルタイムにエフェクトを構築・確認できるエディターです。 ・作成したエフェクトは、 ゲーム開発用のスプライトシート(連番画像)や GLSLシェーダーコードとして出力できます。 画面の構成 (1) メニューバー(画面上部): ファイルの保存・読み込み、エフェクトの画像出力、 操作の取り消し・やり直し、 レイアウトやタイムラインの設定を行います。 (2) 大元リスト(画面左側): キャンバスに作成したベース(大元)が一覧表示されます。 ここからキャンバスへドラッグすると、 同じ動きをする「分身(インスタンス)」を複数配置できます。 (3) ツールバー(画面中央上): 新しいベースや、追加したいパラメータ(効果)を選択して キャンバスに出現させます。 (4) キャンバス(画面中央): ベースやパラメータを配置し、 つなぎ合わせてエフェクトを組み立てる作業エリアです。 (5) プレビュー(画面右側): 作成中のエフェクトがリアルタイムに表示されます。 (6) タイムライン(画面下部): エフェクトの再生・一時停止、時間の確認や シーク(巻き戻し・早送り)が行えます。 基本操作 (1) ベースの配置: ツールバーの「🎇新規ベース」をクリックすると、 キャンバスにベースが出現します。 (2) 開閉操作: キャンバス上のベースを「ダブルクリック」すると、 展開(円が大きくなる)と収納を切り替えることができます。 (3) パラメータの追加と設定: ツールバーから「🎨色」や「➡️直線移動」などのパラメータを出し、 展開しているベースの円の中にドラッグ&ドロップすると、 カチッとはまり込んで効果が適用されます。 (4) パラメータの調整: はめ込んだパラメータ、または 独立しているパラメータを「ダブルクリック」すると、 詳細な数値を調整するスライダーが表示されます。 スライダーを動かすとプレビューに即座に反映されます。 (5) ベースの階層化(親子関係): 展開しているベースの中に、 別のベースをドラッグ&ドロップで入れることができます。 中に入った「子」のベースは、 「親」の動きや色、形をそのまま受け継ぎ、 さらに自分自身の動きを重ね合わせることができます。 (例:親が回転し、子がその周囲を回りながら直進する、など) (6) コピーと削除: オブジェクトを右クリックするとメニューが開き、 コピーや削除ができます。 DeleteキーやBackspaceキーでの削除も可能です。 パラメータの種類 【見た目】 (1) 📐形: 円や多角形を作り、大きさを決めます。 (2) 🎨色: 色相・彩度・明度を調整して色をつけます。 (3) 🖼️画像: PC内の画像ファイルを読み込んで表示します。 (4) 🎞️アニメ: 横に繋がったスプライトシート画像を読み込み、 パラパラアニメとして再生します。 【特殊】 (1) ⏳時間制御: 発生を遅らせたり、 一定時間で消滅(フェードアウト)させたり、 ループする寿命を決めます。 (2) 💫残像: 動いた軌跡に光の帯や残像を残します。 (3) 🌊空間の歪み: 背景を波打つように歪ませ、 衝撃波や陽炎を表現します。 (4) 🌟フィルター: ドット絵風にモザイク化したり、 発光(グロー)させたりします。 (5) ✨パーティクル: 指定した形や画像を、火花のように複数に分裂させて 弾け飛ばします。 【動き】 (1) ➡️直線移動: 上下左右に移動し続けます。 (2) ↔️反復移動: 指定した角度に向かって、行ったり来たりします。 (3) 🪀バウンド: 地面で跳ねるような動きをします。 (4) ⤴️放物線: 重力に従って放物線を描いて飛びます。 (5) 🌀渦巻き: 回転しながら徐々に広がっていきます。 (6) 🔄空間回転: 空間そのものを回します。 (親に付けると、子が衛星のように公転します) (7) 🎯ターゲット追尾: 指定した座標に向かって徐々に曲がりながら進みます。 (8) 🧲イージング: 動きの始まりや終わりを滑らかに加減速させます。 (9) 🫨揺らぎ: 炎の揺れのような、ランダムで不規則な動きを加えます。 (10) 🪨落下と弾み: 重力で落下しながら回転します。 便利機能 (1) テンプレート登録: お気に入りのエフェクトができた際、 ベースを選択してツールバーの「➕登録」を押すと、 ボタンとして保存されます。 次回以降、ワンクリックで同じものを呼び出せます。 (2) キャンバスの移動とズーム: キャンバスの何もない場所をドラッグすると、 画面をスクロールできます。 キーボードの「PageUp」「PageDown」キーで ズームイン・ズームアウトが可能です。 (3) グリッドスナップ: 画面右上の「📏グリッドスナップ」にチェックを入れると、 マス目に沿って綺麗にオブジェクトを配置できます。 (4) スプライトシート出力: メニューバーの「ファイル」から 「🎬スプライトシート出力」を選ぶと、 設定した秒数とコマ数でエフェクトを自動録画し、 ゲーム開発ですぐに使える1枚の連番画像(PNG)として 保存します。
