Almightでプラグインを作る

Almight の公式サイトのチュートリアルでプラグインを読み込む方法は書いてありましたが、プラグインの作り方は書かれていなかったので、試しにやってみました。

今回は、テキストにマウスオーバーした時にツールチップを表示するタグをプラグインで作成してみよう思います。

まずは編集するファイルを作成します。

Almight のプロジェクトフォルダ内の lib フォルダに plugin フォルダがありますので、それを開きます。

すると、template.php というファイルがありますので、それをコピーします。

今回は tooltips.php というファイル名にしておきます。

tooltips.php をテキストエディタで開きます。

すると、以下のような内容となっております。

今回はメッセージレイヤーにテキストを表示して、マウスオーバーしたらツールチップを表示するので、

「ゲームに読み込まれるcss」と「ゲームに読み込まれるjavascript」の個所を編集します。

「ゲームに読み込まれるcss」には、マウスオーバーした時に表示するツールチップを表示するための装飾を記述します。

<!--
  ******** ゲームに読み込まれるCSS ********
-->
<style type="text/css" data-append="yes">
  #tool-tips span {
    position:relative;
  }
  #tool-tips span:hover {
    background: #deb3ba;
  }
  .tips-text {
    display: none;
    position: absolute;
    bottom: -2em;
    left: 0.3em;
    padding: 0.3em 0.5em;
    color: #FFFFFF;
    background: #c72439;
    border-radius: 0.5em;
  }
  .tips-text:after {
    width: 100%;
    content: "";
    display: block;
    position: absolute;
    left: 0.5em;
    top: -8px;
    border-top:8px solid transparent;
    border-left:8px solid #c72439;
  }
  #tool-tips span:hover~.tips-text {
    display: block;
  }
</style>

「ゲームに読み込まれるjavascript」の方には、タグとして使えるようにする記述と、タグの処理を記述します。

<!--
  ******** ゲームに読み込まれるJavaScript ********
-->
<script type="text/javascript" data-append="yes">
  $(function(){
    /**
     * [tooptip text="メッセージレイヤーに表示するテキスト" tips="マウスオーバーで表示するテキスト"]
     */
    $.extend(almight.tag, {
      // タグを追加
      'tooltip': function(params){
        // メッセージレイヤーにtextを表示
        $('.almight-layer-line').append('<span id="tool-tips"><span>'+ params.text +'</span><div class="tips-text">'+params.tips+'</div></span>');

        return 1;
      }
    });
  });
</script>

そして、作成したプラグインを Almight のコンフィグファイルで読み込むようにします。

Almight.config.js のプラグインの記述部分に、tooltips.php を以下のように追記します。

// Almightプラグイン
plugin: [
  'blue-ui.php', // ナビゲーションバーや各種UI部品を追加(青テーマ)
  'history.php', // メッセージ履歴機能を追加
  'save.php', // セーブ画面を追加
  'load.php', // ロード画面を追加
  'setting.php', // 環境設定画面を追加
  'title.php', // タイトル画面を追加
  'cgmode.php', // CGモードを追加
  'scene.php', // 回想モードを追加
  'firelight.php', // ファイアーライトを追加
  'sidebar.php', // サイドバー機能を追加
  'tooltips.php' // ツールチップ表示プラグインを追加
]

これでタグが tooltip のタグが使えるようになったので、シナリオファイルにタグを記述して、実際に使ってみます。

普通のテキスト。[tooltip text="ツールチップ用のテキスト。" tips="ツールチップ表示"]
@s

今回は、テキストを表示させるので、「ゲームに読み込まれるHTML」という個所は触りませんでしたが、

これを書いて表示すると、Almightの標準で使えるセーブ・ロード画面や、設定画面と同じようなものが作れます。

標準で用意されているものも、pluginフォルダに入っているので、そちらのソースを見ると分かりやすいことでしょう。

人気記事すべて表示

AlmightJSすべて表示