The Legend of Zelda's Breath of the Wild

background

Recently, in Liver Zelda Breath of the Wild, I hope that be 👸 before the release of the new work in 2022. At the same time, the company has a need for map loading, so I want to take the Wilderness map as an example to learn and practice the map knowledge related to front-end development. This article mainly introduces the Zelda Breath of the Wilderness map by using the tile map loading principle Load and add interactive anchor points.

Basic knowledge

Tile map 🗺

In the process of game development, that exceeds the screen size. For example, in a real-time strategy game, it allows the player to scroll the game screen on the map. This type of game usually has rich background elements. If you directly use the background image switching method, you need to prepare a background image for each different scene, but each background image is not small, which will cause a waste of resources.

tile map was created to solve this kind of problem. A large world map or background image can be represented by several types of terrain, and each terrain corresponds to a small picture. We call these small terrain pictures a tile. piece. By splicing these tiles together, a complete map is combined. This is the principle of tile maps.

tile map pyramid model is a multi-resolution hierarchical model. From the bottom to the top of the tile pyramid, the resolution is getting lower and lower, but the geographic range represented does not change. First determine the number of zoom levels to be provided by the map service platform N , take the map image with the highest zoom level and the largest map scale as the bottom layer of the pyramid, that is, the 0 layer, and divide it into blocks, starting from the upper left corner of the map image from left to right, top to bottom is cut into the same size square map tiles, formed on 0 layer tile matrix; at 0 base layer on the map image, for each pixel is divided into 2×2 pixels The method generates the 1 layer map image, and divides it into blocks, and divides it into square map tiles of the same size as the next layer to form the first layer tile matrix; the same method is used to generate the 2 layer tile matrix;. N-1 this way until the 0613f6e896d1b6 layer, forming the entire tile pyramid.

Tile maps generally use ZXY standard map tiles. (Tile level, tile x coordinate, tile y coordinate)

Mercator projection

tile map uses the Mercator projection , that is, the normal axis equiangular cylindrical projection, also known as the equiangular cylindrical projection, which is a type of cylindrical projection, drawn up by the Dutch cartographyist Mercator ( Gerhardus Mercator ). The basic principle is to assume that the earth is enclosed in a hollow cylinder, and its datum line of latitude is tangent to the cylinder (equator), and then imagine that there is a light in the center of the earth, project the figure on the sphere onto the cylinder, and then the cylinder Expand, this is a map drawn by the Mercator projection on the selected datum latitude. The projection methods used by Baidu map, Gaode map and Google Maps

The tile map does not need to be generated by yourself. There are many tools that can be used to make the tile map. Tiled , Arcgis etc. are all very popular tools.

accomplish

In this example, the Zelda Breath of the Wild tile map is sourced from the network open source map. To load the tile map, use the Leaflet web take a brief look before developing it.

Leaflet.js

Leaflet 🌿 (https://leafletjs.com) is a modern and open source JavaScript library developed to build maps with good interactivity and suitable for mobile devices. Using it we can deploy simple, interactive, and lightweight web maps.

• The code is only 33 KB , but it has most of the functions for developing online maps.
• Allows the use of layers, WMS , markers, pop-up windows, vector layers (polylines, polygons, circles, etc.), image overlays and GeoJSON and other layers.
• You can interact Leaflet map by dragging the map, zooming (by double-clicking or scrolling by the wheel), using the keyboard, using event handling, and dragging markers.
• The browser supports desktop browsers such as Chrome , Firefox , Safari 5+ , Opera 12+ , IE 7-11 and Safari , Android , Chrome , Firefox and other mobile browsers.

Code

In the pages of head introduced labels Leaflet of css files and js file. Create a map with where you want to create a id of div , an example of using #mapContainer element carrying a map.

<head>
  <link href="assets/libs/leaflet/leaflet.css" rel="stylesheet"/>
  <script src="assets/libs/leaflet/leaflet-src.js"></script>
</head>
<body>
  <div id="mapContainer"></div>
</body>

Need to ensure that the map has a clear height, you can add the following full-screen display style CSS

#mapContainer {
  width: 100%;
  height: 100%;
}

Now that the initialization of the map has been completed, the tile map is loaded in this step.

• L.LatLngBounds (southwest corner point, northeast corner point): Create a rectangular frame of longitude and latitude by defining the southwest and northeast corners of the rectangle.
• setView : Initialize the map and set its view to the geographic coordinates and zoom level of our choice.
• L.tileLayer : Load the tile layer.
• addTo : Display the map.

var bounds = new L.LatLngBounds(
  new L.LatLng(-49.875, 34.25), new L.LatLng(-206, 221)
);

var map = L.map('mapContainer', {
  crs: L.CRS.Simple,
  attributionControl: false,
  maxBounds: bounds,
  maxBoundsViscosity: 1.0,
}).setView([0, 0], 2);

var layer = L.tileLayer('assets/maps/{z}_{x}_{y}.png', {
  attribution: '© David',
  minZoom: 2,
  maxZoom: 7,
  noWrap: true,
  bounds: bounds
}).addTo(map);

Make sure that all codes are called after div and leaflet.js By default (because we did not set any parameters when creating the map instance), all mouse events and touch interaction functions on the map are enabled, and it has zoom and attribute controls.

At this point we have to drag the map in the page, zoom and other operations, and open the browser console to view network in img option, along with the operation of the trigger different display map tiles are loaded browser.

Zelda's Breath of the Wild map is very large. According to the test of the foreign oil pipe master of 20 more than 0613f6e896d818 minutes for Link to walk from the northernmost point to the southernmost point of the map. To play the game on such a grand map, it takes a lot of energy to explore the temples, map towers, horses and other monster points. If you use existing data for labeling, you can save a lot of energy (but it also loses the fun of exploration 😂 ). At this time, you can use Leaflet to mark on the map. The annotation data comes from internet data. The following content takes the temple 🛕 as an example to realize the annotation and interactive functions on the tile map.

• L.marker([x, y]) : In addition to tiles, you can easily add other things to the map, including markers, polylines, polygons, circles, and pop-up windows.
• L.divIcon : Customize the icon.
• bindPopup : Pop-up windows are usually used to attach certain information to specific objects on the map.

$.each(markerData, function () {
  var key = this.markerCategoryId + "-" + this.id + "-" + this.name.replace(/[^A-Z]/gi, "-");
  var popupHtml = '<div class="popupContainer">';
  popupHtml += '<strong class="name">' + this.name + '</strong>';
  popupHtml += '<div class="buttonContainer">';
  popupHtml += '<span class="markButton" onclick="markPoint(this)" data-key="' + key + '">标记</span>';
  popupHtml += '</div>';
  var className = "mark-" + key;
  className += " markIcon";
  className += " icon-" + markerStyle[this.markerCategoryId];
  var marker = L.marker([this.y, this.x], {
    title: this.name,
    icon: L.divIcon({
      className: className,
      iconSize: [20, 20],
      iconAnchor: [10, 10],
      popupAnchor: [0, -10],
    })
  }).addTo(map).bindPopup(popupHtml);
});

At this point, through traversal, the coordinate points of the temple in the data are added to the map, and a click event is added to the dom structure. Click the temple to interact.

Using the same method, you can 😂 , recall points, and subtask points on the map for easy searching.

Achieve effect

Online preview: https://dragonir.github.io/zelda-map

Summarize

Using the tile map, the whole and part of the map can be displayed in high-definition, and it can be loaded on demand. It should be noted that the map tile images with more layers will also increase exponentially and need to be cached. , In this way, the loading speed of the map page can be improved and the user experience can be improved. leaflet.js is very lightweight, it is very powerful. In this example, only some of its basic functions are used, and other advanced usages will continue to be explored in subsequent development.

Reference

• Zelda Breath of the Wild Map Source: https://github.com
• Tile map generation tool Tiled project: https://www.mapeditor.org
• Tile map generation tool arcgis : https://developers.arcgis.com
• Open Geospatial Laboratory Leaflet.js : http://webgis.cn/leaflet-index.html
• Mercator projection: https://baike.baidu.com/item/%E5%A2%A8%E5%8D%A1%E6%89%98%E6%8A%95%E5%BD%B1
• https://www.cnblogs.com/fwc1994/p/6519229.html
• ZXY standard tile http://support.supermap.com.cn/DataWarehouse/WebDocHelp/iServer/Subject_introduce/Cache/MapCache/TileFormat/ZXY_format.htm