スキップしてメイン コンテンツに移動

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



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

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

作ったときの手順

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

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

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

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

ぐるぐる回転の実装

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

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

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

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



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

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

リリース準備

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

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

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

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

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


謝辞

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

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

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


近況

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




ラベル

ラベル:

コメント

コメントを投稿

このブログの人気の投稿

QTableView で表を表示してみる

タイトルは駄洒落を狙っているわけではありません。 こんばんわ SakuraCrowd です。 今回は今作っているソフトの経過報告です。 最近のブログのパターンは、 「ＸＸＸ作ったよ。これがスクリーンショットね。あとこんなこと思ったよ。」 という流れですが、 今日はできていないソフトの部分的な話なので、 いつもよりもプログラムちっくな話になると思います。(´Ծ_Ծ´)ﾒｶﾞﾈﾉﾄｷﾊﾏｼﾞﾒﾌﾞｯﾃﾙ QTableView は GUIライブラリ Qt のクラスです。 それを Python で使うための PySide というライブラリを使っています。 某表計算ソフト っぽい表の GUI です。 このデータの日付が 09/01 なのでおそらくその日に   QTableView 使うぞ！(｀・ω・´) とサンプルデータを作ったのでしょう。 Qt Designer という GUI エディタを使うとポトペタでウィンドウを設計できます。 選択できる GUI の中に QTableView と QTableWidget があります。 どちらも上のような表の GUI です。 QTableWidget は 簡単 に値をいれたりできます。 Qt Designer 上で直接編集 することができるので、 サンプルの表を簡単に作ることができます。 それに対して、 QTableView は Qt Designer 上では値を編集できません。たぶん。 QTableView の強みは MVC の構造 を使えることです。 名前のとおり QTableView は View です。 これにデータを管理している Model オブジェクトを設定して使います。 Model クラスを作る手間がかかりますが、 GUI の細かな操作をしなくても Model に応じた表を表示してくれます。 Model は QAbstractTableModel を 継承 して作ります。 コンストラクタで基底クラスの処理を呼び出し、いくつかの純粋仮想関数をオーバーライドします。 def __init__ ( self , parent= None , *args):...
コメントを投稿
続きを読む

HSPで画像の重ね合わせをしてみた

あいにくの曇り空だったが、 スーパームーン を少し見ることができた。 なんとなくだが、月明かりがいつもよりも強い気がする。 中秋の名月とほぼ同時に月が地球に 接近するのは稀らしいので何かありがたい(-人-) 先週ブログを書いていたときに、 ハロウィン にちなんだゲームを作りたいなー と思っていて、ふわっとした企画を考えて、少し作り始めた。 まだできるかどうかわからないけど、初めて HSP で絵を出せたのがうれしいのでブログを書いてみる。 HSP 自体はだいぶ前から知っていて、ちょっとしたＧＵＩのツールを作ったりしていた。 GUIアプリケーションをここまで短く実装できる言語は自分の中ではこれが一番だと思う。 もっと短くできるかもしれないが、ビギナーな私でもこのくらい短くかける。 screen 0, 160, 64 // ウィンドウ作成 button "greet", *OnGreet // ボタン作成＆イベント関連付け stop *OnGreet // イベント dialog "Hello!" stop バージョンアップして今では WebGL や 　iOS や Android でも実行できる。 そのときは HSP3Dish という環境を使うために  #include "hsp3dish.as" 　でスクリプトを読み込む。 　参照： HSP3Dish プログラミングマニュアル・基本仕様ガイド 制限として、拡張プラグインやCOM/Variant型や外部DLL呼び出しやモジュール変数については未サポートのようだ。 ゲームでスプライトを用いるため es_set などのスプライト用の関数を使いたかったが、これは hspdx という拡張プラグインなので HSP3Dish には対応していないと思う。 そんな理由から、スプライト系の処理を自作しようと思う。 先週ちまちまとドット絵を描いたので、それを HSP のウィンドウに描画してみた。 なんかドット絵を作っている最中は、わりと良く思えたのに、 ウィンドウに出してみると何か微妙 (´・ω・｀) ちなみに、キャラは４コマにも描いている大砲ゲーム「お団子キャノン」に出てくるキャラクターだ。 キャラの...
コメントを投稿
続きを読む

LibreOffice Writer 文書の差分 (WinMerge x TortoiseGit) + 社畜PCの原因と対策

お久しぶりです。皆様におかれましてはお風邪などをひかれてはいませんでしょうか。 春と秋だけあればいいのにヽ(`Д´)ﾉとつい思ってしまう SakuraCrowd です。 今日はいつものような製作日記ではなく、ちょっとした役立つメモを書きました。 タイトルにもあるとおり、 TortoiseGit への WinMerge の導入の仕方です。 今まではソースコードくらいしか差分で確認しなかったので、 TortoiseGit 標準の Diff ツールで問題なかったのですが、 LibreOffice の Writer が最近自分の中で便利だと話題になっていて、それを差分表示するためにちょっと調べてみました。 ＃Writer は、文章書いて、ちょっと絵をいれたり表を作るのに便利だと思います。 ＃リッチテキストのエディタを探していて、これが一番よさそうな気がしたので使ってます。 それとブログを書くときはあまり長く書かないつもりだった、 Win7 PC が社畜PCになってしまった際の原因と対策も後半に書きました。割と有用な情報かもしれませんので、時間がありましたらご覧下さい。 まずは TortoiseGit で Writer の odt ファイルを管理して、差分も普通に表示させる方法です。 WinMerge(+plugin) 導入手順 すでに TortoiseGit はインストールしてある前提ではなします。 １．信頼と実績の窓の杜様から WinMerge 日本語版をダウンロードします。 WinMerge - 窓の杜ライブラリ 私の PC は 64 ビット版なのでそちらを選びました。 ２．WinMerge をインストールします。 フォルダを指定し普通にインストールできます。 インストール直前の設定で TortoiseGit をチェックしておくと自動的に TortoiseGit の利用する Diff ツールの設定を置き換えてくれるようです。 これの設定は TortoiseGit の設定の Diff ツールの項目で確認できます。 ３．LibreOffice Writer のファイルを読むためのプラグインをダウンロードします。 ぐぐって出てくる英語版のＤＬサイトは応答がなかったりしましたが、日本...
コメントを投稿
続きを読む