Permalink
Browse files

Fixed markdown.

  • Loading branch information...
1 parent 9617756 commit f7275cb4d166984aa7df5d91e0724ed730d7b85c @mcantelon committed Aug 11, 2011
Showing with 76 additions and 76 deletions.
  1. +76 −76 README.md
View
152 README.md
@@ -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
@@ -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.

0 comments on commit f7275cb

Please sign in to comment.