「Ajaxでエロゲーを作るブログ」の更新してなくて申し訳ないです。 色々と忙しい中、優先順位を下げているため手が回らないこと（参考：KAB-studio及びかぶろぐ。）、話の展開上「染った」ことで大量の立ち絵を起こさなければならなくなったこと（爆）などが…

かなり間空けちゃってごめんなさい……技術的部分を進めるのと、シナリオを進めるのって両立しないわ（汗）。 というわけで、間をつなぐこともあって技術的なことは別に取り上げて、その成果物としてねこみみかを進めることにします。 まずは、クリッピングか…

ねこみみか第7話。 サンプル：ねこみみか(7)/属性の取得 2キャラ同時表示に対応しました。 まず、とりあえず3キャラを<img>タグで表示。ただし透明gifで見えなくしておくけど。 index.html <DIV class="caracter"> <IMG class="left" ID="character_left" SRC="Transparent.gif"> <IMG class="center" ID="character" SRC="Transparent.gif"> </div>

ねこみみか第6話。 サンプル：ねこみみか(6)/キャラクターファイル 今回、見た目的には変化ありません。 でもJavaScriptまわりを大きく変えました。関数に分けたりとか。 それと、キャラクターの情報を別ファイルにまとめました。 characters.xml <chars> <char> <id>ナレー</id></char></chars>…

ねこみみか第5話。 サンプル：ねこみみか(5)/文字色変更 メッセージウィンドウの文字色をキャラ毎に変えるようにしました。 っつーても暫定対応だけど。 まず、XMLの方で色を指定。 00000000.xml <page> <color>#000099</color> <name>風太</name> <text>「さて……」</text> </page> <color>タグで色を指定します。 これをJa</color>…

ねこみみか第4話。 サンプル：ねこみみか(4)/「名前」ウィンドウ メッセージウィンドウに「名前」を追加しました。 まず、メッセージウィンドウ全体をdivで囲みました。 ほんで「名前」まわりの枠を追加。 index.html <DIV id="message_window" class="message_window"> <DIV id="message_window_name_background" class="message_window_name_background"> </DIV> </div>

ねこみみか第3話。 サンプル：ねこみみか(3)/メッセージウィンドウの非表示 メッセージウィンドウを非表示にできるようにしました。 index.html <DIV class="menu"> <TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0"> <TR> <TD onClick="toggleMessageWindow(); return false;">窓非表示</TD> <TD> </TD> <TD> </TD> </TR> </TABLE> </DIV> とりあえずテーブルとCSSでメニューを定義。あと他のウィンドウを少しずらしました。 m…

ねこみみか第2話。 サンプル：ねこみみか(2)/XMLの連結 複数XMLファイルへの対応を行いました。 XMLの接続 00000000.xml <pages> <page> <character>Lecan03.gif</character> <background>BG03.jpg</background> <text>ねこみみか (2)</text> </page> <page> <character>Lecan01.gif</character> <text>レカン：わらわの名はレカンじ…</text></page></pages>

「ねこみみか」というシリーズものを開始しました。 サンプル：ねこみみか(1)/キャラ非表示/キー入力 技術的には、キャラの非表示と、キー入力に対応しました。 キャラクターの非表示 00000000.xml <pages> <page> <character>off</character> <background>BG02.jpg</background> <text>そして恋歌は家に帰り、俺は誰もいない家</text></page></pages>…

背景も置き換えられるようにしました。 サンプル：背景の置き換え。 00000000.xml <pages> <page> <character>g.gif</character> <background>BG01.jpg</background> <text>恋歌：外……。</text> </page> <page> <text>恋歌：あっという間に……。</text> </page> <page> <character>e.gif</character> <background>BG02.jpg</background></page></pages>

エロゲーっぽくしてみました。 サンプル：CSSで透明度変更。 スタイルシートをいじってエロゲーっぽい構成に。 index.html <DIV class="background"> </DIV> <DIV class="caracter"> <IMG ID="character" SRC="e.jpg"><BR> </DIV> <DIV class="message_window_background"> </DIV> <DIV class="message_window_frame"> <DIV ID="maintext">このへんクリックしてね</DIV><BR> </DIV>

サンプル：レイヤーで背景とキャラを重ねる。 スタイルシートを使って、レイヤーのように背景の上にキャラを重ねてみました。 index.html <DIV class="background"> <IMG ID="background" SRC="1.jpg" BORDER="0"><BR> </DIV> <DIV class="caracter"> <IMG ID="character" SRC="2.gif"><BR> </DIV> 背景、キャラ共に<DIV>で囲んであります。 んでこれをスタイルシートで重ねます。 main.css /** キャラクター */ div</div>…

サンプル：XML内にエレメントがない場合の処理。 今回は以下のような修正をしました。 XMLの情報を変数として返す。 <image>タグがない場合にはこれまでの画像をそのままセットする。 オブジェクト指向っぽく、と、XML記述を楽にするために、ってことで。 まず、XML</image>…

やっとこさちゃんとしたトップイメージを描きました。 Google Mapとかで速くスクロールすると「画像読み込み中」のパネルが表示されるのを真似てみました。ドラッグしても下は見えません（爆）。 キャラは看板娘の恋歌。 ツールはAdobe Photoshop CS1.0。タ…

コメントで教えて頂いたものを使ってみました。 Web Development Bookmarklets 使用方法は以下の通り。 まず一番上の「Shell」の上で右クリックして、「このリンクをブックマーク」でブックマークに追加。 JavaScriptを動作させるページを開いて、さっき登録…

前回は複数のXMLファイルを用意しましたが、今回は1ファイルにしました。 サンプル：XML1つに複数page。 XMLファイルでは複数の<pages>タグ内の<page>タグを複数にしてあります。 00000000.xml <pages> <page> <image>c.jpg</image> <text>恋歌：宿題がいっぱいだよぅ</text> </page> <page> <image>c.jpg</image> <text>風太：俺んちで一緒にやるか？</text> </page></pages></page></pages>…

名前：風太（ふうた） その他設定：いらん サンプルゲームの主人公……らしい。 エロゲーの主人公なので顔は隠れてます。 「風太（ふうた）」という名前は「who（誰）」から。多分。

名前：恋歌（れんか） 年齢：違法にならない程度 等身：規制に引っかからない程度 「普通」がモットーのヒロイン。 絵の関係でいろんな作品、シナリオ、シチュエーションに狩り出されるであろう不幸のヒロイン（爆）。 「恋歌（れんか）」という名前は「誰か…

XMLから「次に読み込むXML」を取ってくるようにしました。 サンプル：XMLを続けて読み込む。 XMLファイルに<next>タグを追加して、それで「次のXMLファイル」を指定します。 00000000.xml <pages> <page> <image>a.jpg</image> <text>恋歌：おはよー！</text> <next>00000001.xml</next> </page> </pages> JavaScriptでは、「次のXML」を</next>…

FireFox対応版、解決編。 XMLの各要素のアクセスにインデックスナンバーじゃなく文字列で指定したい。 実は、XMLの処理に関しても、FireFoxでは動かない所があって、結果的にこの処理をすることで解決したとゆー。 とりあえず、テスト用のサンプルを。 サン…

FireFox対応版、解決編。 <IMG NAME="char">と<DIV ID="maintext">で渡し方が違うので統一したい。 の解決編。 NAME属性の方で統一しようとしたんだけどうまくいかなかったんで、IDの方で統一しました。 <IMG>タグの方も、NAME属性ではなくID属性で名前を指定します。 それを、getData()メソッドに文字</div>…

FireFox対応版、解決編。 ……FireFoxだと動かない（汗）。 の原因のひとつについて。 <IMG>タグのNAME属性に"char"を使ってたんだけど、予約語なのか、FireFoxだと使えませんでした。 index.html（誤） <IMG NAME="char" SRC="Ki.jpg" BORDER="0"><BR> <DIV ID="maintext"> </DIV><BR>

Ajaxの参考になりそうな記事と、その中のDOMリファレンスとJKL.ParseXMLへのリンク。 枯れた新しいUI革命「Ajax」をASP.NETで活用する DOM Reference JKL.ParseXML 明日書くけど、XMLのパーシングがIEとFireFoxとで違ってて処理がが面倒なことになってるんで…

昨日のをFireFoxに対応しました。 サンプル：XMLの読み込み（FireFox対応版） 昨日挙げたみっつの課題。 <IMG NAME="char">と<DIV ID="maintext">で渡し方が違うので統一したい。 XMLの各要素のアクセスにインデックスナンバーじゃなく文字列で指定したい。 ……FireFoxだと動かない（汗）。 を解決</div>…

XMLを読み込んで、画像とテキストまとめて変えるようにしてみました。 サンプル：XMLの読み込み まずはXMLファイルの用意。 dataKi.xml <pages> <page> <image>Ki.jpg</image> <text>あははー</text> </page> </pages> 画像ファイルとテキストをこんなふうにXMLに持たせます。 JavaScriptでこれをパーシングします………

今回のテストに使用したキャラ。 名前なし。特徴なし。特徴がないのが特徴みたいな。

JavaScriptで画像を切り替える、というのを試してみました。*1 サンプル：画像の切り替え 2枚の画像を切り替えるというシンプルなのです。 index.html <input type="button" value="「怒」へ切り替え" onClick="changeImage( document.kido, 'Do.jpg' ); return false;"> </form> <input type="button" value="「喜」へ切り替え" onClick="changeImage( document.kido, 'Ki.jpg' ); return false;">

なにはともあれ、Ajaxを始めてみましょう。 とりあえず以下のサイトを参考に作ってみます。 古くて新しいAjaxの真実を見極める Ajaxはじめの一歩 XMLHttpRequest Ajax: Web アプリケーション開発の新しいアプローチ Ajaxは"Asynchronous JavaScript + XML"（…

「Ajaxでエロゲーを作るブログ」は、その名の通り、JavaScriptの先端技術「Ajax」（えいじゃっくす）を使用して、エロゲーを作ってしまおうという企画です。 僕は Java プログラマーなのですが、 JavaScript は2年前を最後に触れてないのでかなり忘れていま…