2018/03/15
キャラクターを画像として保存する
キャラクターを画像として保存する方法について検討しました。こちらから。
スポンサーサイト
2018/03/15
ゲームをWebサイトに埋め込んだときのスクロールを抑制する
ティラノスクリプトのゲームを、Webサイトの一部として画面に組み込む場合、<iframe>タグか<object>タグを使って組み込むことになるでしょう。
書き方は、<object>タグなら
<object data="URL" type="text/html" width="横幅" height="高さ"> 埋め込みが無効の場合のみ表示される文章 </object>で、<iframe>タグなら
<iframe src="URL" width="横幅" height="高さ"> 埋め込みが無効の場合のみ表示される文章 </iframe>といった具合ですね。
ちなみにTwitterカードに埋め込んだ場合は<iframe>の動作となります。
で、こうやってゲームを埋め込んだとき、
ゲーム画面上でのマウスホイール動作が問題になってきます。
最近のティラノスクリプトなら下ホイールでテキスト進行ができるんですが、
埋め込み画面上でホイールするとWebページ全体がスクロールしちゃうのですね。
これはめちゃんこ不便なので、対策をしてみようという話です。
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]
2017/07/18
スクリーンショット保存ボタン
プレイヤーにスクリーンショットを保存させてみよう。
ブラウザゲームの場合、ボタンを押すと『ダウンロードダイアログが出る』もしくは『デフォルトのダウンロードフォルダに勝手にダウンロードされる』。
デスクトップアプリケーションの場合、実行ファイル（.exe）と同じフォルダにポコンと画像が生まれる。
････はずですが、動くかな(・ω・`)
サンプルは続きで。
2017/07/12
設定値は変数で管理すると便利
フェードの時間は変数で管理しておくと便利です。あとから変えたくなった時に一か所変えるだけで済むからです。
また、開発中だけ０にする、とかいうのにも使えますし、
プレイヤーが調節できるような仕組みを作るのにも役立ちます。
(ひょっとすると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 ]
