ブラウザだけで遊べる、3Dの町歩き&着せ替えワールドです。インストールもアカウント登録も要りません。上のゲーム画面をそのまま操作して遊べます。
きらめきタウンは、自分のアバターで小さな町を散歩しながら、コインを集めて髪型や服、小物をそろえていく作品です。目的をひとつに絞らず、「歩く」「買う」「着替える」「ミニゲームで遊ぶ」を行き来できるようにしてあります。
短い休憩時間にふらっと開いて、少し歩いて、気に入った服を買って閉じる。そんな遊び方を想定して作りました。クリアという終わりがないので、途中でやめても損をしません。
最初に表示されるのは町の広場です。光っている入口や、画面に出ている案内ボタンを順番に試してみてください。入れる場所は見た目で分かるようにしてあるので、説明を読まなくても進めます。
コインはゲームセンターのミニゲームで増やせます。ミニゲームは3種類あり、それぞれ操作も遊ぶ時間の長さも違います。得意なものを繰り返し遊ぶのがいちばん早い集め方です。
集めたコインは、町のショップで髪型・服・小物と交換できます。買ったものはすぐアバターに反映されるので、着替えてからもう一度町を歩いてみてください。同じ場所でも印象が変わります。
| 環境 | 操作 |
|---|---|
| スマートフォン タブレット | 画面上の移動ボタンで歩きます。メニューやショップはタップで開けます |
| パソコン | キーボードの矢印キー(またはWASD)で移動できます。マウスでボタンを押す操作も併用できます |
| ゲームパッド | 対応コントローラーを接続していれば、スティックでそのまま動かせます。接続後に一度画面をクリックすると認識されます |
この作品は「短い時間でも、自分のアバターで町を散歩できる場所」をテーマに作りました。買い物・着せ替え・ミニゲームという別々の遊びを、ひとつの小さな町にまとめています。
技術的にはReactとThree.jsの組み合わせで、ブラウザだけで3D表示から状態管理までを動かしています。サーバーを持たない構成なので、進行状況はブラウザの中に保存する形にしました。
いちばん時間をかけたのは「文字を読まなくても遊び方が分かる」という部分です。チュートリアルを長く書くのではなく、入れる場所を光らせる、押せるものは押せる見た目にする、といった形で、触れば分かる状態を目指しました。説明文が必要になった時点で設計を見直す、という進め方をしています。
制作にはAIとの対話を使っています。作りたい遊びを言葉で伝えて形にしてもらい、実際に動かして「ここが分かりにくい」と返す。この往復を重ねる作り方については、当サイトのAI関連の記事でも扱っています。
AI APP PLAYGROUNDでは、ほかにも5つの小さな作品を公開しています。どれもインストール不要で、開いてすぐ遊べます。