rsGrid jQuery Plugin

I am currently in the process of making a major update to my Blackeden Down iPad game. I am making a huge use of canvas element, one thing I am doing is making the maps as a background image of the canvas element and then placing the castles for the map onto the canvas and animate as required.

The one small issue I had was making sure that the castles sat exactly how they do on the concept I had created. This is not exactly difficult to do, but I felt from my previous attempt at the game, that so much trial and error was made it took time to put all the castles in the correct place as I was simply guessing a starting position and tweaking as required.

I came up with the idea of placing a grid over the canvas element marking out specific increments in order to help me quickly place the castles. I came up with a canvas grid here is what I have come up with!

Here is the what the background image looked like when I started

Now when I use my plugin, and use the following code –

We can see what this achieves below –

So much easier to work with and saves a bit of time!

Let’s try and make this a but more specific, while it helps currently, we can be a bit more specific. Let’s update our code a little –

Check out the options available below –


option description default type
show Show the grid true boolean
lineColour Line colour of grid #f1c40f string
textColour Colour of text used n the grid #000 string
increment Increment of the grid 50 int
padding padding for canvas element 0 int
lineSize Line thickness of grid 1 int
showIncrement Number at each increment to help work out distance true boolean

Leave a Reply