マガジン

ゲームの中の一日:昼夜の切り替わりで遊びはどう変わるか

遊びをつくる

執筆にClaudeを使用しています。

色紙の試作コース、小さな駒、ノートを並べたゲーム制作の作業机。
記事のテーマをもとに制作したAI生成イメージ。実際のゲーム画面ではありません。

庭づくりの画面に、木と石と池を置き終えた場面を考えてみます。仕上げに灯りを置いて、満足して手を止めます。そこで昼夜を切り替えると、さっきまで主役だった池が目に入らなくなり、置いたばかりの灯りが急に目立つかもしれません。そうなれば、庭を作り直したくなるはずです。 この「作り直したくなる」が起きるかどうかが、昼夜の切り替えが見た目の着せ替えか、遊びそのものを変える仕組みかの分かれ目です。この記事では、アソバースの公式作品「余白の庭」で確かめられている範囲を整理します。そのうえで、時間で遊びが変わる設計の型を他の公式作品と並べて比べ、自分のゲームに昼夜を入れるかどうかの判断基準を示します。昼夜でどう見えが変わるかといった画面の細部は、ここでは書きません。作品を開いて自分の目で確かめる手順を用意しています。

この記事の目次
  1. 余白の庭について確かめられていること
  2. 時間の使い方には三つの型がある
  3. 設計から読み取れること
  4. 昼夜で庭が変わるかを確かめる手順
  5. 自作ゲームに時間を入れるときの判断基準
  6. 次の行動

余白の庭について確かめられていること

まず、根拠にできる事実だけを並べます。

  • 木・石・草・花・池・灯りを置いて庭を作ります。
  • 時間制限はありません。
  • 四季と昼夜があります。
  • 置いたものは移動と大きさの調整ができます。
  • 戻す/やり直すはZ/Yキーで操作できます。
  • 置けるのは最大80個です。
  • 保存があり、以前の庭を引き継げます。
  • 13作品共通で、サイトの「動きを抑える」設定に対応しています。

一方で、この記事の時点で確かめられていないことがあります。昼夜の切り替えがボタンによるのか、時間経過で自動的に進むのか。四季と昼夜が自由に組み合わせられるのか。昼夜で何がどう見えるのか。灯りが昼と夜で見え方を変えるのか。これらは作品を開いて確かめる部分です。後の節で、確かめ方を手順にします。

時間の使い方には三つの型がある

公式作品を見渡すと、時間は少なくとも三つの役割で登場します。

  • 紙ひこうき郵便、時間の役割:制限時間(海辺36秒、丘40秒、山44秒。最後の6秒で郵便受けへ)、主に時間を動かすもの:ゲーム
  • 時計じかけの台所、時間の役割:タイミング(針が緑の範囲に来たら止める。本番は1皿28秒、配膳6秒)、主に時間を動かすもの:ゲーム(見習いは時間制限なし)
  • 潮だまり、時間の役割:状態(潮を切り替えて観察)、主に時間を動かすもの:プレイヤー
  • 余白の庭、時間の役割:景色と状態(四季と昼夜。時間制限なし)、主に時間を動かすもの:作品を開いて確かめる

一つ目は「時間が敵になる型」です。紙ひこうき郵便では、手紙を集める秒数が決まっていて、残り時間がそのまま緊張の源になります。二つ目は「時間がタイミングになる型」です。時計じかけの台所は、針が緑の範囲にある一瞬を狙う遊びです。見習いでは時間制限がなく、本番では1皿28秒と区切られる点も見逃せません。同じ台所でも、時間の圧力を外した練習と、かけた本番とで遊びの質を分けています。

三つ目が「時間が状態になる型」です。潮だまりは、引き潮のときに浅瀬へ海藻(3つ)を、砂地へ小石(2つ)を置き、潮を切り替えて観察します。切り替えると見え方や現れるものが変わる、という作りです。余白の庭は、時間制限がない点で一つ目とは正反対です。四季と昼夜という状態を持つ点で、三つ目に近い位置にあります。

設計から読み取れること

確認済みの事実から、設計意図として読み取れることを四つ挙げます。いずれも「そう読める」という範囲の話で、開発経緯の説明ではありません。

急かさないから、同じ庭を何度も見比べられる

時間制限がなく、戻す/やり直すがあり、移動と大きさの調整もできます。置いた結果を何度でも試せる条件が揃っています。その上に四季と昼夜が乗っているので、一度作った庭を別の時間の顔で見直す遊び方が想定できます。時間が「追い立てる力」ではなく「見直しのきっかけ」になる設計です。

灯りは時間の変化と相性がよい素材に見える

置ける六種のうち、灯りだけは名前からして明るさに関わる素材です。昼夜があるなら、灯りは時間によって存在感が変わる候補です。ただし、昼に灯りがどう見えるかは確認できていません。「灯りの価値が時間で変わるように作られているか」は、観察して判断する問いです。

保存は「別の日の続き」を支える

保存があり、以前の庭を引き継げます。庭の中の一日が、現実の別の日の再訪と重なることになります。昼夜を持つ作品が保存を備えているのは、時間の変化を一度きりで終わらせず、再訪のたびに見直せるようにする組み合わせとして読めます。

動きを抑える設定との関係

13作品は共通で「動きを抑える」設定に対応しています。昼夜の移り変わりを動きで見せる演出は、動きに敏感な人にとって負担になり得ます。時間の演出を足すときは、動きを減らした状態でも切り替わりが伝わることが条件になります。

昼夜で庭が変わるかを確かめる手順

ここからは、読者が自分で答えを出すための観察設計です。問いは「同じ配置は、時間の条件が変わると、置き直したくなるか」です。

準備するもの

  • 余白の庭を開いた画面と、紙かメモアプリ。
  • 固定する配置:木2、石1、草3、花2、池1、灯り2(計11個)。数や種類は変えてかまいませんが、観察中は変えません。

変える条件

四季(春夏秋冬)と昼夜の組み合わせを確かめます。まず、切り替えがボタンか自動かを確認し、組み合わせが選べるかを調べます。選べるなら、4季×昼夜の8通りが対象です。選べないなら、選べる範囲だけを対象にします。

記録の取り方

条件ごとに、次の三つを一言でメモします。

  1. 最初に目に入ったもの(種類)。
  2. 見えにくくなった、または存在感が薄れたもの(種類)。
  3. 置き直したくなったものの個数と種類。

各条件を1回ずつ見ます。可能なら日を改めてもう一巡します。保存があるので、同じ庭を翌日に開いて続けられます。

結果の読み方

  • 条件が変わると「置き直したくなるもの」の種類や個数が変わるなら、時間は遊びを動かしています。
  • 見え方は変わっても、置き直したくなる気持ちが一度も生まれないなら、時間は主に見た目の層として働いています。
  • 灯りだけが条件ごとに評価を大きく変えるなら、灯りが時間と結びついた素材として設計されている可能性があります。
  • 2回目で結果が1回目と逆転するなら、その差は条件の影響より、慣れや気分の影響が大きいと考えられます。

起こりやすい誤り

  • 観察の途中で配置を触ってしまう。気づいた時点で、その回の記録は別に扱います。
  • 最初に見た条件に印象が引きずられる。条件の順番を、1回目と2回目で入れ替えます。
  • 画面の拡大やウィンドウ幅の違いで見え方が変わる。観察中は同じ表示サイズで通します。
  • 「動きを抑える」設定の有無で印象が変わる。設定は固定し、どちらで見たかを書き残します。

自作ゲームに時間を入れるときの判断基準

観察で得た感触を、自分のゲームの設計に持ち帰る場面を考えてみます。昼夜を入れる前に、次の三つに答えを出します。

  1. 時間は何を変えるのか。 見た目だけか、見える情報か、ルールか。余白の庭の観察で「置き直したくなる」が生まれるなら、見える情報が変わっている証拠です。
  2. 誰が時間を動かすのか。 プレイヤーが切り替えるのか、ゲームが勝手に進めるのか。潮だまりのような切り替え型は前者、紙ひこうき郵便のような制限型は後者です。
  3. 前の状態に戻れるのか。 戻せるなら見比べの遊びになり、戻せないなら一回きりの決断になります。

最小の試作は、次のコード一つで足ります。昼夜をデータ属性で持ち、見た目はCSSの変数に任せる構成です。動きを抑える設定にも配慮しています。

html
<!doctype html>
<html lang="ja">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
  :root { --bg:#f6f1e4; --fg:#2b2b2b; --lamp:0; }
  body[data-time="night"] { --bg:#14182b; --fg:#e8e4d0; --lamp:1; }
  body { background:var(--bg); color:var(--fg); margin:0; padding:2rem;
         transition:background .8s,color .8s; }
  @media (prefers-reduced-motion: reduce) { body { transition:none; } }
  #lamp { width:40px; height:40px; border-radius:50%; background:#ffd66b;
          opacity:calc(0.15 + var(--lamp) * 0.85); }
</style>
<body data-time="day">
  <p id="label">昼</p>
  <div id="lamp"></div>
  <button id="toggle">時間を進める</button>
<script>
  const body = document.body;
  document.getElementById("toggle").onclick = () => {
    const night = body.dataset.time === "day";
    body.dataset.time = night ? "night" : "day";
    document.getElementById("label").textContent = night ? "夜" : "昼";
  };
</script>
</body>
</html>

この試作では、夜になると灯りが強まるだけで、遊びは変わりません。ここに「夜は灯りの近くしか操作できない」「昼は遠くまで見えるが、夜にしか現れる物がある」のような条件を一つ足して初めて、時間が遊びに入り込みます。足す条件は一つに絞って確かめるのが安全です。

アソバースへ投稿する際は、直下のindex.htmlを入口にして素材は相対パスで指定します。昼夜の選択を次回に持ち越したいときは、アップロード作品内のlocalStorageが一時メモリー互換の扱いである点に注意します。作品ごとのクラウドセーブ(JSONで128KiBまで)の仕組みを、投稿画面の案内で確認してから設計します。

次の行動

余白の庭を開き、11個の配置を固定して、昼夜と四季を見比べる観察を一巡してみてください。記録した「置き直したくなったもの」の差が、自分のゲームで時間に任せる役割を決める材料になります。試作のコードは、条件を一つ足したところまで作ってみると、見た目の層との違いがはっきりします。