MasaoJSS使用方法まとめ

目次

• 使用方法
• コールバック関数の引数について
• 第５引数（ap）で使用できるメソッド一覧
  • ゲームシステム
  • スクロール制御
  • 画像読み込み・チップ生成
  • 基本表示設定
  • 主人公の位置・動き
  • 主人公の状態・動作・特技
  • 主人公の装備
  • 敵と攻撃
  • ボス
  • 各種キャラクターのパラメータ
  • ファイヤーボール・しっぽの当たり判定
  • 簡易表示
  • ゲージ
  • パーツ配置・取得
  • キー入力系
  • 床オブジェクト
  • 音利用
  • オフスクリーン関係
  • 使用不可能メソッド
• 第１引数（Offscreen_g）で使用できるメソッド一覧
• 非公式機能

使用方法

まさおコンストラクションに必要なJSファイルを読み込み、!ReadMe.txtに記載した方法で既存のアプレットを置換するか、新規にゲームを作成します。
その際、引数の最後にオプションオブジェクトを追加し、そのオブジェクトのuserJSCallbackメンバにuserJS関数を登録します。

<!-- 使用例１　原作のuserJSを使用する場合 -->
<script type="text/javascript" src="CanvasMasao.js"></script>
<script type="text/javascript">
new CanvasMasao.Game(
	{
		"map0-0" : "............................................................",
		（パラメータ群を記述）
	}, "hoge", { userJSCallback : userJS }
);

function userJS(Offscreen_g, mode, view_x, view_y, ap)
{
	（挙動を記述）
}
</script>

<!-- 使用例２　無名関数を使用する場合 -->
<script type="text/javascript" src="CanvasMasao.js"></script>
<script type="text/javascript">
new CanvasMasao.Game(
	{
		"map0-0" : "............................................................",
		（パラメータ群）
	}, "hoge",
	{
		userJSCallback : function (Offscreen_g, mode, view_x, view_y, ap)
		{
			（挙動）
		}
	}
);
</script>

<!-- 使用例３　クロージャを使用する場合 -->
<script type="text/javascript" src="CanvasMasao.js"></script>
<script type="text/javascript">
new CanvasMasao.Game(
	{
		"map0-0" : "............................................................",
		（パラメータ群）
	}, "hoge",
	{ 
		userJSCallback : (function ()
		{
			// 変数や関数の定義はこの中で行う
			var x, y;

			// コールバック関数を返す（渡す）
			return function (Offscreen_g, mode, view_x, view_y, ap)
			{
				（挙動）
			}
		})()
	}
);
</script>

挙動の記述についてですが、原作と大きく異なるのは、Applet1 = document.getElementById("hoge");と記述してもアプレットを取得できないことです。そこで、userJSCallbackメンバに登録した関数の第５引数に、アプレットにあたるオブジェクトを渡しています。原作のソースを引き継ぐ場合は注意してください。この第５引数から、各種メソッドを呼び出すことができます。

/* 使用例１　初回起動時に、アプレットオブジェクトをグローバルに格納して参照する（原作での主な使用法） */
（前略）
var init_f = false;
var Applet1 = null;
function userJS(Offscreen_g, mode, view_x, view_y, ap)
{
	if(!init_f) Applet1 = ap;
	……
}
function userGameJS(Offscreen_g, view_x, view_y)
{
	Applet1.addScore(100);
}

上の使用例１は、原作で主に使用されていた、アプレットをグローバルに格納して参照する方式で、非同期でもメソッドを使用できました。しかし、グローバルから参照するゆえに、外部からのスクリプト実行で変数値を変更したり、アプレットのメソッドを呼び出したりできます。これではスコアランキングに支障が出るため、かわりにクロージャを使用することをおすすめします。

/* 使用例２　クロージャを使用し、スコアランキングに支障が出にくくなるように設計する（推奨）*/
new CanvasMasao.Game(
	{
		"map0-0" : "............................................................",
		（パラメータ群）
	}, "hoge",
	{
		userJSCallback : (function ()
		{
			// 変数や関数の定義はこの中で行う
			var x, y;

			// コールバック関数を返す（渡す）
			return function (Offscreen_g, mode, view_x, view_y, ap)
			{
				ap.addScore(100);
				……
			}
		})(),
		highscoreCallback : function (score)
		{
			（ハイスコアイベント時の処理）
		}
	}
);

コールバック関数の引数について

userJSCallbackに登録した関数は、５個の引数を伴って呼び出されます。５つの引数の性質は以下の通りです。

名前（通称）	型	概要
Offscreen_g	オブジェクト（Graphics）	java.awt.Graphicsを模倣したオブジェクトです。このオブジェクトのメソッドを呼び出してオフスクリーンに描画処理を施します。
mode	数値	現在のゲームモードを表します。
view_x	数値	ゲーム全体の左上端を原点としたときの、画面左上端のX座標です。
view_y	数値	ゲーム全体の左上端を原点としたときの、画面左上端のY座標です。
ap	オブジェクト（MasaoJSS : Applet）	原作のアプレットを模倣したオブジェクトです。まさおの内部の動作を、このオブジェクトのメソッドを使って制御します。

第５引数（ap）で使用できるメソッド一覧

ここではJS版のMasaoJSSで使用できるメソッドをまとめます。
※引数の[ ]で囲まれた部分は省略できます。その場合は省略時の動作をします。

第１引数（Offscreen_g）で使用できるメソッド一覧

名前	引数	戻り値の型	説明
drawLine	x1, y1, x2, y2	真偽値	点(x1, y1)と点(x2, y2)を結ぶ線分を描画します。
drawImage	image, x, y	真偽値	指定座標に画像オブジェクトの画像を描画します。
drawImage	image, x, y, width, height	真偽値	指定矩形に収まるようにスケーリングして画像オブジェクトの画像を描画します。
drawImage	image, sx1, sy1, sx2, sy2, dx1, dy1, dx2, dy2	真偽値	画像オブジェクトの画像の、指定された矩形(sx1, sy1 )-(sx2, sy2)部分を抜き出した画像を、指定矩形(dx1, dy1)-(dx2, dy2)に収まるように描画します。 (X, Y, 幅, 高さの指定ではなく、2点指定による矩形であることに注意してください。)
drawRect	x, y, width, height	真偽値	塗りつぶさない矩形を現在の色で描画します。
fillRect	x, y, width, height	真偽値	塗りつぶした矩形を現在の色で描画します。
drawOval	x, y, width, height	真偽値	指定した矩形に収まる、塗りつぶさない楕円を現在の色で描画します。
fillOval	x, y, width, height	真偽値	指定した矩形に収まる、塗りつぶした楕円を現在の色で描画します。
drawArc	x, y, width, height, angle, theta	真偽値	指定した矩形(x, y, width, height)に収まる、塗りつぶさない円弧を現在の色で描画します。円弧の開始角度angleからtheta回転した角度までが描画対象です。単位はラジアンです。
fillArc	x, y, width, height, angle, theta	真偽値	指定した矩形(x, y, width, height)に収まる、塗りつぶした円弧を現在の色で描画します。円弧の開始角度angleからtheta回転した角度までが描画対象です。単位はラジアンです。
drawPolygon	xa, ya, num	真偽値	X座標（xa）とY座標（ya）の配列から、頂点(xa[0], ya[0])-(xa[1], ya[1])-…を結んで、塗りつぶさない多角形を現在の色で描画します。numは頂点の数です。
fillPolygon	xa, ya, num	真偽値	X座標（xa）とY座標（ya）の配列から、頂点(xa[0], ya[0])-(xa[1], ya[1])-…を結んで、塗りつぶす多角形を現在の色で描画します。numは頂点の数です。
drawString	string, x, y	真偽値	指定座標に文字列を描画します。
setFont	font	真偽値	描画文字列のフォントをフォントオブジェクトで設定します。フォントオブジェクトはap.newFont()メソッドで取得してください。

非公式機能

コールバック関数userJSCallbackの第１引数（g）に渡されるオブジェクトには、原作では使用できなかった別の機能があります。g._ctx（アンダーバーctx）と記述すると、オフスクリーンに使用されているグラフィックスコンテキストを取得できます。これはHTML5 Canvasの機能で、グラフィックを直接制御することができます。
※以下に示すサンプルコードはコールバック関数内の一部で、第１仮引数の名前はgとします。

// 使用例１　文字列を中央寄せにして描画する

var ctx = g._ctx;  // グラフィックスコンテキストを取得する
ctx.textAlign = "center";  // 中央寄せに設定する
g.drawString("あいうえお", 256, 100);  // 試しに描画
ctx.fillText("かきくけこさしすせそたちつてと", 256, 130);  // 試しに描画

// 使用例２　複雑な図形を描画する

var ctx = g._ctx;  // グラフィックスコンテキストを取得する
ctx.beginPath();
ctx.moveTo(100, 160);
ctx.lineTo(120, 160);
ctx.arc(160, 60, 20, Math.PI, 0, true);
ctx.lineTo(200, 160);
ctx.stroke();