2016年6月21日火曜日

RPGツクールMV製ゲームをブログや自サイトに埋め込む方法

 RPGツクールMV製のゲームはインターネット上に一般公開できるのが特長で作成したゲームを自分のサイトやGithub等で自由に公開できます。あとはそのURLを広く周知すればいいだけですが、ブログやWebサイト上にゲーム画面を直接埋め込むことも可能です。そこで本稿ではそのやり方を簡単に説明します。なお、導入には基本的なHTMLタグに関する知識が必要です。

「iframe」タグを利用する

 iframeタグを利用すると、異なるサイトのドキュメントをインラインフレーム内に表示できるようになります。以下はその一例です。

<iframe id="gameFrame" allowfullscreen width="816" height="624" src="https://triacontane.github.io/PluginDevelopment/" sandbox="allow-same-origin allow-scripts"></iframe>

 各属性について説明します。
  • src:ゲームのURLを設定します。
  • width:ゲームの解像度(横幅)を設定します。
  • height:ゲームの解像度(高さ)を設定します。
  • sandbox:コンテンツにセキュリティの観点から制限を掛けることができます。指定する場合、最低限「allow-same-origin」と「allow-scripts」がないと起動しません。
  • allowfullscreen:設定しておくとゲームをフルスクリーンで表示できるようになります。
iframeタグの仕様詳細はこちらをご覧ください。

ゲームの開始と終了が可能なボタンを用意する。

 このとおりiframeタグを定義すれば、自作のツクールMV製のゲームを埋め込むことができますが、src属性に最初からURLを設定しておくとブログを開いた時点でゲームが開始されてしまいます。昨今、スマートフォンから開かれることも多いので、音量や通信量の面で問題がありますね。そこで専用のボタンを用意してボタンが押されてからゲームが開始されるようにしてみましょう。加えて、ゲーム開始後すぐに操作できるようにフォーカスをゲーム画面に移動しています。

<input type="button" value="ゲームを始める" onclick="gameFrame.src='https://triacontane.github.io/PluginDevelopment/'; gameFrame.focus();"/> <input type="button" value="ゲームを止める" onclick="gameFrame.src='';"/>

 onclickイベントでiframeのidに指定したsrc属性にゲームのURLを動的に設定しているだけです。スクリプト言語はMVユーザにはおなじみのJavaScriptですね。ついでに終了ボタンも用意してみました。

実際に埋め込んでみる

 実際に私がGithubにあげたゲームを埋め込んでみました。「ゲームを始める」ボタンで開始します。なお、プラグインのデモ用プロジェクトなので、まともなゲームとしては動作しません。ご了承ください。通常ではMV製ゲームでのリロードはF5(ページリロード)ですが、この場合はWebサイトそのものをリロードしてしまうのでゲームだけをリロードしたい場合、再度「ゲームを始める」ボタンを押下すればOKです。


(C)2015 KADOKAWA CORPORATION./YOJI OJIMA


操作方法

  • Z, Enter:決定
  • X, Esc:キャンセル・メニュー
  • Shift:ダッシュ
  • F3:画面にフィット
  • F4:フルスクリーン

まとめ

 ゲームをサイトに埋め込むことで操作方法や権利表記、使用素材明細をゲーム画面外に記述することもできますし、場合によってはアフィリエイト収入も期待できますね。今回はお試しということで最低限の機能のみ解説しましたが、外観にもこだわることでよりゲームの雰囲気を醸し出すこともできるかもしれません。以上、ツクールMVならこんなこともできますよー、という紹介でした。

6 件のコメント:

  1. 良い情報
    ありがとうございます。

    返信削除
    返信
    1. ありがとうございます。
      ぜひ、有効にご活用ください。
      ------------------------------
      Thanks :)

      削除
    2. とろろいも2016年7月15日 14:18

      埋め込みゲームにおいてマウスでクリックした際に
      四角ではなく丸になっているのですが、
      どのようにしているのでしょうか?

      削除
  2. とろろいも2016年7月15日 14:31

    追記
    自由座標にもなっているように見受けられるのですが、どのようにしているのでしょうか。

    返信削除
    返信
    1. こんにちは。
      「もどきぷにコンプラグイン」の適用によるものです。
      ただ、現状(自作プラグイン同士の競合により)正しく動作していないようなので、時間のあるときに対策します。

      https://raw.githubusercontent.com/triacontane/RPGMakerMV/master/RelativeTouchPad.js

      削除
    2. とろろいも2016年7月26日 0:23

      返信が遅れて申し訳ありません。どうもありがとうございます。

      削除