Demo of a "Background Controller"

Demos and Tutorials
#1

Hi

I’ve been experimenting with Wick scripting and came up with a thing I’ve called a BackgroundController.

This BackgroundController allows you to

  • horizontally scroll backgrounds to the left or right
  • scroll backgrounds at different speeds
  • switch between backgrounds during animation

A ‘background’ in this context is an image converted to clip. It needs to be named so you can reference it in the code.

The image can be any size but don’t make it too narrow because the code will have to make many clones to fill the canvas.

You can change the width of the images to make them more manageable in the editor, the
controller will reset the width to 1. It will not change the height and vertical positioning.
For the best visual effect make sure the left and right of the image match.

The code

The backgroundController can be any clip. It’s just a container for the code.
Place it outside the canvas.

In its default script you can set the (Start)speed and maximum speed in these lines…

this.speed = -4;
this.maxSpeed = 20;

Scroll down and see how the backgounds are defined.

this.backgrounds = {
    "street" : gb_village,
    "temple" : gb_temple
}

backgrounds is an object with key:value pairs, the key is used to address the background in code. The value is the clip used as background.

In the keypressed script it is demoed how to change backgrounds.

e.g.

this.setBackground("temple");

In the keydown script it is demoed how to change speed and direction.

You can use multiple background controllers to control multiple sets of backgrounds, for example to create a parallax effect. Performance might become an issue then though…

Here’s the demo…

Hope you’ll find it useful…

bgctrl-demo.wick (53.2 KB)

  • Use 1 and 2 keys to switch backgrounds
  • Use left and right to change direction and speed
  • Use up and down for… up and down.
3 Likes