制作中

アクションＲＰＧの方はすっかり放ったらかしですがｗ、「頭文字D iv」のところでせっかく走りまわるルーチン作ったんだからということで迷路を走りまわるゲームを制作中です。

画面周りだけ見るとかなりできているように見えるかもしれませんが、実際のところまだ全体の１割程度ですｗｗ
正月には遊べる・・・ようになればいいなあ

頭文字D iv その２

その２シリーズが続きますｗ
前回やりませんと言いましたがやはり気になるので FireFox や IE で遅すぎるのをもう少しなんとかしてみました。

改良点はこんな感じです。

・描画対象範囲を狭くする（割と近い面でも遠いと判断して表示しない）
・真面目な 3D 計算をちょっとはしょる。
・関数呼び出しの回数を減らすために同じことを何度もだらだら書く。
・ガーベージコレクションを起こさないように、一時的なローカル変数の使用を止めてグローバルな変数とする（参照カウンタが常に在る状態にする）

なんだか大昔の BASIC のプログラミングで高速化を行ってるみたいですｗｗｗ
当然ながらソースの可読性は下がってますｗ

結果はこれ。

Google Chrome や Opera では特に何も変わりません。
Fire Fox はかなりスムースになりました。
IE はそこそこですｗ

※前回より表示領域の横幅が狭くなっているのは高速化とは無関係です。前回はちょっと広角すぎて画面端の歪みが不自然だったのでその部分をカットしました。

線を引く その２

「線を引く」の回では短い水平線（または垂直線）を階段状に大量に配置して直線を描画しました。
そのため処理速度の遅い IE や FireFox では使い物になりませんでした。

今回は別の方法でやってみます。
結論から先に言うと、遅い IE や FireFox でも 1 フレームあたり 50 本の直線を引くことができました。

要するに要素数を減らすことができれば 1 フレームあたりに表示できる線の数は増えるので、1 直線 1 要素にしてやろうというわけです。具体的には画像を使います。

例えばこの画像は 400px x 25px の左上から右下まで線を引いて線の部分以外を透過にしたものです。

これを表示するときに width や height を変更すると別の長さ別の角度の線になります。

↑ width を 300px 、height を 10px にしてみました。

こんな風に画像のサイズを変えていろんな線を引いてやろうというわけですが、もちろん１つの画像だけではいろんな長さや角度の線は表現できませんし、上の例のようにサイズ変えると色が薄くなったり線が途切れてしまったりします。なのでいろんなパターンの画像を用意しておく必要があります。
（ IE は途切れずにきれいにレンダリングします。初めて IE すごいやん、と思いましたｗ）

さらにこの方法の欠点は画像なので線の色が変えられないということです。
色の違う線を引くためには色毎に画像を用意しなければなりませんｗ

やってみたのが　これ　。

↑
このブログでは何故か gif が透過しないので、今回はサンプルは外出しです。すんませ。

画像の先読みをやってないので、しばらくは変な表示になったりしますが、時間が経つと（画像が全部読み込まれると）治ります。
また十分な画像パターンを用意していないので色が薄くなったり点線になったりします。気にしないでください^^;

頭文字D iv

ニコ動のゲーム実況を全部見終わったので続きを書きますｗ
前回 div で三角形を描くことをやりました。

↑これは height が 0px ですが、高さを与えてやると台形にもなります。当たり前ですね。

これってダンジョンとか 3D 迷路の壁（側面）に見えません？見えるよね？ほら見えた！
というわけで、div の border を壁に見立ててサーキットっぽいところを疾走してみました。

何とか処理速度を上げようと努力しましたが、Fire Fox では時々止まってしまいますorz
もうちょっとがんばりようがあるかもしれませんが、やりませんｗ
IE はハナからお話にならないので知りませんｗｗｗ
Google Chrome や Opera では逆に早過ぎるので 1 フレームあたり 80msec のウェイトを入れています。
もっと入れても良かったかも。

コーナーでドリフトしたりもしてるのですが、見てもよくわかりませんｗｗｗ

三角形を描く

言うまでもなくこれは div です。

style に border: 1px solid #ffffff; を指定してあるので白い枠が出てます。
この枠を太くします。30px くらいにしてみましょう。

上下左右４つの枠はそれぞれ別の色にすることができますね。

div の幅と高さを 0px にして、枠だけにします。

色を設定できるということは透明にだってできるということです。
上下と右の枠の色を透明にして、左側の枠だけが表示されるようにします。
( IE6 では透明になりません)

はい、三角形が描けました。
だからどやねん、と思うかもしれませんがｗ、これを応用すると何か面白いことができそうです。

どんなことができるのかの一例は次回に紹介したいと思います。
今はちょっとニコ動見たり、ニコ動見たり、ニコ動見たりするのが忙しくて。
ゲームの実況を見出すと時間が足りなくて足りなくてｗｗｗ

画像の回転

またまたブログの表示を重くするスクリプト突っ込みますｗ

イメージを回転させてみました。ロジックは手抜きですｗｗ

ロジックですが、このぬこの画像の場合は 50 x 50 ピクセルですので、50 x 50 = 2500 個の div を用意します(笑)
で、この div １つ１つ (１つの div の大きさはもちろん 1 x 1 です) に 1 ピクセルの画像を表示させ、これを１つ１つ動かします。

何という力技！ｗ

動かすときにもう少し速いアルゴリズムがあるのですが、めっちゃ面倒なのでしてません^^;
そこを頑張ってもそんなに速くならないと思われたので。

応用すれば画像が四散するとか、砂時計のようにパラパラ落ちていくとか、そんな効果も作れると思いますが、そういうイメージをいっぱい作ってパラパラマンガのように表示してやる方が良いと思いますｗｗ

洞窟探検

洞窟に入る前にはたいまつを買っておかないとね！

ロールオーバーの所で書いたテクニックその３を使ってキャラの回りだけ円形に表示するということをしています。

線を引く

div や span は矩形であるので、幅と高さを指定し背景色を指定すると長方形が描けます。

こんなのとか

こんなの。

なので、例えば高さを小さくして幅を大きくすると水平線になります。

hr の代わりに使えますね。意味ないけどｗ

短い線分(div や span)をいくつも階段状に配置すれば直線が描けます。

これを動的に生成してやるコードを書けばラインルーチンの完成です。

７本（７色）の直線をランダムに描画しています。
速いように思うかもしれませんが、たかが７本です。ゲームにするには処理速度はまったく不足していて話になりませんｗ 特に IE での遅さは冗談かと思うくらいです^^;

MP3を鳴らす

MP3を鳴らす方法。

1)Flashを作成する
2)MP3をロードする、鳴らす、止めるといったことをする関数をその中に用意する
3)1x1の極小の object として HTML 内に配置する
4)javascript から 2) で用意した関数を呼び出す

以上。


なんですけど！
1) 2) を行う環境も知識も持ちあわせていませんので、フリーのライブラリを使用しますｗｗｗ
ググればいろいろあります。とりあえず３つ紹介。

1. playmp3
2. sound manager 2
3. Moo Sound

1. playmp3

Dragon's eye で使用したライブラリです。

機能はシンプルです。

不満な点として一時停止するコマンドがありません。

また無限ループ再生することはできないので、めっちゃでっかい値を指定して繰り返し再生しています。

ですので Dragon's eye で同じ場面で３日ほど放置すると音は止まりますｗ

2. sound manager 2

一番有名？

多機能です。もちろん一時停止もできます。

いろんなコールバックが指定できます。例えば演奏開始〇〇秒後にイベントファイアー！とかできるので、これを使って音楽をフェードアウトさせたりできます。

これだけ多機能なのに何故か繰り返し再生の機能がありませんｗ

これは演奏終了のコールバックでまた演奏を開始させれば良いでしょう。
（2010/10/8 追記：ループの機能が追加されているのにこの間気づきました。） 

Dragon's eye でこのライブラリを使用しなかったのは、再生の開始と終了時に「プツッ」というノイズが入ったためです。

でももしかしたらデータの方に問題があったのかもしれません。

ちゃんと検証する前に playmp3 を使うことにしちゃったので、実際のところはよく分かりません。

3. Moo Sound

使ったことがないので何とも言えません。ご参考まで。

機能的には Sound Manager2 とほぼ同じようです。

【注意点】
どのライブラリを使ってもそうですが、セキュリティの問題でローカルのファイルを指定しても音が鳴りません。
（サイトにULしたら鳴ります）
これは自分のローカルのフォルダを信頼するように設定すれば解決します。

やり方：
・なんでもいいのでFlashのあるサイトを開き、Flashの上で右クリックします。
・メニューから「グローバル設定」を選択します
・Adobeのサイトが開くので、「グローバルセキュリティ設定パネル」を選択します。
・「これらの場所にあるファイルを常に信頼する」にローカルのファイルの場所を追加します。

イベントリスナーについてちょっとだけ考える

なんか読者になってる人いるしｗ　こんなブログのどこ読むねんｗｗｗ


イベントリスナーについて考えるっつったって、要するに IE にどう対処しましょうかってことなんですがｗ

簡単にまとめると違いはこう。

ブラウザ	メソッド	キャプチャの可否	リスナでのイベント取得方法	リスナでのthisの値
IE	attachEvent	不可	window.eventを見る	windowを指す
IE以外	addEventListener	可	リスナの引数で渡される	イベントが発生した要素を指す

まず IE ではキャプチャフェーズでイベントを取得することができない（キャプチャ不可)なので、IE 以外のブラウザ用に addEventListener を使用する場合、第３引数を true にすることが有り得ません。

なのでクロスブラウザ用に自前の addEventListener 便利関数を作る場合にはここは false で決め打ちとなります。

function addEventListener(
             nodeTarget,
             strEventType,
             funcListener ) {
    // IE 以外
    if( nodeTarget.addEventListener )
        nodeTarget.addEventListener(
           strEventType,
           funcListener,
           false         // false 決め打ち
       );
    // IE
    else
        nodeTarget.attachEvent(
           'on' + strEventType,
           funcListener
       );
}

こんな感じ。
とりあえずこれでリスナの登録はできるのだけれど、上記表を見てもらうと分かるようにまだ２つ問題があります。

・イベントオブジェクトの取得方法が違う
・thisの指す内容が違う

この２つが吸収できればリスナ側での場合分けが減ってかなりすっきりします。
なのでこんな風にしてみます。

function addEventListener(
             nodeTarget,
             strEventType,
             funcListener ) {
    // IE 以外
    if( nodeTarget.addEventListener )
        nodeTarget.addEventListener(
            strEventType,
            funcListener,
            false         // false 決め打ち
       );
    // IE
    else
        nodeTarget.attachEvent(
            'on' + strEventType,
            function() {
                return funcListener.call(
                    nodeTarget, window.event);
            }
        );
}

こうしておけばリスナ側で場合分けすることなく

・リスナの引数→イベントオブジェクト
・this→イベントが発生した要素

に統一したコードが書けます。
もちろん IE のスカタンぶりは他にもいっぱいあるので、場合分けが全くいらなくなるわけではないですけどｗ

それでもこの方法はなんだか良さげに見えます。が。これだと

登録したリスナを削除できない

という問題がありますorz
登録しているのがクロージャなので削除のしようがありません。うーむ。

まあ自分が組むコードではリスナを削除するようなことはまずないんですけどね。
恐らく解決方法は

・配列にクロージャを追加して行き、remove時にはそこから探してきて削除する

ってことになると思います。その場合の問題点としては

・配列の添字は要素名とかイベント種別になるので、同じ要素同じイベントに対して複数のリスナを設定できない

がすぐに思い当たります。
ただし、

・そもそも IE では登録したリスナの実行順序が他のブラウザと異なる

ので、同じ要素同じイベントに対して複数のリスナを設定することがそもそも暴挙である気がしますｗ

ググると、自力で複数リスナの実行順序を他ブラウザと揃えようとしている方もいらっしゃるようです。完璧な解はないようですが。
Ajax（というか prototype.js)でもこのあたりは放置してるらしくｗ、私自身も先に書いたように登録したリスナを削除する必要性が今のところないので、この問題は放置しますｗｗｗ