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)
カテゴリ：製作者向け情報/ティラノスクリプト関係/ティラノスクリプトのプラグイン等リスト
|