解説/入門編の変更点

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

**準備 [#o2dd5222]
-動作を確認してみましょう。test.htmをブラウザ(推奨:WinXp+IE6)で開いてください。
-動作を確認してみましょう。添付のtest.htmをブラウザ(推奨:WinXp+IE6)で開いてください。
-画面をクリックしてください。画像と文章が表示されます。もう一回クリックすると画像と文章が切り替わります。((文章タイプライト中にクリックした場合は文章が最後まで表示され、もう一度クリックすると切り替わります。))シナリオはそこで終わりです。

**シナリオの解説 [#w8b3eb72]
-シナリオは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
 });

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

***画像アドレス指定(先読み) [#rf42d810]
-冒頭の４行は、シナリオで使用する画像のアドレス((theaterフォルダ内のtest.htmから見て、imgフォルダ内のsample1.gifのアドレスは「img/sample1.gif」となります。))を指定しています。

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

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

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

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

***シナリオ [#f0df4dd3]
-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:」の後ろに表示する画像アドレスを記述します。このアドレスを、前述の[[画像アドレス指定(先読み)>#rf42d810]]で指定しておくと、画像が先読みされ、表示切替がスムーズに行われます。
-「msg:」の後ろに表示する文章を記述します。
-文章にはインライン属性((<br/>や<span>等の行を対象とするタグ。対して<table>や<div>は矩形を対象とするブロック属性のタグ。))のHTMLタグが使用できます。(ただし、Operaでは文章タイプライト時に動作がおかしくなります。)

***オブジェクト作成 [#m8ba5c34]

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

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

**記述のコツ、注意点 [#z5d23254]
-できるだけコピー＆ペーストしましょう。「自分で書かなくていい部分は書かない」のがバグを出さないコツです。
-その際、「,」に注意してください。追加したときのつけ忘れや、削除したときのはずし忘れをしやすいです。
解説/入門編 の変更点

解説/入門編の変更点
