Skip to content

exercise_4

bjornstahl edited this page Oct 14, 2021 · 3 revisions

Exercise 4

The fourth exercise set goes into the subject of hierarchies.

A video object is typically not alone in this world, it is connected to other objects and its behavior and presentation depends on the properties of such connections.

Recall the transformations from the previous exercise and how you specified coordinates, opacity and similar properties through transformations. These are actually expressed relative the properties of the objects parent, and possibly modified with a mask.

Secretly, all such properties are derived from a master object, WORLDID. Moving or transforming this object will change the properties of all others.

Hierarchical coordinate- and transformation systems are particularly useful and important when it comes to user-interfaces and advanced animations.

1 - Moving your World

Start by creating two boxes, a red one (rbox) and a blue (bbox), both 200x200. The first one should be positioned at 100, 100 and the other one should be positioned at 10x10 and both at 0.5 opacity (blend_image).

Experiment with applying transformations to WORLDID and see how the two boxes are affected.

2 - Finding Friends

Delete the Transformations used for WORLDID. Then try link_image linking rbox to bbox and then the other way around. Try adding transformations to WORLDID and to one of the two linked objects.

Try linking rbox to itself, what happened?

Note 1: Rotate seems to work differently, try applying image_origo_offset.

Note 2: There is no limit to how large hierarchies you can build, but the cost for figuring out the final coordinates where to draw things become more and more expensive.

3 - Where did you go?

Start with only the rbox and the bbox remaining.

Create an additional box, a green one (gbox) and set them all to full opacity. Link rbox to bbox and link bbox to gbox.

Set a transformation to gbox that moves it to the middle of the screen and rotate 45 degrees in 200 ticks. Also set expire_image on gbox at 180 ticks.

What happened?

4 - Masquerade

Keep the example from the third step, but change 1.0 opacity to a blend transform towards 1.0 in 100 ticks and add a 45 degree rotate to rbox in 200 ticks..

Test using image_mask_clear with MASK_LIVING as the second argument, and alternate between setting the property on rbox, bbox and gbox.

Clear MASK_ORIENTATION and MASK_OPACITY on _rbox.

Note 3: There are several other masks that can be toggled on and off, e.g. (orientation, frameset, mapping and unpickable) -- we will return to those in due time.

5 - Who is your Daddy?

Set a string tag for each object (use image_tracetag to set and get a tag string), then write one function that takes a base object and prints out all of its children, and one function that takes a base object and prints out its direct (only parents) family tree.

Test the parent traversal on the rbox and the children one on gbox.

Hint 1: Look into image_parent and image_children.

6 - Meet Clippy

The sixth exercise is about 'clipping', where the shape of one object is used to define the drawing area of another.

Take the hierarchy from step four, remove the animation time and and use image_clip_on on rbox, compare CLIP_ON and CLIP_SHALLOW as the second argument.

Note 4: Depending on the state of the object and the clipping method, the clipping will either be performed using the stencil buffer or by manipulating texture coordinates. The latter is much cheaper but somewhat limited.

7 - Anchoring

The seventh and final exercise covers link anchors. The challenge is to use the link_image optional arguments to further control child coordinate system.

Without using move_image or nudge_image:

Create a green 100x100 square that is centered on the screen. Animate it to resize to 200x200 over 100 ticks. Create four 10x10 red squares that stick to each of the four corners of the green square.

Hint 1: WORLDID does not work as a ref for center_image, but think of what null_surface can be used for.

Clone this wiki locally