2022年12月28日(水)
ティラノスクリプト用の「2Dキャンバスタグを追加するプラグイン」を作りました
配布してますのでよかったらどうぞ!
→ 「CanvasPlugin_v100.zip」をGoogleドライブからダウンロードする
※(23/5/20追記)上記リンクでダウンロードできない場合はこちらからもダウンロードできます。 → CanvasPlugin_v100.zip(クリックでダウンロード開始)
2Dキャンバスタグを画面に追加するプラグインです。JavaScriptでcanvasをいじれる人には何かと便利…かもしれないです。
めちゃくちゃ見づらい記事ですみません。そのうち気が向いたら綺麗に整えるかもしれません。
目次
■使い方
・data/other/pluginフォルダ内に、canvas_pluginフォルダを置きます。
・適当なシナリオファイル(first.ksなど)に[plugin name="canvas_plugin"]という記述を追加します。
・以上で「2Dキャンバスタグを追加するプラグイン」のタグが使えるようになります。
・[canvas]タグでキャンバスタグを画面に設置します。
・[canvas_drawimage]で画像を描画できます。
・画像を描画する場合、あらかじめ[canvas_loadimage]タグで描画する画像を読み込んでおく必要があります。
・設置したcanvasは、ティラノスクリプト標準の[free]タグで撤去したり、[anim]タグで動かしたりできます。
■タグの使い方
■[canvas]タグ【キャンバスを設置する】
設置したキャンバスは普通にfreeで撤去したりanimで動かしたりできます。
・layer :【必須】キャンバスを設置するレイヤー(baseは不可)
・page :キャンバスを設置するページ(fore/back)
・visible :キャンバスを表示するか否か
・top :キャンバスを設置する位置(y)
・left :キャンバスを設置する位置(x)
・x :●キャンバスを設置する位置(x)=left
・y :●キャンバスを設置する位置(y)=top
・width :●キャンバスのサイズ(横)
・height :●キャンバスのサイズ(縦)
・name :★キャンバスの名前
・id :★キャンバスのID
・zindex :キャンバスの重ね順
・opacity :キャンバスの不透明度(0~1の実数)
●がついたパラメータは、必須ではないですが、設定することを推奨します。
★がついたパラメータは、どちらかを設定することを推奨します。
■[canvas_loadimage]タグ 【canvasタグ用の画像データを読み込む】
canvasに描画する画像データを読み込みます。
読み込むまでwaitします。
・storage :【必須】読み込む画像ファイル名(fgimage内の画像である必要あり)
カンマ(,)で区切ることで同時に読み込めます。
・slot :このタグを何度も使う場合は、slotにそれぞれ固有の名前をつけておくとよい…かも?
■[canvas_drawimage]タグ 【キャンバスに画像を描画する】
事前に[canvas_loadimage]タグで使用する画像データを読み込んでおく必要があります。
・name :★画像を描画するキャンバスの名前
(複数ある場合は該当する全てのキャンバスに描画します)
・id :★画像を描画するキャンバスのid
・storage :【必須】画像ファイル名
(canvas_laodimageで読み込み済みの「fgimageフォルダ内の画像」のみ対応)
・x :●画像を描画するキャンバス内の位置(x)
・y :●画像を描画するキャンバス内の位置(y)
・width :●描画する幅
・height :●描画する高さ
・cutx :描画する画像の切り出す位置(x)
・cuty :描画する画像の切り出す位置(y)
・cutwidth :描画する画像の切り出す幅
・cutheight :描画する画像の切り出す高さ
・coma :読み込む画像の切り出すコマ番号
描画する画像をcutwidthとcutheightで割って、
左上から右下にかけて順に番号を振った場合の番号です。
cutxとcutyの代わりに使用できます。
●がついたパラメータは、必須ではないですが、設定することを推奨します。
★がついたパラメータは、どちらかを設定することを推奨します。
■[canvas_clearrect]タグ 【キャンバスの描画をクリアする】
指定したキャンバスの描画をクリアします。
・name :★該当するnameのキャンバスの描画を全てクリアします。
・id :★該当するidのキャンバスの描画をクリアします。
★がついたパラメータは、どちらかを設定することを推奨します。
■[canvas_delimage]タグ 【読み込み済みのcanvasタグ用画像データを全て削除する】
■[canvas_alldel]タグ 【全てのキャンバスを削除する】
個別で削除する場合は、ティラノスクリプト標準のfreeタグが使えます。
■基本的なスクリプト例
[canvas_loadimage storage="image1.png,image2.png,image3.png"]
[canvas layer=0 name="testcanvas" x=10 y=10 width=100 height=100]
[canvas_drawimage name="testcanvas" storage="image1.png" x=0 y=0 width=100 height=100]
[canvas_drawimage name="testcanvas" storage="image2.png" x=0 y=0 width=100 height=100]
[canvas_drawimage name="testcanvas" storage="image3.png" x=0 y=0 width=100 height=100]
→ image1.png、image2.png、image3.pngが順に重なって表示される。
■切り出しを使用したスクリプト例
[canvas_loadimage storage="chip.png"]
[canvas layer=0 name="cuttest" x=10 y=10 width=100 height=100]
[canvas_drawimage name="cuttest" storage="chip.png" x=0 y=0 width=100 height=100 cutx=100 cuty=200 cutwidth=100 cutheight=100]
→ cutx,cuty,cutwidth,cutheightで切り出した画像を描画する。
[canvas_drawimage name="cuttest" storage="chip.png" x=0 y=0 width=100 height=100 coma=1 cutwidth=100 cutheight=100]
→ コマ番号1の部分を切り出した画像を描画する。
■iscriptを使用したスクリプト例
[canvas layer=0 x="10" y="150" id="ccc"]
[iscript]
let cvs = document.getElementById("ccc");
let ctx = cvs.getContext("2d");
ctx.fillStyle = "#0000FF";
ctx.fillRect(0,0,50,50);
[endscript]
→ キャンバスタグの使い方が分かる方は、canvas設置の時にidを設定することで、document.getElementByIdを使用するなどして、直接キャンバスに描画できます。
■作成時のティラノスクリプトのバージョン
・ver 521b
■利用条件、免責事項、更新履歴など
利用条件
・個人・法人を問わず無料で使えますが、無保証です。
・クレジットへの表記等は必要ありません。
免責事項
・本プラグインを使用して生じたいかなる損害・不利益に対しても、本プラグインの開発者は、一切の責任を負いません。
開発者名
・かりこ
更新履歴
・2022/12/28(ver1.00) プラグイン作成
※記事に誤字があったので訂正しました。(2023/5/11)
カテゴリ:製作者向け情報/ティラノスクリプト関係/ティラノスクリプトのプラグイン等リスト
|