@asmka/akashic-rclick-plugin NPM

akashic-rclick-plugin

本リポジトリはakashic-games/akashic-hover-pluginにインスパイアされています。

akashic-rclick-pluginは Akashic で右クリック可能なエンティティを利用することができるプラグインです。

実装例は sample ディレクトリ以下にあるサンプルプロジェクトを参照してください。

利用方法

akashic-cliをインストールした後、

akashic install @asmka/akashic-rclick-plugin

でインストールできます。

本プラグインをコンテンツへ登録し利用するには g.OperationPluginManager#register() を利用します。 g.OperationPluginManager#register() の第一引数にはプラグインの実態、第二引数には識別コードを指定する必要があります。識別コードは対象のプラグインを開始/停止する操作に必要となります。

import * as rclick from "@asmka/akashic-rclick-plugin";
...
g.game.operationPluginManager.register(rclick.RClickPlugin, 5); // RClickPlugin を 識別コード 5 で 登録
g.game.operationPluginManager.start(5); // 識別コード 5 のプラグインを開始
...

g.game.operationPluginManager.stop(5) // 識別コード 5 のプラグインを停止

第三引数には次の名前のプロパティ名と対応する値を持つオブジェクトを指定することができます。

cursor
- 文字列 (省略可能。省略された場合 "pointer")
- 右クリック時の cursor を指定。CSS に準拠。
showTooltip
- 真偽値 (省略可能。省略された場合 false)
- 右クリック時に tooltip を表示されるかどうか。
- 表示内容は RClickableE#title 。

g.game.operationPluginManager.register(rclick.RClickPlugin, 5, {
  cursor: "help",
  showTooltip: true,
});

コンテンツへの適用

E#touchable, E#rclickable プロパティが true を返すエンティティに対して E#onRClickDown, E#onRClickMove, E#onRClickUp トリガを発火させます。このインタフェースは RClickableE として src/RClickableE に定義されています。

export interface RClickableE extends g.E {
  rclickable: boolean;
  onRClickDown: g.Trigger<RClickDownEvent>;
  onRClickMove: g.Trigger<RClickMoveEvent>;
  onRClickUp: g.Trigger<RClickUpEvent>;
  cursor?: string;
}

E#onRClickDown は右クリックダウン時、E#onRClickMove は右クリックムーブ時、E#onRClickUp は右クリックアップ時に発火されます。

既存のエンティティへの適用

g.FilledRect など既存のエンティティを右クリック可能にするには以下のようにします。

import * as rclick from "@asmka/akashic-rclick-plugin";

...
const rect = new g.FilledRect(...);
const rclickableRect = rclick.Converter.asRClickable(rect);
rclickableRect.onRClickDown.add((e) => {
	rect.cssColor = "#f00";
	rect.modified();
});
rclickableRect.onRClickMove.add((e) => {
  rect.x -= e.prevDelta.x;
  rect.y -= e.prevDelta.y;
  rect.modified();
});
rclickableRect.onRClickUp.add((e) => {
	rect.cssColor = "#000";
	rect.modified();
});