SlickBoard | CSS/XML Timeline (new) | XML/SWF Charts | Timeline Eons

 < previousnext > 

 

Constrain

 

<constrain x='number'  
           y='number' 
           width='number' 
           height='number'
           reflect='number'
           absorb='number'
           mode='string'
           target='string'
           />
      


Description

Constrain can be added to an object to constrain its movement to a specified rectangle. This can be used to prevent an object from leaving an area, determine how it bounces off walls, and to limit its movement to one direction (vertical or horizontal):

 

The constrain attributes are:

  • x: The horizontal position of the constraining rectangle's upper left corner relative to the upper left corner of the background (0, 0). The default is zero.

  • y: The vertical position of the constraining rectangle's upper left corner relative to the upper left corner of the background (0, 0). The default is zero.

  • width: The constraining rectangle's width. The default is the board's width. If the object is wider than the constraining rectangle, then it can move only vertically.

  • height: The constraining rectangle's height. The default is the board's height. If the object is taller than the constraining rectangle, then it can move only horizontally.

  • reflect: The way the object bounces off the constraining walls. Valid values are:

    • 0: Stop.
    • 1: Slide along the wall.
    • 2: Reflect normally (default).
    • 3: Go back on the same path.


  • absorb: The amount of speed absorbed by the constraining walls. Valid values range from 0 (maintain the speed) to 1 (absorb all the speed and stop the object). The default is 0.

  • mode: The method to use to calculate the object's bounds, which determines when exactly to bounce the object off the constraining walls. Valid values are:

    • border: The object's bounds are calculated by taking into account both the shapes and their borders (line_thickness). This is the default mode.

    • fill: The object's bounds are calculated by taking into account only the shapes (without line_thickness).

    • bitmap_1: This is similar to the border mode, but excludes transparent, hidden, and masked parts and includes filters (shadow, blur, etc.). Bitmap modes affect the performance, but bitmap_1 calculates the object's bounds only once to optimize performance. Use this bitmap mode when the object has no moving parts.

    • bitmap_2: This is similar to bitmap_1, but it recalculates the object's bounds whenever the performance allows it. Use this if the object has moving parts, but maintaining good performance is also necessary.

    • bitmap_3: This is similar to bitmap_1 and bitmap_2, but it recalculates the object's bounds at every frame. Use this if the object has moving parts and precise constraining is necessary. This mode affects performance dramatically and should only be used in simple boards and only when necessary.


  • target: If this attribute is omitted, then the above x, y, width, and height attributes define a fixed constraining rectangle. If this attribute is not omitted, then it determines the ID of an object to use as the constraining rectangle instead. This is useful when the constrained object is part of a draggable element and the constraining rectangle must also be dragged along.

If an object is not constrained as unexpected, this is likely because it has hidden and transparent parts. To exclude them, it is necessary to mask them and to use a bitmap constraining mode.

 


Event Action

When a constrained object hits a wall, actions enclosed by the same object with the event='wall_hit' are automatically executed. This can be used to play sounds or execute other actions when constrained objects hit walls:

<object>

   <circle x='240' y='175' radius='35' state='hit' />
   <constrain x='50' y='100' width='380' height='150' />   

   <action>
      <item type='drag' />
      <item type='sound_play' target='woosh' event='wall_hit' />   
   </action>
   
</object>

 

Example

<slickboard>
   
   <!-- 3 gray, background rectangles -->
   <rect x='10' y='10' width='230' height='280' fill_color='555555' shadow='hole' /> 
   <rect x='350' y='10' width='50' height='150' fill_color='555555' shadow='hole' /> 
   <rect x='300' y='200' width='150' height='50' fill_color='555555' shadow='hole' /> 
   
   
   <!-- blue square reflects normally and plays sound when it hits its walls -->
   <object>
      <rect x='50' y='25' fill_color='8888ff' shadow='low' state='hit' /> 
      <constrain x='10' y='10' width='230' height='280' />
      <action>
         <item type='drag' />
         <item type='sound_play' target='hit' event='wall_hit' />
      </action>
   </object>
   
   <!-- red square reflects back on the same path -->
   <object>
      <rect x='50' y='175' fill_color='ff4400' shadow='low' state='hit' /> 
      <constrain x='10' y='10' width='230' height='280' reflect='3' />
      <action><item type='drag' /></action>
   </object>      
   
   <!-- green square wider than its constraining rectangle moves only vertically -->
   <object>
      <rect x='325' y='50' fill_color='88ff00' shadow='low' state='hit' /> 
      <constrain x='350' y='10' width='50' height='150' reflect='0' />
      <action><item type='drag' /></action>
   </object> 

   <!-- white square taller than its constraining rectangle moves only horizontally -->   
   <object>
      <rect x='325' y='175' fill_color='ffffff' shadow='low' state='hit' /> 
      <constrain x='300' y='200' width='150' height='50' reflect='0' />
      <action><item type='drag' /></action>
   </object> 
 
 
   <filter>
      <shadow id='low' distance='1' alpha='.5' blurX='5' blurY='5' />
      <shadow id='hole' alpha='.5' blurX='10' blurY='10' inner='true' />
   </filter>
   
   <sound>
      <clip id='hit' url="sounds/hit.mp3" />
   </sound>
   
</slickboard>

 


<slickboard>
   
   <!-- to test this example: -->
   <!-- 1) throw the red square to bounce it off the wall -->
   <!-- 2) drag the gray box to move it together with the read square and its constraining object -->
   <!-- 3) throw the red square again to verify that the costraining rectangle was also dragged -->
   
   <!-- gray, draggable box, which drags the red square and its constraining object along -->
   <object>
      <rect x='20' y='20' width='230' height='260' fill_color='555555' shadow='hole' state='hit' /> 
      <action><item type='drag' /></action>
  
      <!-- red square contrained by the below object -->
      <object>
         <rect x='50' y='150' fill_color='ff4400' shadow='low' state='hit' /> 
         <constrain target='constraining_object' reflect='2' />
         <action><item type='drag' /></action>
      </object>
   
      <!-- a hidden contraining object -->
      <object id='constraining_object' hide='true'>
         <rect x='20' y='20' width='230' height='260' /> 
      </object>
      
   </object>      
   
  
   <filter>
      <shadow id='low' distance='1' alpha='.5' blurX='5' blurY='5' />
      <shadow id='hole' alpha='.5' blurX='10' blurY='10' inner='true' />
   </filter>
   
</slickboard>

 

 < previousnext > 


Copyright © 2010-2017, maani.us