JS Adventure 2.0　アドベンチャーゲーム用ライブラリで簡単なデモを作成

　JavaScriptのゲーム用ライブラリJS Adventureでデモ風のオープニングを作ってみました。バージョン2.0を使用しています。 セットで使用しているCSSファイルはjs_adv.v1.0.cssです。 しかしFlashのようにはいかずブラウザ依存なのでInternet Explorerなどでは文字が見にくくなるかもしれません。Chromeなどの高速ブラウザがオススメです。

もっとも簡単な設置方法

　このサンプルを動かすのに、Prototype.jsとscriptaculous、JS AdventureのJSファイルとCSSファイルを使用しています。 なお、Prototype.jsといった有名ライブラリはいまやGoogle AJAX APIからダウンロードできるので、次のようにグーグルホストからダウンロードしてしまえば自分のサイトに置いておく必要がありません。 その他に、ゲームライブラリとしてjs_adv.v2.0.jsとjs_adv.v1.0.cssが必要に。

あらかじめ読み込んでおくファイル

<!-- Prototype.jsとscriptaculousはグーグルのホストからダウンロードにするのが楽 --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.3/scriptaculous.js?effects"></script> <!-- JS Adventure　2.0のJSファイルとCSSファイル --> <script type="text/javascript" src="http://wiz-code.digick.jp/js/js_adv.v2.0.js" charset="utf-8"></script> <link rel="stylesheet" href="http://wiz-code.digick.jp/css/js_adv.v1.0.css" type="text/css" media="screen" /> <!-- これとは別にゲーム実装のためのスクリプトを用意 --> <script type="text/javascript" src="http://wiz-code.digick.jp/js/my_adventure.sample.js" charset="utf-8"></script>

　このサンプルでは準備やスクリプトを単純化するため、音楽再生にSoundManager2は使用せず、ブラウザ実装の機能を使うようにしています。

HTMLに記述するタグは以下のコードだけでOK

　ただし、dispというクラス名のタグに任意のID名が必要。

<div class="js_game"> <div id="s1" class="disp">&nbsp;</div> </div>

ゲーム実装用のスクリプト

　ゲームイベントの情報や、音楽・画像などのデータベースは本来別にした方がいいけれども、ここではひとつにまとめてあります。
サンプルデモのスクリプト

if (typeof jsGame == "undefined") var jsGame = {}; document.observe('dom:loaded', function() { //DOMがロードされたらゲーム用のコンストラクタを呼び出す。引数にHTMLに記述したID名を渡す jsGame.adventure = new jsGame.Adventure('s1'); }); //ダンジョン・アドベンチャーゲームを実装するクラス jsGame.Adventure = Class.create(jsGame.Base, { initialize: function($super, element) { /* jsGame.Baseクラスのメソッド・プロパティを継承する */ $super(element); //キーイベントとマウスイベントの管理。keyManagerメソッドとmouseEventsメソッドはセットで呼び出す /* keyManagerメソッドにtrueを渡すと、タブキーと矢印キーのデフォルトアクションがストップする（たとえば矢印キーを押しても画面がスクロールしなくなる）ので通常は何も渡さない */ this.keyManager(); /* * mouseEventsメソッドにセレクタか、$()で拡張された要素を渡すとクリック検知の範囲を限定できる * 何も渡さないとdocument（画面全体）が指定される。ここではゲーム画面の外枠のDIV要素を指定 */ this.mouseEvents(this.disp.up()); //ゲーム中で使用する画像はすべてこのオブジェクトに格納する this.imgObj = {}; /* 画像のIDとパスを配列形式にしてまとめる */ var imgList = [ { name: 'sky_01', url: 'http://wiz-code.digick.jp/image/background/sky_beiz.jp_S06821.jpg' }, { name: 'sunrise_01', url: 'http://wiz-code.digick.jp/image/background/eyes0066.jpg' } ]; //画像をプリロードするクラス。このコールバック内に続く処理を記述する。 new ImagePreloader(imgList.pluck('url'), function(aImages, nLoaded) { aImages.each(function(image, index) { this.imgObj[imgList[index].name] = image; }.bind(this)); /* * IE PNG FIXを使用したIE6の透過PNG対策 * 画像の読み込みがページのロード後なので動的に適用させている */ if (Prototype.Browser.IE) { $$('head').first().insert(new Element('LINK', { href: 'http://wiz-code.digick.jp/css/ie_png_fix.css', type: 'text/css', rel: 'stylesheet' }) ); } //現在のゲームの進行状況を設定 this.state = 'ready'; //ゲーム進行状況の監視するメソッドを呼び出す this.stateObserver(); }.bind(this)); }, /* 最初のスタート画面を設定する */ start: function() { //表示するテキストを作成 this.createSimpleText( '画面をクリックしてください！！！！！', //テキスト内容 'start', //適当なIDを振る { loc: [80, 150], //オプションの設定 style: 'color: #DCDCDC; font-size: 32px; z-index: 1000', outline: true } ); //テキストを表示 this.dispSimpleText('start'); }, /* 画面をクリックされたらオープニングを流す */ setOpening: function() { //openingFinishedというゲーム内変数を設定する this.MData.gameVars.openingFinished = false; //テキストを隠す this.hideSimpleText('start'); //背景画像を設定 this.changeBgImg('sunrise_01'); //背景画像を表示 this.showBackground(); /* 音楽を鳴らすため、曲目を登録する登録 */ this.path.BGM = 'http://wiz-code.digick.jp/bgm/'; if (!this.GData.music) this.GData.music = {}; this.GData.music.BGM = [ { name: 'kimi', url: 'kimi.mp3' }, { name: 'dimension', url: 'dimension.mp3' } ]; /* 音楽を再生する。オプションのloopをtrueにするとループ演奏になる。 */ this.mute = false; this.playMusic('dimension', 'bgm', { loop: true }); //明朝体のフォント var fontFamily = '"ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", Verdana, sans-serif'; //イベントデータを設定。個々のゲームイベントを確実に順番通りに発生させるときは、このように一つのシーンにまとめる必要がある var openingData = { name: 'opening', flag: null, story: null, data: [ //オープニング用のテキストを作成 { type: 'createSimpleText', param: [ '時は2050年、世界は滅亡の危機に瀕していた……', 'opening1', { loc: [60, 150], style: 'color: #DCDCDC; font-size: 25px;', shadow: true } ] }, { type: 'createSimpleText', param: [ '世界的な異常気象、貧困と飢餓', 'opening2', { loc: [140, 150], style: 'color: #DCDCDC; font-size: 25px;', shadow: true } ] }, { type: 'createSimpleText', param: [ 'そして絶え間ない戦争……', 'opening3', { loc: [190, 150], style: 'color: #DCDCDC; font-size: 25px;', shadow: true } ] }, { type: 'createSimpleText', param: [ '……というのはもちろんウソであるが', 'opening4', { loc: [120, 150], style: 'color: #DCDCDC; font-size: 25px;', shadow: true } ] }, { type: 'createSimpleText', param: [ 'しかし、未来のことなど誰にも分からない。', 'opening5', { loc: [120, 150], style: 'color: #DCDCDC; font-size: 25px;', shadow: true } ] }, { type: 'createSimpleText', param: [ 'それはまあ、さておいて……', 'opening6', { loc: [160, 150], style: 'color: #DCDCDC; font-size: 25px;', shadow: true } ] }, { type: 'createSimpleText', param: [ 'ともかく、物語は突然に始まった！', 'opening7', { loc: [140, 150], style: 'color: #DCDCDC; font-size: 25px;', shadow: true } ] }, //背景の半透明ロゴ { type: 'createSimpleText', param: [ '貧困', 'bg_text1', { loc: [50, 20], style: { width: '300px', color: '#FFF', fontSize: '120px', opacity: 0.08 }, shadow: true } ] }, { type: 'createSimpleText', param: [ '飢餓', 'bg_text2', { loc: [550, 220], style: { width: '200px', color: '#FFF', fontSize: '100px', opacity: 0.08 }, shadow: true } ] }, { type: 'createSimpleText', param: [ '戦争', 'bg_text3', { loc: [50, -100], style: { width: '130px', color: '#FFF', fontSize: '150px', opacity: 0.08 }, shadow: true } ] }, //タイトル用のテキストを作成しておく { type: 'createSimpleText', param: [ '燃えよ！　ドラグーン', 'title1', { loc: [60, 50], style: { color: '#00008B', fontSize: '58px', fontWeight: 'bold', fontStyle: 'italic', width: '10000px', opacity: '0.05', textDecoration: 'underline', fontFamily: fontFamily } } ] }, { type: 'createSimpleText', param: [ 'Enter the Dragoon', 'title2', { loc: [170, 110], style: { color: '#00008B', fontSize: '30px', fontStyle: 'italic', width: '10000px', opacity: '0.02', fontFamily: '"Trebuchet MS", "Lucida Grande", Verdana, Arial, Sans-Serif' }, shadow: true } ] }, //メイン用テキストを作成しておく { type: 'createSimpleText', param: [ '2050年夏、世界同時上映', 'main', { loc: [110, 150], style: 'color: #DCDCDC; font-size: 40px;', shadow: true } ] }, /* テキストのタイプ表示し、クリックまで待機し、テキストを隠す */ //テキスト1 { type: 'typeSimpleText', param: [ 'opening1', { delay: 0.5 } ] }, { type: 'waitUntilClick', param: this.disp }, { type: 'hideSimpleText', param: 'opening1' }, //二つのロゴをアニメーションで表示。最後のオプションのnextプロパティをtrueにすると、待機中の次以降のゲームイベントが実行される { type: 'dispSimpleText', param: 'bg_text1' }, { type: 'animateText', param: [ 'bg_text1', [ 'Move', { x: 700, duration: 12.0, transition: Effect.Transitions.linear } ], { next: true } ] }, { type: 'dispSimpleText', param: 'bg_text2' }, { type: 'animateText', param: [ 'bg_text2', [ 'Move', { x: -900, duration: 14.0, transition: Effect.Transitions.linear } ], { next: true } ] }, //テキスト2 { type: 'typeSimpleText', param: 'opening2' }, { type: 'waitUntilClick', param: this.disp }, { type: 'hideSimpleText', param: 'opening2' }, //三つ目のロゴをアニメーションで表示 { type: 'dispSimpleText', param: 'bg_text3' }, { type: 'animateText', param: [ 'bg_text3', [ 'Move', { y: 500, duration: 12.0, transition: Effect.Transitions.linear } ], { next: true } ] }, //テキスト3 { type: 'typeSimpleText', param: 'opening3' }, { type: 'waitUntilClick', param: this.disp }, { type: 'hideSimpleText', param: 'opening3' }, //テキスト4 { type: 'typeSimpleText', param: 'opening4' }, { type: 'waitUntilClick', param: this.disp }, { type: 'hideSimpleText', param: 'opening4' }, //テキスト5 { type: 'typeSimpleText', param: 'opening5' }, { type: 'waitUntilClick', param: this.disp }, { type: 'hideSimpleText', param: 'opening5' }, //テキスト6 { type: 'typeSimpleText', param: 'opening6' }, { type: 'waitUntilClick', param: this.disp }, { type: 'hideSimpleText', param: 'opening6' }, //テキスト7 { type: 'typeSimpleText', param: 'opening7' }, { type: 'waitUntilClick', param: this.disp }, { type: 'hideSimpleText', param: 'opening7' }, //オープニングのイベントがすべて終わってから変数に値を代入する { type: 'calculateValue', param: [ 'openingFinished', true ] } ] }; //作成したイベントデータを汎用変数に代入して起動する if (!this.GData.eventData) this.GData.eventData = []; this.GData.eventData.push(openingData); this.addScene('opening'); }, setTitle: function() { //titleClickedというゲーム内変数を設定する this.MData.gameVars.titleClicked = false; this.stopMusic(); this.playMusic('kimi', 'bgm', { loop: true }); var titleData = { name: 'title', flag: null, story: null, data: [ { type: 'changeBgImg', param: [ 'sky_01', 'sub' ] }, { type: 'crossfadeBg', param: { duration: 2.0 } }, //スタイルの指定に分岐が必要のため改めて設定し直す。またイベント順序を崩さないため、コードをexecuteCodeメソッドでラップしている。 { type: 'executeCode', param: function() { var element1 = $('title1'), element2 = $('title2'); if (Prototype.Browser.IE) { element1.setStyle('filter:progid:DXImageTransform.Microsoft.Glow(color=#FFFFFF,strength=4);').setOpacity(0.05); element2.setStyle('filter:progid:DXImageTransform.Microsoft.Glow(color=#FFFFFF,strength=4);').setOpacity(0.02); } else { element1.setStyle({ textShadow: '#FFF 0px -3px 3px, #FFF 3px 0px 3px, #FFF 0px 3px 3px, #FFF -3px 0px 3px' }); element2.setStyle({ textShadow: '#FFF 0px -5px 10px, #FFF 5px 0px 10px, #FFF 0px 5px 10px, #FFF -5px 0px 10px' }); } } }, { type: 'dispSimpleText', param: 'title1' }, { type: 'dispSimpleText', param: 'title2' }, { type: 'animateText', param: [ [ new Effect.Morph('title1', { sync: true, style: { opacity: '0.65', top: '130px' } }), new Effect.Morph('title2', { sync: true, style: { opacity: '0.65', top: '190px' } }) ], [ 'Parallel', { duration: 3.0, transition: Effect.Transitions.linear } ] ] }, { type: 'waitUntilClick', param: this.disp }, //タイトルがクリックされたら変数に値を代入する { type: 'calculateValue', param: [ 'titleClicked', true ] } ] }; this.GData.eventData.push(titleData); this.addScene('title'); }, main: function() { var mainData = { name: 'main', flag: null, story: null, data: [ { type: 'animateText', param: [ [ new Effect.Morph('title1', { sync: true, style: { opacity: '0.02', fontSize: '150px', left: '-300px', top: '30px' } }), new Effect.Morph('title2', { sync: true, style: { opacity: '0.1', fontSize: '70px', left: '30px', top: '150px' } }) ], [ 'Parallel', { duration: 1.2, transition: Effect.Transitions.linear } ], { next: true } ] }, { type: 'hideBgImage', param: 'sub' }, { type: 'hideSimpleText', param: 'title1' }, { type: 'typeSimpleText', param: 'main' } ] }; this.GData.eventData.push(mainData); this.addScene('main'); }, /* * ゲームの進行状況を監視するメソッド * 監視中はisMouseClickやonceMouseDown、isKeyPressなどのメソッドでマウスやキーイベントをチェックできる */ stateObserver: function() { //Prototype.jsのPeriodicalExecuterクラスはsetIntervalとほぼ同じ機能 new PeriodicalExecuter(function(pe) { switch(this.state) { case 'ready': this.start(); this.state = 'opening'; break; case 'opening': //エンターキーか画面がクリックされたら次に進む if (this.isKeyPress('KEY_RETURN') || this.isMouseClick(this.disp)) { this.state = 'title'; this.setOpening(); } break; case 'title': if (this.MData.gameVars.openingFinished) { this.setTitle(); this.state = 'game'; } break; case 'game': if (this.MData.gameVars.titleClicked) { this.main(); this.state = 'clear'; } break; case 'clear': pe.stop(); } }.bind(this), 0.5); } }); //これはイメージのプリローダー //The constructor for the ImagePreloader takes an array of image URLs and a call-back function as arguments. function ImagePreloader(images, callBack) { // store the callBack this.callBack = callBack; // initialize internal state. this.nLoaded = 0; this.nProcessed = 0; this.aImages = new Array; // record the number of images. this.nImages = images.length; // for each image, call preload() for ( var i = 0; i < images.length; i++ ) { this.preload(images[i]); } } //The call-back function is stored for later use, then each image URL is passed //into the preload() method. ImagePreloader.prototype.preload = function(image) { // create new Image object and add to array var oImage = new Image; this.aImages.push(oImage); // set up event handlers for the Image object oImage.onload = ImagePreloader.prototype.onload; oImage.onerror = ImagePreloader.prototype.onerror; oImage.onabort = ImagePreloader.prototype.onabort; // assign pointer back to this. oImage.oImagePreloader = this; oImage.bLoaded = false; // assign the .src property of the Image object oImage.src = image; }; //The preload function creates an Image object and assigns functions for the three Image events; //onload, onerror and onabort. The onload event is raised when the image has been loaded into memory, //the onerror event is raised when an error occurs while loading the image and the onabort event //is raised if the user cancels the load by clicking the Stop button on the browser. //A pointer to the ImagePreloader object is stored in each Image object to facilitate thcallBackck //mechanism. An optional boolean flag can be added here to indicate whether the image loads properly or not. //Finally, the “src” attribute is assigned to start the loading of the image. ImagePreloader.prototype.onComplete = function() { this.nProcessed++; if ( this.nProcessed == this.nImages ) { this.callBack(this.aImages, this.nLoaded); } }; ImagePreloader.prototype.onload = function() { this.bLoaded = true; this.oImagePreloader.nLoaded++; this.oImagePreloader.onComplete(); }; ImagePreloader.prototype.onerror = function() { this.bError = true; this.oImagePreloader.onComplete(); }; ImagePreloader.prototype.onabort = function() { this.bAbort = true; this.oImagePreloader.onComplete(); };

動作確認：　Firefox3.6 Chrome6.0 IE8

以上のサイト様からお借りしました
フリー画像素材 EyesPic
無料素材 - BEIZ Graphics Web
煉獄庭園
Senses Circuit