読者です 読者をやめる 読者になる 読者になる

モーリーのメモ

プログラミングやCG作成等、アプリ開発を中心に情報を収集中!

ListViewを作る! その1:Cocos Creator

Cocos Creator

 以前、Cocos Studio 2を使ってListViewを作成しました。
mmorley.hatenablog.com
 今回は、同じものをCocos Creatorで作成します。
 Cocos CreatorにはListViewコンポーネントがありません。
 ScrollViewコンポーネントをカスタマイズしてListView作成します。

使用環境

 私が使用している環境です。

  • Mac OS X El Capitan Version 10.11.4
  • Cocos Creator Version 1.0.1
  • ブラウザ:Google Chrome Version 50.0.2661.75 (64-bit)

プロジェクトの新規作成

Hello World』プロジェクトを新規作成します。

  1. 『Cocos Creator』を起動
  2. Dashboard』画面で『New Project』タブをクリック
  3. プロジェクトの種類の選択で『HelloWorld』を選択
  4. 任意の保存場所とプロジェクト名を入力して『Create』ボタンをクリック

リソースの準備と登録

リソースファイルの準備

 今回使用するリソースファイルを用意しました。

  1. 下記のリンク先の『Download』をクリック
  2. ダウンロードしたresources.zipを解凍
    『resources』フォルダには、下記のファイルが含まれています。

    画像ファイル
    フォントファイル
    • fontCaption.fnt
    • fontCaption.png
    • fontStage.fng
    • fontStage.png

リソーフスファイルの登録

 リソースファイルを『assets』に登録します。

  1. 『Assets』パネルで『assets』を右クリックし、『Create』-『Folder』をクリック
  2. 作成された『New Folder』を右クリックし、『Rename』をクリックして『Font』に名前を変更
  3. 4つのフォントファイルを『Font』フォルダにドラッグ&ドロップ
  4. 画像ファイルを『Texture』フォルダにドラッグ&ドロップ

 すべて追加すると『Assets』パネルは下図のようになります。
 f:id:mmorley:20160420201332p:plain:w200

Canvas』のサイズを変更

 幅640px、高さ960pxに変更します。

  1. 『Assets』パネルで『Scene』フォルダの『helloworld』ファイルをダブルクリックして開く
  2. 『Node Tree』パネルで『Canvas』をクリックして選択
  3. 『Properties』パネルで『Canvas』-『Design Resolusion』を『640, 960』に変更

『ScrollView』を追加

  1. 『Node Tree』パネルで『Canvas』を右クリックし、『Create』-『Create UI Nodes』-『Node With ScrollView』をクリック
  2. 『Properties』パネルで、追加した『New ScrollView』の属性値を下図のように変更
    *表示していない属性値はそのままです。
    f:id:mmorley:20160421171723p:plain:w300

『scrollBar』の属性値を変更

 『Widgetコンポーネントで、親ノード(ListView)とのサイズ・位置の関係を設定します。
 ここでは上下の端が揃うように設定します。

  1. 『Node Tree』パネルで『ListView』のツリーを展開し、『scrollBar』をクリック
  2. 『Properties』パネルで『scrollBar』の属性値を下図のように変更
    *表示していない属性値はそのままです。
    f:id:mmorley:20160420215321p:plain:w300

『view』の属性値を変更

 『View』はリストの表示範囲を設定しています。

  1. 『Node Tree』パネルで『ListView』-『view』をクリック
  2. 『Properties』パネルの一番下の『Add Component』をクリックし、『Add UI Component』-『Widget』をクリック
  3. 『Properties』パネルで『view』の属性値を下図のように変更
    *表示していない属性値はそのままです。
    f:id:mmorley:20160420220700p:plain:w300

『content』の属性値を変更

 『content』はリストの項目の親になるオブジェクトです。
 『Layout』コンポーネントで、項目の並べ方を設定します。

  1. 『Properties』パネルの一番下の『Add Component』をクリックし、『Add UI Component』-『Layout』をクリック
  2. 『Properties』パネルの一番下の『Add Component』をクリックし、『Add UI Component』-『Widget』をクリック
  3. 『Properties』パネルで『content』の『Widget』の属性値を下図のように変更
    *この作業は、『content』の上端を『view』と揃えるためにやっています。サイズを手入力するのは面倒なので『Widget』を一度有効にしています(後で無効にします)。
    f:id:mmorley:20160420222103p:plain
  4. 『Properties』パネルで『content』の属性値を下図のように変更
    *表示していない属性値はそのままです。
    f:id:mmorley:20160420224053p:plain:w300

シーンの保存

  1. キーボードの『command + s』を押して、シーンを保存

 
 ここまでで、『ListView』の外枠が出来ました。
 次は、リストの項目を作るのですが、今回はここまでにします。

あとがき

 『Widget』は、親ノードに対する位置とサイズの関係を設定するコンポーネントで、
 『Layout』は、子ノードの並べ方を設定するコンポーネントです。
 『Layout』の『Padding』は上端と下端の余白の幅で、左右は無いみたいです。
 なので『Widget』と組み合わせて上下左右の余白を設定しました。

広告を非表示にする