Ajaxでエロゲーを作るブログ

2005/08/09/10/
2006/01/

2006/01/26(Thu)

[]停滞中……申し訳ないです

 「Ajaxエロゲーを作るブログ」の更新してなくて申し訳ないです。

 色々と忙しい中、優先順位を下げているため手が回らないこと(参考:KAB-studio及びかぶろぐ。)、話の展開上「染った」ことで大量の立ち絵を起こさなければならなくなったこと(爆)などが重なり続きを書いていない状態です。

 「ねこみみか」を途中でやめる気はないのと、他のWebサービスAjaxを使用したいと考えているので、いつか再開する予定です。もうしばらくお待ちください。


 ……もしかしたら再開、7月くらいから(汗)。

 それまでRSS購読してくれると嬉しい……。

2005/10/29(Sat)

[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>)の部分は非表示になります。

 これで完了。

 これができると、キャラを自由な位置に置けるし、たとえば右からスクロールさせて「りもんちょーちゅー!」とかもできるんで応用の幅が広がるとゆー。


 と、こんな感じでひとつひとつ解決していきますです。

 ねこみみかはちょっと待ってね……。

2005/10/10(Mon)

Ajaxでエロゲーを作るブログ - [ゲーム

[][][][][](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以外」ってしてるのは、基本的には画面上に二人出ることは少ないと思うんで、一人だけの時にはこれまで通り簡単に表記できるようにするため。

 属性にしたのもその関係ってことで。


 ……こ、今回テキスト的なボリュームもあったし、表情の書き起こしもかなりの数だったんで結構疲れた……。

 やっぱり週刊になりそうです……。

2005/10/02(Sun)

[ゲーム][Ajax][JavaScript][ねこみみ

[][][][](6)/キャラクターファイル

 ねこみみか第6話。

#ノT Tノ


 今回、見た目的には変化ありません。

 でも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>タグの数だけ配列のサイズを確保して、それぞれにセット、という感じ。


 今回見た目はあまり関係ないけど、次がちょっと大変かも。

 なんせ、恋歌とレカン、ふたり画面に出さないといけないんで……。

2005/09/26(Mon)

Ajaxでエロゲーを作るブログ - [ゲーム

[][][][](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に見張らせてください。

2005/09/19(Mon)

「Ajaxでエロゲーを作るブログ」[DHTML

[][][][](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;
    }
}


 また、テキストと同じような感じで名前の設定もするように変更。

 現状では単に名前を出すだけだけど、できればキャラごとに文字色を変えたいな。

2005/09/14(Wed)

[ゲーム][DHTML][CSS][JavaScript][ね

[][][][][](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使ってるんだよね。意味なかったし……まぁここで役立ったってことで。


 というわけで、左上の「窓非表示」を押すと非表示に、もう一度押すかどこかクリックするかスペースキーを押すと再度表示されます。

 うーんエロゲーっぽい。