JOURNAL お問い合わせ

CASE 03制作事例

テニスに負けると石が置かれる、しろくろテニス!のルール

テニスとリバーシの重ね方と、気分でゆらぐCPU。

テニスのラリーでリバーシの盤面を取り合う、無料の3D対戦ゲーム「しろくろテニス!」。相手が打ち返せなかった1球がそのまま盤上の1手になり、挟んだ石が一気に裏返ります。誰もが知る2つの遊びをどう噛み合わせたか、油断したりむきになったりするCPUの調整、他の作品にも引き継がれた1対1の通信の仕組みまでをたどります。

しろくろテニス!のタイトル画面。白と黒の石が並ぶ8×8のマスのコートで、ねこのミャーラとペンギンのペンリーが打ち合い、手前に「あそぶ」「オンライン対戦」「あそびかた」「れんしゅう」のボタン

OVERVIEW作品の概要

作品名
しろくろテニス!(英題 Flip Smash Reversi)
ジャンル
3Dテニス×リバーシ(ひとりでCPU戦/1対1のオンライン対戦)
中身
選手4人(必殺技は1人1つ)× 難しさ3段。90秒の試合と、6つの課題を順に試す「れんしゅう」
操作
スマホは画面の左側をスライドして移動、右下のボタンで構えて打つ。PCは WASD か矢印キーと、Space かクリック
技術
three.js(r185)・PeerJS 1.5.5(WebRTC)・Web Audio
サーバー
ファイルを配信するだけ。オンライン対戦の入室の仲介だけ PeerJS の公開サーバーを使う
制作
AMIX(企画・キャラクター・デザイン・プログラム。BGM と効果音・ボイスは Audiostock、ホイッスルは Springin’ Sound Stock の素材)

しろくろテニス!で遊ぶゲームの紹介ページ

01 — PLANテニスの点の取り方を、リバーシの石にする

コート全面には8×8の64マスが引かれていて、ネットを境に自陣と相手陣が32マスずつに分かれています。サーブやラリーの打ち合いは通常のテニスと同じですが、得点の入り方だけを変えました。相手が打ち返せなかったとき、ねらったマスに自分の石が置かれます。置いた石で相手の石を縦・横・ななめにはさめば、まとめて自分の色へひっくり返る仕組みです。

ボールをとらえた瞬間だけ時間の流れがゆっくりになり、その隙に相手コートのどのマスへ打ちこむかを選びます。相手の足が届かない遠いマスを突くか、決まれば大量に裏返るマスを狙うか。打球の精度しだいで狙いから少しずれることもあるため、盤面の読みとテニスの立ち回りが1球ごとに絡み合います。ラリーが続いている間は盤面は動きません。

ペンギンのペンリーとうさぎのラビーが、白と黒の石が並んだマス目のコートで打ち合っている CPUのサーブが決まり、コートの上に大きく「ACE!」と出た場面。手前のうさぎのラビーの横に「とどかない!」の文字
左:コートの線が、そのまま盤のマスになる。右:返せなかった球は「ACE!」になり、ねらわれたマスに相手の石が置かれる。

1試合は90秒。時間切れになるか64マスすべてが埋まった時点で、石の多い側が勝ちます。金色の枠がついた四隅の石は最後まで裏返らないため、角をめぐる攻防はリバーシそのままです。

難しさを下げるほど画面上の手助けが増え、「かんたん」では狙い目のマスに★印が出ます。試作の途中には自分の色のマスの上だけ足が速くなる隠し仕様も入れていましたが、ルールが込み入るため外しました。

02 — CPU鉄壁にしないCPUと、ボット72試合の勝率調整

CPUを作るときに決めた方針は、機械のように鉄壁の相手にはせず、人間らしい波を持たせることでした。点差が開けば気が緩み、負けが込めばムキになる。強さの基準は難易度で分け、揺れ方のクセはキャラクターごとに変えつつ、特定の1人だけが極端に強くならないよう抑えています。

実際のプログラムでは、CPUが「気分」の数値を持っています。1点動くたびに調子が揺れ、石の数で勝っていれば油断し、リードを許すと気合が入る設計です。連続失点で本気モードに切り替わり、残り30秒を切ると終盤の追い込みをかけてきます。この気分の値によって、反応の速さ・立ち位置の誤差・ミス率・コースの読みが刻々と変化する仕組みで、ときどき山を張って逆サイドへ決め打ちするため、打つ直前にコースを変えると裏をかけます。

うさぎのラビー。ピンクのシャツに月の髪飾りをつけ、ラケットを持って手を振っている ねこのミャーラ。サングラスをかけ、黄色いシャツを着ている ペンギンのペンリー。雪の結晶のついたニット帽をかぶっている くまのベアトリス。はちのワッペンのついたヘアバンドをしている
選べる4人。上の段の左からラビー、ミャーラ、下の段の左からペンリー、ベアトリス。CPUになったときの戦い方のくせは、紹介ページの選手の欄にも書いている。

気分の揺れ方は4人それぞれ違います。冷静なペンリーはリードした途端に力を抜いて流しはじめ、負けず嫌いのベアトリスは力みすぎて長丁場でバテていく、といった具合です。リーチの長いこの2人は素の性能だけで強くなりすぎたため、性格を弱点側に振ってバランスを取りました。気分の変化は表情にも出ていて、気合が入ればしかめ眉で火花を散らし、油断するとにっこり笑います。

操作の手触りも、テストプレイの声を受けて作り直しました。奥行きをつかみにくい人から「サービスエースがほぼ返せない」という指摘があり、人間が操作する選手に限り、届く範囲を通過する球なら拾えるよう判定を広げています。「かんたん」と「ふつう」ではCPUのサーブ速度も少し落とし、打たれた瞬間に追いつける地点へ緑の目印を出すようにしました。

ペンギンのペンリーが足元に黄色い輪を出して構え、飛んでくるボールを待っている。奥ではくまのベアトリスがコートに倒れこんでいる
足元の黄色い輪が、打てる位置の目印。輪とボールの輪が重なった瞬間に放すほど、良い当たりになる。

調整の仕上げには、人間のように反応が遅れ、打つタイミングもばらつくテスト用ボットを使いました。「ふつう」ではCPUのサービスエース率が40%から20〜25%まで下がった一方、今度は易しくなりすぎて中級ボットの勝率が38%から71%へ跳ね上がっています。そこからサーブの球速とコース読みを少しずつ戻し、72試合ずつ自動対戦を回して勝率49%に落ち着かせました(いずれも手元のボット計測値)。

03 — ONLINE打った球は、軌道ごと相手の画面へ送る

1対1のオンライン対戦は、「ルームをつくる」を押すと発行される5文字のコードか招待URLを相手へ渡して始めます。部屋を作った側が白、入った側が黒を担当し、黒側の画面ではコートの左右を反転させて自分の顔アイコンと石が常に左へ来るようにそろえました。

対戦中、各端末は自分の選手だけを動かし、その座標を毎秒20回相手へ送っています。サーブのトスや打球の瞬間、空振り、フォルトといった自キャラの出来事は手元の画面で即座に確定させて相手へ通知する方式です。打ったボールは、打ち出し位置・初速・バウンド地点・到達時間までひとまとめにして送り、受け取った側はそのパラメータから同じ放物線を再現して飛ばします。

盤面と残り時間の正本は白の端末が管理します。ただし、白から届いた盤面データを黒の画面へすぐ上書きすると、黒の画面が自前で進めている得点演出とぶつかって石が二重に置かれてしまいます。そこで盤面の通知には得点の通し番号を添え、黒の画面が同じ得点の処理を終えるまで待ってから反映させる手順にしました。万一並びが食い違っていたときだけ石を置きなおし、試合終了時も白が最終盤面と成績をまとめて送ります。なおオンライン対戦中は一時停止ができず、メニューを開いている間も試合時計は進み続けます。

公開後に最も手を焼いたのが、スマホで招待URLを共有しに別アプリへ移った際の切断で、9月25日・29日・10月5日の3回にわたって改修しました。最初は iPhone でルームを作り、X へURLを貼りに行って戻ると部屋が消えている問題です。iOS がバックグラウンドへ回ったページの仲介サーバー接続を切っていたため、同じルームコードと招待URLを維持したまま仲介サーバーへ再接続する仕組みを入れ、ゲスト側も最大90秒は再接続を試み続けるようにしました。

2回目は9秒に設定していた生存確認のタイムアウトです。2秒おきに応答を確かめて9秒で切断とみなしていたため、裏画面で JavaScript が止まったスマホは戻ってくる前に切られていました。バックグラウンドへ移る直前に「離れます」の合図を送り、ロビーなら3分、試合中なら1分待つよう延ばしています。3回目はホスト側の部屋が意図せず閉じる不具合の修正でした。

こうして鍛えた1対1の通信モジュールは、その後の AMIX GAMES で対戦・協力作品を作る際のひな形になりました。2人協力の TRICK or REAL や、リバーシボンバー、FRAMEZ などのオンライン機能は、このコードを写すところから始まっています。

DESIGN NOTE

打球の当たり判定を手元の画面で決める方式は、回線が多少遅れてもラケットを振った手応えが鈍らない利点があります。その裏返しとして、ブラウザ側を改ざんすれば判定をごまかせるため、友人どうしやイベント会場の対戦には向いても、賞品や公式ランキングを懸ける企画には使えません。競技性を厳密に担保する場合はサーバー側で判定を持つ設計に切り替えます。

04 — PERFORMANCE必殺技のカットインで、画面を止めない

ゲージがたまると使える必殺技では、選手のアップが飛び出すカットイン演出が入ります。この演出はコートの3D画面とは別に用意した、2枚目の WebGL キャンバスで描いていました。初期の実装では技を出すたびにこの2枚目を生成しなおしており、発動の瞬間に0.1〜0.16秒ほど画面が固まっていました。

改修後はキャンバス寸法の調整を試合開始時とウィンドウ変更時だけに絞り、演出用のシェーダーもページ読み込み時に白・黒両チームぶんを先にコンパイルしています。キャラクターの白い縁取りと影は負荷の高い CSS フィルタをやめてキャンバス内で直接描き、氷や残像のように試合中盤で初めて出るエフェクトも開幕前に準備を終える形に改めました。発動から0.2秒後あたりに1コマだけ引っかかりが残るものの、遊んでいて気づかない範囲のため深追いしていません。

起動時の読み込み画面にも似た引っかかりがあり、スマホでは「よみこみ中…」の回転アイコンが固まって見えていました。顔アイコンやカットインの生成に約2秒かけた直後、最初の1コマ目で全シェーダーを一気にコンパイルしていたのが原因で、PCのCPU速度を4分の1に絞った検証環境ではそこだけで4.5秒止まっていました。現在は前処理を40ミリ秒単位に刻んで描画へ順番を譲り、シェーダーもローディング画面の裏で1つずつ作ってからタイトル画面を開きます。同じ検証条件で起動時間は7秒から3〜4.5秒に短縮され、連続で止まる時間も0.4〜0.56秒に収まりました。

05 — DATA月間2位、検索と直接流入が4割を占める遊ばれ方

AMIX GAMES の全作品の遊ばれ方は毎日集計し、DATA CENTRAL で公開しています。その中から、しろくろテニス!の順位と割合を取り出しました(閲覧数の実数は非公開です)。

FLIP SMASH REVERSI — PLAY DATA

集計:AMIX GAMES DATA CENTRAL(2026年11月10日までの値)

2位月間の閲覧数の順位(10月12日〜11月10日・AMIX GAMES の全作品の中で)
21%検索から来た割合(11月4日〜10日)
57%9〜15時に遊ばれた割合(11月4日〜10日)
2.5倍平日1日あたりと、週末1日あたりの比(10月14日〜11月10日)

遊ばれた時間帯1時間ごとの割合・2026年11月4日〜10日

しろくろテニス!が遊ばれた時間帯(1時間ごとの割合) 11月4日〜10日。9時台から14時台までの6時間に全体の57%。いちばん多いのは13時台の10.1%。どの時間も同じだった場合の割合は4.2%。 9〜15時に 57% 0時台 0.4% 1時台 0.2% 2時台 0.1% 3時台 0.0% 4時台 0.0% 5時台 0.1% 6時台 0.5% 7時台 1.8% 8時台 7.4% 9時台 8.8% 10時台 10.0% 11時台 10.0% 12時台 8.4% 13時台 10.1% 14時台 9.8% 15時台 6.3% 16時台 4.1% 17時台 3.9% 18時台 3.8% 19時台 3.5% 20時台 4.3% 21時台 3.3% 22時台 2.1% 23時台 1.1% どの時間も同じなら 4.2% 10.1% 0時 3時 6時 9時 12時 15時 18時 21時

端末11月4日〜10日

  • PC76%
  • タブレット16%
  • スマホ8%

来た元11月4日〜10日

  • AMIX の中(一覧など)59%
  • 検索21%
  • 直接(ブックマーク等)19%
  • SNS0%

平日と週末の比は、作品ごとの値が粗く出た10月30日と、祝日の11月3日を除いて数えています。計測は Cloudflare Web Analytics(ページの表示を数える仕組み)。数えているのはゲームのページ(/tl/tool-g-shirokuro/)を開いた回数で、遊んだ時間や試合の数は含みません。「直接」はほかのページを経ずに開かれたもの。順位は、web- で始まる一覧のページを除いて数えています。四捨五入のため、合計が100%にならないことがあります。

全時間帯のなかでは9時台から14時台までの6時間に全体の57%が集まり、山は13時台の10.1%でした。夜の19〜22時は合わせて11%。この時間帯別のグラフは曜日を分けていないため平日・週末ごとの内訳までは読めませんが、10月14日〜11月10日の日別平均で見ると、平日は週末1日あたりの約2.5倍開かれています。

端末は PC が76%、タブレットが16%、スマホが8%と、タブレットの割合がほかの作品よりやや高めに出ました。どのような場所で遊ばれているのかは、この集計からは分かりません。

目を引くのは流入元です。AMIX GAMES の一覧などサイト内経由が59%なのに対し、検索からが21%、ブックマークなどの直接流入が19%を占めました。同じ期間の SHIBA DASH!!(検索11%)と比べると検索経由の割合は約2倍あり、月間の閲覧順位でも全作品の2位に入っています。なぜ検索からの流入が多いのかまでは、この数字だけからは特定できません。

06 — PERSPECTIVE既知のルールを掛け合わせて、新しい遊びを作るには

誰もが知る遊びを2つ重ねて、説明を1行にする

テニスもリバーシも、ルールを一から説明しなくてよい定番の遊びです。2つを重ねると見たことのない試合になる一方、新しく覚えてもらう約束ごとは「打ち返せなかったマスに石が置かれる」の1つだけで足ります。盤面のマスを商品や店舗のイラストに、石をブランドカラーに置きかえるアレンジも自然になじむ形です。かるたやすごろくのように、遊ぶ側がすでに知っているルールどうしの掛け算から探すと、冒頭の説明画面を短くできます。

招待URLだけで始まる1対1と、仲介サーバーの考え方

ゲーム用サーバーを持たずに招待URLだけで1対1の対戦が始まるため、展示ブースや店頭で隣り合った2人に遊んでもらう用途に向いています。入室の仲介には PeerJS の無料公開サーバーを使っており、普段の運用はファイルの配信だけです。もし大規模イベントなどで仲介サーバーの混雑や停止を避けたい場合は、仲介サーバーだけを自前で立てる費用が加わります。

CPUの手強さを、ボット対戦の勝率でそろえる

人間に似せたボットを何十試合も戦わせて勝率49%へ追い込んだように、「初見の人が半分くらい勝てる」「上級者だけ突破できる」といった目標値を先に置き、そこへ難易度を合わせ込む調整が可能です。腕前で景品が変わる企画でも、どの程度の割合でクリアが出るかを公開前に確かめられます。オリジナルゲームの制作範囲と費用や既存作品を活かしたタイアップについては、それぞれの案内ページにまとめています。

MORE FROM JOURNAL