Hatena::Groupnadesiko

雪乃☆雫のなでしこ日和

2017/09/27 (水)

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

| 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=0。文字Y=0。数=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。
  遅延描画反映。
ここまで。

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

<H1>なでしこ3てすと~重ね合わせの実験(文字遅延描画も)</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://www.geocities.jp/snowdrops890/wnako3_test/07_layer_test_01.html


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

 とくに、文字遅延描画は美しくない~(--;

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

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

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


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

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

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


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

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

トラックバック - http://nadesiko.g.hatena.ne.jp/snowdrops89/20170927