Cocos Creator でDropDownBox（プルダウン）を作る

１．Cocos Creator エディタでCanvasにScrollviewをCreateします。

２．画面の設置位置にあわせてScrollviewコンポーネントのサイズを変更します。Node TreeペインでNew Scrollviewを選択し、PropertiesペインのNodeセクションでSizeを変更します。

３．次にこのScrollviewをコントロールするためのJSファイルを作成します。Assetsペインでassetsやscriptsまたは新規作成したフォルダで右クリックしてCreate > JavaScriptを選択します。

４．作成したJSファイルが何をするものかわかるように任意の名称に変更します。ここではScrollViewTestControllerとしました。

５．作成したJSファイルで本シーン（Scene）をコントロールするためにCanvasコンポーネントにアタッチします。Canvasコンポーネントを選択し、Propertiesペインの最下部にある「Add Compenent」をクリックし、Custom Component > 新規作成したJSファイル（ここではScrollViewTestController）を選択します。

６．アタッチした本シーンをコントロールするJSファイルを開いて、不要な箇所部分を削除します（特段見づらくなければそのままでOKです）。

７．Cocos Creator エディタに追加したScrollviewコンポーネントを操作するためにPropertiesに以下のように変数を追加します。ちなみにPropertiesに変数を追加するとCocos Creator エディタからアタッチできるようになります。またPropertiesで追加した変数は頭にthis.をつければ、このクラス内で扱うことができるようになります。一方で、Cocos Creatorエディタに表示されるのはわずらわしいがこのクラス内で広域に扱える変数を宣言した場合はctor内で宣言します。

ContentsOnScrollview:{
          default : null,
          type : cc.Node
}

今回作成するDropDownBox（プルダウン）はScrollviewコンポーネントに含まれるContentsコンポーネントに、選択肢を列挙します。ContentsコンポーネントのPropertiesペインを見るとNodeコンポーネントしかないので、本クラスのPropertiesでもNodeコンポーネントとして宣言します。

８．次にCocos Creator エディタを開き、Node Tree ペインでCanvasを選択します。CanvasにアタッチしたScrollViewTestControllerコンポーネントに、７で追加した変数 ContentsOnScrollview のアタッチ欄が表示されているので、このアタッチ欄に、Node Treeペイン上のNew Scrollviewコンポーネントに含まれるContentsコンポーネントをD&D（ドラッグアンドドロップ）してアタッチします。

９．続いてDropDownBox（プルダウン）の選択肢を作っていきます。Buttonコンポーネントを並べてDropDownBox（プルダウン）にする案もありますが、今回はToggleContainerを使ってみます。Contensで右クリックをして、Create > Create UI Node > Node with Toggle Container を選択します。

１０．ToggleContainerには標準でToggle（トグル）コンポーネントが子要素として3つついています。

１１．DropdownBox（プルダウン）の選択肢はこのToggleコンポーネントを量産して生成します。ToggleコンポーネントをPrefab（プレハブ）化して量産するので１つを除いて全て削除します。またDropdownBox（プルダウン）には一般的にタイトルを持たないのでitemコンポーネントもあわせて削除します。

１２．残したToggleコンポーネントにLabel（ラベル）コンポーネントを追加して、JSファイルで動的に生成される選択肢を表示するコンポーネントとします。

１３．生成されたLabelコンポーネントの名称をシンプルに「Label」に変更して、選択肢のサンプル文字列（この例では2020）をStringに入力します。また文字サイズ、文字色、文字位置を調整します。

１４．これでToggleコンポーネントの設定が終わったので、このToggleコンポーネントをPrefab化（プレハブ化）します。Node TreeペインのToggleコンポーネントをAssetsペインにのassetsフォルダにドラッグアンドドロップします。Prefab化はこのようにScene（シーン）やJSファイルと同じフォルダでもいいし、専用フォルダ（例えばprefabsフォルダ）を作って格納してもOKです。Node TreeペインのToggleコンポーネントが青色に、AssetペインのToggleコンポーネントが灰色になっていたらPrefab化が完了です。

１５．続いてこのPrefabを使ってDropdownBox（プルダウン）のOption（選択肢）をScript（スクリプト）で作っていきます。Canvas（キャンバス）にアタッチしたJSファイルを開き、以下をPropertiesに追記します。

まだ途中です。。。