マイリスト 東方STGブラウザゲームをJavaScriptとHTML5で作成中 http://www.nicozon.net/mylist/38547755 Sun, 22 Sep 2013 15:34:46 +0900 Sun, 22 Sep 2013 15:34:46 +0900 ja 東方風STGブラウザゲームをJavaScriptとHTML5で作成中 その8 http://www.nicozon.net/watch/sm24664609 http://www.nicozon.net/watch/sm24664609 Sat, 11 Oct 2014 13:44:39 +0900 更新点 - WebRTCを用いたオンライン協力プレイ対応 - メインレイヤWebGL対応 - 自機視点への切り替え対応 - WebSocketを使用した他プレイヤーの状況表示 - グレイズ実装 - JavaScriptを真面目に勉強して、ガリガリ性能チューニング 協力プレイの転送データはお互いのキー入力のみ。後は全部ローカル処理。 たぶん格ゲーの方式と似ていると思う。 自機視点はお遊びってことで。 更なる描画性能改善ネタはあるが、設計変更が大きいのと、 色々と融通が利かなくなるため、採用するか迷い中。

東方風STGブラウザゲームをJavaScriptとHTML5で作成中 その8

Chrome上でプレイ可能。協力プレイの接続方法はこちら。http://d.hatena.ne.jp/takahirox/20140920/1411190305前: sm23482639 次: mylist/38547755更新点はマイリスト参照。使用素材はその1の親作品参照。音・絵は借り物で、プログラムは0から作成(WebGL用行列計算ライブラリ除く)。念願のオンライン協力プレイに対応。一人で二機の操作は無理だった。今度友人に協力してもらって撮り直すかも。あとせっかくWebGL使ってるから自機視点に(無理やり)対応してみたり。ゲームの完成度を上げる気はなくて、ブラウザゲームの機能面・性能面での実験場になってます。質問あったらブログにどうぞ。ブラウザMMDビューア→mylist/49125767

1:36｜2014年10月11日 13：32：09 投稿

http://www.nicovideo.jp/watch/sm24664609

]]> 東方風STGブラウザゲームをJavaScriptとHTML5で作成中 その7 http://www.nicozon.net/watch/sm23482639 http://www.nicozon.net/watch/sm23482639 Mon, 05 May 2014 14:49:43 +0900 更新点 - 背景レイヤにWebGLを採用し、3D表現が可能に＆背景描画の高速化 - 2D Canvasのarc()&stroke()が妙に重くなったので軽量化 メインの2D Canvasレイヤと背景用のWebGL 3Dレイヤの 2レイヤ構成を導入。背景の表現力が上がった。 メインレイヤのWebGL適用はまだ様子見。 2D Canvasの方が扱いやすいし。 次はもっと重い条件下での性能チェック＆チューニング予定。

東方風STGブラウザゲームをJavaScriptとHTML5で作成中 その7

0から作成中。使用ライブラリはWebGLのための行列計算ライブラリglMatrixのみ。詳細やプレイ(only Chrome)は下記リンク先。リプレイをサーバに登録することができるのでお試しあれ。http://d.hatena.ne.jp/takahirox/20140504/1399222894前: sm22137339 次: sm24664609mylist/38547755更新点はマイリスト参照。使用素材はその1の親作品参照。背景レイヤにWebGLを採用し、3D表現が可能になりました。ブラウザMMDビューア→mylist/49125767

4:39｜2014年05月05日 14：45：25 投稿

http://www.nicovideo.jp/watch/sm23482639

]]> 東方風STGブラウザゲームをJavaScriptとHTML5で作成中 その6 http://www.nicozon.net/watch/sm22137339 http://www.nicozon.net/watch/sm22137339 Mon, 28 Oct 2013 16:01:08 +0900 更新点 - 高速化のためにメモリ管理手法を変更 - 高速化のために細かなチューニング プロファイルにより、 メモリの確保とGCによるその解放が性能劣化の一因とわかったので、 メモリの管理を自前で行うことに。 その結果、ピーク時のメモリ使用量を25%カットし、 また、GCの負荷を99%カットさせることに成功。 描画の高速化は細かなチューンのみ。 描画が一番のネックなのに、改善ネタが思いつかない。 回転する弾に対してはプリレンダリングが適用できそうだけれど、まだ様子見。 次はパラメータ設定の仕様確定かな。

東方風STGブラウザゲームをJavaScriptとHTML5で作成中 その6

ライブラリなど使わず0から作っています。前: sm22039412 次: sm23482639mylist/38547755更新点はマイリスト参照。使用素材はその1の親作品参照。詳細やプレイ(only Chrome)は下記リンク先。リプレイをサーバに登録することができるのでお試しあれ。http://d.hatena.ne.jp/takahirox/20130819/1376894048高速化のためにメモリ管理手法を変えた結果、メモリの使用量を25%、GCの負荷を99%カットできました。他にも細かいチューンを行い、高速化は一段落したので、ようやく次のステップに進めそうです。今回も相変わらず霊夢と魔理沙のリプレイを垂れ流しています。ブラウザMMDビューア→mylist/49125767

9:01｜2013年10月28日 15：58：49 投稿

http://www.nicovideo.jp/watch/sm22137339

]]> 東方風STGブラウザゲームをJavaScriptとHTML5で作成中 その5 http://www.nicozon.net/watch/sm22039412 http://www.nicozon.net/watch/sm22039412 Mon, 14 Oct 2013 05:49:18 +0900 録画環境見直したい。画質はがくがくだし、プツプツ音は鳴るし。 更新点 - リプレイ機能の実装 弾が増えると重くなってきたので次は高速化を図らないといけない。 描画処理、特に背景描画処理が悩みの種。 背景がなければ、いくつか使える高速化テクニックがあるのだけれど…… そんなわけでゲーム性調整はまだまだ先。 ソースは公開しているので、原作のゲーム性を再現したい人は 自分でパラメータいじって。

東方風STGブラウザゲームをJavaScriptとHTML5で作成中 その5

ライブラリなどは使用せず0から作っています。前: sm21892468 次: sm22137339mylist/38547755更新点はマイリスト参照。使用素材はその1の親作品参照。詳細やプレイは下記リンク先で。Chrome上でプレイできます。http://d.hatena.ne.jp/takahirox/20130819/1376894048今回はリプレイ機能を実装しました。サーバに登録することで、他プレイヤーにリプレイを見せることができます。#0:00 ブラウザ上で動くアピール#0:03 リプレイ垂れ流し#4:33 リプレイ登録方法録画環境が酷い。実物はもっと快適な動作です。ブラウザMMDビューア→mylist/49125767

5:55｜2013年10月14日 05：48：18 投稿

http://www.nicovideo.jp/watch/sm22039412

]]> 東方風STGブラウザゲームをJavaScriptとHTML5で作成中 その4 http://www.nicozon.net/watch/sm21892468 http://www.nicozon.net/watch/sm21892468 Mon, 23 Sep 2013 15:49:55 +0900 まだまだまだゲームエンジン(フレームワーク)の調整中。 ゲーム性調整はまだまだ先。 音が若干飛んでいるのは、録画環境のせい。 更新点 - へにょりレーザーの実装(当たり判定はまだ先頭のみ) - 自機オプションの実装 - 音量バランスの調整 - 背景の変更 - アニメーションの一部調整 - スタッフロール実装 背景を変更したせいか、自機弾やアイテムが見辛くなった？　やはり背景は3Dにしたく、WebGLの採用を検討中。 次はリプレイ機能の作成？

東方風STGブラウザゲームをJavaScriptとHTML5で作成中 その4

ライブラリなど使わず0から作っています。前: sm21834381 次: sm22039412mylist/38547755前回からの更新点はマイリストを参照。使用素材はその1の親作品参照。詳細やプレイは下記リンク先で。ウェブブラウザ(Chrome)上でプレイできます。http://d.hatena.ne.jp/takahirox/20130819/13768940481面は魔理沙、2面は霊夢でプレイしています。背景変更のせいで弾やアイテムが見辛くなったかも。ブラウザMMDビューア→mylist/49125767

5:40｜2013年09月23日 15：47：33 投稿

http://www.nicovideo.jp/watch/sm21892468

]]> 東方風STGブラウザゲームをJavaScriptとHTML5で作成中 その3 http://www.nicozon.net/watch/sm21834381 http://www.nicozon.net/watch/sm21834381 Sun, 15 Sep 2013 17:04:22 +0900 更新点 - 音量バランスの調整 - 自機弾の調整 - 敵のダメージエフェクト追加 - ボスの移動にランダム性を追加 - ボスのアニメーションエフェクト追加 - ゲームオーバー処理追加 - ボムの暫定版実装 - ホーミング弾の角度調整 - その他アニメーションや表示の調整 まだまだゲームエンジンの調整中。敵弾や敵配置などのゲーム性調整はまだ先。 背景を3Dにしたく、WebGLの採用を検討中。

東方風STGブラウザゲームをJavaScriptとHTML5で作成中 その3

ライブラリは使用せず0から作っています。次: sm21892468 前: sm21742078mylist/38547755前回からの更新点はマイリストを参照。使用素材はその1の親作品参照。詳細やプレイは下記リンク先で。ウェブブラウザ(Chrome)上でプレイできます。http://d.hatena.ne.jp/takahirox/20130819/13768940481面は動画では初登場の魔理沙、2面は霊夢でプレイしています。ブラウザMMDビューア→mylist/49125767

5:10｜2013年09月15日 16：58：27 投稿

http://www.nicovideo.jp/watch/sm21834381

]]> 東方風STGブラウザゲームをJavaScriptとHTML5で作成中 その2 http://www.nicozon.net/watch/sm21742078 http://www.nicozon.net/watch/sm21742078 Tue, 03 Sep 2013 02:28:18 +0900 更新点 - 敵弾の見た目にバリエーションを追加 - 自機弾の速度を高速化 - ボスの当たり判定バグを修正 - アイテムの当たり判定を拡大 - 敵・ボスの消失アニメーションを変更 - ボスの移動方向によるアニメーションを追加

東方風STGブラウザゲームをJavaScriptとHTML5で作成中 その2

ライブラリなど使わず0から作っています。前: sm21734567 次: sm21834381mylist/38547755前回からの更新点はマイリストを参照。使用素材はその1の親作品参照。詳細やプレイは下記リンク先で。ウェブブラウザ(Chrome)上でプレイできます。http://d.hatena.ne.jp/takahirox/20130819/1376894048ブラウザMMDビューア→mylist/49125767

4:50｜2013年09月03日 02：19：52 投稿

http://www.nicovideo.jp/watch/sm21742078

]]> 東方風STGブラウザゲームをJavaScriptとHTML5で作成中 その1 http://www.nicozon.net/watch/sm21734567 http://www.nicozon.net/watch/sm21734567 Tue, 03 Sep 2013 02:26:15 +0900 JavaScript+HTML5が想像以上に高速に動くことに驚き。 目標 - 本家東方紅魔郷と同程度の弾数でも60fpsで動く - 弾やら敵やら弾幕やら、全てが外部パラメータで設定可能 性能、そしてゲーム作成者とのUIの考慮が第一優先で ゲーム性や演出は二の次三の次。 ゲーム性やら演出やらが気になる人は コード公開しているから適当にいじって。

東方風STGブラウザゲームをJavaScriptとHTML5で作成中 その1

急にゲーム(エンジン)が作りたくなったので。ライブラリなど使わず0から作成中。次: sm21742078mylist/38547755使用素材は親作品参照詳細は下記リンク先で。ウェブブラウザ(Chrome)上でプレイできます。http://d.hatena.ne.jp/takahirox/20130819/1376894048(半年後に追記)今見るとショット音の大きさがひどいな、これは。ブラウザMMDビューア→mylist/49125767

5:59｜2013年09月02日 00：53：15 投稿

http://www.nicovideo.jp/watch/sm21734567

]]>