1. HOME
  2. »
  3. プログラミング・Web
  4. »
  5. JavaScript
  6. »
  7. enchant.js でキャラクターのアニメーションを作ってみよう

enchant.js でキャラクターのアニメーションを作ってみよう

前回の記事では、キャラが移動する時のアニメーションがありませんでした。
突っ立ったまま進んで行く、まるで幽霊の様な状態です。

これでは、キャラが生きてるのか死んでるのか分からない!
ということで、今回はキャラクターのアニメーションを作ってみましょう!
これでキャラを動かしている感も出てくるのではないでしょうか。

アニメーションでキャラの胸も揺らせ……揺らしません。揺らしたい。。。

前回の記事、HTML5 と javascript ( enchant.js )を使ったアクションゲーム開発。の続きとなっております。

キャラをアニメーションさせてみよう!

前回の記事の内容を覚えているでしょうか。
addEventListener(‘enterframe’, function() {});の中に書かれた内容は、毎フレームごとに呼び出されるんでしたね。
そのことを踏まえ、キャラのアニメーションを作っていきたいと思います。

格好の違うキャラを表示させる

こちらが、前回使用したキャラのグラフィックです。

player

左から、⓪〜③と考えます。

プレイヤー

では、⓪〜③の画像を順番に表示させてみましょう。
addEventListener(‘enterframe’, function() {});の中に、命令を書いていきます。
前回、キャラクターのスプライトをvar playerSprite = new Sprite(51,55);という命令で作りました。
これは51*55の画像で作るという命令なので、画像内ではキャラクターが4つあるにもかかわらず、キャラクターは一番左の画像しか表示されていませんね。

じゃあ左から2番目の画像を表示するにはどうすればいいんでしょうか。
前回作ったソース内に、this.frame = 1;と書き込んでやりましょう。書き込む場所は、playerSprite.addEventListener(‘enterframe’, function() {});の中です。
では、全体のソースを確認してみましょう。

enchant();

window.onload = function() {
	var game = new Game(320,320);
	game.preload('player.png','apad.png');
	game.fps = 15;
	game.onload = function() {
		var playerSprite = new Sprite(51,55);
		playerSprite.x = (game.width/2)-(playerSprite.width/2);
		playerSprite.y = (game.height/2)-(playerSprite.height/2);
		playerSprite.image = game.assets['player.png'];
		game.rootScene.addChild(playerSprite);
		
		var pad = new APad();
		pad.x = 20;
		pad.y = 220;
		game.rootScene.addChild(pad);
		
		playerSprite.addEventListener('enterframe', function() {
			this.frame = 1;
			var speed = 14;
			if (game.input.left) this.x -= speed;
			if (game.input.right) this.x += speed;
			if (game.input.up) this.y -= speed;
			if (game.input.down) this.y += speed;
			
			if (pad.isTouched) {
				this.x += pad.vx * speed;
				this.y += pad.vy * speed;
			}
		});
	}
	game.start();
}

テストプレイ画像

this.frame = 1;のthisというのは、このという意味で、playerSpriteを表しています。
つまり、playerSpriteのフレームが1、つまり左から2番目という意味になります。

じゃあ、②を使いたい場合はどうすればどうすればいいんでしょう。
説明なくても分かるよ!とツッコまれてしまいそうなのですが、一応。

this.frame = 2;に変更してみましょう。すると……

テストプレイ画像

②の画像が表示されました。

順番に表示させてアニメーションだ。

enchant.jsには、スプライトが画面に表示されてからのフレーム数を表すageというものがあります。
読み方は”あげ”。……嘘です。

アニメーションにはこのageを使います。
画面が更新されるごとに、キャラのイラストを変えてやるのです。

フレーム数は、1ずつ増えていきます。
画像は4枚。つまり、フレーム数を4で割った余りをthis.frameに代入すればいいのです。
割った余りを表す%を使いましょう。

this.frame = this.age%4;

これで、フレーム数を4で割った余り、つまり0〜3が、this.frameに代入されます。
しかし、ちょっと待ったっ!!

キャラを思い通りにアニメーションさせてみよう

実はこのイラストは、歩いた時のアニメーションと走った時のアニメーションの2つが合わさったものです。
なので、4枚を順番に表示させても、ちゃんとしたアニメーションはできないのです。

では、キャラが歩いているときは⓪と①を交互に、走っているときは②と③を交互にアニメーションさせるようにプログラムを作り変えていきましょう。

キャラが歩いているときのアニメーションを作る

まず、キャラが歩いているときのアニメーションを作ります。最終的にはアナログパッドを少しだけ傾けた時に歩くという感じに作りたいと思います。
ちなみに私のアナログパッドは常にまっすぐです。(下ネタ

まずは⓪と①の二つのみをアニメーションさせる方法です。
⓪と①のみのアニメーションということは、2枚の画像を交互に表示するということなので、this.ageを2で割った余りを表示するということになります。
この辺は簡単ですね。

this.frame = this.age%2;

となります。

キャラが走っているときのアニメーションを作る

では②と③を交互に表示するにはどうすればいいのでしょうか。
最終的に2枚のアニメーションを交互に表示するということには変わりないので、this.ageを2で割った余りというのは間違いなさそうです。

ではここに2をプラスすると、0〜1 +2= 2〜3となりますね。つまり……

this.frame = this.age%2+2;

とすればいいことになります。

上手くプログラムに組み込んでみよう

このままでは、キャラは常にアニメーションされていることになっています。
これではキャラが疲れてしまいますね。いずれ死んでしまいます。

キャラが移動している時のみアニメーションさせる。

では、実際にプログラムに組み込んでみたいわけですが、歩いている時と、走っている時の区別はどうやってやればいいのと思う人もいるでしょう。
あれ、パッドがどれだけ動いたかという値をとる変数がありましたよね。

まぁとりあえず、キャラが移動している時のみ走らせるプログラムを作ってみましょう。
キャラが移動……つまり方向キーが押されたり、アナログパッドを傾けたりした場合にのみアニメーションさせます。

では先ほどのthis.frame = this.age%2+2;という命令をプログラムに組み込んでみたいと思います。

enchant();

window.onload = function() {
	var game = new Game(320,320);
	game.preload('player.png','apad.png');
	game.fps = 15;
	game.onload = function() {
		var playerSprite = new Sprite(51,55);
		playerSprite.x = (game.width/2)-(playerSprite.width/2);
		playerSprite.y = (game.height/2)-(playerSprite.height/2);
		playerSprite.image = game.assets['player.png'];
		game.rootScene.addChild(playerSprite);
		
		/***アナログパッドの表示***/
		var pad = new APad();
		pad.x = 20;
		pad.y = 220;
		game.rootScene.addChild(pad);
		
		playerSprite.addEventListener('enterframe', function() {
			var speed = 14;
			this.frame = 1;
			
			/***プレイヤーの移動(キー操作)***/
			if (game.input.left) {
				this.x -= speed;
				this.frame = this.age%2+2;
			} if (game.input.right) {
				this.x += speed;
				this.frame = this.age%2+2;
			} if (game.input.up) {
				this.y -= speed;
				this.frame = this.age%2+2;
			} if (game.input.down) {
				this.y += speed;
				this.frame = this.age%2+2;
			}
			
			/***プレイヤーの移動(アナログパッド操作)***/
			if (pad.isTouched) {
				this.x += pad.vx * speed;
				this.y += pad.vy * speed;
				this.frame = this.age%2+2;
			}
			
		});
	}
	game.start();
}

何も操作していないときは、this.frame = 1;で常に①の画像を表示しておきます。
これで移動中のみ走るプログラムができました。

ゆっくり移動しているときは歩くアニメーション

ゆっくり移動させるのは、アナログパッドを少し傾けた時です。キー操作でゆっくり移動させることはできません!てかやりません。多分。
弾幕シューティングじゃないので、ゆっくり移動させる機能をつける必要もないでしょう。

pad.vx や pad.vy は、アナログパッドがどれだけ傾いたという値を表すものです。
アナログパッドの傾きによって、-1〜1までの値が入ります。

また、Math.abs();は、絶対値を返す関数です。
今回は画像が横向きのみなので、横にゆっくり移動している時のみ歩かせるという感じで作っていきましょう。

なので、 pad.vx の値の絶対値が0.5以下の場合、歩かせるというプログラムにしてみましょう。
また、アニメーションの速度も考えて、フレーム数を8で割った時の余りが4以下の場合⓪を表示、それ以外の場合①を表示するというプログラムにしてみましょう。

enchant();

window.onload = function() {
	var game = new Game(320,320);
	game.preload('player.png','apad.png');
	game.fps = 15;
	game.onload = function() {
		var playerSprite = new Sprite(51,55);
		playerSprite.x = (game.width/2)-(playerSprite.width/2);
		playerSprite.y = (game.height/2)-(playerSprite.height/2);
		playerSprite.image = game.assets['player.png'];
		game.rootScene.addChild(playerSprite);
		
		/***アナログパッドの表示***/
		var pad = new APad();
		pad.x = 20;
		pad.y = 220;
		game.rootScene.addChild(pad);
		
		playerSprite.addEventListener('enterframe', function() {
			var speed = 14;
			this.frame = 1;
			
			/***プレイヤーの移動(キー操作)***/
			if (game.input.left) {
				this.x -= speed;
				this.frame = this.age%2+2;
			} if (game.input.right) {
				this.x += speed;
				this.frame = this.age%2+2;
			} if (game.input.up) {
				this.y -= speed;
				this.frame = this.age%2+2;
			} if (game.input.down) {
				this.y += speed;
				this.frame = this.age%2+2;
			}
			
			/***プレイヤーの移動(アナログパッド操作)***/
			if (pad.isTouched) {
				this.x += pad.vx * speed;
				this.y += pad.vy * speed;
				if (Math.abs(pad.vx) < 0.5) {
					if (this.age%8 < 4) this.frame = 0;
					else this.frame = 1;
				} else this.frame = this.age%2+2;
			}
			
		});
	}
	game.start();
}

さて、これでキャラ移動の時のアニメーションが完成しました。
ただ、右左どちらに移動しても同じ向きなので、向きを変えたいのですが、それは次回以降の記事で。

よし、あとは一人でこっそり胸を揺らすアニメーションつくろう……

スポンサードリンク

関連コンテンツ

オススメ記事

【Gitの使い方 – その4】ブランチを使って履歴を分岐させる方法

エビの殻や、ポテチ、煮干しなどを食べると、必ずと言っていいほど口が血だらけになります。@It_is_Rです。 さて、Gitの使い方4回目の今回は、ブランチについてです。 ブランチは作業を枝分か

【Android Studio】TextView を使ってテキストを変更、追加する方法。

TextViewの文字列を変更するより、これまでの人生を変更したい@It_is_Rです。 Android Studioを使ったアプリ開発講座6回目です。 今回はアプリに表示されたテキストを変更

これから作る WordPress のテーマをローカルサイトに適用させる。

WordPress と AliExpress って混乱しますよね。@It_is_Rです。せーへんわ。 WordPress テーマ自作シリーズ、第三回目です。 前回までで、ローカルで Wor

【Android Studio】エミュレータを起動してプログラムを実行する方法!

何をやっても長続きしない@It_is_Rです。 このままでは人生さえも長続きしないかも知れない。 さて、しばらくぶりになってしまいましたが、今回は Android Studio 2.3.2 を

Dockerでよく使うコマンドとオプション、その使い方を徹底解説!

人生に意味は求めない。それよりもDockerのコマンドの意味を理解する方が重要です。@It_is_Rです。 Dockerにはたくさんのコマンドがありますが、まずはよく使うコマンドを覚えていきまし

【Android Studio】開発したアプリの実機テストを行う方法。

どうも、頭がすっからかんの@It_is_Rです。 やかましいわ。 今回は Android Studio で実機テストする方法を紹介します。 これからアプリ開発をしていく上で必要不可欠な実機テ

【Bootstrap 4】記事一覧ページなどで使える「カード」の使い方

Bootstrap4の使い方、第7回目です。 トップページなどを見ると、記事の一部が抜粋された記事一覧が表示されているサイトをよく見かけます。 今回はそんな記事一覧ページを作るのに便利な「カー

キャラクター

JavaScriptマンガ風講座。初心者でも絶対に理解できる入門編!!

プログラミングは奥が深い。。。@It_is_Rです。 Flashがスマホから使えなくなり、多くのサイトにHTML5が使われ、ブラウザ上でのアニメーションはJavaScriptが多く使われるように

FC2 blog customize

FC2ブログ ”最強” カスタマイズ入門講座。ヘッダーをカスタマイズ。

寒くなってきましたね。皆さま前かがみになって、まるで亀の様です。@It_is_Rです。 皆様がブログを見て、一番最初に目に入ってくるのはどこでしょうか? 殆どの場合、ヘッダー部分ですよね。つま

メインループを作ってみよう!

小学生からのJavaScript入門。ゲームのメインループを作ってみよう!

小学生からのJavaScript入門講座(にゅうもんこうざ)、第7弾です。 突然(とつぜん)ですが、ゲーム開発(かいはつ)の基本として大切なことってなんだったか覚えていますか? そうです。「変

コメントをどうぞ!

メールアドレスが公開されることはありません。