マーメイドになって小さな海底の街で暮らす、無料のブラウザゲーム「Little Tide（リトル・タイド）」を作りました。珊瑚の入り江を泳ぎ、タコやウミガメ、エイの住民と話しながら、主人公の見た目と街の家具を少しずつ自分好みに変えられます。
今回は、機能を増やす前に「1ステージだけでも、触って気持ちよく、何度か戻りたくなること」を目標にしました。遊べる範囲は小さい一方で、移動、会話、収集、着せ替え、家具配置、セーブまで、スローライフゲームの最初の循環をひと通り入れています。
Little Tideでできること
- 地面をクリックまたはタップして、マーメイドを泳がせる
- 落ちている貝がらを集め、家具に交換する
- タコ、ウミガメ、エイの住民と会話する
- 髪色、尾びれ、肌色、髪型、髪飾りを変更する
- 6種類の家具を好きな場所に置き、移動や回転をする
- 3つの導入クエストを進める
インストールと会員登録は不要です。パソコンではクリックやWASD・矢印キー、スマートフォンではタップで操作できます。音は初期状態でオフにしてあり、設定から切り替えられます。
最初の5分の遊び方
- 砂地をクリックまたはタップし、近くの貝がらまで泳ぎます。
- 貝がらに近づいたら、画面に出る「貝がらをひろう」を押します。
- モモ、ココ、フワの名前を選び、近づいて話します。
- 下の「おきがえ」から、主人公の髪や尾びれを変えます。
- 「もようがえ」で家具を選び、半透明の見本を好きな砂地へ動かして配置します。
貝がらを3つ拾う、3人の住民と話す、家具を3つ置くと、それぞれノートの目標を達成できます。家具を片づけると使った貝がらが同じ数だけ戻るため、配置を試し直しても損をしません。
主人公は、自分で色を決められるマーメイド
主人公には、丸い輪郭、大きな目、頬の色、貝がらを思わせる服、二股に広がる尾びれを持たせました。遠くから見ても住民と区別できるよう、人の上半身と魚の尾びれが一目で分かる形にしています。
髪は5色、尾びれは5色、肌は4色から選べます。髪型はロングとボブ、髪飾りは花・パール・なしを用意しました。選んだ色は画面右の立体プレビューへすぐ反映され、街へ戻った後の主人公にも同じ見た目が使われます。
街づくりは、置き直せることを大切にした
家具は、貝がらのチェア、サンゴのランプ、パールの植木鉢、貝がらのテーブル、海辺のブランコ、あわいろベッドの6種類です。置く場所を決めるときは0.5マス単位で位置をそろえ、90度ずつ回転できます。
大きなベッドと小さな植木鉢を同じ当たり判定にすると、見た目では家具同士が重なってしまいます。そこで種類ごとに必要な半径を持たせ、家の壁、ステージの端、ほかの家具との距離をまとめて確認するようにしました。配置できない場所では確定ボタンを押せません。
3人の住民は、役割より性格から考えた
- モモ：花が好きな、明るいピンク色のタコ
- ココ：急がず海を眺める、のんびり屋のウミガメ
- フワ：毎日違う景色を探す、おさんぽ好きのエイ
住民はクエストを渡す装置として並べるのではなく、その場所で普通に暮らしている相手に見えることを優先しました。最初の会話でも、作業を頼むより、珊瑚の入り江での過ごし方を話します。今回は短い会話だけですが、今後、時間帯ごとの居場所や好きな家具を増やせる土台にしています。
1ステージに絞った理由
スローライフゲームは、釣り、料理、家の内装、季節、店、住民の日課など、考えられる機能が多いジャンルです。最初から全部入れると、ひとつひとつが浅くなり、移動や配置の気持ちよさを確認しにくくなります。
そこで最初の版は「珊瑚の入り江」だけにしました。画面内に家、住民、収集物、家具を置ける余白が同時に見えます。遊びの範囲が分かりやすく、初めて開いた人が説明を読み続けなくても、気になる場所を押して試せます。
BlenderやUnityを使わず、最初はThree.jsで作った
今回の3D表示にはThree.jsを使いました。主人公、住民、家、家具、珊瑚、海藻、岩、魚は、球や曲線などを組み合わせてコードから生成しています。外部のキャラクターモデルや他作品の素材は使っていません。
ブラウザ版を先にしたのは、URLを開くだけで遊べる状態を早く確認したかったためです。Blenderで作ったモデルへ差し替えたり、Unityでより大きな世界へ広げたりする余地は残しつつ、まずはパソコンとスマートフォンで同じステージが動くことを優先しました。
軽くするために調整したこと
珊瑚の数を増やすと海底らしくなりますが、ひとつずつ描画すると端末への負担が増えます。動かない装飾は同じ材質ごとにまとめ、海藻や魚など動くものだけを別にしました。家具の見本画像も、ページを開いた瞬間に全部作らず、「もようがえ」を開いたときに必要なものから生成します。
動作確認では、1440×900のパソコン画面と390×844のスマートフォン画面を使いました。移動、貝がらの取得、2回目の報酬が重複しないこと、会話、着せ替えの保存、家具の購入・移動・回転・回収をブラウザ上で確認しています。通貨、クエスト、保存データ、家具の衝突判定については10項目の自動テストも通しました。
セーブとプライバシーについて
名前、見た目、所持している貝がら、会話済みの住民、家具、目標の達成状況、音の設定は、利用中のブラウザのローカルストレージへ保存します。ゲームの進行データを外部サーバーへ送信する機能や、アカウント登録機能はありません。
別のブラウザや端末へ進行を移したい場合は、設定からJSON形式のセーブを書き出し、新しい環境で読み込めます。読み込むデータは項目数、文字数、座標、家具の種類を検証し、不正な形式の場合は現在の進行を変更しません。入力する名前には、本名や連絡先などの個人情報を使わないでください。サイト全体のデータの扱いはプライバシーポリシーでも案内しています。
現在の制限と、次に増やしたいもの
- ステージは珊瑚の入り江1か所です。
- 家の中へ入る機能、釣り、料理、店はまだありません。
- 貝がらと初回会話の報酬は、この版では一度ずつです。
- 古い端末やWebGLを無効にしたブラウザでは3D画面が開かない場合があります。
- マルチプレイとクラウドセーブには対応していません。
次の候補は、貝がらが日替わりで戻る仕組み、家の内装、家具に座る動作、住民が時間で移動する暮らしです。何を足す場合も、現在の「短い時間でも自分の色と配置を残せる」という中心は崩さず育てたいと考えています。
AIに任せたことと、人が確認したこと
企画の整理、コードのたたき台、3D形状の組み立て、テスト項目の作成にはAIを使いました。公開前には、人が実際にパソコンとスマートフォンで遊び、文字やボタンの重なり、会話後の操作、家具の当たり判定、セーブ後の再読み込みを確認しています。
AIが出したものをそのまま公開するのではなく、「かわいく見えるか」「迷わず押せるか」「説明と実際の動作が一致しているか」を見て直す工程が必要でした。特に3D画面は、正しく描画されていても光が強すぎるだけでキャラクターの色が見えにくくなるため、スクリーンショットを比べながら照明を調整しました。
よくある質問
無料で遊べますか？
現在のブラウザ版は無料です。通信料は利用中の回線契約によって発生する場合があります。
スマートフォンでも遊べますか？
タップ操作と390px幅の画面で確認しています。3D描画を使うため、端末が熱くなった場合は一度ページを閉じて休ませてください。
セーブが消えたように見えます
ブラウザやサイトのURLが変わると、保存場所も別になります。ブラウザのデータ削除でも消えるため、残したい進行は設定から書き出してください。
既存のゲーム作品と関係がありますか？
Little TideはMACHI CREATEが制作したオリジナルのブラウザゲームです。特定のゲーム会社や既存作品とは関係ありません。キャラクター、3D形状、画面、文章はこの作品用に作成しています。
海の底で、自分の小さな居場所を作る
Little Tideは、長い攻略を求めるゲームではありません。尾びれの色を変え、気になる住民と話し、椅子をひとつ好きな場所へ置く。そんな短い時間を積み重ねるための、小さな海底の居場所です。
まずは珊瑚の入り江を一周して、3人の住民に会ってみてください。そこから先は、どんな色で暮らし、どこに家具を置くかを自由に決められます。
もうひとつの1ステージ制作記録：幻妖ジパング
海底の暮らしとは違う遊びとして、風の妖術士が妖怪を祓う3Dアクション「幻妖ジパング — 風纏いの章」も公開しました。Little Tideでは着せ替え・家具配置・セーブを、幻妖ジパングでは移動・回避・攻撃の見やすさを優先しています。同じ「まず1ステージ」でも、中心にする操作によって作り方が変わる例です。