WIZ-CODE.blog

JavaScriptやAjaxをテーマとしたブログです。

*

アドベンチャーゲーム用ライブラリの導入方法（その１）

   

JS ADV.jsの機能全般はこちらで確認できます。 ⇒JS ADV.jsで何ができる？ JS ADV.jsではシンプルな形式のクイズゲームが作れるのですが、これを導入するにはJavaScriptをアップロードできる環境が必要です。必要なJSファイルは6つ、CSSは1つあります。 言わずと知れたjQueryと並ぶAjaxライブラリ Prototype.js(v1.6.1) effects.js(v1.8.1) アドベンチャーゲーム用ライブラリ(version 0.2) JS ADV.js ゲーム用データベース GAME DATA.adv.js ゲーム用イベントデータ EVENT DATA.adv.js ゲーム設置用ファイル MY ADV.js Prototype.jsとeffects.jsはファイルサイズが大きいため、このサイトでは圧縮版Prototype.min.js、effects.min.jsを使っています。 これらをアップロードした後、HEADタグ内に次のように記述します（URLは適宜変更してください）。
JS ADV.jsはアドベンチャー・クイズ機能を集めたライブラリです。以下四つのJSファイルの中ではこのファイルを先頭にします。それぞれのファイルはエディタなどで開いてコードを書き加えたり、書き換える必要があって、js_adv.v0.2.jsの場合、次のように冒頭に書き換え個所があります。 
if (typeof jsGame == "undefined") var jsGame = {};

jsGame.Base = Class.create({
	
	initialize: function(element) {
		//このthis.pathオブジェクトのURLを変更します。
		this.path = {
			image: '../image/',
			smJS: '../js/soundmanager2.js',
			smSWF: '../swf/',
			BGM: '../bgm/',
			snd: '../snd/'
		};
		
		this.disp = $(element);
		..........
		..........
		..........
this.pathオブジェクトのプロパティにはそれぞれ画像や音楽のデータが入ったURLが指定されているので、たとえば自分のサイトの画像フォルダのパスが”http://wiz-code.digick.jp/image”ならそれをimageプロパティの値に設定します。smJSとはSoundManager 2という音楽関係ライブラリのことで、ゲーム内で音楽再生のために必要です。このsmJSにはsoundmanager2.jsのパスを設定します。また、上の6つのJSファイルには含まれていませんが、こちらはスクリプト内で動的に読み込まれるようになっているので忘れずアップロードしましょう。 SoundManager 2のダウンロードはこちら⇒soundmanager2.js またSoundManager 2をダウンロードするとFlash関連のファイルsoundmanager2.swfなどがついてくるので、これらのファイルを設置したフォルダのパス（例：”http://wiz-code.digick.jp/swf/”）をsmSWFプロパティに設定します。 同様にBGMプロパティにはBGM関係のMP3ファイルを設置したフォルダのパスを指定し、sndプロパティには効果音のファイルを置いたフォルダのパスを指定します。 なお、これらのプロパティのなかでsmJSだけはJSファイルを直接指定していることに注意してください。 ここでの指定とは別に、画像や音楽データをデータベース化するためにgame_data.adv.jsに設定内容を記述します。 game_data.adv.jsのダウンロード⇒game_data.adv.js jsGame.dataBaseというデータベース用オブジェクトは画像のimageプロパティと音楽のmusicプロパティを持ち、それぞれはさらに細かく分類されています。実際のサーバー上に置かれたデータと、データベース上のデータが一致しないといけないため管理が面倒ですが、その分スクリプト上でデータを管理しやすくなります。 
jsGame.dataBase = Object.extend(jsGame.dataBase, {
	//画像関係は"image"プロパティに登録
	image: {
		
		background: [
			//画像名（ファイル名でなくてもいい）を"name"プロパティに、URLを"url"プロパティに入れる
			{ name: 'castle_01',			url: 'background/castle01.jpg' },
			{ name: 'sky_01',				url: 'background/sky_beiz.jp_S06821.jpg' },
			{ name: 'sky_02',				url: 'background/sky_beiz.jp_S08163.jpg' }

		],
		
		photo: [

			{ name: 'cherry_blossom_02',	url: 'photo/cherry-blossom_beiz.jp_S08298.jpg' },
			{ name: 'blackcat_01',			url: 'photo/blackcat01.png' }

		],
		
		charFace: [

			{ name: 'Actor34',	url: 'charFace/Actor34.png' },
			{ name: 'Actor37',	url: 'charFace/Actor37.png' },
			{ name: 'Actor38',	url: 'charFace/Actor38.png' },
			{ name: 'Actor55',	url: 'charFace/Actor55.png' }

		],
		
		icon: [

			{ name: 'music',		url: 'icon/music.png' },
			{ name: 'mute',			url: 'icon/mute.png' },
			{ name: 'start01',		url: 'icon/start01.png' },
			{ name: 'enter06',		url: 'icon/enter06.png' }

		]
		
	},
	
	//音楽関係は"music"プロパティに登録
	music: {
		//音楽名（ファイル名でなくてもいい）を"name"プロパティに、URLを"url"プロパティに入れる
		BGM: [
			
			{ name: 'evolution',	url: 'evolution.mp3' },
			{ name: 'tamhe06',		url: 'tamhe06.mp3' },
			{ name: 'music01',		url: 'music01.mp3' },
			{ name: 'tamsp14',		url: 'tamsp14.mp3' }
			
		],
		
		sound: [
			
			{ name: 'button-0',		url: 'button-0.mp3' },
			{ name: 'b_006',		url: 'b_006.mp3' },
			{ name: 'be2',			url: 'be2.mp3' },
			{ name: 'b_044',		url: 'b_044.mp3' },
			{ name: 'b_067',		url: 'b_067.mp3' }
			
		]
	}
});
画像ファイルは分かりやすく分類するため、imageフォルダ内にさらにいくつかのフォルダに分けて置いています。たとえば、背景画像なら”background”、アイコン関係なら”icon”という風に。ただし”background”など分類名は任意で結構です。 《imageフォルダ》 –background（背景に使う画像のフォルダ） | | –animation（GIFアニメなどのフォルダ） | | –icon（アイコン関係のフォルダ） | | –charFace（キャラクターの顔グラフィック） | | –photo（その他の画像） また、画像ファイルのURLは”background/castle01.jpg”のようにimageフォルダ以下のパスが必要ですが、音楽ファイルはファイル名と拡張子だけでOKです。 その他、JavaScriptコードを書くときによくあることですが、配列やオブジェクトの最後の要素の後にコンマ（,）が残るとIEなどでエラーになってしまうため注意しましょう。 ゲーム中のイベントに関するデータはjsGame.dataBaseオブジェクトのeventDataプロパティに設定されます。イベントについては次回詳しく書く予定です。 EVENT DATA.adv.js（サンプル）のダウンロードはこちら⇒EVENT DATA.adv.js 
jsGame.dataBase = Object.extend(jsGame.dataBase, {
	eventData: [
	
		 /* イベントデータはシーン毎にまとめられます */
		{
			name: 'scene_name',
			flag: null,
			story: null,
			data: [
				 /* 各シーンはこのようにイベント群としてまとめられます */
				{ type: 'showWin', param: 'main' },
				{ type: 'hideWin', param: 'main' }
			]
		}
	]
});
最後のJSファイルMY_ADV.jsはゲームをページ内に実装するためのスクリプトです。ページがロードされるとonloadイベントが呼び出され、ゲームが起動します。jsGame.Advクラスの引数は第1引数にゲーム画面となる要素のID名が、第2引数に最初に始まるシーン名がそれぞれ入ります。 MY_ADV.js（サンプル）のダウンロードはこちら⇒MY_ADV.js 
document.observe('dom:loaded', function() {
	
	//第1引数に要素のID名、第2引数に最初のシーン名を入れる
	jsGame.myAdv = new jsGame.Adv('my_adv', 'introduction001');
	
}, false);
HTMLのbodyタグ内には次のように記述します。現在”my_adv”となっているID名は変更可能で、その際は上記のスクリプト部分のID名も合わせて変更してください。 


 
以降、ゲーム起動用のクラスjsGame.Advの記述が続きます。このコード内では、ロード中画像のURLや、事前にロードしておく音楽ファイル、ゲーム中に使用する画像などの設定、書き換えをします。 
jsGame.Adv = Class.create(jsGame.Base, {
	initialize: function($super, element, firstScene) {
		$super(element);
		
		this.firstScene = firstScene;
		
		//ロード中を示す画像のURLを設定する
		this.loadImg = new Element('IMG').addClassName('loading')
			.writeAttribute({
				src: '../image/animation/image_12334.gif'
			});
		this.disp.insert(this.loadImg);
		
		//事前に読み込んでおきたい音楽ファイル名を設定する
		//playMusicメソッドの第1引数にGAME DATA.adv.jsに登録した音楽名を入れる
		this.playMusic('evolution', 'bgm', { mute: true });
		this.playMusic('tamsp14', 'bgm', { mute: true });
		this.playingNumber = '';
		
		this.imgObj = {};
		this.imgList = [
			//ゲーム内で使う画像をここに登録しておく
			//配列の第1要素に画像の直近のフォルダ名、
			//第2要素にGAME DATA.adv.jsで登録した画像名を入れる
			//なお、この下のiconフォルダの画像4つは必須
			['icon', 'music'],
			['icon', 'mute'],
			['icon', 'start01'],
			['icon', 'enter06'],
			
			//ここから下の画像はイベントによって入れ替えるか削除する
			['photo', 'cherry_blossom_02'],
			['photo', 'blackcat_01'],
			
			['charFace', 'Actor34'],
			['charFace', 'Actor37'],
			['charFace', 'Actor38'],
			['charFace', 'Actor55'],
			
			['background', 'castle_01' ],
			['background', 'cherry_blossom_01' ],
			['background', 'sky_01' ],
			['background', 'sky_02' ],
			['background', 'tree_woods_01' ],
			['background', 'tree_woods_02' ]			
		];
		
		this.imgList = this.imgList.map(function(array) {
			var dir = array[0],
				name = array[1];
			var url = this.path.image + this.findData(this.GData.image[dir], name).url;
			this.imgObj[name] = new Image();
			this.imgObj[name].src = url;
			return this.imgObj[name];
		}.bind(this));
		
		new ImagePreloader(this.imgList, function() {
			this.state = 'prestart';
			
			this.loadImg.hide();
			this.stateObserver();
		}.bind(this));
	},
なお、このゲームで使用している画像については、 背景画像はほとんどがBEIZ Graphics Webさんから、キャラクターの顔グラフィックは臼井の会さんからお借りしました。 また、アイコン関係は以下のものを使用しています。 ロード中を示すアイコン（GIF）
ロード中
スタート画面のアイコン（PNG）
ロード中
BGMミュート中のアイコン（PNG）
ロード中
BGMプレイ中のアイコン（PNG）
ロード中
CSSファイルはJS ADV.cssを必要とします。アップロードする前に一つ変更箇所があり、page_nextというクラス名のセレクタで背景画像を設定している個所があるので、この部分を自身のサイトのパスに置き換えます。 JS ADV.css（サンプル）のダウンロードはこちら⇒JS ADV.css 
.page_next {
	margin: 0px;
	padding: 0px;
	width: 24px;
	height: 24px;
	z-index: 250;
	position: absolute;
	top: 0px;
	left: 0px;
	background-image: url(../image/icon/enter06.png);
}
後はアップロードした後、HEADタグ内にCSSファイルのURLを適宜変更して記述します。
クリック待ちのとき点滅するアイコン（PNG）
ロード中
非常に長くなりましたが、大まかな設定方法は以上です。

 - JavaScript/Ajax