@dff9th/akashic-rclick-plugin v0.1.3

akashic-rclick-plugin

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

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

利用方法

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

akashic install --plugin 5 @dff9th/akashic-rclick-plugin

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

上記の例では --plugin に 5 を指定していますが、これは任意の値で問題ありません。

本プラグインは、エントリポイント(lib/index)とプラグイン本体のスクリプトファイルが異なるため、 game.json を以下のように書き換える必要があります。 (相対パスとして認識させるため ./ が先頭に必要です。)

...
	"assets": {
		...
		// スクリプトアセットとして追加
		"rclick_plugin": {
			"type": "script",
			"path": "node_modules/@dff9th/akashic-rclick-plugin/lib/RClickPlugin.js",
			"global": true
		}
	},
...
	"operationPlugins": [
		{
			"code": 5,
			"script": "./node_modules/@dff9th/akashic-rclick-plugin/lib/RClickPlugin.js", // RClickPlugin.js のパスに書き換え
			"option": {
				"cursor": "pointer" // 右クリック時のcursorを指定。省略時は "pointer"
			}
		}
	],
...

コンテンツへの適用

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 "@dff9th/akashic-rclick-plugin";

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

仕様

option

game.json の operationPlugins の節で option プロパティにオブジェクトを記述することで、プラグインのオプションを指定できます。 option は次の名前のプロパティ名と対応する値を持つオブジェクトです。

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

ライセンス

本リポジトリは MIT License の元で公開されています。 詳しくは LICENSE をご覧ください。

ただし、画像ファイルおよび音声ファイルは CC BY 2.1 JP の元で公開されています。