forked from wise9/enchantMapEditor
/
mapeditor.html
48 lines (47 loc) · 3.23 KB
/
mapeditor.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>enchant MapEditor</title>
<link href='http://fonts.googleapis.com/css?family=Titillium+Web:400,700,400italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="tutorial.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<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>
</head>
<body>
<div id="enchant-stage" style="width: 640px; height: 480px; float:left"></div>
<div id="edit" style="width: 360px; margin-left: 640px"></div>
<div id="tutorial" style="width: 120px; height: 100px; float: right; margin-right:20px; text-align:center;"><p><a href="#" onclick="$('#fademe').fadeIn(); $('#main').fadeIn()">Show me how to use this</a></p></div>
<div id="fademe" class="fademe" style=""></div>
<div class="main" id="main" style="float:left; display:none;">
<div id="close"><a href="#" onclick="$('#fademe').fadeOut(); $('#main').fadeOut(); return false;">X</a></div>
<h1>What This Is and How to Use It</h1>
<p class="centerLink"><a href="tutorial.html" target="_blank" onclick="$('#fademe').fadeOut(); $('#main').fadeOut();">Open in new window</a></p>
<h2>The enchant.js Map Editor</h2>
<p>This is a tool written in JavaScript for quickly creating maps for use with enchant.js. More specifically, since maps in enchant.js images placed in an array from a tileset, this tool is used to generate those arrays. This saves you from having to manually type out the array.</p>
<h2>How do I use it?</h2>
<p>To create a map using the Map Editor, do the following:</p>
<ul>
<li>Creating a Blank Map
<ol>
<li>Enter in the width of your desired map in pixels.</li>
<li>Enter in the height of your desired map in pixels.</li>
<li>Choose your desired tileset. (Currently 'RPG' is the most complete.)</li>
<li>Hit 'Create Blank Map'.</li>
</ol></li>
<li>Editing the Map
<ol>
<li>Choose a basic background tile for your map by clicking a tile (i.e. the green grass tile), clicking 'fill,' and then clicking on the map.</li>
<li>Click on 'pen,' click on a tile, and then click on the map to place the tile.
<li>To add features that show the background behind them (like trees), click on 'layer2,' and then add your tiles.</li>
<li>To make certain tiles on the map impassable by characters, click on 'impassability' and use the Pen to designate a tile location on the map as impassable. The impassable designation can be erased with the "-1" tile.</li>
<li>Regular tiles can be erased with the "-1" tile when on layer1, layer2, etc.</li></ol>
<p></p>
</ul>
</div>
</body>
</html>