In the end I’ll probably just give you the code and some sort of tutorial to explain how I did it. For now you just need to know that you have to start with something very basic and just add functionality bit by bit. You’ll have to rewrite some stuff of course but it will be easier than you think.

Here is a temporary demo: http://janne.siera.be/

If you have any questions on game maps or using the canvas element please ask. I’ll try to answer them as good as I can.

Take care,
Janne

Here is a nice screenshot from the anime to illustrate my map.

View the original screenshot

Update:

Here is another example, which will be very useful for my communication with illustrators. Source: The Settlers, rise of an empire.

This post will explain some “game mechanics options” for General’s Map, the battle engine.

I hope to built GM so that I can – easily – enable and disable certain game mechanics. With the purpose of testing various mechanics, and combinations. Each option is labeled with one or more categories.

Battle Engine (Military)

It is very important that we can easily switch the battle engine behind the scenes. When new features are added or when the math changes we need to be able to easily update to a newer version, and when something is wrong (like, for example, a bug) we need to easily go back to an older version.

Right now I’m planning on a very basic battle engine. Weird and excessive math won’t contribute to deep strategy. Something about the design:

Unpredictability

In most games there will be some sort of random element in the battle system. Otherwise the powerful player will only become more powerful. Since I’m aiming this to be a very strategic game I tend to go to a game of perfect information (like chess).

Instead of just adding a random number in the calculations I will try to give the player with best strategic insight the advantage, instead of automatically letting the stronger player dominate the rest. Although it’s not easy I think it’s perfectly possible.

I’ll be adding some unpredictability and hidden information to the recipe, but players will be able to influence these factors, instead of just letting it happen to them. There’s noting so frustrating as watching you loose without being able to do anything about it.

Unpredictability can be really fun! Because it’s not the same as randomness. Give the player the opportunity to react to the event instead of just throwing in some good/bad luck. The real strategist will be the one who deals with the situation the best, and even if he’s overpowered he’ll be able to maximize his damage to the enemy.

Even if the battle is lost, the war isn’t!

Basic Math

Now, how does this work concretely?

Each army has a power level (let’s say a new army has power level 100). The army with the highest power wins, both armies will loose power (when battling you loose soldiers, yes, it’s about lives, be careful with them).

Armies will battle until one of the sides is totally destroyed, or pulls back. Each turn only a small portion of the armies will be destroyed, so a battle can take multiple turns. The next turn an army can pull back, or move more armies into battle.

It’s very simple, but we can influence the outcome by modifying the power levels of an army. How we do this is important, and changeable!

Nature (Territory)

Two options that can be used (in combination) to modify power levels of armies. They appeal to different forms of strategy. With this model we go out from the idea that we have 3 types of armies. It doesn’t really matter how these are called, so right now they are: “fire”, “wind” and “earth”.

Option 1: Land types

Every way point has a certain type of land which gives bonuses to different types of armies. The player can see the terrains so can adapt his strategy to built and move the right armies to the right places.

Eventually a land type can have other applications too.

Option 2: Weather

The weather option is similar to the land types option. It’s simple yet effective. Every turn a random weather is chosen (e.g. “cold and rainy, much wind”, “very hot, now clouds or wind”, … ). Each weather type influences the armies. A player can adapt his strategy to react on the weather of this turn.

Should he wait to attack, or maybe he’s lucky and can try to conquer that strong city! Or perhaps the right decision is to pull back with very bad weather? When the weather weakens both players to much, maybe they decide to both pull back, so they won’t become a target for others?

Does that sound interesting to you? I think it has potential! But I wouldn’t make it entirely random though. I think seasons could provide some extra possibilities. The player can predict the weather partly, but he still might be surprised with the actual outcome!

I hope that gives you something to think about, or could inspire you in some way. I will explain the other game mechanics options in a future post!

Hello there. This post will hopefully give you a better sight on my new working title “General’s Map”. In an earlier post I provided a little description of the game, now I will dig deeper into the design.

Since I’ve written down the first version of a game design document I will take that as a reference. (If you want to see the actual document, please leave a comment.)

The key aspects: Prototype & Tweaking

The idea is to create a basic engine first, not very sophisticated. Then we will test various game mechanic options, features we can easily turn on and off. We will test various combinations of mechanics and test each one extensively. This way we can tweak the design to create the most fun game possible.

A side note: There are some major flaws in the design right now. It is incomplete. You are welcome to search for these flaws, it’s a good excercise. Otherwise I’ll find some solutions while developing and designing some more.

The Oneliner

A little clause I’ve added to my game design doc is the “oneliner”. One sentence that describes the essence of the game. I don’t know this is “the” best sentence, but at least it’s what I’ve come up with.

A casual strategy game where every action has an impact, trying to deliver a daily think workout.

The idea is that a player can take his time examining the map, trying to come up with the best strategy. It’s “tick” based, so a player will only have a limited number of actions in a set time interval (a tick will, for example, take 24h). Off course the time spent will get longer the more cities you conquer (which should make the game more interesting, and not boring).

Since the amount of actions is limited, every action has a serious impact and a variety of strategies are possible. This should be(come) an interesting strategy game.

Target Audience

People seeking for a casual strategy browser game to play on a daily basis. People who like chess.

Navigation & Interface

Navigation is simple. The biggest part of the screen will contain the map, and on the side a frame for info and actions. When you click something on the map (city, army, … ) information and possible actions (strength, type, … attack, send message, … ) buttons will be displayed in the frame. Simple, huh?

This will be done with javascript (AJAX) — most probably.

Winning & loosing

A player has won when he has conquered the map. This could be all the cities on the map, but more probably only a few “Capitals” spread over the map.

The basic framework

The basics of the game are laid out. The player will play on a map, with: cities, roads and armies. This could be extended with special units, castles, etc. But for the sake of the prototype we will only stay with the “magical three”, for now.

At the moment there are 4 basic “headlines”. This is a reference for as well the game elements (categories), strategy theory (factors) and User Interface & Help (clear categories).

• Economy
• Military
• Diplomacy
• Territory

Tick

The game will be played in a sort of turns, so called “ticks”. Each tick happens after a set period of time (for example 10 min, which wiould make a fast paced game, or 24h, which would make a slower paced game). With each tick new income will be generated. (so the player can do new things).

Income

For each city the player owns he will receive income. This income isn’t “stackable”. When he hasn’t used it before the next tick, it will just be “refreshed”, you could say.

There are 3 types of income:

• Action points: The most important form of income. Action points (AP) are used to perform actions in the game. So the more AP you can accumulate each tick the more you can do.
• Food is needed to pay upkeep to soldiers. The more food you can accumulate the more armies you can maintain.
• Gold / Metal / Precious resources: An income type varying from city to city. Can be used in specific game mechanics as payment.

Trade

Trade is an essential part of the game. Various mechanics will be tested.

Armies

Armies are used to travel the land / capture / defend cities and fight other armies.

Basic Battle Engine

I will dedicate another post to the battle engine. It’s rather simple, but it should fit the overall strategy theme.

An illustration

In a previous post I wasn’t sure yet what sort of map I would take: isometric or top down. To be honest I still don’t know. I titled the 2 themes “Immersion” (isometric) and “Ancient Map” (top down). I photoshopped a little bit with images from the internet, to illustrate how a game map could look like. Off course we need some good graphics for the game, but that doesn’t really matter in the example.

This illustration uses the top down method, the “ancient map” theme. I really like the map itself but off course not the cities and the army (yes, it’s a chess piece) on it… But I’m sure a good designer can make something very pretty in the right style!

There are 3 “cities” on this map, 1 army and 4 waypoints. Now you would select, for example, your army and click on the first waypoint. The army would move to that waypoint and you loose 1 Ap. You could move to another city and attack or lead them to one of your own cities to defend etc.

Game Mechanics Options

Well, that’s a pretty basic engine, agreed? But this is where the game gets interesting: the Game Mechanics (GM) options! I hipe to implement them so I can easily turn them on / off. This way I will test various ideas, and how fun they really are.

I will explain the ideas I have come up with so far in other posts.

Strategy

I also dedicated a whole chapter on strategy in the design document. Currently this is a pretty empty section, but I hope I can discover / create some usefull tools to fully understand what strategy is; how it works, how it can be translated into games etc.

Note

This was a little bit more indo about General’s Map. I hope I did a good job explaining how it works, but if you have any questions, please ask.

Off course I’m not only explaining this because I like writing. I hope it can help some one, in some way. I also want to open up a bit the conversation between (browser based!) game designers. If you have remarks etc I would be happy if you share them with me!

And then to be clear: I don’t publish any of my game designs so others can copy them. I hope to inspire other, so they can use it in their own design.

I’m not sure which approach to take for the game map perspective. At first I wanted an isometric map, but now I’m starting to think that top down fits the theme more. But what is ‘isometric’ and ‘top down’?

2D vs 2.5D

A simple game map is in 2D. But the perspective of the map can differ.
In a simple top down perspective you are a bird looking straight down on the world. It often uses squares or hexagonal tiles. on wikipedia

A little bit more complicated isometric map uses rhombuses, which gives more of a 3D sense. You can, for example, take an angle of 45°. on wikipedia

The initial idea was that the player is a warlord, who tries to unite the land. So the map would give an overview on the land, the cities, etc

But, though the game mechanics stay the same, I like the theme of a “General’s Map”. The function of the map would stay the same: giving an overview of the land, and being the playing platform.

Now, should I change the perspective of the map to fit the (awesome) theme? What are the (dis)advantages of each approach?

The top down perspective

I think it will feel more like a map, but graphics will probably look worse than with an isometric map.
It’s easier to make than an isometric map.

The isometric map

I think the player will feel more “in the game (map)” instead of just “looking at the game (map)”. Also, graphics will probably be better.
It’s not much harder to make than a top down map.
What do you think? I haven’t decided yet.

Since I needed a map for my new working title prototype: General’s Map, I decided I would try out something with the HTML 5 canvas element.

Using the canvas element meant I would be using a lot of javascript. Animations would be so much easier, though I had my doubts about other parts. Okay, animations would be easier, but could it do the ‘normal stuff’?

I decided the best way to test it was to make it. So I began on a simple script . The first step was to render the tiles to the screen, that was very easy. The next step was to render other ‘objects’ on top of it, like cities etc, that was even easier.

But then, making the cities ‘clickable’? Nope, can’t do that. Well, it can be done, but it’s a real pain. Check out 4.8.14 on the canvas element information page.

So what did I learn?

1. I got to know the canvas element better
2. I practised my javascript
3. That, when creating a gamemap, you should stick to more ’standard’ methods. The canvas element is a no-go.

I hope this information was useful to you. Here’s the basic script (where I render the tiles). It’s very small, but it might be useful to someone.

PS blogger doesn’t seem to have an attachments option?

// Edit

You can have clickable areas by creating an image map for a transparent image, you lay on top of the canvas. I’m sticking with the standard method, but if you’re interested in the canvas element you can give it a try.

The Design

General’s Map is a strategy game. Inspired by the great Generals in ancient times, and the war to unite the land. It’s a game based on ancient China, where the Generals try to unite the land. It’s a game based on ancient Japan, where the Warlords try to unite the land, and ultimately become the Shogun.

The generals plan their attacks. They decide where and when they will attack. Which city to capture, which army to defeat. Their most valuable tool is the Map.

This game will be played on a map. The player will be able to capture and maintain cities, move armies, … Without going into detail I can already tell you the design isn’t complete yet. The plan is to create a prototype first, and then test out various mechanics.

The Map

When building the prototype the map is the most important. The map will be tile based. Luckily there are some pretty good tutorials out there, so I don’t have to worry.

What’s important:

• Fast Loading
• Smooth Terrain Transitions
• Smooth Scrolling
• Clickable areas with ajax events
• Animation

Building the Prototype

I will built the prototype with a decent php framework: Kohana

Also, since I’ll be using some javascript, I’ll be using the javascript library: jQuery

This was just a little intro, I’ll be updating you with more details and dev notes.