Nodegram (Unity版)
ノードプログラミングツール。スマホ、タブレット、PCで使える。
Web版（Unity）はサイズが大きいため、Web での使用はサイズの小さいHTML5版をおすすめします。（Unity 版の2%程度）
1. Nodegram とは
Nodegram は、Unity で作られたノードベースのプログラミングツールです。
四則演算・比較などの「演算ノード」と、四角・円・キャラクターなどの「オブジェクトノード」をワイヤーでつなぐことで、コードを書かずにゲームやインタラクティブな作品を組み立てられます。
作ったものは Play画面 で実行でき、ジャンプなどの物理挙動もリアルタイムに動きます。
ブラウザ（WebGL）で動作します（Windows用のEXEも配布しています）。
2. 基本的な使い方
Nodegram には NodeEditor画面・Layout画面・Play画面 の3つの操作画面があります。
2-1. ノードを作成する（NodeEditor）
- NodeEditor画面の何もない所を長押し、またはダブルクリックすると「CREATE NODE」画面が開きます。
- 一覧から追加したいノードを選ぶと、NodeEditorの中央にノードが作成されます。
- 複数のノードを配置します。
- ノードの右にある出力ポートから入力ポート（ノードの左）へドラッグしてワイヤー接続します。
2-2. レイアウトに配置する（Layout）
- Layout画面に切り替えるには「Menu」ボタンを下にフリック（ドラッグ）して下のボタンの上で指を（マウスボタンを）離すと切り替わります。
- Rect・Circle・Character・Text・Button・Stick・Shot などのオブジェクト系、操作系ノードは Layoutで画面 でゲーム画面での配置位置を決めます。
- オブジェクトのドラッグで移動、オブジェクトの右、下にある黄色いハンドルでサイズを、左上にあるハンドルで向きを調整します。
- 「MENU」ボタンを再度下にフリック（ドラッグ）して下のボタンの上で指を（マウスボタンを）離すとNodeEditor画面に戻ります。
- NodeEditor で子端子（ノードの上）から親端子（下）を接続すると、親の移動・回転に子が追従します。
2-3. 実行する（Play）
- NodeEditor、またはLayout画面に右上の▶（Play）ボタンでPlay画面に切りわかります。
切り替わるとすぐにプログラムを実行します。 - Play 画面右上の □（Stop）ボタンで停止します。
- Play 画面では描画系ノードが60分の1秒（1フレーム）ごとに描かれ、物理演算とともに動きます。
- Stick・Button・キーボードなどで操作させることができます。
3. ビューの説明と操作
3-1. NodeEditor の操作
ノードを並べてワイヤーでつなぐ、ノード構築画面です。
| 操作 | 内容 |
|---|---|
| 1本指ドラッグ（背景） | ビューの移動 |
| ホイール回転、2本指ピンチ | 拡大・縮小 |
| ダブルクリック→ドラッグ（背景） | 範囲選択（複数ノード選択） |
| 背景を長押し | CREATE NODE 画面を開く |
| ノードをドラッグ | ノード移動（複数選択時はまとめて移動） ドラッグ中に画面端へ寄せるその方向へビューが自動スクロール |
| ノードをダブルクリック／長押し | プロパティ画面を開く（複数選択時は Duplicate/Delete メニュー） |
| 端子間をドラッグ | ワイヤー接続 |
| 接続線を長押し／ドラッグアウト | 接続の解除 |
（ボタンを押して移動し、放したところのボタンの機能が実行される）
下にフリックし「田」のボタンを選ぶとLayout画面に切り替わります。
左にフリックするとUndo、Redoを行うことができます。
フリックで SAVE、LOAD を選ぶとデバイスに保存、デバイスからの読み込みができます。
フリックで [FIT] を選ぶと全ノードがビューに入るようにビューの表示位置を移動します。
QUITで nodegram を終了させます。
WebGLで表示と操作位置がズレることがありますが
ボタンで直ることがあります。直らない場合は nodegram を終了。タスクを消し（アプリを削除するのではない）、スマホの向きをしっかり横向きにして再度起動すると直ります。
3-2. Layout 画面の操作
オブジェクトの配置・サイズ・回転を決める画面です。グレーの矩形が Play時の表示エリアを表します。
NodeEditorと同じ操作です。
| 操作 | 内容 |
|---|---|
| 1本指ドラッグ（背景） | ビューの移動 |
| マウスホイール／2本指ピンチ | 拡大・縮小 |
| オブジェクトをドラッグ | 移動（複数選択時はまとめて移動） |
| オブジェクトをタップ | 選択。この選択はNodeEditorと共有 |
| ハンドルをドラッグ | サイズ変更・回転 |
| ダブルクリック→ドラッグ（背景） | 範囲選択（複数選択） |
| 背景を長押し | CREATE NODE 画面を開く |
| 選択を長押し | Duplicate / Delete メニュー |
3-3. Play 画面の操作
実行画面です。Screenノードを使うとカメラ（表示位置・ズーム）を制御できます。Screenノードが無い場合は基準の固定表示になります。
| 操作 | 内容 |
|---|---|
| 右上の □ ボタン | 実行停止してEditor画面に戻る |
| Stick・Button | 画面上の仮想入力デバイスを操作 |
| キーボード / ゲームパッド | Keyboard・Stick・Button ノードにマッピングして操作 |
カメラについて： Play画面はデフォルトではカメラが移動しません。キャラクターが遠くへ移動すると画面外に出ていくため、追従させたい場合は Screen ノード とキャラクターをつないでください。
4. ノード操作
- 作成： Editor/Layoutの背景（ノードが無い空間）を長押しして CREATE NODE 画面を開いて作りたいノードを選択。
- 接続（ワイヤー）： 出力ポート（右）→入力ポート（左）へドラッグ。＋ (Plus)ノードだけは1つの入力に複数本つなげて合計できます。
- 接続の解除： 接続線を長押し、または端子から外側へドラッグして離す。
- 親子接続： オブジェクト系ノード上部中央の「親子端子」を、親にしたいノードへドラッグ。親の移動・回転に子が追従します。
親が子を複数持っても子は親を複数指定することはできません。
ただし Textureノードだけは複数の親を持つことができます。 - プロパティ編集： ノードをタップ（または長押し）してプロパティ画面を開き、値・サイズ・色・物理モード・回転などを編集。
- 複製・削除： 複数選択して長押し→ Duplicate / Delete。単体はプロパティ画面内の DUPLICATE / DELETE。
- Undo / Redo： 直前の操作の取り消し・やり直しに対応。
- 保存 / 読み込み： Save で名前を付けて保存。auto save をオンにすると 1分ごとにオートセーブ。URLからの読み込みにも対応（7章）。
5. 仕様
5-1. 2D 専用
Nodegram は 2D 専用です。座標は X（右が＋）・Y（上が＋）の2軸で。物理は Unity の 2D 物理（Rigidbody2D / Collider2D）を使っているのでオブジェクトは画面下に落ちます。
トップビューのゲームを作る時はSETTINGノードでゲーム全体の重力をオフにします。
5-2. FPS
目標フレームレートは 60 または 30 を SETTING ノードで選択します（デフォルト 60）。ノードの評価も物理も、このFPSを基準に進行します。
5-3. Dynamics（Unity準拠）
Rect・Circle・Character などのオブジェクトには物理モード（Dynamics）を設定できます。挙動は Unity の Rigidbody2D に準拠します。
| モード | 挙動 |
|---|---|
| Off | 物理なし。ノード入力（X,Y）で座標を直接移動するだけ。 |
| Static | 動かない壁・床。重力や衝突では動かない。 |
| Dynamic | 重力・衝突を受けて物理的に動く。ノードのX/Y入力は「力（フォース）」として加わる（力＝入力値×500）。 |
| Kinematic | 重力・衝突では動かないが、ノード入力で強制移動でき、他のDynamicに衝突・干渉できる。 |
比重の指定はありませんが一般的な木材程度を基準にしています。
5-4. SortingLayer（表示順）
各オブジェクトの SortLayer（0〜100、既定 50）で表示の重なり順を決めます。数値が大きいほど手前（上）に描画されます。BG（背景）は常に最背面です。
同じ値どうしは、追加した順に表示されます。
親子接続したオブジェクトは、子が親より手前に描画される点に注意してください。
5-5. 座標
- 座標系は X（右＋）・Y（上＋）。Layoutの中心が原点(0,0)付近です。
- SETTINGの座標モードで、ノードのX/Y入力の意味が変わります。
- WORLD：入力値を絶対座標として適用（親がいる場合は親基準のローカル絶対座標）。
- LOCAL：入力値を初期配置位置からの相対オフセットとして適用。親を指定している場合は親からのオフセットも含みます。
- 入力がつながっていない入力端子（XまたはY）は上書きされず、現在位置を維持します。
5-6. 解像度
Play時の表示エリアはLayoutのグレー矩形のサイズです。
画面向き（横=YOKO／縦=TATE）はSETTINGで切り替えられ、実機の画面サイズに合わせてフィット表示されます。
6. スマホでの挙動
- タッチ操作： 1本指でパン、2本指でピンチズーム。長押しやダブルタップ→ドラッグなどPCと同様に操作できます。
- 縦横の切り替え： 端末を回転すると画面の縦横に追従します。Play中の表示向きはSETTINGの向き（YOKO/TATE）に従い、想定と違う向きのときは案内（"Rotate to Portrait / Landscape"）が表示されます。
- iOS（ホーム画面に追加 / 全画面）： iPhone などの iOS で全画面表示させるには、Safariのメニューから共有アイコンをタップ、ホーム画面に追加を選択します。
※ 携帯での実行は画面サイズや表示位置がずれることがあります。MENU からリロード（ぐるっとの矢印）を選ぶか、タスクを消して起動しなおすとなおることが多いです。
7. URLでデータを指定する
WebGL版は、URLの ?url= パラメータに YAML データのURLを指定すると、その作品を読み込んでそのまま Play画面で自動実行します。
作品を「遊べるリンク」として共有できます。
基本形
https://daisuqe.github.io/nodegram0/?url=https://example.com/data.yamlGoogle Drive のリンクを使う場合
共有リンクをそのまま貼れます。内部で自動的に直接ダウンロード用URLへ変換します。
https://daisuqe.github.io/nodegram0/?url=https://drive.google.com/file/d/1mRrF2A2ASc5_q7hekWgMX9aevKVjrDHG/view?usp=sharing内部的には次のような直リンクへ変換して取得します：
https://drive.google.com/uc?export=download&id=1mRrF2A2ASc5_q7hekWgMX9aevKVjrDHGCORS（クロスオリジン）に注意： WebGLからの取得はブラウザのCORS制限を受けます。
- GitHub の raw（raw.githubusercontent.com）や GitHub Pages など、CORSを許可しているホストは確実に読み込めます。
- Google Drive はCORSヘッダを返さない場合があり、その際はブラウザにブロックされて読み込めないことがあります。確実に配布したい場合は GitHub の raw URL を推奨します。
- Driveの大容量ファイルはウイルススキャン警告ページが挟まることがありますが、YAMLは小さいので通常は直接ダウンロードされます。
アプリ内のLOAD→Importからも同じ仕組み（Drive自動変換込み）で読み込めます。
8. ノード解説
入力／出力はポート数です（入 = 入力出 = 出力）。
ノードはエディタ上の背景色でカテゴリ分けされています。
緑：入力系
| ノード | 入/出 | 説明 |
|---|---|---|
| Constant | 0 / 1 | 数字を出力します。 |
青：計算系
| ノード | 入/出 | 説明 |
|---|---|---|
| ＋ | 1(多重) / 1 | つないだ入力をすべて合計して出力。1入力に複数結線できる唯一のノード。 |
| － | 2 / 1 | 入力0 − 入力1。 |
| × | 2 / 1 | 入力0 × 入力1。 |
| ÷ | 2 / 1 | 入力0 ÷ 入力1（分母0なら0）。 |
| √ | 1 / 1 | 平方根（負なら0）。 |
| Compare | 2 / 1 | 入力0と入力1を比較（= > < ≠ ≧ ≦）。真=1 / 偽=0。 |
| Not ( ! ) | 1 / 1 | 入力0なら1、それ以外は0。 |
| PosToRot | 2 / 1 | ArcTan2(入力1, 入力0) を度で出力。 |
| RotToPos | 1 / 2 | 角度(度)から (cos, sin) を出力。 |
| Random | 1 / 1 | 0〜Value プロパティ未満の整数乱数。 Valueに10を指定すると０～９の10種類の数字のどれかが出力されます。 入力が非0のとき（＆初期化時）に更新。 |
| Int | 1 / 1 | 整数化。INT（0方向切り捨て）/ 床関数方式なので入力値より少ない一番近い整数、例えば -0.1 は -1 になります。 |
水色：数値操作系
| ノード | 入/出 | 説明 |
|---|---|---|
| Trigger | 1 / 1 | 入力が「0以下→1以上」に立ち上がった瞬間だけ1フレーム1を出力。 DELAY(F)で指定フレーム遅延も可。 |
| Counter | 1 / 1 | 入力を毎フレーム加算した累計を出力。FREE / LIMIT / LOOP と Min/Max を設定可。 counter の出力値を計算して入力側に再び入力に入れる場合など遅延が起こらず思った値にならない場合があります。この場合はTriggerノードのDELAYプロパティを併用してください。 |
| Var | 2 / 1 | 入力1のセット信号に0以外の数値が指定されたとき入力0を記憶し、出力。初期値あり。 |
| Array | 3 / 1 | 入力1のインデックス(0〜63)に、入力2のセット信号で入力0を記憶。 出力は現在のインデックスの値。 初期値リストは複数の数字を「,」もしくは「/」で区切って書き込んでください。 |
| GetPos | 0 / 2 | 対象（または親）の現在位置 X, Y を取得。WORLD/LOCAL切替。 |
| GetRot | 0 / 1 | 対象（または親）の現在角度(Z, −180〜180)を取得。WORLD/LOCAL切替。 |
紫：出力系
| ノード | 入/出 | 説明 |
|---|---|---|
| Text | 2 / 0 | テキスト表示。入力が未接続なら Value で指定した文字を表示、接続時は数値を表示。入力1で表示のオンオフ。数字の周りの四角の表示オンオフは View Rectで設定します。 |
| Rect | 3 / 0 | 長方形。入力0/1=X/Y位置、入力2=可視状態の指定。 Dynamics・タグ・破壊タグ・サイズ・回転・SortLayerなど。 |
| Circle | 3 / 0 | 円。入力仕様はRectと同様。 |
| Character | 2 / 0 | 物理キャラ。入力0/1=左右移動(−1〜1)、入力2=ジャンプ(非0でトリガー)。移動速度など設定可。キャラクターに引力を影響を受けさせたくない場合はSettingノードでGravityをオフにしてください。 |
| Shot | 1 / 0 | 弾を発射。入力0が発射トリガー。最大弾数・間隔・速度・形状・サイズ・色・衝突タグ設定可。BREAK BYで消滅タグ(ALL含む/最大3タグ)を指定可。 |
| Sound | 2 / 0 | 8bitシンセ音。入力0=音階(ハ長調,0=C4)、入力1=オンオフ。音量設定可。 |
オレンジ：操作系
| ノード | 入/出 | 説明 |
|---|---|---|
| Stick | 1 / 2 | 仮想スティック。出力0/1=X/Yの傾き。入力0で可視。アナログ/デジタル・1軸制限・キー/パッド割当あり。 |
| Button | 1 / 1 | 仮想ボタン。押下中/押した瞬間に1。入力0で可視。見た目・出力タイプ・ゲームパッド割当あり。 |
| Keyboard | 0 / 1 | 指定キーが押されていれば1。文字列が指定されていれば「いずれか」の文字に反応。\u \d \l \r=矢印、\s/スペース=Space、\e=Enter、\\=バックスラッシュ。 |
| Touch | 0 / 3 | 画面タッチ。出力0=X, 出力1=Y（中央が0,0）、出力2=S（タッチ中の信号）。 |
黄色：そのほかのノード
| ノード | 入/出 | 説明 |
|---|---|---|
| SENSOR | 0 / 1 | 接触検知。対象(ALL/RECT/CIRCLE/CHARA/SHOT/TAG)に接触中は1、非接触は0。自身の判定形状(RECT/CIRCLE)を選択可。 |
| Velocity | 0 / 2 | 親オブジェクトの速度 X, Yを秒速換算で出力。 単フレームだと不安定なため、FRAMES(1〜10)で平均するフレーム数を指定可（1=現在フレームのみ、10=直近10フレームの平均）。既定1。 |
| Rotate | 1 / 0 | オブジェクトを回転ヒンジで接続。入力0で回転角/角速度を制御。 |
| OnBreak | 0 / 1 | 同一フレームで破壊されたオブジェクト数を出力。破壊エフェクト(Particle/Line/Circle/Rect)と色を設定可。 |
| Screen | 3 / 2 | Play時のカメラ制御。入力0/1=カメラ位置X/Y、入力2=Scale(ズーム)。出力=画面幅W・高さH。Screenが親を持つ場合は親に追従。 |
| Texture | 1 / 0 | 16×16ドット絵を編集・保持し、割り当てたオブジェクトの絵柄にする。複数の親に割当可。入力0=Visible（0でそのテクスチャを適用しない＝複数テクスチャの切替に使用、未接続は有効）。キャラクターの進行方向によって自動左右反転(FLIP)フラグあり(既定OFF)。 |
グレー：シーン設定系
| ノード | 入/出 | 説明 |
|---|---|---|
| Bg | 0 / 0 | 実行画面の背景色（パレットから選択）。シーンに1つ。常に最背面。 |
| Setting | 0 / 0 | シーン全体設定。SCREEN(スマホ縦画面、横画面)・FPS・Dynamics ON/OFF・重力/摩擦/反発/空気抵抗などの物理パラメータ。 STOPボタンの色も指定できます。シーンに1つ。 |
プロパティ画面の並び（オブジェクト系）
9. 注意点
- 2D専用： 3D的な奥行きはありません。重なり順は SortLayer（＋親子階層）で決めます。
- WebGLで表示と操作位置がズレることがあります。
フリックメニューの
直らない場合は nodegram を終了。タスクを消し（アプリを削除するのではない）、スマホの向きをしっかり横向きにして再度起動すると直ります。 - Bg / Setting は1つずつ： すでに存在する場合は追加できません（既存へ案内されます）。
- 親子とSortLayer： 子は必ず親より手前に描画されます。階層をまたいだ厳密な重なり指定はできません。
- URL読み込みのCORS： WebGLはCORS制限を受けます。Google Driveは読めない場合があるため、GitHubのraw URL等を推奨します（7章）。
- 複数の親はTextureのみ： 通常ノードの親は1つです。複数の親を持てるのはTextureだけです。
- 自動セーブ： save 画面の「auto save」がオンになっていると、1分ごとに直前のファイルへ上書きされます。別名で残したいときはSaveで新しい名前を付けてください。
10. 連絡先
- バグ報告、連絡があれば Xに連絡ください
https://x.com/daiii
0 件のコメント:
コメントを投稿