背景の置き換え。

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

 背景も置き換えられるようにしました。


ゲームって便利よね……


00000000.xml

<?xml version="1.0" encoding="UTF-8" ?>
<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>
        <text>恋歌:玄関!</text>
    </page>
</pages>


 <character>タグでキャラクターの画像を、<background>タグで背景画像を指定するようにしました。
 これを、キャラの画像と同じ方法で置き換えています。


 つか、今回はCSSでの細かい調整がメイン。

  • クリック用の「トップスクリーン」が、IE6だと機能しない

 クリック用の「トップスクリーン」が、IE6だとちゃんと機能しなかった。
 「何もない」とダメだったみたいで、背景色を指定して、その上で透明度を最大に。


main.css

/** トップスクリーン(クリック用) */
div.topscreen
{
    position: absolute;

    left: 20px;
    top: 0px;

    width: 600px;
    height: 400px;

    filter: alpha( style=0, opacity=00 );
    -moz-opacity: 0.00;
    background: #FFFFFF;

    z-index: 50;
    overflow: visible;
}


 これで、IE6でも、ゲーム画面のどこをクリックしても進むようになりました。

  • メッセージフレームがIE6とFireFoxで大きくずれる。

 IE6がpaddingをwidthに含むのに対して、FireFoxは含まずwidth+paddingが実際の横幅になるんで、paddingを使用せず、内側の実際にテキストを出力する部分にmarginをセット。

  • 背景の出力位置がずれる。

 背景の出力位置の基準がIE6とFireFoxでこれまたずれてた。
 absoluteにするとちゃんとうまくいくんで、横線以下も<div>で囲んで全部absoluteに(爆)。


 ここまでやって、だいぶIE6とFireFoxとで近づきました。
 微妙に違う所もあるけど、まぁこのくらいなら問題ないでしょ。


 当面の課題。

  • キャラクターの画像を消して、背景を一枚絵にできるようにする。
  • キャラクターの画像のサイズを属性として持たせて、それに合わせて出力位置を変えるようにする。

 各画像のサイズ合わせたりとかが思いの外面倒なことに気付き始めた……。