Monaca

「忍者サバイバー」でもちょっと触れましたが、ポスト・Flashの開発ツールとして…
「Monaca」（正確にはMonacaクラウド）を使い始めてます。

Monacaは、HTML5ハイブリッド開発プラットフォームです。ベースはHTML５（JavaScript）ですが、テキストエディタなどで開発するより便利なところが色々あります。

「Android & iOS両対応 つくりながら覚えるスマホゲームプログラミング」

Monacaの解説書です。
この本を本屋で見つけて、Monacaの存在を知りました。

著者、掌田 津耶乃さん…すげー懐かしい！　
HyperCardを使ってた頃、この方の解説書にお世話になってました。
今は、Monacaのエバンジェリストになってるんですね（それだけじゃないと思いますが）。

Monacaの利点を列挙すると…

• 無料！
  ベーシックプランなら無料で試せます。無料だと同時に3つのプロジェクトしか動かせませんが、たいてい一度に１プロジェクトしか扱わないだろうから、問題なし。
• ブラウザで開発できる
  インストールしなくて良いので、私のストレージ脆弱なタブレットでもOK。データはクラウドに置かれるので、自宅での作業の続きを出先で行ったりできます。
• 「Onsen UI」というGUIライブラリを使って、リッチなデザインを組み込めます（今の所使ってないけど）
• オートコンプリート機能
  エディターにオートコンプリート機能があって、入力サポートしてくれます。
• プレビューを常時表示
  スクリプトを保存するだけで、即実行確認できます。
• スマホと連携
  デバッガアプリをスマホにインストールすると、ネット経由でスマホと連携し実機確認できます。いちいちUSB接続などしなくても良いので楽。
• デプロイ機能
  APKを作ってくれたり、GooglePlayでの公開用の設定もひととおりやってくれるようです。こらはありがたい。テキストエディタでもJavaScriptは扱えるけど、スマホ向けデプロイはこういうツールを使わないとできないんで（私は）。これで作ったAPKをAndroidにインストールしたら、ちゃんと単品アプリとして動きました。
  ハイブリッドツールなので、iPhoneのアプリも当然できる…はず。
• エクスポートすると、プロジェクトをzipで吐き出してくれる。それでバックアップもできるし、展開するとPCブラウザ用アプリとして動かせます。（このBlogで公開してるように）

いいことばかり書きましたが、ちょっとした欠点もあります。

• PC単体でのデバッグ機能がイマイチ
  PC単体でエディットしてると、つまらないSyntaxエラーすら教えてくれない…。スマホ　と連携してスマホ側で実行すると、PC側にもエラー表示されるので、問題ないといえばないんだけど…PC単体でもちょっとしたエラーくらい教えて欲しい。
• オンラインでないと使えない
  クラウドなので、ネット接続してないと使えません。私のタブレットはWifiしか使えないので、喫茶店でちょっと見るだけでも、スマホでテザリングする必要があります。

…とまあ、そんなところもありますが、概ねいい感じで、最近気に入って使うようになってます。（前も書いたけど、Monacaそのものより、解説書で扱ってたEnchant.jsが気に入ったところも大きいけど）

もっとも、Flashでやってたようなことを再現できるようになるまでは、まだまだ習熟が必要ですね。あとは、自分の気力がな…。

世間的に、Monacaの認知度、どうなんですかね。
良いものなので、ぜひ普及して欲しいものです。
（HyperCardやFlashのように、滅んでもらっては困るし…）

(2017.3.18)

忍者サバイバー

忍者サバイバー（Ninja Survivors)をプレイ（HTML5)

　 ストーリー

戦え、抜け忍！　
あなたを亡き者にせんと迫り来る、悪虐非道の組織の者どもを、ひとりでも多く返り討ちにするのだ！

　 ルール

• 敵忍者を手裏剣で倒すと得点。
• 敵忍者は3種類。スコアが上がると手強い忍者が登場します。
• 手裏剣は同時に3発まで投げられます。
  （左上の手裏剣アイコンが表示されている時に、使用できます）
• 敵の手裏剣に当たると、残機が1つ減ります。3回当たるとゲームオーバー。

　 操作方法

• マウスで操作します（PC）
• 地面をクリック：そのX位置に高速移動します。　移動は左右のみです。
  （移動中に敵手裏剣に当たってもアウトです）
• 赤忍者をクリックしてから、ドラッグする：その方向に手裏剣を投げます。
  ドラッグするスピードによって、手裏剣のスピードも変化します。
  ※　単に赤忍者をクリックするだけでも手裏剣を投げますが、スピードは遅いです。
• ゲームオーバー時、画面の中央より上をクリック：タイトルに戻ります。

　 備考

今回は、久々のHTML5の習作です。

前作「ぐんまでGO!」は（自分としては）重めのFlash作でしたが…その反動もあって、軽く仕上がりそうなものにしました。

ゲーム的にも、特に新規なネタはないです。スワイプ操作で手裏剣を投げる雰囲気を出したかったのが、唯一ネタといえばネタですかね。（PCのマウス操作だと雰囲気出ませんが…）

あ、今回はSEはありません。
面倒だったのと、HTML5ってブラウザによって音が遅延するので、徒労な気がして。

-----

脱Flashの試みとして、HTML5の修行を続けてます。そこそこのことができるようになってはきたのですが…HTML5って、流派（？）が色々あるようで、本によって作法が微妙に違うんですよね…。どの流派で行くべきか迷ってしまい…同じようなことを何度もやり直してて…三歩進んで二歩下がる感じでした…。

そんな折、「Monaca」というHTML5+javascriptのハイブリッドアプリ開発ツールの存在を知りました。

Monacaについて詳しくは別途書いてみたいと思ってますが、とにかく今回はこれを使って1本でっち上げてみたという感じです。

本来、スマホアプリにもビルドできるようですが、今回はそこまではやらず（まだよくわかってない）、PC用にエクスポートしてみました。

総じていうとMonaca自体より、解説本を見て初めて使ったenchant.jsというライブラリ（フレームワーク）が使いやすかったのが収穫ですね。キャラアニメがさせやすかったし、本体が軽いのもいい。

今までcreate.jsを使ったり、ライブラリを使わずに試したりと思考錯誤してましたが、enchant.js派になりそうな予感。

(2017.2.15)

From Beyond

From Beyondをプレイ（HTML5）

（スタートボタンが1回で効かないことがありますが、その場合は再度押してみてください）

「From　Beyond（彼方より）」

　名状し難きストーリー

「やつらがいまおれを追っている－むさぼり喰い、溶かす奴らが。しかしおれは奴らをかわす方法を知っている。奴らが召使たちを捕えたように、今度捕えるのは、おまえなんだ……身じろぎしているな。動いたら危険だといっておいたはずだ。（中略）動いていたら、もうとうの昔に奴らに捕らえられていただろう。（中略）ほら、見ろよ。見るんだ。おまえの左肩にいるじゃないか……」（「彼方より」H.P.ラブクラフト）

　名状し難きルール

「奴ら」に捕まらないように逃げつつ、プラズマ銃で「奴ら」を破壊し、薬を取ってください。

• プラズマ銃で敵を倒すと得点。（距離によってポイントは変化）
• LIFEは時間で徐々に減っていく。銃を撃つとさらに減少。
• 薬を取るとLIFEが少し回復。
• LIFEが0になるとゲームオーバー。
• 茂みの中に入ると、プレイヤーも敵も動きが遅くなります。

プレイヤーの状態によって、状況が以下のように変化します

■　プレイヤーが動いている間

• 敵の姿が出現します。
• 敵がプレイヤーを追ってきます。
• 敵に捕まると、即時にゲームオーバー。

■　プレイヤーが止まっている間

• 敵の姿が見えなくなります。
• 敵がプレイヤーを見失い、ランダムに動きます。
• 見えない敵に接触しても、即ゲームオーバーになりませんが、LIFEの減り方が早くなります。
• 止まっている時に弾を撃つと敵が見えますが、止まっていれば即ゲームオーバーにはなりません。

敵は倒しても倒しても無限に沸いてきます。クリアはありません。最終的には自分がやられてゲームオーバーになるしかないという絶望的な部分も、ラブクラフト世界観なのです（適当）。

　名状し難き操作方法

マウスで操作します

• マウスカーソルとプレイヤーをある程度離す：その方向にプレイヤー移動
• マウスカーソルとプレイヤーが近い：プレイヤー停止
• マウスクリック：マウスカーソルの方向にプラズマ弾を発射（4方向）

　名状し難き備考

久々の自作ゲーム。今回もHTML5の習作です。
前作からえらい時間経って、ようやくコレかよという感じですが…。

前作までのHTML5のゲームでは、CreateJSの「EaselJS」という外部ライブラリを使用したのですが、その後、HTML5の基本仕様だけでもっとシンプルにできないのものか…と色々調べていました。

そんな時、EaselJSを使わないゲーム製作法を解説しているらしい参考書を見つけました。
その参考書の手法を学んで作ってみたのが、今回のゲームです。

（丁寧でわかりやすく、物理エンジンサンプルまで付いていて良い本です）

で、実際どうやって登場キャラクターを表示したりアニメしたりするのか…順に追って本を学んで行き、肝心なその手法のところまでたどり着いて、ちょっとビックリしました。

スプライトのような概念ではなく、フレームごとに画面を全部塗りつぶして、新たに全部描き直す（背景も、キャラクターも）という、豪快な方法だったのです！

そんなことをして処理速度的に大丈夫かいな、と思い、細かいキャラがわらわら出るゲームを作って試してみようと思いました。で、こんな感じの物を作りました。

ゲーム的には、以前やはりFlashのActionScript3.0習作時に作った「Alien Hunter」とほとんど一緒ですが…でもプログラムは全然流用してません（見直すのも面倒だったので）…。

見た目がレトロっぽいのも、別にスペックのせいではなく、意図的なものです。
ゲーム内容がレトロっぽかったのと、最近自分の中でレトロゲーム熱が高まっていたので、こんな感じにしてみました。（このゲーム内容のまま、リアルな絵に差し替えも可能です）

試してみたところ、この程度ならまったく問題なく動くようですね。まあ、こんなビジュアルなので、サンプルになるのかどうかもわかりませんが。

ということで「EaselJS」を使わないゲーム製作法を会得したわけですが…

…結果としては「EaselJSを使った方が楽そう」という感想でした…。やはり自分には、ASライクなEaselJSの方が使いやすそうです。まあ、作るものによって、ケースバイケースかなとも思いますが。

本作はラブクラフトの「彼方より」をモチーフにしてますが…

作り始めたときは、もっと普通のゲームにするつもりだったのです。ただ、「AlienHunter」に似すぎていて芸がないと思い、たまたま思い出した「彼方より」（HPL作品としては世間評は低いようですが、私は好き）をモチーフにして、こんなルールのゲームにしてみました。

その結果、わけのわからないゲームになってしまいましたが…まあ、実験作ですし、まじめにプレイする人なんていないだろうし、前衛的・ゲージツ的で、こんなのもいいんじゃないかなと。

実は、相変わらずFlashでの制作も平行していて、引き続きRPGっぽいモノを作ってます。当初思ってたものからだいぶ違うものになりつつありますが…。こっちはかなり複雑で、リソースも多く、まだまだ時間かかりそうです…。

(2016.5.11)

車間距離 -SUDDEN BRAKE-

「車間距離 =SUDDEN BRAKE-」をプレイ

　はじめに

車を運転する際、適正な車間距離ってどれくらいなのか。
以前は、速度の数字と同等なm（時速50kmなら50m）だと言われていましたが、最近では「3秒ルール」が提唱されているようです。
3秒ルールとは「前方の車との距離を3秒分取る」ということ。こちらの方がわかりやすいし、安全度は高いということのようです。

実際には「ある地点を前の車が通過してから自分の車が通過するまでの時間を計って3秒以上ならOK」というわけです。
しかし、実際やってみると、正確に測るのはなかなか難しい。

余裕を持って、5秒とか10秒くらいのつもりで空ければ、追突という意味では安全かもしれませんが…あまり空けすぎると、今度は車の流れを乱して後続車をイラつかせることになったり、空いた所に急に割り込みが入ってきたりして、それはそれで危ないこともある。

…なんてことを、運転しながら考えていたら、こんなゲームを作ってみたくなりました。

まあ、作りがいい加減なので、シミュレーターにはなりませんけど……反射神経の訓練くらいにはなるかも？

みんな大好きHTML5で作りましたので、ぜひプレイしてみてください。

※　ブラウザはChromeかIE推奨です。Safariではサウンドが遅延するようです。
※　このゲームはフィクションです。実際の運転には充分注意しましょう。危険なアオリはやめよう！

　ルール

前方を走る車に追突しないよう速度をコントロールしながら、なるべく速い速度で走ってください。
前方の車は急ブレーキをかけることもあるので注意！

追突してしまうか、TIMEが0になるとゲームオーバーです。

操作方法

マウスの位置で操作します。
画面上でマウスカーソルを上方に：加速
画面上でマウスカーソルを下方に：減速

※　タイトルのStartボタンの効きが悪い時があります…。スタートするまで何回か押してみてください。

備考

今年中に間に合った。今年最後の自作ゲーム。

今回もHTML5で作ってみました。

当初、画面作りはThree.jsでの3D表示に挑戦しようと思ってたのですが、2Dとの表示の合成の仕方がよくわからなかったり、ブラウザによって表示速度が著しく変わったりなど不都合があり（対処するのも面倒になって）、断念。

ってことで、「アウトラン」や「スペースハリアー」のような、昔懐かしい擬似3D表示にしてみました。
上下左右の動きはないので、アウトランなどに比べても、だいぶ手抜きですけどね。

使用している画像は…
運転席は、自前の車のものです。詳しい人には車種がバレるな（笑）。古い軽自動車です。

先行車は、誰とも知らない車を、車窓から勝手に撮影して使わせてもらってます…。
一応、特定できないように配慮はしたつもりですので、ご容赦を…。

道路脇の樹は、Photoshopのフィルターの描画機能で作ったものです。
世の中便利になってるなあ。こっちはどんどん堕落していく。

---

今年は、GooglePlayにアップするほどのゲームは作れませんでしたね。

Flashの方ではRPGモドキを作ってて、出来によってはGooglePlayも視野に入れてはいるのですが…
作るのに時間がかかるものは億劫で（特に絵素材とか）、今回のような小ネタを思いつくたび、脱線するというか逃げてます。

今年は本業が忙しかったせいもあるけど、Flashの先行き怪しさでモチベーションが下がってるんですよね。
かといって、完全にシフトするほどHTML5も信用できないしなあ…。

Flashも改称の機に、月額をPhooshopくらい安くしてくれればいいのになあ。無理か。

来年はいよいよ、決断の年になるのかな…。

(2015.12.26)