猫の日、２２２と聞いて、誰でも思い浮かぶのがスロットだと思います。
豆まき陰陽師をリリースしたあと、あまり作業がはかどらず悶々としていた私にとってはそんな安直なネタでもとても魅力的に感じたのです。
とにかく何か作りたい！リリースしたい！みたいなときってありますよね？あれです。
作ったときの手順
最初からスロット、しかも数時間で作れるもの、という枠が決まってあったので、手軽さでは最高峰と思われる HSP3Dishでやりました。ブラウザや android や iOS に対応している開発環境の中では圧倒的に手軽だと思います。
まずはイメージを固めるためにも、ぺたぺたと InkScape で画像を作りつつ、同時に画面レイアウトも決めていきました。
わりとここに時間をかけました。
ふわっとした状態で作ってもどうせ作り直しなので、画面レイアウトをきっちり決めて、タイトル＞プレイ＞結果のシーンでどのように表示するかを決めました。
ゲームとして連続して遊んでもらえるように COMBO をつけることにしました。
あと、最近はやりのサーバルちゃんと手巻き寿司の作り方で有名な台無しにしちゃう男の人をモチーフに使いました。
プレイした人にふふっと１秒でも笑ってもらえたらいいなと思っています。
ぐるぐる回転の実装
なので実装は、作られた設計図のとおりに作られた画像を配置するという機械的なものでした。今回のメインともいえるスロットの機能だけは、実装を始めてから頑張って考えました。
このスロットは、去年に作った「エレベータースロットガール」とは異なり、ドラム回転するスロットを表現する必要があります。
そのため、画像をピクセル単位でずらす必要があります。
スロットに表示する絵柄は１つでその枠にぴったりはまるようになっています。
それが少しずつ下にずれていってぐるぐると決められた絵柄のパターンが回るようにします。
今回は、それぞれの枠ごとに５枚の絵柄が並んでいてそれがぐるぐると回っている仕様にしています。
スロットを表示する枠の中には、最大で２枚の絵柄が表示されます。
絵柄を下から順にＡ，Ｂ，Ｃ，Ｄ，Ｅと並んでいるイメージです。
最初にＡがでてきて、数ピクセルずつ下にずれていきます。その上にＢの最後のほうが表示されます。
今回の実装では、現在表示する絵柄とその縦軸の表示オフセットを保持することで、スロットのぐるぐるを表現できました。
表示オフセットの分だけ、その次の絵柄の後半部分を表示します。
スロットをとめたときの処理
あともうひとつ悩んだのは、スロットを停止したときの表示処理です。最初はずれたままにしておいたのですが、それだとちょうどＡとＢが半分ずつ枠に表示されているときに、どっちなのかすごくわかりづらかったんです。
最初は、○と×でも表示すればいいかなと思ったんですが、それよりも枠に１つの絵がバシッと表示されたほうが気持ちがよさそうでした。
そこで、面積が多く表示されているほうを表示するようにしました。
リリース準備
あとはＨＳＰをブラウザ用に変換する作業です。レンタルサーバにあげて試すとメモリが足りないといわれました。
デフォルトの１６ＭＢではたりず１７ＭＢ必要だったみたいです。
ツールの設定はＭＢ単位です。警告に表示されるＢ単位では無効扱いになるので注意しましょう。
あとHSP3Dishで注意することといえば、mes のずれと await のずれがあります。
文字列描画の mes はスタンドアローンとブラウザでは文字の幅が違うようで、最初は画面にまったく文字が表示されずあせりました。
だいたいのテキストは画像として描画しているのですが、動的に変化する数値は mes を使っています。
ずれても見えるように少し画面中央によせています。
await については「チョコゲット」のころからわかっていることなので、スタンドアローンでは少しゆるい感じで作り、ブラウザでちょうどいい感じにしました。
それでも環境によってはとろとろのスロットになっているかもしれません。
思いつきの対策としては、環境ごとに計測をして調整できるといいかもしれません。
ないものねだりですが、ブラウザ版でもデータのセーブとロードができるといいなぁと思います。もし、すでにあるというならコメントで教えてもらえるとうれしいです。
最後は少しグチっぽくなってしまいましたが、それでもたった６時間ほどでゲームが作れたのは、とても作りやすいＨＳＰのおかげです。
謝辞
結局、２月２２日の２１時ごろにリリースしました。もう３時間で２２日が終わってしまう(´・ω・｀)とランキングはだめかと思っていたのですが、予想以上にアクセスしてもらいうれしいです。
日別ランキングで５位になることができ、たった３時間ほどで２２５人ものプレイヤーのかたにアクセスしてもらえました。
改めましてフリー素材を利用させていただきましたことにお礼申し上げます。#猫の日 にちなんだスロットゲームを作りました。無料でブラウザから遊べます。— さくらくらうど🌸 (@SakuraCrowd) 2017年2月22日
クリックだけの簡単操作で１回１５秒程度です。よろしくお願いします！
PLAY URL => https://t.co/qB5Jo6CTzU#free #game #HSP3 #indiegame pic.twitter.com/FaPQtY8yby
- M+ FONTS : http://mplus-fonts.osdn.jp/about.html
- フリー効果音素材・無料効果音 : http://taira-komori.jpn.org/freesound.html
近況
少しこんつめたせいかこのあとの数日は脳みそがハワイかどっかにいってるみたいで、ぼーっとしてました。ハワイからもどってきてくれたら、何度も挫折しているblenderを勉強してほんの少しだけ使えるようになりたいと思っています。
webglとjavascriptについてももう少し勉強して年末に作っていたキットも完成させたいですが、まだまだ見通しがたっていません。暖かく見守ってください。
頑張ろうとは思っているんですけど、ぼーっとしちゃうんです。
頭の中はいつもプレミアムフライデーな感じなのかな。でもそういうときはそういうときなりにすごすのがいいと思います。以上です。
コメント
コメントを投稿