Changing the Graphics

It is recommended that you read this entire page before creating new graphics, as there are a number of constraints that must be followed.

The Grid System

An important concept to understand before creating graphics is the grid system. The FlowEngine tracks and updates water movement data at discreet grid positions. As such it is critical that the corresponding graphics align with the grid. The SimulationEngine script on the SimulationEngine prefab has a property called Grid Scale. This is the width/height of one grid space in world units. When mapping from the discreet grid spaces to the continuous Vector2, the whole grid space value is at the bottom left corner of the space. As such, graphics must always set their Pivot to Bottom Left.

Rendering Considerations

When rendering water, it will render over all non-transparent pixels, except for black pixels. By default water is rendered completely opaque, thus covering any non-black portion of your graphic. Below is an example of how the water is rendered over the graphic (where the checkerboard pattern represents the transparent background).

 
Example Pipe Graphic
Example Pipe Graphic
 
Where the water renders
Where the water renders

If you want to still see some of your graphic under the water, you can adjust the Maximum Water Opacity property on the FlowEngine.  At the default value of 1, the water is fully opaque.  Lowering it increases the transparency, making your graphic more visible.

Also note that the pipe graphics must have a lower Order in Layer than the FilledMarker and WaterMarker prefabs, which have a default Order in Layer of 50.

Changing a Pipe Graphic

Each pipe segment takes up exactly one grid space.  As such, your replacement sprites should be squares with a world dimension equal to the Grid Scale.  In the demo the Grid Scale is 0.64, therefore the pipe sprites must all be 0.64x.64 in the world.  Since the PNGs are 512x512 pixels, I set the Pixels Per Unit to be 800 because 512/800 = 0.64.

Changing a Holding Tank Graphic

The HoldingTank4x6 prefab included in the demo takes up a rectangular area 4 spaces wide and 6 spaces tall, for a total of 24 spaces.  Thus in the demo example where the Grid Scale is 0.64, the graphic is 4 x 0.64 = 2.56 units wide and 6 x 0.64 = 3.86 units tall.

If you want a different sized holding tank, start by simply copying the HoldingTank4x6 prefab, then changing the Width and Height to the desired size.  You'll then need to create a new graphic that follows the formulas below.


  • World units of sprite width = Width x Grid Scale
  • World units of sprite height = Height x Grid Scale