Nodegram
スマホ、タブレット、PCで使えるノードプログラミングツール。
1. Nodegram とは
Nodegram は、Unity で作られたノードベースのプログラミングツールです。
四則演算・比較などの「演算ノード」と、四角・円・キャラクター・弾などの「オブジェクトノード」をワイヤーでつなぐことで、コードを書かずにゲームやインタラクティブな作品を組み立てられます。
作ったものは Play画面 で実行でき、ジャンプなどの物理挙動もリアルタイムに動きます。
ブラウザ(WebGL)で動作します(Windows用のEXEも配布しています)。
2. 基本的な使い方
Nodegram には NodeEditor画面・Layout画面・Play画面 の3つの操作画面があります。
2-1. ノードを作成する(NodeEditor)
- NodeEditor画面の何もない所を長押し、またはダブルクリックすると「CREATE NODE」画面が開きます。
- 一覧から追加したいノードを選ぶと、画面(Layoutビュー)の中央に作成されます。
- 出力ポート(右)から入力ポート(左)へドラッグしてワイヤー接続します。
2-2. レイアウトに配置する(Layout)
- Layout画面に切り替えるには「Menu」ボタンを下にフリック(ドラッグ)して下のボタンの上で指を(マウスボタンを)離すと切り替わります。
- Rect・Circle・Character・Text・Button・Stick・Shot などのオブジェクト系、操作系ノードを作ると、Layoutで画面のどこに置くか配置できます。
- オブジェクトのドラッグで移動、ハンドルでサイズ・角度を調整します。
- 「MENU」ボタンを再度下にフリック(ドラッグ)して下のボタンの上で指を(マウスボタンを)離すとNodeEditor画面に切り替わります。
- NodeEditor で子端子(上)から親端子(下)を接続すると、親の移動・回転に子が追従します。
2-3. 実行する(Play)
- 右上の▶(Play)ボタンでPlay画面に切りわかりプログラムを実行します。
- Play 画面の ■(Stop)ボタンで停止します。
- Play 画面では描画系ノードが60分の1秒(1フレーム)ごとに描かれ、物理演算とともに動きます。
- Stick・Button・キーボードなどで操作させることができます。
3. ビューの説明と操作
3-1. NodeEditor の操作
ノードを並べてワイヤーでつなぐ、ロジック構築画面です。
| 操作 | 内容 |
|---|---|
| 1本指ドラッグ(背景) | ビューの移動 |
| 2本指ピンチ | 拡大・縮小 |
| ダブルクリック→ドラッグ(背景) | 範囲選択(複数ノード選択) |
| 背景を長押し | CREATE NODE 画面を開く |
| ノードをドラッグ | ノード移動(複数選択時はまとめて移動) |
| ノードをダブルクリック/長押し | プロパティ画面を開く(複数選択時は Duplicate/Delete メニュー) |
| 端子間をドラッグ | ワイヤー接続 |
| 接続線を長押し/ドラッグアウト | 接続の解除 |
| ドラッグ中に画面端へ寄せる | その方向へビューが自動スクロール |
Menuボタンはフリックメニューになっています。
下にフリックするとLayout画面に切り替わります。
左にフリックするとUndo、Redoを行うことができます。
フリックで SAVE、LOAD を選ぶとデバイスに保存、デバイスからの読み込みができます。
フリックで [FIT] を選ぶと全ノードがビューに入るようにビューの表示位置を移動します。
3-2. Layout 画面の操作
オブジェクトの配置・サイズ・回転を決める画面です。グレーの矩形が Play時の表示エリアを表します。
| 操作 | 内容 |
|---|---|
| 1本指ドラッグ(背景) | ビューの移動 |
| 2本指ピンチ | 拡大・縮小 |
| オブジェクトをドラッグ | 移動(複数選択時はまとめて移動) |
| オブジェクトをタップ | 選択。この選択はNodeEditorと共有 |
| ハンドルをドラッグ | サイズ変更・回転 |
| ダブルクリック→ドラッグ(背景) | 範囲選択(複数選択) |
| 背景を長押し | CREATE NODE 画面を開く |
| 選択を長押し | Duplicate / Delete メニュー |
3-3. Play 画面の操作
実行画面です。Screenノードを使うとカメラ(表示位置・ズーム)を制御できます。Screenノードが無い場合は基準の固定表示になります。
| 操作 | 内容 |
|---|---|
| ▶ / ■ ボタン | 実行 / 停止 |
| Stick・Button | 画面上の仮想入力デバイスを操作 |
| キーボード / ゲームパッド | Keyboard・Stick・Button ノードにマッピングして操作 |
4. ノード操作
- 作成: Editor/Layoutの背景を長押し、または背景ダブルクリック→ドラッグの範囲外タップ等から CREATE NODE を開いて選択。
- 接続(ワイヤー): 出力ポート(右)→入力ポート(左)へドラッグ。Plusノードだけは1つの入力に複数本つなげて合計できます。
- 接続の解除: 接続線を長押し、または端子から外側へドラッグして離す。
- 親子接続: オブジェクト系ノード上部中央の「親子端子」を、親にしたいノードへドラッグ。親の移動・回転に子が追従します。
- 複数の親(Textureのみ): Textureノードは複数の親を持てます。親へドラッグするたびに接続をトグル(追加/解除)でき、1つのテクスチャを複数オブジェクトに割り当てられます。
- プロパティ編集: ノードをタップ(または長押し)してプロパティ画面を開き、値・サイズ・色・物理モード・回転などを編集。
- 複製・削除: 複数選択して長押し→ 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
目標フレームレートは 30 または 60 を SETTING ノードで選択します(デフォルト 60)。ノードの評価も物理も、このFPSを基準に進行します。VELOCITY等の「フレーム」を扱うノードもこのFPSが基準です。
5-3. Dynamics(Unity準拠)
Rect・Circle・Character などのオブジェクトには物理モード(Dynamics)を設定できます。挙動は Unity の Rigidbody2D に準拠します。
| モード | 挙動 |
|---|---|
| Off | 物理なし。ノード入力(X,Y)で座標を直接移動するだけ。 |
| Static | 動かない壁・床。重力や衝突では動かない。 |
| Dynamic | 重力・衝突を受けて物理的に動く。ノードのX/Y入力は「力(フォース)」として加わる(力=入力値×500)。 |
| Kinematic | 重力・衝突では動かないが、ノード入力で強制移動でき、他のDynamicに衝突・干渉できる。 |
衝突すり抜け防止のため、物理オブジェクトの衝突判定は Continuous に設定されます。SETTING で Dynamics 全体のON/OFFや、重力・摩擦(Friction)・反発(Bounciness)・空気抵抗(Drag)などのパラメータをシーン全体に適用できます。比重は一般的な木材程度を基準にしています。
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")が表示されます。CREATE NODE のノード一覧の列数も、横画面/縦画面で自動的に組み替わります。
- iOS(ホーム画面に追加 / 全画面): iPhone などの iOS で全画面表示させるには、Safariのメニューから共有アイコンをタップ、ホーム画面に追加を選択します。
※ 携帯での実行は画面サイズや表示位置がずれることがあります。起動しなおすとなおることが多いです。
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_q7hekWgMX9aevKVjrDHG- GitHub の raw(raw.githubusercontent.com)や GitHub Pages など、CORSを許可しているホストは確実に読み込めます。
- Google Drive はCORSヘッダを返さない場合があり、その際はブラウザにブロックされて読み込めないことがあります。確実に配布したい場合は GitHub の raw URL を推奨します。
- Driveの大容量ファイルはウイルススキャン警告ページが挟まることがありますが、YAMLは小さいので通常は直接ダウンロードされます。
アプリ内の「URL取込」ダイアログからも同じ仕組み(Drive自動変換込み)で読み込めます。
8. ノード解説
入力/出力はポート数です(入 = 入力出 = 出力)。ノードはエディタ上の背景色でカテゴリ分けされています。以下、色ごとにまとめます。左端のノード名セルの色は、実際のノードの色に対応します。
緑:入力系
| ノード | 入/出 | 説明 |
|---|---|---|
| Constant | 0 / 1 | 固定値を出力(constValue)。ロジックに数値を与える基本の入力ノード。 |
青:計算系
| ノード | 入/出 | 説明 |
|---|---|---|
| + | 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 | Atan2(入力1, 入力0) を度で出力。 |
| RotToPos | 1 / 2 | 角度(度)から (cos, sin) を出力。 |
| Random | 1 / 1 | 0〜constValue未満の整数乱数。入力が非0のとき(&初期化時)に更新。 |
| Int | 1 / 1 | 整数化。INT(0方向切り捨て)/ STEP(床関数)。 |
水色:応用計算系
| ノード | 入/出 | 説明 |
|---|---|---|
| Trigger | 1 / 1 | 入力が「0以下→1以上」に立ち上がった瞬間だけ1フレーム1を出力。DELAY(F)で指定フレーム遅延も可。 |
| Counter | 1 / 1 | 入力を毎フレーム加算した累計を出力。FREE / LIMIT / LOOP と Min/Max を設定可。 |
| Var | 2 / 1 | 入力1のセット信号(|値|>0.0001)のとき入力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 | テキスト表示。入力0未接続なら文字(textValue)、接続時は数値を表示。入力1でフォントサイズ。View Rect設定あり。 |
| Rect | 3 / 0 | 長方形。入力0/1=X/Yオフセット、入力2=可視。Dynamics・タグ・破壊タグ・サイズ・回転・SortLayerなど。 |
| Circle | 3 / 0 | 円。入力仕様はRectと同様。 |
| Character | 2 / 0 | 物理キャラ。入力0=左右移動(−1〜1)、入力1=ジャンプ(非0でトリガー)。移動速度など設定可。Visible(既定ON)。 |
| 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・重力/摩擦/反発/空気抵抗などの物理パラメータ・STOPCOLOR・座標モード(WORLD/LOCAL)。シーンに1つ。 |
プロパティ画面の並び(オブジェクト系)
width, height, 座標, スタイル, 色, タグ, breaked by, null node, dynamics, SortLayer, (DUPLICATE, DELETE)の順。SETTINGは SCREEN, FPS, Dynamics ON/OFF, 各Dynamicsパラメータ, STOPCOLOR,(DUPLICATE, DELETE)の順。
9. 注意点
- 2D専用: 3D的な奥行きはありません。重なり順は SortLayer(+親子階層)で決めます。
- Bg / Setting は1つずつ: すでに存在する場合は追加できません(既存へ案内されます)。
- Play中のカメラ: Screenノードを設定しない限りカメラは固定です。主人公を追う場合はScreenを使ってください。
- 親子とSortLayer: 子は必ず親より手前に描画されます。階層をまたいだ厳密な重なり指定はできません。
- URL読み込みのCORS: WebGLはCORS制限を受けます。Google Driveは読めない場合があるため、GitHubのraw URL等を推奨します(7章)。
- 複数の親はTextureのみ: 通常ノードの親は1つです。複数の親を持てるのはTextureだけです。
- WebGLのビルド反映: ソースを更新した場合、反映にはUnityでのWebGL再ビルド/再デプロイが必要です。
- 自動セーブ: 1分ごとに直前のファイルへ上書きされます。別名で残したいときはSaveで新しい名前を付けてください。
ダウンロード / リンク
- WebGL版(ブラウザ): https://daisuqe.github.io/nodegram0/
- Windows版(EXE): 配布ファイルをダウンロードして実行してください。
0 件のコメント:
コメントを投稿