- Web
- Game
- Graphics
小銭へらしレジ
お釣りの小銭がいちばん少なくなる払い方を考える3Dレジゲーム。日本の硬貨と自動釣銭機つきのレジを、WebGL2で立体的に描いた。

「1,380円に2,030円出すと、お釣りは650円で3枚」という、レジ前でのちょっとした計算をゲームにしたブラウザゲームです。財布の硬貨やお札をクリックしてトレーに出し、お会計すると自動釣銭機からお釣りが出てきます。支払い後に財布に残る小銭の枚数を、考えられる最少の枚数と比べて採点し、10回のお会計の合計点を競います。財布の中身は次のお会計に持ち越されます。点数はそのまま経験値としてブラウザに貯まり、レベルが上がると「小銭の達人」「レジマスター」などの称号がもらえます。最少の枚数は、手持ちの硬貨の出し方をすべて調べて求めています。お釣りの硬貨は払った額の1000円未満の部分だけで決まるので、お札は「足りるかどうか」だけを見ればよく、探索は硬貨の組み合わせだけで済みます。描画は3Dライブラリを使わず、WebGL2とGLSLで直接書きました。1円から500円までの6種類の硬貨は、図柄・文字・ふちの高さをCanvasで描いた高さマップからシェーダーで凹凸を出し、アルミ・黄銅・青銅・白銅・新500円の2色の地金を金属の反射で描き分けています。50円・100円・500円は側面のギザも再現しました。影はシャドウマップ、金属の映り込みは天井の照明パネルを式で表した店内の環境光で作り、効果音もWebAudioで合成しています。
「小銭が減る」をどう採点するか
お釣りの工夫は、払う額を少なくすることでも、お釣りを少なくすることでもなく、支払いが終わったあとに財布に残る小銭の枚数を減らすことです。そこで採点は「支払い後の財布の硬貨の枚数」だけを見ています。お札の枚数は数えません。
財布の中身は次のお会計に持ち越すので、1回ごとの最適な出し方を続けていても、財布の状態によって次の問題の難しさが変わります。お金が少なくなったら、ATMで3,000円おろしてきた扱いにして千円札を補充しています。
最少の枚数を全探索で求める
お釣りは枚数が最も少なくなるように大きい金種から渡すので、お釣りの硬貨は「払った額 − 値段」の1000円未満の部分だけで決まります。1000円以上の部分はすべてお札で返ってくるからです。
このため、お札は合計が足りるかどうかにしか効きません。硬貨の出し方だけを全部並べ、それぞれで足りない分を最小のお札で補ったときの「支払い後の小銭の枚数」を比べれば、最少の出し方が求まります。手持ちが数十枚程度なら、組み合わせは数万通りで一瞬です。
- 同じ枚数になる出し方が複数あるときは、渡す枚数が少ないものを模範解答として表示
- 同じ硬貨を21枚以上出すとお店が受け取りを断れる(通貨法)ため、ゲームでも1回20枚までに制限
- 値段は商品を1〜4点選んだ合計で、10円単位でちょうど割り切れる額は出さない
硬貨の凹凸は高さマップから作る
硬貨は円柱にふちの面取りと穴を加えた形で、表と裏の模様はポリゴンでは作っていません。若木・稲穂と歯車・平等院・菊・桜・桐の図柄と文字を、Canvasに明るさ=高さとして描き、少しぼかしてテクスチャにしています。
シェーダーではこの高さの傾きから法線を求め、光の当たり方を変えて凹凸に見せています。低いところほど暗く、少し曇らせているので、図柄のくぼみに汚れがたまったような見た目になります。10円玉は低いところほど色を沈ませて、使い込んだ青銅の感じを出しました。
50円・100円・500円の側面のギザは、側面の法線を周方向に波打たせて表しています。新しい500円玉は、外周のリングと中心で地金の色が違うので、テクスチャのもう1つのチャンネルに「どちらの金属か」を持たせています。
金属らしく見せるための光
金属は自分の色をほとんど持たず、まわりの景色を映して色が決まります。そこで店内の天井に並んだ照明パネル、白い壁、棚の明かりを式で表した環境光を用意し、反射の向きから明るさを求めています。ざらついた面ほど、ぼかした環境光を使います。
直接の光はGGXの鏡面反射で計算し、影は2048×2048のシャドウマップで落としています。硬貨は薄いので、影がずれて浮いて見えないよう、影の判定位置を法線方向にわずかにずらしています。
トレーに落ちる、釣銭機から出てくる
硬貨をトレーに出すと、放物線を描いて回転しながら飛び、落ちたあとは傾きが小さくなりながら首を振るように揺れて止まります。置き場所は、ほかの硬貨とできるだけ重ならない場所を探して決め、重なったときは下のお金の上に積みます。
お会計では、預けた硬貨が釣銭機の上の投入口へ、お札が紙幣口へ吸い込まれ、少し待ってからお釣りの硬貨が下の受け皿から1枚ずつ飛び出してトレーに落ちます。硬貨が当たる音は金種ごとに高さと響きを変えた音をWebAudioで合成していて、釣銭機のモーター音やレジの「チーン」も音声ファイルなしで鳴らしています。