2017/11/23
[clickable]のタグ生成支援
クリッカブルな領域（[clickable]）を作成したいときにスクリプトオンリーで作業するのは苦行です。
イラスト系のソフトを併用して作成するのが無難なところですね。
ここでは、JavaScriptを使ってクリック＆ドラッグで
クリッカブルな領域を作成するタグ文字列を生成するコードを紹介します。
以下をfirst.ksに貼り付けてからティラノライダーなどでゲームを起動し、
ゲーム画面をクリック＆ドラッグすることによって、
クリッカブルな領域を作成するためのタグ文字列を
クリップボードにコピーすることができます。
※使用条件として、
・ゲーム画面の拡縮比が1倍
・左および上方向の余白がない
の2点があります。ご注意ください。
[iscript]
// 変数を宣言
var clipboard, tag_base, is_down, getPos, orgPos, posStart, posEnd, j_div;
// ドラッグを有効に
$('.tyrano_base').attr('ondragstart','');
// クリップボードを取得
clipboard = require('nw.gui').Clipboard.get();
// タグの基礎データを定義
tag_base = '[clickable x="{x}" y="{y}" width="{w}" height="{h}" target="*" opacity="10" mouseopacity="40" border="1px:dashed:black" color="white"]';
// いまマウスのボタンは押下されているか？
is_down = false;
// マウス位置を取得する関数を定義 (get position)
// ゲーム画面の余白および拡大縮小を考慮しない
getPos = function (e) {
return {
x: e.pageX,
y: e.pageY
}
};
// 2点のマウス位置を整理する関数を定義 (organize positions)
// 2点の座標 pos1, pos2 によって決定される矩形領域の
// 左上の座標 x, y および幅と高さ w, h をプロパティに持つような
// オブジェクトを返す
orgPos = function (pos1, pos2) {
var ret = {};
if (pos1.x > pos2.x) {
ret.x = pos2.x
ret.w = pos1.x - pos2.x;
} else {
ret.x = pos1.x
ret.w = pos2.x - pos1.x;
};
if (pos1.y > pos2.y) {
ret.y = pos2.y
ret.h = pos1.y - pos2.y;
} else {
ret.y = pos1.y
ret.h = pos2.y - pos1.y;
};
return ret;
}
// マウスダウン時のマウス位置
posStart = {
x: 0,
y: 0
};
// マウスアップ時のマウス位置
posEnd = {
x: 0,
y: 0
}
// mousedown イベントハンドラに関数を渡す
$('.tyrano_base').on('mousedown', function(e) {
// フラグを立てて
is_down = true;
// マウス位置を取得
var pos = getPos(e);
posStart = pos;
// div 要素を作って挿入する
j_div = $('<div>');
j_div.css({
'position': 'absolute',
'left': pos.x + 'px',
'top': pos.y + 'px',
'width': '1px',
'height': '1px',
'background': 'white',
'opacity': '0.4'
});
j_div.appendTo('.tyrano_base');
});
// mousemove イベントハンドラに関数を渡す
$('.tyrano_base').on('mousemove', function(e) {
// マウス押下中でなければ無視
if (! is_down) return false;
// マウス位置を取得
var pos = getPos(e);
posEnd = pos;
// マウス位置の整理
var ret = orgPos(posStart, posEnd);
// div 要素のスタイルの更新
j_div.css({
'top': ret.y + 'px',
'left': ret.x + 'px',
'width': ret.w + 'px',
'height': ret.h + 'px'
});
});
// mouseup イベントハンドラに関数を渡す
$('.tyrano_base').on('mouseup', function(e) {
// フラグを折る
is_down = false;
// マウス位置の取得
var pos = getPos(e);
posEnd = pos;
// マウス位置の整理
var ret = orgPos(posStart, posEnd);
// タグの基礎データをコピー
var tag = tag_base;
// 置換していく
tag = tag
.replace('{x}', ret.x)
.replace('{y}', ret.y)
.replace('{w}', ret.w)
.replace('{h}', ret.h);
// div 要素はフェードアウト後削除
j_div.fadeOut(1000, function() {
$(this).remove();
});
// クリップボードにコピー
clipboard.set(tag, 'text');
});
[endscript]
