読者です 読者をやめる 読者になる 読者になる

S.F. Page

Programming,Music,etc...

シューティングゲーム

Overpass APIとthree.jsで地図を3D表示(2)

スカイボックスを追加し、ビルにテクスチャを貼り付けてみた。リアルとは言えないが、雰囲気は出てきた。 大きい範囲を描画しようとすると相当に処理が重い。最適化しないといかんかな。。まあでも縦スクロールシューティングではかなり狭い範囲を描画するの…

Overpass APIとthree.jsで地図を3D表示

下の記事のコードをベースに、OverPass APIとthree.jsを使って、建物を3D化して表示してみた。 qiita.com 表示してみた結果は以下の通り。 参考にしたコードは、建物の高さデータを利用していなかったので、利用するようにしたのと、高さデータがないものは…

Open Street Map(OSM)周りのJSライブラリを調べる

背景の描画を省力化するために地図データから街並みを作ることを試みようとしている。OSMであれば建物を上から見た形状データがあるので、それをY方向に膨らまして屋根と壁にテクスチャを貼り付ければ、手っ取り早く背景マップができるのではないか。Google…

GISデータ(Open Street Mapのデータ)を活用して背景を描いてみることにする

シューティングゲームの内容を考える前に、グラフィック・リソースをどのように確保するかを考えていた。グラフィック・リソースが用意できないことにはゲームは作れない。その中でももっとも重要なのが背景である。縦スクロールシューティングは大量の背景…

CRT風ポストエフェクトを追加してみる

Shader Toyのコードを拝借して若干手を加え、CRT風ポストエフェクトを追加してみた。比較のために画面の右半分だけにエフェクトを追加している。 元のポストエフェクトのコードは以下。 https://www.shadertoy.com/view/4scSR8 なかなかレトロな雰囲気を醸し…

背景をスクロールしてみる

今日は背景をスクロールさせてみた。 Blenderのアドオン「amasawa tools」の「make buildings」で背景を作って、スクロールしてみた。パースがきちんとかかるのは3Dならでは。 今回は3Dビューだが内容は2Dの縦スクロールシューティングとなりそうであ…

弾を発射してみる

弾を発射してみた。 ZキーまたはコントローラのAボタンで弾を発射できる。四角いワクはバウンディングボックスである。 動くデモ: http://github.sfpgmr.net/2dshooting2/devver/20170414/ レポジトリ: github.com 2D風スクロール・シューティングとなるよ…

DOGA-L1で適当に作った3DキャラクタをBlnederで加工、エクスポートし表示してみた。

DOGA-L1で適当に作った3DキャラクタをBlnederで加工、エクスポートし表示してみた。 一応下が動くデモ。カーソルキーかゲームコントローラで上下左右に動くのみ。 http://github.sfpgmr.net/2dshooting2/devver/20170412/ ちょっと視野角を狭めて、2Dっぽく…

ゲーム登場キャラクタのグラフィック作成にかける労力を削減する方法を検討する

キャラクタのグラフィックリソースを作り始める 自機キャラクタのグラフィックをblenderで作り始めた。 www.blender.org blenderはフリーのモデリングツールでは一番有名なものである。このツールを選んだ理由は過去何度かこのツールを使ったことがあるから…

キャラクターをBlenderで作り始めることにする

何はともあれ、ゲームキャラクターをまず作って、それを動かしてみることから始める。 キャラクターのイメージとしては、ゼビウスのような感じでいこうかなと思っている。 ドット絵のグラフィックエディターを使ってチョコチョコ作っていこうかなと思ったが…

飛翔鮫3D

飛翔鮫はシンプルながら、敵配置が絶妙なシューティングゲームである。パワーアップシステムもシンプルだが、敵の難易度とのバランスも良く取れている。 それを3D化したものを見つけた。私はこういうやつを作りたいんだよね。ほんとは。でもベタな2Dシュ…

私が過去製作したシューティングゲームを振り返る。

私が一番最初に作ったシューティングゲームはおそらくMZ-700のWICSという言語で作った、ミサイルコマンドもどきであったと思う。ツクモのアナログジョイスティックを購入し、その反応の滑らかさを生かしたものを作りたかったのだ。 次に作ろうとしたのが、ゼ…

縦スクロール・シューティングを作るにはマップエディタとドット絵エディタを作らんといかんなぁ。。

とりあえず開発環境を整え、古いシューティングゲームのコードを修正し、動くようにした。 ES6をbabel + browserifyでbundle.jsでまとめていたが、これをrollupに変更した。するとimport周りが動かない。 どうもイレギュラーな書き方をしてしまっていたよう…

2Dシューティングを再び作ることにする。

またちょっとHTML5でシューティングゲームを作りたくなってきて、手をつけ始めた。 github.com 縦スクロールのシューティングを作ろうと思っている。前作ったシューティングゲームもどきをベースに作ろうかなと。 しかしその「もどき」がバグだらけで今日は…

敵エディタを作る - three.jsで2Dシューティングゲームの続きを作る(13)

非常にゆっくりだが、敵エディタの実装を続けている。もう少しでできそうな気もするが、まだまだな気もする。 ジェネレータの使い方がまだいまいちで、変なコードになってきている。が、まあそれは二の次にしておこう。とりあえずエディタを完成させて、ゲー…

敵エディタを作る - three.jsで2Dシューティングゲームの続きを作る(12)

敵エディタをぼちぼち作っている。 ギャラガタイプのシューティングゲームなので「敵編隊」と「敵1つ1つの動き」の編集が必要だ。まずは編隊の情報を編集する画面を作っていて、ある程度めどが立った。画面自体にはWeb Audioのシーケンス・エディタで作った…

three.jsで2Dシューティングゲームの続きを作る(11)

開発支援ツールを動かすときはElectronで動かすようにしてみた。作成したデータを保存する必要があるし、そうしたほうが何かと便利そうなので。 ブラウザ版とソースコードをできる限り共通化して、開発支援ツールはブラウザ版ではインクルードせず動作するよ…

three.jsで2Dシューティングゲームの続きを作る(10)

ちょっとまだBUGが残っているが、面を先に進めることができるようになった。20面を超えるあたりでは難易度が鬼のようになっていることが判明した。

three.jsで2Dシューティングゲームの続きを作る(9)

開発を支援するツールを作成し始めた。亀のように鈍い進み具合だが。そういう言い方は亀に失礼か。。 敵の動きをエディットするツールを作る前に、ゲームの任意の面で開始したり、ポーズしたり、リセットしたりする機能を実装している。それはもうちょっとし…

three.jsで2Dシューティングゲームの続きを作る(8)

今週はあまり時間がなかったので、先にゲームパッド対応をしてみた。 github.sfpgmr.net XInput対応のゲームパッドであれば動くはずだ。一応Chrome,Firefox,Edgeで動くことは確認した。 このゲームパッドAPI、ブラウザの実装度は低いと思ってたけどそんなで…

three.jsで2Dシューティングゲームの続きを作る(7)

とりあえずジェネレータ化は終えた。いまいちな実装であるが、ゲーム内容の充実に時間を割きたいので先に進むことにする。 github.sfpgmr.net とりあえず敵の動きのパターンを増やすためのユーティリティを作ることにする。今のままでは敵の動きを作るのが面…

three.jsで2Dシューティングゲームの続きを作る(6)

ジェネレータでタスクシステムの書き換えを行っているところ。この休日でほぼほぼ終わりそうだ。だがジェネレータの良さを生かしているとちょっと疑問なコードとなっているが、まあそれはおいおい手直しすることにしよう。 これが終わったら敵の配置や動き作…

three.jsで2Dシューティングゲームの続きを作る(5)

今コードをジェネレータを使って書き換えている。やっぱりジェネレータを使ったほうが状態保持のための変数を用意・管理しなくていいしね。これをしなくていいのはジェネレータがyieldを発動した時点の状態を保持してくれるからだけど。面倒な部分を言語が肩…

three.jsで2Dシューティングゲームの続きを作る(4)

新しいフィーチャーを追加しようとしたが、敵の移動データを入力するのが面倒なので、どうしようか思いつつ、コードがちょっと汚いというか古臭いという感じなので書き換えていた。といってもそれで洗練されたかというとそうではないのだが。自機のデザイン…

three.jsで2Dシューティングゲームの続きを作る(3)

続きを作ると宣言したものの、これといったアイデアは依然としてない。考えていることを列挙すると ボーナス・ステージの内容をどうしようか。ギャラガとかギャプラスのボーナス・ステージは楽しかったな。 1-3面を通常、4面をボーナス、5面をボス敵にし…

three.jsで2Dシューティングゲームの続きを作る(2) - gulp + babel + browserifyでビルドするように変更し、コードを修正した。

表題の通り、シューティングゲームのビルドをgulp + babel + browserifyで行うように変更した。 コードはファイルで分割していたものの、モノリシックな構成になっていたので、ファイル単位でモジュール化を行った。 といってもファイル間で疎に保てているか…

three.jsで2Dシューティングゲームの続きを作ることにする

2Dシューティングゲームの続きを作ることにする。 この作りかけは現時点ではギャラガの劣化版となっているが、何か新たなアイデアを追加してそこそこ遊べるようなものにしたいと思う。 といってもまだこれといったアイデアはないのだが。ちょっと隕石のよう…

2Dシューティングゲームを修正する

DownWellに触発され、ゲーム作りをしたくなってきた。まずは以前作ったギャラガもどきの2Dシューティングゲームを手直し。 動くものは下記。Chrome/Firefox/Edgeでの動作は確認した。 github.sfpgmr.net このゲームはthree.jsを2Dレンダリングエンジンとして…

three.js + WebAudio + socket.io で作った2Dシューティングゲームを久しぶりにいじる。

久しぶりに作りかけの2Dシューティングゲームをいじる とりあえずブログカスタマイズも一段落したので、VPSサーバー内のコンテンツを整理しようとしている。以前作りかけていたシューティングゲームが動作するのかチェックしてみたところ、Chromeでは今のと…

Blenderで敵キャラを作り始める

モデリングをはじめる 敵キャラの種類を充実させようとして、モデリングを始めた。 もう10年くらい前からBlenderを使っているのだけれどもいっこうに上達しない。絵心がないせいかモデリングはやっぱり難しい。でもキャラをペイントツールとかで作るよりは楽…

three.js + WebAudio + socket.io – ゲーム作り(4)

socket.ioとnode.jsでTop10スコアを管理・共有する 今週はsocket.ioを使いTop10スコアをサーバーで管理・プレイヤー間で共有する仕組みを作っていた。ノーコン・キッドを観て、ゲームのTop10エントリとか結構うれしかったことを思い出したので、作ってみたく…

WebGL + three.js + Web Audio API – ゲーム作り(3)

何とかゲームの体裁に なんとかゲームとしてプレイできるようになった。まだギャラガもどきの状態のままであるが、自機をバックショットできるようにしてみたり敵を背後に配置してみたりしている。xキーでバックショットできる。 ギャラガ的な面クリアタイ…

WebGL + three.js + Web Audio API いじり – ゲーム作り(2)

今の状態 自機や自機弾、敵の動きを作っているところ。でもまだまだ。一応自機弾と敵とのあたり判定も入れてみた。 動くバージョンはこちら(要PC版Chrome) けっこう「らしく」なってきた。でも今のままだとギャラガの劣化版コピーゲームになってしまうので…

WebGL + three.js + Web Audio API いじり – ゲーム作り

自機や敵の動きを作っている 簡易シーケンサーはだいたいできたかなということで、ゲーム本体を作っている。ギャラガのようなシューティングゲームを作るべく、まずは自機の動きを作り、今は敵の動きを作っている。あの編隊飛行しながら出現して、大編隊を組…

Box2D + WinRTでゲームを作る (20) – タイマー遷移コードの改良

タイマー遷移コードの改良 ゲームオーバー表示を数秒表示してメニューに戻るコードは作成できたけれども、表示をキャンセルしてすぐメニューに戻るようにし、このタイマー遷移コード自体を使いまわしできるようにしてみた。 template <typename EventClass,int Resolution> task<void> create_timer_tas</void></typename>…

Box2D + WinRTでゲームを作る (19) – task.then()のスレッド実行コンテキスト

ゲームオーバー時の処理 ゲームオーバー状態に遷移してから3秒後にメニュー表示に戻るコードを考えていて、思いついたのが下記のコード。 struct GameOver : msmf::state<>{ template <class Event, class Fsm> void on_entry(Event const& ev, Fsm& ) { GameMain^ g = ev.getGameMai</class>…

Box2D + WinRTでゲームを作る (18) – Boost.MSMで実装を進める

実装を進めている お粗末だが今のところできている状態遷移コードをArgoUMLというツールで書いてみた。ここんところ仕事もばたばたしているし、コンフェデ杯もあったのでプログラムに割く時間はあまりなかった。 まあこんなところだ。ゲームの状態遷移はもう…

Box2D + WinRTでゲームを作る (17) – Boost.MSMで実装を進める

Boost.MSMでゲームの大まかな遷移をぼちぼち実装している。なかなか面白い。 何が面白いのか語れるほど習熟しているわけではないので、どう言えば的確なのかもわからないで書くのだけれど、まあMSMに状態遷移の分岐処理を任すことができるので、その状態でイ…

Box2D + WinRTでゲームを作る (16) –bleis 削除ゲーム

Boost.MSMを使って今試行錯誤しながらコード書いている。書いている途中でゲームのMSMによる実装例を発見。 Boost. 勉強会 #5 に参加してきた。 このコードは非常に読みやすくかつすっきりした感じである。参考にさせていただこう。

Box2D + WinRTでゲームを作る (15) – 状態管理をBoost.MSMで実装する

今週は水曜日あたりまでBoost.MSM関係のドキュメントをチェックして、木曜日からおそるおそるコードを書き始めた。チェックしたドキュメントは下記。MSMで実装しようとするとほぼ必ず読み返している。 Boost.MSMのドキュメント Boost.statechart / Boost.msm…

Box2D + WinRTでゲームを作る (14) – 状態管理をBoost.MSMで作る

下のソースコードはXAML DirectX 3D shooting game sampleのApp.xaml.cppのUpdateメソッドを引用したものである。このコードはゲーム状態管理の実装でもある。 //-------------------------------------------------------------------------------------- v…

Box2D + WinRTでゲームを作る (13) – Menuページを作る

ページ切り換えのアイデア 最初UIの切り換えをWindow::Current->ContentにFrameをセットしてページを遷移する方法、つまり普通のやり方でやろうかなと思ったけれど、ページの中にFrameを埋め込み、そこにページを埋め込むやり方もあることを知り試すことにし…

Box2D + WinRTでゲームを作る (10) – Direct3DよるBox2Dオブジェクトの表示

Box2DオブジェクトをなんとかDirect3Dで表示できるようになった。 ソースコード 凸多角形の三角形分割は簡単そうな情報を得たので、8角形まで手で描いてみて規則性を確認してみた。 これで規則性がよくわかったので、分割して表示する方法に変更してみた。描…

Box2D + WinRTでゲームを作る (9) - 凸多角形の三角形分割

Bpx2DオブジェクトをDirect3Dで描画するためのコードをようやく書き始めた。結局コンピュートシェーダーは使わずにオーソドックスの頂点データを渡して描画する方法にした。座標変換はBox2D座標を頂点シェーダーで変換して表示する。といってもDirect2Dで描…

Box2D + WinRTでゲームを作る (8)

私の使っているビデオカードは、Geforce450GTSである。まあ普通のスペックであるがもう1年以上前のもので、Feature Levelは11.0である。このディスプレイカードでどういうオプションが使えるのかD3D11_FEATURE_D3D11_OPTIONSを引数にCheckFeatureSupportで調…

Box2D + WinRTでゲームを作る (7) - FluidCS11サンプル

昨日今日と、今やろうとしていることになんとなくパーティクルあたりのサンプルも参考になるのではということで、「FluidCS11」サンプルのシェーダーコード辺りを読んでいた。 このサンプルは2次元流体シミュレーションをコンピュートシェーダーで行って表示…

Box2D + WinRTでゲームを作る (6) – Box2Dの処理結果をDirect3Dで描画する (2)

今日もどうやってシェイプを描こうか考えていた。考えていたというよりは、シェーダーについて学びかつその技術が描画に使えるかどうかを吟味していたというほうが正しいだろうか。 ヒントになったのは「Direct3D sprite sample」である。頂点データはいわゆ…

Box2D + WinRTでゲームを作る (5) – Box2Dの処理結果をDirect3Dで描画する

Box2Dの処理結果をDirect3Dで描画するため、シェーダー周りをどう作ろうか思案しているところである。実際のゲームではビットマップに置き換わるのだけれども、デバッグの時にシェイプやジョイントを表示できるようにしておけば便利である。頂点シェーダーは…

Box2D + WinRTでゲームを作る (4) – 動画出力できるようになった。

今週はWeb上のDirect3D、Media Foundationのリソースを参考にしながらコードを書いていた。まあなんとかスワップチェインの内容を動画出力できるようになった。 ソースコード ここで考えた手順でほぼうまくいった。 一応720p/30fpsでの出力はできている。今…

Box2D + WinRTでゲームを作る (3) – 動画出力方法を考える

今日はMedia Foundationドキュメントをみながらスワップチェインをどう出力するのかを考えていた。GPUメモリ -> CPUメモリの転送も極力減らしたいし、 拡大縮小もGPUにやらせたい。で以下の手順でいけるのではないかと。 スワップチェインと同じ大きさのテク…