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