CocosSharp製のアプリをリリースしました。

こんにちは、world_wide_anitoです。

Xamarin.Forms + CocosSharpで開発した初のアプリ
「脳トレ!! カウント16」をリリースしました。

ソースの公開などはしてませんが、
これからXamarin.FormsやCocosSharpで開発しようと考えている方には、
開発事例としての参考になってくれればうれしいです。

以下のリンクからダウンロードできますので、
是非ともダウンロードしてみてください。

CocosSharpで画像ボタンの色を変えたい。

こんにちは、world_wide_anitoです。
本記事は、前回の続きというか本題になります。
blog.xamarinian.net

CocosSharpでは、CCSpriteのColorプロパティを設定することで、簡単に画像の色を変更できます。
ただし、画像ボタンの色を変更する場合は、ベースとなるCCSpriteではなく、CCMenuItemImageのColorプロパティを設定してやる必要があります。

以下のサンプルコードでは、spriteのColorプロパティとして緑を設定していますが、実行結果には反映されていません。

サンプルコード

        /// <summary>
        /// メニューを作成する
        /// </summary>
        /// <param name="layer"></param>
        private void CreateMenu(CCLayer layer)
        {
            // 色を変更したspriteからMenuItemを生成
            var sprite = new CCSprite("ic_check_white_24dp.png");
            sprite.Color = CCColor3B.Green;
            var menuItem = new CCMenuItemImage(sprite);

            // sprite2からmenuItem2を生成した後、menuItem2の色を変更
            var sprite2 = new CCSprite("ic_close_white_24dp.png");
            var menuItem2 = new CCMenuItemImage(sprite2);
            menuItem2.Color = CCColor3B.Red;

            // メニューを生成
            var menu = new CCMenu(menuItem, menuItem2);
            menu.AlignItemsHorizontally();  // ボタンを横に並べる

            // レイヤーにメニューを設定
            layer.AddChild(menu);
        }

実行結果

複数のボタンを同じ色に変更する場合、CCMenuのColorプロパティを設定するのが便利です。
ただし、MenuItemのColorプロパティを個別設定している場合は、そちらが優先されます。
また、色が変更されるのはCCMenuのColorプロパティを設定した時点の子ノードのみです。

以下のサンプルコードでは、色の指定方法とタイミングによって3つのボタンがそれぞれ違う色で出力されます。

サンプルコード

        /// <summary>
        /// メニューを作成する
        /// </summary>
        /// <param name="layer"></param>
        private void CreateMenu(CCLayer layer)
        {
            var check = new CCMenuItemImage(new CCSprite("ic_check_white_24dp.png"));
            var refresh = new CCMenuItemImage(new CCSprite("ic_refresh_white_24dp.png"));
            var close = new CCMenuItemImage(new CCSprite("ic_close_white_24dp.png"));

            // 個別の色設定
            check.Color = CCColor3B.Green;

            // 空のメニューを生成
            var menu = new CCMenu();

            menu.AddChild(check);
            menu.AddChild(refresh);
            menu.Color = CCColor3B.Yellow;
            menu.AddChild(close);
            
            menu.AlignItemsHorizontally();  // ボタンを横に並べる

            // レイヤーにメニューを設定
            layer.AddChild(menu);
        }

実行結果

動作環境

• CocosSharp.Forms v1.7.1

CocosSharpで画像ボタンを設置したい。

こんにちは、world_wide_anitoです。

CocosSharpでボタンを作成するには、CCMenuItemの継承クラスを利用するのが簡単です。
画像のボタンを作成するにはCCMenuItemImageクラス、テキストラベルのボタンを作成するにはCCMenuItemLabelクラスを使います。
そして、これらのクラスはCCMenuクラスの子ノードとしてAddしてやることで初めてボタンとしての機能を持つことができます。

以下のサンプルコードでは、画像のボタンを2つ作成してメニューを生成しています。
ボタンをタップするとタップされたボタンの絶対座標がコンソールに出力されます。

サンプルコード

        /// <summary>
        /// メニューを作成する
        /// </summary>
        /// <param name="layer"></param>
        private void CreateMenu(CCLayer layer)
        {
            // ボタン1を作成
            var sprite = new CCSprite("ic_check_white_24dp.png");
            var menuItem = new CCMenuItemImage(sprite);
            menuItem.Target = OnTapped; // ボタンがタップされたときの処理を設定

            // ボタン2を作成
            var sprite2 = new CCSprite("ic_close_white_24dp.png");
            var menuItem2 = new CCMenuItemImage(sprite2);
            menuItem2.Target = OnTapped; // ボタンがタップされたときの処理を設定

            // ボタンからメニューを生成
            var menu = new CCMenu(menuItem, menuItem2);
            menu.AlignItemsHorizontally(); // ボタンを横に並べる

            // レイヤーにメニューを設定
            layer.AddChild(menu);
        }

        /// <summary>
        /// ボタンがタップされたときの処理
        /// </summary>
        /// <param name="obj">タップされたボタン</param>
        private void OnTapped(object obj)
        {
            var item = obj as CCMenuItem;
            Console.WriteLine(item.PositionWorldspace);
        }
    }

実行結果

動作環境

• CocosSharp.Forms v1.7.1

なお、本サンプルで使用している画像は、Googleが提供しているマテリアルアイコンです。
以下のサイトからダウンロードすることができます。
Icons - Material Design