[新型コロナウイルスによるバックアップCD販売休止のお知らせ]
オンラインスコアガイド

はじめに

Clickteam Fusion 2.5 のガイドへようこそ! 本ガイドに記載されている情報の一部は、Multimedia Fusion 2 でも利用できます。 PDF 形式のチュートリアルやガイドはご自由に印刷してお読みください。 お好きな時間にご自身のペースで読み、学習していただけます。

Clickteam Fusion 2.5 では、ある結果を得るための方法は 1 つに限定されません。本ガイドでは、それらのうち、最も一般的かつ簡単で効果的と思われる方法をご紹介しますが、方法はそれだけだけではない、ということを頭の片隅に留めておいてください。

本ガイドは、ゲームであれ、アプリケーションであれ、 Clickteam Fusion 2.5 を使って開発を行おうとお考えの方に、知りたいことを丁寧に説明することを目指して作成いたしました。

本ガイドについてのご意見、ご感想をお待ちしております。 学習者のレベルに合わせたガイドを個別に作成するのではなく、初心者から中級、上級者まですべてのレベルの方が同じガイドで同じ目標を達成できればと考えております。

本ガイドでは、 Clickteam Fusion 2.5 で作成するゲームやアプリケーションで動作する、オンラインのハイスコアシステム作成についてご説明します。

インディゲームクリエイター:MySQL

本システムは、 Fusion 2.5 の次のランタイムで動作します: Windows EXE、 Flash、 Android、 iOS および HTML5

また将来リリースされるエクスポートモジュールでも、それが Get object および String Parser エクステンション (後述) をサポートすれば動作します。

本ガイドで使用されるファイルはこちらからダウンロードできます。

Sparckman氏による、画像つき・ステップバイステップのチュートリアルを6. Sparckman氏による、画像チュートリアルに追加しました。

1. オンラインスコアとは

オンラインのハイスコアシステムは、 Fusion 2.5 でのゲーム作成において最もリクエストの多い機能の一つです。 実装は比較的簡単で、 Fusion 2.5 での少しの作業とウェブサーバー上で PHP コードに少しの作業が必要になるだけです。

本チュートリアルでは次の基本をご紹介します。

  • www.000webhost.com で無料のサーバーアカウントを設定する方法
  • ウェブサーバー上のあなたのアカウントに接続するための PHP スクリプトの編集方法
  • Fusion 2.5 で作成したゲームをサーバーに接続し、データを送受信する方法
  • Fusion 2.5 と PHP/mySQL を使用する場合のヒント

本チュートリアルでは、次のエクステンションが必要になります。 これらはエクステンション マネージャーでダウンロードできますので、予めインストールしておいてください。

  • Get object
  • String Parser

Get object は、標準的な http プロトコルを使用してウェブサーバーと通信するために使用し、 String Parser は、Get object がダウンロードする情報を解析するために使用します。

本チュートリアルの趣旨は、ハイスコアを取得してサーバーに保存したりサーバーから読み出すための基本についての説明ですので、これらのオブジェクトについては、あまり詳しくは触れません。

2. PHP と mySQL でウェブサーバーを立ち上げる

PHP とは? mySQL とは?

PHP は、Fusion 2.5 と mySQL データベース間の通信に使用するスクリプト言語です。 mySQL は、ウェブサーバー上で動作するデータベーステクノロジーです。

従って、簡単に言いますと、

PHP は、ウェブサーバーと Fusion 2.5 の間の通信パイプであり、mySQL は、サーバー上でスコアやデータが保存される場所である、となります。

本チュートリアルでは、 PHP や mySQL に深く突っ込みはしませんが、多くの方にとってこれらは新しい勉強となるかもしません。 でも本当に基本はシンプルなものです。

  • ステップ 1 – www.000webhost.com でアカウントを作成する、または既にお持ちのサーバーを使用する
  • ステップ 2 – 新規に mySQL データベースを作成する

インディゲームクリエイター:MySQL

ご注意

本チュートリアルガイドでは、 www.000webhost.com を無料で使えるウェブホスティングサービスの一例としてご紹介しています。 本チュートリアルを進めるにあたり、 www.000webhost.com の使用は必須ではありません。 PHP と mySQL が利用可能な他のサービスをお使いいただいても構いません。

次ページからの手順に従い www.000webhost.com に Free Hosting (無料) プランを申し込むと、www.000webhost.com から宣伝などのメールが届く可能性があります。 また www.000webhost.com のサービスの内容は将来変更される可能性があります。 www.000webhost.com の営業活動は clickteam LLC. および株式会社デジカとは一切関係がございません。予めご了承の上、ご利用ください。

ステップ 1 - 000Webhost で Free Hosting (無料) プランを申し込む

  1. http://www.000webhost.com/ のトップページから、 Free Hosting の Order Now ボタンをクリックします。
  2. 下図のように必要事項を入力して Create My Account ボタンをクリックします。 上から 2 つ目の欄には新規作成したいサブドメイン名を入力します (下図の例では、 clickteamfusion25 と入力)。
    インディゲームクリエイター:webhost注文登録1
  3. 下図のように表示されたら、先ほど入力したメールアドレスに 000webhost.com から Confirm your registration という件名の確認メールが届いているはずですので、それを確認してメール内のリンクをクリックし、メールアドレスの確認を完了してください。
    インディゲームクリエイター:webhost注文登録2
  4. メールアドレスの確認が完了すると、下図のように Status が Active になります。 以上で利用の準備は完了です。 Go to CPanel のアイコンをクリックして、アカウントのコントロールパネルに移動します。
    インディゲームクリエイター:webhost注文登録3

ステップ 2 - MySQL データベースを作成する

  1. 000Webhost.com のコントロールパネルで MySQL アイコンをクリックします。
    インディゲームクリエイター:webhost SQL
  2. 続いてデータベースの詳細を設定する必要があります。 下図の例を参考に名前やパスワードを入力して Create database ボタンをクリックします。
    インディゲームクリエイター:データベース設定

設定した情報は、忘れずに書き留めておいてください。 上図の設定例の場合、情報は以下のようになります。

  • サーバーのホスト名: mysql5.000webhost.com
  • データベース名: a4636334_scores
  • ユーザー名: a4636334_scores
  • パスワード: ********

あなたの設定:

  • ホスト名:
  • データベース名:
  • ユーザー名:
  • パスワード:

間違いのないよう正しい情報を記録してください。 言うまでもありませんが、誤った情報では正常に動作しません。

インディゲームクリエイター:データベース設定確認

データベースが作成されたら、 PHP ファイルを編集して作成したばかりのデータベースに接続します。

インディゲームクリエイター:データベース設定完了

3. PHP スクリプトの編集

Zip ファイルに収録されている config.php を適当なテキストエディタで開きます。

次のセクションを見つけて、あなたの情報を入力してください。

// Your host -- for example localhost or mysql.server.com
$mysql_host = "ここにホスト名を入力してください";
// Your user name for mySQL
$mysql_user = "ここにユーザー名を入力してください";
// Your password for mySQL
$mysql_password = "ここにパスワードを入力してください";
// Your database name for mySQL
$mysql_database = "ここにデータベース名を入力してください";

何を入力すべきかはおわかりですね。 さきほど書き留めた情報です。 情報をすべて埋めてファイルを保存してください。

編集するのはこれだけです。 すべてのファイル (config.php、 index.php、 score_script.php) を public_html フォルダーにアップロードしてください。 FTP へのアクセス情報は、 000Webhost.com からメールで送付されているはずです。

アップロードが完了したら、ここまでの作業に問題がないか確認します。 ウェブブラウザーで次の URL を開いてください。 あなたのサーバーのルートです。

www.あなたのURL/score_script.php?status=test

もちろん 「あなたのURL」 の部分には、あなたのウェブサイトの URLを入力してください。 作業に問題がなければ下図のように "online" と表示されるはずです。

インディゲームクリエイター:データベースオンライン

エラーメッセージが表示されたり、 "online" 以外の何か別の表示がされるようでしたらば、作業がどこかで間違っています。 少し戻って、 PHP の編集に問題がないか、アップロードするファイル、場所に問題がないかをご確認ください。

4. Fusion MFA

Clickteam Fusion 2.5 で Zip ファイルに収録されているEasy_Score_Upload.mfaを開きます。

イベントエディタで次の名前の編集オブジェクトを見つけてください: Edit Box Script URL

「フレームが開始」 のイベント行で、現在設定されているアクションを編集し、"Change this to your URL" のテキストを次のように変更します。

"http://あなたのURL/score_script.php"

それではアプリケーションを実行してみましょう。

  • 下図のように画面右下に Server Online と緑色の文字で表示されているでしょうか?
  • また、サーバーから読み込まれたスコアのリストが表示されているでしょうか?
  • 画面上部の Player Name にプレイヤー名、 Player Score にスコアの数字を入力して、 Upload This Score ボタンをクリックしたらリストが更新されたでしょうか?

表示された方 --- おめでとうございます。 設定はすべて完了しました。 あとはご自由にカスタマイズしてください!

表示されなかった方 --- 設定した URL に誤りがないかもう一度ご確認ください。 この URL は手順 3. でテストした URL と基本的には同じものです (末尾の "?status=test" は不要)。

インディゲームクリエイター:起動中のスコア

5. この後の作業

MFA ファイルに 「Edit Box Secret Key」 という名前のエディットボックスオブジェクトがありますが、この内容は config.php 内の下記の場所で指定されているものと同じ文字列でなければなりません。

// ATTENTION
// This is your secret key - Needs to be the same as the secret key in your game
// You can change this but remember to change it in your game.
// This is used to help secure the score and produce MD5 hashes
$secret_key = "this is secret";

この値は MFA 内および config.php 内で変更してお使いください。 この値はあなたの Security Hash (セキュリティハッシュ) を作成するために使用されますので、ゲームのプレイヤーには表示すべきではありません。 これが知られると、スコアの不正送信が容易に可能となってしまいます。

PHP ファイルと MFA ファイル内で変更することはもちろん必要ですが、上級者の方なら、各 Game ID が異なる Secret Key を持つようにしてもよいでしょう。

Game ID について言及しますと、このスクリプトは無制限数のゲームを処理することができます。 MFA ファイル内でゲーム毎に異なる Game ID を使用するだけです。 「Edit Box Game ID」 という名前のエディットボックスオブジェクトがあります。 その値を各ゲームごとに変更すればよいのです。

index.php については、いつかこれを拡張し、ウェブページ上でスコアをリスト表示するようにしたいと思っています。 作業は本当に簡単で、ただやっていないだけなのですが。 ですから、ウェブページ上にゲームのスコアを表示することはもちろん可能です。

6. Sparckman氏による、画像チュートリアル

Clickteam Forum のSparckman氏が投稿しました、画像で細かい手順が説明されます。

初回はこちらを見ていただくとやりやすいでしょう

デモのPHPをこちらからダウンロードできます。

デモのプロジェクトはこちらからダウンロードできます。

デモプロジェクトでは、エクステンションマネージャで、Get Object と String Parser が必要になります。

000webhost トップページ

http://www.000webhost.com を開きます

Free Hosting の列の Order Now ボタンをクリックします。

000webhost サイトの注文

下記の情報を設定します

I will choose your free subdomain
希望するドメイン名を入力
Your name
氏名を入力
You email
有効なメールアドレスを入力(確認メールが送信されます)
Password
パスワードを入力、6文字以上、文字と数字を両方使用
Type password again
同じパスワードを入力
CAPTCHA
画像に表示される文字を入力
I agree to Terms of Service
利用規約許諾するのでチェック

最後は「Create My Account」でアカウントを作成します。

000webhost メール承認待ち

メール承認待ちと表示されます

設定したメールアドレスで受信し、下記のメールを受け取ります。

000webhost 受信されるメール:承認

confirm.php の入っているリンクを開きます

さらに、設定したメールアドレスで受信し、新しいメールが届きます。

000webhost 受信されるメール:完了

設定が完了したメールを確認できます。ログインとパスワードも記載されるので大事にとっておきます。

メールに記載されるリンクにアクセスし、ログインするとドメインの状態が有効になっています。

000webhost 有効ドメイン

Go to CPanel をクリックしてドメインのCPanelを開きます。

000webhost CPanel

MySQL を開きます。

000webhost CPanel MySQL

Create new database and user を選択し、下記の情報を入力します

MySQL database name
データベースの名前
MySQL user name
データベースにアクセスできるユーザーの名前
Password for MySQL user
データベースにアクセスできる上記のユーザー名のパスワード
Enter Password again
確認のため、パスワードの再入力

最後は「Create database」でデータベースとそれにアクセスできる一つのユーザーアカウントが作られます。

000webhost CPanel MySQL データベース作成完了

データベースが作られますというお知らせページが表示されます。

000webhost CPanel MySQL データベース作成完了:PHPインフォ

PHP用の情報が記載されます。その情報をとっておきます。

000webhost CPanel MySQL データベース作成完了:戻る

Back to Control Panel で CPanel に戻ります。

000webhost CPanel

File Manager を開きます。

000webhost File Manager

root フォルダーにファイルを置きません! public_html フォルダーを開きます。

000webhost File Manager public html

default.php を選択して、Deleteで削除します。

000webhost File Manager public html 削除

チェックマークをクリックします。

000webhost File Manager もどる

矢印で、前に戻ります。

ファイルのアップロードする前に、Config.phpを編集しておくと一度で完了します

000webhost File Manager Upload

Upload をクリックします。

000webhost File Manager Browse

Browse... でアップロードするファイルを選択します。

000webhost File Manager php ファイル

下記の3ファイルを選択して、アップロードします。

000webhost File Manager php アップロード確認

チェックマークで選択したファイルをアップロードします。

000webhost File Manager php アップロード完了

アップロードは完了したら、矢印で戻ります。

config php の編集

テキストエディターで、Config.phpを編集します。Sparckman氏はNotepad++をお勧めしていますが、どのテキストエディターでも大丈夫です。

config php の編集:mysql情報入力

Config.php に、Mysql で設定した情報を反映します。

config php の編集:mysql情報+Secret key

Config.php に、任意のSecret Keyを設定します。ゲームで同じものを使います。

ファイルを編集した後、サーバーにアップロードします。

Clickteam : php online score

自分のプロジェクト(または下記のデモ)のスコアスクリーンを開きます。

Clickteam : php online score

イベントエディタを開きます。

Clickteam : php online score テキスト編集

ENTER URL の 編集 > テキストの変更 を選択します。

Clickteam : php online score URL入力

Score_script.php のURLを入力します。

Clickteam : php online score テキスト編集

ENTER SECRET WORD の 編集 > テキストの変更 を選択します。

Clickteam : php online score KEY入力

config.phpで設定した Secret Key を入力します。

Clickteam : php online score フレームを実行

フレームを実行 をクリックします。

Clickteam : php online score 完了

すべてがうまく設定されている場合、Server Online と表示されます。

mysqlサーバー確認

http://myserver/score_script.php?status=true でサーバーの状況を確認できます。