読者です 読者をやめる 読者になる 読者になる

チルノをJavaScriptで歩かせるだけ02(歩行)

なんか開発 ゲーム JavaScript

f:id:surume_Reflection:20160930002519p:plainf:id:surume_Reflection:20160929231137p:plain
画像を切り替えて描画する事で動いているように見せる事ができる。
通常はスプライト画像を使用するがわかりやすいよう分割
f:id:surume_Reflection:20161001152412g:plain

アニメーション

<!--html形式で保存-->
<canvas id="canvas" width="256px" height="32px"></canvas>

<script>
var canvas = document.getElementById('canvas'); //canvasをidで取得
var ctx = canvas.getContext("2d"); //描画用context取得

//imgタグ同様srcを指定
var images = [new Image(), new Image()];
images[0].src = "https://cdn-ak.f.st-hatena.com/images/fotolife/s/surume_Reflection/20160930/20160930002519.png";
images[1].src = "https://cdn-ak.f.st-hatena.com/images/fotolife/s/surume_Reflection/20161001/20161001134715.png";
var image = images[0];


var frame_count = 0;
//setIntervalでフレーム単位で処理
function frame(){
  if(frame_count<9999){frame_count++;}else{frame_count=0;}

  //背景描画
  ctx.fillStyle = "#EEF";
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  //描画画像を取得
  //10カウント(0.6秒)毎にimage切り替え
  if(frame_count%10==0) var image = images[parseInt(frame_count/10)%images.length];
  ctx.drawImage(image, canvas.width/2-16, 0);
}
setInterval(frame, 60);
</script>


fillRectで塗りつぶしその上に0.06秒ごとに再描画して
それらの処理をsetIntervalで繰り返している
※setIntervalの指定単位は1/1000秒単位で60だと0.06
 (frame_count%10)の10回毎描画だと0.6秒毎になる


surumereflection.hatenadiary.jp

チルノJavaScriptで歩かせるだけ
チルノをJavaScriptで歩かせるだけ01(描画) - Surume_Reflection
チルノをJavaScriptで歩かせるだけ02(歩行) - Surume_Reflection
チルノをJavaScriptで歩かせるだけ03(移動) - Surume_Reflection