2017年2月25日土曜日

HSPでブラウザゲーム「猫の日スロット222」をリリース



猫の日、222と聞いて、誰でも思い浮かぶのがスロットだと思います。

豆まき陰陽師をリリースしたあと、あまり作業がはかどらず悶々としていた私にとってはそんな安直なネタでもとても魅力的に感じたのです。
とにかく何か作りたい!リリースしたい!みたいなときってありますよね?あれです。

作ったときの手順

最初からスロット、しかも数時間で作れるもの、という枠が決まってあったので、手軽さでは最高峰と思われる HSP3Dishでやりました。
ブラウザや android や iOS に対応している開発環境の中では圧倒的に手軽だと思います。

まずはイメージを固めるためにも、ぺたぺたと InkScape で画像を作りつつ、同時に画面レイアウトも決めていきました。

わりとここに時間をかけました。
ふわっとした状態で作ってもどうせ作り直しなので、画面レイアウトをきっちり決めて、タイトル>プレイ>結果のシーンでどのように表示するかを決めました。

ゲームとして連続して遊んでもらえるように COMBO をつけることにしました。
あと、最近はやりのサーバルちゃんと手巻き寿司の作り方で有名な台無しにしちゃう男の人をモチーフに使いました。
プレイした人にふふっと1秒でも笑ってもらえたらいいなと思っています。

ぐるぐる回転の実装

なので実装は、作られた設計図のとおりに作られた画像を配置するという機械的なものでした。
今回のメインともいえるスロットの機能だけは、実装を始めてから頑張って考えました。

このスロットは、去年に作った「エレベータースロットガール」とは異なり、ドラム回転するスロットを表現する必要があります。
そのため、画像をピクセル単位でずらす必要があります。

スロットに表示する絵柄は1つでその枠にぴったりはまるようになっています。
それが少しずつ下にずれていってぐるぐると決められた絵柄のパターンが回るようにします。
今回は、それぞれの枠ごとに5枚の絵柄が並んでいてそれがぐるぐると回っている仕様にしています。

スロットを表示する枠の中には、最大で2枚の絵柄が表示されます。
絵柄を下から順にA,B,C,D,Eと並んでいるイメージです。
最初にAがでてきて、数ピクセルずつ下にずれていきます。その上にBの最後のほうが表示されます。
今回の実装では、現在表示する絵柄とその縦軸の表示オフセットを保持することで、スロットのぐるぐるを表現できました。
表示オフセットの分だけ、その次の絵柄の後半部分を表示します。



スロットをとめたときの処理

あともうひとつ悩んだのは、スロットを停止したときの表示処理です。
最初はずれたままにしておいたのですが、それだとちょうどAとBが半分ずつ枠に表示されているときに、どっちなのかすごくわかりづらかったんです。
最初は、○と×でも表示すればいいかなと思ったんですが、それよりも枠に1つの絵がバシッと表示されたほうが気持ちがよさそうでした。
そこで、面積が多く表示されているほうを表示するようにしました。

リリース準備

あとはHSPをブラウザ用に変換する作業です。
レンタルサーバにあげて試すとメモリが足りないといわれました。
デフォルトの16MBではたりず17MB必要だったみたいです。
ツールの設定はMB単位です。警告に表示されるB単位では無効扱いになるので注意しましょう。

あとHSP3Dishで注意することといえば、mes のずれと await のずれがあります。
文字列描画の mes はスタンドアローンとブラウザでは文字の幅が違うようで、最初は画面にまったく文字が表示されずあせりました。
だいたいのテキストは画像として描画しているのですが、動的に変化する数値は mes を使っています。
ずれても見えるように少し画面中央によせています。

await については「チョコゲット」のころからわかっていることなので、スタンドアローンでは少しゆるい感じで作り、ブラウザでちょうどいい感じにしました。
それでも環境によってはとろとろのスロットになっているかもしれません。
思いつきの対策としては、環境ごとに計測をして調整できるといいかもしれません。

ないものねだりですが、ブラウザ版でもデータのセーブとロードができるといいなぁと思います。もし、すでにあるというならコメントで教えてもらえるとうれしいです。

最後は少しグチっぽくなってしまいましたが、それでもたった6時間ほどでゲームが作れたのは、とても作りやすいHSPのおかげです。


謝辞

結局、2月22日の21時ごろにリリースしました。
もう3時間で22日が終わってしまう(´・ω・`)とランキングはだめかと思っていたのですが、予想以上にアクセスしてもらいうれしいです。
日別ランキングで5位になることができ、たった3時間ほどで225人ものプレイヤーのかたにアクセスしてもらえました。
ツイッターのいいねやRTのおかげです。あと宇宙に数人いるかもしれない貴重なSSRなファンのおかげです。ありがとうございます。

改めましてフリー素材を利用させていただきましたことにお礼申し上げます。

  • M+ FONTS : http://mplus-fonts.osdn.jp/about.html
  • フリー効果音素材・無料効果音 : http://taira-komori.jpn.org/freesound.html


近況

少しこんつめたせいかこのあとの数日は脳みそがハワイかどっかにいってるみたいで、ぼーっとしてました。
ハワイからもどってきてくれたら、何度も挫折しているblenderを勉強してほんの少しだけ使えるようになりたいと思っています。
webglとjavascriptについてももう少し勉強して年末に作っていたキットも完成させたいですが、まだまだ見通しがたっていません。暖かく見守ってください。
頑張ろうとは思っているんですけど、ぼーっとしちゃうんです。
頭の中はいつもプレミアムフライデーな感じなのかな。
でもそういうときはそういうときなりにすごすのがいいと思います。以上です。




2017年2月3日金曜日

節分にぎりぎり間に合った3分FPS?「豆まき陰陽師」について思うこととか


眠いです。ぐっすり寝たはずなのに眠いです。
昨晩PV動画を作っているときは、走ってもいないのに「負けないで」が流れてくるくらいにしんどかったです。
だけど節分の1日前にリリースできてよかったです。╰ ( ◜◔。◔◝ ) ╮


節分緊急リリース 超速爽快シューティング
プレイする方はこちら↓


本人的には最後の追い込みでかなりブラッシュアップして納得して出した作品ですが、
あんまり反響がなくて、今までの疲れ的なものがどっとでてちょっと落ち込み気味な作者です。
だいたいいつも、リリース後はハイになるか死にたくなるかのどっちかですね。

そういえばわりと自分の中では評価の高い「チョコゲット」もなぜかあんまりアクセス数がよくない。
とはいっても誤差程度のものですが、何が受けて何が受け入れられないのか正直よくわかりません
アクセス数をみるととまどうこともありますが、いまだに数人ですが数ヶ月前にリリースした作品にアクセスされているのをみて、すごくやる気にさせられます
(別に毎日みてるわけではなく、新しくゲームを登録するときに「今日、今週、今月のアクセス数」のついた投稿済み作品のリストをみることになるだけです。それ以上の情報はまったくわかりませんので安心してプレイしてください。)


リリースした昨晩のわずか5時間の間に209人のアクセスがあり、
モゲラさんの日別ランキングで6位になれたのはうれしかったです。


2017/02/04追記
初日より1位上昇して5位になりました!ありがとうございます!
追記ここまで

あと、何人かの方にいいねやRTやゲームのツイートをしてもらえたことがうれしいです。
これをはげみに頑張ろうと思いたいですが、しばらくはごろごろしたいと思ってます。
今の気持ち的にはこんなかんじです。
あとは、製作中のこととかをふまえて作品について書こうかと思います。

 作品について

節分緊急リリース 超速爽快シューティング
プレイする方はこちら↓




動画や画像をみていただければだいたいの雰囲気は伝わると思います。
これをFPSというシューティングのジャンルで呼んでいいのか悩みました。
しかし、一番伝わりやすいと思い誤解をおそれず使わせていただきました。

プレイヤーが移動しないで防衛ラインを守るという意味では、タワーディフェンスとFPSを組み合わせたようなクリックゲーかもしれません。

これを作り始めたきっかけは、よくあるパターンですが、息抜きで作ってたら本気になってきたパターンです。

最初はゲームというより、絵の練習で来月は節分だからと鬼のアニメーションを作りました。
そしたら、それを動かしたくなりました。
正面の歩行アニメーションだけだったので、せまってくるゲームにしようと思いました。
そんなかんじで作り始めたのが1月後半です。
途中、ツイッターで助言をえたりはげまされたりしながら、作りました。感謝。

鬼が近づく前に光る弾をうつところは、そのときやっていたダークソウル2の闇の玉などの影響を受けているかもしれません。
白い玉ではなくきちんと壁や敵に近づくとそれが照らされるのがしびれます。

今回は、弾をぶつけるというアクションだけなので、このアクションでなるべく楽しんでもらえるように時間をさきました。
弾は投げたときとぶつかったときに音を出すのは基本かもしれませんが、いっきに存在感というか手ごたえがでます。
あとは、敵をたおしたときのモーションも少しこだわって、やっつけた感がでるようにしました。

赤鬼がやられたときに1秒ほどモーションがあるのですが、もう死体となっている相手に弾がぶつかって、奥の敵を倒せないのはなんとなく不便でいらっとするので、そこも死体になったら当たり判定のレイヤーを変えることで弾が貫通するようにしました。
これにより便利になっただけではなく、たくさんの敵を配置しても連射で対応できるようになり敵の配置の自由度が増えました。

あと、偶然みつけた Particle System で光るもやもやとした玉のエフェクトができて、魔法陣っぽさやタイトルの雰囲気がよくなった気がします。
Particle Systemはお手軽なので今後も使いたいなと思いました。

終盤になって、ツイート機能をつけるにあたり、スコアアタック要素がほしくなりました。
赤鬼を指定時間で倒した数でもいいのですが、もう1つ違う要素を加えて少し複雑にしたほうが単調さが減ると思いました。
そこで、鬼火を付け加えました。
これにより、難易度の幅ができたと思います。

リリース当日は、鬼の出現タイミングと位置の調整だけをするつもりでしたが、鬼がどの位置まできたらゲームオーバーにするかの調整もしました。
ぎりぎりでやっつけたのに、なぜかゲームオーバーになるようなときがあったので、そのあたりを調整しました。
死体になったら攻撃判定をつけないようにしたり、コライダの大きさを調整しました。

そんな感じでなんとか節分の前日の2月2日の夜にリリースできました。
もうこれでいいかとも思ったのですが、節分の日が本番みたいなよくわからない意識があったので、その日のうちにプレイ動画をとって、編集したPVもつくりました。

そんな感じで今日にいたります。ゲームのリリースというゴールをした直後にPV制作というミニマラソンをやったような感じで、すごく今日は眠いです。
とにかく間に合ってよかった。それでは良い節分の日を!( ´・‿・`)ノシ

最後に、あらためまして、素材提供していただいたサイト様にもお礼を申し上げます。
素敵な素材のおかげで雰囲気がぐっとよくなりました。
フリー効果音・無料効果音素材
M+ FONTS
衡山毛筆フォント行書


節分緊急リリース 超速爽快シューティング
プレイする方はこちら↓