「ゲームを作る」には「ゲームの作り方」を知ればよい。

この記事は読むのに３０分から６０分ほどかかります。
小学校の高学年以上が推奨です。

#はじめに
あなたは「ゲームの作り方」を知っていますか？

「ゲームの作り方」を知らない人は、ゲームを作りたいと思ったときに大抵はプログラミングの勉強を入り口にしますが、「ゲームプログラミング」と呼ばれているものは、通常の「プログラミング」とはちょっと毛色が違ったり、難易度もそれなりに高いことから、独学でやるとハードルの高さに挫折することがしばしばあります。また、モノによってはそもそもプログラミングが必須ではないこともあるため、目的が明確じゃないうちから勉強を始めるのはお勧めしません。どこまで勉強すれば良いんだろうという気持ちで勉強するのはかなり辛いです。

「ゲームの作り方」を知っている人は、ゲームを作るために自分にはあと何の知識が足りないかが分かるため、足りない部分を自分で調べるという行動に移ることができます。もしかしたらそれが「プログラミング技術」かも知れないし、「ツールの使い方」かも知れないし、「英語力」かも知れませんし、「数学」かもしれません。結果的にプログラミングに辿り着いたとしても、何を作ろうとしているのか目的が明確であればゴール（終わり）が見えるので、モチベーションも維持しやすいでしょう。
![sick_noiroze_man_s2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172479/b1c8e2e4-b3ed-dd1b-9e07-aec377cc3590.png)
別に技術を先に学んでも良いのですが「ゲームを作る」のであれば「ゲームの作り方」を知ってから行動するのが一番の近道です。内容もいたって簡単です。この記事では「ゲームを作る」という入り口に立つために、そもそも「ゲームとは何なのか」「ゲームはどのようにできているのか」を説明します。

この記事が面白かったという人はプログラミング言語の本を買うついででも良いので、ゲームの作り方の本を１冊探してみて下さい。学術書とは違ってただの読み物だったりするので、より好奇心が湧いたりします。

#の前に
実話ですが、私の同僚のエンジニア（情報工学系の大学で６年間勉強し、エンジニア歴も数年、プログラミング言語も３言語くらい知ってる）がある日私にこう尋ねてきました。「ゲームってどうやってできてるのか全く分からない。なんでキャラが動くの？」と。その人が特別にできない人かというとそんなことはありません。むしろエンジニアとしては超優秀でした。
学生時代を含めれば、私の周囲でプログラミングの勉強をしてた人は４００人くらいいたことになるのですが、その中でゲームを作れた人は１０人くらいでした。何が言いたいかというと、プログラミングを身に付けて、手に職を持っていたとしても、ゲームの作り方を想像すらできないという事です。

この記事を読むと、そんな人達の知識を６０分以内で超えることができます。

#例え話
今から「ゲームとは何なのか」について、例え話を「３つ」します。まだ２つしか思いついてないですが、３つと言ってしまったので書きながら３つ目を考えます。

#その１．ゲームとはパラパラ漫画である
「ゲームはパラパラ漫画のようにできている。」と考えると幾分か理解しやすくなります。ところで「パラパラ漫画」はご存じでしょうか？
下のような教科書の端にイタズラ書きしてた棒人間のことです。教科書に絵を<font color="Red">__描いて__</font>、ページをパラパラと指で<font color="Red">__めくる__</font>と棒人間が走り出して水たまりに足を突っ込んで水しぶきが上がるというやつですね。
![parapara1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172479/293047c0-c5ae-400e-c591-1c612e926857.png)
パラパラ漫画とゲームには共通点があります。

- パラパラ漫画
描く⇒描く⇒・・・⇒めくる⇒めくる⇒・・・

- ゲーム
描く⇒めくる⇒描く⇒めくる⇒・・・

実はゲームも絵をパラパラとめくっています。
パラパラ漫画の場合は絵が全部描きあがっているため、あとはパラパラとめくるだけで絵が動いてくれますが、ゲームの場合は、１コマ１コマ描いて、めくって、描いて、めくって、を頑張ってやっているんです。順番が違うだけでやっていることは全く同じなんですね。

#その２．ゲームとは動画である
「ゲームは動画のようにできている。」と考えると幾分か理解しやすくなります。ところで私の身の回りには動画を編集している人がたくさんいるので、動画編集をするつもりでゲームを説明してみます。動画編集を知らなくても簡単なことしか書かないので大丈夫です。

動画は「画像（静止画）」をたくさん並べて「動かす」から動画という名前が付いているのですが、ようするに「静止画」を「パラパラ」とスゴイ早さで写し変えているところはパラパラ漫画と一緒です。
これだけだとパラパラ漫画と同じ説明なのでここから話を変えますが、動画はさらに編集によって、テロップ（字幕）を入れたり、タイトルロゴの画像を上から「ビヨヨ～ン」と登場させたりしています。
下のようなやつです。
![douga1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172479/b75f305c-f8c3-5635-c2ed-39a48f97da96.png)
このとき、テロップやテロップの横の顔、タイトルロゴを描く場所を左上から数えていくつ目などと指定します。「ピクセル」という単位で表現しますが、画像をめちゃめちゃ拡大したときの最小単位で粒々何個分みたいな数え方です。
![parapara4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172479/ab481ba8-2fe4-8555-05ff-be87a154d5e3.png)
例えば、左から 50 ピクセル、上から 800 ピクセルの位置に顔の<font color="Red">__画像を貼る__</font>、などと数字を決めたりします。パラパラ漫画でいうと、顔をノートの左から１ｃｍ、上から１０ｃｍの場所に描く、みたいなことです。仮に左側や上側を一番小さい数字の 0 から始まるとするならば、数字が大きければ大きいほど画像は右側、下側にぺたっと貼られるわけですね。

あとはタイトルロゴをいつ「ビヨヨ～ン」と出すかそのタイミングを決めることもできます。例えば、静止画の101枚目から180枚目まで「ビヨヨ～ン」として、181枚目～200枚目は真ん中に止めておこう。などと決めます。この画像１枚１枚のことを「フレーム」と言います。パラパラ漫画でいうと教科書やノートなので「ページ」と同じ意味です。
ちなみに映画やアニメのフィルムアニメーションは１秒間に２４フレーム、ゲーム機は大体<font color="Red">__１秒に６０フレーム__</font>くらいパラパラめくります。パラパラ漫画で１秒に６０ページもめくるとものスゴク滑らかに漫画が動きます。

これらの「いつ」「どんなことをするか」を時系列で表すと、たまに動画編集者さんが SNS で「動画編集中です。頑張ってます。」って言ってあげてる四角い箱が並んだあの画像になります。「動画編集　画面」などと Twitter で調べてみて下さい。
![tv_video_hensyu.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172479/e5018583-b6e4-0c0b-9859-f42908e9a783.png)
拡大するとこんな感じです。
![parapara6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172479/610bd8e4-9c8a-e7b8-626a-d4346e03ec5a.png)
この、テロップを<font color="Red">__表示する位置__</font>を決めたり、<font color="Red">__いつ～いつまで__</font>タイトルロゴを表示させるのかをフレーム毎に考えると１つの動画ができるんですね。
ちなみにどうやって「ビヨヨ～ン」とやっているのか興味がある人は、将来、動画編集ツールの使い方を勉強してみて下さい。
ゲームも同じように、どの場所にどうやって画像を貼ろうかなぁなどと１フレームずつ考えて、キャラクターが動いているんです。

#その３．ゲームとはドライブのことである
「ゲームとは車に乗ってドライブに出かけることである。」と考えると幾分か理解しやすくなります。免許を持っていない人は助手席に乗ったつもりで読んで下さい。（というかドライブのゲームもありますからね。）
![game_driving.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172479/f823b38b-df6a-f5ae-d0ab-2c8aee60d364.png)
ゲームは画面に写った映像を見ながらコントローラーを操作しますが、車を運転するときにはフロントガラスやミラーに写る景色を見ながら、ハンドルを右へ左へ回したり、アクセルを踏んだりします。動画やパラパラ漫画のように見ているだけではなく、インタラクティブに自分の行動が景色に反映されるところがゲームとドライブで似ているところですね。

ドライブの話で何が言いたいかというと、ドライブ中は色々なイベントに遭遇するということです。例えば「雨が降ったり」「雷が落ちたり」「ネコが飛び出してきたり」します。
雨が強くなってきたら「ワイパーのボタンを押し」たくなります。もし近くで「雷が落ちる」とその音でびっくりして「ネコが飛び出してきた」りします。そのとき全力でブレーキを踏んだりハンドル操作をするでしょう。恐らく、貴方の足と手が一番早く動くのはそのときです。

仮にあなたの足と手が 10 ミリ秒（0.01 秒）で動かせたとしましょう。
時系列で書くと次のような感じになります。
![parapara5_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172479/b9290834-5c14-c0c5-5905-c915892045ca.png)
これをざっくり説明すると、<font color="Red">__10 ミリ秒に 1 回__</font>くらいの早さで<font color="Red">__ハンドルやブレーキを操作__</font>して、その結果、<font color="Red">__車を動かした__</font>り止めたりできるということです。そして、たまに<font color="Red">__雷が落ちた__</font>りイベントが起きます。
ちなみに、車を動かしているのは運転手ですが、<font color="Red">__猫を動かした__</font>のは運転手では無く、たまに落ちてくる雷ですね。

自分で何かを操作したり、自分で何もしなくても勝手に色々なイベントが起きたりと、ゲームと何か似ていますね。
ちなみにハンドルを右へきると、なぜタイヤが右に向くのか知りたい人は、将来、機械科などの学校で車の作り方を勉強してみて下さい。

#そろそろゲームの説明
例え話が３つ終わったところで必要な単語が揃ったので、そろそろゲームについて説明します。ここから少しずつゲームの話になってくるので、頑張って着いてきて下さい。
単語については例え話の中で<font color="Red">__赤文字__</font>にしておいたので、どこで出てきたか忘れた人は振り返って読んでみて下さい。
![videogame_boy_s.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172479/cf539776-3d5d-2e4f-55ce-a06d6575e74a.png)
ここで約束事が１つあります。車のハンドルと同じように、ゲーム機にはコントローラーが付いていますね。パソコンのキーボードでも良いです。ボタンを押すと、何やら得体のしれない信号が出てきて、ゲームはどのボタンが押されているかをものスゴイ早さで調べることができます。ですが、車のハンドルやタイヤと同じように、ここでゲーム機の原理を知る必要はありません。とにかく、あまりゲーム機の原理についてこだわらずに、押されたボタンを調べることができる、と思ってこの先を読んでみて下さい。
![game_controller_s.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172479/653d4320-a850-cf28-3a15-60abf593d309.png)
では、いきなり「ゲームとは何なのか」を先に言ってしまいますが、ゲームも実は動画と同じように、1 秒で 60 フレームくらいパラパラと画面をめくっているのですが、そのついでに、コントローラーの何が押されているのかも頑張って調べています。もし右ボタンが押されていたら車の画像を貼る位置を右に１００ピクセルずらしたりしています。つまり、ドライブと動画編集の説明を同時にしながらパラパラすれば、ゲームができるんです。たったのそれだけです。

ということで今までの例え話を時系列でまとめて書くとこんな感じです。
![parapara7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172479/7e7fc5ff-6188-4dda-a299-88aea095e179.png)

__・押す → 動かす → 描く → めくる →・・・__

例え話３つを全部混ぜてみました。出てきた単語は４つですが、この４つを 1 秒に 60 回くり返すことでゲームができています。
押されたボタンの調べ方や画像を貼る原理を今知る必要はありませんが、仮に 2D の画像を貼れば 2D のゲームができます。同じように、3D のポリゴンを貼れば 3D のゲームができます。ほとんどのゲームの基本はこれです。シューティングゲームも格闘ゲームもアクションゲームも全てこれです。

ここで、今まで出てきた単語を説明しやすいように私なりに４つに分類してみました。この４つについて、この後詳しく説明します。

- 描く
<font color="Red">__「描く」「表示する位置」「画像を貼る」__</font>

- 押す
<font color="Red">__「１０ミリ秒に１回」「ハンドルやブレーキを操作」「雷が落ちる」__</font>

- 動かす
<font color="Red">__「車を動かす」「猫を動かす」__</font>

- めくる
<font color="Red">__「１秒に６０フレーム」「めくる」「いつ～いつまで」__</font>

#休憩
ここで少し力尽きました。

#描く
約束事ですが、ゲーム機に絵を描かせる原理を今知る必要はありません。将来、プログラミングの本を読んでいればきっと出てきます。

ゲーム機には「ドラえもんの絵を描いて」と言ったら書いてくれる機能はありません。ゲーム機に絵を描いてもらうためには、かなり細かく指示をしてあげる必要があります。動画編集のときにも説明しましたが「ピクセル」という単位と数字を使うことで、簡単な図形なら描いてくれます。

例えば、左から１００ピクセル、上から５０ピクセルの場所を「左上」として大きさ１００の四角を描いて、と言えば「左上」が（１００，５０）、「右下」が（２００，１５０）の白地に黒線の四角が描かれたりします。
四角の代わりに赤色の円と言えば、さっきの四角に内接する大きさの円が描かれ、円の代わりに青色のペンで線と言えば、先ほどの四角の大きさで斜めの線が引かれます。
![kaku.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172479/18cd1c82-3120-9883-a720-ce363214d175.png)
こんな感じで「左上」を基準に説明をすることが多いのですが、これは慣例であって必ずそうかというとそういう訳ではありません。ゲームを作る人によっては「真ん中」を基準に作ることもありますし「左下」だったりもします。
また「ドラえもんの絵を描く」ことはできませんが「画像を貼る」ことならできるので、あらかじめ歩いている画像をたくさん用意しておけば、それらの画像をパラパラと切り替えることで歩いているように見せることもできます。もちろんそのときにも、左から１００ピクセル、上から５０ピクセルの場所に「歩いている人①」の画像を貼ってと言えばよいです。

さて、「描く」「画像を貼る」という言葉は直感的に分かるかも知れませんが、「表示する位置」というのはなかなか分かりにくい言葉だと思います。
先ほどから説明しているように「ピクセル」という単位で指定した数字が増えれば増えるほど、画像が右に動くことが分かったとしても、そもそも「左から１００ピクセル」だったものを「左から１１０ピクセル」に増やすには具体的にどうしたら良いのでしょう？
![olympic26_basketball_s2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172479/1fc9144c-31aa-4d64-0300-f4e7da505db2.png)
動画であればタイトルロゴが出る位置は見る度に変わったりしないので、動画編集ツールに「１００」などと書いておけば良いですが、ゲームの場合は右に動いたり左に動いたりします。左に動かすとしたら「９０」と書かないといけません。
実はここで初めて知識が必要になります。「算数」です。とはいえ小学校高学年で習う「変数」の知識があれば理解できます。

この記事のタイトルを改めて見て下さい。「<font color="Red">__ゲームを作る__</font>」には「<font color="Red">__ゲームの作り方__</font>」を知ればよい。です。ちょっと隠すとこんな感じになります。「<font color="Red">__〇〇__</font>」には「<font color="Red">__■■__</font>」を知ればよい。
変数というのはこの「<font color="Red">__〇〇__</font>」や「<font color="Red">__■■__</font>」のことです。どんな文章なのかまだ決まっていないので、後からここに好きな文字を入れることで別の文章にすることができます。

同じようにさっきの「表示する位置」の話も変数を使って表現するとこうなります。
「左から<font color="Red">__〇〇__</font>ピクセル」です。
ここに何か好きな数字を入れると「左から<font color="Red">__１１０__</font>ピクセル」になったり「左から<font color="Red">__９０__</font>ピクセル」になります。
![olympic26_basketball_s.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172479/d5f3a76e-f6e1-f653-1a7b-4a5058b38509.png)
ゲーム機にはこの変数を計算する仕組みがついています。<font color="Red">__〇〇__</font>を好きな数字にしたり、10 を足したり、10 を引いたりできます。
ここでは変数の使い方までは説明しませんが、変数を使っておけば、いちいち書いた台本を直す必要はありません。
「左から<font color="Red">__〇〇__</font>ピクセル」と書いておいて、あとから好きなように計算してあげれば良いでしょう。ついでに、画像の名前も変数にして「ドリブルする人<font color="Red">__①__</font>」「ドリブルする人<font color="Red">__②__</font>」「ドリブルする人<font color="Red">__③__</font>」などとしておけば、左右に動きながらバスケットボールでドリブルする人が描けます。

以下のことをやれば格闘ゲームっぽい絵になりそうです。

- 背景の画像を左上から(0, 0)の場所に貼る
- キャラクタ①の画像を<font color="Red">__〇〇__</font>に貼る
- キャラクタ②の画像を<font color="Red">__◇◇__</font>に左右反転させて貼る
- キャラクタのHPゲージの背景を左上から(100,100)の場所に貼る
- キャラクタ①のHPゲージを<font color="Red">__◆◆__</font>の大きさの四角で塗る
- キャラクタ②のHPゲージを<font color="Red">__■■__</font>の大きさの四角で塗る

![kakutou_game_polygon_s.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172479/b8a7fadb-8313-d0a9-65da-c757b7cb2a64.png)
ちなみに、キャラクタの画像を貼る位置をいつ計算してあげれば良いかというと、例えば「コントローラーのボタンを押したとき」に計算してあげれば良いんですね。

#押す
コントローラーのボタンを「押す」と得体のしれない信号が出るのですが、ゲーム機やゲームを作る方法によってこの信号の取り扱い方が大きく２種類に分かれます。１つは「自分で調べる」方法で、もう１つは「教えてもらう」方法です。どちらの方法も将来プログラミングの勉強などをしてくれれば良いので今はそういうものだと思ってください。
![parapara7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172479/7e7fc5ff-6188-4dda-a299-88aea095e179.png)
この絵によると、ゲームは１秒に６０回絵を動かしたり描いたりしてるという話ですが、そもそも人がコントローラーを操作する速度はどれくらいなんでしょうか？１秒に６０回でしょうか？
実は絵では「４つのことを繰り返している」というためにわざと簡単に書いたのですが、コントローラーを操作するタイミングは人によってバラバラですし、１秒に６０回などとも決まっていません。

例えばですが、タイピングソフトの平均入力速度は普通の人で秒間３～６打、上級者で秒間６～１０打ですが、「ふぃ」や「じゃ」をローマ字打ちで入力するときの「ｆ」「ｉ」を順番に入力するときなどは瞬間最高速度で秒間１００～２００打くらい出るらしいです。つまり、ゲームのパラパラする速度より早いこともあるのです。
![parapara8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172479/231f5692-68c5-27a9-dd91-1427391fa9cc.png)
少し書き直しました。１回パラパラする間に複数回ボタンを押すこともあるし、押さないこともありますし、押すタイミングも違います。「動かす」と「動かす」の間に押されたボタンを全部まとめて、次の「動かす」のときに対応してあげることにしました。

ここから先はゲームを作る人の腕の見せ所です。最初に書いた通り、ボタンの信号を取り扱う方法は「自分で調べる」「教えてもらう」の２種類あります。

「自分で調べる」方は、「動かす」前などに１回調べればよいです。つまり１秒に６０回決まったタイミングで定期的に調べればよいので考え方はシンプルです。しかし、２つのボタンを素早く押したときに、<font color="Red">__どちらが先に押されたか分からない__</font>ケースや、調べる前にボタンが既に離れていると、<font color="Red">__押されたことを見逃す__</font>こともあります。
そのため、押された順番や押された時間が信号として記録されている場合や、１秒６０回よりもっともっと早く調べることができる場合、もしくは、そもそもボタンの入力がゆっくりとしたゲームや、ボタンの同時押しが必要無いゲームであれば大きな問題にはなりません。
また、ゲーム機の性能の違いなどが問題にならないように意図的に１秒に６０回しかボタンを押せないようにしているケースもあります。また、ゲームを作るツールによってはそもそもこの方法しか選べないこともあります。

「教えてもらう」方は、押されたことを見逃すことがありません。教えてもらったときに「押したボタン」を記録しておけば、記録を後から見返すことで押した順番も分かります。
記録しておくには、<font color="Red">__〇__</font>番目に押されたボタンは<font color="Red">__●●__</font>、<font color="Red">__◇__</font>番目に押されたボタンは<font color="Red">__◆◆__</font>、などの変数を使っても良いですが、一般的にはキューと呼ばれるものを使います。
キューというのは日本語で「待ち行列」のことで、レジで並んでいるお客さんのことです。キューは「<font color="Red">__一番後ろに並ぶ__</font>」「<font color="Red">__一番前から取り出す__</font>」の２つしか意識する必要が無く、<font color="Red">__〇__</font>番目という数字を意識しない特徴を持っています。これを使えば、押したボタンをどんどん最後尾に並べていけば、あとは一番前から順番通りに対応していけば良いのです。ですが、今キューの使い方を知る必要はありません。
![gyouretsu.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172479/936190e7-75e9-d32e-fa66-6d751923ea7f.png)
さて、押されたボタンを全部まとめて、「動かす」タイミングで調べて対応してあげるのが「押す」の説明となりますが、実はボタンを「離す」ことも１つの行動だったりします。ボタンを一度も離していなければ「押しっぱなし」ということもあります。マウスであれば「クリックした」ままマウスを動かすと「ドラッグする」というアクションにもなります。
これらのアクションは「イベント」という用語で呼ばれることがあります。「イベント」の中には「一定時間経過した」というものや「ウィンドウの×ボタンを押した」などもありますが、ここではその話はしません。将来、プログラミングの本できっと出てきます。

#動かす
ものを動かすには「算数」や「数学」や「物理」の知識が必要になりますが、一番簡単な「算数」で頑張って説明してみましょう。

基本的にはこれまでの説明で出てきた「変数」を使って「１０」増やしたり、「１０」減らしたりすれば「ドリブルする人①」の画像が左右に「１０」ずつ動きます。
![olympic26_basketball_s.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172479/4fc88ef6-590e-2d69-4256-5823182f71aa.png)
しかし、某有名ゲームで出てくるキャラクターは「Ｂボタン」を押しながら「右キー」を同時に押すと「Ｂダッシュ」という技で「ゆっくりした走り」から「素早い走り」に「加速」します。「Ｂダッシュ」をすると一定時間で最高速度となり、それ以上は加速しません。
![pose_hashiru_guruguru_man_s.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172479/4a333a80-9dec-19df-f158-561e4721a70a.png)
さて、このとき画像を表示する位置が「１０」ずつ増えているかというとそうではなさそうです。徐々に早くなっていくということは、最初は「１」、そして「２」、最後にやっと「１０」ずつ、徐々に増えているのです。
これを表現するには数字を全て変数にしてしまいましょう。今までは「１００」に「１０を足す」「１０を引く」で右に左に動かす説明をしていましたが「〇〇」に「△△を足す」「△△を引く」と表現するとどうでしょう。「△△」は最初は「１」、もし「Ｂボタン」と「右キー」を「押しっぱなし」だったら「△△」を「２」にしたり「１０」にしたりすれば、徐々に加速しそうです。ボタンを「離した」ら「△△」を「１」に戻せば良さそうです。
この「１」「２」「１０」をなんとなくイイ感じに調整すれば「物理」を知らなくても、走ってる風にキャラクターを動かすことができます。キャラクターを動かすにはとにかく「変数」がいっぱい必要です。
![pose_hashiru_guruguru_man_s2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172479/63f937da-c955-c173-2d1f-a7bfbf24ade4.png)
またゲームには、壁にぶつかったらそれ以上右へ進めないようになったり、パンチが当たったら痛そうな顔をしたりするゲームもあります。これらは「衝突判定」といって「絵」と「絵」が重なったかどうかを調べることで実現しています。ゲーム機は変数の計算をすることもできるのですが、変数と変数の大きさを比較することもできます。
その方法について今知る必要はありませんが「大きかったら〇〇する」「小さかったら何もしない」のように「〇〇する」ことに対して条件をつけることができます。

下に涼し気な顔をした２人の男性がいますが、実は彼らは今非常にギリギリの戦いをしています。彼らの腕、顔、身体には画像を「表示する位置」に対して、どのあたりに「顔」があって、どのあたりに「腕」があって、どのあたりに「身体」があるという情報が変数で記憶されています。もちろん、位置以外にも「腕の大きさ」がどれくらいの大きさの四角形なのかも記憶されています。
![osyaberi_man_s.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172479/aabadf5c-6d63-9923-69dd-aee249e11926.png)
仮にですが右の画像で「赤四角」を「攻撃するときに使う四角」、「青四角」を「攻撃されるときに使う四角」だとしましょう。このとき、自分の「赤四角」と相手の「青四角」が重なっているかどうかは、それぞれ四角の位置と大きさを比較すれば分かります。
もし重なっていたら、
![kids_kenka_s.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172479/e2347f92-d3d2-ef5a-bd57-42d3cc6e3bcf.png)
「涼しい顔をした青年①」という変数を「痛い顔をした青年①」に変えましょう。ついでに殴られた方の HP ゲージを記憶している変数の数字を減らしておけば、次に「絵を描く」タイミングで HP が減るでしょう。こんな感じで、「絵を描く」のは「絵を描く」ところに任せておいて、ここでは「押したボタン」や「離したボタン」や「何もしない」ことによって何が起きるかをどんどん調べて、ただひたすらに「変数」を計算したり「比較」したりしていけば良いのです。

※余談ですが、格闘ゲームでは「攻撃するときに使う四角」「攻撃されるときに使う四角」は非常に重要な要素になります。例えば、右側の青い服を着た青年は「右手小指」と「左ひじ」が「攻撃されるときに使う四角」に囲まれていません。つまり、この青年は「右手小指」と「左ひじ」が無敵なんですね。


#めくる
ところで、ゲーム機はスゴイ機械なので、スゴイ早さでページを描いたりめくったりできます。どれくらい描いてめくれるかと言うと、1 秒間に 60 ページ以上はめくれます。もしかしたら 120 ページや 144 ページや 360 ページくらいめくれるかもしれません。このめくる速さを「フレームパーセコンド：FPS」と言います。
ちなみに「めくる」って何でしょう？めくったら何が起きるんでしょう？取り合えず画面全体に真っ白（真っ黒）な画像でも貼っておきましょうか？そうしましょう。
![tv_panel_quiz_woman_s.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172479/7dd2c0ca-fb29-dff3-c3fa-fba3bb6a6616.png)
では話を続けます。仮にゲーム機に 60 FPS という性能があったとしましょう。このときパラパラ漫画の 1 ページ辺りは何秒になるでしょう？
答えは 0.016666666・・・秒です。業界用語でいうと 16 ミリ秒です。ではこの 16 ミリ秒の間隔を空けつつ、実際に 60 ページの絵を描いたりめくったりしたら 1 秒間（1000 ミリ秒間）かかるのかやってみましょう。
![parapara2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172479/b6109b16-9367-807e-3289-aaea3a94ef1c.png)
ちょっとずれてますが、なんとなく 1 秒間に 60 ページくらいパラパラ漫画をめくれた気がしますね。
ただ、当たり前ですが、666666・・・のところを省略したので、右端が 40 ミリ秒だけ足りませんでした。これでは 1 秒の間にもう 2 ページめくれるので 62 FPS になってしまいます。「じゃあ 1 ページはいつめくればいいの！」と怒りの声が聞こえてきそうなので、もうちょっと頑張って考えてみましょう。
実は上の絵で「描く（赤い箱）」と「めくる（青い矢印）」時間の間にすこし隙間を空けておきました。何ミリ秒かは分かりませんがとにかく隙間があります。実際問題、ゲーム機にはスゴイ性能があるからといっても、描く絵の量が多かったりすると何秒でかけるか分かりません。
なので、描き終わる時間をストップウォッチで測って、期限ギリギリまで待ってからページをめくりましょう。そうすれば、59 ページ目は 984 ミリ秒でめくる。60 ページ目は 1000 ミリ秒でめくるという調整ができそうですね。
ちなみに期限がいつかというと「1000 × ページ番号 ÷ 60」で計算できそうですね。ゲーム機はスゴイのでストップウォッチも付いていて計算もできます。これでズレていた時間も解決したような気がします。

ところで、早く描き終わったら期限ギリギリまで待つのは良いとして、期限より遅かったらどうしましょう？さくっと描いてしまいましょうか？ということでルールをこうしてみましょう。

- 期限まで時間があったら期限ギリギリまで待ってからページをめくる
- 期限を過ぎていたらとにかくページをめくる

これでパラパラしてみましょう。
![parapara3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172479/1bdaafd5-76c7-21de-28a9-67e237bf3c34.png)
このルールだと問題がありそうです。1 ページ目がとても大変だったみたいで 1 秒のほとんどを使ってしまったので、残りの 59 ページをスゴイ早さでめくることになってしまいました。これでは早すぎて何が起きたのかパラパラ漫画では分からないでしょう。一瞬止まった後にものスゴイスピードでドリブルするバスケットボール選手が見えるかもしれません。ですが、恐らく早すぎて見えずにボールは止まったままでしょう。

ここから先はゲームを作る人の腕の見せ所です。この遅れた状態「借金」を返す方法には色々あります。少なくとも「借金」を１秒以内に返す方法は上手い方法では無さそうですね。ということで、

- 遅れた時間を取り返さない
- 遅れた時間をゆっくり返す

について説明します。

「遅れた時間を取り返さない」場合には、<font color="Red">__過ぎた時間__</font>の分、次の期限を遅らせるという計算をやるだけです。「1000 × ページ番号 ÷ 60 ＋ <font color="Red">__過ぎた時間__</font>」とでもすれば良いでしょう。とても簡単です。
しかしこれによって、<font color="Red">__現実の時間__</font>と<font color="Red">__ゲーム内時間__</font>が徐々にずれていきます。時間がズレることで困ることがあります。
例えば性能の悪いゲーム機でプレイすると、ゲーム画面がゆっくりと動くので、正確な動作を求められるゲームで有利になったりします。また、オンラインゲームなどで、同じゲームをしているはずなのに他人と時間がズレていくのは変ですね。そういうゲームはどこかで必ず時間を取り返しています。

「遅れた時間をゆっくり返す」場合には、返すまでの期間を１秒ではなく、長い時間に分けてちょっとずつ返します。例えば、６０００ミリ秒（＝６秒）の借金を６０００フレーム（＝１００秒）で返すのであれば、１フレームあたりの借金は１ミリ秒です。これなら目立たずに返せそうです。ですが、本当に返せない大きさの「借金」を返すには１００秒に分けても目立つので、その時にはすっぱりと諦めて「返さない」こともできます。つまりゲームを作る人の腕の見せ所な訳です。

今までの話をまとめて「遅れた時間をゆっくり返す」場合を時系列で書くとこんな感じです。
![parapara9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172479/b633d8ac-3e17-2f22-dadd-16692fec9245.png)
ここで「描く」部分が遅れている場合は、ゲーム機の描く部分である「GPU」の性能が足りていないことになります。その場合は、描く量を減らしてあげればよいため「解像度（画面の大きさ）」を小さくしたり、色々なエフェクト（光ったり、もやもやしたり）をやめたりすることで遅延が解消されます。また、3D のゲームであればポリゴン（立体を形作る三角形の集まり）の数を減らしてあげればよいです。
ひと昔前は格闘ゲームで「あなた何ポリゴンなの？私は３０万ポリゴンの女よ。」などのネタが流行ったりしていましたが、最近のゲーム機は背景に数億ポリゴンを使っていたりと、普通のゲームであれば GPU が問題になることは無くなってきています。

また「動かす」部分が遅れている場合は、ゲーム機の考える部分である「CPU」の性能が足りていないことになります。この場合「描く」ことと違って解消するのが難しかったりします。本来やらなければいけない計算を省略するということは動きが変わってしまうからです。
ただ、ゲームを作る人にとっては腕の見せ所だったりするので、その問題を解消することが楽しいと感じることもあります。
![computer_cpu_s.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172479/b49ab4a7-9210-a2ea-88ce-38ff6ebdcaa6.png)

#まとめ
ゲームは「<font color="Red">__押す → 動かす → 描く → めくる →・・・__</font>」を繰り返すことでできていることを説明しました。

使われている知識は最小限に留めれば「押されたボタンを調べる」「変数の計算」「画像を貼る」「繰り返す」ぐらいです。他にも考えることはたくさんあるのですが、これくらいなら勉強できそうな気になってきませんか？
もし将来、プログラミングを全てツールに任せられるようになったとしたならば、ゲームを作るために必要なのは、技術力ではなく「センス」や「発想力」です。「どんなゲームをどうやって作ろうかな。」という日本語で考える部分に多くの時間をかけれるようになれば、面白いゲームもたくさん誕生するかもしれません。

ということで「ゲームの作り方」が知りたくなった方は本屋さんで探してみて下さい。もちろん、プログラミング自体は色々なところで役に立つので、何を勉強すれば良いのか明確になったら、是非全ての人にチャレンジしてみて欲しいと思っています。

#あとがき
力尽きて最後失速しました。後で改訂するかもしれません。

一度ゲームを作ったことがある人はゲームをプレイするときに「このゲームどうやって作るのかな。」と考えて頭の中でゲームを作るようになります。こういうのを「カラーバス効果」というそうです。朝のニュースで色占いを見た後には街並みの色が気になったり、ベビーカーを押していると、周囲に赤ちゃんを連れた親子がたくさんいることに気付いたり。

私は小学生のころからそうだったので「くにおくんシリーズ」をやるたびに、こうやれば作れそうだな。などと考えながら２０年以上生きてきました。そして、そのうち「このＭＭＯはこうできている。」「この RTS はこうできている。」「だからこう行動すれば最善である。」と、ゲームを作ったつもりになって解析することで、有利にゲームを進めたりできることが人生で数回ありました。
ということで、みんなもゲーム作ってみよう。