解説/入門編のバックアップ(No.4) - theater.js

[ トップ ] [ 新規 | 一覧 | 単語検索 | 最終更新 | ヘルプ ]

※このページは書きかけです。

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)で開いてください。
画面をクリックしてください。画像と文章が表示されます。もう一回クリックすると画像と文章が切り替わります。

シナリオの解説 †

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
});

画像指定(先読み)
```
var img = [
  "img/sample1.gif",
  "img/sample2.gif"
];
```
シナリオで使用する画像のアドレスを指定します。ここで指定した画像はシナリオ開始時に先読みされます。(読み込み時に「LOADING...」が表示され、完了時に「COMPLETED」が表示されます。) 指定しなくても構いませんが、その場合、画像の表示切替がスムーズに行われなくなる場合があります。
画像を増やす場合は以下のようにします。
```
var img = [
  "img/sample1.gif",
  "img/sample2.gif",
  "img/sample3.gif",
  "img/sample4.gif"
];
```
末尾の「,」は不要です。(あると不具合が生じる場合があります。)

※このページは書きかけです。