またひとつ、狐の巣から妙に重たい雰囲気のゲームが生まれました。
今回作ったのは、ブラウザで遊べる5カードドロー形式のポーカーゲーム。
その名も――
CROWN & FATE
王冠と運命。
カードを引いているだけなのに、少し大げさな名前です。
でも、こういうのは大げさなくらいがちょうどいい。
※ゲーム開始後はBGMが流れます。端末の音量にご注意ください。
普通のポーカーを、普通ではない雰囲気で
ゲームの基本ルールはシンプルです。
チップを賭けて5枚のカードを配り、不要なカードを選んで交換。
最後にディーラーと役を比較します。
勝てばチップと収益が増え、負ければ賭けたチップを失います。
役の強さや配当は画面右側のPAYOUTに表示されているので、ポーカーに詳しくなくても、なんとなく遊べるはずです。
たぶん。
こういうゲームは、ルールを増やすよりも「もう一回だけ引こう」と思わせる空気のほうが大事だったりします。
深緑と金色と、やたら荘厳な巫女
今回はゲームロジック以上に、UIの雰囲気作りへ時間を使いました。
画面は、
- 左に巫女
- 中央にゲーム盤
- 右に配当表
- 下部にBETとアクションボタン
という三層構成です。
深緑、金、黒を中心に、古い宮廷の遊戯室のような画面を目指しました。
枠線も単純な一本線ではなく、外枠、内枠、ハイライト、影を重ねています。
カードゲームなのに、ボタンひとつ押すだけで妙に重大な決断をしている気分になります。
ただし、やっていることはカード交換です。
カードを主役にする
カードには一般的なトランプとは少し違う、ダークファンタジー寄りのビジュアルを使用しました。
PCでは5枚のカードを大きく表示し、PLAYER側のカードへマウスを乗せると、少し浮き上がるように拡大します。
スマートフォンではカード画像が小さくなるため、カードの下へスートと数字を補助表示しています。
見た目を優先しすぎて、数字が読めないゲームになってしまっては本末転倒です。
……この辺りは、老眼気味の開発者本人が一番敏感でした。
勝敗だけでは終わらないランクシステム
ゲームを続けると収益に応じてランクが上がります。
平民から始まり、より高い爵位を目指していく仕組みです。
現在のランク、次のランクまでの進捗、獲得した収益はブラウザ内へ保存されます。
ランクアップ時には専用の演出も表示されます。
以前は一瞬だけ表示していたのですが、それでは見逃してしまうので、現在はユーザーが閉じるまで表示されるようにしました。
昇格くらい、ちゃんと余韻に浸らせてほしい。
音もゲームの一部
BGMには「PSYCHOLOGICAL WARFARE」を使用しています。
初期音量は20％です。
音量とミュート状態は保存され、次回アクセス時にも前回の設定が復元されます。
また、スマートフォンの画面を閉じたときや、PCで別のタブへ移動したときはBGMを自動停止します。
戻ってきた場合は、離れた位置からではなく停止した場所から再開します。
こういう細かな挙動は目立ちません。
でも、目立たない部分がきちんとしていると、ゲーム全体が少しだけ信用できるものになります。
レスポンシブ対応という名の長い戦い
今回、もっとも手強かったのはゲームロジックではありません。
レスポンシブ対応です。
PCの16:9、スマートフォンの9:16、iPad mini、iPad Pro、Surface Pro。
同じHTMLでも画面比率が変わると、カード、ラベル、操作ボタン、配当表が、それぞれ好き勝手に場所を奪い始めます。
さらにChromeとFirefoxでも表示のバランスが微妙に異なりました。
「あと10px広げたい」
「カードを大きくしたらPLAYERの文字に被った」
「ボタンを直したら今度は下にスクロールが出た」
だいたい、そんなことを延々と繰り返しています。
最終的には端末名だけで分岐するのではなく、画面の幅と高さを見ながらカードサイズや余白が変化するよう調整しました。
スマートフォン版はPC版をそのまま縮小せず、必要な情報を選び直して縦画面用に再構成しています。
引き算は難しい。
豪華にするより、何を消すか決めるほうが難しかったです。
タイトル画面も作りました
ゲーム開始前には専用のタイトル画面を表示します。
表示されるのはロゴとSTART SESSIONボタンだけ。
余計な説明やアイコンは置かず、背景とロゴがきちんと見える構成にしました。
START SESSIONを押すと画面がフェードアウトし、その操作を起点にBGMが始まります。
ブラウザの自動再生制限への対応も兼ねています。
スマートフォンでは背景画像を専用の縦構図へ切り替えています。
ひとまず完成。でも、たぶんまた触る
ゲームとしては公開できる状態になりました。
ポーカーの判定、チップ計算、配当、ランク、保存、BGM、PC・スマートフォン・タブレット対応。
必要なものは一通り揃っています。
とはいえ、自分で作ったものは、公開した瞬間から直したい場所が見え始めます。
たぶん数日後には、また1px単位で何かを動かしている気がします。
そんな狐の細かい抵抗も含めて、楽しんでもらえれば幸いです。
運が良ければ勝てます。
運が悪ければ負けます。
そして、運が悪いときほど「次は勝てる気がする」のがカードゲームです。
ぜひ、王冠と運命のテーブルへ。