7月17日に「おしっこ忍者」という赤ふん一丁＆おしっこで戦う忍者のアクションゲームを公開しました。
その開発のことを振り返って適当にたらたら書いておきます。
最初のアイデア
ゲーム制作に入るときに最初にtweetしたのがこちら。
男なら一度はこれで戦ってみたいと思ったことがあるはず！！ pic.twitter.com/OrL8ZikYHQ
— いんわん (@inwan78) 2021年6月22日
実はこういう感じに放物線を描くような武器で戦うゲームは前から作ろうと思ってて、その時は石とか何かを投げながら戦うみたいなのを考えていました。
ただね、そうすると「石ってどこから出てくるの？」という疑問がずっとあって、別にゲームだからそんなことはどうだっていいはずなんですが気になって仕方なくて「なんかないかなぁ・・？」と考えているとおしっこに行きつきました。
「おしっこなら自然じゃね？」
なんて思った43歳はたぶん頭おかしい。。
pixi.jsのチュートリアルをちょっと勉強した
このころ開発しようにもモチベーションが低くてなかなかやる気が出てこない日々が続いていたので何となくpixi.jsの勉強をすることにしたんですよ。
私はpixi.jsでゲーム作ってるくせに実は全然ちゃんと調べてなくて(;^ω^)なのでちょっとpixi.jsのホームページにあるチュートリアルを勉強しようと思って見てみたらランゲーのステージの作り方の解説だったので「おお！こいつはちょうどいい！」ってことでやってみたんですよ。
そしたらね、けっこう内容の濃い解説で「スプライトプール」という技術を初めて知ったりしました。
このスプライトプールってのはスプライトという画像を表示する要素を先に作っておいてこいつを使いまわすというテクニックです。スプライトを新たに生成するのはけっこうコンピューターに負担になるので処理の遅いブラウザゲームにとっては処理をスムーズに行わせるために使うべき技術なわけです。
もちろん私もスプライトの生成が負担になることは知っていたので先に配列を作ってフラグで対応するようには作っていたんですがスプライトプールはそれの進化版みたいな感じですね。これと次のことを組み合わせてより便利になりました。
キャラクターは一つの配列で管理すると楽
実は5月・6月はpico-8というゲームエンジンの使い方をちょっと勉強してました。で、この時に「jelpi」というサンプルゲームのプログラムを勉強してたんですよ。
で、このjelpiでは動くキャラクターたちはすべて一つの配列に入れて管理していたんですよ。全キャラクターを同じクラスで作って(正確にはクラスじゃないけど)、それらをactorという一つの配列に入れたり出したりするようにして管理してました。そうするとわかりやすいしプログラムを書く量も少ないんですよね。
私は今まで敵キャラや弾などを別々の配列で作って管理していたんでけっこうあちこちに処理を書いて面倒だったんですよね。
ただね、pico-8と私が作ってる環境とはまた違うので同じように作るには私の知識に何かが欠けてたんですよね。
ドッキング！！
欠けてたものはもうわかると思いますが「スプライトプール」だったわけです。
pixi.jsのチュートリアルで学んだスプライトプールの使い方を改造して全キャラクターを一つの配列でうまく管理する方法を作りました。
さらっと書いてますがけっこう面倒でした(;^ω^)
パーティクル！
jelpiでもう一つ学んだことはパーティクルがあります。
パーティクルとは欠片や粒子という意味で最近のゲームでは何かしらキラキラしたものが飛び散って画面を派手に見せてます。
jelpiではこれをうまく作っててシンプルなのにすごくうまくキレイに演出してるんですよね。
で、それを真似ようと試して作ったのがこちらです。
いつもより多く出しております⭐️ pic.twitter.com/6Zp38PildQ
— いんわん (@inwan78) 2021年7月3日
今回星型は使ってませんが星型も使えるように作っておきました。
敵キャラを倒したときに出るパーティクルはこれをベースに作っています。
リファクタリングをずっとしてました
今回、実はけっこうプログラムを奇麗に整理しました(リファクタリングっていうらしい)。
過去に作った部分を役割をもっとはっきりさせて分割したりクラス化したりしてより独立して再利用しやすい形に修正しました。
ゲーム作りながら「ここもっときれいにできるんじゃね？」って感じでやってたのでなかなか制作が進まなかったです(^^;)
レトロな画面について
今までも低解像度でゲームを作ってきましたが、今回はファミコンと同じ幅256ドットです。
ただし、pixi.jsで解像度を256ドットにすると超ボケます。文字なんかはもっとボケます。なので実はこのゲームの画面は幅512ドットで作っています。ただしゲームが描画される画面は256ドットになっていてそれを2倍に拡大させています。そしてなぜか普通に256ドットで表示させるより拡大した方がボケが少し軽くなります(理由は知りません)。文字は512ドットの画面に書いてます。
ただ、これだとなんか「ぼやぁ～」っとボケただけの画面なんですよね。テレビっぽいぼけ具合だけどなんかちょっと違うんですよね。これは前の「トイレへの道」でもちょっと思ってたんですよね。
なので走査線を足してみたらそこそこいい感じではあったんですがなんか物足りないんです。
で、試しに走査線を上下に動かしてみたら「(ﾟ∀ﾟ)ｷﾀｺﾚ!!」ってなりました。
今回はちゃんとボスがいる
途中モチベーションが切れてきて「もうこれでいいかな？」なんて思って公開しようかとも思ったんですが、やっぱボスはつけようと思い作りました。
何パターンか動きを作ろうかと思ったんですが一つ目だけで十分難しかったので「もういいや」ってなりました(^^;)
ただ、さっくり出来ちゃったので代わりに目ん玉が動くようにしたり、ダメージ具合が分かるようにしました。
シンプルだけど良い感じになったんではないかと思ってます。
和風な世界観
今回一番悩んだのは音楽でした。
ずっと音無しで作っててある程度できたときに入れたんですが、この時に曲や効果音を選ぶのに「ちがうんだよなぁ」「こうじゃないんだよなぁ」ってずっと決められずにけっこう悩みました。
いくつかのフリー音源サイトを見た後「こうなったら魔王魂のサイバー曲しかない！」と思って魔王魂のサイバー曲を聴いてたら三味線ぽい曲があって。「なるほど、三味線か」となって三味線で検索すると伊藤ケイスケさんの曲が見つかりました。
で、三味線に確定したことで「和風」をもっと強調しようと思いタイトル画面やゲームオーバー画面の「死」などが決まっていきました。
ところでタイトル画面は日本昔話風に作ったんですがみなさん気づいてますよね？
まぁそんな感じかな
今回の「おしっこ忍者」はこんな感じに作りました。
おしっこで戦うふざけたゲームですが作る方はけっこう大変なんですよ(´・ω・｀)
