enchant.js用マップエディタを拡張してみる |
enchant.jsで作成するWebアプリのフロントエンド部分では、
マップエディタで作ったデータはMapクラスでロードせず
画像ファイルとして使いたいと考えています。
○イメージ出力というボタンを追加しました。
○output_image.jsボタンを押すとimgタグに全体マップを出力します。
ブラウザの画像ファイルダウンロード機能で画像をダウンロードできます。
拡張した箇所は以下のとおりです。
【output_image.js】☆新規作成
var imageButton = (function() {
var element = document.createElement('input');
element.type = 'button';
element.id = 'imageButton';
element.value = 'イメージ出力';
element.onclick = function() {
//imageCanvasを取得
var imageCanvas = document.getElementById('imageCanvas');
imageCanvas.width = app.mapWidth*16;
imageCanvas.height = app.mapHeight*16;
var imageContext = imageCanvas.getContext('2d');
//マップデータを書き出し
var _data = app.maps.bgMap._data;
for (var index = 0, l = _data.length; index < l; index++) {
for (var y = 0, ll = _data[0].length; y < ll; y++) {
for (var x = 0, lll = _data[0][0].length; x < lll; x++) {
var n = _data[index][y][x];
if (n >= 0) {
var row = app.maps.bgMap._image.width /16 | 0;
var sx = (n % row)*16;
var sy = (n / row | 0)*16;
imageContext.drawImage(app.maps.bgMap._image._element, sx, sy, 16, 16,
x * 16, y * 16, 16, 16);
}
}
}
}
//imgタグに出力
var targetImage = document.getElementById('targetImage');
targetImage.src = imageCanvas.toDataURL("image/png");
};
return element;
})();
※セキュリティエラーになるため、以下の修正を入れています。
・「document.」のピリオドが全角
・「element.onclick =」のイコールが全角
【mapeditor.html】コード追加
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>enchant MapEditor</title>
<script type="text/javascript" src="enchant.js"></script>
<script type="text/javascript" src="plugins/extendMap.enchant.js"></script>
<script type="text/javascript" src="drawing.js"></script>
<script type="text/javascript" src="main.js"></script>
<script type="text/javascript" src="mapeditor.js"></script>
<script type="text/javascript" src="output_image.js"></script>
</head>
<body>
<div id="enchant-stage" style="width: 640px; height: 480px; float:left"></div>
<div id="edit" style="width: 360px; margin-left: 640px"></div>
<canvas id="imageCanvas" style="display:none;"></canvas>
<image id="targetImage" style="display:block;" />
</body>
</html>
【main.js】コード追加(82行目)
start(wv, hv, iv, ev);
edit.innerHTML+= '矢印キーでスクロール (Push Arrow Key to Scroll)';
editorTabs.initialize();
edit.appendChild(editorTabs.element);
edit.appendChild(icons.create());
var d = document.createElement('div');
d.appendChild(palette);
edit.appendChild(d);
var d2 = document.createElement('div');
d2.appendChild(geneButton);
d2.appendChild(loadButton);
d2.appendChild(imageButton);//Add!
edit.appendChild(d2);
palette.loadImage(app.image);
Canvasやマップエディタが作成するデータの構成を調べていたら
時間が思いの外かかってしまいました・・・orz
にほんブログ村