nodegram

 nodegram

ノードプログラミングツール。
スマホ、タブレット、PCのブラウザ上でノードプログラミングができます。
現在まだ開発途中のバージョンです。告知なく機能の追加等を行います。
テストプレイよろしくお願いします。
（８月中にはリリースしたい。）



nodegram : https://daisuqe.github.io/nodegram/

▶ ブラウザで開く


プログラムサンプル（シューティングゲーム）：

▶ ブラウザで開く

1. Nodegram とは

Nodegram は、ブラウザで動作するノードでプログラミングするツールです。

キャラクターノードとジョイスティックノードを繋ぐだけでキャラクターを Play画面 で動かすことができます。


・スマホやPCでプログラミングができます。
・作ったゲームを他の人に遊んでもらうことができます。
・nodegram はインターネット上にあるのでネットに繋がっていればどこでもプログラミングできます（nodegram のプログラムのサイズは画像1枚分程度です）。





2. 基本的な使い方

Nodegram には
　プログラミングをするNodeEditor
　オブジェクトを配置するLayout画面
　プログラムを実行するPlay画面 
　の3つの操作画面があります。

2-1. ノードを作成する（NodeEditor）

  • NodeEditor画面の何もない黒いエリアを長押しすると「CREATE NEW NODE」画面が開きます。


  • Node 一覧から追加したいノードを選ぶと、NodeEditor にノードが作成されます。
  • 各ノードを長押し、もしくはダブルクリックすると各ノードの詳細を設定するプロパティ（Property）画面 になります。
    オブジェクトの色などをここで変更可能です。
    「OK」ボタンは無く、値は変更した時点で反映されます。右上の×ボタンを押すか、ダイアログの外を押してダイアログを閉じてください。
    DUPLICATEはノードの複製、DELETEは削除を行います。


  • ノードをドラッグ（タッチして移動）するとノードが移動します
  • ノードの右にある出力ポートから入力ポート（ノードの左）へドラッグしてワイヤーを接続します。ワイヤーを接続すると数値が赤い端子から青い端子に渡されます。



  • ノードの上側に端子（子端子）があるノードは、子端子から親端子（他のノードの下）に接続すると親子関係になり、親が移動すると子も一緒に移動します。

    2-2. ノードを画面に配置する（Layout 画面）

    • Layout画面に切り替えるには「Layout」ボタンを押してください。


    • Rect・Circle・Character・Text などのオブジェクト系、
      Button・Stick・Shot などの操作系ノードは Layoutで画面 で配置位置を決めます。


    • オブジェクトのドラッグで移動、オブジェクトの４隅にある白いハンドルでサイズを、上にある丸いハンドルで向きを調整します。
    • 「NODE」ボタンを押すとNodeEditorに戻ります。

    2-3. 実行する（Play 画面）

    • NodeEditor、またはLayout画面に右上の ▶（Play）ボタンでPlay画面に切りわかります。
      切り替わるとすぐにプログラムを実行します。
    • Play 画面右上の □（Stop）ボタンの長押しで Play を停止し、Edit画面に戻ります。
    • Play 画面では60分の1秒（1フレーム）ごとにオブジェクトノードが表示され、物理演算とともに動きます。
    • JoyStick、キーボード、マウスなどで操作させることができます。


    • Play画面内で重力を表現することもできます。
      ピンボールやマリオのようなゲームを作る場合はDynamicsをオンにします。
      Settingノードを追加し、Property の Dynamicsをオンにするとプログラム全体でDynamics処理が有効になります。
      各オブジェクト系ノードにもDynamics設定項目があるので個別にオンにする必要があります。

    3. ビューの説明と操作

    3-1. NodeEditor の操作

    ノードを並べてワイヤーでつなぐ、ノード構築画面です。


    操作内容
    背景1本指ドラッグビューの移動
    2本指ピンチ、マウスホイール回転ビューの拡大・縮小
    ダブルクリック→ドラッグ（背景）範囲選択（複数ノード選択）
    背景を長押しCREATE NEW NODE 画面を開く
    ノードをドラッグノード移動（複数選択時はまとめて移動）
    ドラッグ中に画面端へ寄せるその方向へビューが自動スクロール
    ノードをダブルクリック／長押しプロパティ画面を開く（複数選択時は Duplicate/Delete メニュー）
    端子間をドラッグワイヤー接続（誤動作防止のためタップ後一瞬指を置いてからドラッグする仕様になっています）
    接続線を長押し／ドラッグアウト接続の解除
    端子から外側へドラッグして離しても解除できます

    右上の再生ボタン▶を押すとPlay画面になりプログラムを実行します。


    Menuボタンはフリックメニューになっています。
    （ボタンを押して移動し、放したところのボタンの機能が実行される。押しボタンメニューとしても動作します）
    • Layout：Layout画面に切り替わります。
    • New Node：CreateNewNode画面が開きます。
    • Undo、Redo：操作を１つ前に戻す（Undo）、戻しをキャンセル（Redo）を行うことができます。
    • FIT：全ノードがビューに入るようにビューの表示位置を移動します。

    • SAVE、LOAD：デバイスに保存、デバイスからの読み込みができます。
      またExport、Importを使用するとプログラムをファイルとして出力することができ、GoogleDrive等を利用してスマホとPCの間でプログラムを共有したり編集の続きをしたりすることができます。
      またImport には現在作業中のプログラムに追加読み込み（Merge）する機能もあります。
      auto save チェックボックスをオンにすると 1分ごとに上書き保存します。
      Saveをしてもアプリのアイコンを消したりするとプログラムが無くなってしまう可能性があるので、大事なプログラムは Export でバックアップを取っておくことをおすすめします。

    • NEW：ノードを全て消します。
    • Setting：重力や画面の向きなど、アプリで共通の値を設定します。
      　　　　プログラム内の設定は Setting ノードを作成し、そこで行います。

    3-2. Layout 画面の操作

    オブジェクトの配置・サイズ・回転を決める画面です。グレーの矩形が Play時の表示エリアを表します。


    基本的にはNodeEditorと同じ操作です。

    操作内容
    1本指ドラッグ（背景）ビューの移動
    マウスホイール／2本指ピンチ拡大・縮小
    オブジェクトをドラッグ移動（複数選択時はまとめて移動）
    オブジェクトをタップ選択。この選択はNodeEditorと共有
    ハンドルをドラッグサイズ変更・回転
    ダブルクリック→ドラッグ（背景）範囲選択（複数選択）
    背景を長押しCREATE NODE 画面を開く
    選択を長押しプロパティ画面を開く（複数選択時は Duplicate/Delete メニュー）
    オブジェクトを選択すると右に「50」などの数字が表れます。
    この数字はSortingLayer値で、値が大きいほど手前に、少ないと奥に表示されます。
    下の上下ボタンで増減ができます。

    また、SETTINGノードを作成するとプロパティにGridSnap があります。
    オンにするとオブジェクトの移動が10ピクセル単位になります。

    3-3. Play 画面の操作

    プログラム実行画面です。



    操作内容
    右上の □ ボタン実行停止してEditor画面に戻る
    Stick・Button画面上の仮想入力デバイスを操作
    キーボード / ゲームパッドKeyboard・Stick・Button ノードにマッピングして操作

    4. ノード操作


    • 作成： Editor/Layoutの背景（ノードが無い空間）を長押しして CREATE NODE 画面を開いて作りたいノード名 を選択。

    • 接続（ワイヤー）： 出力ポート（右の赤い丸）→入力ポート（左の青い丸）へドラッグ。
      数値が出力から入力に渡されます。
      ノードへの入力は複数繋ぐことができます。複数の入力があるとその数値の総和がノードに渡されます。
      接続の解除は 接続線を長押し、または端子から外側へドラッグして離す。

    • 親子接続： オブジェクト系ノード上部中央の「子端子」を、親にしたいノードの下にある「親端子」へドラッグ。親の移動・回転に子が追従します。
      またオブジェクト系ノード以外でもTextureノードやOnBreakノードのようにノードの指定に使うこともあります。
      親が子を複数持つことはできますが、子は親を複数指定することはできません。
      Textureノードだけは複数の親（Texture の割り当て先）を持つことができます。

    • プロパティ編集： ノードをタップ（または長押し）してプロパティ画面を開き、値・サイズ・色・物理モード・回転などを編集。

    • 複製・削除： ノードを長押しし、プロパティ画面内の DUPLICATE / DELETE ボタン。複数ノード選択時は長押しして Duplicate / Delete。

    5. 仕様

    5-1. 2D 専用

    Nodegram は 2D 専用です。座標は X（右が＋）・Y（上が＋）の2軸で。SettingノードでDynamicsをオンにするとキャラクターは画面下方向に落ちます。
    トップビューのゲームを作る時はSETTINGノードでDynamicsをオフにするか、ゲーム全体の重力を0にします。

    5-2. FPS

    目標フレームレートは 60 または 30 を SETTING ノードで選択します（デフォルト 60）。ノードの評価も物理も、このFPSを基準に進行します。処理が重くなるとPlayの挙動が遅くなり、フレームレートが指定値より下がります。

    5-3. Dynamics（物理的挙動）

    Rect、Circle、Character、Shot などのオブジェクトには物理モード（Dynamics）を設定できます。挙動は Unity の Rigidbody2D とほぼ同様です。

    モード挙動
    Off物理なし。ノード入力（X,Y）で座標を直接移動するだけ。
    Static動かない壁・床。重力や衝突では動かない。
    Dynamic重力・衝突を受けて物理的に動く。ノードのX/Y入力は「力（フォース）」として加わる。
    Kinematic重力・衝突では動かないが、ノード入力で強制移動でき、他のDynamicに衝突・干渉できる。

    比重の指定はありませんが一般的な木材程度を基準にしています。

    5-4. SortingLayer（表示順）

    各オブジェクトの SortingLayer（0〜100、既定 50）で Play 画面での表示の重なり順を決めます。数値が大きいほど手前（上）に描画されます。BG（背景）は常に最背面です。
    同じ値どうしは、追加した順に表示されます。

    5-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座標系）。

    5-6. 解像度

    Play時の表示エリアはLayoutのグレー矩形のサイズです。
    画面向き（横=Holizontal／縦=Vertical）はSETTINGノード（Settingメニューではない）で切り替えられ、実機の画面サイズに合わせてフィット表示されます。
    また固定解像度にする場合はSettingノードのScreenSizeから行ってください。

    5-7. Tag

    Tag はグループです。
    例えばザコ敵にはすべて「Enemy_tiny」というTagを付けたり、壊れる背景と壊れない背景で「bg_destroyed」「bg」のようにTagを付けたりします。
    Shot, OnBreak, Rect, Circle, Character ノードなどが Tagを使用します。

    6. スマホ、PCでの挙動


    　スマホでの挙動

    • タッチ操作：
      1本指でパン、2本指でピンチズーム。長押しやダブルタップ→ドラッグなどPCと同様に操作できます。

    • 縦横の切り替え：
      端末を回転すると画面の縦横に追従します。Play中の表示向きはSETTINGノードでの指定の向き（横=Holizontal／縦=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+Z
      		Redo


      TEXTUREエディタを開いているとき（上記に加えて）

      キー動作
      Ctrl+Vクリップボードの画像を貼り付け
      Ctrl+C編集中のテクスチャ全体をクリップボードへコピー
      Ctrl+Zテクスチャ編集の Undo
      Ctrl+Y または Ctrl+Shift+Zテクスチャ編集の Redo

    7. ノード解説



    入／出は入力端子数／出力端子数です）。

      定数

    ノード入/出説明
    Constant0 / 1数字を出力します。　　　　　　　　　　　　　　　　　　　　　　　

      計算系



    ノード入/出説明
    ＋2 / 1入力① ＋ 入力②。＋ノードを使わなくても。全てのノードの入力端子は複数のワイヤーを繋ぐことができ、合算の機能がある。なので入力①に２つのワイヤーをつないでも加算結果を出力する。
    －2 / 1入力① － 入力②
    ×2 / 1入力① × 入力②
    ÷2 / 1入力① ÷ 入力②。分母0なら0。
    √1 / 1入力①の平方根を出力します。入力が0以下のときは0を返します。
    Compare2 / 1入力①と入力②を比較（= > < ≠ ≧ ≦）。成り立つなら1、成り立たないなら0。
    Not ( ! )1 / 1入力①が0なら1、それ以外は0。
    Pos Angle2 / 1位置を角度に。ArcTan2(入力②, 入力①) を度で出力。
    Angle Pos1 / 2角度を位置に。角度(度)から(cos, sin) を出力。
    Random1 / 10〜Value プロパティ未満の整数乱数。
    Valueに10を指定すると０～９の10種類の数字のどれかが出力されます。
    入力が０以外の時とスタート時にランダム値を更新。
    Seed値を指定するとプログラム起動ごとに毎回同じ順序で同じ乱数を発生します。
    Int1 / 1整数化。Round プロパティで Floor / Round / Integer を選べます。
    既定の Floor は入力値以下で一番近い整数で、2.8 は 2、-0.1 は -1 になります。Round は四捨五入、Integerは整数部分の取得です。

      数値操作系

    ノード入/出説明
    Trigger1 / 1入力が０から０以外になった瞬間だけ1フレーム1を出力。
    DELAY(F)で指定フレーム遅延で１を出力。
    Counter2 / 1カウンター。①に入力された数字を毎フレーム加算。②を減算。内部に保持している数字を出力。Type＝None / Clamp（最大値最小値指定） / Loop と Value（初期値）・Min/Max を設定可。
    counter の出力値を計算して入力側に再び入力に入れる場合など遅延が起こらず思った値にならない場合があります。この場合はTriggerノードのDELAYプロパティを併用してください。
    Var2 / 1変数として使用できるノード。ノード内に保持した数値１つを出力する。
    入力②のセット信号に0以外の数値が指定されたとき入力①を記憶。
    初期値設定あり。
    Array3 / 1配列として使用できるノード。
    入力②のインデックスを指定すると配列の値を出力する。インデックスは０始まりなので配列長さが３ならインデックスは０か１か２。０未満、３以上を指定すると値無しとして０を返す。
    入力③のセット信号で入力①の値を指定インデックス②の要素に上書きする。
    初期値リストは複数の数字を「,」（カンマ）もしくは改行で区切って書き込んでください。
    配列はSoundノードと併用して楽譜のように利用したり、Lineノードと併用して折れ線のグラフィック表示をすることもできます。プロパティの SEQUENCER / LINE ボタンから楽譜、折れ線のグラフィックとしてエディタで編集することもできます（下記）。
    GetPos0 / 2対象（または親）の現在位置 X, Y を取得。WORLD/LOCAL切替。
    GetRot0 / 1対象（または親）の現在角度(Z, −180〜180)を取得。WORLD/LOCAL切替。
    Velocity0 / 2親オブジェクトの速度 X, Y を秒速換算で出力。Frames 範囲内の時間の平均速度を出力します。

    Array の専用エディタ（SEQUENCER / LINE）


    • LINE エディタ：
      Line ノードにつなぐ折れ線を描くツールです。
      編集エリアは中央が原点で、X は右が＋、Y は上が＋の -99〜99。
      DRAWで折れ線描画。描いている間はDRAWボタンが Endpoint ボタンに変わり、押すと一筆書きが確定します。
      MOVEで頂点移動、ERASEで線分を1本だけ削除。VIEWで視点移動、◁ ▷でUndo / Redo。閉じると x,y の数値列に変換され、x,y = (9999,9999) で線が途切れます。
      Array ノードの親にLINEノードを指定するとLINEノードがArrayの情報で描画を行います。


    • SEQUENCER：
      Sound ノードにつなぐ楽譜のArrayを作るツールです。8分音符のみ・1小節＝8個・最大500小節・3オクターブ。
      DRAW モードのクリックやドラッグで音符を置き、ERASE モードのドラッグで消します。背景のドラッグで左右スクロール、ピンチやホイールで拡大縮小できます。
      閉じると8分音符ごとの音階の並びに変換され、休符は 99（SOUND ノードにも対応）、最後の音符がある小節の終わりまでは休符で埋められます。
      Arrayだけでは音はなりません。下記のリンク先のようなプログラムが必要です。

      ▶ サンプルを開く

    　複数のシーケンス（Array）を同時に編集する機能もあります。
    　NodeEdotorで複数のArrayノードをまとめて選択し、ノードを長押しして
    　「SEQUENCER」を選択します。
    　番号ボタンクリックで編集するArrayを選択、長押しで音量調整メニュー、
    　ドラッグで順番を変えることもできます。



      出力系

    ノード入/出説明
    Text2 / 0テキスト表示。入力が未接続なら Text プロパティで指定した文字を表示、接続時は数値を表示。入力②で表示のオンオフ。数値は小数点以下6桁を四捨五入し5桁目まで表示します。文字色、レイアウト、周りの四角の表示オンオフを設定可能。
    Rect3 / 0長方形。入力①/②=X/Y位置、入力③=可視状態の指定。
    表示色、枠だけ表示、Dynamics、Tag、破壊タグ、サイズ、回転、SortingLayerなど。
    Destoroyed 1～3 でRectが何に壊されるかを指定します。
    Dynamics、Tag については 5.仕様 を参考にしてください。
    Circle3 / 0円。入力仕様はRectと同様。
    Character3 / 0キャラクターノード。移動とジャンプができる。
    入力①/②=移動、入力③=ジャンプ(非0でトリガー)。
    Dynamics をSetting ノードでオンにしないとキャラクターは下に落ちません。
    トップビューのゲームなど、Dynamicsを使いたいがキャラクターに引力を影響を受けさせたくない場合はSettingノードでGravityをオフにしてください。
    なお Character の親に指定できるのは WARP IN だけ。
    Flip : キャラクターのテクスチャを進行方向で反転
    AutoRot : 進行方向を向きます。
    KeepOnScreen : キャラクターをスクリーンの外に出ないようにする
    他の仕様はRECTノードと同様です。
    Shot1 / 1弾を発射。入力①が発射トリガー。最大弾数・間隔・速度・形状・サイズ・色・衝突タグ設定可。BREAK BYで消滅タグ(ALL含む/最大3タグ)を指定可。
    出力＝弾が実際に出た瞬間だけ1フレーム1（弾数上限で発射されなかったときは0のまま）。
    Keep Off-Screen：ONで弾が画面外に出ても消えず、上限に達したら古い弾から消えます。
    Line5 / 0(X1,Y1)-(X2,Y2)を結ぶ直線を描画。入力⑤(S)が非0の間だけ座標を更新し、0の間は形状を保持。
    子にARRAYノードを指定すると、入力①〜④は無視され、配列の値(x1,y1,x2,y2,x3.y3,,..)を一筆書きの線として描画する。（x,y) = (9999,9999) で線を区切る。
    Sound3 / 0入力①=音階(ハ長調,0=C4)、入力②=音量（未接続時はプロパティの値）、入力③=音出力オンオフ。音色、音量設定可。
    入力①に99が入力されると無音（休符）になります。0.5単位の入力で黒鍵の指定もできます。プロパティのToneは0.5刻みですが、入力①でのTone指定は無段階で小数入力可能です。

      操作系

    ノード入/出説明
    Stick1 / 2仮想スティック。出力①/②=X/Yの傾き。入力で可視。アナログ/デジタル・1軸制限・キー/パッド割当あり。
    Button1 / 1仮想ボタン。押下中に1。入力で可視。見た目・出力タイプ・ゲームパッド割当あり。
    Keyboard0 / 1指定キーが押されていれば1。
    Touch0 / 3画面タッチ。出力①=X, 出力②=Y（中央が0,0）、出力③=S（タッチ中の信号）。

      そのほかのノード

    ノード入/出説明
    TEXTURE1 / 0ドット絵を編集・保持し、親として割り当てたオブジェクトの絵柄にする。Rect、Circle、Chara、Shot、BG にも割当可。複数の親（オブジェクトノード）を指定することができる。入力０で非表示。１つのオブジェクトに複数のテクスチャを繋ぎ、1つだけをVisibleにすることで表示するテクスチャの切り替えができる。
    オブジェクトに張り付ける時フィットさせるかタイリングで貼るか選択できます。
    親指定しないでテクスチャのみで表示することもできる。
    TextureEditor ではパレットの長押しで色の選択が可能。市松模様は透明を表します。
    他のソフトでコピーしたグラフィックバッファの貼り付けをCtrl+Vでできます。
    テクスチャサイズはなるべく小さいサイズを使用することをおすすめします。特にSHOTノードに大きいテクスチャを貼ると動作が重くなります。
    SENSOR0 / 1接触検知。設定した対象が接触している個数を出力します。非接触は0。Target=SCREEN は「画面内にいるか」を判定します。
    親の指定ができるのでキャラクターの手にセンサーを付けるような事もできます。
    ONBREAK1 / 1同一フレームで破壊されたオブジェクト数を出力。破壊エフェクトの種類(Particle/Line/Circle/Rect)と色を設定可。
    Onbreakノードで参照先を指定しないとエフェクトノードとして使用できる（入力でエフェクト発生）。
    ROTATE1 / 0オブジェクトを回転ヒンジで接続。入力で回転角（度）を制御。
    SCREEN3 / 2Play時のカメラ制御。X / Y＝カメラ位置（親を指定すると親に追従＋オフセット）、S＝ズーム。出力＝画面の幅 W・高さ H。SCREEN を親にしたオブジェクトや TEXT は画面に固定表示されます（スコアなどの HUD）。
    RESTART1 / 1入力に 0 以外が入ると、プログラム全体を最初からやり直します。すべてのノードの状態（位置・変数・カウンタ・弾）が初期化されます。出力＝リスタートのきっかけになった入力値を、リスタート後に出力し続けます（残機数やスコア数の引継ぎなどに使えます）。
    COMPO3 / 3複数ノードを1つにまとめた部品。E＝有効/無効、1・2＝内部とのやりとり。
    Compo ノードの詳細については後述。

    　ワープ系

    ノード入/出説明
    WARP IN1 / 0オブジェクトを別の場所へ瞬間移動させる仕組みの「入口」。子に指定したオブジェクトが対象になります。
    入力に0以外が入ると、子に指定したオブジェクトが同じ Index を持つ WARP OUT の位置・角度へ移動します。0以外が入り続けている間はそこに固定され、0になると固定が解除されて再び自由に動けるようになります。
    プロパティは Index のみ。Compo の中に入れることはできません。
    WARP OUT0 / 0ワープの「出口」。同じ Index を持つ WARP IN から送られてきたオブジェクトが、この位置と角度に移動します。
    プロパティは Index のみ。Layout 画面では位置の移動と回転ができます（大きさは持たないのでリサイズはできません）。オブジェクトを親に指定して一緒に動かすこともできます。Compo の中に入れることはできません。

    　接続系

    ノード入/出説明
    IN1 / 0ノード出力先のワイヤーを遠くにつなげる時に使用する。INノードに接続した信号は同じインデックスを持つOUTノードに出力されれる。
    同じインデックスを持つINノードを複数作ることはできない。
    Compo ノードのインデックスを指定すれば Compo 内部へのアクセスにも使用できる。
    Compo ノードについては後述。
    OUT0 / 1ノード入力先のワイヤーを遠くからつなげる時に使用する。INノードに接続した信号は同じインデックスを持つOUTノードに出力されれる。
    同じインデックスを持つOUTノードを複数作ることができる。INに入った数値が全ての同じインデックスを持つOUTノードに出力される。
    Compo ノードのインデックスを指定すれば Compo 内部へのアクセスにも使用できる。
    Compo ノードについては後述。

    設定系

    ノード入/出説明
    MEMO0 / 0画面に書き込む注釈（メモ書き）。Play 時には表示もされません。
    BG0 / 0実行画面の背景。シーンに1つ。常に最背面。
    TEXTURE ノードを割り当てると、その絵をタイリングして背景に敷き詰めます。TEXTURE 未割り当てのときは Color の単色で塗ります。
    SETTING0 / 0シーン全体の設定。Screen / ScreenSize / ScreenLong / ScreenShort / FPS / Dynamics / Gravity / Friction% / Bounce% / Drag% / StopBtnCol（停止ボタンの枠色）/ GridSnap。シーンに1つ。

    8. Compo ノード

    • 複数のノードを１つのノードのように扱うことができる特殊なノードです。


      例えば同じ処理を行うノードの組み合わせがプログラムに10回出てきたら何らかの形で1箇所にまとめて流用したくなりますよね。
      nodegram では複数のノードを１つの Compo ノードとしてまとめ、その Compo ノードを複製して使うことができます。

      同じ敵キャラを10体作りたい場合は1体のプログラムを作成し、1体に使用するノード達を１つの Compo にまとめ、Compoを複製し、Layoutに配置することができます。

      複製した Compo ノードの中身はプログラム的には同じものになっているので、１つのプログラムを変えると他のコンポのプログラムも書き換わりますが、それぞれが持つ座標や変数、寿命などはコンポごとに別々に処理されます。

    • Compo ノード作成手順
    1. ひとまとめにしたいコンポ達をまとめて選択します。
      まとめて選択はダブルクリック＋ドラッグで行います。
      ダブルクリックの2クリック目をマウスを離さずドラッグして範囲選択します。
      スマホだと「トン、ト、ツー」って感じです。
      （このサンプルプログラムは左が自機、囲んだエリアが自機に近づくいてくる敵機１体のプログラムです）



    2. ノードが複数選択された状態でどれか１つのノードを長押しするとメニューが表れます。「MAKE COMPO」を選択すると Compo にまとめるか聞かれるので「Yes」を押します。




    3. 複数のノードが「C1」という１つの Conpo ノードになりました。


    4. C1 ノードを長押し（もしくはダブルクリック）すると Compo の中を編集する NodeEditor に入ります。
      Compo に繋がっていた接続線が「C1  1」「C1  2」という OUT ノードに変わっています。

      右の「MENU」ボタンを押すと左の列が Compo 関連のコマンドに変わっています。
      「Duplicate」を押すとこの Compo ノードが複製されます。
      右下の「PARENT」ボタンを押すとこの NodeEditor を出て親の NodeEditor に戻ります。



    5. 親の NodeEditor で Compo ノードが複数できているのが確認できます。
      「C1 (2)」にも同じ入力値を渡したいのでノードの入出力に接続します。



    6. 「LAYOUT」ボタンを押してレイアウトをコンポごとに調整します。


    7. Playボタン「▶」を押すと敵機が複数あり、それぞれ独自に動いていることが確認できます。

    8. 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 番号無しの IN ノードを利用することができます。
      Compo 内で Compo 番号無しの OUT ノードは利用することはできません（同じ OUT ノードは複数作れないので）。

      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 内に作成できません。


    9. プログラムをほかの人に遊んでもらう

    URLを教えるだけで自分が作った作品を他の人に遊んでもらうことができます。
    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制限）。

    10. 注意点

    • スマホ使用時：
      nodegram のショートカットをホーム画面に追加することでアプリのように扱うことができます。ただアプリと同じようにアプリを消す（ホーム画面のショートカットを消す）とSaveデータが消える可能性が高いです。完成したプログラムは Exportを使ってプログラムを外部ファイルとしてバックアップを取ってください。

      スマホのブラウザによっては表示や操作位置がズレることがあります。
      そのような場合は       nodegram を終了。タスクを消し（アプリを削除するのではない）、スマホの向きをしっかり横向きにして再度起動すると直ります。

    • 自動セーブ：
      save 画面の「auto save」がオンになっていると、1分ごとに直前のファイルへ上書きされます。別名で残したいときはSaveで新しい名前を付けてください。

    • 権利： 
      nodegram で作った作品は作った人に全ての権利があります。こちらが勝手に使用したり権利を主張することはありません。
      nodegram のコードや仕様については私（harada）に権限があります。nodegram のコードの再配布は許可なしに行わないでください。

    • 著作権やトラブルについて： 
      著作権のあるものを配慮無く使うことはお控えください。
      また、nodegram の使用により発生した問題はこちらでは責任は負いません（故意で問題が起きるコードを入れることはありません）。

    11. 連絡先

    Nodegram ユーザーガイド —

    0 件のコメント:

    コメントを投稿

    登録: 投稿 (Atom)

    【注意】旧サイトにアクセスしないでください

    うっかりしていてドメインが消えてしまいました。 旧ドメインはフィッシングサイトに誘導されることがあるようです。 お気を付けください。