So for the map portion of the project I needed to have a way that users could interact with the world and view the different area maps. With the random behavior that the stories could take I needed a way to spin up new story node areas that related to the new story event.
CraftyJS to the rescue! http://buildnewgames.com/introduction-to-crafty/
The above tutorial goes through as to how to generate a new top down map each time the player starts the game. It utilizes tiles and randomly places the different pieces on the board. However, in my project I cannot randomly change out the board each time a player visits the same node. There has to be a way to keep the newly generated board for future uses in that particular story node… well, there is and that way is considered to be saving the configuration/layout in a seed variable. What will happen is that the first time the story node board is generated it will check to see if it has a seed number associated with it from the DB/PHP service. If it does not then it will request from the DB/PHP service to generate a seed number which it will then use to save the other configurations under the seed object with that particular number. After that it will save that seed back into the DB where it can be used for future play. Though keep in mind that this is only generating the board/map for the interior portion of the story, aka story node. We still have to deal with how do we get to the story node.
Let’s step back a bit and look at it from the beginning. When we first enter the project/game we see a world map (created in Illustrator and exported as an interactive SVG). The world map has different continents that highlight when the player hovers over them. The continents also have the top 5 recent events showing up as tool tips. The user/player clicks on one of the continent which then fades out the world map and then fades in the corresponding continent.
Within this continent the player is presented with some areas and each area highlights as we hover over them along with a tool tip of how many story lines are available to play. The player clicks on one of the areas and then they are presented with that area and if we are logged in then we as the player see our default path and diverted paths for our current story line. From this point we can see how many more nodes are left in our current story line and can go back and forth between nodes that we previously completed as well as the current one to see if additional tasks have come up. It is within the area screen that an additional story node can be added for other players. If logged in the player just needs to initiate a “cause event” call which will then update the area map to show a clean map. We select the player that we want to add an event and then the map will update to show their current path and allow us to drop a new node somewhere on the map. The player completes creating the event and sends the event to the other player.
Let’s get back to the area map. The following maps world, continent and area will be utilizing SVG with interactions because these maps will not change much. It is important that these SVG have interactions so that events can be triggered as to what area on the map is being interacted with within the program. The environment is crucial to the random map generator further within the program for the story nodes so that it can utilize the correct tiles for the map.
That’s it for now but its a great foundation start for the maps and interactions within the project.