パズルゲーム「abecobe」のUX向上のために使われた技術浅野啓 (チーム : けいだろう　渋谷教育学園渋谷高等学校2年)

1. abecobeとは？abecobeは、上下左右逆方向に動く２つのキャラクターを操作し、同時にゴールさせる、スマホ用パズルゲームです。例えば、上にフリックをすると下の画像のようにオレンジ色のキャラクターが動いた方向と逆方向に黒色のキャラクターが動きます。そして、２つのキャラクターが同時にピンク色のゴールに辿り着けばゲームクリアです。

2. 研究内容本研究では、主にabecobeのシステム、そしてデザインの２つに分けて研究を行いました。システムではステージの自動生成、そして256進数を用いたステージの文字列化について、デザインではユーザーの分析を得てabecobeのデザインの変化について研究をしました。

デザインはtwitterを用いたA/Bテストを合計102回行いました。400枚ほどのモックアップを描き、4枚ごとにテストを行い、それぞれに対してフィードバックを受け取り、改善をしました。

3. システムについて 4. デザインについて

様々な試行錯誤によってゲームのUX改善に繋がり、AppstoreやGoogle Playでの評価も非常に良好な結果になりました。今後のはこのゲームのゲームデザインの在り方を見直し、更に広いターゲット層に向けて制作していきたいと考えています。

5. まとめ・今後の課題

abecobeのステージはすべて自動生成されています。自動生成する上で重要なのが、レベルデザイン、つまりステージの難易度を調節しつつ生成すること、そして必ずゴールが可能であることです。

はじめに、レベルデザインをするために自動生成ではBreadth-first searchではなく、深さがある程度自由に決めることが可能なDeapth-first searchを用いました。

その後、必ずゴールが可能かどうかを検証するためのテストコードとして、Breadth-first searchを行いました。プレイヤーの操作の通り、上下左右の4通りの方向を試行しました。この際にすでに２つのキャラクターが行った頂点の座標をメモしておくことで、ループをなくし、O(4^n)であったところを(n<=20)、O(n) (n<=20^2)まで計算量を抑えることを可能にしました。

また、ステージはプレイヤーが難しいと感じたものに対し共有ができるようにするため、すべてのステージを文字列化しました。文字列化にあたって様々なSNSでは字数制限が存在することから、なるべく短い文字列で表そうと考え、256進数を定義しこのことを可能にしました。手法は以下の通りです。

1. 壁を1、道を0とおき、2進数で表す。

2. 256進数を定義する。

3. 2進数を256進数に変換する。10101011101　→　5 93 →　Ψ@

これにより、11マスの情報をわずか2文字で表せるようになり、全体で見ると625文字で表すところを22文字で表せるようになりました。

このアルゴリズムのステップは以下のとおりです。1. 方向、すすむマス目を決定し、その先にブロックを配置する。2. 通った場所には通ったことを配列にメモし、1に戻る。3. この際にすでに通った場所にブロックを配置した場合、一つ前の頂点に戻り再び繰り返す。4. 試行回数によって難易度を分け、回数分終了した場合、ステージの生成を終える。

このゲームはプロシージャルなため、中央のステージはすべて自動生成されており、理論上126京通りものステージが生成可能です。

本研究では、abecobeのUX向上を目的として、3年間様々なアルゴリズムの工夫やユーザーの分析を行いました。