About
#About# TheseThese are actually two questions in one. First of all I am looking for a way to efficiently store large amounts of tile data. The other aspect deals with querying the data set and displaying tiles. Let me give you some background first.
We are making a browser based multiplayer tycoon game using the CraftyJS library to render it to Canvas. In the background of the GUI we're running Yii Framework on PHP and it all connects to a Python random map generator and game engine.
This is how the first rough map render looks: https://i.sstatic.net/hqdLn.jpg
Storing the map data
#Storing the map data# TheThe game world is randomly generated each time the game starts. The size is 100x100 hexagonal tiles for each player. That means that for a three player game, there are 90.000 tiles created. Currently I just create a JavaScript array from which I render the map.
This works fine for rendering, but for any kind of interaction with the map we need to store which player owns the tile, what kind of structure is build on top of it, what's it's current price and so on. At first, at least for the prototype, we wanted to use MySQL, but after some testing, it's not exactly as fast as I'd like. Maybe an object store like MongoDB would be better suited for storing tile data instead of an SQL table. Or maybe something else?
#Displaying the map#
Displaying the map
Another problem I see is moving around the map. Currently I'm creating Crafty entities for each tile even if it's not in the viewport. This is slow, because even though Crafty renders only the ones in the viewport, it stores and possibly iterates through all the tiles on each render event. What I currently have is a drawn generated map which is very slow to load and stutters when you move around, now I'd like to make it playable.
My first idea was to load the displayed subset of tiles that are in the viewport. But when a player would move the viewport to a blank area, I'd need to query the server and wait for the response back, only then can the map be rendered. This would be fine in a native application, but it's laggy in a web game.
The way to get smooth performance from the map could be preloading a bigger subset of tiles into a javascript array and use it as a cache. The player would have a few screens "cached" and when he moves the viewport, I'd load more tiles to the JS "cache".
Am I headed in the right direction? I would love to get some more information from someone who has done something similar. I am new to game development, but have been going through a lot of sources over the last couple of weeks.
#About# These are actually two questions in one. First of all I am looking for a way to efficiently store large amounts of tile data. The other aspect deals with querying the data set and displaying tiles. Let me give you some background first.
We are making a browser based multiplayer tycoon game using the CraftyJS library to render it to Canvas. In the background of the GUI we're running Yii Framework on PHP and it all connects to a Python random map generator and game engine.
This is how the first rough map render looks: https://i.sstatic.net/hqdLn.jpg
#Storing the map data# The game world is randomly generated each time the game starts. The size is 100x100 hexagonal tiles for each player. That means that for a three player game, there are 90.000 tiles created. Currently I just create a JavaScript array from which I render the map.
This works fine for rendering, but for any kind of interaction with the map we need to store which player owns the tile, what kind of structure is build on top of it, what's it's current price and so on. At first, at least for the prototype, we wanted to use MySQL, but after some testing, it's not exactly as fast as I'd like. Maybe an object store like MongoDB would be better suited for storing tile data instead of an SQL table. Or maybe something else?
#Displaying the map#
Another problem I see is moving around the map. Currently I'm creating Crafty entities for each tile even if it's not in the viewport. This is slow, because even though Crafty renders only the ones in the viewport, it stores and possibly iterates through all the tiles on each render event. What I currently have is a drawn generated map which is very slow to load and stutters when you move around, now I'd like to make it playable.
My first idea was to load the displayed subset of tiles that are in the viewport. But when a player would move the viewport to a blank area, I'd need to query the server and wait for the response back, only then can the map be rendered. This would be fine in a native application, but it's laggy in a web game.
The way to get smooth performance from the map could be preloading a bigger subset of tiles into a javascript array and use it as a cache. The player would have a few screens "cached" and when he moves the viewport, I'd load more tiles to the JS "cache".
Am I headed in the right direction? I would love to get some more information from someone who has done something similar. I am new to game development, but have been going through a lot of sources over the last couple of weeks.
About
These are actually two questions in one. First of all I am looking for a way to efficiently store large amounts of tile data. The other aspect deals with querying the data set and displaying tiles. Let me give you some background first.
We are making a browser based multiplayer tycoon game using the CraftyJS library to render it to Canvas. In the background of the GUI we're running Yii Framework on PHP and it all connects to a Python random map generator and game engine.
This is how the first rough map render looks: https://i.sstatic.net/hqdLn.jpg
Storing the map data
The game world is randomly generated each time the game starts. The size is 100x100 hexagonal tiles for each player. That means that for a three player game, there are 90.000 tiles created. Currently I just create a JavaScript array from which I render the map.
This works fine for rendering, but for any kind of interaction with the map we need to store which player owns the tile, what kind of structure is build on top of it, what's it's current price and so on. At first, at least for the prototype, we wanted to use MySQL, but after some testing, it's not exactly as fast as I'd like. Maybe an object store like MongoDB would be better suited for storing tile data instead of an SQL table. Or maybe something else?
Displaying the map
Another problem I see is moving around the map. Currently I'm creating Crafty entities for each tile even if it's not in the viewport. This is slow, because even though Crafty renders only the ones in the viewport, it stores and possibly iterates through all the tiles on each render event. What I currently have is a drawn generated map which is very slow to load and stutters when you move around, now I'd like to make it playable.
My first idea was to load the displayed subset of tiles that are in the viewport. But when a player would move the viewport to a blank area, I'd need to query the server and wait for the response back, only then can the map be rendered. This would be fine in a native application, but it's laggy in a web game.
The way to get smooth performance from the map could be preloading a bigger subset of tiles into a javascript array and use it as a cache. The player would have a few screens "cached" and when he moves the viewport, I'd load more tiles to the JS "cache".
Am I headed in the right direction? I would love to get some more information from someone who has done something similar. I am new to game development, but have been going through a lot of sources over the last couple of weeks.
How to efficiently store and display a tile map on the web?
#About# These are actually two questions in one. First of all I am looking for a way to efficiently store large amounts of tile data. The other aspect deals with querying the data set and displaying tiles. Let me give you some background first.
We are making a browser based multiplayer tycoon game using the CraftyJS library to render it to Canvas. In the background of the GUI we're running Yii Framework on PHP and it all connects to a Python random map generator and game engine.
This is how the first rough map render looks: https://i.sstatic.net/hqdLn.jpg
#Storing the map data# The game world is randomly generated each time the game starts. The size is 100x100 hexagonal tiles for each player. That means that for a three player game, there are 90.000 tiles created. Currently I just create a JavaScript array from which I render the map.
This works fine for rendering, but for any kind of interaction with the map we need to store which player owns the tile, what kind of structure is build on top of it, what's it's current price and so on. At first, at least for the prototype, we wanted to use MySQL, but after some testing, it's not exactly as fast as I'd like. Maybe an object store like MongoDB would be better suited for storing tile data instead of an SQL table. Or maybe something else?
#Displaying the map#
Another problem I see is moving around the map. Currently I'm creating Crafty entities for each tile even if it's not in the viewport. This is slow, because even though Crafty renders only the ones in the viewport, it stores and possibly iterates through all the tiles on each render event. What I currently have is a drawn generated map which is very slow to load and stutters when you move around, now I'd like to make it playable.
My first idea was to load the displayed subset of tiles that are in the viewport. But when a player would move the viewport to a blank area, I'd need to query the server and wait for the response back, only then can the map be rendered. This would be fine in a native application, but it's laggy in a web game.
The way to get smooth performance from the map could be preloading a bigger subset of tiles into a javascript array and use it as a cache. The player would have a few screens "cached" and when he moves the viewport, I'd load more tiles to the JS "cache".
Am I headed in the right direction? I would love to get some more information from someone who has done something similar. I am new to game development, but have been going through a lot of sources over the last couple of weeks.