(具体的には...
www内の各ディレクトリをコピーしたディレクトリにhtmlファイルを置き、header.jsをインクルードし、用意したdiv要素に対してInitGameManager(StageName)を実行)
//\83X\83e\81[\83W\8f\89\8aú\89»\8f\88\97\9d
this.tickCount = 0;
//\8fÕ\93Ë\83}\83b\83v\8f\89\8aú\89»
- this.collisionMapCanvas = createCanvas("collisionMapCanvas", this.mainCanvas.width, this.mainCanvas.height, this.mainCanvas.width, 0, 1, "MainArea");
+ this.collisionMapCanvas = createCanvas("collisionMapCanvas", this.mainCanvas.width, this.mainCanvas.height, this.mainCanvas.width, 0, 1, this.manager.mainArea);
this.collisionMapContext = this.collisionMapCanvas.getContext('2d');
this.collisionMapContext.fillStyle = "rgba(0,0,0, 0.2)";
this.collisionMapContext.strokeStyle = "rgba(0,0,0, 0.2)";
}.extend(WidgetClass, {
attach: function(){
- this.wCanvas = createCanvas("UserStateWidgetCanvas", 240, 80, 395, 5, 8, "MainArea");
+ this.wCanvas = createCanvas("UserStateWidgetCanvas", 240, 80, 395, 5, 8, this.manager.mainArea);
this.gContext = this.wCanvas.getContext('2d');
this.gContext.globalAlpha = 0.25;
this.gContext.fillStyle = "rgba(255,240,200,0.5)";
var URL_PCD_Audio = URL_PCD_Root + "audio/";
var URL_PCD_Stage = URL_PCD_Root + "stage/";
+// ゲームを呼び出す関数 適切なdiv要素で呼び出すとゲームを初期化できる。
+// つまり、自作ゲームをしたい場合
+// audio, corelib, images, stageの各フォルダをコピーしたdirにhtmlを置き、<div>.InitGameManager() と実行するスクリプトを書く
+// stageName == nullだとステージを開始しない。指定する時は.jsおよびパスを省く
+
+HTMLDivElement.prototype.InitGameManager = function(stageName)
+{
+ if(this instanceof HTMLDivElement)
+ {
+ var man = new GameManager(this, null);
+ if(stageName) man.loadStageFromNetwork.apply(man, [stageName]);
+ return man;
+ }else
+ {
+ throw new TypeError("InitGameManager はdiv要素にしか実行できません");
+ }
+};
+
//
//ゲームマネージャー
//
-function GameManager(){
+function GameManager(parent, debugTextName){
+
+ //引数チェック
+ if(debugTextName == undefined) debugTextName = "DebugText";
+ if(parent == undefined) parent = document.getElementById("MainArea");
+
this.userID = 0;
//サブマネージャーの設定
this.networkManager = new NetworkManager(this);
this.UIManager = new UIManager(this);
this.userManager = new UserManager(this);
+ this.mainArea = parent;
//必要最低限のCanvasとコンテキストの設定
- this.mainCanvas = createCanvas("MainCanvas", 640, 480, 0, 0, 1, "MainArea");
+ this.mainCanvas = createCanvas("MainCanvas", 640, 480, 0, 0, 1, parent);
this.mainCanvas.style.border = "solid 1px";
this.mainContext = this.mainCanvas.getContext('2d');
- this.debugText = document.getElementById('DebugText');
+ this.debugText = document.getElementById(debugTextName); //要素が存在しないとnullになり、デバッグが無効になる
+ if(!this.debugText) this.debugText = null;
+
+
//ブラウザチェック
this.isIE = false;
if(!this.isAvailableBrowser()){
}
},
debugOut: function(str){
- if(this.isIE)
+ if(this.debugText != null)
{
- //CRLF
- this.debugText.value = str.replace(/\n/g,"\r\n") + this.debugText.value;
- } else{
- //LF
- this.debugText.innerHTML = str + this.debugText.value;
+ if(this.isIE)
+ {
+ //CRLF
+ this.debugText.value = str.replace(/\n/g,"\r\n") + this.debugText.value;
+ } else{
+ //LF
+ this.debugText.innerHTML = str + this.debugText.value;
+ }
}
},
isAvailableBrowser: function(){
//(x,y,z)に生成する。
//parentには、Canvasタグを包含することになるDOMオブジェクトのidを指定する。
canvas = document.createElement("canvas");
- parent = document.getElementById(parent);
canvas.id = id;
-
+
parent.appendChild(canvas);
canvas.style.position = "absolute";
height: 100%;
padding-bottom: 36px;
margin-bottom: -36px;
+ overflow: hidden;
}
</style>
initDrop();
resize();
+ var oldData = localStorage.getItem("savedat");
+ if(oldData)
+ {
+ $('#textarea textarea').val(oldData);
+ }
+
$('#textarea textarea').change(function(){
isModified = true;
});
window.open("../index_local_debug.html");
}
+function editInTextEditor()
+{
+ if(!_guiMode) return;
+ $('#guiWindow').fadeOut();
+ $('#textWindow').fadeIn();
+ _guiMode = false;
+}
+
+function editInGui()
+{
+ if(_guiMode) return;
+ textToGui();
+ $('#guiWindow').fadeIn();
+ $('#textWindow').fadeOut();
+ _guiMode = true;
+}
+
+var _guiStageInfo = null;
+var _guiMode = false;
+function textToGui()
+{
+ //eval($("#textarea textarea").val());
+ //_guiStageInfo = stgInfo;
+ //$('#editorMessageBox').text("Stage Size : (" + stgInfo.width + ", " + stgInfo.height + ") ");
+}
+
$(window).bind("resize", resize);
<a onclick="saveFile()">名前を付けて保存</a>
<a onclick="openFromBrowser()">ブラウザから開く</a>
<a onclick="saveToBrowser();">ブラウザに保存</a>
- <a><s>GUI編集</s></a>
- <a>テキスト編集</a>
+ <a onclick="editInGui();"><s>GUI編集</s></a>
+ <a onclick="editInTextEditor()">テキスト編集</a>
<a onclick="run()">実行</a>
<a target="_blank" href="readme.txt">ヘルプ</a>
</div>
<div id="guiWindow" class="window">
-
+ <div style="float: left; width: 30%; background-color: #eee; padding: 30px; margin-bottom: -32737px; margin-right: 30px; padding-bottom: 32767px;">
+ <strong>テンプレート</strong><br>
+ <div id="templeteBox" style="height: 300px; overflow: scroll; background-color: white; border: 1px black solid; margin: 10px;"></div>
+ <strong>ステージ</strong><br>
+ <div id="stageBox" style="height: 300px; overflow: scroll; background-color: white; border: 1px black solid; margin: 10px;"></div>
+ </div>
+ <div style="padding: 30px;">
+ <strong>エディット</strong>
+ <div id="editorBox" style="height: 500px; overflow: scroll; background-color: white; border: 1px black solid; margin: 10px;"></div>
+ <div id="editorMessageBox"></div>
+ </div>
</div>
<div id="textWindow" class="window" style="display: block;">
<div id="wrapper" style="height: 100%;">
<h1>開く項目の選択</h1>
操作する項目: <br>
<select id="select"></select><br>
- <input type="button" onclick="removeSelectedItem()" value="選択項目の削除"><input onclick="openSelectedItem()" type="button" value="開く">
+ <input type="button" onclick="removeSelectedItem()" value="選択項目の削除"><input onclick="openSelectedItem()" type="button" value="開く"><br>
+ ※savedat という名前の項目は次回起動時に自動的に開かれます
</div>
</body>
</html>
\ No newline at end of file
PCDSLを快適に編集できるエディタです
※UTF-8専用
+※ブラウザに保存する時「savedat」という名前で保存すると次回起動時に自動で読み込まれます
+※(「savedat」の削除は「ブラウザから開く」で行えます)
+
コマンド一覧
・開く
<script type="text/javascript">
var mainManager = null;
+var dbg = null;
onload = function()
{
var val = localStorage.getItem("savedat");
}
//ゲームマネージャー初期化
- mainManager = new GameManager();
+ //mainManager = new GameManager();
+ mainManager = document.getElementById('MainArea').InitGameManager();
+ dbg = mainManager.debugText;
var prev;
if(prev = localStorage.getItem("previewStage"))
localStorage.removeItem("previewStage");
document.getElementById('stageCode').value = (prev);
run();
+ }else
+ {
+ location.href="editor/index.html";
}
};
mainManager.stopStage();
}
-function save()
+function switchDebug()
{
- localStorage.setItem('savedat', document.getElementById('stageCode').value);
+ if(mainManager.debugText == null)
+ {
+ mainManager.debugText = dbg;
+ }else
+ {
+ mainManager.debugText = null;
+ }
}
</script>
<div id="MainArea" style="position: inline"></div>
<div id="Resources"></div>
<div style="z-index: 1; top: 520px; position: absolute; left: 0;">
- <form><textarea id="DebugText" rows="8" cols="64"></textarea></form></div>
- <div style="position: absolute; left: 650px; top: 0; right: 0; z-index: 100">
- <form>
- <textarea id="stageCode" rows="60" style="width: 100%; height: 90%; z-index: 100">
-
-
-// StageObjectsはステージに文字シンボルとして配置したいオブジェクト定義の連想配列である。
-// StageObjectの各項目の指定方法は以下の二通りある。
-// ・クラス名指定 ... コンストラクタがに引数が不要な時
-// a : BlockClass
-// ・拡張指定
-// a : {base : FreeItemClass, //鋳型となるクラス名
-// args : '1190.png', //コンストラクタに指定する引数(一つだけの場合) stageは自動で指定されるので不要
-// args : ['1190.png', callback], //二つ以上の場合。やはり第一引数のstageは不要
-// prop : {times : 1}, //各インスタンスに指定したいプロパティの連想配列。(省略可)
- //この例ではaFreeItemClass.timesプロパティを1に指定している
-// adjust : [-50, 50], //位置の微調整。必ずX座標、Y座標の相対位置を示す配列にする。(省略可)
-// extid : 19 //ネットワークを超えて一つのオブジェクトである必要がある場合にはゼロではない値を取る（ステージ内で固有の値, 省略可; 既定0）
-// sync : true //ネットワーク同期を有効に(addStageObjectの第二引数)(省略可; 既定false)
-
-var stgObjects = {
-
- // BlockClass : 普通のブロック。 引数に画像名を指定
- a : {base:BlockClass,args:'1190.png'},
-
- // SlopeBlockClass : 当たり判定が斜めのブロック。
- // 引数 : 画像名, 当たり判定領域左側の開始位置のブロック上辺からの高さ, 当たり判定領域右側の...
- // たとえば、この例のように 0, 32 と指定すれば右下がりの坂になり、32, 0と指定すれば左下がり、 16, 16と指定すれば半分の高さの長方形になる
- // enableBlockMode : 当たり判定領域をデバッグ表示する。
- b : {base:SlopeBlockClass,args:['1191.png',0,32],prop:{enableDebugMode:true}},
-
- // FreeItemClass : キャラが取得するとコールバックが実行されるアイテム
- // callback : 誰かに取得されたときに発生するコールバック。アタックした人、そのアタック直後のx, y座標が引数にセットされる。
- // times : 取得できる回数で、-1で無限。
- c : {base:FreeItemClass,args:["1234.png",callBack],prop:{times:1}},
-
- // 何もブロックを置かない位置のためにかならずこのようなエントリーを記述
- _ : null
-};
-
-// FreeItemClassのコールバック
-function callBack(obj, obj_x, obj_y)
-{
- if(obj instanceof MainCharacterClass){
-
- }
-}
-
-var stgInfo = {
- width: 6400, //横サイズ
- height: 480, //縦サイズ
- background: "back2.png" //背景画像。横幅は640pxである必要はない。
-};
-
-with(stgObjects) {
- var tbl = [
- [],
- [],
- [],
- [],
- [],
- [],
- [],
- [],
- [],
- [],
- [b],
- [_,b],
- [_,_,b],
- [_,_,_,b,_,_,_,_,_,c],
- [a,a,a,a,a,a,a,a,a,a,a,a,a,a,a,a,a,a,a,a,a,a,a,a,a,a,a,a,a,a,a,a,a,a,a,a,a,a,a,a,a,a,a,a,a,a],
- ];
-}
-
-//約束事
-var stage = new PCDSLStageClass(stgInfo, tbl);
-
-stage.runStage = function(){
- PCDSLStageClass.prototype.runStage.apply(this, []);
- var main = new MainCharacterClass(stage, [["kuma1.png","kuma2.png","kuma3.png", "kuma4.png", "kuma3.png", "kuma2.png"], ["kumaready.png"]]);
- main.size.x = 64;
- main.size.y=64;
- main.origin.x = 50;
- main.origin.y =0;
- main.ownerUID = stage.manager.userID;
- stage.userControlledCharacter = main;
- stage.addStageObject(main, true);
-},
-
-
-stage;
-
- </textarea>
- <input type="button" onclick="run(); return false;" value="run"><input type="button" onclick="stop(); return false;" value="stop"><input type="button" onclick="save(); return false;" value="save"><br>
- ※すべてのコードを消したうえでセーブし更新すると最初のコードに戻ります。
- </form>
+ <form><textarea id="DebugText" rows="8" cols="64"></textarea></form>
+ <input type="button" onclick="run(); return false;" value="ステージの実行/再実行"><input type="button" onclick="stop(); return false;" value="ステージの停止"><input type="button" onclick="switchDebug(); return false;" value="デバッグの有効/無効">
</div>
+ <div style="display: none;"><form><textarea id="stageCode"></textarea></form></div>
</body>
</html>
\ No newline at end of file
OSDN Git Service
