1. nodegram とは
nodegram は ノードでプログラミングするツールです。
ジョイスティックノードとキャラクターノードを繋ぐだけでキャラクターを動かすことができます。
・スマホやPCでプログラミングができます。
・作ったゲームを他の人に遊んでもらうことができます。
・nodegram はインターネット上にあるのでネットに繋がっていればどこでもプログラミングできます（nodegram のプログラムのサイズは画像1枚分程度です）。
Node が連絡を取り合って大きな作業をするのがノードプログラミングです。全ての Node (担当者) は他の担当者からもらった値に対して自分の仕事をして後の担当者に渡します。全ての Node (担当者) はそれぞれつねに働いています。
それに対して一般的な文字のプログラミングは、一人の担当者が命令を順に理解し実行します。
2. 動画チュートリアル
動画で nodegram を知りたい方はこちらから。
１章の動画を見ればだいたい使い方がわかります。
日本語以外の方は、字幕を使用言語に切り替えてください。
 |  |  |
 |  |
3. 基本的な使い方
プログラミングをする NodeEditor
オブジェクトを配置する Layout画面
プログラムを実行する Play画面
の3つの操作画面があります。
3-1. ノードを作成する（NodeEditor）
- NodeEditor画面の背景（何もない黒いエリア）を長押しすると「CREATE NEW NODE」ダイアログが開きます。
- Node 一覧から追加したいノードを選ぶと、NodeEditor にノードが作成されます。
- 作ったノードを長押し、もしくはダブルクリックすると各ノードの詳細を設定するプロパティ（Property）ダイアログが開きます。
オブジェクトの色などノードの各設定をここで変更することができます。
「OK」ボタンは無く、値は変更した時点で反映されます。右上の×ボタンを押すか、ダイアログの外を押してダイアログを閉じてください。
DUPLICATEはノードの複製、DELETEは削除を行います。
- ノードをドラッグ（タッチして移動）すると、ノードを移動できます。
- ノードの右にある出力ポートから入力ポート（ノードの左）へドラッグしてワイヤーを接続します。ワイヤーを接続するとプログラムの実行時に赤い端子から青い端子に数値が渡される設定になります。
- ノードの上側に端子（子端子）があるノードは、子端子から親端子（他のノードの下）に接続すると親子関係になり、親が移動すると子も一緒に移動します。
プレイヤーが弾を発射するような構造なら弾の発射口を子としてプレイヤーを親に指定します。
3-2. ノードを画面に配置する（Layout 画面）
- Layout画面に切り替えるには「Layout」ボタンを押してください。
- Layout画面では Rect、Circle、Character、Text などのオブジェクト系、
Button、Stick などの操作系ノードを配置します。
- オブジェクトのドラッグで移動、オブジェクトの４隅にある白いハンドルでサイズを、上にある丸いハンドルで向きを調整します。
- 「NODE」ボタンを押すとNodeEditorに戻ります。
3-3. 実行する（Play 画面）
- NodeEditor、またはLayout画面に右上の ▶（Play）ボタンでPlay画面に切り替わり、プログラムを実行します。
- Play 画面右上の □（Stop）ボタンの長押しで Play を停止し、Edit画面に戻ります。
- Play 画面では60分の1秒（1フレーム）ごとにオブジェクトノードが表示され、物理演算とともに動きます。
- 画面タッチ、JoyStick、キーボード、マウスなどで操作させることができます。
- Play画面内で重力を表現することもできます。
ピンボールやマリオのようなゲームを作る場合はDynamics（物理演算）をオンにします。
Settingノードを追加し、Property の Dynamicsをオンにするとプログラム全体でDynamics処理が有効になります。
各オブジェクト系ノードにもDynamics設定項目があるので個別にオンにする必要があります。
4. ビューの説明と操作
4-1. NodeEditor の操作
ノードを並べてワイヤーでつなぐ、ノード構築画面です。
| 操作 | 内容 |
|---|---|
| 背景1本指ドラッグ | ビューの移動 |
| 2本指ピンチ、マウスホイール回転 | ビューの拡大・縮小 |
| ダブルクリック→ドラッグ（背景） | 範囲選択（複数ノード選択） |
| 背景を長押し | CREATE NEW NODE 画面を開く |
| ノードをドラッグ | ノード移動（複数選択時はまとめて移動） |
| ノードをダブルクリック／長押し | プロパティ画面を開く（複数選択時は 複数ノード処理メニュー） |
| 端子間をドラッグ | ワイヤー接続（誤動作防止のためタップ後一瞬指を置いてからドラッグする仕様になっています） |
| 接続線を長押し／ドラッグアウト | 接続の解除 端子から外側へドラッグして離しても解除できます |
4-2. Layout 画面の操作
オブジェクトの配置・サイズ・回転を決める画面です。グレーの矩形が Play時の表示エリアを表します。
基本的にはNodeEditorと同じ操作です。
| 操作 | 内容 |
|---|---|
| 1本指ドラッグ（背景） | ビューの移動 |
| マウスホイール／2本指ピンチ | 拡大・縮小 |
| オブジェクトをドラッグ | 移動（複数選択時はまとめて移動） |
| オブジェクトをタップ | 選択。この選択はNodeEditorと共有 |
| ハンドルをドラッグ | サイズ変更・回転 |
| ダブルクリック→ドラッグ（背景） | 範囲選択（複数選択） |
| 背景を長押し | CREATE NODE 画面を開く |
| 選択を長押し | プロパティ画面を開く（複数選択時は 複数ノード処理メニュー） |
この数字はSortingLayer値で、値が大きいほど手前に、少ないと奥に表示されます。
下の▲▼ボタンで増減ができます。
また、SETTINGノードでGridSnap の設定ができます。
オンにするとオブジェクトの移動が10ピクセル単位になります。
グレーの画面のサイズは Setting ノードで変更できます。
5. MENU
画面右上の MENU ボタンを押したまま項目の方向へ指を動かして離すと、その項目が実行されます。押しボタンとしても操作できます。
右上の再生ボタン▶を押すとPlay画面になりプログラムを実行します。
Layout を押すと Layout画面に切り替わります。
5-1. メニューの項目
| NEW NODE | CREATE NODE 画面を開いて新しいノードを作ります。背景の長押しでも開けます。 |
| SAVE | 現在のプログラムに名前を付けて保存します（5-2 参照）。 |
| LOAD | 保存したプログラムを読み込みます（5-3 参照）。 |
| UNDO | 直前の操作を取り消します。 |
| REDO | 取り消した操作をやり直します。 |
| FIT | すべてのノードが画面に収まるように表示倍率と位置を調整します。 |
| NEW | すべて消去して新規作成します。 |
| SETTING | アプリ全体の設定を開きます（5-4 参照）。SETTING ノードとは別物です。 |
| OPEN HELP | このヘルプを開きます。 |
Compo の中を編集しているときは、左側の項目が Compo 専用のものに変わります。そちらは「Compo ノード」の章で説明します。
5-2. SAVE（保存）
名前を付けて端末内に保存します。同じ名前があれば上書き保存になります。名前に使えるのは半角の英数字と一部の記号です。
AUTO にチェックを入れると自動保存が有効になり、以後は 30 秒ごとに自動で保存されます（Play 中は保存されません）。
EXPORT を押すと、プログラムをファイルとして書き出せます。バックアップや他の人への受け渡しに使えます。
書き出し形式は .ngz（gzip 圧縮）と .json（テキスト）の2種類から選べます。
.ngz は拡張子を .gz に変更するだけで、一般的な解凍ソフトで中身（JSON）を取り出せます。
SAVE できる数は最大 256 個です。保存先は使用しているブラウザの中なので、別の端末やブラウザからは見えません。
SAVEデータは nodegram 内に保存しているのでスマホの nodegram へのショートカットを消してしまうとデータも消える可能性があります。
大事なデータは EXPORT でファイルで保存することをおすすめします。
5-3. LOAD（読み込み）
保存したプログラムの一覧が出ます。名前の横のボタンで削除もできます。
IMPORT を押すと、EXPORT で書き出したファイルを読み込めます。読み込み方は 2 種類あり、読み込みは現在の内容を置き換え、追加読み込みは現在のプログラムを残したまま下に追加します。
3D ソフトで作成した .obj ファイルを IMPORT すると、3D データを POLYGON ノード、または LINE (3D表示用) につなぐ ARRAY ノードとして読み込めます。詳しくは 11-12. 3Dオブジェクト を参照してください。
5-4. SETTING（アプリ設定）
アプリ全体の設定です。ここで変更した内容はプログラムには保存されず、この端末だけに残ります。
Wire：ワイヤーの形（曲線／直線）を選びます。
NodeColor：ノードの配色を選びます。
Language：表示言語を切り替えます。
日本語、英語、中国語（简体字）、フランス語、ドイツ語、ヒンディー語、インドネシア語、イタリア語、韓国語、ポルトガル語、ロシア語、スペイン語、タイ語、トルコ語、ベトナム語
シーンごとの設定（FPS や Dynamics など）は、この画面ではなく SETTING ノードで行います。名前が同じなので注意してください。
6. スマホ、PCでの挙動
スマホでの挙動
- タッチ操作：
1本指でパン、2本指でピンチズーム。長押しやダブルタップ→ドラッグなどPCと同様に操作できます。
- 縦横の切り替え：
端末を回転すると画面の縦横に追従します。Play中の表示向きはSETTINGノードでの指定の向き（横=Horizontal／縦=Vertical）に従い、想定と違う向きのときは案内が表示されます。 - iOS での注意点：
iPhone などの iOS で全画面表示させるには、Safariのメニューから以下の①、②をクリックし、ツールバーを非表示にするとほぼ全画面になり使いやすくなります。
完全に全画面表示させるにはSafariのメニューから共有アイコンをタップ、ホーム画面に追加を選択します。nodegram がアプリのように扱えるのでおすすめです。
ただしホーム画面に追加したアイコンを消すとSAVEしたデータが消える可能性があります。大切なデータはスマホ内のフォルダにExportしてください。
PCでの挙動
- ショートカット：
NodeEditor / Layout画面共通
キー 動作 DeleteまたはBackspace選択中のノード（複数選択時はまとめて）を削除（確認ダイアログあり） Ctrl+D（MacはCmd+D）選択中のノードを複製（確認ダイアログあり） Ctrl+ZUndo Ctrl+Y または Ctrl+Shift+ZRedo
TEXTUREエディタを開いているとき（上記に加えて）キー 動作 Ctrl+Vクリップボードの画像を貼り付け Ctrl+C編集中のテクスチャ全体をクリップボードへコピー Ctrl+Zテクスチャ編集の Undo Ctrl+Y または Ctrl+Shift+Z テクスチャ編集の Redo
Mac にも対応しています。
7. 全ノード解説
入／出は入力端子数／出力端子数です。
定数
| ノード | 入力数/出力数 | 説明 |
|---|---|---|
| Constant | 0/1 | Value の数字を出力します。 |
計算系
| ノード | 入/出 | 説明 |
|---|---|---|
| ＋ | 2/1 | 入力① ＋ 入力② の結果を出力。 ＋ノードを使わなくても。全てのノードの入力端子は複数のワイヤーを繋ぐことができ、合算の機能がある。なので入力①に２つのワイヤーをつないでも加算結果を出力する。 |
| － | 2/1 | 入力① － 入力② の結果を出力 |
| × | 2/1 | 入力① × 入力② の結果を出力 |
| ÷ | 2/1 | 入力① ÷ 入力② の結果を出力。分母0なら0。 |
| √ | 1/1 | 入力①の平方根を出力します。入力が0以下のときは0を返します。 |
| Compare | 2/1 | 入力①と入力②を比較（= > < ≠ ≧ ≦）。成り立つなら1、成り立たないなら0 を出力。 |
| Not ( ! ) | 1/1 | 入力①が0なら1、それ以外は0を出力。 |
| Pos Angle | 2/1 | 位置を角度に。ArcTan2(入力②, 入力①) を度で出力。 |
| Angle Pos | 1/2 | 角度を位置に。角度(度)から(cos, sin) を出力。 |
| Random | 1/1 | 0以上 Number 未満の整数乱数を出力します。Play開始時と、入力①が0以外である各フレームに値を更新します。Use SeedをオンにしてSeed値を指定すると、Playを開始するたびに同じ順序の乱数を再現します。 |
| Int | 1/1 | 整数化。Round プロパティで Floor / Round / Integer を選べます。 既定の Floor は入力値以下で一番近い整数で、2.8 は 2、-0.1 は -1 になります。Round は四捨五入、Integerは整数部分の取得です。 |
数値操作系
| ノード | 入/出 | 説明 |
|---|---|---|
| Trigger | 1/1 | 入力が0から0以外になった瞬間だけ1フレーム1を出力。 DELAY(F)で指定フレーム遅延で１を出力。 |
| Counter | 2/1 | カウンター。①に入力された数字を毎フレーム加算。②を減算。内部に保持している数字を出力。 Type＝Clampは最大値と最小値指定、Loopは範囲を繰り返し。Value（初期値）、Min/Max を設定可。 |
| Var | 2/1 | 変数として使用できるノード。ノード内に保持した数値１つを出力する。 入力②のセット信号に0以外の数値が指定されたとき入力①を記憶。 初期値設定あり。 |
| Array | 3/1 | 配列として使用できるノード。 入力②のインデックス(配列内の位置、1番目は0)を指定すると配列の値を出力する。インデックスは0始まりなので配列長さが3ならインデックスは0か1か2。0未満、3以上を指定すると値無しとして0を返す。 入力③のセット信号で入力①の値を指定インデックス②の配列要素に上書きします。 初期値リストは複数の数字を「,」（カンマ）もしくは改行で区切って書き込んでください。 Arrayは同時にアクセスすることができます。１番目と３番目のデータを取得するのと同時に、２番目のデータの値を設定するようなことができます。 このような場合はArrayを複数親子連結します。親子連結したArrayの実態（配列の値を持つ）は１番親のArrayのみでその下のArrayは親のArrayのアクセス用のインタフェースでしかありません。同時に書き込みがあった場合は親が優先されます。LINE / VOICE / SOUND につなげられるのは一番親の Array だけです。 配列はSoundノード、Voiceノードと併用して楽譜のように利用したり、Lineノードと併用して折れ線のグラフィック表示をすることもできます。1つの Array を複数の Line で共有することもできます。プロパティの SEQUENCER / LINE ボタンから楽譜エディタ、グラフィックエディタとして使用することもできます（8章）。 また、3D ワイヤーフレーム表示の格納先としても使われます（11-12. 3Dオブジェクト 参照）。 |
| GetPos | 0/2 | 親オブジェクトの現在位置 X, Y を取得。WORLD/LOCAL切替。 |
| GetRot | 0/1 | 親オブジェクトの現在角度を、反時計回りを正として出力します。WORLD/LOCALを切り替えられます。 |
| Velocity | 0/2 | 親オブジェクトのX/Y速度を秒速で出力します（Yは上方向が正）。Framesを増やすと参照されるフレーム範囲が増え、緩やかな変化になります。 |
Array の中身は専用のエディタで編集できます。プロパティの SEQUENCER ボタンで楽譜として、LINE ボタンで折れ線として編集します。使い方は 7. エディタ を参照してください。
出力系
| ノード | 入/出 | 説明 |
|---|---|---|
| Text | 2/0 | テキスト表示。入力が未接続なら Text プロパティで指定した文字を表示。接続時は数値を表示。入力②で表示のオンオフ。数値は小数点以下6桁を四捨五入し5桁目まで表示します。文字色、レイアウト、周りの四角の表示オンオフを設定可能。 |
| Rect | 3/0 | 長方形オブジェクト。Dynamics Off なら入力①/②はｘｙ座標。Dynamics On は外力 x,y。入力③は表示のオン/オフ。色、枠、Tag、サイズ、回転、Sorting Layerなどを設定できます。Broken by 1～3には、このオブジェクトを破壊できる相手のMy Tagを指定します。 Dynamics、Tag については 10. 仕様、詳細 を参考にしてください。 |
| Circle | 3/0 | 円形オブジェクト。形状とRadius以外の入力、プロパティはRECTと同じです。 |
| Character | 3/0 | 移動とジャンプができるキャラクター。入力①/②は移動速度、入力③は0以下から正の値へ変化した瞬間のジャンプです。 ジャンプ力は入力値に比例し、接地中のみ有効です。物理とジャンプにはSETTINGとCharacterのDynamicsを両方オンにします。トップビューではDynamicsをオンのままGravityを0にできます。Flipは向きに合わせてテクスチャを左右反転、AutoRotは進行方向に向きを自動変更、KeepOnScrは移動範囲をスクリーン範囲に制限です。 子端子がありますがオブジェクトの子にはできません。親に指定できるのはWARP INだけです。 |
| Shot | 1/1 | 入力①で弾を発射します。Bullet Countは同時に存在できる弾数です。My Tagは相手側のBroken byと一致したとき相手を破壊し、SHOT側のBroken by 1～3は弾が消える相手の種類またはTagを指定します。発射できたフレームだけ出力が1になります。Keep Off-Screenでは画面外の弾を残し、弾数上限を超えると古い弾は消えます。 |
| Line | 5/0 | (X1,Y1)から(X2,Y2)への線を描きます。入力⑤(SET)が接続されている場合、0以外の値が入ると見た目を更新し、0の間は直前の形状を保持します。未接続なら毎フレーム更新します。 子にARRAYを指定すると入力①～④を無視し、配列を x1,y1,x2,y2,,, として一筆書きの折れ線として描きます。x=9999, y=9999 で線を区切ります。CoordでWORLD/LOCALを選べます。 子のARRAYが3D用のデータ（x,y,z の組）の場合は自動的に3D LINEとして描画されます。詳しくは 8章 LINE Editor を参照してください。 |
| Sound | 4/2 | 入力①は再生信号、入力②は音階（ド=0、レ=1、、）、入力③は音量です。入力②/③が未接続ならTone/Volumeプロパティを使います。持続音は①Signalが0以外の間鳴り続け、減衰音・効果音は①Signalの立ち上がりまたは音程変更時に1回鳴ります。音階は 99 が休符になります。Toneプロパティは0.5刻みですが（半音）、入力②は連続した小数値を使用できます。 ChromaticをONにするとToneが半音刻みの12音階の数値になります（0=ド、1=ド#、2=レ…）。OFFのときは7音階で、0.5が黒鍵です。Arrayを音階として繋ぐ場合は、ArrayのSEQUENCER側のChromaticと設定を揃えてください。揃っていないと音程がずれます。 入力④Pan でステレオの L/R の割合を -1 ～ +1 の間で設定できます。 Array を子として直接つなぐと、この Sound が楽譜を自分で鳴らします。そのときは Tempo(BPM) と Loop プロパティが増え、入力②は音の高さではなく転調のオフセット（半音=1）になります。出力①は鳴り終わりに1フレームだけ立つ信号、出力②は再生開始からの秒数で、ほかのノードを音楽に同期させるのに使います。入力①は再生、0 にすると停止、再び0以外にすると先頭から再生します。 Array の要素 90 は「直前の音の続き」を表すタイで、同じ高さを打ち直すのか伸ばすのかをこれで区別します。 Soundに接続しているArrayの「Sequencer」ボタンを押すと楽譜を編集できます。詳しくは 8章 Sequencer を参照してください。 |
| Voice | 3/2 | 日本語のかなをしゃべらせるノードです。Line プロパティにひらがな（カタカナも可）を書くと、その場で音声を合成して鳴らします（フォルマント合成）。 入力①は再生信号で、立ち上がりで頭から読み始め、0 に戻すと途中でも止まります。入力②は音量です。 出力①は読み終わりに1フレームだけ立つ信号、出力②は再生開始からの秒数です。秒数を1列の長さで割れば「今どの音符か」が分かるので、伴奏や字幕を歌に合わせるのに使います。何音符目かは「Time × BPM ÷ 30」で計算できます。 Voice は声色を Girl / Boy / Woman / Man / Child / Plain / Robot から選べます。Pitch は半音単位の上下です。 入力③Pan でステレオの L/R の割合を -1 ～ +1 の間で設定できます。 Array を子としてつなぐと歌になります。かなを1文字ずつ音符に割り当てて歌い、Tempo(BPM) で速さを決めます。Array がないときは Tempo の代わりに Speed（1文字あたりのミリ秒）でしゃべる速さを決めます。 割り当ての規則は、音符1つにつきかな1文字。タイ(90)と休符(99)はかなを使いません。歌のときは「、」「。」は読み飛ばします。伸ばし棒「ー」は1音ぶんの音符を使い、前の母音を保ったまま別の高さへ動けます（スラー）。 音符に対してかなが足りないと、その音符は赤い「·」になって鳴りません。 歌詞の編集は Voice のプロパティ、音階の編集は Array の SEQUENCER で行います。どちらからも → ARRAY／→ VOICE ボタンで行き来できます。 詳しくは 8章 Sequencer を参照してください。 |
| Polygon | 7/0 | 3Dモデルの面（ポリゴン）を表示するオブジェクトです。CREATE NEW NODEからは作成できず、.obj ファイルのIMPORTでのみ生成されます。 3D位置の座標と3Dの回転とスケールを入力に持ちます。 詳しくは 11-12. 3Dオブジェクト を参照してください。 |
操作系
| ノード | 入/出 | 説明 |
|---|---|---|
| Stick | 1/2 | 仮想ジョイスティック。スティックのX方向傾き=出力①/Y=出力②。アナログ/デジタル、キーボード/ゲームパッドへの割り当て機能あり。 |
| Button | 1/1 | 仮想ボタン。押下中に1。キーボード/ゲームパッドへの割り当て機能あり。 Button ノードはスクリーン固定ですが、親を指定するとそのオブジェクトに固定されます。 |
| Keyboard | 0/1 | 指定キーが押されていれば1。 |
| Touch | 0/3 | 画面タッチ。タッチ位置 X=出力①, Y=出力②（中央が0,0）、タッチ中なら出力③=1。 |
そのほかのノード
| ノード | 入/出 | 説明 |
|---|---|---|
| TEXTURE | 1/0 | ドット絵を編集、保持し、親として割り当てたオブジェクトに絵を貼り付ける。Rect、Circle、Chara、Shot、BG に割当可。複数の親（オブジェクトノード）を指定することができる。 入力0で非表示。1つのオブジェクトに複数のテクスチャを繋ぎ、1つだけをVisibleにすることで表示するテクスチャの切り替えができる。 オブジェクトに張り付ける時フィットさせるかタイリングで貼るか選択できる。 親指定しないでテクスチャを平面として表示することもできる。 背景画像などにたくさん使用する場合は、１つのテクスチャを複数のオブジェクトに割り当てることもできます。 テクスチャエディタの詳しい使い方は「TEXTURE エディタ」を参照してください。 |
| SENSOR | 0/1 | センサー領域（Layout 画面で設定した範囲）に重なっている対象の数を出力します。Target の条件と Tag 1〜3 のいずれかに一致すれば対象とみなし、1つのオブジェクトが複数の条件に一致しても1個としてしか数えません。Target=SCREENはセンサー領域が現在の表示範囲と重なるかを0/1で返します。親を指定するとセンサーは親に追従し、その親自身は判定対象から除外されます。 |
| ONBREAK | 1/1 | 現在のフレームで、親オブジェクトまたは指定Tagのオブジェクトが破壊された数を出力します。親オブジェクトは複数指定できます。 Onbreakノードで参照先を指定しないとエフェクトノードとして使用できます。入力①が0から0以外の値へ変化した場合もノード位置にエフェクトを出し、そのフレームの出力を1つ増やします（親やTagを付けずに、入力で光らせて同時に音を鳴らす、といった使い方ができます）。エフェクトは種類 (NONE, PARTICLE, LINE, CIRCLE, BOX) と色を設定できます。 |
| ROTATE | 1/0 | 親子オブジェクトを回転させるための回転ヒンジです。ROTATEを親にしたオブジェクトは、その位置と回転を引き継ぎます。入力①はLayoutで設定した初期角度からの回転オフセットで、正の値は反時計回りの角度です。 |
| SCREEN | 3/2 | Play時のカメラを制御します。X/Yはカメラ位置（親がある場合は親位置へのオフセット、Yは上方向が正）、Sはズームで最小0.05です。SCREENを親にしたオブジェクトはカメラに影響されない固定HUDになります。
SCREENの親にプレイヤーのオブジェクトを指定するとプレイヤーにビューがついてくるようになります。 |
| RESTART | 1/1 | 入力が0から0以外へ変化したとき、プログラム全体をPlay開始時の状態へ戻します。実行中の位置、変数、カウンター、配列、弾などが初期化されます。再始動のきっかけになった入力値は再始動後も出力に保持されるため、残機数やスコアの引き継ぎに使えます。 |
| COMPO | 3/3 | 複数ノードを1つにまとめた部品。E＝有効/無効、1・2＝内部とのやりとり。 Compo ノードの詳細については 8. Compo ノード を参照。 |
- TEXTURE エディタ：
TEXTURE ノードのプロパティ「Edit Texture」ボタンから開きます。使い方は 7. エディタ を参照してください。
ワープ系
| ノード | 入/出 | 説明 |
|---|---|---|
| WARP IN | 1/0 | オブジェクトを別の場所へ瞬間移動させる仕組みの「入口」。子に指定したオブジェクトが対象になります。入力に0以外が入ると、子に指定したオブジェクトが同じ Index を持つ WARP OUT の位置、角度へ移動します。0以外が入り続けている間はそこに固定され、0になると固定が解除されて再び自由に動けるようになります。プロパティは Index のみ。Compo の中に入れることはできません。
Next IN ボタンで同じインデックスの Warp IN ノードへ、To OUT ボタンで同じインデックスの Warp OUT ノードのプロパティ画面に切り替わります。 |
| WARP OUT | 0/0 | ワープの「出口」。同じ Index を持つ WARP IN から送られてきたオブジェクトが、この位置と角度に移動します。プロパティは Index のみ。Layout 画面では位置の移動と回転ができます（大きさは持たないのでリサイズはできません）。オブジェクトを親に指定して一緒に動かすこともできます。Compo の中に入れることはできません。
To IN ボタンで同じインデックスの IN ノードのプロパティ画面に切り替わります。 |
接続系
| ノード | 入/出 | 説明 |
|---|---|---|
| IN | 1/0 | ノード出力先のワイヤーを遠くにつなげる時に使用する。INノードに接続した信号は同じインデックスを持つOUTノードに出力される。同じインデックスを持つINノードを複数作ることはできない。Compo ノードのインデックスを指定すれば Compo 内部へのアクセスにも使用できる。 Next IN ボタンで同じインデックスの IN ノードへ、To OUT ボタンで同じインデックスの OUT ノードのプロパティ画面に切り替わります。 名前を付けてインデックスの代わりに名前を表示することもできます。 Compo ノードについては 8. Compo ノード を参照。 |
| OUT | 0/1 | ノード入力先のワイヤーを遠くからつなげる時に使用する。INノードに接続した信号は同じインデックスを持つOUTノードに出力される。同じインデックスを持つOUTノードを複数作ることができる。INに入った数値が全ての同じインデックスを持つOUTノードに出力される。Compo ノードのインデックスを指定すれば Compo 内部へのアクセスにも使用できる。 Next IN ボタンで同じインデックスの IN ノードへ、To OUT ボタンで同じインデックスの OUT ノードのプロパティ画面に切り替わります。 名前を付けてインデックスの代わりに名前を表示することもできます。 Compo ノードについては 8. Compo ノード を参照。 |
設定系
| ノード | 入/出 | 説明 |
|---|---|---|
| MEMO | 0/0 | 画面に書き込む注釈（メモ書き）。Play 時には表示されません。 |
| BG | 0/0 | 実行画面の背景。シーンに1つ。常に最背面。 TEXTURE ノードを割り当てると、その絵をタイリングして背景に敷き詰めます。TEXTURE 未割り当てのときは Color の単色で塗ります。 |
| SETTING | 0/0 | シーン全体を設定します。 スマホの縦向き横向きの設定（ScreenOrient）、Play画面サイズ指定（ScreenSize、ScreenLong、ScreenShort）、FPS、Dynamics（Gravity、Friction%、Bounce%、Drag%）、Play停止ボタンカラー（StopBtnCol）、GridSnap設定を変更できます。シーンに1つだけ作成できます。 シーンに３D関連のノードがあると、視点の高さとスクリーンまでの距離を指定するプロパティも表示されます。 |
8. エディタ
ノードのプロパティから開く専用の編集画面です。LINE と SEQUENCER は Array ノード、TEXTURE は Texture ノードの中身を作ります。どのエディタも右上の × で閉じ、閉じた時点でノードへ書き戻されます。◁ / ▷ でエディタごとの Undo / Redo ができます。
8-1. LINE エディタ
Line ノードにつなぐ折れ線を描くツールです。Array ノードのプロパティの LINE ボタンから開きます。
編集エリアは中央が原点で、X は右が＋、Y は上が＋の -99〜99 です。
DRAW で折れ線を描きます。描いている間は DRAW ボタンが Endpoint ボタンに変わり、押すと一筆書きが確定します。
MOVE で頂点移動、ERASE で線分を1本だけ削除、VIEW で視点移動です。
閉じると x,y の数値列に変換され、x,y =(9999,9999) で線が途切れます。
Array ノードの親に Line ノードを指定すると、Line ノードがその Array の中身で描画します。1つの Array に複数の Line ノードを親として指定することもできます。
8-2. SEQUENCER エディタ
Sound ノードや Voice ノードで鳴らす楽譜（Array）を作るツールです。Array ノードのプロパティの SEQUENCER ボタンから開きます。
1列＝8分音符、1小節＝8列、最大500小節、6オクターブ（中央ドの下に3、上に3）です。一度に見えるのは3オクターブぶんで、残りは縦にスクロールして見ます。
・モード
| DRAW | 空白をタップ／ドラッグで音符を置きます。音符をタップすると音程が変わり、ドラッグで移動します。 |
| ERASE | ドラッグで連続して消します。音符の途中を触っても、その音符全体が消えます。 |
| RESIZE | 音符の長さだけを変えます。音符をドラッグすると、動かした列数のぶん右端が伸び縮みします。 |
| Copy / Paste | 列の範囲をコピーして貼り付けます。貼り付け位置を上下に動かすと移調できます。 |
| VIEW | 表示の移動です。ピンチやホイールで拡大縮小、中ボタンのドラッグでは上下にも動かせます。 |
・音符の長さとタイとスラー
音符は「音階の値, 90, 90, 90」で長さ4の音になります。90 は「直前の音の続き」を表すタイで、RESIZE で伸ばすと自動的に書き込まれます。
つまり 同じ高さの音を2回鳴らすのと 1つの音を伸ばすのは、2つ目が音階の値か 90 かの違いだけです。
| 0,0 | 8分音符のドが2つ。ドド |
| 0,90 | 4分音符のドが1つ |
| 99 | 休符 |
「ド」と「ー」は違う音符なので違う音階を割り当てることもできます。その場合はスラー（違う音階を繋げて音を出す）になります。
・音階の数値
ドが0、レが1、ド# が0.5になります。
最後の音符がある小節の終わりまで休符（配列では99）で埋められます。
CHROMATIC をオンにすると1マスが半音になり（ド=0、ド♯=1、レ=2、レ♯=3、ミ=4、ファ=5、ファ♯=6、ソ=7、ソ♯=8、ラ=9、ラ♯=10、シ=11）、1オクターブが12になります。CHROMATICに 切り替えると Array の数値も、繋がっている Sound ノードの Chromatic も一緒に変換されます。
MAJOR をオンにすると白鍵だけしか置けなくなります（すでにある黒鍵はそのまま残ります）。
・Sound / Voice ノード
Array を Sound や Voice の子にしている場合、BPM と Source（音源）はその Array を共有している全員で1つの値です。シーケンサ側からでも親ノードのプロパティからでも変更でき、どちらで変えても全部が同じ値になります。CHROMATIC は Sound が親のときだけ Sound 側が持ち、シーケンサでは変更できません。左下の → SOUND／→ VOICE ボタンでその親ノードへ移動できます。
親がいない Array では、BPM も音源もその Array だけの設定になります。
・試聴
再生ボタンで鳴らします。再生中に列をタップすると、そこへ再生位置が移動します。
Voice ノードにつながった Sequencer は、音符の上に歌詞のかなが表示されます。
Array だけではゲーム中に音は鳴りません。Sound や Voice と組み合わせてください。
・複数のシーケンスをまとめて編集する
NodeEditor で複数の Array ノードをまとめて選択し、ノードを長押しして「SEQUENCER」を選ぶと、最大7個を同じグリッド上で編集できます。
番号ボタンのタップで編集対象を切り替え、長押しで音量とミュート、ドラッグで順番を変えられます。色と音源は Array ごとに設定できます。
8-3. TEXTURE エディタ
Texture ノードのプロパティ「Edit Texture」ボタンから開きます。ドット絵を描いて、親に指定したオブジェクトに貼り付けることができます。
| Draw | 選んだ色で点を描きます。ドラッグで連続して描けます。 |
| Paint | つながった同じ色の範囲をまとめて塗ります。 |
| Pick | 絵の中の色を吸い取って現在の色にします。 |
| View | ビューの拡大・移動を行います。 |
| Copy / Paste | 範囲を選んでコピーし、別の場所に貼り付けます。 |
| ◁ / ▷ | UNDO / REDO |
色は下のパレットから選びます。消したいときは透明色を選んで描いてください。色パレットは長押しでフルカラーから色を選択できます。
ドット数はプロパティの Size で変更できます。画像サイズは 256×256 まで大きくできますが、UNDO 回数が少なくなり、エディタの動作も重くなります。SHOT オブジェクトにはなるべく小さいテクスチャを使ってください。
PC では他のソフトでコピーした画像をエディタへ貼り付けられます。スマホでもソフトや機種によってはできるかもしれません。
9. Compo ノード
- 複数のノードを１つのノードのように扱うことができる特殊なノードです。
例えば同じ処理を行うノードの組み合わせがプログラムに10回出てきたら何らかの形で1箇所にまとめて流用したくなりますよね。
nodegram では複数のノードを１つの Compo ノードとしてまとめ、その Compo ノードを複製して使うことができます。
同じ敵キャラを10体作りたい場合は1体のプログラムを作成し、1体に使用するノード達を１つの Compo にまとめ、Compoを複製し、Layoutに配置することができます。
複製した Compo ノードの中身はプログラム的には同じものになっているので、１つのプログラムを変えると他のコンポのプログラムも書き換わりますが、それぞれが持つ座標や変数、寿命などはコンポごとに別々に処理されます。
- Compo ノード作成手順
- ひとまとめにしたいノード達をまとめて選択します。
まとめて選択はダブルクリック＋ドラッグで行います。
ダブルクリックの2クリック目をマウスを離さずドラッグして範囲選択します。
スマホだと「トン、ト、ツー」って感じです。
（このサンプルプログラムは左が自機、囲んだエリアが自機に近づいてくる敵機１体のプログラムです）
- ノードが複数選択された状態でどれか１つのノードを長押しするとメニューが現れます。「MAKE COMPO」を選択すると Compo にまとめるか聞かれるので「Yes」を押します。
- 複数のノードが「C1」という１つの Compo ノードになりました。
- C1 ノードを長押し（もしくはダブルクリック）すると Compo の中を編集する NodeEditor に入ります。
Compo に繋がっていた接続線が「C1 1」「C1 2」という OUT ノードに変わっています。
右の「MENU」ボタンを押すと左の列が Compo 関連のコマンドに変わっています。
「Duplicate」を押すとこの Compo ノードが複製されます。
右下の「PARENT」ボタンを押すとこの NodeEditor を出て親の NodeEditor に戻ります。
- 親の NodeEditor で Compo ノードが複数できているのが確認できます。
「C1 (2)」にも同じ入力値を渡したいのでノードの入出力に接続します。
- 「LAYOUT」ボタンを押してレイアウトをコンポごとに調整します。
- Playボタン「▶」を押すと敵機が複数あり、それぞれ独自に動いていることが確認できます。
- Compo を数多く複製したい場合は Compo ノードをまとめて選択、ノードを長押しし「Duplicate」を行ってください。
また全ての Compo ノードに同じ値を渡す場合は INノード、OUTノードを使うと便利です。
- Compo ノードとインスタンス
２つの Compo ノードが同じ内容で片方のコンポの内容を編集するともう片方のノードの内容も変わるような場合「２つのノードはインスタンスの関係にある」と言い、複製で作成する時「Compo ノードのインスタンスを作成する」と言います。
Compo 番号が同じノードはインスタンスの関係にあり同じプログラムを共用しています。
（ちなみにインスタンスを切ることを Unique と呼びます。Compo のフリックメニューにあります。後述）
C の後の番号が同じだとインスタンス関係にある同じ Compo です。
「C1 (1)」と「C1 (2)」はインスタンスの関係にあります。
「C1 (1)」と「C2 (1)」は別のコンポです。インスタンスの関係にありません。
( ) 内の数字は同じコンポを識別するための番号です。
Compo がインスタンスの関係にあっても Play時は Compo ごとにパラメータは別々に扱われます。
キャラクターの発生、消滅、座標、ノード内にある count , var, array 等は個別の値を持ちます。
- Compo ノード 内の MENU
Duplicate、Delete：Compo ノードの複製と削除です
Unique：Compo ノードのインスタンスを切るノードです。Compoの内容を流用して別の敵キャラを作る場合に使用します。コンポ番号が別の番号になります。
Expand：操作中の Compo の中のノードたちをメインの NodeEditor に戻します。操作中の Compo は無くなります。Make Compo の逆の処理です。インスタンス関係にある Compo は一緒に Expand（展開）されません。
- Compo ノード と IN、OUT ノード
Compo ノードは2つの入力と2つの出力端子しかありませんが、INノード、OUTノードを使うことで入力を増やせます。
IN、OUT ノードのプロパティにはコンポ番号の指定ができるので特定のコンポに値を渡すことができます。
Compo 内で Compo 番号無しの OUT ノードを利用することができます。
Compo 内で Compo 番号無しの IN ノードは利用することはできません（同じ IN ノードは複数作れないので）。
Compo 番号付き IN、OUT ノードは全く同じ値でも Compo の中にあるか外にあるかで全く別の物であることに注意してください。
上の図に「INノード（青）：C1 インデックス２」はCompo 内とCompo 外にありますが別の意味です。Compo 内の方は Compo の出力２に繋がるノードですが、Compo の外の方は Compo の入力２に繋がり Compo 内の「OUTノード：C1 インデックス２」に値を渡すノードです。
- Compo の Enable 入力と Enable 出力
Compo ノードをキャラクターとして使った時にそのキャラクターの出現と消滅を Enable 入出力でコントロールすることができます。
Enable出力はキャラクターが存在している間は１を出力してキャラクターが破壊などで無くなったら０を出力します。
Enable入力が０から１（０以外）に変わった時に Compo 内のプログラムが起動し、キャラクターが有効になります。キャラクターを存在し続けるには０以外を入力しつづけなければいけません。入力が０になるかキャラクターが破壊されるとキャラクターは消滅します。
Enable入力は何も繋がっていなければ１がずっと入力されているのと同じです。
消滅したキャラクターでも入力を０から０以外にすればキャラクターは初期状態から再開することができます。
以下はキャラクターが壊れたら３秒後に最初の位置に再発生するプログラムです。
- Compo ノード内では親は１つ
Compo 内のオブジェクトの親子関係において複数の親オブジェクトノードがあってはいけません。２つのキャラクターを１つの Compo ノードに作成する状態は現在想定していません。
親が２つあってもその２つに共通の親が設定されていれば問題ありません。
オブジェクトノードを１つも持たない（親が１つもない）状態は問題ありません。
- Compo 内に作成できないノード
BG, Setting, Stick, Button, Screen, OnBreak は Compo 内に作成できません。
10. プログラムをほかの人に遊んでもらう
URL を開くと Play 画面から始まるので遊ぶ人は nodegram の知識は必要がありません。
https://daisuqe.github.io/nodegram/?url=
の後に作品を置いた場所（URL）を追記するだけです。
例）
https://daisuqe.github.io/nodegram/?url=https://example.com/mygame.json
URL のサンプル（シューティングゲーム）：
手順：
１．ゲームを MENU>SAVE>EXPORT で .json 形式のファイルでPC内やスマホ内に保存します。
２．保存した .json ファイルをDropbox等のインターネット上のファイル管理サービスにアップロードし、アップロードしたリンク先のURLをサービス内の「リンク先のURLを取得」などから取得します。
３．「https://daisuqe.github.io/nodegram/?url=」の後に作品を置いた場所（URL）を追記した文字を自分のブラウザで開きます。
ファイルのアップロード先として Dropbox や GitHub の raw URL、GitHub Pages は無料で安全に使うことができます。Dropbox であればスマホからのアップロードも簡単です。
GoogleDriveはブラウザの制限によりアプリからファイルを直接読むことができないので追加のURLとしては使うことができません（CORS制限）。
11. 仕様、詳細
11-1. 2D 専用
nodegram は 2D 専用です。座標は X（右が＋）・Y（上が＋）の2軸です。SettingノードでDynamicsをオンにするとキャラクターは画面下方向に落ちます。
トップビューのゲームを作る時はSETTINGノードでDynamicsをオフにするか、ゲーム全体の重力を0にします。
ポリゴンや3D ワイヤーフレームも使えますが3D表示ができる2Dオブジェクトとして処理されます。
11-2. FPS
目標フレームレートは 60 または 30 を SETTING ノードで選択します（デフォルト 60）。ノードの評価も物理も、このFPSを基準に進行します。処理が重くなるとPlayの挙動が遅くなり、フレームレートが指定値より下がります。
11-3. Dynamics（物理的挙動）
Rect、Circle、Character、Shot などのオブジェクトには物理モード（Dynamics）を設定できます。挙動は Unity の Rigidbody2D とほぼ同様です。
| モード | 挙動 |
|---|---|
| Off | 物理なし。ノード入力（X,Y）で座標を直接移動するだけ。 |
| Static | 動かない壁・床。重力や衝突では動かない。 |
| Dynamic | 重力・衝突を受けて物理的に動く。ノードのX/Y入力は「力（フォース）」として加わる。 |
| Kinematic | 重力・衝突では動かないが、ノード入力で強制移動でき、他のDynamicに衝突・干渉できる。 |
比重の指定はありませんが一般的な木材程度を基準にしています。
11-4. SortingLayer（表示順）
各オブジェクトの SortingLayer（0〜100、既定 50）で Play 画面での表示の重なり順を決めます。数値が大きいほど手前（上）に描画されます。BG（背景）は常に最背面です。
同じ値どうしは、追加した順に表示されます。
11-5. 座標
- 座標系は X（右＋）・Y（上＋）。Layoutの中心が原点(0,0)です。
- 角度は度（degree）で表し、反時計回りが＋です。0°＝右（X＋）、90°＝上（Y＋）、180°＝左（X−）、270°＝下（Y−）。ANGLE POS / POS ANGLE / GetRot / ROTATE / オブジェクトの Angle プロパティは、すべてこの向きで統一されています。
- オブジェクトのPropertyの Coord プロパティで、ノード入力のX/Yの数値の意味が変わります。
- WORLD：入力値を絶対座標として適用（親がいる場合は親基準のローカル絶対座標）。
- LOCAL：入力値を初期配置位置からの相対オフセットとして適用。親を指定している場合は親からのオフセットも含みます（Parent座標系）。
- ３Dオブジェクトの座標については 11-12. 3Dオブジェクト を参照してください。
11-6. 解像度
Play時の表示エリアはLayoutのグレー矩形のサイズです。
画面向き（横=Horizontal／縦=Vertical）はSETTINGノード（Settingメニューではない）で切り替えられ、実機の画面サイズに合わせてフィット表示されます。
また固定解像度にする場合はSettingノードのScreenSizeから行ってください。
11-7. Tag
Tag はグループです。
例えばザコ敵にはすべて「Enemy_tiny」というTagを付けたり、壊れる背景と壊れない背景で「bg_destroyed」「bg」のようにTagを付けたりします。
Shot, OnBreak, Rect, Circle, Character ノードなどが Tagを使用します。
11-8. ノード
- ノードへの入力は複数繋ぐことができます。複数の入力があるとその数値の和がノードに渡されます。図の一番上の端子には10+20→30が入ります。
- ノード間の親子接続（上の端子から下の端子へ）はオブジェクトの移動（Transform）の制御以外にも「関係」を指定するのにも使用します。
Textureノードとオブジェクト系ノード、OnBreak ノードと検知先のオブジェクトノード、ArrayノードとLineノード。
通常は親が子を複数持つことはできますが、子は親を複数指定することはできません。
Textureノード、OnBreakノード、Arrayノードは複数の親（割り当て先）を持つことができます。
11-9. 複数ノードメニュー
ダブルクリックの２クリック時にドラッグするとノードを範囲選択で複数同時に選択することができます。複数のノードに対して以下の事ができます。
PROPERTY : 複数選択ノードが全て同じ種類であれば PROPERTY ボタンがあらわれます。まとめて PROPERTY を変更したい時便利です。
MAKE COMPO : 複数ノードをコンポにします。９章. Compo ノードを参照ください。
DUPLICATE : 複数ノードをまとめて複製します。
DELETE : 複数ノードをまとめて消すことができます。
11-10. １フレーム内の処理
ノードはすべて同時に処理されます。
どのノード先に作ったかで結果が変わることはありません。
オブジェクトノードなどは1フレームに1回処理が行われます。
Counter, Var, Trigger, Random, Array などの「値を覚えるノード」も 1フレームに1回だけ更新されます。
＋ や × のような計算ノードは値を覚えないので、必要になったときに計算されます。
ただし計算ノードがループになっている場合は、1つのノードは1フレームの中で一度しか処理されません。
11-11. UNDO / REDO
MENU の UNDO / REDO で、ノードの作成・削除・移動・接続・プロパティ変更などを取り消したり、やり直したりできます。50 手前まで戻せます。
TEXTURE / LINE / SEQUENCER の各エディタは、それぞれ独自の UNDO 履歴を持っています。エディタ内の ◁ / ▷ ボタンで操作してください。LINE Editor、SEQUENCER も 50 手まで戻せます。TEXTURE はサイズによってUndo回数が変わります。
なお Play の実行は取り消しの対象ではありません。また保存や読み込みも取り消せません。
11-12. 3Dオブジェクト
nodegram には Polygon と ARRAY + LINE (3D表示用) という、3Dオブジェクトを表示するためのノードがあります。どちらも .obj ファイルの IMPORT でのみ作成できます（CREATE NEW NODEでは作れません）。
ただし nodegram 自体はあくまで2Dのプラットフォームです。3Dオブジェクトはその見た目を2Dの素材として利用できるようにしたもので、他の2Dオブジェクトと同じく Sorting Layer の設定に従って表示順が決まります。同じ Sorting Layer にある複数の Polygon ノードはまとめて1つの3D表示として処理され、奥行きの前後関係も正しく重なって描画されます。
３DオブジェクトはZ座標を持ちます。画面の位置が z=0 で置く方向が +z、視点方向が -z です。視点からスクリーンまでの距離、視点の高さを setting ノードで変更できます。
２Dオブジェクトの親子関係も設定できますがその際は z=0 で使用することをおすすめします。
LINE (3D表示用) として描画するには、LINE ノードの子にした ARRAY の値を x,y,z の組を並べた数値列にします。区切りの (9999,9999,9999) が現れるまでを一続きの線としてつなぎ、それ以降は新しい線として扱われます（形式：x,y,z, x,y,z, ,,, 9999,9999,9999, x,y,z, ,,,, 9999,9999,9999）。ARRAYの親に複数のLINEを指定することもできます。
12. 注意点
- スマホ使用時：
nodegram のショートカットをホーム画面に追加することでアプリのように扱うことができます。ただアプリと同じようにアプリを消す（ホーム画面のショートカットを消す）とSaveデータが消える可能性が高いです。完成したプログラムは Exportを使ってプログラムを外部ファイルとしてバックアップを取ってください。
スマホのブラウザによっては表示や操作位置がズレることがあります。
そのような場合は nodegram を終了。タスクを消し（アプリを削除するのではない）、スマホの向きをしっかり横向きにして再度起動すると直ります。
- 自動セーブ：
save 画面の「auto save」がオンになっていると、30秒ごとに直前のファイルへ上書きされます。別名で残したいときはSaveで新しい名前を付けてください。
- 権利：
nodegram で作った作品は作った人に全ての権利があります。こちらが勝手に使用したり権利を主張することはありません。
nodegram のコードや仕様については私（harada）に権限があります。nodegram のコードの再配布は許可なしに行わないでください。
- 著作権やトラブルについて：
著作権のあるものを配慮無く使うことはお控えください。
また、nodegram の使用により発生した問題はこちらでは責任は負いません（こちらが故意で問題が起きるコードを入れることはありません）。
13. 連絡先
- バグ報告、連絡があれば Xに連絡ください
https://x.com/daiii
0 件のコメント:
コメントを投稿