ジェリーゼリーブログ

2022年12月28日

ティラノスクリプト用の「2Dキャンバスタグを追加するプラグイン」を作りました

 配布してますのでよかったらどうぞ!

 → 「CanvasPlugin_v100.zip」をGoogleドライブからダウンロードする

 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 :●キャンバスのサイズ(横)
  ・heigth :●キャンバスのサイズ(縦)
  ・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) プラグイン作成


カテゴリ:製作者向け情報/ティラノスクリプト関係/ティラノスクリプトのプラグイン等リスト