User:Qcdynamics/BlockGrid Tutorial

This is a tutorial about how to make diagrams using Block Sprites. It doesn't fit on the tutorials page because it doesn't pertain to the game, but rather to the wiki.

BlockGrid
These diagrams can help explain a configuration in a 2d area using many different blocks. These diagrams can be helpful because players can immediately recognize blocks unlike diagrams that use letters and a legend.

The quick-and-dirty method to make one of these is to copy the code from this page and use that as a blueprint. Add, remove, and replace the blocks you want to use in your diagram. The block letters are case sensitive. To add a column, add a letter to the end of each row. To add a row, copy the row above it. Columns don't need to be the same length; air blocks will be used to fill in the space on the right-hand side.

BlockGrid |w=stone|S=piston-side-down|A=air|P=pressure-plates|G=grass-block-side |F=nether-portal|O=glowstone|C=chest-side |AAAC |AAPw |wOSw |AAAw |AAAF |GGGw

Block Sprites can be called using their name (which is displayed on the Template:BlockSprite page) or by their numeral position (where they appear on the BlockCSS.png).

If you need a block that doesn't exist, find a substitute (coloured wool) and make a request on the BlockCSS.png talk page about adding your missing block. Certain blocks, however, will probably not be added (such as flowing water). If you are making a long/tall diagram, use alternating blocks so the reader can easily count them.

Some blocks are designed to be used when the diagram is from the side, while others are designed to be used from above. Be sure to select the most appropriate block. Certain blocks (such as grass-side and stone-slab) indicate a side orientation without having to specify it. Likewise, grass and stone-slab-top indicate a top-down orientation.

Templates used in the diagram and a brief description of what they do:
 * Template:FakeImage Puts the entire thing in an image box. Optional, but makes it look clean.
 * Template:BlockGrid Sets up the grid.
 * Template:BlockSprite A list of the of names of sprites you'll be using.
 * Template:Sprite (Not entirely sure) A link embedded in the sprite.

Other Examples
Without FakeImage, a BlockGrid diagram breaks the flow of the page. I am not aware of a way for the text to wrap beside the image (ie. there is a large blank space that won't get filled with text). I can't think of an instance where omitting FakeImage would be preferable.

This example was more of an experiment than anything else. Since FakeImage uses CSS code (consult [w3schools.com]) you can do some pretty creative stuff with it. You'll see there is a FakeImage and a .png. Each of these creates one of the captions. I can't forsee any reason this will be needed.