# ゲームづくりのヒント ゲームを作って育てていくときの、ヒント集です。直して保存するたびに版が残り、「これまでの版」からいつでも戻せます。公開したあとに直しても、遊ぶ人に届くのは「更新を公開」を押したときなので、公開中のゲームも安心して手を入れられます。 --- ## 1. ゲームを設計する 作りたいものを出発点に、何度も遊びたくなる対戦ゲームを設計しましょう。どんな遊びでもかまいません。形にする前に次のことを考えておくと、作る途中で迷いにくくなります。 - **いちばん楽しい瞬間はどこか。**点が入るとき、読みが当たったとき、ぎりぎりでかわしたときなど。ほかの部分は、その瞬間に向けて作ります - **1試合の中で、何をくり返すか。**狙う、打つ、結果を見る、のような流れです。これが気持ちよく回ると、ゲームの芯になります - **2回目に遊ぶ人は、何を工夫するか。**上手くなる余地があると、もう一度遊びたくなります - **相手とどう関わるか。**じゃまをする、読み合う、同じ物を取り合うなど。対戦の味はここで決まります - **指で何をするか。**スマホを縦に持って、指1本か2本です。1つの操作に強さや向きの意味を持たせると、ボタンを増やさずに遊びが深くなります 発想を広げたいときは、知っている遊びに変化や制限を1つ足したり、舞台や題材を変えたりしてみます。 ## 2. 動くものを作る 骨組みでいいので、まず遊べる形にします。遊んでみると、考えていたときには見えなかったことが分かります。 - **いちばん楽しい瞬間を、先に動かす。**飾りや細かいルールは、あとから足せます - **調整しそうな数字は、`game.js` の頭に定数でまとめる。**速さ、時間、点数、CPUの強さなど。あとで1か所を変えるだけで試せます - **CPUは、最初は単純でかまいません。**相手がいなくても、すぐ遊んで確かめられます 遊べる形ができたら、そこがスタートです。 ## 3. 完成度を上げる 同じルールでも、細かい調整で、遊んだときの感じは大きく変わります。遊んでは直す、をくり返します。 ### 手触り - **入力した瞬間に、何かが起きる。**動く、光る、音が鳴るなど。返事が遅れると、操作が効いていないように感じられます - **当たった瞬間を、少し強める。**一瞬光る、少しふくらむ、粒が飛ぶなど - **速さを何度か変えて、比べる。**ちょうどいい速さは、遊んでみないと分かりません - **両方の側から遊ぶ。**「2P として戦う(開発用)」で、反対側からの見え方と操作を確かめられます ### 釣り合い - **いつも同じことをすれば勝てる手がないか、見る。**強すぎる手が1つあると、ゲームはすぐ単調になります - **運と腕の割合を、狙って決める。**運が多いと初めての人も勝てて、腕が多いと上達が効きます - **`player1` と `player2` の差を見る。**先に動ける側や、画面の手前の側が得をしていることがあります。わざと差をつけるのでなければ、直せます ### CPU CPUの調整は、時間がかかりやすいところです。 - **弱いCPUから作る。**強さの差は、`meta.opponents` に数字(反応の遅さ、間違える割合、先を読む深さなど)を持たせて、`bot` の中で読みます([ルール(game.js)の仕様](/docs/lang-spec) 4.6) - **人らしい弱さを入れる。**反応を少し遅らせる、狙いを少しずらす、たまに別の手を選ぶなど。完ぺきなCPUより、遊んでいて楽しい相手になります - **人に見えないものを、CPUに使わせない。**CPUの席に見せた札は、`g.peek` で読めます - **揺らぎは、`tick` か `setup` で `g.random` を引いて `g.state` に置き、`bot` で読む。**`bot` の中では `g.random` を呼べません([ルール(game.js)の仕様](/docs/lang-spec) 5.3) - **重い読みは、数tickに分ける。**1回の呼び出しで使える命令の数には上限があります([ルール(game.js)の仕様](/docs/lang-spec) 2.7) ### 見た目 - **何が起きたか、自分がどちらかを、ひと目で分かるようにする。**自分の側は `snapshot.myRole` で分かります([見た目(visual.js)の仕様](/docs/visual) 4) - **遊ぶものと背景の明るさに、差をつける。**色を増やすより、見分けやすくなります - **光を2つ置き、形を組み合わせる。**空からの柔らかい光と一方向からの強い光で、立体感が出ます。箱・球・円柱などを組み合わせるだけでも、駒や台はそれらしくなります - **地面に影を落とす。**物の高さと位置が分かりやすくなります。影は重いので、スマホでの軽さも見ます([見た目(visual.js)の仕様](/docs/visual) 8) - **遊ぶ場所が、画面に大きく入るようにカメラを置く。**スマホの画面は小さいので、余白が多いと遊ぶものが小さくなります - **画像は大きめに作って、縮めて使う。**持ち込む絵も、コードで描いて貼る模様も、画面に出る一番大きな大きさ(スマホの全画面で横800画素ほど)以上にします。縮めるぶんにはきれいですが、引き伸ばすと粗くなります。コードで作った形(箱・球など)は、毎回画面の細かさで描かれるので気にしなくて構いません - **文字を描いた板は、画面の画素にぴったり重ねる。**画像に文字を描いて板に貼るときは、板の画素数を、画面に出る大きさ × 細かさにし、縮めた版(`generateMipmaps = false`・`minFilter = THREE.LinearFilter`)を使わず、位置を画素の境目に揃えます。少しでも引き伸ばしたり、半画素ずらしたりすると、文字がぼやけます。PC は画素が粗いので特に目立ちます - **速く動くものがあるなら、間を補う。**ルールは1秒30回なので、ボールや走る人は30回のコマ送りに見えます。`meta.interpolate: true` にして、見た目で前の位置との間を補うと、なめらかに動きます([見た目(visual.js)の仕様](/docs/visual) 4.5)。初めの位置に戻るような大きな跳びは、補わずにそのまま置きます(1回で動けるより遠くへ跳んだら補わない、と決めるのが手軽です)。物理の体の向きの混ぜ方も、同じ節に例があります。駒を0.2秒かけて滑らせるなど、動きを見た目のコードで自分で描いているなら、要りません - **出来事に動きを付ける。**`snapshot.effects` で届く出来事に合わせて、光らせる、揺らす、粒を飛ばすなど([見た目(visual.js)の仕様](/docs/visual) 4.1) ### パソコンでも遊べるようにするとき `meta.devices` を `"both"` にするときです([ルール(game.js)の仕様](/docs/lang-spec) 4.5)。 - **押して選ぶだけのゲームは、何も足さなくてよい。**マウスの左ボタンが1本の指として届きます - **動きながら押すゲームは、キーボードの操作を足す。**WASD か矢印で動き、スペースで決める、が多くの人に通じます([ルール(game.js)の仕様](/docs/lang-spec) 6.6) - **操作は「操作」の欄に書く。**スマホとパソコンの欄が別にあり、ゲームの紹介の画面には、遊んでいる端末のぶんだけが出ます([作って公開するまで](/docs/authoring) 2) - **画面のスティックやボタンは、パソコンでは消すことが多い。**キーで動かすので要らず、見た目もすっきりします。出したままでもかまいません([見た目(visual.js)の仕様](/docs/visual) 4.4) ### 音 音は2通りで作れます。[音の棚](/docs/sounds)の録音を名前で選ぶか、数の並び(ZzFX)で作るかです。どちらも `meta.sounds` に書き、混ぜて使えます([ルール(game.js)の仕様](/docs/lang-spec) 4.8)。[音の試聴](/listen.html)で、棚の音も数の並びも聞いて確かめられます。録音は手触りのある音に、数の並びは電子音に向いています。 - **当たった・取った・決まった・勝った負けた、などに音を付ける。**まずはここからです - **強さで音を変える。**棚の重さちがい(`impactPunch_heavy` と `impactPunch_medium` など)を使い分けたり、数の並びの高さや長さを変えたりします - **同じ音の連打を避ける。**棚の番号ちがい(`_000`、`_001`…)や、少しずつ変えた数の並びを交互に鳴らすと、単調になりません - **自分に起きたことと相手に起きたことで、音を変える。**`{ self, other }` の形で書けます - **鳴らしすぎない。**毎tick鳴る音や、同時にたくさん鳴る音は、うるさく感じられます ### 素材 画像・音・3Dモデルのファイルを、作る人が作品のページから持ち込めます([見た目(visual.js)の仕様](/docs/visual) 7)。無くてもゲームは作れますが、駒やキャラクター、床の模様、効果音などを素材にすると、雰囲気を作り込めます。 - **探す。**自由に使えて表示も要らない CC0 の素材を配っている所があります。Kenney(2D・3D・音)、Quaternius(3Dモデル)、Poly Haven・ambientCG(質感の画像)などです - **使える条件を確かめる。**素材ごとに使える条件があります。他人の権利を侵す素材や、条件に反する素材は使えません([利用規約](/terms.html))。作者の名前などの表示が要る素材は、その決まりどおりに、作品の説明やゲームの画面などに書きます - **自分で作る。**Blender などで作ったモデルは、`.glb` に書き出して置けます。Draco などの圧縮はかけずに書き出します - **雰囲気をそろえる。**作りの違う素材を混ぜると、ちぐはぐに見えます。同じ詰め合わせや同じ作者のものでそろえると、まとまります - **軽さを見る。**スマホで動くので、モデルの面の数や画像の大きさは控えめにします。1つの作品に置けるのは、合計20MBまでです。多いほど、遊ぶ前の読み込みが長くなります - **素材と形を組み合わせる。**目立つものだけを素材にして、床や壁は形と色で作ることもできます --- ## AIに頼んで作るとき この節は、作る人に頼まれてゲームを書くAIに向けたものです。 - **作る人の発想を、支えてください。**何を作るかは作る人が決めます。AIは、その発想を広げたり、形にしたりする手伝いができます - **遊べる形ができたら、作る人に遊んでもらい、感想を聞きます。**どこで迷ったか、どこが楽しかったか、もう1回やりたいか、のように具体的に聞くと答えやすくなります - **改善を、一緒に進めてください。**ゲームは、動いたあとの調整で良くなっていきます。新しく作り直すより、いまあるゲームを3節のように磨いていくと、作る人のゲームが育ちます