たけなか制作日誌

年明け第１作目として、何かシンプルでかつちょっとマイナーな感じのものを作りたいなと
思ったので、クレヨンしんちゃんに登場する魔法少女もえぴーを作ってみました。

…マイナー過ぎな上に髪型が少し違ってしまったので誰も分からないかもしれないですね。。
ちなみにクレヨンしんちゃんのアニメは子供の頃はほとんど見てませんでしたが、大人に
なってから結構面白いなと思うようになりました。やっぱりダメだ的なオチとアットホームな
オチの2パターンくらいしか無いのですが、毎回オチがしっかりしてるしキャラも味があって
個人的に好きだったりします。

そういえば年々ゴールデンに放送するアニメが減ってる気がするが、何でだろうなあ。
色々と考えてはみるものの、、これといった答えが無いように思う。

2012．あけましておめでとうございます by たけ on pixiv

新年明けましておめでとう御座います。
昨年は大地震やら何やらと、色々あってあまり制作に手がつかなかった感じが否めません
でしたが、今年は皆が元気を出し合っていい1年になるんじゃないかなとそんな気がします。

さてさて、さっそく今年の年賀状をpixivに投稿しましたので、興味のある方は是非見て
下さい。今年の年賀状はちょっと爺さん婆さんを描こうというサブテーマを勝手に設けて
みましたが、辰と組み合わせるのはどうも難しく…最終的にこたつでくつろぐといった
感じに落ち着きました。

それでは、今年1年もどうぞ宜しくお願いします。

近頃HTML5界隈で注目を寄せている(？)CanvasとWebGLという代物。自分のサイト
にも導入したいなあと思いつつも、実際は対応ブラウザが少ない状況ということで保留に
していました。「Canvasだったらexcanvas.jsでエミュレートできるけどWebGLだと無理
だし。実際に普及するのは2～3年後くらいだろうな。」と思ってましたが、調べてみると
なんとあるんですねこれが。

JebGLというちょっと名前をもじっただけのネーミングですが苦笑。Javascript+Javaで
WebGLをエミュレートしているみたいです。…す、すげぇ。。
内部的にはJavaからOpenGLを使用するJOGLを使用しているということだったので、
「え？それだと別途インストールがいるんじゃないの？」と思いましたが、必要なJarやJNLP
ファイルをサーバーに設置すれば別途インストールがいらないことが分かりました(おそらく
Minecraft当たりもこの辺の手法を使ってるんだろうなと邪推してみたり)。

ちなみにJebGLはまだ開発途中といった段階なので、FPSを下げて描画してもクリア処理
だけは60FPS分更新するために画面がちらつくといったRedrawバグが発生していたり、
自分の環境ではJarディレクトリをデフォルトURL以外に設定すると正常に動作しない問題
が発生したりしましたが。プラグイン等のインストール無しでお手軽に触れるのがWeb3D
の何よりの強みだと思うので、JebGLには今後期待したいところです。

とりあえず、現段階でもWebGLの機能はほとんどカバーできていることが分かったので
CGSNSのような3Dビューアのちらつきが起こらない版を作ろうかなと考え中です。

本日はトップページのスタイルがブラウザによって崩れるのを少し修正しました。

今までIE8でLightviewを使うと四隅の角が表示されない不都合が起きていたので
強制的に互換性モードに設定していたんですが、最新版のLightViewとprototype.jsを
使用すると正常に表示されました。それと今までトップページをテーブルで組んでいた
のをフロート要素で組みなおしたり、JavascriptでブラウザによってCSSを切り替えて
いたのをクロスブラウザ用に設定した共通のCSSでまとめれるようになったり、
とまあそんなところです。

WEBクラップも今まで送信コメントが文字化けされる問題が起きていたので文字化けが
起こらないように修正したのですが。。Chrome,SafariだとWEBクラップページ全体が
文字化けします；；これはトップページがShift-JISでWEBクラップページがEUCに
設定されていて、Chromeはiframe要素内のページは全体のページの文字コードを
そのまま利用してしまうことが原因だったりします。

WEBクラップページをShift-JISにするかトップページをEUCにすればいいだけの話
なのですが、WEBクラップページで使用しているO3Dは何故かEUCでないと動作しな
かったり、逆にトップページをEUCに使用とすると今度はサーバーの仕様上全ての
ページをEUCコードとして扱う問題が起こってしまいます。つまり日誌のCGIや掲示板の
CGIのコードも調べ直してEUCコードに変換しないと文字化けしてしまう訳です。

さすがにそれは自分の手に負えない…。ということで、現在はWEBクラップのページは
iframeをOFFで表示させています。今のところこれが精一杯なのでした。

追記：
Chrome,Safariの問題は文字コード指定部分が"EUC-JP"ではなく"EUC"に
なっていたのが原因でした。その辺厳密なようですね。

つい先日ですが、ネットで調べ物をしていてちょっとよさげなソフトを見つけたので、
今日はそのソフトについて少し紹介したいと思います。

はい、Construct 2という2Dゲーム作成ソフトです。
国内で有名どころの2Dゲーム作成ソフトだとRPGツクール、Multimedia Fusion
(もしくは旧Click&Createの名前の方が有名かな？)辺りがありますが、Construct 2は
HTML5を利用してWEBアプリケーション用にビルドします。つまりWEBゲームが
簡単に作れてしまうわけです(以前自分が作成したHTMLマ○オは簡単に作成
できました)。どうせプラグインがいるんでしょ？と思うかもしれませんが
…なんと、JQueryとHTML5しか利用しないのでプラグインはいらないんです！
(若干TVショッピングみたいなノリになってますね苦笑；)

まあ、個人的には外部ライブラリやFlashを使用せずにJavascriptだけで何とかしよう
という部分に好感が持てました。それにしても調べてみると結構HTML5用のライブラリ
多いですね。他にはUnity辺りもWEBやiPhoneといった路線を強調しているし、最近は
SilverlightやWebGLで手軽にWeb3Dが扱えるようになってきているので今後Web
コンテンツの売りとして3Dが増えてくる可能性が無くも無いなあと思いました。

そこで、3Dとまではいかなくても自前のJavascriptゲームエンジンがほしいな、という
ことで、さっそく作ってみました笑。まだ一部の機能しか確認していないので簡単なこと
しかできませんが、とりあえずスプライトを作成してマウスカーソル位置にあわせると
いうスクリプトを組んでみました。以下がスクリプトのゲームループ部分の抜粋です。

// ページの読み込みが完了後に1度だけ呼び出される関数
window.onload = function(e){
　// シーンを初期化
　MALScene.Init();
　// スプライトを作成
　MALScene.CreateSprite(
　　"Sprite1",
　　"./Sprite1_Tex.gif",
　　10, 10, 0,
　　30, 30,
　　0, 0
　);
　// ゲームループを実行
　GameMain();
　// マウス座標の取得
　document.onmousemove = function(e) {
　　MALScene.GetMousePos(e);
　}
　// キーが押された場合はキーバッファを更新
　document.onkeydown = function(e) {
　　MALScene.GetKeyState(e,true);
　}
　// キーが離された場合はキーバッファを更新
　document.onkeyup = function(e) {
　　MALScene.GetKeyState(e,false);
　}
}
// ゲームのエントリーポイントとなる関数
function GameMain(){
　// スプライトの座標をマウスカーソルの座標に設定
　MALScene.SetPos(
　　"Sprite1",
　　MALScene.MousePosX,
　　MALScene.MousePosY
　);
　// 指定時間後に再びGameMain()関数を実行
　setTimeout( "GameMain()", MALScene.FrameTime );
}

まだ途中なので公開は控えますが、クロスブラウザ対応である程度古いブラウザでも
動作するようになってます。ちなみにMALは”My Ajax Library”の略ですが、ネーミング
センスが疑われるかもしれません苦笑；

今日はHLSLでGrass Shaderを実装してみました。もうちょっと実装するのに時間が
かかるかなと思ってましたが、、構想から完成まで1日でできてしまいました笑。

以前作成したAtmospheric Scattering Shaderと併用できるようにソースもなるべく
簡素に設計してみたため、今回はお手軽サイズということでソースを公開してみたいと
思います。基本的にほぼオリジナルな設計なので、どこかのライセンスとかには引っか
かっていない…はずです。使ってみたいという方はご自由にどうぞ～。

　// 草の傾きを時間経過で変化させる係数(0～1)
　float GrassWaveTime = 0.0f;
　// 草の傾きのスケール係数の逆数
　float InvGrassWaveScale = 1 / 200.0f;
　// 草の最大傾斜角度[ラジアン]
　float RotateRange = 20.0f
　* 0.017453292519943295769236907684886f;
　// 回転量[ラジアン](-RotateRange～+RotateRange)を取得
　// cf.frac()だけだと端を超えた場合に反対側に飛んで
　// しまうため( abs(frac(x)-0.5f) * 4 - 1 )で補正し、
　// frac(x)の値が0,1の場合は+RotateRange側、frac(x)の
　// 値が0.5の場合は-RotateRange側に傾くようにしている。
　float RotValue = ( abs( frac(
　(IN.Pos.x + IN.Pos.z) * InvGrassWaveScale + GrassWaveTime
　) - 0.5f ) * 4 - 1 ) * RotateRange;
　// Cos,Sinを計算
　float2 CosSin;
　sincos( RotValue, CosSin.x, CosSin.y );
　// Z軸回転による座標増分値を計算
　// cf.Z軸回転は(xcos-ysin,xsin+ycos,z)だが、ここでは
　// (x,y,z)は(0,1,0)なのでy成分以外は0に省略できる。
　// また、AddPos.yの最大値は0になってほしいためy成分を
　// 1引いている。
　float3 AddPos = float3(
　-CosSin.x,
　CosSin.y - 1,
　0.0f
　);
　// Y軸座標値が大きいほど回転するようにスケーリング
　AddPos *= IN.pos.y;
　// 回転による移動値分だけ座標を変更
　Out.Pos += AddPos;

日記の使用上、インデントが汚いのは仕方ないところですね；それとこれ以外に傾きが
大きいほど頂点カラーが暗くなるように設定してたりしますが、ちょっとまだ怪しい設計
だったりするので、その部分だけカットしておきました。

いつもは新しい設計にすごく時間かかる癖に、たまにこういうことがあるんですよね。

ちょっくら、Atmospheric Scattering ShaderというものをHLSLで実装してみました。
このシェーダはライトの位置によって夕焼けになったり、パラメータをいじることで青空の
度合いを調節できたりする、結構便利なシェーダだったりしますが、自分のは完全に
Atmospheric Scattering Shaderを把握できていないため、半分は独自の(いんちき)
実装方法だったりします苦笑；

こういうのは実はあらかじめ頂点カラーに仕込んでおいて似たような効果を出すことが
できるんですが。。それだと同じモデルでも頂点カラーが違うモデルごとにデータを用意
しなければならなくてデータサイズがかさばってしまうので、意外とこういうシェーダは
大事だったりします。見た目もそれなりにリッチになったし、よかったよかった。

さてさて。今回は色々とプチアップデートが多いので、ちょっとリストアップして
紹介していきたいと思います。

・モーションにSEを親子付け
　モーションを行うと関連したサウンドが再生できるようにしました。
・モデルにモデルを親子付け
　キャラクターに剣を持たせたりできるようになりました。
・丸影描画をデカール描画に変更
　これはピクセルシェーダ負荷を抑える必要があったので急遽作成しました。実は
　丸影描画シェーダはシェーダ命令数ギリギリまで使っていてとっても重かったという…；
・モーションのストックバッファを復活
　今まで動作が不安定だったストックバッファを復活させてみました。理由は単なる
　メモリリークでした。ただ、現在は頂点シェーダ負荷がボトルネックになっている
　訳でもないのでどれくらい高速化したのかは不明です。
・SSAOシェーダ
　ピクセルシェーダ負荷を軽くしなければならなかった理由がこれをやりたかったからです。
　ちょっと！SSAOですよ奥さん！笑

ざっとこんなもんです。一つ一つは今までの実装を少し改良したりといった程度の
ものなので、それほどでも無いのですが。唯一新しい機能といえるのがSSAOシェーダ
です。これはスクリーンスペースで遮蔽している部分を計算して陰影を描画するといった
シェーダで、動画では負荷軽減のためにモデルに対してのみしか適応させていないので
分かりにくいですが薄っすらと紫がかっている部分がそうです。本当ならば全体に対して
適応したいところですが、現時点で60FPSから20FPSにまで下がってしまったので
この辺で一旦ドクターストップをかけることにしました。

理想を言えば、もっと肌理細やかな陰影を期待していたんですが。レイの計算で使用する
レイ半径を小さくしすぎると全体の陰影が弱くなってしまい、逆にレイ半径を大きくしすぎる
と細かい陰影がでなくなってしまうのです。市販のゲームでは大きいSSAOシェーダと小さ
いSSAOシェーダの2段階を使用したりするものもあるそうですが。自分の環境でそこまで
リッチな使い方はできないので、チューニングでなんとか誤魔化すのが精一杯でした。

それと今現在は球面調和ライティングも勉強しているのですが、こちらはほとんど
頂点シェーダの計算だけでお手軽にGI計算が出来るのでSSAOを中止して球面調和
ライティングを実装しようかなと考えています。うまく出来るといいなぁ。

追加：
以前の動画だとSSAOの効果が分かりにくかったので、新しく分かりやすい色に変更して
再投稿してみました。

パーティクルシステムをちょっと改良して親子付けできるようにしたので、これで動画の
ようなトレイルパーティクルが表現できるようになりました。…て、それだけだとほとんど
説明不足なので少しだけ解説を入れときましょうか；

まずモデルからパーティクルが放出されているのは、モデルの子としてパーティクル
エミッタを設定することで表現する、というのはある程度容易に想像がつくかと思いますが。
今回はそれだけではなくパーティクルがある程度群れを成して一直線上に放出しています。
これはパーティクルの群れの先頭のパーティクルを親パーティクル、後ろのパーティクル
を子のパーティクルとして設定し、親のパーティクル位置から新しい子パーティクルを放出
させることで表現している訳です。へぇ、なるほど～。でもそれだけだったら別に親子付け
しなくてもそういう動作のパーティクル作ればいいんじゃない？って思う人いそうですね；

親子付けで動作させる一番の魅力が、動き方の幅が使い方によって無限に広がると
いうことかなと思います。例えばLWのチュートリアルではパーティクルの親子付けを
利用して打ち上げ花火を表現したりしていますが。そういう"打ち上げ→爆発"といった
複雑な動きができたりするわけです。ただこれ、親子付けというより継承の方が正しい
んですが。3D的な名称で統一したいので個人的に親子付けと呼んでます苦笑。

とりあえずパーティクルの親子付けがひと段落したので、次にボーンとモデルの親子
付けで武器を持たせてみようかなと思います。

今回、背景を新しいものに差し替えてみました。それとさらにMIDIをBGMとして再生
できるようになったのですが、ネット上のMIDIファイルを無断でお借りしていたので
動画では音をOFFにしています。ぜひ、想像でお楽しみください苦笑；

といっても、手持ちのMIDIの半分くらいしか正常に再生できないんですよね。。
自作読み込みで実装しているせいなので、MCI等を使えばお手軽に読み込めたりする
のですが、これだとループ再生したときに音が途切れてしまうのです。あぁ、難しや。

しかし色々工夫していた甲斐あってメモリ使用量が70MBから15MBまで下がりました。
別に高速化した訳ではないですが、読み込みが軽くなった分喜びは大きかったりします。