ミニゲームに物語性を加えることで得られるコク

自作ライブラリcrisp-game-libを使ったミニゲーム作りは、まだ継続して行っている。

そんな中、最近作ったゲームの評判が良かった。

評判が良かった理由は、

のように、ミニゲームにちょっと物語性を入れ込んだところがウケたようだ。

私には作ったゲームにあとから物語性を入れる器用さは無いので、私の作ったゲームになんらかの物語性があったとしたら、それはその物語性を元ネタに発想したゲームだということだ。

今回は、

スタジアムでトラックにひかれるところから始まる異世界転生バトルが生まれるほど鉄板化したお約束、「トラックにひかれて異世界転生する」を元ネタに考えたものだ。

  • トラックにひかれて飛ばされた先が別の世界になるよう、２つの世界を左右に配置する
  • 左右の世界でそれぞれボーナスアイテムのダイヤを配置し、世界を行き来しつつダイヤを集めて点を得るようにする
  • トラックにひかれてゲームオーバーにするわけにはいかないので、代わりにダイヤを取り逃すことを終了条件にする
  • こうすることでどのトラックを避けてどのトラックにひかれるべきかの駆け引きが生まれて、なんとかゲームになる

という流れで作った。

というわけで、ミニゲームにおいても物語性を加えることでコクや深みを与えることが重要である、ということをいまさらながら再認識した次第である。ただ、一般的にゲームに物語性を加えるのは、凝ったグラフィックスやサウンドを施すことで行われることが普通で、低コストに作りたいミニゲームで行うことは難しい。今回は「トラック」「異世界転生」というミームを説明文に加えるという、極めて低コストな方法をたまたま思いついたからできただけであって、あんまり再現性がある手法にも思えない。

あと、

こういう物語性のかけらも無い、ゲームルールむき出しのミニゲームを作るのも好き、という個人的な嗜好もある。なんか、こういう素朴なゲームが面白くできると、ゲームルールだけで勝った！、みたいな謎の達成感がある、んだけど、この感覚ってゲーム開発者に普遍的なものなのかなあ。

なので物語性の重要性は再認識しつつも、ゲームルールそれ自体の楽しさを試行錯誤するゲーム作りをしたい、というスタンスはあまり変えずにまたミニゲーム制作を続けようと思いました。すごいどっちつかずの結論だけど、ゲーム作りは自由だからこれでいいのだ。

1日1個、11日で11個のミニゲームを作る

そしてTwitterに放流する。

全てのゲームはcrisp-game-libを使って作った。PCとモバイルのブラウザで動く。

毎日1個作っては放流、としていたわけでは無く、実際はいくつか作り貯めておいてそれを1日ずつ放流していたわけだが、それでもこのペースで作るためには、ゲームのアイデア出しと実装をそれなりのスピードでする必要がある。

アイデア出しには、

のようにレトロゲームの一部を切り出して強引にミニゲーム化したり、

昔の自作ゲーム資産があればそれを食いつぶすのも良い。短時間でゲームアイデアを思いつくための話は前にも書いた。

いろんなゲームを遊ぶこと・作ることの経験を蓄積していくと、このゲームをこうアレンジしたら、このゲームのこの部分を切り出してみたら、このゲームとこのゲームをこうかけ合わせたら、という発想のバリエーションを増やすことができる。あと、元にしたゲームから、楽しめるポイントがどこか、リスクとリワードのバランスをどのように取っているか、などがあらかじめ分かるので、ちゃんと遊べるゲームになる打率が上がる。敵の出現頻度とか、難度に応じたゲームスピードアップ比率とかのパラメタをチューニングして、遊びやすいゲームにすることも大事。

あと最近は、ワンボタン、左右へのマウス・タッチ移動、画面上のタップ、いずれかで操作できるゲームしか作っていない。こういった縛りを入れることも、ゲームのアレンジ方法を考えることに役立つ。

実装については、使う言語・ライブラリについて十分に習熟しておいて、ゲームを作るにあたってなんの学びも必要としないくらいまで、こなれていることが望ましい。何もググらずに手癖でコードを書けるようになると、実装スピードが稼げる。

あとゲーム内オブジェクトについて、以下のコードのようにあらかじめ型を規定してから書くと、ゲームロジックを書く際のガイドになる。このへんのデータ設計も、数をこなせば定型的なパターンが見えてくる。

今まで作ったブラウザミニゲームは、以下のページにスクリーンショットとともにリストアップしてあるので、適当に遊んでもらえるとうれしい。

残りゲーム制作体力10%な人のためのずぼらゲームライブラリcrisp-game-lib

を目指してまた自作ゲームライブラリを作っている。

ゲーム制作体力が無いならゲーム作りをやめればいいのだが、ウン十年とゲームを作り続けているゲーム制作ジャンキーはそんなことでは立ち止まれないので、より短時間で体力が尽きる前にゲームを完成させるためのライブラリを再発明し、今日もゲーム制作RTAを走るのだ。1時間くらいで完走できるのが理想。

crisp-game-libは短時間で手軽にブラウザゲームを作るためのJavaScriptライブラリだ。2014年に50個のミニゲームを作ったが、そのときにはそれらゲームを作るためHaxeライブラリmglとCoffeeScriptライブラリmgl.coffeを合わせて作った。その後も懲りずにミニゲームとライブラリ作りを続けた経験を活かし、クラシックでアーケードライクなミニゲームを作るために必要最小限な機能を備えたライブラリを目指して、crisp-game-libは作られている。

crisp-game-libを使ったゲームもすでに40個以上作っていて、十分にドッグフーディングされていると思う。ゲームのtitle、description、1秒間に60回呼びだされるupdate関数を単一のJavaScriptファイルとして書くだけで、PCとモバイルで動作するブラウザゲームが作れる（下の画像をクリックすると遊べます）。

pressm screenshot

箱・線・弧・テキスト・キャラクタなどの描画機能と、

ref_drawing screenshot

それら描画機能と一体化した衝突判定機能、

ref_collision screenshot

マウス・タッチパネル両対応の入力取得機能、鳴らしたい音名を選択するだけの効果音機能と、ミニゲームに必要な機能を一通り用意した。

また、オプションでisPlayingBgmをtrueにするだけで自動生成されるBGM、isReplayEnabledをtrueにするだけで有効になるリプレイ機能、themeを設定するだけでレトロなCRT風やドット絵風などに見た目を変化させる機能、characters配列で簡単に定義できるドット絵など、ゲームをジューシーにするための機能も備えている。生成された音が気に入らなかったらseedに適当な整数を与えると音が変わるので、気に入った音が出るまで乱数シードガチャを引き続けて欲しい。

TypeScriptでの型定義も備えているので、VSCode上でインテリセンスの恩恵を十分に受けることができるのも、短時間でのコーディングに役立つと思う。

Super HexagonやVVVVVVの開発者として知られるTerry Cavanaghさんが書いてくれたcrisp-game-libに関する記事もあるので、合わせて読んでもらいたい。

ゲーム制作体力と合わせてゲーム遊ぶ体力も落ちてきているとなると、サクッと遊べるゲームをサクッと作れる環境が欲しくなる。なのでこんな感じのゲームライブラリ車輪再発明を繰り返している気がする。本来この辺の役割を担うのは、PICO-8に代表されるファンタジーコンソールやScratch、HSPなどで、これらのほうがより高機能なのは間違いない。だが、より機能を削ぎ落とし、自分に合った形に自作ゲームライブラリを作るのも、それはそれで楽しいので良しとしたい。皆もゲームライブラリ自作沼に肩まで浸かって温まりましょう。

個人サイトをリニューアルして自作ゲーム一覧を作ったら250個くらいあった

ABA Games

前々から今まで作ったゲームを整理して、その一覧が見られるようにしたいと思っていたので、覚悟を決めてホームページのリニューアルをした。作ったゲーム（一部ゲームじゃないのもあるけど）は250個くらい。ミニゲームを量産していたのでそれなりの数はあるだろうな、と思っていたけど、思ったより多かった。

ゲームはその動作プラットフォーム別に分けて見られるようにした。

うちのゲームで比較的ちゃんとしているたぐいのものはだいたいWindows用だから、ここがメインページ。

最近作っている、ブラウザで遊べて数分で終わるミニゲーム群はこのページ。アニメーションGIFでだいたいどんなゲームか分かるようにしているつもり。

今は亡きFlashのページ。ミニゲームとはいえ、それなりの数作ってるので、これらがそのまま遊べなくなるのはちょっと悲しい。Ruffleとかの互換Flash Playerの成熟に期待している。

その他。昔作った弾幕記述言語BulletMLとか、いにしえ＋マイナーなプラットフォーム、WonderWitch、P/ECE、Palm向けゲームなど。この辺のゲームをいまさら動かす人はあまりいないだろうから、自分史的な感じだ。本当はMSX時代とかに作ったゲームもリストアップしたいんだけど、そんなものが手元に残っているはずもなく、それらがそのまま失われてしまうのはしょうがないね。ベーマガとかのプログラム投稿雑誌にバリバリ掲載されていた人は記録が残っていそう。

最近は作ったものをGitHub上に置いていたりしていて、自作ゲームもいろんなサイトにバラバラにある感じだったので、こういう形でリスト化できたのは良かった。継続は力なり、もしくは三つ子の魂百までを可視化できている。

これからもゲームをちまちま作っていってリストを拡充していきたい。願わくばブラウザというかHTML5というかJavaScriptが安定して将来も互換性を保って動作してくれて、作ったゲームを簡単に遊び続けられる時代が続いて欲しいね。

クイックソート VS 挿入ソート、ファイッ！

コードとライブデモはこちら。

アルゴリズムの王道ソートアルゴリズムでコードバトリングをしてみたかったので作った。左（赤）のコードが昇順に、右（青）のコードが降順に同一の配列をソートしようとして戦う。昇順に揃ったら左の勝ち、降順に揃ったら右の勝ち。

コードは普通のJavaScriptとして書く。以下の2つの特殊な関数がある。

  • get(i): 配列からi番目の要素を取得する
  • swap(i, j): 配列のi番目とj番目の要素を交換する

setはできない。setを許すとコード内のメモリに配列を逃しておいてソート、一気に書き込むというインチキができるから。右の降順側のgetは要素のマイナスの値が帰ってくるので、右のコードもアルゴリズム自体は昇順にするものを書けば良い。

コードは左と右で交互に実行する。実行はJS-Interpreterのstep()で行う。

コードはなるべく実行速度が速く、頻繁にswapして配列をかきまわせる方が強い。速度はJS-Interpreterのstep()の解釈粒度に依存するが、コードがコンパクトな方がもちろん速い。

クイックソートと挿入ソートだと挿入ソートの方が圧倒的にコンパクトで、配列の長さが10くらいだとその実行速度でクイックソートを圧倒して勝つことが多い。配列が長くなると多分勝敗は変わってくるんだろうけど、試していない。

ソートアルゴリズムは別のアルゴリズムが配列をいじるなんてことは想定していないので、実行が終わった時点でちゃんとソートされている保証は無い。なので実行が終わったあとは実行状態をリセットして再度実行される。クイックソートは実装によっては外部から配列をいじられると配列のバウンダリを超えた操作が発生してエラーになることもある。その場合も再実行。

で、これがちゃんとしたゲームとして成り立つかというと、どうだろう。このアルゴリズムがこのアルゴリズムに強い、みたいな三すくみ的な面白さがあるかというと、微妙だ。あとは相手方向に揃いそうだったら積極的に崩す、とかいう防御的仕組みを入れたバトリング向け特殊ソートアルゴリズムが強かったりするなら面白そうなんだけど、そういった工夫をする余地があるかなあ。

いい感じのビジュアルをランダムになんとなく作り出す

なにかを作った。めざせジェネレーティブアートジェネレータ！

screenshot

クリック／タップで別の絵を作ります。

この手のものの難しさは、

という具合に自由度を高くしていろんなバリエーションを作ろうとすると見てて面白いものができあがる打率が減って、逆に打率を上げようと面白くなさそうなものをフィルタリングしていくと自由度が低くなること。

自由度を高くするにはランダムにするものを増やせばいい。今回は座標と線の太さと色を表す数式を乱数で作った。といってもあまりに適当にすると打率が下がるから、

パラメトリック方程式

この辺に出てくる数式をぐっとにらんでよく使われてそうな関数を適当にチョイスする。今回は

a + b, a - b, a * b, a / b, 
sin(a), cos(a), exp(a), pow(a, b), noise(a), 
a > b ? c : d

を使った。noiseはp5.js組み込みのパーリンノイズ。あと、sinとcosはパラメトリック方程式に頻出しているような印象があるので多少出現頻度を上げる。

a, b, c, dのところには、

  • 上記関数を再帰的に、ただし再帰が深くなるにつれ抑制する
  • 開始からの秒数を表す変数t
  • 先頭から何番目の点であるかを表す変数i
  • 2から10のランダム整数aまたはb

のどれかを当てはめる。これで簡単にランダムな数式が作れる。

この数式をつかって点のX/Y座標、線の太さ、色（HSB）を算出する。点は10～100個用意し、その間を線でつなぐ。

あとX/Y座標の数式のパターンとして、X座標のsin, cosをcos, sinに入れ替えてY座標の数式とするという小細工を半分の確率でする。数式を作っているコードは以下。

formula.ts

打率を制御するのは難しい。面白いかどうかはコンピュータには分からないから。

まあでも画面に何も写っていないのは面白くないだろう。なので数式から出る数値を多少いじる。

X/Y座標、線の太さ、色の各点の数値の最小値と最大値を記録しておいて、それら数値が所望の範囲に収まるように補正する。X/Y座標は画面サイズの横／縦のピクセル数、先の太さは画面サイズの1/8くらいまで、色を表すHSBは0～360, 50～100, 50～100に。以下のコードのformulaRangesを使ってその辺の調整をしている。

main.ts

それ以外の調整はしてない。あとはひたすらクリック。なので現状たまに面白いビジュアルが出るのは、たまたまだね。たまたま出た面白パターンをGitHubのREADMEに置いてある。

https://github.com/abagames/folmura

こうやって何かを作る手法を、個人的にガチャ指向プログラミングと呼んでいる。ランダムに絵や音やレベルやゲームが出てくる仕組みを作って、あとはひたすら面白いものが出るまでガチャを引き続ける。プログラムを書くことなくいろんなバリエーションを得ることができるから最高に楽だ。問題は、そのガチャの仕組みを作るのが楽じゃないところだね。というかこれはプログラムパラダイムではないね。

マップを書くだけでゲームが作れる環境が欲しかった

ので、テキストでタイルマップを書くとゲームになるrj-10ってのを作った。ブラウザで遊べる。

rj-10 screenshot

これを作ろうと思ったのはPix64っていうファンタジーコンソールを見つけたから。Pix64は画像1枚を描くだけでゲームが作れる。ピクセルの色がプレイヤーとか敵とかの種別を決めているのと、矢印状のパターンを書くと矢印の方向にパターンが進むというルールを使ってゲームを作る。

Pix64 screenshot

画像を描くのすら面倒な私は単にテキストを使うことにした。以下のようなテキストを書くと、

-----------
|  v   v o|
   r   r g
|         |
|         |
|         |
|@   ^    |
 c   r
-----------

以下のゲームになる。

lv3

テキストは基本レベルのタイルマップを表しているけど、途中のrとかgとかだけからなる列は特殊で、その上の列のテキストに色を付ける働きをする（redとgreen）。

いくつかルールがある。

  • 色が付いたテキストはアクター（ゲーム内オブジェクト）になる
  • cyan, blueはプレイヤー、red, purpleは敵、yellow, greenはゴール、grayは壁
  • プレイヤーがゴールに到達するか、ゴールが無い場合は10秒敵を避ければ勝ち
  • アクター内のキャラクタがアクターの動作を規定する
  • @のキャラクタは矢印キーで操作可能
  • ^Z>nvz<Nのキャラクタは向いている方向に進み、-|/\にぶつかると反射
  • RLのキャラクタは右／左手法で壁沿いに進む
  • Fのキャラクタは隣接する別のアクターを一定時間ごとに発射する
  • 同色の隣接するテキストは一つのアクターになる
  • sfに隣接するキャラクタはその動作が遅く／速くなる

これらを駆使すると、

謎の跳ねながら実を落とす木、

lv6

かろうじてシューティングゲーム、

lv8

フラッピ鳥めいたなにか、

lv13

などを作ることができる。

まあほぼレベルエディタなんだけど、ルールを駆使することによって、ちょっと毛色の違ったレベルを作ることもできるので、かろうじてゲーム開発環境と呼べなくもない、のか？

こういったタイルマップを描くことでゲームを作れる環境って他にどんなのがあるんだろう。タイルマップのエディタが備わっているゲームはいにしえの倉庫番とかからあるけれど、

Sokoban

これはやはりレベルエディタそのもので、ルールの違う別のゲームを作れる感じはしない。

ロードランナーとか、

Lode_Runner

レベルによってパズル寄りだったりアクションゲーム寄りだったりするタイプのゲームだと、ちょっとゲームを作っている感じが出てくる。

この手のもので一番進んでいるのはスーパーマリオメーカーかなあ。

Super_mario_maker

スーパーマリオメーカーは膨大なキャラクタ＋その組み合わせを用意することでありとあらゆるギミックを可能にしている。

〇〇とisと××を組み合わせるパズルゲームであるBaba Is Youも、

Baba_is_you

レベルエディタができたらかなりのバリエーションが作れそう。これも××のバリエーションがかなりある。

作れるものの柔軟性で考えればマインクラフトのレッドストーン回路とか、Factorioの運送ネットワークとかはかなり複雑なギミックも作れるんだろうけど、あまりゲーム作り向きではなさそうな印象を受ける。

個人的な理想は、キャラクタそのもののバリエーションは最小だけど、それらの組み合わせかたは柔軟で、いろんな種類のゲームを簡単に作ることができるタイルマップ型エディタなんだけど、なかなか見つけられない。そういう感じのゲームや開発環境、どこかにありませんかね。