-
Notifications
You must be signed in to change notification settings - Fork 32
/
about.html
202 lines (181 loc) · 12.4 KB
/
about.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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="TerraMap is an interactive Terraria v1.4.4 world map viewer that loads quickly and lets you pan, zoom, find blocks, ores, items in chests, dungeons, NPCs, etc.">
<meta name="author" content="Jason Coon">
<link rel="icon" href="favicon.ico">
<title>TerraMap | About</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Custom styles for this template -->
<link rel="stylesheet" href="resources/css/styles.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<nav id="main-navbar" class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-top" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html"><img alt="TerraMap" src="resources/images/TerraMap16.png" /></a>
<a class="navbar-brand" href="index.html">TerraMap</a>
</div>
<div class="collapse navbar-collapse" id="navbar-top">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Web</a></li>
<li><a href="windows.html">Windows</a></li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-md-12">
<h1><img alt="TerraMap" src="resources/images/TerraMap64.png" />TerraMap Web</h1>
<p class="lead">TerraMap Web is a cross-platform, interactive Terraria v1.4.4 world map viewer that loads quickly and lets you pan, zoom, find blocks, ores, items in chests, dungeons, NPCs, etc.</p>
<p>
<a class="btn btn-primary btn-lg" href="index.html" role="button">Try it now »</a>
<a class="btn btn-default btn-lg" href="https://github.com/TerraMap/terramap.github.io/commits/master" role="button"><span class="gh-ico2" aria-hidden="true"></span>View recent changes. »</a>
</p>
</div>
</div>
<div class="row" style="margin-bottom: 200px;">
<div class="col-md-12">
<h3 id="features">Features</h3>
<ul>
<li>Completely read-only, making it completely safe to use, with no risk of corrupting or overwriting your world files.</li>
<li>Cross-platform, supports <b>any modern browser</b> on <b>Windows</b>, <b>MacOS</b>, and <b>Linux</b>.</li>
<li>Completely client-side JavaScript, meaning your Terraria worlds are <b>not uploaded to any server</b>.</li>
<li>Open your Terraria world files by browsing to the .wld file.</li>
<li>Interactive, smooth pan and zoom using the mouse.</li>
<li>Find and highlight ores, items in chests, Enchanted Swords, Shark Statues, Strange Plants, etc.</li>
<li>Find and highlight biomes such as Corruption, Crimson, Hallow, Spider Nests, Floating Islands, etc.</li>
<li>View the world's spawn and dungeon locations.</li>
<li>View the location of NPCs such as Merchant, Mechanic, Arms Dealer, etc.</li>
<li>View world properties such as name, version, revision, width, height, moon phase, orbs broken, altars smashed, etc.</li>
</ul>
<h3 id="controls">Controls</h3>
<ul>
<li>Drag with left mouse button to pan.</li>
<li>Click with left mouse button to select a tile. Click the 'Selected Tile Info' panel to see the contents of chests, text on signs and gravestones, etc.</li>
<li>Use mouse wheel to zoom.</li>
</ul>
<h4 id="topToolbar">Top Toolbar</h3>
<ul>
<li>
<strong>Browse/Choose File</strong> - Open your Terraria world .wld file.
<ul>
<li><strong>Windows</strong>: %USERPROFILE%\Documents\My Games\Terraria\Worlds</li>
<li><strong>MacOS</strong>: ~/Library/Application Support/Terraria/Worlds</li>
<li><strong>Linux</strong>: ~/.local/share/Terraria/Worlds</li>
</ul>
</li>
<li><button title="Sets" class="btn btn-default navbar-btn">Sets <span class="caret"></span></button> <strong>Sets</strong> - A list of pre-configured sets of blocks (Corruption, Crimons, Hallow, etc). Click the dropdown menu, then click a set to highlight all tiles in the map that match.</li>
<li><button title="Choose Blocks" class="btn btn-default navbar-btn">Blocks...</button> <strong>Choose Blocks</strong> - Choose tiles, items, and walls to find or highlight.</li>
<li><button title="Find Previous" class="btn btn-default navbar-btn"><span class="glyphicon glyphicon-chevron-left"></span></button> <strong>Find Previous</strong> - Find tiles that match the options chosen in 'Choose Blocks', starting at the current selection, working backwards (bottom-to-top, right-to-left).</li>
<li><button title="Find Next" class="btn btn-default navbar-btn"><span class="glyphicon glyphicon-chevron-right"></span></button> <strong>Find Next</strong> - Find tiles that match the options chosen in 'Choose Blocks', starting at the current selection, working forwards (top-to-bottom, left-to-right).</li>
<li><button title="Highlight All" class="btn btn-default navbar-btn"><span class="glyphicon glyphicon-screenshot"></span></button> <strong>Highlight All</strong> - Highlights all of the tiles in the map that match the options chosen in 'Choose Blocks'.</li>
<li><button title="Clear Highlight" class="btn btn-default navbar-btn"><span class="glyphicon glyphicon-remove"></span></button> <strong>Clear Highlight</strong> - Clears any overlay (selection or highlight).</li>
<li><button title="Zoom To Fit" class="btn btn-default navbar-btn"><span class="glyphicon glyphicon-fullscreen"></span></button> <strong>Zoom To Fit</strong> - zooms all of the way out and centers the map.</li>
<li><button title="Save Map Image" class="btn btn-default navbar-btn"><span class="glyphicon glyphicon-save"></span></button> <strong>Save Map Image</strong> - saves the map and any overlay (selection or highlight) to a .png image file.</li>
<li><button title="Reload World" class="btn btn-default navbar-btn"><span class="glyphicon glyphicon-refresh"></span></button> <strong>Reload World</strong> - reloads the current world file, picking up any changes since it was first loaded.</li>
</ul>
<h4 id="bottomToolbar">Bottom Toolbar</h3>
<ul>
<li><button title="NPCs" class="btn btn-default navbar-btn">NPCs <span class="caret"></span></button> A list of NPCs present in the world. Click the dropdown menu, then click an NPC to highlight them in the map.</li>
<li><button title="World Properties" class="btn btn-default navbar-btn">World Properties <span class="caret"></span></button> A list of world properties (version, revision, size, defeated bosses, etc.</li>
<li><button title="Selected Tile Info" class="btn btn-default navbar-btn">Selected Tile Info <span class="caret"></span></button> Information about the currently selected tile. Click a tile on the map. If the tile is a chest, sign, gravestone, etc, click the dropdown menu to view its contents and/or text.</li>
<li><button title="Hover Tile Info" class="btn btn-default navbar-btn">Hover Tile Info</span></button> Information about the tile the cursor is currently over.</li>
</ul>
<h3 id="background">Background Information</h3>
<p>
TerraMap uses only a single pixel and color for each block, tile, wall, item, etc. It does not use the game's textures. For that, I highly recommend the excellent <a href="http://seancode.com/terrafirma">Terrafirma</a>.
</p>
<p>
It's built using <a href="http://www.w3schools.com/js">JavaScript</a>, <a href="http://www.w3schools.com/jquery">JQuery</a>, and <a href="http://getbootstrap.com">Bootstrap</a>.
It uses <a href="http://www.w3schools.com/html/html5_webworkers.asp">Web Workers</a> to do processor-intensive work in the background to improve responsiveness and performance.
</p>
<p>
I experimented with <a href="http://jsperf.com/setting-canvas-pixel">several different approaches to drawing</a>, and finally ended up using HTML canvas 2d context fillRect method, which is the fastest method on Chrome, my current browser of choice.
</p>
<p>
This was an education exercise for me. The only real improvements I made over Terrafirma are the combined block/tile/item search, allowing you to search for items in chests, the incremental search forward/backward, and UI improvements.
</p>
<p>
I referenced the <a href="http://seancode.com/terrafirma/world.html">Terraria .wld format documentation</a> provided by Terrafirma to read the world data.
Sean definitely did a great job at reverse-engineering and documenting the format.
Portions of TerraMap code were adapted from the <a href="https://github.com/mrkite/TerraFirma">source code for TerraFirma</a> and <a href="https://github.com/TEdit/Terraria-Map-Editor">TEdit</a>.
I also used <a href="http://ilspy.net">ILSpy</a> to peek at some of the Terraria game code.
</p>
<p>
I used the excellent <a href="https://github.com/timmywil/jquery.panzoom">jquery.panzoom</a> for pan and zoom functionality.
</p>
</div>
</div>
</div>
<nav class="navbar navbar-inverse navbar-fixed-bottom">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-bottom" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navbar-bottom">
<p class="navbar-text navbar-left">
TerraMap © <a href="https://github.com/jasoncoon">Jason Coon</a> 2015
</p>
<p class="navbar-text navbar-left">
Support TerraMap development:
</p>
<p class="navbar-text navbar-left">
<span class="github-btn">
<a href="https://github.com/terramap/terramap.github.io" class="gh-btn">
<span class="gh-ico" aria-hidden="true"></span>
<span class="gh-text">View Source Code on GitHub</span>
</a>
</span>
</p>
<p class="navbar-text navbar-left">
<a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=3FXFSZXHYJ9Y4">
<img src="https://www.paypalobjects.com/en_US/i/btn/btn_donate_SM.gif" alt="Donate via PayPal" title="Donate via PayPal" style="border:none">
</a>
</p>
</div>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- TerraMap Responsive -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-4263195580051724"
data-ad-slot="9553900295"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-65896817-1', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>