User:Munin295/Schematic

The SchematicGrid template is intended to be able to show not only where blocks are placed but all of their unique properties. This will allow wiki users to create redstone schematics without special software and permit structure schematics which are precise and compact.

Unique qualities SchematicGrid must be able to illustrate:
 * Block Type (stone, dirt, slab, etc.)
 * Material (oak wood, spruce wood, birch wood, jungle wood, etc.)
 * Orientation (relative to schematic: left, right, top, bottom, up, down, etc.)
 * Configuration (how the block configures itself depending on its neighbors -- e.g., redstone wire, fences, glass panes, iron bars, cobblestone walls, etc.)
 * Power (for redstone components: on, off)

Some other templates which are similar but don't satisfy the desired criteria:
 * Template:Grid: Too big, can't show orientation.
 * Template:BlockGrid: Can't show material or orientation.
 * Template:RedstoneCircuitGrid: Too limited in scope.

Organization
The SchematicGrid template uses two 32x32 sprite sheets (512x512 pixels each) to build a grid of images.


 * CONSIDER: Move sideview and symbol sprites to a third sprite sheet to leave as much room as possible for future expansion of block variations.

The SchematicGrid template first checks to see if the identifier is valid for BlockSchematicSprite: it doesn't match the default value of 1024 (i.e., 32 * 32, the last position) which is the position value for "unknown". If it is valid, then it creates a sprite image from BlockSchematicSprite, otherwise from StackedSchematicSprite.

Sprite Sheets

 * BlockSchematicCSS.png: all possible blocks, in all (visually significant) block data value and neighbor variations, uniquely defined in schematic form.
 * StackedSchematicCSS.png: Specialty images for creating double-layer circuit schematics.

Templates
The list of templates that would need to be created:


 * Template:SchematicGrid: Creates a table of sprites.
 * Template:SchematicGrid/doc
 * Template:BlockSchematicSprite: Creates a sprite from BlockSchematicCSS.png using the Sprite/Block template.
 * Template:BlockSchematicSprite/pos
 * Template:BlockSchematicSprite/doc
 * Template:StackedSchematicSprite: Creates a sprite from StackedSchematicCSS.png using the Sprite/Block template.
 * Template:StackedSchematicSprite/pos
 * Template:StackedSchematicSprite/doc

Sprite Sheets
Some blocks on the sprite sheets will be their Minecraft texture, but many will be in symbolic form (especially blocks that might appear in a stacked schematic and thus need to work with symbols for blocks above and below).


 * Identifiers
 * Identifiers are lowercase. Spaces that are a part of a block's Minecraft name are indicated with underscores. Other variations are separated by dashes. Directions (relative to the schematic, not to terrain) are indicated by:  (north),   (south),   (east),   (west),   (up), and   (down).
 * For example,  identifies an upside-down oak wood slab, while   identifies a right-side-up oak wood slab.


 * Notation
 * This page uses a simple notation to represent block variations in a compact form. The actual identifiers used in a /pos template won't use this notation -- they'll be written out completely.
 * D = Direction (defaults to ' ')
 * P = Power (defaults to ' ')
 * T = Type (possible values depend on block, unlisted if obvious)
 * For example,  expands to.

Block IDs (8 x32)
256 spots reserved for default block sprites.

Technically, block IDs can go up to 4096, but we're only up to 145 as of v1.4.2, so it should be a while before we break 256 (hopefully).

Block variations (9-1/2 x32)
Sprites for block schematics:


 * Wood (2 x32)
 * (+11)
 * (+3)
 * (+3)
 * (+3)
 * (+8)
 * (+32)


 * Rock (1-3/4 x32)
 * (+3)
 * (+2)
 * (+9)
 * (+39)


 * Liquid (1 x32)
 * (+16)
 * (+16)


 * Wool (1/2 x32)
 * (+15)


 * Neighbors (3 x32)
 * (+15)
 * (+15)
 * (+14)
 * (+14)
 * (+31)


 * Decorations (3/4 x32)
 * (+4)
 * (+4)
 * (+3)
 * (+4)
 * (+4)
 * (+0)
 * (+1)


 * Plants (1/2 x32)
 * (+2)
 * (+3)
 * (+11)

Circuit variations (7-3/4 x32)
Sprites for single-layer circuit schematics:


 * Power sources (1 x32)
 * (+9)
 * (+7)
 * (+5)
 * (+3)
 * (+2)
 * (+1)


 * Power transmission (2-3/4 x32)
 * (+23)
 * (+63)


 * Powered mechanisms (4 x32)
 * (+31)
 * (+15)
 * (+3)
 * (+11)
 * (+1)
 * Pistons (1 x32)
 * (+11)
 * (+11)
 * (+11)
 * Rails (1 x32)
 * (+9)
 * (+11)
 * (+11)

Sideview circuits (1-1/2 x32)
Sprites for sideview schematics:


 * Blocks
 * (2)


 * Power sources
 * (2)
 * (2)
 * (1)
 * (2)


 * Power transmission
 * (2)
 * (16)


 * Powered mechanisms
 * (4)
 * (2)
 * (8)
 * (2)
 * (0) 

Add if there's available room:


 * (1)
 * (3)
 * (1)
 * (1)
 * (3)

Symbols (1-3/4 x32)

 * (1)  (crossed grid axes)
 * (1)  (vertical axis)
 * (26)
 * (10)
 * Input symbols
 * (6)
 * (2)
 * Output symbols
 * (2)
 * (1)
 * (1)

StackedSchematicSprite (32x32)
Can only show some of the most common stackings. Circuits that can't be represented with these sprites will require separate schematics for each layer.

Piston-over-pistons are not uncommon, but would require almost 36x36 sprites just for them (!) and would be visually very complicated to represent.

Sprites for double-layer circuit schematics:


 * (1)

Circuit-over-block (8 x32, -3)

 * (2) ,


 * Power sources (1 x32, +1)
 * (10)
 * (8)
 * (6)
 * (2)
 * (4)
 * (3)


 * Power transmission (3 x32, -8)
 * (24)
 * (64)


 * Powered mechanisms (4 x32, +2)
 * (32)
 * (16)
 * (4)
 * (6)
 * (2)
 * Pistons
 * (12)
 * (12)
 * (12)
 * Rails
 * (10)
 * (12)
 * (12)

Block-over-circuit (8 x32, -3)

 * (2) ,
 * etc.

Circuit-over-slab (8 x32, -3)

 * (2) ,
 * etc.

Slab-over-circuit (8 x32, -3)

 * (2) ,
 * etc.

Z-index
This should be an image of redstone imposed on a block of gold:   

Negative z-indexes don't seem to work... maybe that pushes them behind another page element? So just keep z-indexes 0 or higher.

Caption
   caption

Building an image from smaller pieces
Many Minecraft blocks are textured using textures from other blocks. If we can display sprites of complicated blocks (fences, walls, stairs, slabs, etc.) by building them from primary textures, we can save a lot of space on a sprite sheet, at the cost of some extra server computations.

This should be a 64x64 cobblestone wall corner, built using pieces of the cobblestone sprite from BlockCSS.png:       

This should be a 64x64 fence corner, built using pieces of the oak wood planks sprite from BlockCSS.png:    <span style="position: absolute; height: 32px; width: 8px; overflow: hidden; display: inline-block; top: 32px; left: 28px;"> <span style="position: absolute; height: 1024px; width: 1536px; top: -32px; left: -284px; z-index:2; background-color:transparent"> <span style="position: absolute; height: 16px; width: 16px; overflow: hidden; display: inline-block; top: 24px; left: 24px;"> <span style="position: absolute; height: 1024px; width: 1536px; top: -24px; left: -280px; z-index:3; background-color:transparent">


 * Pixel precision is excellent (in my browser, at least).

Transformation Tests
<span style="position: relative; height: 16px; width: 16px; overflow: hidden; display: inline-block; vertical-align: text-bottom;"> <span style="position: absolute; height: 256px; width: 384px; top: -32px; left: -288px; z-index:0; background-color:transparent"> This should be a repeater facing to the left.

Rotations
<span style="position: relative; height: 16px; width: 16px; overflow: hidden; display: inline-block; vertical-align: text-bottom; transform:rotate(90deg); -ms-transform:rotate(90deg); -moz-transform:rotate(90deg); -webkit-transform:rotate(90deg); -o-transform:rotate(90deg);"> <span style="position: absolute; height: 256px; width: 384px; top: -32px; left: -288px; z-index:0; background-color:transparent"> And this should be a repeater rotated 90 degrees:.
 * The  function seems to rotate clock-wise, which is mathematically non-intuitive.

Reflections
<span style="position: relative; height: 16px; width: 16px; overflow: hidden; display: inline-block; vertical-align: text-bottom; transform:matrix(-1,0,0,1,0,0); -ms-transform:matrix(-1,0,0,1,0,0); -moz-transform:matrix(-1,0,0,1,0,0); -webkit-transform:matrix(-1,0,0,1,0,0); -o-transform:matrix(-1,0,0,1,0,0);"> <span style="position: absolute; height: 256px; width: 384px; top: -32px; left: -288px; z-index:0; background-color:transparent"> And this should be a repeater reflected around the Y-axis (i.e., flipped horizontally): ).

Multiple Transformations
<span style="position: relative; height: 16px; width: 16px; overflow: hidden; display: inline-block; vertical-align: text-bottom; transform:rotate(90deg) matrix(-1,0,0,1,0,0); -ms-transform:rotate(90deg) matrix(-1,0,0,1,0,0); -moz-transform:rotate(90deg) matrix(-1,0,0,1,0,0); -webkit-transform:rotate(90deg) matrix(-1,0,0,1,0,0); -o-transform:rotate(90deg) matrix(-1,0,0,1,0,0);"> <span style="position: absolute; height: 256px; width: 384px; top: -32px; left: -288px; z-index:0; background-color:transparent"> This should be a repeater rotated then reflected:.

<span style="position: relative; height: 16px; width: 16px; overflow: hidden; display: inline-block; vertical-align: text-bottom; transform:matrix(-1,0,0,1,0,0) rotate(90deg); -ms-transform:matrix(-1,0,0,1,0,0) rotate(90deg); -moz-transform:matrix(-1,0,0,1,0,0) rotate(90deg); -webkit-transform:matrix(-1,0,0,1,0,0) rotate(90deg); -o-transform:matrix(-1,0,0,1,0,0) rotate(90deg);"> <span style="position: absolute; height: 256px; width: 384px; top: -32px; left: -288px; z-index:0; background-color:transparent"> And this should be a repeater reflected then rotated:.


 * Nope. The  property seems to apply functions in reverse order.

Let's try doing transformations as a single matrix:

<span style="position: relative; height: 16px; width: 16px; overflow: hidden; display: inline-block; vertical-align: text-bottom;"> <span style="position: absolute; height: 256px; width: 384px; top: -32px; left: -288px; z-index:0; background-color:transparent"> Repeater.

<span style="position: relative; height: 16px; width: 16px; overflow: hidden; display: inline-block; vertical-align: text-bottom; transform:matrix(0,-1,1,0,0,0); -ms-transform:matrix(0,-1,1,0,0,0); -moz-transform:matrix(0,-1,1,0,0,0); -webkit-transform:matrix(0,-1,1,0,0,0); -o-transform:matrix(0,-1,1,0,0,0);"> <span style="position: absolute; height: 256px; width: 384px; top: -32px; left: -288px; z-index:0; background-color:transparent"> Repeater rotated 90 degrees:.

<span style="position: relative; height: 16px; width: 16px; overflow: hidden; display: inline-block; vertical-align: text-bottom; transform:matrix(-1,0,0,-1,0,0); -ms-transform:matrix(-1,0,0,-1,0,0); -moz-transform:matrix(-1,0,0,-1,0,0); -webkit-transform:matrix(-1,0,0,-1,0,0); -o-transform:matrix(-1,0,0,-1,0,0);"> <span style="position: absolute; height: 256px; width: 384px; top: -32px; left: -288px; z-index:0; background-color:transparent"> Repeater rotated 180 degrees:.

<span style="position: relative; height: 16px; width: 16px; overflow: hidden; display: inline-block; vertical-align: text-bottom; transform:matrix(0,1,-1,0,0,0); -ms-transform:matrix(0,1,-1,0,0,0); -moz-transform:matrix(0,1,-1,0,0,0); -webkit-transform:matrix(0,1,-1,0,0,0); -o-transform:matrix(0,1,-1,0,0,0);"> <span style="position: absolute; height: 256px; width: 384px; top: -32px; left: -288px; z-index:0; background-color:transparent"> Repeater rotated 270 degrees:.


 * Okay, doing rotations by the  function seems to do rotations the mathematically expected direction: counter-clockwise.

<span style="position: relative; height: 16px; width: 16px; overflow: hidden; display: inline-block; vertical-align: text-bottom; transform:matrix(-1,0,0,1,0,0); -ms-transform:matrix(-1,0,0,1,0,0); -moz-transform:matrix(-1,0,0,1,0,0); -webkit-transform:matrix(-1,0,0,1,0,0); -o-transform:matrix(-1,0,0,1,0,0);"> <span style="position: absolute; height: 256px; width: 384px; top: -32px; left: -288px; z-index:0; background-color:transparent"> Repeater reflected around the Y-axis (i.e., flipped horizontally): ).

<span style="position: relative; height: 16px; width: 16px; overflow: hidden; display: inline-block; vertical-align: text-bottom; transform:matrix(0,1,1,0,0,0); -ms-transform:matrix(0,1,1,0,0,0); -moz-transform:matrix(0,1,1,0,0,0); -webkit-transform:matrix(0,1,1,0,0,0); -o-transform:matrix(0,1,1,0,0,0);"> <span style="position: absolute; height: 256px; width: 384px; top: -32px; left: -288px; z-index:0; background-color:transparent"> Repeater reflected around the Y-axis then rotated 90 degrees:  (i.e., ).

<span style="position: relative; height: 16px; width: 16px; overflow: hidden; display: inline-block; vertical-align: text-bottom; transform:matrix(1,0,0,-1,0,0); -ms-transform:matrix(1,0,0,-1,0,0); -moz-transform:matrix(1,0,0,-1,0,0); -webkit-transform:matrix(1,0,0,-1,0,0); -o-transform:matrix(1,0,0,-1,0,0);"> <span style="position: absolute; height: 256px; width: 384px; top: -32px; left: -288px; z-index:0; background-color:transparent"> Repeater reflected around the Y-axis then rotated 180 degrees:.

<span style="position: relative; height: 16px; width: 16px; overflow: hidden; display: inline-block; vertical-align: text-bottom; transform:matrix(0,-1,-1,0,0,0); -ms-transform:matrix(0,-1,-1,0,0,0); -moz-transform:matrix(0,-1,-1,0,0,0); -webkit-transform:matrix(0,-1,-1,0,0,0); -o-transform:matrix(0,-1,-1,0,0,0);"> <span style="position: absolute; height: 256px; width: 384px; top: -32px; left: -288px; z-index:0; background-color:transparent"> Repeater reflected around the Y-axis then rotated 270 degrees:.

CSS Classes
So, these would be some useful CSS classes to have on the wiki:


 * .rotate90, .transform90
 * transform:matrix(0,-1,1,0,0,0);-ms-transform:matrix(0,-1,1,0,0,0);-moz-transform:matrix(0,-1,1,0,0,0);-webkit-transform:matrix(0,-1,1,0,0,0);-o-transform:matrix(0,-1,1,0,0,0)


 * .rotate180, .transform180
 * transform:matrix(-1,0,0,-1,0,0);-ms-transform:matrix(-1,0,0,-1,0,0);-moz-transform:matrix(-1,0,0,-1,0,0);-webkit-transform:matrix(-1,0,0,-1,0,0);-o-transform:matrix(-1,0,0,-1,0,0)


 * .rotate270, .transform270
 * transform:matrix(0,1,-1,0,0,0);-ms-transform:matrix(0,1,-1,0,0,0);-moz-transform:matrix(0,1,-1,0,0,0);-webkit-transform:matrix(0,1,-1,0,0,0);-o-transform:matrix(0,1,-1,0,0,0)


 * .reflectH, .transformH
 * transform:matrix(-1,0,0,1,0,0);-ms-transform:matrix(-1,0,0,1,0,0);-moz-transform:matrix(-1,0,0,1,0,0);-webkit-transform:matrix(-1,0,0,1,0,0);-o-transform:matrix(-1,0,0,1,0,0)


 * .transform90H
 * transform:matrix(0,1,1,0,0,0);-ms-transform:matrix(0,1,1,0,0,0);-moz-transform:matrix(0,1,1,0,0,0);-webkit-transform:matrix(0,1,1,0,0,0);-o-transform:matrix(0,1,1,0,0,0)


 * .transform180H
 * transform:matrix(1,0,0,-1,0,0);-ms-transform:matrix(1,0,0,-1,0,0);-moz-transform:matrix(1,0,0,-1,0,0);-webkit-transform:matrix(1,0,0,-1,0,0);-o-transform:matrix(1,0,0,-1,0,0)


 * .transform270H
 * transform:matrix(0,-1,-1,0,0,0);-ms-transform:matrix(0,-1,-1,0,0,0);-moz-transform:matrix(0,-1,-1,0,0,0);-webkit-transform:matrix(0,-1,-1,0,0,0);-o-transform:matrix(0,-1,-1,0,0,0)