This is part of the series by Cocos developer “Billion Dollar Programmer” on helping developers build their own games. We’ll be sharing his stories on the forum. You can read the originals from his website.
Introduction
This series is “8 years of main program hand in hand to build Cocos independent game development framework.” you are welcome to follow.
In indie game development, a tile map manager is a handy tool to help you easily create and manage in-game maps. In this article, I will introduce how to build your tile map manager in Cocos Creator to develop and manage game maps.
This article’s source code and project are available at the end, so go there, everyone.
What is a Tile Map?
Tile maps are a technique for building a game world by dividing the game map into small pieces (tiles). Each tile is usually a small image that can be stitched together to create large game maps. This method makes creating and managing maps very easy, as you only need to create a set of tiles and then place them in the game world to build the map.
Advantages of Tile Maps
Fast loading and rendering: Since the map is divided into smaller pieces, only the tiles of the currently visible area need to be loaded and rendered, not the entire map. This can significantly increase map loading speeds, allowing users to view map data more quickly.
Reduced Server Burden: Tile Maps can distribute map data across multiple independent tiles so they can be stored and served on multiple servers, spreading the server burden. This is critical for large map services and high-traffic applications.
Caching and Offline Use: After a user accesses a map, the browser or application can cache the loaded tile for later access. This makes it possible to view map data even when in offline mode.
Flexibility: Tile Maps allows developers to customize map styles, layers, and markers to meet the needs of a specific application. This means you can create a map experience customized to your needs.
Interactivity: Tile maps support a variety of user interactions, such as panning, zooming, and marker clicking. This enables users to perform various actions on the map, from viewing locations to finding routes.
Tilemap manager implementation
1. Declare the MapTile class
A Tilemap is a large map cut up and split into many small images, commonly known as tiles. So, we need a class to handle each image.
Declare a MapTile class inheriting from cc.Sprite, which is mainly responsible for loading and displaying images.
Perform a series of calculations through rows and columns to obtain the specified position of the image display, load with cc.resources.load, and destroy with cc.resources.release:
2. Declare MapTiles management class
The above described the handling of a single MapTile. We need a management class to manage all the MapTiles:
The MapTiles management class is mainly responsible for updating the MapTiles that should be displayed near the incoming coordinates, i.e., updating the map blocks near the “character.”
Through a series of complex calculations, you can determine the ranks of map tiles that should be displayed near the coordinates (x,y):
Manage and accurately create and display nearby map blocks:
Tile Maps can display infinitely large maps, dynamically create and display nearby map blocks, and hide off-screen maps for optimal results:
3. Declare the Map class
The Map class is mainly implemented to load the configuration data corresponding to the map ID and drive the MapTiles management class to update the map blocks around the specified coordinates:
4. Write test code
Initialize and build the map:
The rootNode node is mainly responsible for movement.
The mapNode node is responsible for loading TileMap nodes.
5. Prepare test resources
The resources are from the Internet and are for learning purposes only.
A map configuration file also contains the map’s width, height, and occlusion information.
6. Test Result Demo
A successful test will put the map pieces together and have a dynamically loaded display, including the map drag and drop function:
Summary
In conclusion, Tile maps are an essential tool in game development that can simplify map design and rendering, improve game performance, and support a wide range of game types. Using Tilemaps wisely allows developers to create games with complex worlds while reducing development complexity quickly.
Source Code: