scene

Module(s): vncanvas-base, vncanvas-bgnd
Description: Display a background image using the given parameters.

Syntax

scene, {param}

Displays a given image as background.
Parameters are given as {param:value, param:value, ...}

Parameter Summary

Parameter	Attributes and Description
src:"path_to_image_file" src:"valid_HTML_color"	Image or color to display in background. For best effects, use images that are 10% wider and 5% higher than the viewport. Valid HTML colors may be specified as "string" (e.g. "red"), "#RRGGBB", "rgb(rr,gg,bb)" or "rgba(rr,gg,bb,aa)" Also accepts a user variable as path to image file.
effect:"effect_name [args]"	Optional Effect when showing or hiding background. Note, unlike actors, "effect" is not persistent, meaning if effect is not specified, the default or "none" is used. Supported effects: - "none" (default) - "dissolve" - "fade" - "ghost" (a semi-transparent graphic) - "left" \| "right" \| "top" \| "bottom" (slides the background graphic from the specified direction) - "scale scale_value" (scales the background graphic relative to base size) - "rotate rotate_value" (rotates the background graphic in degrees clockwise relative to previous orientation) - "translate x_value y_value" (translates the background graphic according to the given values relative to current position) The 'scale', 'rotate' and 'translate' arguments also accept a user variable id. A 'nowait' argument, e.g. "fade nowait", can now be added to continue without waiting for effects to complete.
filter:"filter_name [args]"	Optional NEW! Filter background images using image manipilation. Supported filters: - "luminance" - "grayscale" - "sepia" - "brightness" - "threshold" - "invert" - "saturate" - "horizontalFlip" - "verticalFlip" - "sharpen" - "blur" - "laplace" - "gaussianBlur" Note: Image manipulation is dependent on browser. Some browsers like Firefox allows local image manipulation. Some browsers like Chrome requires the image be hosted on a webserver, though a local webserver will do. For large images, filtering may be CPU intensive. So expect lags or delays when using filters.
time:number	Optional Duration of effect, in seconds. The default transition duration is set in configuration file.
objects:[param]	Optional Objects, e.g. crowd or props, to be displayed with the background. Parameters are given as ["image1", x1, y1, "image2", x2, y2, ... ] Also accepts a user variable as the image files. Support for animated objects. Parameters should be given as ["image1", x1, y1, frames1, fps1, "image2", x2, y2, frames2, fps2...] where frames is the number of frames/sprites in a horizontal filmstrip defined by image and fps is the animation frames per second. See also Sprites demo.

Example

A series of background images will be displayed as given below.

  
chapter = [

	...
	/* display image1.jpg with default effect */
	scene, {src:"images/image1.jpg"},
	...
	/* display image2.jpg with fade effect */
	scene, {src:"images/image2.jpg", effect:"fade"},
	...
	/* display image3.jpg with dissolve effect and duration of 2 seconds */
	scene, {src:"images/image3.jpg", effect:"dissolve", time:2},
	...
	/* reuse image1 with additional object at a given offset from the top-left of image1*/
	scene, {src:"images/image1.jpg", objects:["images/crowd.png", 100, 50]},
	...
	/* add an animated object on the background 
	   object is a 16-frame filmstrip running continuously at 15 fps*/
	scene, {src:"images/image1.jpg", objects:["images/clouds.png", 20, 20, 16, 15]},
	
];