bittyBIG Dynamic Camera System Documentation

Dynamic Camera System

The bittyBIG Dynamic Camera System gives Stencyl projects a more flexible camera and output pipeline. It supports zoom, tweening, split-screen, picture-in-picture, viewport transforms, camera rotation, screenshake, and pixel-perfect display behavior.

Project Setup Quick Start Guide Layout Editor Block Glossary FAQs Release Notes Support

Project Setup in Stencyl

1. Install and enable the extension

Open Settings → Extensions.
Install the bittyBIG Dynamic Camera System.
Enable it for your project.

2. Set your normal Stencyl Screen Size

Game Settings → Settings → Display

Set Screen Size to the base game/output size you want to work with.

That’s it!

Quick Start Guide

Create a camera, then choose how you want it positioned.

Create Camera ID 0

Moving Camera

Follow Actor player with Camera ID 0

Static Camera

Set Camera Center to X 0 Y 0 for Camera ID 0

Choose a common layout or adjust the values yourself, preview the result, then generate setup code for your project. Viewports are placed inside the Game Area, not directly on the Screen.

Game Area X Game Area Y Game Area Width Game Area Height Viewports

Screen Width Screen Height

Common Setups

Viewport Rects

Suggested Pixel Perfect Camera Sizes

These are clean camera sizes based on your Game Area size. 1x is the full Game Area size.

Generated Setup Code

Generated Stencyl blocks

Copy the blocks directly into your project.

Initial camera and viewport setup

This glossary mirrors the current Stencyl palette in the extension. Blocks are shown in palette order with their current tooltip description and Haxe call.

Key Terms

Screen - The full output area of the device or game window. The Game Area is positioned and sized within the Screen.

Game Area - The rectangular area where bittyBIG renders the game. It can be resized and positioned anywhere on the Screen and contains the Viewports.

Viewport - The output area for a single Camera. A Viewport can be positioned and sized anywhere within the Game Area.

Camera - Captures a rectangular area of the Scene and renders that view to a Viewport.

Scene - The Stencyl game world being viewed by the Cameras. Actors, tiles, backgrounds, and scene boundaries exist in Scene coordinates.

Camera Size - The base width and height of the Scene captured by a Camera before zoom is applied.

Camera Center - The Scene position at the center of the Camera's view.

Camera Target - The Scene position the Camera is moving toward. This may come from an Actor, a manually specified position, or another camera-follow operation.

Zoom - Changes how much of the Scene is visible through a Camera without changing its base Camera Size. Higher zoom shows a smaller area of the Scene; lower zoom shows a larger area.

Scene Lock - Restricts a Camera so its visible area does not move beyond the Scene boundaries.

Follow - Continuously updates a Camera's target based on an Actor.

Viewport Position - The position of a Viewport within the Game Area.

Viewport Size - The width and height of the Camera's output area within the Game Area. This does not change the Camera's Scene capture size.

Viewport Scale Mode - Controls how the Camera image is fitted into its Viewport when their dimensions or aspect ratios differ.

Game Area Coordinates - Coordinates relative to the Game Area. Viewports are positioned using Game Area coordinates.

Screen Coordinates - Coordinates relative to the full Screen. The Game Area is positioned using Screen coordinates.

Background Layer - A Stencyl Scene background layer rendered as part of the Camera view.

Scroll Factor / Parallax - Controls how quickly a Background Layer moves relative to Camera movement.

Background Repeat - Controls whether a Background Layer repeats horizontally, vertically, both, or not at all.

Image Anchor - The point on a background image used when positioning that image. 0,0 is top-left, 0.5,0.5 is center, and 1,1 is bottom-right.

Scene Anchor - The point in the Scene that the Background Layer's Image Anchor is aligned to.

Background Offset - An additional Scene-space X/Y offset applied after the Background Layer's Image Anchor and Scene Anchor are aligned.

Rendering Flow - Scene → Camera → Viewport → Game Area → Screen.

Setup

Quick Start

Setup → Quick Start

Create Camera

Creates a camera and its matching default viewport. The camera system initializes automatically if needed.

Create Camera ID

Code

scripts.api.stencyl.BittyCameraBlocks.createCamera(~);

Follow Actor

Persistently follows the selected actor by updating the camera target every frame. Presets and follow settings control how the camera moves.

Follow Actor with Camera ID

Code

scripts.api.stencyl.BittyCameraBlocks.followActor(~,~);

Set Camera Center

Sets the camera center position for the given camera ID.

Set Camera Center to X Y for Camera ID

Code

scripts.api.stencyl.BittyCameraBlocks.setCameraCenter(~, ~, ~);

Apply Camera Preset

Applies one of the shipped camera presets to the selected camera.

Apply Camera Preset to Camera ID

Code

scripts.api.stencyl.BittyCameraBlocks.applyCameraPreset(~,~);

Set Camera Size

Sets the camera size. If the camera does not exist yet, it is created automatically.

Set Camera Size W H for ID

Code

scripts.api.stencyl.BittyCameraBlocks.setCameraSize(~,~,~);

Scene

Setup → Scene

Set Camera Scene Lock

Locks or unlocks the camera from being limited to the scene bounds.

Set Camera ID Scene Lock to

Code

scripts.api.stencyl.BittyCameraBlocks.setCameraSceneLock(~,~);

Set Background Layer Repeat

Overrides Stencyl's repeat setting for this background layer in bittyBIG. If this block is not used, Stencyl's Repeat setting is preserved: off = none, on = both. Horizontal and Vertical repeat only the selected axis.

Set repeat to for Layer with

Code

scripts.api.stencyl.BittyCameraBlocks.setBackgroundLayerRepeatMode(~,~,~);

Set Background Layer Anchors

Each anchor uses 0 to 1: left/top 0, center 0.5, right/bottom 1. Choose the image point and scene point independently. Background Offset adjusts the placement in scene units.

Set background image anchor X Y to scene anchor X Y for Layer with

Code

scripts.api.stencyl.BittyCameraBlocks.setBackgroundLayerAnchors(~,~,~,~,~,~);

Set Background Layer Alignments

Select image and scene anchor points independently. Background Offset adds a scene-unit adjustment.

Align background image to scene for Layer with

Code

scripts.api.stencyl.BittyCameraBlocks.setBackgroundLayerAlignments(~,~,~,~);

Set Background Layer Offset

Sets an absolute offset from the aligned background position in scene units. Positive X is right; positive Y is down. Negative Y moves up. Set 0,0 to reset. Repeated calls replace the offset; they do not add to it. Independent of scroll factor.

Set background offset X Y for Layer with

Code

scripts.api.stencyl.BittyCameraBlocks.setBackgroundLayerOffset(~,~,~,~);

Debug

Setup → Debug

Debug Camera

Prints the current state of the selected camera as a readable multi-line debug report.

Debug Camera

Code

scripts.api.stencyl.BittyCameraBlocks.debugCamera(~);

Debug Viewport

Prints the current state of the selected viewport as a readable multi-line debug report.

Debug Viewport

Code

scripts.api.stencyl.BittyCameraBlocks.debugViewport(~);

Debug Game Area

Prints the current game size, Game Area area, background, overlay, and border state as a readable multi-line debug report.

Debug Game Area

Code

scripts.api.stencyl.BittyCameraBlocks.debugGameArea();

Debug Camera System

Prints the current Dynamic Camera System state, active camera and viewport IDs, follow bindings, rotation tweens, game size, and Game Area area.

Debug Camera System

Code

scripts.api.stencyl.BittyCameraBlocks.debugCameraSystem();

Cameras

Camera

Cameras → Camera

Create Camera

Creates a camera and its matching default viewport. The camera system initializes automatically if needed.

Create Camera ID

Code

scripts.api.stencyl.BittyCameraBlocks.createCamera(~);

Remove Camera

Removes the camera with the given ID.

Remove Camera ID

Code

scripts.api.stencyl.BittyCameraBlocks.removeCamera(~);

Camera Exists

Returns true if a camera with this ID is currently created.

Camera with ID exists

Code

scripts.api.stencyl.BittyCameraBlocks.cameraExists(~)

Camera Is Transitioning

Returns true if the camera is still moving toward its target position.

Camera ID is transitioning

Code

scripts.api.stencyl.BittyCameraBlocks.isCameraTransitioning(~)

Position

Cameras → Position

Set Camera Center

Sets the camera center position for the given camera ID.

Set Camera Center to X Y for Camera ID

Code

scripts.api.stencyl.BittyCameraBlocks.setCameraCenter(~, ~, ~);

Set Camera Center To Actor

Sets Camera Position to Center of Given actor. Removes Jitter from Stencyl's built-in Camera.

Set Camera Center to Actor for Camera ID

Code

scripts.api.stencyl.BittyCameraBlocks.setCameraCenterToActor(~,~);

Get Camera X

Returns the camera X position for the given camera ID.

Get Camera X for Camera ID

Code

scripts.api.stencyl.BittyCameraBlocks.getCameraX(~)

Get Camera Y

Returns the camera Y position for the given camera ID.

Get Camera Y for Camera ID

Code

scripts.api.stencyl.BittyCameraBlocks.getCameraY(~)

Get Camera Center X

Returns the camera center X position for the given camera ID.

Get Camera Center X for Camera ID

Code

scripts.api.stencyl.BittyCameraBlocks.getCameraCenterX(~)

Get Camera Center Y

Returns the camera center Y position for the given camera ID.

Get Camera Center Y for Camera ID

Code

scripts.api.stencyl.BittyCameraBlocks.getCameraCenterY(~)

Size

Cameras → Size

Set Camera Size

Sets the camera size. If the camera does not exist yet, it is created automatically.

Set Camera Size W H for ID

Code

scripts.api.stencyl.BittyCameraBlocks.setCameraSize(~,~,~);

Get Camera Width

Returns the Camera width for the given camera ID.

Get Camera Width for Camera ID

Code

scripts.api.stencyl.BittyCameraBlocks.getCameraWidth(~)

Get Camera Height

Returns the Camera height for the given camera ID.

Get Camera Height for Camera ID

Code

scripts.api.stencyl.BittyCameraBlocks.getCameraHeight(~)

Follow

Cameras → Follow

Follow Actor

Persistently follows the selected actor by updating the camera target every frame. Presets and follow settings control how the camera moves.

Follow Actor with Camera ID

Code

scripts.api.stencyl.BittyCameraBlocks.followActor(~,~);

Stop Following Actor

Removes the persistent actor follow binding from the selected camera.

Stop Following Actor for Camera ID

Code

scripts.api.stencyl.BittyCameraBlocks.stopFollowingActor(~);

Set Camera Target Center

Sets a one-time camera target and removes any persistent Follow Actor binding. Presets and follow settings control how the camera moves toward it.

Set Camera Target Center to X Y for Camera ID

Code

scripts.api.stencyl.BittyCameraBlocks.setCameraTargetCenter(~,~,~);

Set Camera Target Center To Actor

Sets a one-time target to the selected actor and removes any persistent Follow Actor binding. Presets and follow settings control how the camera moves toward it.

Set Camera Target Center to Actor for Camera ID

Code

scripts.api.stencyl.BittyCameraBlocks.setCameraTargetCenterToActor(~,~);

Set Camera Follow Style

Sets the camera follow style. Direct follows the target center directly. Grid-Based follows the center of the grid cell containing the target.

Set Follow Style to for Camera ID

Code

scripts.api.stencyl.BittyCameraBlocks.setCameraFollowStyle(~,~);

Follow Tuning

Cameras → Follow Tuning

Set Camera Offsets

Sets the horizontal and vertical offset used by camera follow movement.

Set Camera Offset X Y for Camera ID

Code

scripts.api.stencyl.BittyCameraBlocks.setCameraOffsets(~,~,~);

Get Camera Offset X

Returns the current horizontal camera offset for the given camera ID.

Get Camera Offset X for Camera ID

Code

scripts.api.stencyl.BittyCameraBlocks.getCameraOffsetX(~)

Get Camera Offset Y

Returns the current vertical camera offset for the given camera ID.

Get Camera Offset Y for Camera ID

Code

scripts.api.stencyl.BittyCameraBlocks.getCameraOffsetY(~)

Set Camera Follow Speeds

Sets the horizontal and vertical follow speeds used by camera lerp movement.

Set Follow Speed X Y for Camera ID

Code

scripts.api.stencyl.BittyCameraBlocks.setCameraFollowSpeeds(~,~,~);

Set Camera Lerp Speed

Sets how heavily the camera movement is smoothed. Higher values move more slowly.

Set Lerp Speed to for Camera ID

Code

scripts.api.stencyl.BittyCameraBlocks.setCameraLerpSpeed(~,~);

Set Camera Zero Radius

Sets the snap distance used to finish camera movement cleanly near the target.

Set Zero Radius to for Camera ID

Code

scripts.api.stencyl.BittyCameraBlocks.setCameraZeroRadius(~,~);

Presets

Cameras → Presets

Apply Camera Preset

Applies one of the shipped camera presets to the selected camera.

Apply Camera Preset to Camera ID

Code

scripts.api.stencyl.BittyCameraBlocks.applyCameraPreset(~,~);

Apply Camera Preset By Name

Applies any camera preset by name. Use this for custom presets added in BittyCameraPresets.hx.

Apply Camera Preset named to Camera ID

Code

scripts.api.stencyl.BittyCameraBlocks.applyCameraPreset(~,~);

Grid

Cameras → Grid

Set Camera Grid Size

Sets the Grid-Based camera cell size. This can be changed at runtime. Set either dimension to 0 to use the camera base size for that dimension.

Set Grid Size to Width Height for Camera ID

Code

scripts.api.stencyl.BittyCameraBlocks.setCameraGridSize(~,~,~);

Reset Camera Grid Size

Resets the Grid-Based camera cell size so each dimension follows the camera base size.

Reset Grid Size for Camera ID

Code

scripts.api.stencyl.BittyCameraBlocks.resetCameraGridSize(~);

Get Camera Grid Width

Returns the effective Grid-Based camera cell width.

Get Grid Width for Camera ID

Code

scripts.api.stencyl.BittyCameraBlocks.getCameraGridWidth(~)

Get Camera Grid Height

Returns the effective Grid-Based camera cell height.

Get Grid Height for Camera ID

Code

scripts.api.stencyl.BittyCameraBlocks.getCameraGridHeight(~)

Get Camera Grid X

Returns the zero-based active Grid-Based camera column.

Get Grid X for Camera ID

Code

scripts.api.stencyl.BittyCameraBlocks.getCameraGridX(~)

Get Camera Grid Y

Returns the zero-based active Grid-Based camera row.

Get Grid Y for Camera ID

Code

scripts.api.stencyl.BittyCameraBlocks.getCameraGridY(~)

Get Camera Target Grid X

Returns the zero-based Grid-Based camera column the camera is currently moving toward.

Get Target Grid X for Camera ID

Code

scripts.api.stencyl.BittyCameraBlocks.getCameraTargetGridX(~)

Get Camera Target Grid Y

Returns the zero-based Grid-Based camera row the camera is currently moving toward.

Get Target Grid Y for Camera ID

Code

scripts.api.stencyl.BittyCameraBlocks.getCameraTargetGridY(~)

Viewports

Setup

Viewports → Setup

Create Viewport

Creates a Viewport that defines where a camera image will be drawn on the Game Image.

Create Viewport ID at X Y with Width and Height

Code

scripts.api.stencyl.BittyCameraBlocks.createViewport(~,~,~,~,~);

Render Camera To Viewport

Draws the render image from the specified camera into the specified Viewport on the Game Image.

Render Camera ID to Viewport ID

Code

scripts.api.stencyl.BittyCameraBlocks.renderCameraToViewport(~,~);

Remove Viewport

Removes the Viewport entry for the given ID.

Remove Viewport ID

Code

scripts.api.stencyl.BittyCameraBlocks.removeViewport(~);

Viewport Exists

Returns true if a Viewport with this ID currently exists.

Viewport ID exists

Code

scripts.api.stencyl.BittyCameraBlocks.viewportExists(~)

Set Viewport Scale Mode

Sets how the viewport image is scaled. Scale to Fit keeps the full image visible, Scale to Fill preserves aspect ratio while filling and cropping overflow, Stretch to Fit fills with distortion, and Direct draws 1:1.

Set Viewport ID Scale Mode to

Code

scripts.api.stencyl.BittyCameraBlocks.setViewportScaleMode(~,~);

Layout

Viewports → Layout

Set Viewport Rect

Sets the full rectangle of the given Viewport.

Set Viewport ID to X Y Width Height

Code

scripts.api.stencyl.BittyCameraBlocks.setViewportRect(~,~,~,~,~);

Set Viewport Position

Sets the position of the given Viewport.

Set Viewport ID Position to X Y

Code

scripts.api.stencyl.BittyCameraBlocks.setViewportPosition(~,~,~);

Set Viewport Size

Sets the size of the given Viewport.

Set Viewport ID Size to Width Height

Code

scripts.api.stencyl.BittyCameraBlocks.setViewportSize(~,~,~);

Get Viewport X

Returns the X position of the given Viewport.

Get Viewport X for ID

Code

scripts.api.stencyl.BittyCameraBlocks.getViewportX(~)

Get Viewport Y

Returns the Y position of the given Viewport.

Get Viewport Y for ID

Code

scripts.api.stencyl.BittyCameraBlocks.getViewportY(~)

Get Viewport Width

Returns the width of the given Viewport.

Get Viewport Width for ID

Code

scripts.api.stencyl.BittyCameraBlocks.getViewportWidth(~)

Get Viewport Height

Returns the height of the given Viewport.

Get Viewport Height for ID

Code

scripts.api.stencyl.BittyCameraBlocks.getViewportHeight(~)

Background

Viewports → Background

Set Viewport Background Color

Sets the viewport background color. Background color and background image are ordered by when they are set; the most recently set one is drawn above the other.

Set Viewport ID Background Color to Alpha percent

Code

scripts.api.stencyl.BittyCameraBlocks.setViewportBackgroundColor(~,~,~);

Clear Viewport Background

Disables the background fill for the given viewport.

Clear Background for Viewport ID

Code

scripts.api.stencyl.BittyCameraBlocks.clearViewportBackground(~);

Set Viewport Background Enabled

Turns the viewport background fill on or off.

Set Viewport ID Background to

Code

scripts.api.stencyl.BittyCameraBlocks.setViewportBackgroundEnabled(~,~);

Set Viewport Background Image

Sets an image behind the camera content for the given viewport. Background color and background image are ordered by when they are set; the most recently set one is drawn above the other.

Set Viewport ID Background Image to Alpha percent

Code

scripts.api.stencyl.BittyCameraBlocks.setViewportBackgroundImage(~,~,~);

Set Viewport Background Image Scale Mode

Sets how the viewport background image is sized inside the viewport.

Set Viewport ID Background Image Scale Mode to

Code

scripts.api.stencyl.BittyCameraBlocks.setViewportBackgroundImageScaleMode(~,~);

Clear Viewport Background Image

Removes the background image from the given viewport.

Clear Background Image for Viewport ID

Code

scripts.api.stencyl.BittyCameraBlocks.clearViewportBackgroundImage(~);

Has Viewport Background Image

Returns true if the given viewport currently has a background image.

Viewport ID Has Background Image

Code

scripts.api.stencyl.BittyCameraBlocks.hasViewportBackgroundImage(~)

Viewport Overlay

Viewports → Viewport Overlay

Set Viewport Overlay Color

Sets a color overlay above the viewport content and below UI. Overlay color and overlay image are ordered by when they are set; the most recently set one is drawn above the other.

Set Viewport ID Overlay Color to Alpha percent

Code

scripts.api.stencyl.BittyCameraBlocks.setViewportOverlayColor(~,~,~);

Clear Viewport Overlay Color

Disables the color overlay for the given viewport without changing the overlay image.

Clear Overlay Color for Viewport ID

Code

scripts.api.stencyl.BittyCameraBlocks.clearViewportOverlayColor(~);

Set Viewport Overlay Color Enabled

Turns the viewport color overlay on or off without changing its color, alpha, or call order.

Set Viewport ID Overlay Color to

Code

scripts.api.stencyl.BittyCameraBlocks.setViewportOverlayColorEnabled(~,~);

Set Viewport Overlay Image

Sets an overlay image above the viewport content and below UI. Overlay color and overlay image are ordered by when they are set; the most recently set one is drawn above the other.

Set Viewport ID Overlay Image to Alpha percent

Code

scripts.api.stencyl.BittyCameraBlocks.setViewportOverlayImage(~,~,~);

Set Viewport Overlay Image Scale Mode

Sets how the viewport overlay image is sized inside the viewport.

Set Viewport ID Overlay Image Scale Mode to

Code

scripts.api.stencyl.BittyCameraBlocks.setViewportOverlayImageScaleMode(~,~);

Clear Viewport Overlay Image

Removes the overlay image from the given viewport.

Clear Overlay Image for Viewport ID

Code

scripts.api.stencyl.BittyCameraBlocks.clearViewportOverlayImage(~);

Has Viewport Overlay Image

Returns true if the given viewport currently has an overlay image.

Viewport ID Has Overlay Image

Code

scripts.api.stencyl.BittyCameraBlocks.hasViewportOverlayImage(~)

Border

Viewports → Border

Set Viewport Border

Draws a colored border over the specified Viewport using the same thickness on all sides.

Add Border Thickness Color Alpha percent to Viewport ID

Code

scripts.api.stencyl.BittyCameraBlocks.setViewportBorder(~,~,~,~);

Set Viewport Border Sides

Draws a colored border over the specified Viewport with separate thickness values for each side.

Add Border Thickness T B L R Color Alpha percent to Viewport ID

Code

scripts.api.stencyl.BittyCameraBlocks.setViewportBorderSides(~,~,~,~,~,~,~);

Game Area

Game Area → Game Area

Set Game Area Rect

Sets the full rectangle of the Game Area.

Set Game Area to X Y Width Height

Code

scripts.api.stencyl.BittyCameraBlocks.setGameAreaRect(~,~,~,~);

Set Game Area Position

Sets the position of the Game Area on the Screen.

Set Game Area Position to X Y

Code

scripts.api.stencyl.BittyCameraBlocks.setGameAreaPosition(~,~);

Set Game Area Size

Sets the size of the Game Area on the Screen.

Set Game Area Size to Width Height

Code

scripts.api.stencyl.BittyCameraBlocks.setGameAreaSize(~,~);

Get Game Area X

Returns the X position of the Game Area.

Get Game Area X

Code

scripts.api.stencyl.BittyCameraBlocks.getGameAreaX()

Get Game Area Y

Returns the Y position of the Game Area.

Get Game Area Y

Code

scripts.api.stencyl.BittyCameraBlocks.getGameAreaY()

Get Game Area Width

Returns the width of the Game Area.

Get Game Area Width

Code

scripts.api.stencyl.BittyCameraBlocks.getGameAreaWidth()

Get Game Area Height

Returns the height of the Game Area.

Get Game Area Height

Code

scripts.api.stencyl.BittyCameraBlocks.getGameAreaHeight()

Overlay

Game Area → Overlay

Set Game Area Overlay Color

Sets a color overlay above all viewport content and below UI. If a Game Area overlay image is also set, whichever color or image is set most recently is drawn on top.

Set Game Area Overlay Color to Alpha percent

Code

scripts.api.stencyl.BittyCameraBlocks.setGameOverlayColor(~,~);

Clear Game Area Overlay Color

Disables the color overlay for the whole Game Area.

Clear Game Area Overlay Color

Code

scripts.api.stencyl.BittyCameraBlocks.clearGameOverlayColor();

Set Game Area Overlay Color Enabled

Turns the whole-Game Area overlay color on or off without changing its color or ordering.

Set Game Area Overlay Color to

Code

scripts.api.stencyl.BittyCameraBlocks.setGameOverlayColorEnabled(~);

Set Game Area Overlay Image

Sets an image overlay above all viewport content and below UI. If a Game Area overlay color is also set, whichever color or image is set most recently is drawn on top.

Set Game Area Overlay Image to Alpha percent

Code

scripts.api.stencyl.BittyCameraBlocks.setGameOverlayImage(~,~);

Set Game Area Overlay Image Scale Mode

Sets how the Game Area overlay image is sized across the whole Game Area.

Set Game Area Overlay Image Scale Mode to

Code

scripts.api.stencyl.BittyCameraBlocks.setGameOverlayImageScaleMode(~);

Clear Game Area Overlay Image

Removes the overlay image from the whole Game Area.

Clear Game Area Overlay Image

Code

scripts.api.stencyl.BittyCameraBlocks.clearGameOverlayImage();

Has Game Area Overlay Image

Returns true if a Game Area overlay image is currently assigned.

Has Game Area Overlay Image

Code

scripts.api.stencyl.BittyCameraBlocks.hasGameOverlayImage()

Border

Game Area → Border

Set Game Area Border

Draws a colored border over the Game Area using the same thickness on all sides.

Add Border Thickness Color Alpha percent to Game Area

Code

scripts.api.stencyl.BittyCameraBlocks.setGameAreaBorder(~,~,~);

Set Game Area Border Sides

Draws a colored border over the Game Area with separate thickness values for each side.

Add Border Thickness T B L R Color Alpha percent to Game Area

Code

scripts.api.stencyl.BittyCameraBlocks.setGameAreaBorderSides(~,~,~,~,~,~);

Screen

Screen Background

Screen → Screen Background

Set Screen Background Color

Sets the full-screen background color using Stencyl's color picker plus alpha percent.

Set Screen Background Color to Alpha percent

Code

scripts.api.stencyl.BittyCameraBlocks.setBackgroundColorInt(~,~);

Set Screen Background Image

Sets the full-screen background image behind the Game Area and Viewports.

Set Screen Background Image to

Code

scripts.api.stencyl.BittyCameraBlocks.setBackgroundImage(~);

Set Screen Background Image Alpha

Sets the opacity of the Screen Background Image. 0 is fully transparent and 100 is fully opaque.

Set Screen Background Image Alpha to percent

Code

scripts.api.stencyl.BittyCameraBlocks.setBackgroundImageAlpha(~);

Set Screen Background Image Scale Mode

Sets how the Screen Background Image is sized across the full Stencyl output.

Set Screen Background Image Scale Mode to

Code

scripts.api.stencyl.BittyCameraBlocks.setBackgroundImageScaleMode(~);

Clear Screen Background Image

Removes the current full-screen background image and uses the Screen Background Color only.

Clear Screen Background Image

Code

scripts.api.stencyl.BittyCameraBlocks.clearBackgroundImage();

Has Screen Background Image

Returns true if a Screen Background Image is currently assigned.

Has Screen Background Image

Code

scripts.api.stencyl.BittyCameraBlocks.hasBackgroundImage()

Screen Overlay

Screen → Screen Overlay

Set Screen Overlay Color

Sets a color overlay across the full Stencyl output. If a Screen Overlay Image is also set, whichever color or image is set most recently is drawn on top.

Set Screen Overlay Color to Alpha percent

Code

scripts.api.stencyl.BittyCameraBlocks.setScreenOverlayColor(~,~);

Clear Screen Overlay Color

Disables the full-screen overlay color.

Clear Screen Overlay Color

Code

scripts.api.stencyl.BittyCameraBlocks.clearScreenOverlayColor();

Set Screen Overlay Color Enabled

Turns the full-screen overlay color on or off without changing its color or ordering.

Set Screen Overlay Color to

Code

scripts.api.stencyl.BittyCameraBlocks.setScreenOverlayColorEnabled(~);

Set Screen Overlay Image

Sets an image overlay across the full Stencyl output. If a Screen Overlay Color is also set, whichever color or image is set most recently is drawn on top.

Set Screen Overlay Image to Alpha percent

Code

scripts.api.stencyl.BittyCameraBlocks.setScreenOverlayImage(~,~);

Set Screen Overlay Image Scale Mode

Sets how the Screen Overlay Image is sized across the full Stencyl output.

Set Screen Overlay Image Scale Mode to

Code

scripts.api.stencyl.BittyCameraBlocks.setScreenOverlayImageScaleMode(~);

Clear Screen Overlay Image

Removes the full-screen overlay image.

Clear Screen Overlay Image

Code

scripts.api.stencyl.BittyCameraBlocks.clearScreenOverlayImage();

Has Screen Overlay Image

Returns true if a Screen Overlay Image is currently assigned.

Has Screen Overlay Image

Code

scripts.api.stencyl.BittyCameraBlocks.hasScreenOverlayImage()

Effects

Zoom

Effects → Zoom

Set Camera Zoom

Sets the zoom for the given camera. 1 is normal, 2 is zoomed in 2x, and 0.5 is zoomed out 2x.

Set Zoom to for Camera ID

Code

scripts.api.stencyl.BittyCameraBlocks.setCameraZoom(~,~);

Set Camera Zoom Advanced

Smoothly changes the camera zoom using the selected easing mode.

Set Zoom to over seconds using for Camera ID

Code

scripts.api.stencyl.BittyCameraBlocks.setCameraZoomAdvanced(~,~,~,~);

Get Camera Zoom

Returns the current zoom value for the given camera.

Get Camera Zoom for Camera ID

Code

scripts.api.stencyl.BittyCameraBlocks.getCameraZoom(~)

Reset Camera Zoom

Resets the camera zoom back to 1.

Reset Camera Zoom for Camera ID

Code

scripts.api.stencyl.BittyCameraBlocks.resetCameraZoom(~);

Rotation

Effects → Rotation

Set Viewport Rotation

Rotates the camera image inside the given viewport.

Set Viewport ID Rotation to Degrees

Code

scripts.api.stencyl.BittyCameraBlocks.setViewportRotation(~,~);

Set Viewport Rotation Over Time

Smoothly changes viewport rotation using the selected easing mode.

Set Viewport Rotation to Degrees over seconds using for Viewport ID

Code

scripts.api.stencyl.BittyCameraBlocks.setViewportRotationOverTime(~,~,~,~);

Flip

Effects → Flip

Set Viewport Flip Horizontal

Flips the camera image horizontally inside the given viewport.

Set Viewport ID Flip Horizontal to

Code

scripts.api.stencyl.BittyCameraBlocks.setViewportFlipHorizontal(~,~);

Set Viewport Flip Vertical

Flips the camera image vertically inside the given viewport.

Set Viewport ID Flip Vertical to

Code

scripts.api.stencyl.BittyCameraBlocks.setViewportFlipVertical(~,~);

Reset Viewport Transform

Resets viewport rotation and flipping back to normal.

Reset Transform for Viewport ID

Code

scripts.api.stencyl.BittyCameraBlocks.resetViewportTransform(~);

Screenshake

Effects → Screenshake

Shake Camera

Shakes the camera view for the given camera ID.

Shake Camera ID with Strength for seconds

Code

scripts.api.stencyl.BittyCameraBlocks.shakeCamera(~,~,~);

Shake Camera XY

Shakes the camera view with separate horizontal and vertical strengths.

Shake Camera ID with Strength X Y for seconds

Code

scripts.api.stencyl.BittyCameraBlocks.shakeCameraXY(~,~,~,~);

Stop Camera Shake

Stops any active screen shake for the given camera ID.

Stop Shaking Camera ID

Code

scripts.api.stencyl.BittyCameraBlocks.stopCameraShake(~);

Camera Size vs. Viewport Size vs. Game Area

Camera Size controls how much of the Scene the Camera captures before zoom. Viewport Size controls how large that Camera output is drawn inside the Game Area. Game Area is the rectangle on the Screen that contains the Viewports. Changing one does not automatically change the other two.

Follow Actor

Follow Actor is a convenience block for continuous camera tracking. You call it once, and bittyBIG keeps updating that Camera's target to the Actor every frame. Functionally, it saves you from putting Set Camera Target Center in an Update event and feeding it the Actor's position yourself.

Split-Screen Layout

Each Camera starts with a matching default Viewport, so custom split-screen comes down to arranging those Viewports inside the Game Area. Resize and reposition each Viewport to the region it should occupy. Camera ID 0 starts routed to Viewport ID 0, Camera ID 1 to Viewport ID 1, and so on unless you deliberately change the routing.

Final Output Scaling / Fullscreen

There are two separate scaling stages to check. Viewport Scale Mode controls how a Camera image is drawn inside its Viewport. Stencyl's own Fullscreen / Scale to Fit / Letterbox behavior can still scale the final game output after bittyBIG has composed it. If the Viewport itself looks correct but the whole game changes when entering fullscreen, check Stencyl's display/fullscreen settings rather than the Viewport Scale Mode.

Background Image Scaling

Background images have their own scale-mode controls. Set the appropriate Background Image Scale Mode for the Viewport or whole Display instead of changing Camera Size to compensate for an image-layout problem.

Scene Background Layer Anchoring

Use Set Background Layer Alignments for named image-to-scene alignment, or Set Background Layer Anchors for custom normalized anchors. Image and scene anchors are independent: X and Y use values from 0 to 1, where 0 is left/top, 0.5 is center, and 1 is right/bottom. Use Set Background Layer Offset for an additional scene-unit adjustment after alignment.

Debugging Camera State

Debug Camera 0

Use the Debug tab. Debug Camera, Debug Viewport, Debug Display, and Debug Camera System print readable multi-line reports showing the current state instead of making you inspect a pile of individual getters.

Version 1.0 is the first release-ready version of the bittyBIG Dynamic Camera System. It includes:

custom cameras
camera sizing
actor centering
target movement
smoothing
camera offsets
grid-based movement
camera presets
zoom
tweened zoom
camera rotation
screenshake
camera transition checks
viewport layout
split-screen support
picture-in-picture support
viewport backgrounds
viewport borders
viewport transforms
game area control
background color support
background image support
unlocked cameras
pixel-perfect display behavior

Development Trail

The Dynamic Camera System started with a simple practical problem: remove camera jitter from Stencyl projects while keeping the normal Stencyl workflow intact. My larger goal is to help put Stencyl on the map by proving it can power a polished, modern-feeling hit game when paired with the right tools.

Over time, that small fix grew into a full rendering and camera control pipeline.

The project still keeps Stencyl as the editor with the familiar block system, actor workflow, scene setup tool, and asset pipeline.

Version 1.0 is the first release-ready baseline: a flexible camera suite built from the original jitter-removal goal, now ready for real projects.

Version 2.0 Development Trail In Progress

Version 2.0 pushes the Dynamic Camera System further away from depending on Stencyl's built-in camera render path. The major focus is smoother camera movement, stronger multi-viewport rendering, and reducing repeated CPU/GPU work while keeping Stencyl as the editor and gameplay workflow.

Cached Background Renderer - Implemented

bittyBIG now renders Stencyl background source frames through its own camera and floating-point parallax math instead of relying on Stencyl's pixel-snapped background position.
Background presentation data is reused per viewport while Stencyl continues to own source assets, animation timing, and scrolling state.
Result: smoother background movement and parallax that stays aligned with the bittyBIG camera.

Cached Tile / World Renderer - Implemented

Static tile rendering now uses the shared BittyTileCache instead of asking Stencyl's tile layer to redraw separately for each camera.
Cached tile chunks are reused across camera captures while dynamic actors and drawing continue through the normal Stencyl world-layer display tree.
Result: less dependency on Stencyl's built-in camera and substantially less repeated static rendering work.

Automatic Cache Refresh - Superseded Manual Rebuild Blocks

The originally planned manual rebuild blocks were not needed after the cache gained automatic change detection.
Tile changes, visual variants, source changes, and animated tile state are detected during cache synchronization and the affected cached content is refreshed automatically.
Result: users do not need to manually tell the camera system when normal tile content changes.

Dirty-Region / Changed-Chunk Updates - Implemented

Changed tile cells update only their affected cached chunk instead of forcing the entire tile world to be rebuilt.
On the Windows GPU-first path, dirty chunks are refreshed and reusable GPU-side chunk images are retained.
Result: larger scenes and runtime tile edits require much less redundant work.

Animated / Dynamic Background Support - Implemented

bittyBIG reads the current Stencyl background animation frame while preserving Stencyl's scrolling-background timing and independent scroll phase.
Repeating backgrounds, custom scroll factors, and parallax continue to work through the bittyBIG-controlled presentation path.
Result: animated and moving backgrounds retain smooth camera-controlled positioning instead of being limited to a static cache.

HTML5 Tile Seam Improvements - Implemented

The shared tile-cache path avoids repeatedly rebuilding Stencyl's tile layer at different camera origins during the same frame.
The renderer uses expanded capture coverage / safety pixels where needed so smooth subpixel camera movement does not have to be snapped to hide seams.
Result: the previous one-pixel tile-phase seam path is avoided while keeping smooth camera movement.

Renderer Independence - Major V2.0 Step Implemented

Static tiles and Stencyl backgrounds are now presented through bittyBIG-controlled camera/render paths instead of depending on Stencyl's camera transform for each viewport.
Stencyl remains responsible for the editor, actors, behaviors, scene setup, assets, animation state, and normal gameplay workflow.
Result: bittyBIG owns substantially more of the runtime camera/output behavior without requiring users to abandon Stencyl's creation pipeline.

Scene-Centered Camera / Zoom-Aware Parallax - Implemented

Scene limiting now clamps the resolved camera center itself, so the camera's actual center stays authoritative at scene edges.
Background movement is calculated from the resolved camera center relative to the scene center, and Stencyl's stored scroll factor is converted to a zoom-aware effective factor so the same logical travel span is preserved as the visible camera size changes.
Smooth clamp-center presentation compensates for the parity-matched raster source sizes used during zoom.
Result: backgrounds stay aligned with the camera and scene edges through movement and smooth zoom without edge drift or clamp jitter.

Background Repeat / Anchor Controls - Implemented

Background repeat can be overridden per layer as None, Horizontal, Vertical, or Both while leaving Stencyl's own Repeat setting untouched when no override is used.
Repeating backgrounds prepare only the minimum number of source copies needed for coverage; the previous extra safety copy is not added.
Background positional anchoring is stored per layer with normalized X/Y values from 0 to 1. Layers without an override default to 0,0.
Result: background preparation and registration are explicit per-layer controls without introducing another rendering path.

Unified Rotation / Flip Presentation Path - Implemented

Rotation no longer switches to a separate capture bitmap, separate world renderer, or separate transformed-camera presentation path.
Ordered layers, backgrounds, zoom, scene clamping, parallax, and smoothing now run through the same normal rendering path first.
Rotation and flipping are applied only at the final presentation stage.
Result: rotation inherits the same rendering behavior and fixes as ordinary rendering and zoom instead of maintaining parallel special cases.

Pixel-Aligned World Raster + Fractional Presentation Residual - Implemented

The rasterized world / tile camera origin is split into a pixel-aligned raster position and a fractional remainder.
The world is rendered at the stable pixel-aligned origin, while the fractional remainder is preserved and applied at final presentation.
Rasterized world layers with non-1.0 scroll factors are compensated so their parallax rate remains correct when the shared final residual is applied.
Result: the subtle main tile-layer shimmer is removed during ordinary camera movement and at the ends of zoom transitions while smooth fractional movement is preserved.

Remaining V2.0 Work

Per-Viewport Debug Drawing - Planned

Add optional visual debug drawing for each viewport and camera.
Goal: make it easy to see camera bounds, viewport rectangles, centers, targets, offsets, and split-screen behavior directly on screen while testing.

The Debug blocks already provide text-based camera, viewport, display, and camera-system state. This remaining item is specifically the on-screen visual debug overlay.