この記事は公開されてから1年以上経過しているため、情報が古い可能性がございます。
ご注意ください。

このWordPress pluginを配布しています

icon-amidas-app10万回の南無阿弥陀仏 – 阿弥陀三昧

2016年6月にリリースしましたこのAndroidアプリで「タップすると画像が変わる音量ボタン」を実装しましたので、手順をご紹介いたします。

完成イメージ

atu-art-volume-icon

タップする度に画像が更新される音量ボタンです。

ボリュームがどのように変わったか、一目瞭然ですね。


Overview

  • ライブラリはcocos2d-x 3.x系
  • ボタンはMenuItemImageで簡単に設置する
  • タップに応じて音量変更と画像差し替えを行う
  • 音量は3段階 + ミュート
  • 音量は内部的にボリュームレベルとして整数intで管理する

画像を用意する

私の大好きなTOPECON HEROESさんに画像を探しに行きます。

元画像

ICOONN-MONOさんでイメージぴったりのボリュームアイコンを発見しました!

atu-art-volume-icon-originp

左:ボリュームOFFアイコン
右:ボリュームアイコン 3

アプリでは、ボタン背景色を黒っぽくするつもりでしたので、あらかじめカラーを白に変更してDLします。

atu-art-volume-icon-dl

ICOONN-MONOさんでは、上の図の赤枠を操作して、お好みのカラーで画像をDLすることができます。
便利なギミックですね!

加工

atu-art-volume-kako

DLしたボタンの一部をカットして透明度を変更することで「ボリュームが下がっている」ことを表現します。

加工後

作成した画像は以下です。

atu-art-volumes

右端のvolume.pngはボタン押下時用です。

実装

ボタンの設置

OptionLayer.h

#ifndef __OPTION_LAYER_H__
#define __OPTION_LAYER_H__

class OptionLayer
{
private:
    enum OptionMenuTag {
        volume,
        menu,
    };
    int m_maxVolumeLv = 3;
    int m_volumeLv    = m_maxVolumeLv;

    void changeVolume();

    // 以下略
};
#endif // __OPTION_LAYER_H__

ボタン配置するレイヤのヘッダファイルです。
ボタンを探しに行く際に指定するため、タグを用意しておきます。

また、このサンプルではボリュームレベルの初期値を3固定としておりますが、アプリではUserDefaultを使用して設定値を保存しており、アプリ起動時にロードする実装です。

OptionLayer.cpp

bool OptionLayer::init()
{
    auto mVolume = MenuItemImage::create(
        StringUtils::format("img/icon/volume-%d.png", m_volumeLv),
        "img/icon/volume.png",
        [=](Ref* sender)
        {
            changeVolume(m_volumeLv);
        }
    );
    mVolume->setTag(OptionMenuTag::volume);

    auto menu = Menu::create(mVolume, NULL);
    menu->setTag(OptionMenuTag::menu);
    this->addChild(menu);
}

StringUtils::format()で、ボリュームレベルに対応する画像を指定しています。
また、タップ時は音量変更の処理を呼び出すだけにしました。

タップ時の処理

OptionLayer.cpp

void OptionLayer::changeVolume()
{
    // ボリュームレベルを更新する
    // lv=0(ミュート)を下回る場合はlv=3(最大音量)に戻す
    m_volumeLv--;
    if (m_volumeLv < 0) {
        m_volumeLv = m_maxVolumeLv;
    }

    // SE音量を更新する
    SimpleAudioEngine::getInstance()->setEffectsVolume(lv * 0.3);

    // ボタンを探して画像を張り替える
    auto menu = this->getChildByTag(OptionMenuTag::menu);
    if (menu == NULL) {
        return;
    }
    auto mBtn = (MenuItemSprite*)menu->getChildByTag(OptionMenuTag::volume);
    if (mBtn == NULL) {
        return;
    }
    auto pImg = (Sprite*)mBtn->getNormalImage();
    if (pImg == NULL) {
        return;
    }
    pImg->setTexture(
        Director::getInstance()->getTextureCache()
            ->addImage(StringUtils::format("img/icon/volume-%d.png", lv))
    );
}

ボタン生成時はMenuItemImageで、画像を差し替える場合はMenuItemSpriteにキャストしていますねー。不思議ですねー。


ボタンの差し替えは以下ブログを参考にいたしました。
ありがとうございました。

めっとば
[cocos2d-x 2.1.4]CCSpriteの画像をファイル名を指定して変えてみる(CCTexture2D, CCSprite::setTexture)
http://mettoboshi.com/cocos2d-x/cctexture2d-settexture

まとめ

とても簡単にボタンを設置できるMenuItemImageで、さらに画像を差し替えるサンプルでした。

今回は画像を複数枚用意して、音量ボタンを実装しましたが、状態表示と切り替えを同時に行うことができ、画面が小さなスマホでスペースを節約でき、メリットの多い手法だと感じます。

そして、アプリのUX改善は、こういった小さなギミックの積み重ねなんですよね。
もっとよいアプリを実装できるように勉強します。

この記事はtomita@atuwebがお届けしました。


スポンサーリンク
ad_336
ad_336
  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存
コメントの入力は終了しました。