User:Munin295/Schematic

The Schematic 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 Schematic 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: Can't show orientation.
 * Template:BlockGrid: Can't show material or orientation.
 * Template:RedstoneCircuitGrid: Too limited in scope.

File:SchematicSprite.png
A 512px-wide sprite sheet.



Template:SchematicSprite
The SchematicSprite template creates a square  that contains one or more  s each with a rectangular piece of the sprite sheet positioned in it.

Usage
:   identifier : [+]+ : , , , , , , , :       float (0.0..1.0) :     90|180|270|H|90H|180H|270H :          Npx :       integer (1..)


 * Either a sprite identifier or a sprite attributes list.
 * Either a sprite identifier or a sprite attributes list.


 * A sprite identifier which will be expanded into a  - a simple cobblestone sprite
 * - a powered redstone repeater, facing north, set to a 4-tick delay
 * - a powered redstone repeater, facing north, set to a 4-tick delay


 * One or more sprite attribute specifications, separated by plus signs.
 * One or more sprite attribute specifications, separated by plus signs.


 * A list of attributes which define a rectangular slice of the sprite sheet, how it should be positioned in the sprite's container frame, and what transformations should be performed on the container frame.
 * A list of attributes which define a rectangular slice of the sprite sheet, how it should be positioned in the sprite's container frame, and what transformations should be performed on the container frame.

Template:Schematic
The Schematic template creates a table of SchematicSprites.

Template:SchematicGrid
The SchematicGrid template creates a table of SchematicSprites using user-defined identifiers.

Caption
   caption

Z-index
This should be an image of redstone imposed on a block of gold:  <span style="position: absolute; height: 256px; width: 384px; top: -16px; left: -112px; z-index:0; background-color:transparent"> <span style="position: absolute; height: 256px; width: 384px; top: -160px; left: -64px; z-index:1; background-color:transparent">

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

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, repeaters, 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: <span style="position: relative; height:64px; width:64px; overflow: hidden; display: inline-block; vertical-align: text-bottom; background: white;border:1px solid blue;"> <span style="position: absolute; height: 32px; width: 24px; overflow: hidden; display: inline-block; top: 0px; left: 20px;"> <span style="position: absolute; height: 1024px; width: 1536px; top: -64px; left: -20px; z-index:1; background-color:transparent"> <span style="position: absolute; height: 24px; width: 32px; overflow: hidden; display: inline-block; top: 20px; left: 32px;"> <span style="position: absolute; height: 1024px; width: 1536px; top: -84px; left: -32px; z-index:2; background-color:transparent"> <span style="position: absolute; height: 32px; width: 32px; overflow: hidden; display: inline-block; top: 16px; left: 16px;"> <span style="position: absolute; height: 1024px; width: 1536px; top: -80px; left: -16px; z-index:3; background-color:transparent">

This should be a 64x64 fence corner, built using pieces of the oak wood planks sprite from BlockCSS.png: <span style="position: relative; height:64px; width:64px; overflow: hidden; display: inline-block; vertical-align: text-bottom; background: white;border:1px solid blue;"> <span style="position: absolute; height: 8px; width: 32px; overflow: hidden; display: inline-block; top: 28px; left: 0px;"> <span style="position: absolute; height: 1024px; width: 1536px; top: -28px; left: -256px; z-index:1; background-color:transparent"> <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 seems excellent (in my browser, at least).

Text on images
This should be a schematic of an AND Gate, built from pieces of BlockCSS.png:


 * 16px is pretty small (32px should probably be the default) but otherwise this seems to be working.
 * I'm using  to align the text vertically -- I'm not sure if that's the best method…

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, .reflectV, .transformV
 * 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)