第6回 javascriptでキャラクターを足踏みさせる

まずはその場で歩く場合を考える、必要なのは4×4の歩行キャラが書かれている画像である。

今回はこれを使う。

利用サイトはドット絵世界というところだ。

基本的にこのような画像の一つのキャラの大きさは縦32px、横32pxだが、この画像は縦48px、横32pxのようだ。まあそこまで大きな問題ではない。

今回はただ歩かせるだけなので、この画像の中でも正面を向いている4つを使う。

考え方としては、数秒ごとに表示する部分を32pxずつずらすということだ。

その場で足踏み

a.html


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>足踏み</title>
</head>
<body>

<div id="trim">
<img src="./img/girl.png">
</div>

<script type="text/javascript" src="./a.js"></script>
</body>
</html>

<style>
#trim{
position:absolute;
}

</style>

前回の内容で分かることばかりだが、今回重要となってくる部分は


position:absolute;

だろう。

画像を動かすためには絶対指定をする必要がある。

a.js


var count=0;            
var rect=[0,0,48,-32];	//上右下左の順
var margin=[0,0,0,32];	//上右下左の順

//最初に出力する
re="rect("+rect[0]+"px,"+rect[1]+"px,"+rect[2]+"px,"+rect[3]+"px)";
document.getElementById("trim").style.clip= re;

//歩き続けるプログラム
setInterval(
function(){

	if(count==4)
	{
		rect[1]=32;
		rect[3]=0;
		margin[3]=0;
		count=0;
	}
	else{
		rect[1]=rect[1]+32;
		rect[3]=rect[3]+32;
		margin[3]=margin[3]-32;
	}
	re="rect("+rect[0]+"px,"+rect[1]+"px,"+rect[2]+"px,"+rect[3]+"px)";
	ma=margin[0]+"px "+margin[1]+"px "+margin[2]+"px "+margin[3]+"px";
	document.getElementById("trim").style.clip= re;
	document.getElementById("trim").style.margin=ma;
	count++;
},500);//500ミリ秒で切り替わる

まず変数についてみてみる。
countというのは移す部分を変更するときに利用する。今回は32×48の画像を4つ使うため、countの値は0から4をとる。

rectは配列を宣言している。本来はcssでrectを指定するが、javascriptでも指定することができる。rectに関してはこちらを参照してほしい。

marginもこちらを見たほうが早い。

rectの左が-32に疑問を持った人もいるだろう。これは1回目のループをするときに1回だけ多く32pxが加算されることになる。最初の1回を正常に動作させるために、初期値は-32となっている。

marginは逆に1回目のループ時に32足りないので、初期値を32増やしている。marginをずらさないと、画像がずれて表示されてしまう。一点で表示させるためには画像が更新されるごとに32pxずらさなければならない。

繰り返す


setInterval( 関数() , 500);

関数()の内容を500ミリ秒ごとに繰り返すという意味だ。1000ミリにすると1秒ごとになる。

関数の中身

画像決め


	if(count==4)
	{
		rect[1]=32;
		rect[3]=0;
		margin[3]=0;
		count=0;
	}
	else{
		rect[1]=rect[1]+32;
		rect[3]=rect[3]+32;
		margin[3]=margin[3]-32;
	}

繰り返すごとに、横を+32pxすれば順に表示されるのだが、そうすると4枚目以降は元の画像のpxをオーバーしてしまう。ということは、4つ目の画像の次はまた1つ目に戻らなければならない。

if(count==4)というのは4枚目の時はというように訳してもよい。その時は、rectの右は32pxに左は0pxへと戻す。marginも0へ戻す。

elseでそれ以外の時を指定している。その時はrectは普通に32pxずつプラスしていけばいい。marginは-32をしていく。

実際にHTMLファイルに反映


	document.getElementById("trim").style.clip="rect("+rect[0]+"px,"+rect[1]+"px,"+rect[2]+"px,"+rect[3]+"px)";
	document.getElementById("trim").style.margin=margin[0]+"px"+margin[1]+"px "+margin[2]+"px "+margin[3]+"px";

と書いても問題ないのだが、長いのでreとmaを使って二つに分割している。文字列の連結についてはこちらを見てほしい。

最後にcountに1をプラスし、次のループへと戻る。

まとめ

画像を単にずらすだけという作業だが、結構難しいと感じる人も多いだろう。

ゆっくりと理解しながらプログラムをしていくことが重要である。

次は前回の移動させるプログラムを組み合わせて、かに歩きができるようにする。

利用サイト

ドット絵世界