このゲームはVue.jsという最近ナウめなJSフレームワークで作られてます。
フリゲ・ブラウザゲーが好きな方にはHTML5形式のゲームの一種と書けば伝わるでしょうか。
このゲームを作った動機としてVue.jsの練習のためというのがかなり大きかったのですが、個人的には中々良い手応えを感じました。
過去にこの世の終わりみたいなReactのJSXを書いたり、このサイトの前バージョン(ver2 part1)でAngularを使って何も分からなくなった自分の中では今までで一番マトモに扱えたJSフレームワークなのではと思っています。
特に単一コンポーネントというやつが良さに溢れてました。１ファイルの中にHTMLとCSSとJSがまとめられるので、すごくスッキリしますね・・・！
ただ、自分のコンポーネントの使いっぷりはまだ改善の余地ありかなという気がします。今回のゲームは最終的に８個のコンポーネントを作ったのですが、どのコンポーネントも１箇所でしか使われてません。１ファイルで要素が成立するコンポーネントの真価は使い回しにあるのでは！と思うので、使い回されないコンポーネントはもう少しまとめてもよかったのかもいう感じです。
不必要なコンポーネントの切り分けをすると、いたずらに値渡しがごちゃごちゃしてしまいますので・・・！
このゲームは基本的に歩く→戦う→歩くの繰り返しなのですが、このメインの処理を実装するにあたって、最初はsetInterval()関数を使ってました。先に主人公のわんこが歩く処理を作り、次に戦う処理を作ろうとしたのですが、setIntervalの中にsetIntervalを作って色々しようとした時点でこの先に待ち構える茨の道の幻覚が見えてしまったので、何か別の案はないかと調べたところPromiseというやつがsetIntervalやsetTimeoutの代替品になり得ると知ったので、戦う部分の処理はPromiseで作ることにしました。
Promiseの概要や使い方の理解に今回一番手こずっていた気がするのですが、このPromiseというのが中々良い感じでして、処理を続けたい時は.then()を繋げていって、処理を止めたい時はチェーンメソッドを止めれば勝手に止まるのでsetInterval, setTimeoutと比べるとかなり使いやすかったなと思います。ただ、大元の歩く処理はsetIntervalを使ったままなので、悪魔合体感は残っていますね・・・！
ゲームを作るにあたって使うイラストをCLIP STUDIOで描いていたのですが、「線の色を塗りの色よりちょっと濃い色にする」というルールを決めて描いてみました。
自分のイラストの線が割と太めだからというのもあるかもしれませんが、線の色を変えるだけで灰色や黒一色の時よりも絵全体の雰囲気がグッと柔らかくなった気がするので、個人的にすごくよかったです。今後も使えそうなら積極的に使っていきたいなと思います。
最近のWeb事情に詳しい方はお気づきかもしれませんが、今回のゲームはDOMを操作して色々やるタイプのやつです。
WebGLが熱い、canvas要素を使ってGPUに処理をさせろという機運が高まっており、UnityやツクールMVなどのWebGL用のツールも盛り上がっている昨今においては、おおよそブラウザゲームとしてありえない(流行に乗っていない)作りをしているのですが、エクセルやパワポで美麗な絵を描くことの超しょぼい版をやっているようなものなのであまり気にしないでください。これくらいのボリュームならGPUも無理に使う必要はないのではと思いますし・・・！
JavaScriptでブラウザゲームを作るのは前サイト(ver 1)でも一度やっているので２度目の試みとなりました。
JavaScript的技術力は前回と比べて確実に伸びているというのは実感としてあるのですが、ゲームとしての面白さは前回の方が上かなあという感じです。自分が作ったものに対する客観的評価のできなさを感じてはいますが、プレイヤーがゲームの進行に一切干渉できないのはタルいなというのと、音が一切入ってないのがタルさに拍車をかけてるなというのは思いますね。
このゲームを作り始める少し前から自分用のSlackワークグループを作ってたので、そこにゲーム制作用のチャンネルを作ってみてました。最初に目標みたいなものを２・３行書いたんですが、それ以外はただただ画像を上げるだけのチャンネルになってしまいました。
主人公のわんことタイトルの初期案です。実際に使ったイラストの方が大人びた雰囲気のように感じます。
最初はタイトル画面にもわんこを入れるつもりだったんですが、面倒臭くなった＆メイン画面へ移行するときの兼ね合いを考えてなくしました。
敵キャラの初期案です。同じ敵ばかり出てくるのは避けたいなという思いがありまして、作業量的に３ステージ×３体で９体ほど作るのが良いかと思っておりましたが、途中で何体かは別のキャラになりました。
制作の後半からですが、イラストを作るときの作業ログを取りたいなと思いましたのでYoutubeで配信をしてました。リアルタイムで見られるのはなんだか恥ずかしい気がしたので非公開で誰にも見せない配信(なんだそれは)でした。
純粋に作業時間が測れるだけでも大分嬉しいのですが、「このイラストってどういう風に描いたんだっけ？」となったときに見返せるようになったのも凄く嬉しいですね。
今回はどれも配信前にざっくりとした下絵を描いてある状態で始めてたのですが、グダるの覚悟で下書きのところから撮ってもいいのかなという気もします。
あと、最初の方に描いたイラスト(特にわんこ)の配信をしてなかったのはとても悔やまれます・・・！
今回のゲームですが、構想時と比べると色々な部分を妥協した出来になっています。
攻撃する時とダメージを受けた時にわんこだけはイラストが変わりますが、本当は敵もイラストが変わるようにしたかったですし、戦う以外のイベントも作ってプレイヤーがゲーム進行に干渉できるようにしたかったですし、全体的に演出をもっとこだわりたかったですし・・・
元々自分はゲームを作りたくてプログラミングを初めたので、数年前からちょこちょことゲームを作るべく水面下で１人活動をしていたのですが、どれも途中でやる気が切れて没になるという有様でした。
↑今回作ったノンフィールドRPGというジャンルも過去に２・３度作ろうとしてまして、２年半ほど前にVisualBasicで作ろうとしてたときのやつです。
わんわんわーるどよりも良い意味で部屋干し感の強い、じとっとした作品になる予定でした。
ただ、完成まで辿り着かないまま没になるのを何度も繰り返していてはいけない！と思いまして、「完成させて公開すること」を第一目的とした制作をということで前作を１年半くらい前に作りました。こっちは元から一発ネタとして作ったので、小さくまとまったかなという感じがします。
それからしばらくして、Vue.jsの勉強がてら次なる作品をということで今回の制作に入ったのですが、やはり完成させることが大切だということで「最初にザックリと全体像を作って、そのあとで細部を作り込んでいく」という作り方で挑んでみることにしました。
イラストを作るのは時間がかかりそうだなと思ったので、５分くらいで仮わんこを描き、しばらくはそれを使って作業を進めてたのですが、上のツイートの状態まで作ったあたりでこれからの作業量がいったいどれだけあるんだと考えた時に、いつものごとくやる気がぽっきりといってしまいました(数値のドラムロールの実装にも結構詰まってたので、それが終わって１段落ついた感がでたからというのもありますが)。
それから２・３週間ほどは特に作業も進めず、このまま没かもなという感じがしてきたのですが、やはり没はいくないということで気分転換も兼ねて実際に使用するイラストを描いてみることにしました。
そうして描いたのがこのイラストなんですが、個人的にかなり満足のいく出来だったのでとりあえず画面に配置してみることにしました。
その時はまだ背景画像も作っていなかったのですが、一面緑色の画面にぽつりと佇むわんこの姿を見た時に、恥ずかしながら「これを没にするわけにはいかない、わんこに日の目を浴びさせてやらないといけない！」という使命感にも似た感情がメラメラと燃え上がってゆくのを感じました。
それからは、一気に残りのものを作っていって半ば無理矢理に完成までこぎつけた感じです。再びやる気が切れて没になったらと思うと、なんだかとても恐ろしかったので・・・！
そんな感じで公開したため、後悔している点もいくつかあるのですが、こうなってしまった大きな原因としてはやはり「最初にザックリと全体像を作って、そのあとで細部を作り込んでいく」ということをやろうとした今回の作り方にあるのではないかと考えております。
個人の制作というのは、特に誰かから期限や成果物のクオリティーを決められる訳ではないので、１通りの流れが完成してしまうと物としては出来上がっているのに、ここから何をどれだけ作り込めば公開していいボーダーラインに達するのかが分からなくなってしまいます。
そして、個人的モチベーションに大きく関わってくる部分なのですが、適当に作った仮素材に対して自分が本気で向き合うことはできません。
思い返してみれば、これまで没になってきた何度かの制作においても自分が描いたキャラクターが動く時に強い喜びを感じていた記憶がありまして、おそらくこれが自分の核の１つなのだと思います。自分の描いた謎のキャラクターが、自分の書いたプログラムなどという意味のわからない物により、自分の手を離れて動き出す。なんて尊いことなのでしょう・・・
核たる部分を疎かにして、本気の制作などできるはずもありません。
技術的にも技術じゃないこと的にもやってみたいことがあるので、今回の正当派進化系みたいなものを作りたいなあと思ってます。
１つ大きく変えることとして、前回と今回は急いで作った感がありますが、次はめちゃくちゃ時間をかけてみます。曲がりなりにも１つのものを完成させることができるということはわかったので、次はクオリティーの部分に力を注いでみます。毎日やる気１００％で制作することはできませんが、一段一段を全力で踏みしめてゆけばいつかは完成するのではないでしょうか。
ということで、水飴信号では引き続き、自分の中に渦巻く「”可愛い”への憧憬」を顕現せしめるためのプログラミング(世間では「萌え萌えプログラミング」と呼ぶそうです)をゆるゆると続けてゆこうと思います。
・・・自分を奮い立たせるために長々と書きましたが、制作が没になった時は何も語らず、最初から何も作ってなどいなかったかのように振る舞いますので、その時は察してください。
