クリッピング
![[CSS]クリッピング](https://cdn-ak.d.st-hatena.com/diary/AjaxEroge/2005-10-29.jpg "[CSS]クリッピング")
かなり間空けちゃってごめんなさい……技術的部分を進めるのと、シナリオを進めるのって両立しないわ（汗）。
というわけで、間をつなぐこともあって技術的なことは別に取り上げて、その成果物としてねこみみかを進めることにします。
まずは、クリッピングから。
- サンプル：クリッピング
「クリッピング」っていうのは、はみ出した部分を切り取ること（正確にはちょっと違うか）。
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)/キャラクターファイル
![[ゲーム][Ajax][JavaScript][ねこみみ](https://cdn-ak.d.st-hatena.com/diary/AjaxEroge/2005-10-02.jpg "[ゲーム][Ajax][JavaScript][ねこみみ")
ねこみみか第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)/メッセージウィンドウの非表示
![[ゲーム][DHTML][CSS][JavaScript][ね](https://cdn-ak.d.st-hatena.com/diary/AjaxEroge/2005-09-14.jpg "[ゲーム][DHTML][CSS][JavaScript][ね")
ねこみみか第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使ってるんだよね。意味なかったし……まぁここで役立ったってことで。
というわけで、左上の「窓非表示」を押すと非表示に、もう一度押すかどこかクリックするかスペースキーを押すと再度表示されます。
うーんエロゲーっぽい。
