HTML5 と javascript ( enchant.js )を使ったアクションゲーム開発。

公開 :  → 更新 :

以前、Flashを使って、横スクロールアクションゲームを作ろうとしていたのですが、実はAndroid4.xではFlashPlayerがサポートされておらず、最近のAndroidではFlashPlayerが使えません。また、iPhoneでもFlashを見ることができません。

まぁ、見ようと思えば、対応のブラウザを使うなどして見ることも可能ですが、基本的に見ることができない。
なるべく多くの端末でゲームをプレイできるようにしたいと考える自分にとって、Flashを使ってゲームを作るのは効率が悪い訳です。

つまりこれは、ズボンを脱ぐときに同時にパンツを下ろさないのと同じことなのです!!

という訳で今回からは、 HTML5 と enchant.js を使ってガンシューティングゲームを作っていきたいと思います。
勿論、スマホでも遊べるようにしていこうと思います。

HTML5 と enchant.js でゲームを作る為の準備

さて、 HTML5 と enchant.js によるゲーム開発にとりかかります。
まずは準備。何事でも準備をすることはとても大切です。ズボンと同時にパンツを脱いで、替えのパンツを用意しておかなかったら、下半身丸出しのまま辺りを彷徨うこととなり、あなたは変態と呼ばれることとなってしまいます。

ゲーム開発に必要なデータをダウンロードしよう。

ではまず、enchant.js のページから必要なものをダウンロードしていきましょう。

enchant.js

enchant.jsのページ

このページの上部にある、Downloadからダウンロードします。
ダウンロードしたフォルダの中にはゲーム制作に使うことができる素材も入っており、ダウンロードして直ぐにゲーム制作をすることが可能です。

この中に入っているクマさんがとても可愛いのですが、このキャラは使いません。
まぁ、クマさんがどんなに可愛くてもローラには負ける訳であります。(残念ながらローラも登場しません。)

ゲーム制作用のフォルダを用意する。

ではゲーム制作用のフォルダを作り、その中に必要なファイルをブチ込んでいきたいと思います。
フォルダ名は何でもいいので、適当につけます。とりあえずここでは”game”とつけます。

このgameフォルダに、ガンガンブチ込んでいきましょう!
まずは『enchant.js-builds-0.8.2-b』→『build』の中の、 enchant.js ファイルをgameフォルダにコピペします。
そして、index.html、main.jsをgameフォルダ内に作ります。これから書いていきますので、今のところは何も記述しなくても大丈夫です。

また、使用する画像も用意しておきます。
今回はプレイヤーが操作するキャラということで、player.pngも用意します。

ちなみにこの画像は Flash で横スクロールを作ろうとしていた時の画像を編集したもの。

プレイヤー画像
プレイヤー画像

背景は透明色にし、pngで保存しています。
たった今必要なファイルはこれら4つですね。

game
┠ index.html
┠ player.png
┠ enchant.js
┗ main.js

では、index.htmlに少し記述していきましょうか。

<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="utf-8">
		<title>ゲーム</title>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
		<script src="enchant.js"></script>
		<script src="main.js"></script>
		<style>
			body {
				padding: 0;
				margin: 0;
			}
		</style>
	</head>
	<body>
	</body>
</html>

<!DOCTYPE html>の部分が、 HTML5 を使いますっていう宣言です。
HTML5 のまえのバージョンでは、宣言がとても長くて分かりにくかった記憶がありますが、 HTML5 ではこんなにも短くなり、宣言が楽になりました。

詳しいことはまた今度にして、今回はこのソースをコピペしてください。
さて、これで最低限の準備は完璧です。つまりパンツを用意したということです。

main.js を編集して、ゲームを作っていこう!

さて、準備も整ったところで、今度は main.js を編集してゲームを作っていきましょう。
今回はキャラクターの表示、キーボードによるキャラクターの移動、そしてスマホによるキャラクターの移動までを作ってみたいと思います。

まずはキャラクターを表示させてみよう!

さて、キャラクターを表示させてみようと思います。

enchant();

window.onload = function() {
	var game = new Game(320,320);
	game.preload('player.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);
	}
	game.start();
}

一番上のenchant();は、enchant.jsを使いますっていうことです。

そしてまず「window.onload = function() {}」が呼び出されます。
この辺りはもう覚えちゃえばいい!という感じですかね。

その中に、ゲーム全体のプログラムを書いていきます。

「var game = new Game(320,320);」は、320*320のゲームオブジェクトを作る命令です。
さらに、「game.preload(‘player.png’);」でプレイヤーの画像を読み込んでおきます。
「game.fps = 15;」はゲームのFPSの指定ですね。

次に「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);
という二つの命令ですが、これはプレイヤーの位置を指定しています。

プレイヤーのx座標は、ゲーム全体の横幅を2で割ったものから、プレイヤーのスプライトの横幅を2で割ったものを引いた値。
プレイヤーのy座標は、ゲーム全体の縦幅を2で割ったものから、プレイヤーのスプライトの縦幅を2で割ったものを引いた値。

つまり、ゲームのど真ん中にプレイヤーの画像を置くということになります。

次に「playerSprite.image = game.assets[‘player.png’];」はプレイヤーの画像ファイルを指定しています。
そして「game.rootScene.addChild(playerSprite);」で、ゲーム画面に先ほど作ったプレイヤーの画像スプライトを表示します。

最後に、「game.start();」でゲームスタートとなります。

テストプレイ画像
テストプレイ画像

無事画像が表示されました。

キーボードによるキャラクター操作!

次に、キーボードによるキャラクターの操作を行えるようにしてみたいと思います。
これで彼女はあなたの思うままになりますよ。。。

playerSprite.addEventListener('enterframe', function() {
	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;
});

addEventListenerはイベントが発生した時に呼ばれるものです。enterframe、つまり毎フレームごとに呼び出されます。
呼ばれる命令を中に書いています。ここではキーボード入力による、thisつまりplayerSpriteの移動の命令が書かれています。

上のソースをgame.onload = function() {}の中に入れてやります。

enchant();

window.onload = function() {
	var game = new Game(320,320);
	game.preload('player.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);
		
		playerSprite.addEventListener('enterframe', function() {
			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;
		});
	}
	game.start();
}

これでキャラクターを操作することが可能になります。

移動をスマホに対応させよう!

さて、ここでお待ちかね、スマホに対応させてみましょう!
それができれば、電車のなかでみんながみんなあなたのゲームをプレイしている!なんてことが起こるかも知れません。
そんな期待は持たずに、ゲーム制作を進めていきましょう。

スマホ対応の為の準備。

しかしその前に少し準備があります。スマホに対応させるにはライブラリと画像が必要です。
それらをgameフォルダにコピペします。

『enchant.js-builds-0.8.2-b』→『build』→『plugins』から、ui.enchant.jsファイル
『enchant.js-builds-0.8.2-b』→『images』から、apad.png、font0.png、icon0.png、pad.pngの全部で5つのファイルをコピペしましょう。
試してみましたが、一見必要無いと思われるファイルも、無いとどうやら上手く実行されないようです。

game
┠ index.html
┠ player.png
┠ apad.png
┠ font0.png
┠ icon0.png
┠ pad.png
┠ enchant.js
┗ main.js

では、次にindex.htmlファイルを編集します。
<script src=”ui.enchant.js”></script>
を、
<script src=”enchant.js”></script>
の後ろに書き込みます。

<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="utf-8">
		<title>ゲーム</title>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
		<script src="enchant.js"></script>
		<script src="ui.enchant.js"></script>
		<script src="main.js"></script>
		<style>
			body {
				padding: 0;
				margin: 0;
			}
		</style>
	</head>
	<body>
	</body>
</html>

こんな感じで、準備は完了です。

アナログパッドを使ってスマホで操作を可能に。

ui.enchant.jsを使えば、アナログパッドで操作させることが簡単にできるようになります。
アナログパッドといっても、画面上のアナログパッドです。

まずはアナログパッドを画面上に表示させてみます。
main.jsを編集していきましょう。

var pad = new APad();
pad.x = 20;
pad.y = 220;
game.rootScene.addChild(pad);

上のソースを「game.onload = function() {}」の中に入れます。
もちろん、「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() {
			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;
		});
	}
	game.start();
}

全体ではこのような感じになります。

テストプレイ画像
テストプレイ画像

さらに、アナログパッドでの操作を可能にしましょう。

if (pad.isTouched) {
	this.x += pad.vx * speed;
	this.y += pad.vy * speed;
}

アナログパッドでの操作を可能にするには、上のソースを書き込んでやります。
書き込む場所は、「playerSprite.addEventListener(‘enterframe’, function() {});」の中です。
もちろん、speedという変数が使われているので、宣言の後に書き込まなくてはなりません。

pad.vxやpad.vyは、パッドがどれだけ動いたかという事です。
そこにspeedの値をかければ、パッドの移動量によってキャラの速度を計算できるわけです。

以上が、 HTML5 と enchant.js による、キャラクター操作の基本的な部分となっております。

さて、最近では HTML5 を使ったサイトがどんどん増えてきています。
ちなみに、自分のこのブログも HTML5 によって作られています。自分自身これからも HTML5 や javascript について学んでいきたいと思います。

次回以降では、キャラクターのアニメーションなどを作っていきたいと思います。

スポンサードリンク

おすすめの記事♪

java

【Java】スーパクラス、サブクラスとは?継承について。

猿も木から落ちますが、Rは木から落ちません。だ[email protected][email protected] [email protected]すよね。どういうものな

Swift

【Xcode7】Swift2でMacアプリ開発。Storyboardでボタンを作る。

喧嘩するほど仲がいいとは言いますが、喧嘩する相手がいません。友達がいないということでしょ[email protected]_is_Rです。 前回、StoryboardでMacのウィンドウに文字を表示しました。しかし、

ゲーム開発で使用する人魚のイラスト描きました。

制作中の人魚のゲームは、Unityを使ったAndroid専用[email protected]_is_Rです。 そんな訳で、いまUnityの使い方を覚えているのですが、まだまだ時間がかかりそう。

Swift

【Xcode7】Storyboardを使ってMacアプリ開発に挑戦。

[email protected]_is_Rでございます。 現在開発中の人魚のゲームは今ストーリーを練っている所です。まだまだ時間がかかりそうです。 さて、Rは今、Macアプリ開発を勉強中なので

java

Javaのクラスとメソッドの違いとは?ゲーム風に解説。

この頃小説を読んでいなく、何か読みたいなと思[email protected]_is_Rです。 Javaを勉強し始めたばかりの人は、何やら難しい単語に混乱する人も多いでしょう。その中で、クラスとメソッドって一体何が

フリー(無料)ブラウザゲーム、Snipe at Monsters公開しました。

[email protected]_is_Rです。 そのタイトルも、Snipe at Monsters、略してSMでございます。 さて、そんな略称で良いのかとも思った訳ですが、…じゃあSA

java

【激分かりやすく!!】javaでじゃんけんゲームプログラム!!

お久しぶりです。 ゲーム制作ページのブログなのに、なんか全然ゲーム制作できてないですね。 今作ってるゲームもちょっと放置プレイ状態だし……。 ちょっと待ったー!誰が放置プレイ状態だとっ!! 

宇宙一分かりやすい JavaScript のかなり詳しい基本の解説。

宇宙一分かりやすい JavaScript のかなり詳しい基本の解説。

[email protected]_is_Rです。 今回は JavaScript について、初心者の人にも分かりやすく、丁寧に解説していきます。 JavaScript と EcmaSc

Swift

【Xcode7】Swift2でMacアプリ開発。画像を読み込む為のボタンを作る。

[email protected]_is_Rです。 最近はSwiftの記事が多いと思っている人もいるのでは無いでしょうか。実はRは現在、Swiftを使ってゲーム開発のお助けアプリを

developing my games

男性が海の世界へと迷い込む!?人魚ストーリーのゲーム開発中です。

こんにちわ。現在様々な方面からゲーム開発中の@It_is_Rです。 今回はRが今、超頑張って制作中のゲームについて書いてみようと思います。 今開発中のゲームは横スクロールアクションゲームと、人


コメントを残す

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


Category

Games