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

S.F. Page

Programming,Music,etc...

nw.jsでデスクトップアプリを作る(19) - SVG pathをthree.js shapeに変換する(3)

とりあえず3Dっぽく回転してみようかなと。あとは馬をたくさん出演させることにチャレンジ。three.jsってよくできてるなぁ。やっぱり。 SVGからthree.jsのshapeへの変換(3) 目下の興味はいちからSVGから変換せずに、変換後のgeometryかshapeを保存しておいて…

nw.jsでデスクトップアプリを作る(18) - SVG pathをthree.js shapeに変換する(2)

描画がおかしくなるバグもようやく直った。 ソースコードと動くサンプル:SVGからthree.jsのshapeへの変換(2) ヒントは下記記事。 Converting SVG paths with holes to extruded shapes in three.js Converting SVG paths with holes to extruded shapes in …

nw.jsでデスクトップアプリを作る(17) - SVG pathをthree.js shapeに変換する

今日ようやくthree.jsで表示することができた。がまだ問題は残っている。 原因はまだわからない。 (コードとサンプルURL) http://bl.ocks.org/sfpgmr/6dcbf6d5f51d719bc764 実装するにあたっては下記のコードを参考&拝借している。 SVG path to Three.js …

nw.jsでデスクトップアプリを作る(15) - SVG pathをgeometryに変換する(5)

pathの絶対座標を相対座標に変換する問題はググるとあっけなく解決した。 Convert SVG Path to Relative Commands javascript - Convert SVG Path to Relative Commands - Stack Overflow 上記記事中のconvertToRelative()によって変換することができた。下…

nw.jsでデスクトップアプリを作る(14) - SVG pathをgeometryに変換する(4)

SVGのデータをバウンディング・ボックス単位で分割して座標補正をかける部分の続き。 各馬のpathデータのd属性の先頭にあるm(moveTo)命令のx,y座標からバウンディング・ボックスのx,y座標を引けばよいはずである。実験のためのコードは下。 これを実行すると…

nw.jsでデスクトップアプリを作る(13) - SVG pathをgeometryに変換する(3)

おととい作ったものは細部がつぶれすぎている気がするので再度トレースし直し、手動でバウンディング・ボックスを入れてみた。これを基準にセルを切り出していくことにする。切り出しはd3.jsでなんとかできそうだ。 image/svg+xml あとInkscapeではlayer = g…

nw.jsでデスクトップアプリを作る(11) - SVG pathをgeometryに変換する(1)

ビットマップをアニメーションしているだけでも工夫次第で相当なことができそうだ。がやはり拡大・縮小がきれいにできない。馬の形をgeometryで持てば拡大・縮小がきれいにできそうだし表現の幅も広がりそうなのでInkskapeでビットマップデータをトレースし…

nw.jsでデスクトップアプリを作る(10) - ファイル保存スピードを改善する

昨日ファイル保存コードを見直した。Window.capturePage()よりもcanvas.toDataURL()を使用したほうが速かった。 canvas.toDataURL()の出力がBase64文字列ではなく、型付配列にバイナリデータで出力するオプションがあるほうが余計な変換処理がいらず速いと思…

nw.jsでデスクトップアプリを作る(9) - アニメーション部分を実装するの続き

アプリから作成した動画をアップロードしてみた。 まあとりあえずテストとしては成功だが、映像表現としては最低レベルである。馬の疾走するタイミングはRydeenのテンポに合わせてみたつもりだが合っているような合っていないような。。 以下はThree.jsの動…

nw.jsでデスクトップ・アプリを作る (8)- アニメーション部分を実装する

馬のアニメーションを作り始めた。 http://bl.ocks.org/sfpgmr/9788400c632f51830e53 上はThree.jsで元画像を分割して表示してみたもの。みた感じ2Dだが、カメラの画角と位置を調整することでz座標が0の時にx,yが実ピクセル座標で表示するようにしている。 …

nw.jsでデスクトップ・アプリを作る (7)- アニメーション部分を実装する

いよいよアニメーション部分に取り掛かろうとしている。 前にも書いたように私が作っているRydeenのカバー曲に合うアニメーションということで、エドワード・マイブリッジの馬の連続写真をこねくり回そうとしている。 エドワード・マイブリッジ - 馬の連続写…

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

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

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 いじり – ゲーム作り

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

WebGL + three.js + Web Audio API いじり - 簡易シーケンサーの改良とか

簡易シーケンサーの改良 いやもうすっかりWeb Audio APIにハマっているわけですよ。大したことしてないけど。WebGLのことなどすっかり忘れてしまっている。。。大したものを見たい場合はg200kgさんのブログを見てください。 それはさておき、簡易シーケンサ…

WebGL + three.js + Web Audio API をいじる - 簡易シーケンサーを作る

簡易シーケンサーを作る なんとなくナムコ風の波形メモリ音源を作ってみている。8音同時発音できるようになったところで、MMLっぽいシーケンサーを作って鳴らしてみた。かなりいい加減なつくりだが、まあまあいい音が鳴るように思う。4ビットで32サンプルと…

WebGL + Three.jsをいじる - テキストとプログレスバー表示 - Web Audio API

テキスト表示 スコアやTOP10スコアなどの情報表示用にテキスト表示オブジェクトを作成した。これはレトロなゲームでよく使われていそうな8×8キャラクタービットマップを使い文字列を表示するものである。点滅とフォントの切り換えができるようになっている…

WebGL + three.js をいじる

縦画面シューティングを作り始める WebGL + three.jsを使用して縦画面のシューティングゲームを作ってみようといじり始めたが中身のアイデアが浮かばない。。頭に浮かぶのはギャラガやギャプラス、ギャラクシアンのプレイ画面である。この3つのゲームはそれ…

WebGLをはじめる

IE11がWebGLをサポートしたので 少し興味が出てきたのでドキュメントを覗くと、もうすでにプログラマブルシェーダーもサポートしていたのに驚き、ちょっといじってみることにした。 まずは開発環境作り 開発環境であるがまずはブラウザはChromeをベースとし…