スポンサーサイト

ゲームをWebサイトに埋め込んだときのスクロールを抑制する

ティラノスクリプトのゲームを、Webサイトの一部として画面に組み込む場合、
<iframe>タグか<object>タグを使って組み込むことになるでしょう。
書き方は、<object>タグなら
<object data="URL" type="text/html" width="横幅" height="高さ">
埋め込みが無効の場合のみ表示される文章
</object>
で、<iframe>タグなら
<iframe src="URL" width="横幅" height="高さ">
埋め込みが無効の場合のみ表示される文章
</iframe>
といった具合ですね。
ちなみにTwitterカードに埋め込んだ場合は<iframe>の動作となります。

で、こうやってゲームを埋め込んだとき、
ゲーム画面上でのマウスホイール動作が問題になってきます。

最近のティラノスクリプトなら下ホイールでテキスト進行ができるんですが、
埋め込み画面上でホイールするとWebページ全体がスクロールしちゃうのですね。
これはめちゃんこ不便なので、対策をしてみようという話です。

続きを読む

[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]

スクリーンショット保存ボタン

プレイヤーにスクリーンショットを保存させてみよう。
ブラウザゲームの場合、ボタンを押すと『ダウンロードダイアログが出る』もしくは『デフォルトのダウンロードフォルダに勝手にダウンロードされる』。
デスクトップアプリケーションの場合、実行ファイル(.exe)と同じフォルダにポコンと画像が生まれる。
・・・・はずですが、動くかな(・ω・`)
サンプルは続きで。

続きを読む

設定値は変数で管理すると便利

フェードの時間は変数で管理しておくと便利です。
あとから変えたくなった時に一か所変えるだけで済むからです。
また、開発中だけ0にする、とかいうのにも使えますし、
プレイヤーが調節できるような仕組みを作るのにも役立ちます。

(ひょっとするとConfig.tjsの設定とかで同じことができるかもしれないのですが、
よくわかっていません。)


	[iscript]
		window.DATA = {
			TIME: {
				BG: 400,
				CHARA: 200,
				MASK: 500,
				MW: 400
			}
		};
	[endscript]

	[bg         storage=XXX.jpg time=&DATA.TIME.BG   ]
	[chara_show name=XXX        time=&DATA.TIME.CHARA]
	[mask                       time=&DATA.TIME.MASK ]

プロフィール

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

全記事表示リンク

全記事表示リンク

検索フォーム

ブロとも申請フォーム

QRコード

QR