[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]
スポンサーサイト

【プラグイン】セルアニメ再生


よくRPGツクール向けに、全部のコマが連結してひとつの画像ファイルになっている
戦闘エフェクト画像素材が配布されてますね。
pipo-btleffect110c.png

図.連結アニメーション素材の例(画像は「ぴぽや倉庫」より)

こういう素材を用いてティラノスクリプト上でセルアニメ(コマアニメ)を
再生するためのプラグインを作りましたので、配布してみます。

ダウンロード

celanim.zipをダウンロード

履歴

2017/11/02 18:25 配布開始。

続きを読む

プロフィール

著者:荻原(@tempura17654)
画像は『King Exit』(©紅唯まと)より、グイーネという登場人物。

全記事表示リンク

全記事表示リンク

検索フォーム

ブロとも申請フォーム

QRコード

QR