2016年4月3日日曜日

【cocos2d-x】そして、伝説へ(set design resolution size does not work)

前回記事で、ドヤ顔でcocos2d-x導入編の記事を書いてみた訳ですが、解像度の設定がどうも意図した通りに動いていないらしい。
前回記事の図
glviewを
glview = GLViewImpl::createWithFullScreen("iblock");
で作成して、
glview->setDesignResolutionSize(320, 240, ResolutionPolicy::SHOW_ALL);
で、320x240を引き延ばして画面いっぱいに表示という風にしたつもりです。
が、どう見てもQVGAの荒さが感じられない...

試しに、320x240でWindowモードにしてみる。
glview = GLViewImpl::createWithRect("iblock", Rect(0, 0, 320, 240));

すると、下図のような感じになりました。
分かり易くするために、真ん中に表示されている画像を 128x48 ピクセルの SUZUKI PLAN FONT に変更しています。

では、この状態でもう一度フルスクリーンモードにしてみると...

うぉ!
文字がちっさいw
つまり、setDesignResolutionSizeが効いていないっぽい。
setDesignResolutionSizeが効いていれば、ウィンドウモードで起動した時と同じ比率で引き伸ばされた画像が表示される筈なので。

cocos2d-xだと、Macのフルスクリーンサポートは未だ不完全ってことなのかな。
cocos2d-xのソースを追っかけるのも怠い。
こういうことがよくあるからC++じゃなくてCで書いて欲しかった。C++は書く分には楽で、保守スパンが短いアプリとかならC++で書くべきだと思っているけど、他人が書いた未知のコードを追いかける時は、Cの方が楽なので。(アプリの保守スパンが短いというのは、最近の事情を勘案すると語弊があるかもしれませんが、銀行などの基幹系システムなどで利用されている20年もののプロダクトコードとかと比べればまだまだ浅漬け程度かなと)

cocos2d-xとは別の策を探るべきかな。
スマホ向けライブラリということで、PC向きに使うには未だ時期尚早だったのかもしれません。(Webで見つかるコードが割と互換性が無いものが多い点から見て、まだAPI仕様がかなりドメスティックに変わっているようなので、まだまだ安定していないようですし)
あと、コンパイルが遅すぎるのも怠い。

という訳で私のcocos2d-x利用の模索はここで一旦終了です。
早かったなぁー

やっぱり、VGSでPCサポートを完璧にするのが楽かな...

2016年4月2日土曜日

【cocos2d-x】導入〜解像度設定

この前、HTML5で作った Invader Block を cocos2d-x を使って PC に移植して、もうちょっと演出周りを凝らせてみて、Steamで販売してみようかと思い立つ。

VGSを使っても良いんですけど、PC用のVGSはサンドボックス用途での利用しか考えていなくて、WindowsはともかくOSXとLinuxもサポートしようとなると、現状の実装(SDL)では割と不満があります。(デフォルト状態で動かないのが一番の難点かと思います)

かといって、OSXとLinuxのネイティブ描画も凝らせようとするとそれだけで半年ぐらい浪費してしまう。という訳で、面倒なグラフィックス周りは既存ライブラリの力を借り、音声周りだけは vgs-bgm-decoder を使う方向で作るのがベターかなと。

そして、C/C++で書けて、Windows, Mac OSX, Linuxをサポートしているライブラリはcocos2d-xの一択ではないかと思います。(本当はランタイムはC++じゃなくてCの方が好みですが、CだとVGS以外に無さそうなので、この際、C++でも(C++13ぐらいまでのものなら)いいやと妥協)

という訳で、まずは導入。
git clone https://github.com/cocos2d/cocos2d-x.git
cd cocos2d-x
python download-deps.py
git submodule update --init
多分、全部で300MBぐらいあります。
デカイ...
気長にダウンロード。

そして setup & プロジェクト作成(iblockとかsuzukiplanといった部分は良しなに)
./setup.py
cocos new iblock -p com.suzukiplan.iblock -l cpp -d ~/cocos2d-x
cd ~/cocos2d-x/iblock
そして、OSX向けにコンパイル&実行してみる。
cocos run -p mac
これがまた長い...

が、無事 Hello, World! が起動。

ここまでなら README.md に書いてある通りのことだから、ブログに書いても芸が無いので、PCゲーム向けということで 320 x 240 (QVGA) の解像度 で フルスクリーン にしてみます。

WindowsでDirectXを使ったことがある人なら分かると思いますが、それだけでも実は結構面倒くさかったりするのですが、2行変更しただけでイケました。



変更箇所1: 44行目(createWithFullScreenを使う)
glview = GLViewImpl::createWithFullScreen("iblock");

変更箇所2: 59行目(setDesignResolutionSizeで解像度を設定)
glview->setDesignResolutionSize(320, 240, ResolutionPolicy::SHOW_ALL);

左右が少し黒く切れていますが、これは想定通り。
※Macの解像度は1280x800(Retinaなら2560x1600)なので、QVGAをアスペクト比を保った状態で画面いっぱいに引き伸ばすと、左右に余白が生まれる

2016年3月27日日曜日

MacでSTGが遊べるひゃっほい

ひとつ前の記事で、果てしなく大きな誤解をした状態でJamestownを紹介しましたが、念のため普通の(シングルプレイの方の)紹介記事を書いておきます 。
このゲームは、Steamで販売されているSTGです。
http://steamcommunity.com/app/94200/
2011年発売...結構古いですね。

なお、このゲームですが、先日記事に書いたゲームパッドとキーボードのマッピングをしなくてもゲームパッドで遊べます。というより、マッピングを解除して遊ばないと前の記事で書いた私と同じ過ちを犯すことになるので、注意した方が良いかも。
マッピングソフトは無効にしておきましょう(重要)

このゲームは、全5面のオーソドックスなSTGです。
ストーリーというか世界観は全部英語だからすっ飛ばしているのでよく分かりません。危険なオーパーツ的な何かに手を出したガイキチさんをぶっ倒す感じかな(適当)。
音楽は荘厳な感じのクラシック風で、かなり良いです。
神々しい(小並感)
ステージ5の道中音楽演出がかなり好みです。
ちなみに私は、STGに限らずゲーム全般で、ストーリーを読むのは稀です。というか初回プレーではまず文字を見ません(この癖は、RPGだと割と致命的かもしれませんが、ゲームプレイ+絵+音だけで面白いと思えたら最初からやり直して読むようにする)。東方Projectでも、ボス戦の会話文書を初めて読んだのは、確か紅魔郷をLunaticでノーコンティニューでクリアできるようになった後だったかな。

普通のSTGと違い、先ずは各ステージを個別にクリアしていく必要があります。コンシューマー向けのSTGでよく見る感じの練習システムですね。個別クリアすると、Gauntletというモードで全ステージの通しプレイができるようになります。

つまり、普通のコンシューマー向けSTGの練習モードに相当するものが本編で、本番相当のものが腕試し(オマケ)的な位置づけになっている感じでしょうか。これは、STG初心者向けの配慮かなと思います。STGが下手な人は大体前半ステージから先に進めず「私には無理だ」みたいな感じですぐに諦めてしまう(だから下手なまま)なのですが、個別クリア(=プラクティス)を本編にすることで、シューターに成り切れなかった人でもとりあえず全ステージ遊べる可能性を上げることが狙いだと思われます。(良い策だと思います)

なお、難易度によってGauntletのALLステージ数は異なります。
・Normal(ものすごく簡単): 全3ステージ
・Difficult(簡単): 全4ステージ
・Legendary(普通): 全5ステージ
・Divine(むずい): 全5ステージ

Normal と Difficult は練習用。私は初見でクリア余裕でした。
Legendary からが本番です。少しパターンを組まないとキツイ。
Divine はシューター専用ですね。未だ1〜3面までしかクリアしてませんが、完パターン必須なちょうど良い塩梅です。

Gauntlet + Legendary がこのゲームの本来のNormalモード
Gauntlet + Divine がアーケードSTGを嗜む人向けのHardモード
という感じでしょうか。

Judgement というのは未だプレイできないけど変態向けですね、きっと。出現条件は未だ調べてないけど、Gauntlet + Legendary をノーコンティニューでクリアとかすれば出るのかな?
追記: Divineを全ステージクリアしたら出ました(Judgement)。Judgementからはまぁ、予想通りというか、確実に変態向けですね。緑弾があるのでゴリ押し不可能の完パターン必須。よく分かってらっしゃる。Steamの日本語のレビューだとボリュームの少なさを指摘している人がチラホラ居ますが、あれは何なんだろう。(JudgementのGauntletをノーコンティニューでクリアしようと思えば数ヶ月ぐらいパターン構築に費やさないとできそうにないので、ボリューム的にはどう考えても十分過ぎる気がします)

とりあえず、まだプレイ3日目ですが、
1. Normalで3ステージ個別にクリア
2. Gauntlet + Normalで3ステージ通しクリア
3. Difficultで4ステージ個別にクリア
4. Gauntlet + Difficultで4ステージ通しクリア
5. Legendaryで5ステージ個別にクリア
6. Gauntlet + Legendaryで5ステージ通しクリア(ただしコンティニューあり)
あたりまでプレイしてみました。
Gauntlet + Legendary の 5 boss
(撮影に気を取られてこの後1miss)
上図の撮影で気を取られて1missしたので、残credit = 0, 残機 = 1 というかなりロマンシングな状態でしたが、とりあえず勝利。(勝てば良いのですよ、勝てば)

ゲームシステム的には、概ね怒首領蜂方式ですかね。
基本攻撃はショット + レーザー(低速)。

敵を撃破すると落とすメダルを集めると、任意のタイミングでハイパー状態みたいな感じになりますが、ハイパー状態になる時と解除する時に一定時間弾消しができます。ハイパー中にメダルを取るとハイパー時間が維持でき、ハイパーが時間切れになるとハイパー時間に応じたボーナスが入ります。ステージ1なら、最初にハイパーになってからボス戦直前までハイパーを持っていくと、Dificultならだいたい22万点入り、Legendaryなら44万点入ります。それに加えて撃破得点もx2になっているので、結構大きいですね)

ハイパーはすぐに貯まるので、慣れない内は回避処置として利用して、慣れてきたらなるべく維持時間を延ばすようにプレイすれば、スコアを大きく伸ばせるかもしれません。スコアを延ばすコツは、如何にハイパー時間を長く組ませるパターンが組めるかという感じでしょうか。

物凄く久しぶりにゲームらしいゲームをプレイした気分です。

Macでガッツリ遊べるSTGって少な過ぎるし、スマホとかなら沢山あるかもしれませんが、スマホの画面でチマチマ遊ぶのも飽きてきたというか、やはり、スマホだとガッシリと腰を据えて遊べるゲームよりも、ソシャゲみたいな怠惰的にプレイするゲームの方が向いているんですよね。(だから、PS4が売れているというのも分かる)

2016年3月26日土曜日

Jamestown

先日、Macでゲームパッドが使えるようになったのでもっと本格的なゲームが遊びたいぞという訳で、Steamを色々物色していたのですが、Mac対応のSTGってほぼ無いに等しいんですよねぇ... Windowsなら色々ありますが。(虫姫さまとか、Mushihimesamaとか)

で、少ない選択肢の中から数本購入して遊んでみた訳ですが、一番面白かったのがこのJamestownというSTGです。
http://store.steampowered.com/app/94200/

このゲームですが、割と特殊でシングルプレイでは遊べません※注記あり
最低2プレイヤ以上(最大4プレイヤ)選択する必要があります。
若干ルールが特殊なので。
※注記: 後の方で追記していますが、普通にシングルプレイモードもありました。ただし、このゲームのマルチプレイを一人でプレイしてみた感覚が割と新鮮だったから記事にしたので、そのままの状態で残しておきます。

このゲームには残機の概念がなく、プレイヤが全機やられない限りゲームオーバーになりません。仮にプレイヤが1機死んでも、生き残っているプレイヤが一定時間経過するまで粘るか、復活アイテム(Rというマークの赤いアイテム)を拾ってくれればすぐに復活できます。

複数人でマルチプレイすればきっと楽しいと思います。
・・・リア充専用ゲームかな?

などと、一瞬思ったりもしたのですが、このゲーム、実は一人でマルチプレイすることもできます。複数プレイヤに全く同じキーを割り当てることができるので。その状態でのプレイをすることで、「片割れさえ生き残っていれば良い」という前提で行動が可能になるので、通常のSTGとは異なった戦略で進められる点が割と新鮮だと思いました。

まぁ、でもやはり普通のコテコテのSTGを遊びたいです。
Windowsなら割と充実してますが、Macには現状皆無かな。
無いものは作れば良いという事か。

追記:
なにやら、果てしなく大きな誤解をしていたようで、このゲーム、ちゃんとシングルプレイヤーモードがありました。(まぁ、普通に考えて無い訳がないよねw)
何故、「マルチプレイヤー限定」と誤解していたのかというと、ゲームパッドをキーボードにマッピングさせる方法で使っていたのですが、どうやらこのゲームが単体でゲームパッドを認識していたようで、ゲームパッドとキーボード両方からの入力が認識されたために2Playerが操作しようとしたものとゲーム側が誤認識したっぽい気がします...(なんじゃそりゃ)
シングルプレイでプレイしたところ...まぁ普通のSTGかなという感じですね。
逆にインパクトが薄まったので、敢えて記事にするまでもない普通のゲームになってしまいました...
いや、完成度は結構高いし普通に良ゲーなのですが、STGに目が肥えてしまっているためか「普通の良ゲー」という感じです。

2016年3月21日月曜日

僕が考えた最強のHTML5ゲームのプログラミング環境

「僕が考えた」って訳ではなく、人から色々聞いたりして得た情報を元に自分で実際に作って試してみて、最終的に安定したHTML5ゲームのプログラミング環境を紹介します。

以下が最強だと思う
ツール用途
Visual Studio Codeソースコード編集
Chrome実行 + デバッグ
GitHubソース構成管理 + デプロイ

ソースコード編集(Visual Studio Code)
https://www.visualstudio.com/ja-jp/products/code-vs.aspx
Linux, OS X, Windowsで動くかなりシンプルなソースコード編集ツールで、フォルダを開けば、左側のツリーにフォルダ以下のファイルが一覧表示され、右側でソースコードが編集できるというもの。gitリポジトリのフォルダを開けば、差分内容が確認できて便利です。
「Webアプリケーション向け」と謳われてますが、最近はC言語のソースもこれを使って編集しています。IDEAでも良いんですけどね(しかし、IDEAは重すぎるのです...少し高いし)
ビルドはターミナル(WindowsならDOSプロンプト)でOKという人なら、どんな言語でもコレで大丈夫ではないでしょうか。HTML5(js)などのWebアプリケーションなら、ビルドが不要なので、多分これが一番最強だと思います。

実行+デバッグ(Chrome)
https://www.google.co.jp/chrome/browser/desktop/index.html
右側に表示されているデベロッパーツール(option + command + I)が便利。
コンソール出力の確認、例外時のコールスタックの確認、ブレイクポイントを設定したりポーズしてからステップ実行など、デバッグに必要なツールが一通り揃っています。

ソース構成管理 + デプロイ(GitHub)
ソース構成管理だけならgitで十分ですが、GitHub Pagesを使えばデプロイまで出来てしまうので、GitHubを使うと便利です。

私の場合、リポジトリ作成後にGitHub Pagesを作ったら、gh-pagesブランチをデフォルトブランチにしてmasterブランチを削除しています(つまり、gh-pagesをマスター扱いで使っています)

こうすることで、ソースをコミット(git add -A; git commit)してから git push と叩けば、GitHub Pagesに内容が反映できてしまいます。

あとは、GitHub PagesのURL(http://suzukiplan.github.io/html5-60fps-stg-demo/とか)を公開するWebサイトやブログなどに iframe タグで埋め込んであげれば、デプロイ(公開)までできてしまいます。

<iframe height="480" name="game" seamless="" src="http://suzukiplan.github.io/html5-60fps-stg-demo/" width="480"></iframe>

BloggerをAdSense連携させておけば、万が一ゲームが大ヒットした時にお小遣いが入るかもしれないので、良さげかも。

恐ろしいのは、ここに紹介したすべてのツールが無料ってことですね。
すごい世の中になったものだ...

2016年3月20日日曜日

EnjoyableでMacでWindows用のゲームパッドを使う

家電量販店のPCゲームパッドコーナーに行くと、軒並みWindows用のゲームパッドしか売っていません。稀に「Mac OS X対応」を謳っているゲームパッドも置いてありますが、実際に動かしてみると妙に誤動作をして更にガッカリしたりとか(経験済み)。

色々と試してみたのですが、最終的にココの記事を読んで、Windows用のゲームパッドをキー割り当てして使う方法がベターだと悟りました。(確かSteam Controllerとかもそういう方向性だったような)

ただし、上記の記事では有料アプリしか紹介されていませんが、「流石にこれぐらいのものなら無料であるのでは?」と思って探してみたら、ほぼ同等機能のものが有りました。
https://yukkurigames.com/enjoyable/
何か、見たことのある饅頭がいるな...

そこで、近所の家電量販店で適当に買ってきたゲームパッドをつないでみて確認。
ちなみに、購入したのは ELECOM の JC-U3312SBK
安かったし、「耐久性」の文言に惹かれました。

早速、JC-U3321SBKをMacのUSBポートに接続して enjoyable を起動。
ちゃんと認識してるみたいですね。
左側のタブに「Elecom Wired Gamepad #1」と表示されているので。

次に、パッドとキーボードのマッピングをします。
1. 左側のツリーから「Axis 1」の「Low」を選択
2. 右側のタブで「Press a key:」というラジオボタンを選択
3. キーボードの左カーソルを押す

と操作すれば、ゲームパッドの十字キーの左キーボードの左カーソルキー が割当たります。
少し分かり難いですが、JC-U3312SBKの場合、Axis 1 がカーソルキーのX軸、Axis 2がカーソルキーのY軸となっているようです。ボタンについてはゲームパッド(物理)に描かれている番号とenjoynable上の表示が一致しているので判り易い

それでは、上記の要領で以下のように割り当ててみましょう。
・Axis 1 - Low = 左カーソル (←)
・Axis 1 - High = 右カーソル (→)
・Axis 2 - Low = 上カーソル (↑)
・Axis 2 - High = 下カーソル (↓)
・Button 1 = Z
・Button 2 = X
・Button 3 = SHIFT

上記のキーマッピングは、東方Projectをプレイする想定でJC-U3312SBKのベストだと思われるキー割り当てをしてみた感じのものです。


そして、一通り割り当てたら、画面右上の「>」というボタンをクリックすれば、マッピングが有効な状態になります。
マッピングの 有効化 / 無効化 の操作は、スクリーン上部のツールバー(下図のアイコン)でもできます。(便利)

実は、GamePad Companionという1000円ぐらいする有料アプリも買って試してみたのですが、そちらには常駐機能が無いのでやや不便です。

下記の記事で実験中のHTML5製STGのデモが、これで遊べることを確認しました。
http://suzukiplan.blogspot.com/2016/03/html560fpsstg.html

2016年3月15日火曜日

HTML5で60fpsで動くSTGが作れる限界を探る

HTML5(JavaScript)で60fpsのSTGが作れる限界点を探ろうという趣旨の記事です。
以下のデモを随時更新していきます。(更新状況はコメントに記載)

(備考)
・PCブラウザ専用(Chrome推奨)
・カーソルキーで8方向に移動
・[Z] キーでショット発射
・[SHIFT] キーで低速移動

(PCブラウザ別の動作状況)
・Chrome: ◯ 正常に動作します
・Safari: △ 音が鳴りません(何らかのプラグインが必要?)
・IE: △ 音が鳴りません(何らかのプラグインが必要?)
・Edge: × 動きません(ロード途中で止まります)
・スマホ全般: × 動きません(ロード途中で止まります)

(ホスティング)
上記のデモははGitHubを使ってホスティングしています。
最初は suzukiplan.com でホスティングしていましたが、HTML5(静的ページ)ならGitHub Pagesでホスティングできてしまいますね。(しかも、修正をgh-pagesブランチへcommit後は git push だけでデプロイまで出来てしまうという手軽さ)
https://github.com/suzukiplan/html5-60fps-stg-demo

合理的ではないものを作りたい

ここ最近、実機版の東方VGSの開発が忙しくて、東方VGSの曲追加が滞っています。 東方VGS(実機版)のデザインを作りながら検討中。基本レトロUIベースですがシークバーはモダンに倣おうかな…とか pic.twitter.com/YOYprlDsYD — SUZUKI PLAN (...