Skip to content

Commit

Permalink
Fixed markdown.
Browse files Browse the repository at this point in the history
  • Loading branch information
mcantelon committed Aug 11, 2011
1 parent 9617756 commit f7275cb
Showing 1 changed file with 76 additions and 76 deletions.
152 changes: 76 additions & 76 deletions README.md
Expand Up @@ -4,83 +4,83 @@ If you want to have some fun with canvas and make chunky things Grout is
a friend to you.

Features:
* functionality for making chunky pixel art and games
* two rendering modes ("fast" and blurry, or "sharp" and less performant)
* allows you to use ASCII art to define sprites
* supports simple sprite animation
* provides a pixel font with word wrap
* functionality for making chunky pixel art and games
* two rendering modes ("fast" and blurry, or "sharp" and less performant)
* allows you to use ASCII art to define sprites
* supports simple sprite animation
* provides a pixel font with word wrap

## Defining sprites

Grout lets you define sprites using ASCII.

Below is an example in which we create a draw a little man:

var width_in_tiles = 6
var height_in_tiles = 11
var tile_size = 8
var width_in_tiles = 6
var height_in_tiles = 11
var tile_size = 8

var grout = new Grout({
'width': width_in_tiles,
'height': height_in_tiles,
'tile_width': tile_size,
'tile_height': tile_size
})

var man = grout.sprite(
'man', {
'tile_width': tile_size,
var grout = new Grout({
'width': width_in_tiles,
'height': height_in_tiles,
'tile_width': tile_size,
'tile_height': tile_size
}
)
.make_sprite(" \
.***.. \
.***.. \
..*... \
.***.. \
*.*.*. \
*.*.*. \
..*... \
..**.. \
..*.*. \
***..* \
.....* \
")

grout.draw_all()
})

var man = grout.sprite(
'man', {
'tile_width': tile_size,
'tile_height': tile_size
}
)
.make_sprite(" \
.***.. \
.***.. \
..*... \
.***.. \
*.*.*. \
*.*.*. \
..*... \
..**.. \
..*.*. \
***..* \
.....* \
")

grout.draw_all()

## Adding color to sprites

If we wanted to make a color version of the little man in the example above
we can do it by adding an argument to "make_sprite" that maps letters to
colors.

var man_colors = {
'H': '#271F2E', // hair color
'S': '#D9B166', // skin color
'C': '#000080', // clothing color
'B': '#000000' // belt color
}

var man = grout.sprite(
'man', {
'tile_width': tile_size,
'tile_height': tile_size
var man_colors = {
'H': '#271F2E', // hair color
'S': '#D9B166', // skin color
'C': '#000080', // clothing color
'B': '#000000' // belt color
}
)
.make_sprite(" \
.HHH.. \
.SSS.. \
..S... \
.CCC.. \
C.C.C. \
C.C.C. \
..B... \
..CC.. \
..C.C. \
CCC..C \
.....C \
", man_colors)

var man = grout.sprite(
'man', {
'tile_width': tile_size,
'tile_height': tile_size
}
)
.make_sprite(" \
.HHH.. \
.SSS.. \
..S... \
.CCC.. \
C.C.C. \
C.C.C. \
..B... \
..CC.. \
..C.C. \
CCC..C \
.....C \
", man_colors)

## Animating sprites

Expand All @@ -94,26 +94,26 @@ adding a "stamp_text" function.

Below is an example of using "stamp_text" to add text to a map:

var width_in_tiles = 30
var height_in_tiles = 12
var tile_size = 8

var my_grout = new Grout({
'width': width_in_tiles,
'height': height_in_tiles,
'tile_width': tile_size,
'tile_height': tile_size
})
var width_in_tiles = 30
var height_in_tiles = 12
var tile_size = 8

// add a map and stamp some white text on it in the upper left corner
my_grout.map(
'my_map', {
var my_grout = new Grout({
'width': width_in_tiles,
'height': height_in_tiles,
}
).stamp_text('hello world', 0, 0, 30, '#ffffff')
'tile_width': tile_size,
'tile_height': tile_size
})

// add a map and stamp some white text on it in the upper left corner
my_grout.map(
'my_map', {
'width': width_in_tiles,
'height': height_in_tiles,
}
).stamp_text('hello world', 0, 0, 30, '#ffffff')

my_grout.draw_all()
my_grout.draw_all()

Each character is 5 pixels wide by 5 pixel high (with one pixel uses for
vertical and horizontal spacing.
Expand Down

0 comments on commit f7275cb

Please sign in to comment.