1. HTML5 アプリケーションとゲーム

HTML5 アプリケーションの利点

• Windows はもちろん Mac や Linux、スマートフォンやタブレットでも、ブラウザを選ばず同じファイル が使用できます。
• アプリケーションのサイズ最小化：現代のネットワークではかなり小さいと言える 最少 300 KB 以下まで ランタイムのコードを縮めることができます。 その上一度アップロードするとランタイムのコードはブラウ ザのキャッシュに残り、次回ロードする時はすぐに読み込まれます。
• アプリケーション実行の高速化：多くのパソコンだけでなくタブレットやスマートフォンでも、Javascript と HTML5 の実行時間はさらに早くなっています。 多くのオブジェクトや複雑な構造を表示する場合でも、 HTML5 のランタイムなら処理できます。
• ユーザーのセキュリティ: 作成したアプリケーションはサンドボックス内で動作しますので、ユーザーのコ ンピュータに悪影響を与えることはありません。

HTML5 アプリケーションを Clickteam Fusion 2.5 で作成する利点

• Javascript でプログラミングする必要はありません。 Clickteam Fusion 2.5 の使いやすいシステムで素早 く簡単にゲームが作成できます。
• ブラウザはハードウェア アクセラレーションを利用しますので、多数のオブジェクトを表示することができ ます。
• アプリケーションのロード中に表示するプリローダーが含まれています。
• Windows ランタイムで利用できるほとんどの条件やアクションおよび表現が HTML5 ランタイムでも利 用可能になりました。 多くのエクステンションがポートされ、その数は定期的に増えています。
• Clickteam Fusion 2.5 の「ビルドして実行 オプション」なら、内部ローカルウェブサーバーのおかげで最 終段階のアプリケーションをブラウザ上ですぐに検証できます。

2. HTML5 プロジェクトの注意点

マウスの動作

HTML5 ゲームにおけるマウスの動作は通常の動作と異なります。 オブジェクトはマウスの非表示ポインタのす ぐ下に配置されています。 つまり、オブジェクトが移動するためには、マウスポインタはプレイエリア上になけ ればなりません。

アプリケーションのファイルサイズを小さく抑えるには

今日ブロードバンド環境が多くのユーザーに浸透したとはいえ、アプリケーションのサイズは小さく抑えるに越 したことはありません。 下記のヒントを参考にしてください:

サイズの大きな背景オブジェクトを使用しない

で、できれば小さな背景オブジェクトを繰り返して使用する。 内容が複雑でサイズの大きな画像 (写真など) を使用すると、サイズは非常に大きくなる場合があります。 圧縮率の高い画像であっても、画像は HTML アプリケーションのサイズを著しく増加させる可能性があり ます。 多くの場合、ゲームの背景は小さな画像を組み合わせ、なるべく同じ画像を何度も繰り返し使用する ようにして作成するようにしてください。 また、クイック背景オブジェクトのグラデーションやテーマを使 用することも検討してください。

サイズ変更や回転を使用する。

アクティブオブジェクトは回転やサイズ変更が可能です。 これらの機能を 可能な限り多くのオブジェクトで使用し、、使用するグラフィックの数を減らす方向で考えてみてください。 例えば、あるオブジェクトの右向きのアニメーションを作成したら、オブジェクトのランタイムオプション のプロパティで 「自動回転」 を有効にします。 するとオブジェクトは動作の方向にあわせて自動的に回転 します。 ただし、回転やサイズ変更を使用する欠点として速度面でやや遅くなることが挙げられます。 回 転されたオブジェクトが衝突検出に含まれる場合、衝突システムが動作するには、メモリ内に回転後、サイ ズ変更後のマスクを作成しなければなりません。 このマスクを作成するのに少々時間がかかる可能性があり ます (特に大きなオブジェクトの場合)。 どの程度処理時間がかかるかは実際に試してみないとわかりませ んが、オブジェクトが小さいほど高速にはなります。

音声形式

Clickteam Fusion 2.5 の音声形式は常に最適の音声を選択するので、どのブラウザでも再生できます。 音声は ２つの形式で保存されます。

お使いの OS が Windows 7 か 8

なら、OGG または M4A 形式で保存され、現在広く使われているブラウザで良質な音声が楽しめます。

Windows XP、2000、Vista

では LAME MP3 エンコーダー (lame_enc.dll) をダウンロード後、Clickteam Fusion 2.5\Data\Runtime ディレクトリにインストールすることを推奨しております。 もし lame_enc.dll が Clickteam Fusion 2.5\Data\Runtime ディレクトリにすでにあり、OS が Windows 2000、XP、または Vista の場合は音声は OGG と MP3 形式として保存されます。 ネットで「lame_enc.dll」を検索すれば すぐに⾒つかります。 もしも lame_enc.dll が Clickteam Fusion 2.5\Data\Runtime ディレクトリにな く、お使いの OS が Windows Vista、XP、2000 の場合、ファイルは OGG と WAV 形式で保存され、 Internet Explorer では音声が再生されないこともあります。

iOS での音声

iPhone や iPod、iPad (および今後発売される新しい Apple 社製品など)では、再生される音声方法が規制され ています。 iOS デバイスでは音声がユーザーの相互作用によって作成されない限り (つまりはスクリーンをタッ チされない限り)、どんな音声も再生できません。 Clickteam Fusion 2.5 ではこの規制の下最善を尽くし、 特 別なタッチディテクターを使用して、スクリーンに1 度タッチするだけで音声が再生できるようになりました。 し たがって、iOS HTML5 アプリケーションはスクリーンにタッチするまで音声が再生できません。 タッチしたあ とは、できる限り素早い速度で音声を読み込み、その後音声が再生されます。 読み込み終了後、音声はスムーズ に再生されますが、タッチしたあと一瞬で再生されるわけではありません。最初に再生される場合には少々の遅 れがでることもあります。

ジョイスティック

Clickteam Fusion 2.5 ジョイスティックオブジェクトは初期設定により、SHIFT キーや CONTROL キーなどの 矢印キーに影響されます。 アプリケーションがキーボード付のパソコンで実行されている場合に、このキーはア クティブです。 Clickteam Fusion 2.5 ではモバイルデバイスで使用できるように、仮想のジョイスティックが 表示できます。 フレーム内のプロパティ欄にある「仮想ジョイスティック」プロパティを有効にするだけで、グ ラフィックジョイスティックがモバイルデバイスで表示できます。

全画面表示へ切り替える

ユーザーがお使いのパソコンを最大限に活用できるように、ウェブブラウザは強制的に全画面表示へ切り替わり ます。 Javascript アプリケーションを全画面表示にするには、ユーザーが手動で切り替える必要があります。 そ うすると、アプリケーションのプロパティに「解像度を変更」プロパティが表示されます。 全画面表示へ切り替 えるには、マウスのクリック 条件から始まるイベントの動作にストーリーボードの全画面表示設定 を挿入する 必要があります。 しかし 「ウィンドウサイズ全体に表示」 プロパティを使うと、アプリケーションはブラウザ のウィンドウ全体に表示され、タブレットやスマートフォンでしたら画面全体に表示されます。

3. HTML5 と Windows スタンドアローンアプリケーションとの違い

HTML5 Exporter は HTML5 アプリケーションを できる限り Windows のスタンドアローンアプリケーショ ンに近づけて作成しますので、アプリケーションを実行 かまたは フレームを実行 からアプリケーションを起動 すると、実際の動作を確認することができますが、HTML5 と EXE には異なった点もあります。 それらの相違 は通常は小さなものですが、プログラムの動作には大いに影響してくる場合があります。 そのため、 Clickteam Fusion 2.5 の ビルドして実行 オプションを使用することを推奨しています。 このオプションならウェブブラ ウザ上に直接アプリケーションを表示できるからです。

相違点は次の通りです。

背景衝突マスク

背景衝突マスクの扱い方は、 Windows ランタイムの場合と大きく異なります。 HTML5 アプリケーショ ンでは、 「障害物」 または 「下からすり抜けられる障害物」 として指定された背景オブジェクトの上に 障害物でないオブジェクトが存在する場合、 障害物でないオブジェクトは衝突に全く影響しません。 基本 的に最上位のオブジェクトが障害物でないオブジェクトである場合でも、その上のオブジェクトは衝突を検 出します。 同様のことは、障害物でないオブジェクトを背景に貼り付けた際にも発生し、衝突には影響しま せん。

字列オブジェクト、文字列の表示

Windows ランタイムでは、文字列オブジェクトのテキストはオブジェクトの高さより大きくても表示され ます。 HTML5 アプリケーションでは、テキストがオブジェクトのサイズを超えた場合、その部分は表示さ れません。そのため、テキスト全てを表示できるように文字列オブジェクトの高さを設定する必要がありま す。

字列オブジェクト、テキストの高さの計算

Javascript と Windows ではテキスト文字列の高さの計算方法が異なります。 結果的には、 Flash® Player が計算するテキストの高さは Windows スタンドアローンアプリケーションの場合よりも高くなり ます。 そのため、垂直方向の中央に整列した文字列オブジェクトの位置は Windows ランタイムの場合よ り、やや低くなります。 文字列オブジェクトをフレーム内に配置する際にはこの点を考慮してください。

Windows スタンドアローンアプリケーション

で利用できるアプリケーションおよびフレームのプロパティ の多くは HTML5 アプリケーションでは利用できません。 ビルドの種類をスタンドアローンアプリケーシ ョンから HTML5 ファイルに変更した場合、それらのプロパティは淡色表示されてます。 淡色表示された プロパティは利用できません。エフェクトなしのプロパティ例

• 前のフレームから表示を継続
• ウィンドウスタイルプロパティ
• ウィンドウメニュー
• 解像度を変更
• マシン速度に依存しない
• その他

キーボードとマウスのイベント

は、ゲームループで同時に発生しません。 例えば、マウスで位置を指定、 クリックした際にオブジェクトが点滅する、という場合などには問題となります。 また、右マウスキーは中 断されません。

浮動少数点内部エンコード

により、浮動少数点間の比較は 真とはなりません。 例えば 「カウンター = 1.23」 は、カウンターが 1.229999999 の場合には真になりません。 この場合は2 つの条件に対して、 例えば「カウンター >1.28」 および 「カウンター < 1.31」 のように以上や以下という比較を作成しま す。 注意: これは Windows ランタイムの場合も同様です。 ただし、 Windows ランタイムはより精度 が高いので、あまり問題になることはありません。

混ざり合った整数と浮動少数点

に関した複雑な計算はごくまれに Windows の計算結果とは微妙に異なっ た結果が出ることがあります。 これは Javascript と C++ の計算過程が Windows とは異なるためです。 この問題を解決するには、混ざり合った整数と浮動少数点を区別するために数式の異なっているステップを () で囲んでください。

マウスポインタ。

アプリケーションのウィンドウエリア外にあるマウスポインタの座標を取得することがで きないブラウザもあります。 したがって、マウスポインタがフレームの外に移動された場合、最後に確認さ れた座標は、マウスが領域から出た直前の座標になります。 そしてマウスポインタが再度フレーム内に移動 されるまでその座標に止まることになります。

同一フレーム上の背景オブジェクト

と貼り付けられたオブジェクト間には、表示優先度に違いがあることも あります。

無制限スクロールのレイヤー。

スクロール中常にフレームの背景色が表示されるようにするためには、最初 のレイヤーのラップモードを有効にする必要があります。

ファイル。

お使いのコンピュータ上では Javascript はファイルの書き込みや読み込みを行うことはできま せん。 特定のブラウザに依存したフォルダ内のデータなら読み込んだり保存したりすることは可能です。ま たアプリケーションがあるウェブサーバーから直接データを読むこともできます。 編集、リスト、コンボ、 および Ini オブジェクトは、初めはアプリケーションに保存された旧データから読み込もうとします。 そ のデータが⾒つからなかった場合、アプリケーションのバイナリファイルからデータを読み込みます。 そこ からも読み込めない場合はウェブサーバーからファイルを読み込もうとします。(ファイルは html ファイ ルのとなりにあるはずです。) Windows のランタイムと異なり、HTML5 のランタイムはファイルを抽出 する時ファイルの名前とエクステンションだけを考慮します。この場合パスとドライブは無視されます。 例 えば、INI オブジェクトには Windows の MFA ファイルの横にリンクしているフルパス名があります。 HTML5 ランタイムはこのパス名を無視し、またこのファイルの名前とエクステンションは INI データを読 み込んで保存する時にだけ使われます。

4. プリローダーの挿入

HTML5 ランタイムならアプリケーションにプリローダーを挿入することができます。 画像と音声がインターネ ットから読み込まれたときに、プリローダーが表示されます。 プリローダーの種類は次のプロパティで変更する ことができます。 :

種類

シンプルなイメージプリローダーを使用するか (その場合はイメージを選択)、アプリケーションフレームを 構成するより凝ったプリローダーを使用するか、選択できます。

イメージを選択した場合

イメージ上で円がぐるっと回って読み込み状況を表示する (プログレスサークルといいます) 既定のプリローダ ーが追加されます。 シンプルですが、カスタマイズすることも可能です。 既定では、 Clickteam Fusion 2.5 の ロゴがイメージとして使用されます。 このプリローダーはさまざまなサイズのアプリケーションウィンドウで動 作します。 カスタマイズ可能な項目は次の通りです:

イメージファイル

使用するイメージファイル (PNG、 GIF または JPG) へのパスを指定します。 ここで指定するイメージフ ァイルがプリローダーに表示されます。 プリローダーは自動的にウィンドウの中央に表示されます。 した がって、イメージファイルとウィンドウのサイズが同じであれば、イメージがウィンドウ全体を覆うように 表示されることになります。 アルファチャンネル付きのイメージファイルを使用して、ウィンドウの背景を 表示することも可能です。

プログレスサークルの色

このプロパティでは、プログレスサークルの色を設定します。 サークル (円) のグラフィックが表示され、 読み込み状況をパーセンテージで表示します。 サークルのアニメーションは 6 時の位置から半時計まわり にぐるっと移動します。

プログレスサークルの X 座標

このプロパティでは、プログレスサークルの中心点の X 座標を指定します。

プログレスサークルの Y 座標

このプロパティでは、プログレスサークルの中心点の Y 座標を指定します。

プログレスサークルの半径

このプロパティでは、プログレスサークルの半径を設定します。

プログレスサークルの厚さ

このプロパティでは、プログレスサークルの厚さを設定します。

アプリケーションを選択した場合

この場合 Clickteam Fusion 2.5 ならプリローダーとしてもうひとつのアプリケーションフレームを含みます。

のアプリケーションのフレーム

このプロパティはプリローダーとして使うフレームの数を表します。

プリローダーとして使用するフレームを作成するには

• 新規フレームを作成します
• このフレームに使用したいオブジェクトを挿入します
• このフレームに HTML5 オブジェクトを挿入します。 イベントエディタで、このオブジェクトはプリロー ダーで使用する 2 つの数式が含まれます: 合計サイズを取得 は読み込まれるデータの合計サイズを返しま す。 ロード済みサイズを取得 は現時点で読み込みが完了したサイズを返します。 これら 2 つの値をプリ ローダーページでの表示に使用します。HTML5 オブジェクトには、フレームがプリローダーとして実行さ れているかどうかを検出する条件 (「プリローダーである」) が含まれています。

プリローダー フレームの注意点:

• プリローダーは入力イベントを考慮しないので、キーやマウスクリックはプリローダーに影響を与えません。
• コード内でダウンロードの終了を検出するべきではありません。 単純にダウンロード済みのサイズのみを表 示し、アプリケーションは終了させないでください。
• 特定のブラウザは一度にすべてのデータを読み込みます。ということは、プリローダーは LOW (読み込み サイズ少量)から FULL (読み込み完了)へ変化します。 HTML5 アプリケーションには多数のプロパティが ありますので、希望通りに変更することができます。

5. HTML5 アプリケーションのプロパティ

HTML5 アプリケーションには多数のプロパティがありますので、希望通りに変更することができます。

HTML ファイルを生成する

このプロパティにチェックを入れれば、 Clickteam Fusion 2.5 が指定したフォルダに、作成したアプリケーシ ョンの名前で Html ファイルを保存しますので、アプリケーションを読み込み後起動することができます。 この Html ファイルは「ビルドして実行 オプション」が正常に動作するために必要です。 この Html ファイルでウ ェブサイトに Clickteam Fusion 2.5 アプリケーションを組み込んで表示する方法がわかりますし、また十分に コメントアウトされています。 自分だけのオリジナル Html ファイルを作成することもできます。 その場合こ のプロパティのチェックを外せば次回ビルドを作成したとき、削除されることはありません。

モザイクファイルで画像をグループ化

このプロパティにチェックを入れると、アプリケーション内のすべての画像がモザイク画と呼ばれるひとつの大 きな画像になります。 この機能はアプリケーションのグラフィックを読み込むのに必要な時間を劇的に短くしま す。 アプリケーションに画像がたくさんある場合は、モザイク画を作成するプロセスに時間がかかることもあり ます。「ビルドして実行 オプション」の動作が遅くなった場合、このプロパティを無効にすることもできます。 画像はそれそれ別々に保存され、ビルドするプロセスは速くなります。 アプリケーションをリリースする前には 忘れないでこのプロパティをもう一度チェックしてください。

フレーム間のリソースをキープする

このプロパティにチェックを入れると、 Clickteam Fusion 2.5 はフレームとフレームの間の画像と音声をリリ ースしません。次にアプリケーションが同じフレームを再生するときに再度読み込む必要がありませんので、フ レームへの入力時間が速くなります。 モバイルデバイスのメモリは PC のメモリより少ないため、タブレットや スマートフォンでアプリケーションを実行するならこのオプションは使用しないでください。

フォーカスがない場合も実行

このプロパティのチェックを外すと、ブラウザのウィンドウからフォーカスが外れると同時にアプリケーション は停止します。 チェックを入れると、ブラウザのウィンドウからフォーカスが外れても、アプリケーションは動 き続けます。

アプリケーションのフォーカス解除時にサウンドをミュートしない

このオプションはアプリケーションプロパティの 「ランタイムオプション」 にあります。 前項のプロパティに チェックが入っている場合 (ウィンドウにフォーカスがされていなくてもアプリケーションが実行される) には、 Clickteam Fusion 2.5 はフォーカスが当たってない場合でも音声を停止するかどうかをきいてきます。 例えば、 アプリケーションは停止しているけれども音声は再生させる、など選択できます。

オフラインを許可

このプロパティは、appcache ファイルを作成して Html ファイルの横に保存することができます。そうすると 作成したアプリケーションがインターネットに接続されたユーザーの PC で正常に動作します。 音声や画像やデ ータなどのすべてのキャッシュは、ユーザーが初めてアプリケーションを再生するときブラウザのキャッシュフ ァイルにキャッシュされ、そのキャッシュは PC がインターネットに接続されていない時に使用されます。 この オプションは開発の最終段階、ゲームが完成したときに初めて有効にすることを推奨しております。 このオプシ ョンが正常に動作するためには、mime タイプの "text/cache-manifest" を サーバー上 ".appcache"で終わる ファイルとして定義する必要があるのでご注意ください。

メディア フォルダ

このプロパティには、プロジェクトをビルドするとき保存したアプリケーションのリソースすべてのディレクト リが含まれています。 このプロパティはすべてのデータがプロジェクトのルートに保存されている場合、空とな ります。 このプロパティを変更すると自動的に Clickteam Fusion 2.5 が生成する html ファイルにあるコード も変更されます。 もしディレクトリを変更する場合は、ビルドプロジェクトフォルダ内にある古いディレクトリ を手動で削除する必要がありますのでご注意ください。

ソース フォルダ

このプロパティにはアプリケーションを実行するための Javascript ソースコードが保存されているディレクト リが含まれています。 このプロパティは、すべての Javascript コードがプロジェクトのルートに保存されてい る場合、空となります。 上記のコメントが適用されます。

ジョイスティックイメージ

タッチジョイスティックのイメージを設定します。 詳細はジョイスティックのプロパティを参照してください。

フレームのプロパティ

それぞれのフレームには HTML5 特有のプロパティを含みます。

プリローダーを表示する

プリローダーがアプリケーションで定義されていれば、このプロパティでフレームにプリローダーを表示するか どうか選択できます。 プリローダーが表示するには、次の２つの条件を満たす必要があります。 1. プリローダ ーがアプリケーションプロパティで定義されている。 2. 「プリローダーを表示する」 が選択されている。

ジョイスティック

Clickteam Fusion 2.5 ならキーボードがないモバイルデバイスでアプリケーションが使用されたときでも、仮想 ジョイスティックまたは加速度センサーが操作するジョイスティックを、キーボートの代わりとして使用できま す。 コンボボックスで選択できます。

なし

ジョイスティックは表示されません。

タッチジョイスティック

仮想ジョイスティックは画面の右または左に表示されます。

加速度センサージョイスティック

ジョイスティックはデバイスの加速度センサーによってコントロールされます。

エクステンションでコントロール

「ジョイスティックコントロール」 エクステンションをフレームにドロップする必要があります。 そ してそのエクステンションを使ってジョイスティックを表示するかどうか選択できます。

発射 1 ボタン

最初のジョイスティックボタンを表示します。

発射 2 ボタン

2 つ目のジョイスティックボタンを表示します。

左利き

左利きユーザーのためにジョイスティックとボタンの位置を逆にすることができます。