雪乃☆雫のなでしこ日和

重ね合わせと文字遅延描画の実験

なでしこ３ | 14:50

　前回、丸ボタンの押すと凹む動作のために、positionとtopの値を設定することを学んで気が付いたんですが、positionの値にabsoluteを指定すると、絶対位置を指定をすることが出来るんですね。

　そして、z-indexで重ね合わせの順番も指定できるようです。

　そうすると、canvasの上にボタンを乗っけたりも出来るだろうし、なんと透明色が使えるので、画像合成しなくても、背景にキャラや文字を重ねたりができそう！

　・・・と思って、やってみた。

<script type="なでしこ">
#-----------------------------------------------------------------------
「canvas#cv_1」のDOM要素取得。
「canvas#cv_2」のDOM要素取得。

＃背景を一旦白く。
「cv_1」へ描画開始。
白色に線色設定。
白色に塗り色設定。
[0,0,640,480]へ四角描画。

＃裏でテキストウィンドウ作成。
「cv_2」へ描画開始。
「rgba(0,0,0,.5)」に線色設定。
「rgba(0,0,0,.5)」に塗り色設定。
[0,320,640,160]へ四角描画。

＃背景を描画。
「cv_1」へ描画開始。
[0,0]に「../image/kaminoko.jpg」の画像描画。

＃テキストウィンドウを表に出す。
「テキストウィンドウ」を1秒後。

＃文字をテキストウィンドウに描画
　描画文字＝空配列。文字X＝０。文字Y＝0。数＝０。
　文字サイズ＝36。
1.5秒後には
　「cv_2」へ描画開始。
　「{文字サイズ}px MS Pゴシック」に描画フォント設定。
　白色に塗り色設定。
//　[30,380]に「ここは神の子池です。」を文字描画。
　30,380に「ここは神の子池です。」を文字遅延描画。
ここまで。
#-----------------------------------------------------------------------
●テキストウィンドウ
　　「#cv_2」の「z-index」に「2」をDOMスタイル設定。
ここまで。
#-----------------------------------------------------------------------
●文字遅延描画（X,YにSを）
　　描画文字＝Sを文字列分解。
　　文字X＝X。文字Y＝Y。
　　遅延描画反映。
ここまで。

●遅延描画反映
　　数２＝描画文字の配列要素数。　　＃「描画文字の配列要素数」を直接入れたらダメみたい？
　　もし、数＜数２ならば、
　　　　[文字X,文字Y]に描画文字[数]を文字描画。
　　　　数＝数＋１。文字X=文字X＋文字サイズ。
　　　　「遅延描画反映」を0.2秒後。
　　ここまで。
ここまで。
#-----------------------------------------------------------------------
</script>

<H1>なでしこ３てすと～重ね合わせの実験（文字遅延描画も）</H1>
<HR>
<style type="text/css">
#cv_1 {
  position:absolute;
  top: 230px;
  left: 100px;
  z-index: 1;
}
#cv_2 {
  position:absolute;
  top: 230px;
  left: 100px;
  z-index: -1;
}
</style>
<div style="height:550px">
  <canvas id="cv_1" width="640px" height="480px"></canvas>
  <canvas id="cv_2" width="640px" height="480px"></canvas>
</div>

http://snowdrops.starfree.jp/wnako3_test/07_layer_test_00.html

　しかし・・・うーん、そうとうに無理矢理すぎる；

　とくに、文字遅延描画は美しくない～（－－；

　文字幅取得が無いので、ピクセルで指定してますが、文字によってはだいぶ間延びした感じになっちゃいますね。

　それに、秒待つが無くて、秒後や秒毎でと考えますが、なかなか難しいです・・・＞＜

　秒後は、秒待つと違ってプログラムは止まらないので、その下の命令が先にどんどこ実行されてしまうんだよね

　topの値は、最初パソコン上では１００くらいで良さげでしたが、ジオシティーズにＵＰしてみたら、広告が入るのでタイトルに被っちゃいまして、下げました。

　しかし、今度コレをパソコン上で実行したら、これまたタイトルの下が間延びした感じになっちゃう。

　絶対指定だと、そうゆうのも全部やらないと、おかしなコトになっちゃうんですねー。

　でも、まあ、取りあえず出来るってコトは分かりました！

　ノベルゲームというのは、あまり現実的じゃありませんが、それっぽい演出くらいには使えそう？