最低限必要な基本構造
var stgInfo = {
//ステージ全体の設定を記述
width: 6400,
height: 480,
background: "back2.png",
BGM: "S02.mp3",
};
var stgObjects = {
//配置マップの文字とオブジェクトの対応を記述・設定
b : {base:BlockClass,args:'1150.png'},
f : {base:BlockClass,args:'1190.png'},
_ : null,
};
with(stgObjects) {
var tbl = [
//ここに配置マップを記述
[b,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,b],
[b,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,b],
[b,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,b],
[b,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,b],
[b,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,b],
[b,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,b],
[b,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,b],
[b,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,b],
[b,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,b],
[b,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,b],
[b,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,b],
[b,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,b],
[b,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,b],
[b,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,_,b],
[b,b,b,b,b,b,b,b,b,b,b,b,b,b,b,b,b,b,b,b,b,b,b,b,b,b,b,b,b,b,b,b],
];
}
var stage = new PCDSLStageClass(stgInfo, tbl);
stage.runStage = function(){
PCDSLStageClass.prototype.runStage.apply(this, []);
var main = new MainCharacterClass(stage, [["nakedman.png","nakedman2.png",]]);
main.size.x = 32;
main.size.y = 64;
main.origin.x = 100;
main.ownerUID = stage.manager.userID;
main.movingVelocity = 200;
stage.userControlledCharacter = main;
stage.addStageObject(main, true);
}
stage;
stgInfo
width,height
ステージの大きさを決定する。
widthは省略可能(というより内部で参照されてない)
background
背景画像の名前を拡張子付きで記述する。省略可能。
横幅は640pxより大きくてもよい。
BGM
BGMの名前を拡張子付きで設定する。設定しない場合は音楽を変更しない(前のステージで音楽がなっていた場合はそのままになる)。省略可能。
stgObjects
base
ベースクラスを指定します。
ベースクラスによって設定項目は変化します。
以下はベースクラスごとの設定項目の説明です。
BlockClass
正方形の当たり判定領域をもつ単純なブロックです。
b : {base:BlockClass,args:'1150.png'},
args:'imgname.png'
画像の名前を指定します。
SlopeBlockClass
指定可能な台形の当たり判定をもつブロックです。
c : {base:SlopeBlockClass,args:['1152.png',33,0],prop:{enableDebugMode:true}},
args:['imgname.png', l, r]
l, rには、左右それぞれの当たり判定開始位置を、ブロック上端からのピクセル数で指定します。
0, 33 と指定すれば右下がりの坂になり、33, 0と指定すれば左下がりになります。
下端は33と指定した方が上り坂で引っかからなくなります。(バグ?)
prop:{enableDebugMode:true}
当たり判定領域をデバッグ表示するかどうか指定します。省略可能で、デフォルトはfalseです。
FreeItemClass
キャラクターが接するとコールバック関数が実行されるブロックです。
k : {base:FreeItemClass,args:["1234.png",callBack],prop:{times:1}},
args:["1234.png",callBack]
callBackにはコールバック関数の名前を指定します。
コールバック関数は以下のような形式です。
function callBack(obj, x, y)
{
//obj:衝突したキャラクターのインスタンス
//x, y:衝突直後のキャラクターの位置
if(obj instanceof MainCharacterClass){
//ここに処理を書く
}
}
prop:{times:1}
timesは取得できる回数を設定します。-1で無限に取得できます。
HiddenBlockClass
//下から当たったときのみ出現
f : {base:HiddenBlockClass,args:'1168.png', prop:{collidingMask:CollideBottom, collidingExcludeMask:(CollideRight | CollideTop | CollideLeft | CollideBody)}},
//左から当たったときのみ出現
h : {base:HiddenBlockClass,args:'1168.png', prop:{collidingMask:CollideLeft, collidingExcludeMask:(CollideRight | CollideTop | CollideBody)}},
ある方向から衝突したときにはじめて姿を現すブロックです。
collidingMask
衝突を検知したい方向を指定します。複数指定はor演算子'|'を用いて行います。
collidingExcludeMask
衝突していた場合は検知を無効にする方向を指定します。複数指定はor演算子'|'を用いて行います。この項目に、地面や他のブロックと常に接する面を追加してはいけません。
例hのように、地面に置いた状態で、左から衝突された場合のみ出現させたい場合は、「左に衝突している」かつ「右・上・本体に衝突していない」場合となります。地面は常に接しているので、どの項目にも書きません。
配置マップ
stgObjectsの配置を指定するマップです。空白部分にはアンダーバーを指定します。
大文字小文字が区別され、また文字列も利用可能なため、小文字で足りなくなったら大文字を使い、その後は
複数文字を利用するとよいでしょう。
注意: 英文字一文字および_以外の文字を使うとGUI編集できません。これはindex.htmlの229行目を書き換えることで解決できます。
注意: with(stgObjects){ var tbl = [ ... ]; } の部分はGUI編集モードで勝手に書き換えられてしまうので、この中にコメントを書いておくと残念なことになります。(単純に消されてしまいます)
var stage = new PCDSLStageClass(stgInfo, tbl);
この一行によってステージはロードされます。
stage.runStage = function(){
オブジェクトのさらに詳細な配置などを行います。
このセクションは以下のような形式です。
stage.runStage = function(){
PCDSLStageClass.prototype.runStage.apply(this, []);
var main = new MainCharacterClass(stage, [["nakedman.png","nakedman2.png",]]);
main.size.x = 32;
main.size.y = 64;
main.origin.x = 100;
main.movingVelocity = 200;
main.ownerUID = stage.manager.userID;
stage.userControlledCharacter = main;
stage.addStageObject(main, true);
}
PCDSLStageClass.prototype.runStage.apply(this, []);
ステージの実行に先立つ準備を行います。必要なので書いておいてください。
メインキャラクター配置
メインキャラクターはまず以下のような一行で生成します。キャラクターの名前は必要に応じて変更してください。
var main = new MainCharacterClass(stage, [["nakedman.png","nakedman2.png",]]);
["nakedman.png","nakedman2.png",]の部分には、移動中に切り替わる画像を列挙します。先頭の画像は、静止状態の画像を指定するのがよいでしょう。
stage.addStageObject(main, true);
この一行でステージに追加されます。第二引数はネットワーク同期を有効にする、という意味です。省略するとこれは無効になります。メインキャラクターはこれが有効でなければなりません。
また、これに先立って、メインキャラクターのみ追加の設定があります。
main.ownerUID = stage.manager.userID;
ユーザーIDを指定します。これはネットワーク同期をする場合は必須です。しない場合は必要ありません。
stage.userControlledCharacter = main;
この一行で、ユーザーのキー操作がキャラクターに伝達されるようになります。メインキャラクターのみの設定です。
キャラクター設定
キャラクターの詳細を設定します。すべて省略可能なプロパティです。
- size.x(32), size.y(32)
大きさを設定します。画像はこの大きさに引き延ばして表示されます。
- origin.x(0), origin.y(0)
初期位置を設定します。
- movingVelocity(200)
移動速度を設定します。
- jumpPower(45)
ジャンプ力を設定します。
- jumpSound
ジャンプ時のサウンドをAudioオブジェクトで指定します。
main.jumpSound = createAudio("jump12.mp3");
collisionMarginTop
collisionMarginLeft
collisionMarginRight
collisionMarginBottom
衝突判定の余白を設定します。単位はピクセルです。数値が大きくなるほど当たり判定は小さくなります。