calendar

S M T W T F S
 123456
78910111213
14151617181920
21222324252627
28293031   
<< May 2017 >>

categories

archives

Starling/Feathersの概要まとめ

0
    最近、スマホアプリをもっと作っていけるようになりたーいと思いまして、SpriteKitとかcocos2D-xとか色々本を買ったりして調べていたのですが、結局個人創作レベルならAIRで十分じゃね?という結論に至ってしまった為、相変わらずAdobeの呪縛から逃れられない日々を過ごしております。

    AIRで作るデメリットとしては、日本語の情報がとにかく少ないって事ですかね。これは人柱になるかーと思い、調べた事を日本語でちょっとづつでも発信していけたらばと思い、公開することにしました。という訳で、今回はFeathersを紹介したいと思います。

    Feathersは、Flash/AIRのStarlingでUIを実現するためのライブラリです。
    主にスマホアプリで使う事を想定して作られています。

    前述の通り、Feathersも日本語の情報が皆無で大変苦労しましたので、自分なりに調べた内容をまとめて公開することにしました。特にコンテナ周りは、PanelとかScreenとかLayoutGroupとか似たようなクラスが沢山あって違いを理解するのに時間がかかりました。※Feathersでは、クラス名にコンテナという名前はあまりでてこないのですが、以下では総称して「コンテナ」と呼んでいます。

    以下概要ではありますが、ざっと頭に入れておけば、Feathersのサンプルなどを見ても、何をしているか大体分かると思います。Feathersこれから始めてみようという方いましたら参考にしてみてください。

    --------------------------------------------------------------------
    ■Feathersの基本構成

    まず、Feathersを理解するに当たって以下の4つを押さえておく必要があります。

    ●テーマ( MetalWorksMobileThemeなど )
    Feathersの全体的なスキン(ボタンやリストの色・形・大きさなど、見た目を統一するもの)を設定するもの。
    Feathersを使う場合は、最初に必ず宣言しておく必要がある。

    ●コントロール( Button, Label, ToggleSwitch, PickerList,NumericStepper などなど)
    ボタンやラベルなど。各クラスの名前そのまんまなので一番イメージしやすいかも。

    ●コンテナ( ScrollContainer, ScrollScreen, Panel, LayoutGroup, Drawersなど)
    ボタンやラベルなどのコントロールをまとめる為の四角い枠。各画面もコンテナである。
    入れ子形式でaddChildできて、親の右側・上部などに吸着するように大きさ・位置を自動調整させたりできる。

    ●ナビゲータ( ScreenNavigator, StackScreenNavigator )
    複数の画面(コンテナ)を管理し、表示切替するためのもの。ScreenNavigatorとStackNavigatorの2種類しかない。
     ・ScreenNavigator : 自分で次画面を指定して切り替える。直観的に分りやすい(と思う)
     ・StackScreenNavigator : ツリー構造メニューをpush/popで画面を上乗せ(Stack)して表示切替する。iPhoneの設定画面見たいな感じ(?)戻るときに前画面を指定しなくてよい。
    画面遷移のアニメーション(Transition)は、スライド・フェードなど設定できる。

    --------------------------------------------------------------------
    ■コンテナのレイアウト位置のプロパティ
    上記4つに加えて、特に押さえておくべきプロパティが2つ。コンテナのレイアウト位置に関するプロパティです。

    ●layoutプロパティ
     コンテナ自分自身のレイアウトに関する設定。基本的には以下の3つが使われたりする
     ・HorizontalLayout : 水平方向に、子コントロールを並べて表示させる。Alignや間隔を設定できる。
     ・VerticalLayout : 垂直方向に、子コントロールを並べて表示させる。Alignや間隔を設定できる。
     ・AnchorLayout : 自分の子供がそれぞれ設定したlayoutData(後術)によって位置を決める。

    ●layoutDataプロパティ
     自分の親に対する位置情報を設定するためのもの。基本的にlayoutDataを設定する場合は、親のlayoutプロパティはAnchorLayoutを設定する。
     AnchorLayoutData(上下左右のアンカー設定して位置を決定)を主に使う。

    ※Anchorは船のアンカーと同じ意味。場所を固定して動かなくするイメージ。
    例えばAnchorDataLayout(0,0,NaN,0) TopとLeftとBottomにアンカー0(余白0) とすれば、左側(上から下まで)にピッタリくっついた状態で配置される。
    例えばAnchorDataLayout(0,0,0,0) と設定すれば、親コンテナ全体に広がった状態で配置される。
    尚、親に対しての相対位置だけでなく、並列の子要素などを基準にアンカー設定することもできる。

    --------------------------------------------------------------------
    ■沢山あるコンテナの種類
    コンテナの種類は沢山あって、しかも名前から機能をイメージしにくいです。
    どのようなものがあるか、以下に各クラスの概要をまとめてみます。

    クラス名スクロール ヘッダ SN参照
    LayoutGroup×××
    ScrollContainer××
    Panel×
    Screen××
    PanelScreen×
    ScrollScreen

    ※スクロールは、コンテナ内をスライドでスクロールできる機能です。
    ※ヘッダは、コンテナの一番上にタイトルや戻るボタンを設置する黒い帯です。
    ※SN参照は、自身が含まれている親となるScreenNavigatorを相互参照できるかどうかです。

    このように、各クラスの名前から機能を類推することができません(笑)

    で、結局どれを使えばいいのかという話ですが、基本的にScreenNavigatorを使って複数の画面を遷移表示させる事になると思いますので、画面はScrollScreen・PanelScreen・Screenをスクロール/ヘッダの必要に応じて使い分けて作るといいと思います。で、1つの画面内で上下左右にアンカー貼って領域作ったりするのは、LayoutGroup,Panel,ScrollContainerを使えばいいのかなーと思います。

    --------------------------------------------------------------------
    ■あとまだよく分かってない部分
    Feathersのテーマは、Atlas使ってるはずなのに、ボタンとか配置する度にDrawカウントが増えていきますね。
    ボタン1つ配置する度に、文字で+1、背景画像で+1。なにか設定があるのかな・・・


    --------------------------------------------------------------------
    Box2Dの時のGravity2Dみたいに、もっと簡単にFeathersを使うためのユーティリティを作りながら学んだりしてます。ひょっとしたら将来公開するかもしれません。


    コメント
    コメントする








       
    この記事のトラックバックURL
    トラックバック