﻿---------------------------------------------------------------

2Dキャンバスタグを追加するプラグイン　ver1.01

---------------------------------------------------------------

■プラグインのタイトル
	・2Dキャンバスタグを追加するプラグイン

■作成時のティラノスクリプトのバージョン
	・ver 521b

■概略説明
	・2Dキャンバスタグを画面に追加するプラグインです。

■使い方
	・data/other/pluginフォルダ内に、canvas_pluginフォルダを置きます。
	・適当なシナリオファイル（first.ksなど）に[plugin name="canvas_plugin"]という記述を追加します。
	・以上で「2Dキャンバスタグを追加するプラグイン」のタグが使えるようになります。

	・[canvas]タグでキャンバスタグを画面に設置します。
	・[canvas_drawimage]で画像を描画できます。
	・画像を描画する場合、あらかじめ[canvas_loadimage]タグで描画する画像を読み込んでおく必要があります。

■タグの使い方

	■[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]タグ		【全てのキャンバスを削除する】

	■[canvas_select_delimage]タグ	【読み込み済みのcanvasタグ用画像データを一部削除する】
	// canvasに描画する画像データを一部削除します。
	// 
	// ・storage	：●削除する画像ファイル名（fgimage内の画像である必要あり）　カンマ(,)で区切ることで同時に削除できます。

■基本的なスクリプト例
	[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を使用するなどして、直接キャンバスに描画できます。

■利用条件
	・個人・法人を問わず無料で使えますが、無保証です。
	・クレジットへの表記等は必要ありません。

■免責事項
	・本プラグインを使用して生じたいかなる損害・不利益に対しても、
	　本プラグインの開発者は、一切の責任を負いません。

■開発者名
	・かりこ

■開発者サイト
	・ジェリーゼリー
	　https://jellyjelly.site/

■更新履歴
	・2022/12/28(ver1.00)	プラグイン作成
	・2025/03/24(ver1.01)	一部タグ修正、canvas_select_delimageタグ追加
		・canvas_drawimageタグ：storageで指定しあ画像ファイルが読み込まれていない場合、動作が停止するバグを修正
		・canvas_loadimageタグ：すでに読み込まれている画像ファイルは読み込み処理をスキップするように変更
		・canvas_select_delimageタグを追加


