NN4.0を導入してみましたが、このJavaScriptのimageが重いのなんのって、かなりひどい出来です。ここまで遅いともうバグです、なんでバージョンアップして低機能になるんじゃ、もう信じられん。
といっても、原因は大体想像付いているんです。このバージョンから導入されたレイヤー機能の所為であることは、まず間違いないでしょう。
レイヤー機能は、テキストや画像を重ねて配置することかできる機能で、その位置もピクセル単位できっちり指定できるという優れものです。セルアニメのセルみたいなもんですね。
そんな機能いらんから動作スピードを速くしろよこのスカタン!!、と吠えるのは容易いこと、ちゃんとその機能を使ってやろうじゃありませんか、あればあったで、色々使い用があると言うものです。
当然、今回のスクリプトはNN3.0やIEでは動きません(ええと、多分(笑))
レイヤー機能と言う奴は、HTMLの拡張タグですから、まずはJavaScriptの前にHTMLを使えるようにならないといけません。
使い方はLAYERタグで囲んだところが、別のレイヤー(階層)になるという、安直かつ、解り易いものなんだけど、細かいことをやろうとすると、かなり面倒。
最初LAYERタグの属性であるABOVEとBELOW、Z-INDEXの使い分けが良く解らなかった。
何度か試してみると、ABOVEとBELOWの場合、それぞれ名前を指定したレイヤーの奥もしくは手前にレイヤーの位置を取る。Z-INDEXの場合0以上の整数を指定して、奥行きの絶対位置を決めるってことらしい。
普通はZ-INDEXだけ使ってれば、JavaScriptと組み合わせる場合使い易そうなので、奥行きはZ-INDEX指定にすることに決定。
あと、TOPとLEFTはページ左上からの位置を設定するので、画像を左端に置かない場合、<LAYER><LAYER LEFT="x" TOP="y">...</LAYER></LAYER>、と言う感じに入れ子にする必要があるので、あとでJavaScriptで指定することも考えると結構面倒。
CLIPという画面をカットする属性が「スクロールゲーム作ってみませんか、旦那」って感じだが、うちのマシンには荷が重すぎるので、今回はあまり気にしないことにする。
他の属性に関しては、特に問題なし。
JavaScriptで制御する場合document.layers[xx].xxxてな感じで、レイヤーの属性を指定していけばいいので、レイヤーを動かすのは簡単だ。
入れ子になっている場合は、document.layers[xx].layers[x].xxxてな感じに、二重に指定するだけでOK
タイマーを利用して動く画像を作ってみました。マクロメディアフラッシュもびっくりだね(笑)
おっ、動いてる、動いてる。
※もちろん、ネットスケープナビゲータとか知ってたり覚えてたりする人が少ないぐらいの世の中の今、このスクリプトはSafariとかでは動きません。
(ここで表示している画像に書いてある「メイドどうも!」はまだできあがってません…えへ)
2013-02-19追記
ついでに画像を取り替えてみようかと思ったんだけど、何故か動かない。
document.layers[xx].images[x]
ではいけないのか???
仕様がないので、JavaScriptを利用しているページの見学に行って、ソースの覗き見をする。
スクリプトを見ると、
document.layers[xx].document.images[x]
だそうな。document.を二回使わないといけなかったとは、意味は良く解らないけど、動いたからいいや、この問題は解決!
というわけで、このテクニックを利用して、着せ替えプログラムを組んでみました。
端から、着せ替えをJavaScriptでやりたいんでレイヤーを勉強してみたんだろ、って言いたい人もいるようですな...そのとーり(開き直りっ)
ついでに(笑)3Dダンジョンのプログラムとか、リアルタイム性を要求しない、比較的重くないものを作ってみようかと思います。
今日はここまで。