ccui の GUI は便利！だけど資料が少ない

前回は、cc.Menu を使った手抜きボタンを作成しました。

ccui は TextField を一度使ったのですが、 cc.EditBox のほうが便利だし、 ccui は検索しても資料が少ないから便利そうだけどしばらくは保留だな('∀`)と思っていました。

ところが(・｀ω・´)！

ccui はすごく便利なライブラリでした。

私が便利だな～(´∀｀)と思ったベスト３を発表します。

(1) Widget

入れ物として優秀。さまざまな部品を組み合わせてひとつの GUI としてまとめるのに便利です。

内部でサイズを設定するときに _updateContentSizeWithTextureSize という関数を使っていることにちょっと違和感があるのと、 getSize という getContentSize との違いが微妙なインターフェースがあることがちょっと不満ですが、 GUI を作るときはこれをベースにするとよさそうです。

(2) Button

画像と文字列を組み合わせたボタンを簡単に作れる。「あれ？前回のは？」と思っても口に出さないのが優しさだよね(´・ω・｀)

イベントの設定も addTouchEventListener でさくさくです。

サイズの変更を setSize ではなく setContentSize でやるとうまく動かなくなることがありましたが、それ以外はさくさくです。

(3) ListView

Widget をぽんぽんと放り込むといい感じにクリッピングしてスクロールできるリストを表示してくれる素敵なウィジェットです。

なんか、アイテムの選択イベントも送ってくれるらしいのですがつかってません。

 

逆に数時間を使っても何これだめじゃんヽ(`Д´)ﾉとなった要注意 GUI はこんなかんじです。

(1)ScrollView

なんか TMXTiledLayer とスプライトの上で配置したりすると、クリッピング表示がだめだめになる。

そのうち ScrollView はクリッピングしないのかなとか混乱しだして、 ClippingNode と組み合わせるも、表示が意味不明になってしまう。

その後 cc.ScrollView でコンテンツくわせてサイズ設定したら、クリッピングも完璧にやってくれたので、 ccui よりも cc のほうが良い GUI もあるんだね(´・ω・｀)と思いました。ブランドがいいからってその商品がなんでもいいわけじゃないのと同じだよね。そういうことだね。

(2)TextField

冒頭でも書いたとおり、 cc.EditBox のほうがお手軽で思ったとおりなことをさくっとできるので、あまりいじり倒す前に飽きました。

(3)Text(Label)

とりあえず ccui のほうがすごいから、 ccui のラベルつかおーぜーと思ってたら、 TextField などと同じだったパターンです。色の設定のインターフェースが見つからない。cc.LabelTTF なら簡単に設定できる。じゃー、 cc のほうでいいねという感じ。

作業の報告

とにかく ccui も使うことで、さくさくと GUI が作れるようになってきて、 MazeChat の UI まわりがだいぶ素敵になりました。

仮想スライドパッドとチャットウィジェットは自作の GUI でちょっと自信作なのです(*´σｰ｀)ｴﾍﾍ

もっと整理できたら gist とかに載せようかなと思いつつ、冒頭の思いつきで書き始めた ccui ランキングで疲れたので、今回はここらへんにしようと思います。

あと、ＮＰＣとの対話もできるようになりました！選択肢による分岐もできて自分で作った会話パターンで会話してにやりとしてしまったときは、俺ってさびしがりなんだなって思ったよ(´・ω・｀)ﾉｼ＜ﾏﾀﾉｰ

 

素材はフリー素材のぴぽや倉庫さんの画像と魔王魂さんの音楽を使っています。フレームワークは cocos2d-js 3.0 rc1 を使っています。