Rendyjs (Rendy)

Rendy is a tile-based game renderer that uses the HTML5 Canvas. If you're making a game that's tile-based (with snap-to-grid movement) then you can use Rendy to render your game.

Although Rendy's intended use is for top-down games, there's no reason you couldn't accomplish a side-scrolling game with some effort.

Rendy manages a map of your game, which you can add and remove objects from whenever you want. Rendy will render the changes to the map and you can keep focusing on your game.

Note: Rendy isvery much not in a stable state. I'm making it almost entirely to suit my needs for a renderer for the games I make. Use it in your projects at your own risk.

Note again: Since the project will be changing a lot in these early stages, this is how versions will go:

• Updates that doesn't break any existing code will be incremented by 0.0.1 as is expected (backwards compatible)
• Updates that break existing code will b incremented by 0.1.0 (not backwards compatible)
• Once the project settles down and a 1.0.0 is released, the project will follow [SemVer(http://semver.org/)]

Usage

Example

I recommend checking out the example directory which has a working (albeit basic) gamethat uses almost all of Rendy's features.

The example is updated as Rendy is updated so it should always remain a good way to see how to use Rendy.

Map

Once you've set up the map with rendy.map.setSize(height, width) you can add a map with rendy.map.add(map).

The map is expected to be a 2D array with the y axis being the first dimension and the x axis being the second (map[y][x] instead of map[x][y]). Each element in the second dimension (x) should be a string.

You can get what is at a tile with rendy.map.get(x, y). It will return a string.

You can set the value of a tile with rendy.map.set(x, y, value). value should be a string.

Cache

When setting up your game, add the objects you'll use in the game to rendy.cache. The objects can be anything you can draw on the canvas. Currently there's a helper method to just add an image instead of drawing shapes.

Rendy looks in the cache for all values in the map. For example, if you have something called "tree" in your map, you should also add something to the cache with the name "tree".

rendy.cache.addImage(name, url) adds an image at url to the cache and names it name. The image should be a square with the same size you set tileSize.

rendy.cache.addShape(name, drawFunction) adds a generic shape called name to the cache. drawFunction will be called to actually draw the shape, given the arguments canvas (the canvas you should draw to) and tileSize which is the same as you passed to Rendy's constructor. See the drawFog function in the example code.

Camera

The camera allows you to only show a portion of the map around the player at any time.

Set the size of the camera with rendy.camera.setBounds(height, width)

Add an object which holds the coordinates of the player with rendy.camera.addPlayer(playerObj). The object should be in the format of { x: 4, y: 3 }. Update this object when the player moves.

Set the camera's mode with rendy.camera.mode = 'wrap' or rendy.camera.mode = 'fog'. The mode determines how the camera acts when it gets close to the edge of the map.

Wrap Mode

Wrap mode will stop moving the camera when there isn't any more map to render in one direction.

Fog Mode

Fog mode renders 'fog' if the camera is too close to an edge of the map. If you use this mode make sure you have 'fog' added to the cache.

I'm not good at describing the different camera modes. Take a look at the example, switch between modes and you'll see what they are.

Notes

• When moving the player, make sure you update the playerObj you passed to rendy.camera.addPlayer. The camera looks at this object to move the camera.
• Unless specified in this documentation, all sizes and coordinates are in tile units and not pixels.