解説/入門編のバックアップ(No.10)

theater.js入門

theater.js入門 †

↑

前提条件 †

現在、最新バージョンにシナリオ編集ツールは付属していません。このため、テキストエディタ等でシナリオを直接記述していただくことになります。(シナリオ編集ツールは現在作成中です。)
なので、ある程度のPCの知識が必要となります。以降の説明はそれを前提とします。
さらに、HTML、CSS、JavaScript等の知識があればより理解しやすいですが、この入門編ではそれらの知識がなくてもシナリオが書けるような説明をしたいと思います。

↑

準備 †

ダウンロードページから最新バージョンのファイル(tjs???.lzh)をダウンロードし、解凍してください。
テスト用ファイル&ref(): File not found: "test.lzh" at page "解説/入門編";をダウンロードしてください。
ファイルを解凍し、test.htmとtest.jsをtheaterフォルダに配置してください。
動作を確認してみましょう。test.htmをブラウザ(推奨:WinXp+IE6)で開いてください。
画面をクリックしてください。画像と文章が表示されます。もう一回クリックすると画像と文章が切り替わります。*1シナリオはそこで終わりです。

↑

シナリオの解説 †

シナリオはtest.jsに書かれています。test.jsをエディタで開いてください。以下のようなテキストが表示されます。

var img = [
  "img/sample1.gif",
  "img/sample2.gif"
];
var scenario = [
  function(){
    this.act({
      img: "img/sample1.gif",
      msg: "テスト"
    });
  },
  function(){
    this.act({
      img: "img/sample2.gif",
      msg: "ようこそ"
    });
  }
];
new Theater({
  img: img,
  scenario: scenario
});

以下、それぞれの部分について説明していきます。

↑

画像アドレス指定(先読み) †

冒頭の４行は、シナリオで使用する画像のアドレス*2を指定しています。

var img = [
  "img/sample1.gif",
  "img/sample2.gif"
];

「[」と「]」の間に、「"」で括られたアドレスを「,」で連結して記述します。
ここで指定した画像はシナリオ開始時に先読みされます。(読み込み時に「LOADING...」が表示され、完了時に「COMPLETED」が表示されます。)
指定しなくても構いませんが、その場合、画像の表示切替がスムーズに行われなくなる場合があります。
画像アドレスを増やすと、以下のようになります。

var img = [
  "img/sample1.gif",
  "img/sample2.gif",
  "img/sample3.gif",
  "img/sample4.gif"
];

末尾の「,」は不要です。

↑

シナリオ †

5行目以降の下記の部分がシナリオ本体です。

var scenario = [
  function(){
    this.act({
      img: "img/sample1.gif",
      msg: "テスト"
    });
  },
  function(){
    this.act({
      img: "img/sample2.gif",
      msg: "ようこそ"
    });
  }
];

シナリオは、JavaScriptの関数の配列です。
具体的には以下のようなコードとなります。

[
  function(){
    (処理)
  },
  function(){
    (処理)
  },
   :
   :
  function(){
    (処理)
  }
]

「[」と「]」の間に、「function(){(処理)}」を「,」で連結して記述します。
各関数の処理には、JavaScriptであればほぼなんでも記述できますが、アドベンチャーゲーム作成を簡便にするため、いくつかのメソッドを用意しています。
actメソッドもそのひとつです。各関数内で以下のように使用します。

  function(){
    this.act({
      img: "(表示する画像アドレス)",
      msg: "(表示する文章)" 
    });
  }

詳しい説明はここでは省きます。とりあえず、こう書くもの、と覚えてしまってください。
「img:」の後ろに表示する画像アドレスを記述します。このアドレスを、前述の画像アドレス指定(先読み)で指定しておくと、画像が先読みされ、表示切替がスムーズに行われます。
「msg:」の後ろに表示する文章を記述します。

↑

オブジェクト作成 †

new Theater({
  img: img,
  scenario: scenario
});

画像アドレス指定とシナリオを設定し、Theaterオブジェクトを作成して完成です。
詳しい説明はここでも省きます＾＾；とりあえず、こう書くも(略

↑

記述のコツ、注意点 †

できるだけコピー＆ペーストしましょう。「自分で書かなくていい部分は書かない」のがバグを出さないコツです。
その際、「,」に注意してください。追加したときのつけ忘れや、削除したときのはずし忘れをしやすいです。

入門編は以上です。(基礎編に続く)

解説/入門編 のバックアップ(No.10)

theater.js入門 †

前提条件 †

準備 †

シナリオの解説 †

画像アドレス指定(先読み) †

シナリオ †

オブジェクト作成 †

記述のコツ、注意点 †

解説/入門編のバックアップ(No.10)