たけなか制作日誌

近頃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ビューアのちらつきが起こらない版を作ろうかなと考え中です。

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

はい、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”の略ですが、ネーミング
センスが疑われるかもしれません苦笑；

トップページのリンク色のスタイルを少し変更してみて気がついたことですが。最新の
FirefoxやSafari等のMozilla系ブラウザではA:visitedのスタイルは一部のスタイル
変更ができないように制限されている様です。何やらセキュリティに問題があるとか。

そのせいなのか、FirefoxやSafariだけLightViewと併用したリンク色のスタイルが
変更されないという問題が発生。。まぁ色が反映されないだけなので、レイアウトが
崩れるような問題と違ってそこまで大きな問題でも無いのですが、なんだか良い方法が
ないのものか。少し考えどころです。

追記：
…と思ったら他のブラウザでもLightViewと併用部分は同様の現象になってました。
前からそうだったっけ？最近はサイトの移転もあって色々と記憶がごっちゃになってる
感じがします。偽情報流してすみませんでした；

まだまだ分からないことが沢山あるものの、全体的なフレームワークがようやくみえて
きました。そして今日はパーティクル。いつもより多くまわっております笑。

そういえば、WebGLに使われているCanvasについて調べてみるとIEさんではサポート
されていないのです。一応、親切心からかGoogle様がExplorerCanvas.jsという
ものを開発されてますが、このjsコードの中身をみてみるとDOMとVMLによって
Canvasを擬似的に描画しているもので。それだけだと画像のピクセルを取得したり
出来ない訳なのです。

さらに肝心のIE側はver8以降Canvasをサポートしていくのかと思いきや、「私はSVGで
行く！」なんて急に言い出す始末です。IE以外のブラウザでは概ねCanvasに移行予定
ですが。IEのシェアを考えると仕様の統一は当分有り得なさそうな感じです。

結局のところWebGLもCanvasを使っている以上、普及させようと思うとそれなりに
時間がかかりそうな様子なので、Web3Dはまだ当分Flashの時代なのかな、なんて
推察してみました。なんだかWebはまさにブラウザによる戦国時代ですね笑。

先日、WebGLってどんなものなんだろうと思って色々触っていて「これだったら
Flash３Dの方が汎用的だし、速度だったらO3Dの方がいいなあ」なんて思って
みていたのですが。そもそも今までFlash3Dを自分で触ったことがなかったので
自分でとりあえずFlash3Dをはじめてみることにしました。

とりあえずシンプルなサンプルとしてプレーンオブジェクトにテクスチャを貼り付け
してみました。Flashが利用できれば表示されているはずですが、、多分大丈夫でしょう。
Flash3DはFlashが利用できれば気軽に見られるし、こうして日記やブログ等にも
貼り付けたりして遊べるのがいいですね。

現在O3Dのスクリプトを着々と更新しております。

前回からの変更点
・シーンの切り替えがフェード処理で行われるようになりました。
・ヒットポイントが追加されました。
・COMプレイヤーが追加されました。けれど、壁にばかり
　突進してしまう駄目AIです(画像右上参照)。

これくらいかな。けど面倒なので今回はWeb上のものは
更新しておりません。
あまり、定期的にWebで公開すると向こうの会社から
差し止めがくるかもしれませんからね…苦笑。
そのかわりに日記に画像を載せておきます。

そういえば、つい最近ニュースで脅迫の容疑で逮捕された人が
「これは表現だから脅迫じゃない！」っていっていたけど、
ものづくりする立場の人から見ればすごく身勝手だなあと感じた。

表現をすることは他者を喜ばせることもあれば、悲しませることもあると思う。
形がある無しにせよ、自分が表現することで生み出したものを
自分が責任をとらないで誰が責任をとるんだと思いました。

言葉だけの表現者は自分で責任をとらなくていい、そんなことはないはずだ。

そう。僕もHTMLマ○オやら色々あやしいものを制作したり
しているわけですが、やはりそれなりの覚悟で制作してるのである苦笑。

O3Dスクリプトにさっそく丸影が入りました。
しかし、正確にいうとWeb上で表示できるようになりましたが、レンダー
ステートを使用せずに表示させているので半透明のソートができておりません。

まぁ表示できただけでも僕ぁ嬉しいですよ。

ちなみに解決方法は丸影のマテリアルと描画リストのソート指定を
パフォーマンスからZオーダーに変えただけなのですが。

パフォーマンスによるソートって何なのでしょう？
コストの高いオブジェクトから先に描画するとか、そういうこと？

今までパフォーマンスで表示させているとなぜかテクスチャが
表示されなかったのが、Zオーダーを使用することで、もれなく解決。
けれど、パーティクルと同じように木のＺ値と同じ距離にいると
半透明処理がなぜかアルファテストに切り替わってますね。

かといってレンダーステートを使用すると謎のエラーがでるし…。謎だ。

あ、それとどうやらO3Dはバウンディングボックス取得できるようです。
当たり判定できない駄目な奴だと思って…正直すまんかった。

O3Dのインストールの仕方についてよく分からない方のために
インストール手順をまとめることにしました。

①使用している環境を確認します。現在O3Dは
　OS:Windows XP SP2、Windows Vista SP1
　　　　Mac OS X 10.5以降のIntel Macなど。
　ブラウザ：Chrome(O3D推奨)、Firefox 2以降、
　　　　Internet Explorer7.0以降、Safari 3以降、Camino
　が動作対象のようです。僕の方ではWindowsXP SP2で
　InternetExploler7、Firefox3での動作を確認しました。
　ただしOpera9.5やSafari3はO3Dが動作しませんでした。プラグインを
　インストールしても何も変わりません。(最新Verは大丈夫かも…。)
　ちなみにLinuxやMacについては使用していないので何ともいえないです。。
　ビデオカードについては、最新のO3Dは非搭載であっても
　動作するようなので問題ないかと思います。
②上を踏まえた上でO3Dを使用しているページを開きます。
　ページの中のO3Dの画面上に"This Page requires the
　O3D plugin to be installed."と表示されていると思うので、
　その下にある"click here to download."という部分をクリックして
　O3Dプラグインのダウンロードページにとびます。
③クリックした先のページ右側にある"Download O3D"から
　ダウンロードが行えるのでO3Dプラグインをダウンロードします。
　また、ダウンロードすると自動的にO3Dプラグインをインストールしてくれます。
④O3Dプラグインのインストールが終了後、再びはじめの
　O3Dを使用しているページを開き直します。すると
　"O3DのActiveXコントロールの実行"を許可するかどうかブラウザが
　質問してきます。(Internet Explorerの場合ページの一番上に
　ポップアップで表示されます。)
⑤ActiveXコントロールを許可すればO3Dが表示できるよう
　になっていると思います。

※それでもO3Dが表示されない場合
　O3DはDirectXを使用して動作しているので、DirectX9の
　ランタイムが必要となります。　(DirectX10以降をインストール
　されている方はおそらく問題ないかと思います。)
　WindowsXP以降のOSの場合、DirectX9は標準インストールされて
　いるので上の手順を行うだけでO3Dを表示できるはずなのですが、
　もしDirectX9をインストールしていない場合は以下のページから
　DirectX9のランタイムをインストールして下さい。　http://www.microsoft.com/downloads/details.aspx?familyid=2da43d38-db71-4c1b-bc6a-9b6652cd92a3&displaylang=ja
　※O3Dのプラグインがわずか5MBなのに対しDirectX9の
　ランタイムは約90MBもあるので、インストールする際は注意しましょう。

それでもO3Dが表示できない場合は…
お手数ですが、使用しているOS、ブラウザ、ビデオカードの種類とバージョンを
記入の上WEBCLAPやこの日記のメッセージ等でご報告ください。
また、上の説明よりも詳細な説明は以下のページに書かれています(英文)
http://code.google.com/p/o3d/wiki/FAQs
それと、"O3Dのサンプルはちゃんと表示できるのにここのページだけ
見れないぞ！"っていう場合は、僕のスクリプトの方がメンテナンス中の
可能性があります。その場合はすみませんが、しばらく待ってください苦笑。

O3Dのスクリプトにスプライトの表示を導入させてみました。
本当は丸影も導入済みなのですが。。どうもサイトにアップしてみると
createDrawPass()の部分でエラーが起きてしまうようなので
サイトで公開しているものは丸影を実装させておりません。

試しにO3D付属の丸影サンプルをサイトにアップしてみたけど
やはり同じようなエラーが発生。
.htaccessとか、その手のエラーなのかなぁ。
JSファイルとShaderファイルしか使ってないから違うような気もするし。。
ブラウザエラーなのかというと、オフラインで使用できてるしなぁ。難しい。

最近はもっぱらO3D更新日記みたいになっております。

今回は背景に木を追加してみたのと、毎回操作説明を書くのが
面倒だったので、HTMLに記述してスクリプトはJSファイルにまとめることにしました。
けど実際にやってみると、JSファイルにする方法が
よく分からず、なかなか面倒だったのです。

とりあえずそのままスクリプトをコピペしてJSファイルを作ってみると。
なんとO3Dの初期化命令部分でエラーが発生！
なんでかなぁと長時間考えた末、O3Dの命令群が
自作スクリプトのJSファイルに読み込めていないということまでは
分かったのですが、今ひとつ解決方法が分からなかったので、
自作JSファイルのほうに、document.write();を追加して
強制的にO3DのJSファイルを読み込ませました。
本当はO3D命令である、o3djs.require();を使えば
インクルードできるはずなんですけどね。。
まぁ、とりあえず現状は問題ないようなので。いっか。

あ、ちなみにスクリプトのHTMLはWEBCLAPと統合させたので、
トップページの"SEND MESSAGE"からでもいけます。