/
animalcrossing.html
84 lines (72 loc) · 4.86 KB
/
animalcrossing.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
<!DOCTYPE html>
<html>
<head>
<title>Animal Crossing Web Map - Ross Thorn</title>
<link rel='icon' href='images/Icon.ico'>
<meta charset=utf-8>
<link rel='stylesheet' href='css/bootstrap.min.css' />
<link rel='stylesheet' href='css/bootstrap-theme.min.css' />
<link rel='stylesheet' href='css/style.css' />
<link href='font-awesome/css/font-awesome.min.css' rel='stylesheet' type='text/css'>
<link rel='stylesheet' type='text/css' href='//fonts.googleapis.com/css?family=Open+Sans' />
</head>
<body>
<div id='header'>
<div id='title'>
<a href='index.html' id='home'>
<h1>ROSS<span id='title-thorn'>THORN</span></h1>
</a>
</div>
<a href='about.html'id='about'>
<h3>ABOUT</h3>
</a>
</div>
<div class='bar'></div>
<div class='container-fluid' align=center>
<div class='col-xs-12 project-page'>
<h2>ANIMAL <span style='color:#e67553;'>CROSSING</span> WEB <span style='color:#e67553;'>MAP</span></h2>
</div>
<div class='col-xs-11 description'style='padding-bottom:25px; float:none;'>
<h4>In March 2020, Nintendo released the latest installment in the Animal Crossing video game series, <a target="_blank" href="https://www.animal-crossing.com/new-horizons/">Animal Crossing: New Horizons</a>!
I was a big fan of this series when I was playing it on my Nintendo DS 15 years ago and was very excited to get the game! I had been working on publishing <a href="interactivefantasymaps.html">some interactive fantasy maps</a>
and told myself that I couldn't get this game until they were done.
<br><br>
Once I released the maps and rewarded myself with the game, I thought it would be cool to create an interactive map for my island in the game! I had been playing around with some 3D extrusions in <a target="_blank" href="https://www.mapbox.com">Mapbox</a>
which would be perfect for representing the tiered topography in Animal Crossing!</h4>
</div>
</div>
<div class='container-fluid' align=center>
<img style='box-shadow:0px 0px 2px gray; width:50%;' src='images\krunkel_base.jpg' >
</div>
<div class='container-fluid' align=center>
<div class='col-xs-11 description'style='padding:25px 0px 25px 0px; float:none;'>
<h4>First, I grabbed a screenshot from the game and brought it into <a target="_blank" href="https://www.qgis.org">QGIS</a> to give it some coordinates. That way, when I digitize the boundaries,
Mapbox can actually place them somewhere on the Earth's surface so it can render it. Once I had all the features digitized, I could upload it as a <a target="_blank" href="https://docs.mapbox.com/vector-tiles/reference/">vector tileset</a>
to create a web map! I traced the landmass, waterbodies, infrastructure, and other geographical features and it was ready to go. One of the things I had to keep in mind that with the default Mapbox styling, I wouldn't be able to get the
iconic appearance of the tiered topography with a tan cliff and a green, grassy surface. This is because
</h4>
</div>
</div>
<div class='container-fluid' align=center>
<img style='box-shadow:0px 0px 2px gray; width:80%; margin-top: 20px;' src='images\krunkel.gif' >
</div>
<div class='container-fluid' align=center>
<div class='col-xs-11 description'style='padding:25px 0px 25px 0px; float:none;'>
<h4>One of the things I had to keep in mind was that with the default Mapbox styling, I wouldn't be able to get the
iconic appearance of the tiered topography with a tan cliff and a green, grassy surface. This is because extruded features in Mapbox only allow for a single color for the entirety of the polygon. My workaround was to create a very small buffer
on all of the plateaus so that I could style that to look like a shear cliff face. I also added a seamless SVG texture to the grass to replicate the iconic pattern from the actual game.
<br><br>
This was a super fun project to work on, both topically and because I learned a bit more about dealing with three-dimensional visualization in Mapbox.
I hope to add more to it in the future, maybe including fruit tree locations and 3D buildings. You can interact with the map <a target="_blank" href="https://www.redgiantmaps.com/maps/krunkel">here</a>!
</h4>
</div>
</div>
<div class='col-xs-12 project-button'>
<p style='color:#dbcac6; padding:10px;'>Copyright © Ross Thorn 2016-2022</p>
<h3><a href='index.html'class='button-text'>HOME</a> // <a href='#header' class='button-text'>TOP</a></h3>
</div>
</body>
<script type='text/javascript' src='js/jquery-3.1.1.min.js'></script>
<script type='text/javascript' src='js/bootstrap.min.js'></script>
<script src='js/includes.js'></script>
</html>