制作する
プロジェクトフォルダを用意する
O₂ Engine コンテンツを制作する際には、コンテンツ1つにつき1つのフォルダを用意することになります。今後、このフォルダをプロジェクトフォルダと呼ぶことにします。
プロジェクトフォルダの雛形（テンプレート）は、SDK に同梱されています（「template」フォルダ）。全ての O₂ Engine コンテンツは、この雛形を加工していく形で制作することができます。
プロジェクトフォルダの内部構造は、以下の通りとなっています。
| Makefile | その O₂ Engine コンテンツの初期状態など記述するファイル（詳細は「Makefile を編集する」を参照） | |
| data フォルダ | その O₂ Engine コンテンツの素材を格納するフォルダ | |
| bgimage フォルダ | 背景として使う画像ファイルを格納するフォルダ | |
| bgm フォルダ | BGM として使うサウンドファイルを格納するフォルダ | |
| fgimage フォルダ | 特にノベルゲームコンテンツの制作において、前景（立ち絵）として使う画像ファイルを格納するフォルダ | |
| image フォルダ | 一般的な画像ファイルを格納するフォルダ | |
| others フォルダ | 特に分類することができないファイルを格納するフォルダ | |
| rule フォルダ | トランジションで使用するルール画像の画像ファイルを格納するフォルダ | |
| scenario フォルダ | シナリオファイルを格納するフォルダ | |
| sound フォルダ | 効果音ほか、一般的なサウンドファイルを格納するフォルダ | |
| video フォルダ | 動画ファイルを格納するフォルダ | |
プロジェクトフォルダ内にあるファイルは全て O₂ Engine コンテンツから利用することができますが、コンテンツの素材は全て data フォルダに格納することとし、さらに data フォルダ内は上記のような構造とすることを推奨します。
プロジェクトフォルダ内には、同じファイル名のファイルを2つ以上置くことができません。たとえば image フォルダ内に「test.png」というファイルを置き、なおかつ bgimage フォルダ内にも「test.png」というファイルを置いた場合、ビルド時にエラーが発生します。
Makefile を編集する
「Makefile」には、その O₂ Engine コンテンツのタイトルや画面サイズ、起動直後の状態（初期状態）などを記述します。
特にタイトルや画面サイズは重要ですので、これから制作するコンテンツの情報を正確に記述してください。
「Makefile」の書式については、「Makefile リファレンス」を参照してください。
制作する
テンプレートでは、「scenario」フォルダの中に「first.ks」というファイルがあります。
これが、このコンテンツを再生すると最初に実行される O₂ KAG スクリプトです。
制作は、このファイルに O₂ KAG スクリプトを記述していく形で進行します。スクリプトを複数ファイルに分けることも可能ですが、[jump]タグなどで明示的にコンテンツの再生を別のファイルへ移行させない限り、ファイルの末尾に達するとコンテンツの再生は停止します。
スクリプトファイルは、.ks という拡張子を持っていなければなりません。
また、スクリプトファイルは任意の文字コードで記述することができますが、UTF-8 以外の文字コードを使った場合には、ビルドの際にその旨指定する必要があります。複数の文字コードのスクリプトファイルを混在させることはできません。
なお、O₂ KAG スクリプトの記述法に関しては、「O₂ KAG マニュアル」を参照してください。
また、必要に応じて、画像やサウンドなどのファイルを準備し、プロジェクトフォルダ内に格納することで、コンテンツ内からそれらのファイルを利用することができます。
動かしてみる
制作した O₂ Engine コンテンツを実際に動作させるには、Builder を使用します。
Builder は、プロジェクトフォルダをまとめて、実際に動作する形で出力する（ビルドする）ためのアプリケーションであり、SDK に同梱されています。制作の際には、「プロジェクトフォルダの中身をいじる」→「Builder でビルドする」→「ビルドされた結果を開いて実際に動かしてみる」のステップを何度も繰り返すことになります。
ビルドされた O₂ Engine コンテンツは、1つのフォルダにまとめられています。今後、このフォルダをコンテンツフォルダと呼ぶことにします。
コンテンツフォルダは以下のような構造となっています。
| index.html | この HTML ファイルを開けば、その O₂ Engine コンテンツが再生されます | |
| script.js | ビルド時の設定によって、「script.js」か「script.json」のどちらかが作成されますが、どちらも、その O₂ Engine コンテンツのスクリプトや、Makefile 情報などが格納されたファイルです |
|
| script.json | ||
| engine フォルダ | O₂ Engine そのものが入っているフォルダです | |
| image フォルダ | その O₂ Engine コンテンツで使用する画像ファイルが入っているフォルダです | |
| sound フォルダ | その O₂ Engine コンテンツで使用するサウンドファイルが入っているフォルダです | |
| video フォルダ | その O₂ Engine コンテンツで使用する動画ファイルが入っているフォルダです | |
出力されたファイルの中にある「index.html」を開けば、その O₂ Engine コンテンツが再生されます。
なお、コンテンツフォルダの内容を直接編集することは推奨されません。コンテンツの内容に手を加えたいときは、プロジェクトフォルダの内容を編集した上で、再度ビルドを行ってください。
Builder の詳しい使い方については、「Builder リファレンス」を参照してください。
デバッグする
コンテンツが思った通りの動作をしないときには、ブラウザを用いてデバッグする必要があります。
デバッグの際には以下の点に留意してください。
キャッシュを無効化する
同じコンテンツを何度も再生し直す場合、ブラウザのキャッシュが障害となることがあります。
そのため、O₂ Engine コンテンツをデバッグする際には、ブラウザのキャッシュを使わずにコンテンツを再生することが必要となります。
各ブラウザで、キャッシュを使わずにコンテンツを再生する方法は以下のとおりです（2013年4月6日現在）。
| Google Chrome | Ctrl キー + Shift キー + J キー（Mac の場合は⌘(Command キー) + ⌥(Option キー) + J キー）を押して現れるコンソール画面右下の歯車アイコンをクリックし、「Setting」項目の「General」項目内にある「Disable Cache」にチェックマークを入れる。 コンソール画面は、デバッグ中、常に表示したままにしておく。 |
| Mozilla Firefox | コンテンツを再読込する際に、Ctrl キー + Shift キー + R キー（Mac の場合は⌘(Command キー) + ⇧(Shift キー) + R キー）を使って再読込を行う。 |
| Safari | コンテンツを再読込する際に、⌘(Command キー) + ⇧(Shift キー) + R キーを使って再読込を行う。 |
| Windows Internet Explorer | F12 キーを押して現れる F12 開発者ツールの「キャッシュ」メニューをクリックし、「常にサーバーから更新する」を選択する。 F12 開発者ツールは、デバッグ中、常に表示したままにしておく。 |
| 携帯端末については、機種やブラウザのバージョンによってキャッシュを無効化する方法が異なります。 | |
JavaScript コンソールを確認する
O₂ Engine コンテンツは JavaScript コンソールに随時ログを出力しますので、このログを読むことで「どのタグがうまく動いていないのか」「どんなエラーメッセージが出力されているか」を知ることができます。
各ブラウザで、JavaScript コンソールを表示する方法は以下のとおりです（2013年4月6日現在）。
| Google Chrome (Windows) | Ctrl キー + Shift キー + J キーを押す |
| Google Chrome (Mac) | ⌘(Command キー) + ⌥(Option キー) + J キーを押す |
| Mozilla Firefox (Windows) | Ctrl キー + Shift キー + K キーを押す |
| Mozilla Firefox (Mac) | ⌘(Command キー) + ⌥(Option キー) + K キーを押す |
| Safari (Mac) | ⌘(Command キー) + ⌥(Option キー) + I キーを押す |
| Windows Internet Explorer (Windows) | F12 キーを押して現れる F12 開発者ツールの中の「スクリプト」タブをクリックする |
| 携帯端末については、機種やブラウザのバージョンによって JavaScript コンソールを表示する方法が異なります。 | |