http://ikinako.hp.infoseek.co.jp/ags/ags070220/ags070220.html

はぁーっっ！！バグなのか、仕様なのか…
どう見たってバグです、はい。

IE7以外でもPNGの透過表示が必要だ！！
ってことで実装です。
調べたところ、PNGの透過表示は「AlphaImageLoader」を使う。
ってがお約束のようです。

というわけで、imgエレメントのonloadイベントで
AlphaImageLoaderに差し替えを行います。

attachEvent使って複数のイベントを割り当てれば処理が完結してて
いい感じじゃね？とか思ってやってみたのですが、ここで突然のバグ！！

onloadに直接設定した時は、イベント発生時のthisもtargetもimg
指します。しかしattachEventした時は両方ともwindowを指してます……
へっ！？こりゃ酷い。MS様は仕様と仰るのでしょうが。

仕方ないので、透過処理を配置調整やってたonloadイベント内に書き足します。

どうにか透過表示ができました。

ここで新たな問題が発生…
トランジッション中は透過されて無ぇー
ということで、これは次回の課題。

というか、これは3日前。
現在は風邪罹ってまともに動けねぇーす
熱がある……とは思うのですが、体温計が無いので測れません。

タグ ：

#Ajax

#Javascript

#エロゲー

#ギャルゲー

ついでにこの開発ブログもテーマ分けすることにしました。
再利用できそうな技術ネタと開発状況。

画像ファイルの大きさ取得方法分かりました。
completeするのを待ってからwidth,height参照しても
全く関係無い値とか24とかが帰ってくるって問題への解決策。
画像エレメントのonloadイベントで参照したらうまくいきました。

サンプルソースです、onload=function(){}で直接関数設定してますが
別に定義した関数を設定しても問題ないようです。

//
//画像の大きさを取得する

//画像エレメント
var elm = document.createElement("img");
elm.onload = function(){
alert(this.width + "-" + this.height);
}

elm.src = "ファイル名";

タグ ：

#Javascript

#ギャルゲー

卒論発表がオワタ
実験装置大破で残った実験もやらなくていいぽい
てことで、ようやく開発再開

今までは、各機能、クロスブラウザ用機能
を別ファイルにクラス化して定義。
それを読み込んで使う。

アクセス関数レベルでの互換を維持しつつ機能を拡張
を繰り返した訳ですが……

クラス内グチャグチャで以前の試し書きで動かない気がしてきました。
なんか、テストするのも怖くなってきたし…

ってことで、今日から変えます。
ある程度進んだら必要なファイル全部まとめてフォルダを
分けることにします。

てことで、早速分けました。
http://ikinako.hp.infoseek.co.jp/ags/ags070216/ags070216.html

今回もまたIEのみの対応となります。
(一往他のブラウザでも動きますが、トランジッションがかかりません)

タグ ：

#Javascript

#ギャルゲー

XMLなんて知らない……
ってことで、解説書読む
CSSやXSLを使って見た目を定義できます〜〜
難しいので、とりあえずブラウザのDOMを使って
画像を表示させてみました。

まぁ、いきなり入れ替えると、きれいにはできないよな。
普通に入れ替える時でもTransitionで時間=0とした方がよさそう
てか、C++でスクリプタ作ってたときも画面バッファ作って
オフセット表示させてた。

トランジッションの実装が次の課題。

http://ikinako.hp.infoseek.co.jp/javascript/ags070214/test_xml.html

画像を中央表示にするため、完全に読み込まれるのを待ってます。

読み込み状態を確認する
if(!imgElement.complete){
return;
}
読み込まれるとtrueが返ります

タグ ：

#Javascript

#エロゲー

#ギャルゲー

とりあえず、xml形式のデータを読み込ませてみました。
これでAjaxですｗ

http://ikinako.hp.infoseek.co.jp/javascript/xml/test_xml.html

これは結構迷う。
データ構造考えるのも迷いどころだし。
それよりも問題なのが、従来のシナリオファイルとの大きな違い！！

今まで作ったギャルゲーシステムのシナリオファイルは
なんていうのか、スクリプト言語？なもの……

旧来のシステムではテキスト出力や画像表示は命令です。
命令に従ってシステムは画像を表示したり、分岐をしたり。
if,while,call等装備してるので
普通にプログラミングできます。
まぁ、シナリオライタさんがそれらの機能使ったことはありません
でしたが……

変わって今回のAjaxギャルゲーシステム
データファイルは階層化されたxml。
とりあえず、画面要素の変更を単位として

ってデータを定義してみました。
背景、立ち絵などのデータを保持します。
あと、出力テキストもね。
てことは……　表示位置とか決まってて、そこに画像を
はめ込んでいく感じか？

卒論の合間にxmlの本とか読んでみてるせいで
机の上が最早、パワエレ研とは思えない。

タグ ：

#Javascript

#ギャルゲー

#エロゲー

卒論が終わらない……
まぁ、どう書いたところで、修正命令掛かるんだし
ってことで、提出は意図的に締め切り前日に。

はい、案の定修正掛かりました。まぁ明日が締め切りなので
訂正は一回のみだと思われますが。

今日の更新

http://ikinako.hp.infoseek.co.jp/javascript/ie_trans.html


で、JavaScriptについて
クロスブラウザの実現を重視してきたわけですが
ちょっと方針転換。
しばらくはトランジッションをIEのみにして
システムの簡素化を図ります。
他のブラウザではトランジッション無しで即時反映されます。

IEのトランジッションフィルタを使う
IE5.5以降ではDirectX使った豊富なフィルタを使用可能ですが
クロスブラウザ向け実装までの繋ぎって事で単純な古い方式使います

//初期
div.style.filter = "revealTrans";
div.filters.RevealTrans.Duration = 1.00;//(ミリ秒ではなく秒です)
div.filters.RevealTrans.Transition = 3;//パターン(0〜23)

//トランジッションの実行
//準備：DOMへの変更が画面に反映されなくなります
div.filters.RevealTrans.Apply();

//例(imgはdivの子ノード)
img.src = "2.jpg";//反映されない

//画面反映
div.filters.RevealTrans.Play();

//指定した時間(1.00秒)で画面が切り変わります

//途中で中止するには
div.filters.RevealTrans.Stop();

タグ ：

#Javascript

#エロゲー

#ギャルゲー

http://ikinako.hp.infoseek.co.jp/javascript/aes_tl.html

以前に作っておいたテキスト枠を本体と合わせてみました。
やっぱりオブジェクト指向に作っておくのは楽ですね。
new TL();
これ１行で実装完了、表示位置を調整すれば
見た目もそれっぽっく！　と思ったら問題発生。

文字出力中にクリックすると最後まで表示されるって
よくある動作ができない……
だめだっ、これじゃテキスト飛ばして読めないorz

デバッグ開始です。
出力開始直後は反応しないのに、５文字目くらいだとちゃんと
動作してる、えーっと？関数自体は合ってるよな？

となると……
どうやらonClickイベント自体が発生していないようです。
……どうしろと？

解決しました。私のPCの設定が悪かったようです
ダブルクリックの認識間隔が長すぎて、連続のクリックに
対してonClickイベントが出てない、出るのはonDblClick。

さて、PCの設定を変えるべきか、プログラムを弄るべきか
今のマウス設定で市販のギャルゲーは問題無いんだし、
って事でスクリプトを修正
onClickでやってたのをonMouseUpに変えてみました。
あっさりと直りました！？原因の特定に掛かった時間はいったい……

次はシナリオの構文解析やります。