クリッピング
かなり間空けちゃってごめんなさい……技術的部分を進めるのと、シナリオを進めるのって両立しないわ(汗)。
というわけで、間をつなぐこともあって技術的なことは別に取り上げて、その成果物としてねこみみかを進めることにします。
まずは、クリッピングから。
- サンプル:クリッピング
「クリッピング」っていうのは、はみ出した部分を切り取ること(正確にはちょっと違うか)。
Google Mapsみたいに、長方形の中だけで画像がスクロールする、っていうのを実現する方法。
まず<IMG>タブを<DIV>タブで囲みます。
index.html
<!-- キャラクター --> <DIV class="caracter"> <IMG class="right_test" ID="character_right" SRC="Lecan0701.gif"> </DIV>
そうしたらCSSで囲んでいる<DIV>の方に「overflow: hidden」を指定します。
main.css
/** キャラクター */ div.caracter { position: absolute; left: 10px; top: 32px; width: 600px; height: 400px; z-index: 10; overflow: hidden; } /** キャラクター(右) */ div.caracter img.right_test { position: absolute; left: 480px; top: 0px; z-index: 11; overflow: visible; }
これを指定すると、親(<DIV>)の範囲を超えた子(<IMG>)の部分は非表示になります。
これで完了。
これができると、キャラを自由な位置に置けるし、たとえば右からスクロールさせて「りもんちょーちゅー!」とかもできるんで応用の幅が広がるとゆー。
と、こんな感じでひとつひとつ解決していきますです。
ねこみみかはちょっと待ってね……。
(7)/属性の取得
ねこみみか第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"> <IMG class="right" ID="character_right" SRC="Transparent.gif"> </DIV>
次にスタイルシートでそれぞれの位置を設定。
main.css
/** キャラクター */ div.caracter { position: absolute; left: 0px; top: 32px; z-index: 10; overflow: visible; } /** キャラクター(左) */ div.caracter img.left { position: absolute; left: 30px; top: 0px; z-index: 11; overflow: visible; } /** キャラクター(中央) */ div.caracter img.center { position: absolute; left: 190px; top: 0px; z-index: 11; overflow: visible; } /** キャラクター(右) */ div.caracter img.right { position: absolute; left: 350px; top: 0px; z-index: 11; overflow: visible; }
アニメーションとか考えるとフリーに位置を指定できる方がいいんだろうけど、とりあえずこれで。
画像をどの位置に表示するかは、属性で設定。
00000000.xml
<page> <character align="right">Renca0601.gif</character> <character align="left">Lecan0703.gif</character> <char_id>恋歌</char_id> <text>「…………」</text> </page>
align属性を<character>タグに持たせるようにしました。
最後はJavaScriptで属性の取得。
00000000.xml
// <character>の中身を取得します。 if( pageElement.getElementsByTagName( "character" ).length != 0 ) { page.characters = new Object; for( iF1 = 0; iF1 < pageElement.getElementsByTagName( "character" ).length; ++iF1 ) { var align = "" + pageElement.getElementsByTagName( "character" )[iF1].getAttribute( "align" ); var url = pageElement.getElementsByTagName( "character" )[iF1].childNodes[0].nodeValue; if( align.indexOf( "left" ) == 0 ) { page.characters.left = url; } else if( align.indexOf( "right" ) == 0 ) { page.characters.right = url; } else { page.characters.center = url; } } }
属性の取得はElementオブジェクトのgetAttribute()メソッドで、属性名を指定して取得します。
引数ふたつのもあるみたいだけど、それはIEでは使用できなかったんで引数ひとつだけで。
取得できなかったらnullになるけど気にしないで文字列化。
「leftとright以外」ってしてるのは、基本的には画面上に二人出ることは少ないと思うんで、一人だけの時にはこれまで通り簡単に表記できるようにするため。
属性にしたのもその関係ってことで。
……こ、今回テキスト的なボリュームもあったし、表情の書き起こしもかなりの数だったんで結構疲れた……。
やっぱり週刊になりそうです……。
(6)/キャラクターファイル
ねこみみか第6話。
- サンプル:ねこみみか(6)/キャラクターファイル
今回、見た目的には変化ありません。
でもJavaScriptまわりを大きく変えました。関数に分けたりとか。
それと、キャラクターの情報を別ファイルにまとめました。
characters.xml
<?xml version="1.0" encoding="UTF-8" ?> <chars> <char> <id>ナレーション</id> <color>#000000</color> <name> </name> </char> <char> <id>風太</id> <color>#000099</color> <name>風太</name> </char> <char> <id>恋歌</id> <color>#990000</color> <name>恋歌</name> </char> <char> <id>レカン</id> <color>#006600</color> <name>レカン</name> </char> </chars>
キャラ名、色等をまとめてあります。
キャラは<char_id>タグで指定します。
characters.xml
<?xml version="1.0" encoding="UTF-8" ?> <pages> <!-- 略 --> <page> <character>Renca0503.gif</character> <char_id>恋歌</char_id> <text>「ふーた」</text> </page> <!-- 略 --> </pages>
IDといいつつ名前そのままだけど。
で、JavaScriptでこっちも読み込むようにしました。
main.js
// charの入った配列。 var chars = null; /** * charsの中から、該当するキャラを取得します。 */ function findChar( char_id ) { for( iF1 = 0; iF1 < chars.length; ++iF1 ) { var charData = chars[iF1]; if( charData.id.indexOf( char_id ) == 0 ) { return charData; } } } /** * XMLの要素から値を取得します。 */ function getElementValue( element, name ) { return element.getElementsByTagName( name )[0].childNodes[0].nodeValue; } /** character.xmlを読み込みます。 */ function loadCharacters() { if( chars != null ) { return; } // XMLHttpRequestを取得します。 var ajax = createXMLHttpRequest(); // URL を指定して、そこから情報を取ってきます。 ajax.open( "GET", "characters.xml" ); // 状態が変化したら呼ばれるイベントハンドラをセットします。 ajax.onreadystatechange = function() { if ( ( ajax.readyState == 4 ) && ( ajax.status == 200 ) ) { // ちゃんと読み込めてたら<char>を取得。 chars = new Array( ajax.responseXML.documentElement.getElementsByTagName( "char" ).length ); // <char>を取得します。 for( iF1 = 0; iF1 < chars.length; ++iF1 ) { var charElement = ajax.responseXML.documentElement.getElementsByTagName( "char" )[iF1]; var charData = new Object(); charData.id = getElementValue( charElement, "id" ); charData.color = getElementValue( charElement, "color" ); charData.name = getElementValue( charElement, "name" ); chars[iF1] = charData; } } } ajax.send( '' ); }
配列はArrayオブジェクトで作るんですね。
characters.xmlを読み込み、<char>タグの数だけ配列のサイズを確保して、それぞれにセット、という感じ。
今回見た目はあまり関係ないけど、次がちょっと大変かも。
なんせ、恋歌とレカン、ふたり画面に出さないといけないんで……。
(5)/文字色変更
ねこみみか第5話。
- サンプル:ねこみみか(5)/文字色変更
メッセージウィンドウの文字色をキャラ毎に変えるようにしました。
っつーても暫定対応だけど。
まず、XMLの方で色を指定。
00000000.xml
<page> <color>#000099</color> <name>風太</name> <text>「さて……」</text> </page>
<color>タグで色を指定します。
これをJavaScriptで文字色に指定します。
main.js
// 色。 if( page.color != null ) { // テキスト置き換え先の取得。 var nameObj = document.getElementById( nameObjId ); // テキストを置き換えます。 nameObj.style.color = page.color; // テキスト置き換え先の取得。 var textObj = document.getElementById( textObjId ); // テキストを置き換えます。 textObj.style.color = page.color; }
他と同じく、スタイルシートのデザインの変更はstyleフィールドで。
……なんか、そろそろリファクタリングしないとコードがごっちゃになって死ねそうだな。
あ、ここ最近1週間おきの更新ですが、とりあえず不定期ってことでよろしくお願いします。
「ねこみみか」に関してはストーリーがほぼ完成してますんで、途中でやめることはないと思います。なのでちょくちょく見に来るか、アンテナやRSSに見張らせてください。
(4)/「名前」ウィンドウ
ねこみみか第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 id="message_window_name_frame" class="message_window_name_frame"> <DIV ID="name" class="name"> </DIV><BR> </DIV> <DIV id="message_window_background" class="message_window_background"> </DIV> <DIV id="message_window_frame" class="message_window_frame"> <DIV ID="maintext" class="maintext">(このへんをクリックするか、スペースキーを押してください)</DIV><BR> </DIV> </DIV>
XMLには<name>タグを追加。
00000000.xml
<page> <character>Renca01.gif</character> <name>恋歌</name> <text>おはよー!</text> </page>
JavaScriptでの非表示は、全体のdivに行うように変更。
main.js
var message_windowId = "message_window"; var isMessageScreenExist = true; /** メッセージウィンドウの表示・非表示を切り替えます。 */ function toggleMessageWindow() { var windowObj = document.getElementById( message_windowId ); if( isMessageScreenExist ) { // 表示しているので非表示にします。 windowObj.style.visibility = "hidden"; isMessageScreenExist = false; } else { windowObj.style.visibility = "visible"; isMessageScreenExist = true; } }
また、テキストと同じような感じで名前の設定もするように変更。
現状では単に名前を出すだけだけど、できればキャラごとに文字色を変えたいな。
(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でメニューを定義。あと他のウィンドウを少しずらしました。
main.js
var message_window_backgroundId = "message_window_background"; var message_window_frameId = "message_window_frame"; var isMessageScreenExist = true; /** メッセージウィンドウの表示・非表示を切り替えます。 */ function toggleMessageWindow() { var backgroundObj = document.getElementById( message_window_backgroundId ); var frameObj = document.getElementById( message_window_frameId ); if( isMessageScreenExist ) { // 表示しているので非表示にします。 backgroundObj.style.visibility = "hidden"; frameObj.style.visibility = "hidden"; isMessageScreenExist = false; } else { backgroundObj.style.visibility = "visible"; frameObj.style.visibility = "visible"; isMessageScreenExist = true; } }
前に、キャラを非表示にした時と同じ方法で非表示に。
……つか、今回、キャラの非表示は透明GIF使ってるんだよね。意味なかったし……まぁここで役立ったってことで。
というわけで、左上の「窓非表示」を押すと非表示に、もう一度押すかどこかクリックするかスペースキーを押すと再度表示されます。
うーんエロゲーっぽい。