ラノベ日記

ラノベの感想用

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

今日の更新

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();

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

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

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

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

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

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

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

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

卒論で頓挫してたJavaScriptギャルゲーですが
開発を再開したいと思います。
前回は途中で混乱していったので、これを機会に
開発日記を付けたいと思います。

最初なので、この日記について少し
書いてる人:tijins(知人s)
書いてる事:ブラウザ上で動くギャルゲー(エロゲ?)を目指す

まぁ、私事についても少し
なんていうのか大学、単位が取れない、留年しそう……、ひきこ(ry
とか、で疲れた時にギャルゲーに感動して救われた身です。

Wiiとか、携帯とかOpera搭載されてる家電も増えてるし
非PCで動くギャルゲーがあれば、F大に結構居た
似たような境遇の人間も救われるんじゃないか
とか、携帯で開発&実行できるエロゲーがあれば
面白いとか、よく分からない理由で開発してます