(C)WorldWideSoftware 

<!DOCTYPE html>
<html lang="ja">
 <head>
  <meta charset="utf-8">
  <title>画像演出１</title>
 </head>
 <body>
  <canvas id="bg" width="480" height="240"></canvas><br>
  <a href="http://www.wwsft.com">(C)WorldWideSoftware</a><br>
【説明】<br>
８０～９０年代の２Ｄハード風の、敵キャラを倒した時の演出です。<br>
パレットチェンジ、ＶＲＡＭ転送など当時のハードの処理ではなく、通常の画像とメッシュ状のpng画像２枚を使っています。<br>
メッシュ画像は、元の画像を減色し、パレットは赤と青のみ（＋透明色）としています。<br>
画像さえ用意すれば実現でき、難しいプログラムは一切不要、どんな開発環境にも使える処理です。<br>
<a href="ef00src.html">ソースコードの確認</a><br>
<br>
使っている画像<br>
<img src="snake1.png">
<img src="snake2.png">

  <script>
  //描画面（キャンバス）の準備
  var cvs = document.getElementById("bg");
  var ctx = cvs.getContext("2d");

  //画像の読み込み
  var img = [], iOK = [];
  function loadImg( n, fname ) {
   iOK[n] = false;
   img[n] = new Image();
   img[n].src = fname;
   img[n].onload = function() { iOK[n] = true; }
  }

  loadImg( 0, "bg.png" );
  loadImg( 1, "snake1.png" );
  loadImg( 2, "snake2.png" );

  //メイン処理
  var tmr = 0;

  function mainProc() {
   var x, y;
   tmr ++;
   if(iOK[0] == true) ctx.drawImage(img[0], 0, 0);//背景の表示
   if(0 <= tmr && tmr < 30) {
    if(iOK[1] == true) ctx.drawImage(img[1], 120, 40);//敵の通常の画像
   }
   if(30 <= tmr && tmr < 40) {
    ctx.drawImage(img[2], 120,   40);//敵のメッシュ画像
    ctx.drawImage(img[2], 120+1, 40);//敵のメッシュ画像
    ctx.drawImage(img[2], 120, 40+1);//敵のメッシュ画像
   }
   if(40 <= tmr && tmr < 50) {
    ctx.drawImage(img[2], 120,   40);//敵のメッシュ画像
    ctx.drawImage(img[2], 120+1, 40);//敵のメッシュ画像
   }
   if(50 <= tmr && tmr < 60) {
    ctx.drawImage(img[2], 120,   40);//敵のメッシュ画像
   }
   if(60 <= tmr && tmr < 70) {//行を間引いて表示
    for(var y=0; y<160; y+=4) ctx.drawImage(img[2], 0, y, 160, 1, 120, 40+y, 160, 1);
   }
   if(70 <= tmr && tmr < 80) {//更に行を間引いて表示
    for(var y=0; y<160; y+=8) ctx.drawImage(img[2], 0, y, 160, 1, 120, 40+y, 160, 1);
   }
   if(tmr == 100) tmr = 0;//最初から繰り返す
  }
  setInterval(mainProc, 50);
  </script>
 </body>
</html>
←動作確認に戻る