cocos2d-js 3.0 rc1 で MenuItemSprite と LabelTTF を組み合わせた簡易ボタンの作成

簡易ボタンの作成関数を作った

cocos2d-js ではボタンを作る際に Menu と MenuItem を使うことがあります。

他にボタンのクラスもありますが、イベント処理の設定など MenuItem のほうが使い勝手が良いように思います。

 

MenuItemImage でボタン用の画像を読み込んで作っていたのですが、いちいちボタンの文字を画像として入力するのはとても面倒でした。

例えば、同じ背景なのに「ヘルプ」と「閉じる」という名前の違いだけで画像を２種類も作らないといけないのは手間がかかります。

 

そこで、背景画像の上にラベルを重ねたボタンを作りました。

絵心があまりありませんが、がんばって茶色いボタンの背景画像を書きました。

茶色いボタンの背景として通常(normal), 押下(selected),非活性(disabled)で用意します。

背景画像には「閉じる」のような文字列は書かれていません。

文字列はボタン作成関数で指定します。

サイズも実行時に指定できるので、ひとつベースの背景画像があればいろいろなサイズでいろいろなテキストを付加して利用できます。

gist222c8099d1427be0b905

 

その他の近況

NPC の会話処理は、ある範囲に入ったらプレイヤーが会話を選択できるようにする処理を作りました。

ごちゃごちゃしてきたのでシーケンス図にまとめたいと思っています。

今は会話そのものを表現するための GUI 部品を cocos2d のクラスを継承して作っています。

今日紹介した関数もその一環で作りました。

 

TMX のタイルの隙間に関する対策はまだできていません。

サンプルでは正しく表示されている tmx でも、自分のプログラムに移すと隙間ができてしまうので、プログラムの問題なのですが、位置やサイズを整数にしたりプロジェクションの設定を２Ｄにしただけではうまくいかず、こちらは気長に少しずつ調べようと思います。