Cocos2d-x 10円ゲーム講座 第11回、スプライトアクションを使ってユーザビリティを向上させる方法についです。

第10回はこちら。目次はこちら。

ユーザビリティの向上

ゲームの骨格となる部分は完成しました。1つ問題点を上げるならボタンがボタンと解りづらいことです。つまりユーザビリティが悪いということです。

レバーは見た感じでわかるかもしれませんが、お金の投入口がボタンになっていることは、パッと見ただけではよくわからない可能性もあります。

スマートフォンの台頭で、マウスではなくタッチ操作が主流になってきました。マウスの場合は、マウスオーバーという手法によりボタンがボタンであることを明示できました。

しかし、タッチ操作ではマウスオーバーに相当する操作がありません。

ボタンを明示するよくある方法としてはグロウ処理を行うことです。ボタンを淡く光らせることで、ユーザーに装置であることを明示することができます。今回はボタン投入口とレバーにグロウ処理を施してみます。

用意したグロウ画像です。

グロウ画像をこれまで同様、Spriteクラスを使って表示します。

auto sprite = Sprite::create("coin_entry_glow.png");
sprite->setPosition(Vec2(visibleSize.width*0.7, visibleSize.height*0.9));
this->addChild(sprite, 2);

グロウ処理のためにSpriteにアクションを設定します。

// アクション
auto blink = Blink::create(1.5f, 1);			// 点滅 1.5秒で1回点滅
auto action = RepeatForever::create(blink);		// blinkを永久に繰り返す
sprite->runAction(action);

点滅を永久に繰り返すというアクションを設定します。

レバーも同様に設定します。

// レバーのglow処理
auto leverGlow = Sprite::create("lever_glow.png");
leverGlow->setAnchorPoint(Vec2(0.0f, 0.0f));
_lever[i]->addChild(leverGlow, 2);
// 1.5秒に1回の点滅を永久に繰り返す
leverGlow->runAction(RepeatForever::create(Blink::create(1.5f, 1)));

Cocos2d-xが使えるアクションの詳細についてはReferenceを見ると良いでしょう。

実行結果

ソースコードはこちら

10円ゲームはレトロさがウリでもあるので、ボタンやレバーのグロウ処理はレトロさを損なう結果になりますが、ボタンとしての理解度は向上したと思います。

リアリティかユーザビリティか。どちらも良いに越したことはありませんが、ゲームとしてユーザビリティを重視する場面は多いと思います。

次回はパーティクルを使用します。