入力と出力をつなげて文字を表示する
必要な部品をEditor上に配置したら、今度は各部品の出力側と入力側を線（パス）でつないでいきます。
JavaScriptの部品の右側にある「outputNumber●」の●上にマウスカーソルを移動し、ボタン（2ボタンマウスの場合は左ボタン）を押したままの状態でImage With Stringの「●String」の●上までカーソルを移動させます。2つの部品の間に線が表示されたところで左ボタンを離すと、2つの部品が線で結ばれます。
部品が線で結ばれる
同様にImage With Stringの右側にある「Image●」とBillboardの「●Image」をつなぎます。これですべての部品が接続できました。Viewerに大きく「0」の文字が表示されれば成功です。
すべての部品が結ばれ、Viewerに結果が表示されます
Viewerには0が表示されます
Viewerに表示されている文字は、デフォルトでは小さなサイズの文字を画像に変換して拡大しているためガタガタしています。そこで、文字サイズを大きくします。Image With Stringの部品を選択し、Editorウィンドウ右上にあるParametersのアイコンをクリックするとFont Sizeの項目があります。デフォルトの0.1から1に変更してみてください。Viewerの「0」の文字が綺麗になるはずです。
Font Sizeが0.1になっているので、1にします
Viewerに表示されている0が綺麗に表示されます
これでJavaScriptを使って画面に文字を表示する仕組みが用意できました。
JavaScriptの部品のソースコードをのぞいてみる
ところで、そもそもなぜ、Viewerには「0」の文字が表示されているのでしょうか？ 実はJavaScriptの部品には、デフォルトでサンプルのコードがセットされています。配置したJavaScriptの部品のソースコードを開いて中を確認してみましょう。JavaScriptの部品を選択してInspector（インスペクタ）パレット上にあるポップアップメニューから「Setting」を選択するとソースコードが表示されます。
JavaScriptの内容が表示されます。編集もこの画面上でできます
/*
A simple script that takes two input values, sums them and returns the result.
Special keywords for defining input and output key types:
__boolean, __index, __number, __string, __image, __structure, __virtual
Note that the function input arguments are read-only.
*/
function (__number outputNumber) main (__number inputNumber[2])
{
var result = new Object();
result.outputNumber = inputNumber[0] + inputNumber[1];
return result;
}
かなり短いソースコードですが、functionの行に注目すると、普段見慣れたJavaScriptのコードとは違った記述に気が付きます。
