bittyBIG Dynamic Camera System
Interactive documentation, glossary, examples, and viewport tester

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 Scene Setup Viewport Tester Block Glossary FAQs Release Notes Support

Project Setup in Stencyl

Before adding camera blocks, set the project up so Stencyl, your art scale, and the camera output are all speaking the same language. Otherwise the camera system works, but the project settings quietly wear fake glasses and pretend they are helping.

1. Create and enable

  1. Create a new Stencyl project.
  2. Enable the bittyBIG Dynamic Camera System extension.
  3. Restart/open the project if Stencyl needs to reload extension blocks.

2. Set the screen size

  1. Go to Game Settings → Settings → Display.
  2. Set Screen Size to the output size you want Stencyl to present.
  3. For a 320x240 pixel-art target, use 320x240 unless you intentionally want a larger canvas/window.
Camera sizing rule: for upscaling, the target camera size should be less than or equal to the Stencyl screen size. For downscaling, the target camera size should be greater than or equal to the Stencyl screen size, and your art should be high-resolution enough to survive being reduced.

3. Pixel-art settings

Go to Game Settings → Settings → Advanced.

  • Set Antialiasing to Off.
  • Set Pixel-Snapping to Off if you want sprites to move smoothly with the camera instead of jittering on the pixel grid.

4. Project scales

For the most common pixel-art/upscale workflow:

  • Keep Project Scales at 1x.
  • Disable the other scales.
  • Set Default Scale to 1x.
Downscaling workflow: do not rely on Stencyl project scales for this. Import high-resolution art at 1x, then let the camera system downscale the final view. This keeps the camera pipeline in control instead of letting Stencyl and the camera both try to perform the same function.

5. Platform fullscreen/window behavior

For Windows, Web, and Mobile exports, fullscreen behavior should be based around Scale to Fit / Letterbox style output. When the Stencyl screen size, camera size, and scaling target match cleanly, windowed mode and fullscreen mode behave predictably.

HTML5 resizable window tip: in Game Settings → Settings → Advanced → OpenFL Settings, you can add this line for HTML5 builds:
OpenFL Settings 
<window resizable="true" if="html5" />

Quick Start Guide

Once the project settings are clean, start with this setup and confirm the camera is drawing before adding presets, zoom, split-screen, or anything fancy.

Initialize bittyBIG Dynamic Camera System
Create Camera ID 0
Set Camera to Width 320 Height 240 for Camera ID 0
Set Camera Center to Actor player for Camera ID 0
What this proves: the camera system is initialized, Camera ID 0 exists, the camera has a known view size, and the camera is centered on your player actor variable.
Camera size tip: use Set Camera Size when you want to change how much of the game scene is viewed on screen. For example, a 320x180 camera on a 1920x1080 canvas gives a clean 6x pixel-perfect view. A 320x240 camera is a good first test for a 320x240 Stencyl screen.
Debug note: if actors disappear, die, or stop updating when they leave Stencyl’s normal camera view, check your actor/behavior logic for “kill when off-screen” or similar cleanup behavior. That is separate from the Dynamic Camera System.

Scene Setup

The Dynamic Camera System renders your Stencyl scene into a final composite image, then displays that image on a reserved layer. A little scene setup keeps Stencyl layers, parallax backgrounds, and UI overlays behaving predictably.

1. Make a layer named UI

Create a Stencyl layer named UI in every scene that needs screen overlays. This name is reserved by the camera system.

  • Set the UI layer scroll factors to 0, 0.
  • Put HUD actors, text, icons, menus, and screen-space overlays on this layer.
  • Position UI objects as screen/HUD objects, not world objects.

2. Keep UI above every other layer

The UI layer is not copied into the camera render. It stays as a normal Stencyl layer and should be kept above every other layer in the scene so it draws over the final game image.

  • Use UI for things that should not move with the camera.
  • Use the UI layer only for final screen overlays.
  • Do not use UI for gameplay actors that belong inside the camera view.
  • If you add layers at runtime, make sure UI stays on top afterward.

3. Background and parallax layers

Stencyl background layers can stay in the normal scene layer stack. Custom scroll factors are supported, so parallax backgrounds should move according to their layer settings.

  • Place background layers wherever they belong in the scene order.
  • Layers above your gameplay layer can still render into the camera image.
  • Parallax layers should use their normal Stencyl background/custom scroll settings.
How it works: normal scene layers, world layers, and parallax layers are rendered into the final game image on a reserved layer called GameRender. The UI layer is then rendered on top as the final HUD/menu overlay.
Common mistake: if a UI actor does not appear to stay on screen, check that it is on the UI layer, that the layer scroll factor is 0, 0, and that the actor is positioned like a screen overlay instead of regular world scenery.

Common Setups

These examples use a 1920x1080 canvas. Use Set Camera Size when you want to control how much of the game scene is viewed inside that layout.

Full-screen pixel-perfect camera

Use this when one camera fills the full 1920x1080 canvas. A 320x180 camera gives a clean 6x view.

Stencyl block copy data
Initialize bittyBIG Dynamic Camera System
Create Camera ID 0
Set Camera to Width 320 Height 180 for Camera ID 0
Set Camera Center to Actor player for Camera ID 0
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<copy format="1">
    <group eventID="-1" id="-1">
        <bbcam-init-dynamic-camera-system comment="false" x="0" y="0"/>
        <bbcam-create-camera comment="false" x="0" y="0">
            <int id="0" val="0"/>
        </bbcam-create-camera>
        <bbcam-set-camera-size comment="false" x="0" y="0">
            <int id="0" val="320"/>
            <int id="1" val="180"/>
            <int id="2" val="0"/>
        </bbcam-set-camera-size>
    </group>
</copy>
After pasting, add your own Set Camera Center to Actor block using your player actor or variable.
Equivalent code 
scripts.BittyCameraSystem.init();

scripts.BittyCameraBlocks.createCamera(0);
scripts.BittyCameraBlocks.setCameraSize(320, 180, 0);
scripts.BittyCameraBlocks.setCameraCenterToActor(player, 0);

Two-player left/right split screen

For a 1920x1080 canvas, each half is 960x1080. A 160x180 camera gives each viewport a clean 6x scale.

Stencyl block copy data
Initialize bittyBIG Dynamic Camera System
Create Camera ID 0
Create Camera ID 1
Set Viewport ID 0 to X 0 Y 0 Width 960 Height 1080
Set Viewport ID 1 to X 960 Y 0 Width 960 Height 1080
Set Camera to Width 160 Height 180 for Camera ID 0
Set Camera to Width 160 Height 180 for Camera ID 1
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<copy format="1">
    <group eventID="-1" id="-1">
        <bbcam-init-dynamic-camera-system comment="false" x="0" y="0"/>
        <bbcam-create-camera comment="false" x="0" y="0">
            <int id="0" val="0"/>
        </bbcam-create-camera>
        <bbcam-create-camera comment="false" x="0" y="0">
            <int id="0" val="1"/>
        </bbcam-create-camera>
        <bbcam-set-viewport-rect comment="false" x="0" y="0">
            <int id="0" val="0"/>
            <int id="1" val="0"/>
            <int id="2" val="0"/>
            <int id="3" val="960"/>
            <int id="4" val="1080"/>
        </bbcam-set-viewport-rect>
        <bbcam-set-viewport-rect comment="false" x="0" y="0">
            <int id="0" val="1"/>
            <int id="1" val="960"/>
            <int id="2" val="0"/>
            <int id="3" val="960"/>
            <int id="4" val="1080"/>
        </bbcam-set-viewport-rect>
        <bbcam-set-camera-size comment="false" x="0" y="0">
            <int id="0" val="160"/>
            <int id="1" val="180"/>
            <int id="2" val="0"/>
        </bbcam-set-camera-size>
        <bbcam-set-camera-size comment="false" x="0" y="0">
            <int id="0" val="160"/>
            <int id="1" val="180"/>
            <int id="2" val="1"/>
        </bbcam-set-camera-size>
    </group>
</copy>
Equivalent code 
scripts.BittyCameraSystem.init();

scripts.BittyCameraBlocks.createCamera(0);
scripts.BittyCameraBlocks.createCamera(1);

scripts.BittyCameraBlocks.setDisplayPortRect(0, 0, 0, 960, 1080);
scripts.BittyCameraBlocks.setDisplayPortRect(1, 960, 0, 960, 1080);

scripts.BittyCameraBlocks.setCameraSize(160, 180, 0);
scripts.BittyCameraBlocks.setCameraSize(160, 180, 1);

Picture-in-picture camera

Use one main camera and one smaller overlay camera. This example uses a full 1920x1080 main viewport with a 440x248 overlay.

Stencyl block copy data
Initialize bittyBIG Dynamic Camera System
Create Camera ID 0
Create Camera ID 1
Set Viewport ID 0 to X 0 Y 0 Width 1920 Height 1080
Set Viewport ID 1 to X 1440 Y 40 Width 440 Height 248
Set Camera to Width 320 Height 180 for Camera ID 0
Set Camera to Width 110 Height 62 for Camera ID 1
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<copy format="1">
    <group eventID="-1" id="-1">
        <bbcam-init-dynamic-camera-system comment="false" x="0" y="0"/>
        <bbcam-create-camera comment="false" x="0" y="0">
            <int id="0" val="0"/>
        </bbcam-create-camera>
        <bbcam-create-camera comment="false" x="0" y="0">
            <int id="0" val="1"/>
        </bbcam-create-camera>
        <bbcam-set-viewport-rect comment="false" x="0" y="0">
            <int id="0" val="0"/>
            <int id="1" val="0"/>
            <int id="2" val="0"/>
            <int id="3" val="1920"/>
            <int id="4" val="1080"/>
        </bbcam-set-viewport-rect>
        <bbcam-set-viewport-rect comment="false" x="0" y="0">
            <int id="0" val="1"/>
            <int id="1" val="1440"/>
            <int id="2" val="40"/>
            <int id="3" val="440"/>
            <int id="4" val="248"/>
        </bbcam-set-viewport-rect>
        <bbcam-set-camera-size comment="false" x="0" y="0">
            <int id="0" val="320"/>
            <int id="1" val="180"/>
            <int id="2" val="0"/>
        </bbcam-set-camera-size>
        <bbcam-set-camera-size comment="false" x="0" y="0">
            <int id="0" val="110"/>
            <int id="1" val="62"/>
            <int id="2" val="1"/>
        </bbcam-set-camera-size>
    </group>
</copy>
Equivalent code 
scripts.BittyCameraSystem.init();

scripts.BittyCameraBlocks.createCamera(0);
scripts.BittyCameraBlocks.createCamera(1);

scripts.BittyCameraBlocks.setDisplayPortRect(0, 0, 0, 1920, 1080);
scripts.BittyCameraBlocks.setDisplayPortRect(1, 1440, 40, 440, 248);

scripts.BittyCameraBlocks.setCameraSize(320, 180, 0);
scripts.BittyCameraBlocks.setCameraSize(110, 62, 1);

Smaller Display Area

For a smaller centered-style setup, use a 1440x810 Display Area. Left/right halves are 720x810.

Stencyl block copy data
Initialize bittyBIG Dynamic Camera System
Set Display Area to X 0 Y 0 Width 1440 Height 810
Set Viewport ID 0 to X 0 Y 0 Width 720 Height 810
Set Viewport ID 1 to X 720 Y 0 Width 720 Height 810
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<copy format="1">
    <group eventID="-1" id="-1">
        <bbcam-init-dynamic-camera-system comment="false" x="0" y="0"/>
        <bbcam-set-display-area-rect comment="false" x="0" y="0">
            <int id="0" val="0"/>
            <int id="1" val="0"/>
            <int id="2" val="1440"/>
            <int id="3" val="810"/>
        </bbcam-set-display-area-rect>
        <bbcam-create-camera comment="false" x="0" y="0">
            <int id="0" val="0"/>
        </bbcam-create-camera>
        <bbcam-create-camera comment="false" x="0" y="0">
            <int id="0" val="1"/>
        </bbcam-create-camera>
        <bbcam-set-viewport-rect comment="false" x="0" y="0">
            <int id="0" val="0"/>
            <int id="1" val="0"/>
            <int id="2" val="0"/>
            <int id="3" val="720"/>
            <int id="4" val="810"/>
        </bbcam-set-viewport-rect>
        <bbcam-set-viewport-rect comment="false" x="0" y="0">
            <int id="0" val="1"/>
            <int id="1" val="720"/>
            <int id="2" val="0"/>
            <int id="3" val="720"/>
            <int id="4" val="810"/>
        </bbcam-set-viewport-rect>
        <bbcam-set-camera-size comment="false" x="0" y="0">
            <int id="0" val="120"/>
            <int id="1" val="135"/>
            <int id="2" val="0"/>
        </bbcam-set-camera-size>
        <bbcam-set-camera-size comment="false" x="0" y="0">
            <int id="0" val="120"/>
            <int id="1" val="135"/>
            <int id="2" val="1"/>
        </bbcam-set-camera-size>
    </group>
</copy>
Equivalent code 
scripts.BittyCameraSystem.init();

scripts.BittyCameraBlocks.setGameAreaRect(0, 0, 1440, 810);

scripts.BittyCameraBlocks.createCamera(0);
scripts.BittyCameraBlocks.createCamera(1);

scripts.BittyCameraBlocks.setDisplayPortRect(0, 0, 0, 720, 810);
scripts.BittyCameraBlocks.setDisplayPortRect(1, 720, 0, 720, 810);

scripts.BittyCameraBlocks.setCameraSize(120, 135, 0);
scripts.BittyCameraBlocks.setCameraSize(120, 135, 1);

Interactive Viewport Setup Builder

Preview what the final layout will look like, then generate setup code for your project. Viewports split the game canvas, not the full screen.

Viewport Rects

Suggested Pixel Perfect Camera Sizes

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

    Generated Setup Code

    Generated Stencyl blocks 
    

    

    
										Copy the blocks directly into your project.
									
    

    

    

    

    
Initial camera and viewport setup


    

    

    

    

    

    

    

    

    

    

    Block Glossary
    

    

    

    
							This glossary is organized more like Stencyl’s block guide:
							blocks first, descriptions second, code shown directly under each block.
						
    

    

    Key Terms
    

    

    Display Area - The final rectangle where the whole bittyBIG output appears on the screen.
    

    Viewport - A rectangle inside the Display Area. It controls where a camera image appears.
    

    Camera Size - How much world the camera sees before zoom. This is your low-resolution world view size.
    

    Zoom - Changes how much of the world the camera sees. Higher zoom means a closer view.
    

    Viewport Coordinates - Based on the current Display Area size.
    

    

    

    

    Cameras
    

    Setup
    

    

    Initialize System
    

    Cameras → Setup
    

    

    
											Initialize bittyBIG Dynamic Camera System
										
    

    

    
										Initializes the bittyBIG dynamic camera, renderer, and display systems in the proper order for the current scene.
									
    

    

    
Code


    

    scripts.BittyCameraSystem.init();
    

    

    

    

    Create Camera
    

    Cameras → Setup
    

    

    
											Create Camera ID 

    

    

    
										Creates a new camera with the given camera ID.
									
    

    

    
Code


    

    scripts.BittyCameraBlocks.createCamera(~);
    

    

    

    

    Render Camera to Viewport
    

    Cameras → Setup
    

    

    
											Render Camera ID  to Viewport ID 

    

    

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

    

    
Code


    

    scripts.BittyCameraBlocks.renderCameraToDisplayPort(~,~);
    

    

    

    

    Set Camera Size
    

    Cameras → Setup
    

    

    
											Set Camera to Width  Height  for Camera ID 

    

    

    
										Sets the Camera size for the given camera ID.
									
    

    

    
Code


    

    scripts.BittyViewports.setViewportSize(~, ~, ~);
    

    

    

    

    Set Camera Scene Lock
    

    Cameras → Setup
    

    

    
											Set Camera ID  Scene Lock to Lock Camera To Scene

    

    

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

    

    
Code


    

    scripts.BittyCameraBlocks.setCameraSceneLock(~,~);
    

    

    

    

    Remove Camera
    

    Cameras → Setup
    

    

    
											Remove Camera ID 

    

    

    
										Removes the camera with the given ID.
									
    

    

    
Code


    

    scripts.BittyCameraBlocks.removeCamera(~);
    

    

    

    Presets
    

    

    Apply Camera Preset
    

    Cameras → Presets
    

    

    
											Apply Camera Preset Centered to Camera ID 

    

    

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

    

    
Code


    

    scripts.BittyCameraBlocks.applyCameraPreset(~,~);
    

    

    

    

    Apply Camera Preset by Name
    

    Cameras → Presets
    

    

    
											Apply Camera Preset named  to Camera ID 

    

    

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

    

    
Code


    

    scripts.BittyCameraBlocks.applyCameraPreset(~,~);
    

    

    

    Position
    

    

    Set Camera Center
    

    Cameras → Position
    

    

    
											Set Camera Center to X  Y  for Camera ID 

    

    

    
										Sets the camera center position for the given camera ID.
									
    

    

    
Code


    

    scripts.BittyViewports.setCameraCenter(~, ~, ~);
    

    

    

    

    Set Camera Offsets
    

    Cameras → Position
    

    

    
											Set Camera Offset X  Y  for Camera ID 

    

    

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

    

    
Code


    

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

    

    

    

    Get Camera Offset X
    

    Cameras → Position
    

    

    
											Get Camera Offset X for Camera ID 

    

    

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

    

    
Code


    

    scripts.BittyCameraBlocks.getCameraOffsetX(~)
    

    

    

    

    Get Camera Offset Y
    

    Cameras → Position
    

    

    
											Get Camera Offset Y for Camera ID 

    

    

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

    

    
Code


    

    scripts.BittyCameraBlocks.getCameraOffsetY(~)
    

    

    

    

    Center Camera to Actor
    

    Cameras → Position
    

    

    
											Set Camera Center to Actor  for Camera ID 

    

    

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

    

    
Code


    

    scripts.BittyCameraBlocks.setCameraCenterToActor(~,~);
    

    

    

    Movement
    

    

    Set Camera Target Center
    

    Cameras → Movement
    

    

    
											Set Camera Target Center to X  Y  for Camera ID 

    

    

    
										Sets the point this camera moves toward. Presets and follow settings control how the camera moves toward it.
									
    

    

    
Code


    

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

    

    

    

    Set Camera Target to Actor
    

    Cameras → Movement
    

    

    
											Set Camera Target Center to Actor  for Camera ID 

    

    

    
										Sets the camera target center to the selected actor. Presets and follow settings control how the camera moves toward it.
									
    

    

    
Code


    

    scripts.BittyCameraBlocks.setCameraTargetCenterToActor(~,~);
    

    

    

    

    Set Follow Style
    

    Cameras → Movement
    

    

    
											Set Follow Style to Direct for Camera ID 

    

    

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

    

    
Code


    

    scripts.BittyCameraBlocks.setCameraFollowStyle(~,~);
    

    

    

    

    Set Follow Speeds
    

    Cameras → Movement
    

    

    
											Set Follow Speed X  Y  for Camera ID 

    

    

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

    

    
Code


    

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

    

    

    

    Set Lerp Speed
    

    Cameras → Movement
    

    

    
											Set Lerp Speed to  for Camera ID 

    

    

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

    

    
Code


    

    scripts.BittyCameraBlocks.setCameraLerpSpeed(~,~);
    

    

    

    

    Set Zero Radius
    

    Cameras → Movement
    

    

    
											Set Zero Radius to  for Camera ID 

    

    

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

    

    
Code


    

    scripts.BittyCameraBlocks.setCameraZeroRadius(~,~);
    

    

    

    Rotation
    

    

    Set Camera Rotation
    

    Cameras → Rotation
    

    

    
											Set Camera ID  Rotation to  Degrees
										
    

    

    
										Rotates the world view around the center of the given camera.
									
    

    

    
Code


    

    scripts.BittyCameraBlocks.setCameraRotation(~,~);
    

    

    

    

    Get Camera Rotation
    

    Cameras → Rotation
    

    

    
											Get Camera ID  Rotation
										
    

    

    
										Returns the current world-view rotation in degrees for the given camera.
									
    

    

    
Code


    

    scripts.BittyCameraBlocks.getCameraRotation(~)
    

    

    

    

    Reset Camera Rotation
    

    Cameras → Rotation
    

    

    
											Reset Rotation for Camera ID 

    

    

    
										Resets camera world-view rotation back to 0 degrees.
									
    

    

    
Code


    

    scripts.BittyCameraBlocks.resetCameraRotation(~);
    

    

    

    Properties
    

    

    Camera Exists?
    

    Cameras → Properties
    

    

    
											Camera with ID  exists
										
    

    

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

    

    
Code


    

    scripts.BittyViewports.cameraExists(~)
    

    

    

    

    Camera Is Transitioning?
    

    Cameras → Properties
    

    

    
											Camera ID  is transitioning
										
    

    

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

    

    
Code


    

    scripts.BittyCameraBlocks.isCameraTransitioning(~)
    

    

    

    

    Get Camera X
    

    Cameras → Properties
    

    

    
											Get Camera X for Camera ID 

    

    

    
										Returns the camera X position for the given camera ID.
									
    

    

    
Code


    

    scripts.BittyViewports.getCameraX(~)
    

    

    

    

    Get Camera Y
    

    Cameras → Properties
    

    

    
											Get Camera Y for Camera ID 

    

    

    
										Returns the camera Y position for the given camera ID.
									
    

    

    
Code


    

    scripts.BittyViewports.getCameraY(~)
    

    

    

    

    Get Camera Center X
    

    Cameras → Properties
    

    

    
											Get Camera Center X for Camera ID 

    

    

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

    

    
Code


    

    scripts.BittyViewports.getCameraCenterX(~)
    

    

    

    

    Get Camera Center Y
    

    Cameras → Properties
    

    

    
											Get Camera Center Y for Camera ID 

    

    

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

    

    
Code


    

    scripts.BittyViewports.getCameraCenterY(~)
    

    

    

    

    Get Camera Width
    

    Cameras → Properties
    

    

    
											Get Camera Width for Camera ID 

    

    

    
										Returns the Camera width for the given camera ID.
									
    

    

    
Code


    

    scripts.BittyViewports.getViewportWidth(~)
    

    

    

    

    Get Camera Height
    

    Cameras → Properties
    

    

    
											Get Camera Height for Camera ID 

    

    

    
										Returns the Camera height for the given camera ID.
									
    

    

    
Code


    

    scripts.BittyViewports.getViewportHeight(~)
    

    

    

    Viewports
    

    Setup
    

    

    Create Viewport
    

    Viewports → Setup
    

    

    
											Create Viewport ID  at X  Y  with Width  and Height 

    

    

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

    

    
Code


    

    scripts.BittyCameraBlocks.createDisplayPort(~,~,~,~,~);
    

    

    

    

    Set Viewport Rect
    

    Viewports → Setup
    

    

    
											Set Viewport ID  to X  Y  Width  Height 

    

    

    
										Sets the full rectangle of the given Viewport.
									
    

    

    
Code


    

    scripts.BittyCameraBlocks.setDisplayPortRect(~,~,~,~,~);
    

    

    

    

    Set Viewport Position
    

    Viewports → Setup
    

    

    
											Set Viewport ID  Position to X  Y 

    

    

    
										Sets the position of the given Viewport.
									
    

    

    
Code


    

    scripts.BittyCameraBlocks.setDisplayPortPosition(~,~,~);
    

    

    

    

    Set Viewport Size
    

    Viewports → Setup
    

    

    
											Set Viewport ID  Size to Width  Height 

    

    

    
										Sets the size of the given Viewport.
									
    

    

    
Code


    

    scripts.BittyCameraBlocks.setDisplayPortSize(~,~,~);
    

    

    

    

    Remove Viewport
    

    Viewports → Setup
    

    

    
											Remove Viewport ID 

    

    

    
										Removes the Viewport entry for the given ID.
									
    

    

    
Code


    

    scripts.BittyCameraBlocks.removeDisplayPort(~);
    

    

    

    Appearance
    

    

    Viewport Background Color
    

    Viewports → Appearance
    

    

    
											Set Viewport ID  Background Color to  Alpha  percent
										
    

    

    
										Fills the given viewport before drawing the camera image.
									
    

    

    
Code


    

    scripts.BittyCameraBlocks.setDisplayPortBackgroundColor(~,~,~);
    

    

    

    

    Clear Viewport Background
    

    Viewports → Appearance
    

    

    
											Clear Background for Viewport ID 

    

    

    
										Disables the background fill for the given viewport.
									
    

    

    
Code


    

    scripts.BittyCameraBlocks.clearDisplayPortBackground(~);
    

    

    

    

    Enable Viewport Background
    

    Viewports → Appearance
    

    

    
											Set Viewport ID  Background to On

    

    

    
										Turns the viewport background fill on or off.
									
    

    

    
Code


    

    scripts.BittyCameraBlocks.setDisplayPortBackgroundEnabled(~,~);
    

    

    

    

    Viewport Border
    

    Viewports → Appearance
    

    

    
											Add Border Thickness  Color  Alpha  percent to Viewport ID 

    

    

    
										Draws a colored border over the specified Viewport.
									
    

    

    
Code


    

    scripts.BittyCameraBlocks.setDisplayPortBorder(~,~,~,~);
    

    

    

    

    Viewport Scale Mode
    

    Viewports → Appearance
    

    

    
											Set Viewport ID  Scale Mode to Pixel Perfect

    

    

    
										Sets how the viewport image is scaled. Scale to Fit keeps the camera image proportional, Stretch to Fit fills the viewport exactly, and Direct draws the camera image at its original size..
									
    

    

    
Code


    

    scripts.BittyCameraBlocks.setDisplayPortScaleMode(~,~);
    

    

    

    Viewport Transforms
    

    

    Viewport Rotation
    

    Viewports → Viewport Transforms
    

    

    
											Set Viewport ID  Rotation to  Degrees
										
    

    

    
										Rotates the camera image inside the given viewport.
									
    

    

    
Code


    

    scripts.BittyCameraBlocks.setDisplayPortRotation(~,~);
    

    

    

    

    Flip Viewport Horizontally
    

    Viewports → Viewport Transforms
    

    

    
											Set Viewport ID  Flip Horizontal to On

    

    

    
										Flips the camera image horizontally inside the given viewport.
									
    

    

    
Code


    

    scripts.BittyCameraBlocks.setDisplayPortFlipHorizontal(~,~);
    

    

    

    

    Flip Viewport Vertically
    

    Viewports → Viewport Transforms
    

    

    
											Set Viewport ID  Flip Vertical to On

    

    

    
										Flips the camera image vertically inside the given viewport.
									
    

    

    
Code


    

    scripts.BittyCameraBlocks.setDisplayPortFlipVertical(~,~);
    

    

    

    

    Reset Viewport Transform
    

    Viewports → Viewport Transforms
    

    

    
											Reset Transform for Viewport ID 

    

    

    
										Resets viewport rotation and flipping back to normal.
									
    

    

    
Code


    

    scripts.BittyCameraBlocks.resetDisplayPortTransform(~);
    

    

    

    Properties
    

    

    Viewport Exists?
    

    Viewports → Properties
    

    

    
											Viewport ID  exists
										
    

    

    
										Returns true if a Viewport with this ID currently exists.
									
    

    

    
Code


    

    scripts.BittyCameraBlocks.displayPortExists(~)
    

    

    

    

    Get Viewport X
    

    Viewports → Properties
    

    

    
											Get Viewport X for ID 

    

    

    
										Returns the X position of the given Viewport.
									
    

    

    
Code


    

    scripts.BittyCameraBlocks.getDisplayPortX(~)
    

    

    

    

    Get Viewport Y
    

    Viewports → Properties
    

    

    
											Get Viewport Y for ID 

    

    

    
										Returns the Y position of the given Viewport.
									
    

    

    
Code


    

    scripts.BittyCameraBlocks.getDisplayPortY(~)
    

    

    

    

    Get Viewport Width
    

    Viewports → Properties
    

    

    
											Get Viewport Width for ID 

    

    

    
										Returns the width of the given Viewport.
									
    

    

    
Code


    

    scripts.BittyCameraBlocks.getDisplayPortWidth(~)
    

    

    

    

    Get Viewport Height
    

    Viewports → Properties
    

    

    
											Get Viewport Height for ID 

    

    

    
										Returns the height of the given Viewport.
									
    

    

    
Code


    

    scripts.BittyCameraBlocks.getDisplayPortHeight(~)
    

    

    

    Display
    

    Setup
    

    

    Set Display Area
    

    Display → Setup
    

    

    
											Set Display Area to X  Y  Width  Height 

    

    

    
										Sets the full rectangle of the Display Area.
									
    

    

    
Code


    

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

    

    

    

    Set Display Area Position
    

    Display → Setup
    

    

    
											Set Display Area Position to X  Y 

    

    

    
										Sets the position of the Display Area on the Canvas.
									
    

    

    
Code


    

    scripts.BittyCameraBlocks.setGameAreaPosition(~,~);
    

    

    

    

    Set Display Area Size
    

    Display → Setup
    

    

    
											Set Display Area Size to Width  Height 

    

    

    
										Sets the size of the Display Area on the Canvas.
									
    

    

    
Code


    

    scripts.BittyCameraBlocks.setGameAreaSize(~,~);
    

    

    

    Background
    

    

    Set Background Color
    

    Display → Background
    

    

    
											Set Background Color to  Alpha  percent
										
    

    

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

    

    
Code


    

    scripts.BittyCameraBlocks.setBackgroundColorInt(~,~);
    

    

    

    

    Set Background Image
    

    Display → Background
    

    

    
											Set Background Image to 

    

    

    
										Sets the Background Image used behind the final Game Image render.
									
    

    

    
Code


    

    scripts.BittyCameraBlocks.setBackgroundImage(~);
    

    

    

    

    Clear Background Image
    

    Display → Background
    

    

    
											Clear Background Image
										
    

    

    
										Removes the current background image and uses background color only.
									
    

    

    
Code


    

    scripts.BittyCameraBlocks.clearBackgroundImage();
    

    

    

    

    Has Background Image?
    

    Display → Background
    

    

    
											Has Background Image
										
    

    

    
										Returns true if a background image is currently assigned.
									
    

    

    
Code


    

    scripts.BittyCameraBlocks.hasBackgroundImage()
    

    

    

    Properties
    

    

    Get Display Area X
    

    Display → Properties
    

    

    
											Get Display Area X
										
    

    

    
										Returns the X position of the Display Area.
									
    

    

    
Code


    

    scripts.BittyCameraBlocks.getGameAreaX()
    

    

    

    

    Get Display Area Y
    

    Display → Properties
    

    

    
											Get Display Area Y
										
    

    

    
										Returns the Y position of the Display Area.
									
    

    

    
Code


    

    scripts.BittyCameraBlocks.getGameAreaY()
    

    

    

    

    Get Display Area Width
    

    Display → Properties
    

    

    
											Get Display Area Width
										
    

    

    
										Returns the width of the Display Area.
									
    

    

    
Code


    

    scripts.BittyCameraBlocks.getGameAreaWidth()
    

    

    

    

    Get Display Area Height
    

    Display → Properties
    

    

    
											Get Display Area Height
										
    

    

    
										Returns the height of the Display Area.
									
    

    

    
Code


    

    scripts.BittyCameraBlocks.getGameAreaHeight()
    

    

    

    Effects
    

    Zoom
    

    

    Set Camera Base Size
    

    Effects → Zoom
    

    

    
											Set Base Size to Width  Height  for Camera ID 

    

    

    
										Sets the base camera size used when calculating zoom. Zoom 1 uses this size.
									
    

    

    
Code


    

    scripts.BittyCameraBlocks.setCameraBaseSize(~,~,~);
    

    

    

    

    Set Zoom
    

    Effects → Zoom
    

    

    
											Set Zoom to  for Camera ID 

    

    

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

    

    
Code


    

    scripts.BittyCameraBlocks.setCameraZoom(~,~);
    

    

    

    

    Tween Zoom
    

    Effects → Zoom
    

    

    
											Set Zoom to  over  seconds using Linear for Camera ID 

    

    

    
										Smoothly changes the camera zoom using the selected easing mode.
									
    

    

    
Code


    

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

    

    

    

    Get Camera Zoom
    

    Effects → Zoom
    

    

    
											Get Camera Zoom for Camera ID 

    

    

    
										Returns the current zoom value for the given camera.
									
    

    

    
Code


    

    scripts.BittyCameraBlocks.getCameraZoom(~)
    

    

    

    

    Reset Camera Zoom
    

    Effects → Zoom
    

    

    
											Reset Camera Zoom for Camera ID 

    

    

    
										Resets the camera zoom back to 1.
									
    

    

    
Code


    

    scripts.BittyCameraBlocks.resetCameraZoom(~);
    

    

    

    Screenshake
    

    

    Shake Camera
    

    Effects → Screenshake
    

    

    
											Shake Camera ID  with Strength  for  seconds
										
    

    

    
										Shakes the camera view for the given camera ID.
									
    

    

    
Code


    

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

    

    

    

    Shake Camera XY
    

    Effects → Screenshake
    

    

    
											Shake Camera ID  with Strength X  Y  for  seconds
										
    

    

    
										Shakes the camera view with separate horizontal and vertical strengths.
									
    

    

    
Code


    

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

    

    

    

    Stop Camera Shake
    

    Effects → Screenshake
    

    

    
											Stop Shaking Camera ID 

    

    

    
										Stops any active screen shake for the given camera ID.
									
    

    

    
Code


    

    scripts.BittyCameraBlocks.stopCameraShake(~);
    

    

    

    

    

    

    

    

    FAQs
    

    

    

    
	These are the common first-time problems and quick fixes. Start here when something looks wrong before digging into the deep technical cave. The cave has bats. Probably Haxe bats.

    

    

    

    Problem: Nothing appears, or the camera system acts like it does not exist.
    

    

    Initialize bittyBIG Dynamic Camera System
    

    

    Solution: Begin every scene with this block before using any camera, viewport, display, zoom, rotation, or screenshake blocks.
    

    

    

    Problem: A camera was created, but it is not showing in the right place.
    

    

    
				Render Camera ID
				
				to Viewport ID
				

    

    

    Solution: Make sure the camera is rendered to a viewport. Use this block after creating the camera and viewport.
    

    

    

    Problem: The viewport is too large, too small, or off-screen.
    

    Solution: Use Display Area units. If the Display Area is 960x540, a left-half viewport is 0, 0, 480, 540. Use the Viewport Tester for help.
    

    

    

    Problem: The camera shows too much or too little of the world.
    

    Solution: Change Camera Size, not Viewport Size. Camera Size controls how much world the camera sees before zoom.
    

    

    

    Problem: Split-screen math feels wrong.
    

    Solution: Split the Display Area, not the screen. For a 720x405 Display Area, left/right split uses 360x405 for each viewport.
    

    

    

    Problem: Pixel art looks uneven or blurry.
    

    Solution: Use camera sizes that scale evenly into the viewport. Example: 320x180 into 1920x1080 gives a clean 6x scale.
    

    

    

    Problem: Zoom looks broken or crops more than expected.
    

    Solution: Remember that zoom changes how much world the camera sees. Higher zoom means closer view. Set the camera base size first, then apply zoom.
    

    

    

    Problem: The camera follows the wrong actor or crashes when centering.
    

    Solution: Make sure the actor variable exists before using it in the block. In the Quick Start example, player means your own actor variable.
    

    

    

    Problem: Actors disappear, die, or stop updating when outside Stencyl’s built-in camera view.
    

    Solution: Check actor behaviors for off-screen cleanup, kill-when-off-camera logic, or visibility-based simulation changes. The Dynamic Camera System can show a different view than Stencyl’s default camera.
    

    

    

    Problem: A viewport background or border does not appear.
    

    Solution: Check that the viewport exists first and that alpha is above 0. For a fully visible color, use 100 percent alpha.
    

    

    

    Problem: The display area is smaller than the screen and there is empty space around it.
    

    Solution: That can be correct. The Display Area is where the camera output appears. Use background color or background image blocks to control what appears behind it.
    

    

    

    

    

    

    

    Release Notes v 1.0
    

    

    

    
	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
      • 

    • display 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.

    

    

    Planned Future Features
    

    

    Cached Background Renderer
    

      

    • Cache static background images so bittyBIG can draw them using its own camera and parallax math.
      • 

    • Goal: reduce background pixel snapping caused by Stencyl's render path and give backgrounds smoother camera movement.
      • 

    

    Cached Tile / World Renderer
    

      

    • Cache static tile and world layers at scene load, then render from those cached images instead of relying on Stencyl's live layer redraw path.
      • 

    • Goal: reduce dependency on Stencyl's built-in camera, improve consistency across viewports, and prepare the renderer for stronger HTML5 output.
      • 

    

    Manual Rebuild Blocks
    

      

    • Add blocks that let users manually rebuild cached backgrounds, tile layers, or world layers when something changes.
      • 

    • Goal: support scenes where mostly-static layers occasionally need to update without forcing everything to stay live-rendered forever.
      • 

    

    Dirty-Region Updates
    

      

    • Update only the changed areas of cached layers instead of rebuilding the full cached image.
      • 

    • Goal: support larger scenes and runtime edits with less redraw cost.
      • 

    

    Animated / Dynamic Background Support
    

      

    • Support animated backgrounds, dynamic background layers, and other background effects after the static cached background path is stable.
      • 

    • Goal: keep the smooth bittyBIG-controlled background movement while still allowing more active scene presentation.
      • 

    

    HTML5 Tile Seam Improvements
    

      

    • Add rendering support for duplicated 1px tile borders or equivalent seam protection around cached tiles.
      • 

    • Goal: reduce visible seams during smooth HTML5 camera movement without forcing the camera to snap.
      • 

    

    Per-Viewport Debug Drawing
    

      

    • Add optional debug drawing for each viewport and camera.
      • 

    • Goal: make it easier to see camera bounds, viewport rectangles, centers, targets, offsets, and split-screen behavior while testing.
      • 

    

    Renderer Independence
    

      

    • Continue moving static rendering responsibilities into bittyBIG while keeping Stencyl as the editor, actor, block, scene, and asset workflow.
      • 

    • Goal: let bittyBIG control runtime camera/output behavior more completely without abandoning the Stencyl creation pipeline.
      • 

    

    

    

    

    
					bittyBIG Dynamic Camera System Documentation
    
					© 2026 bittyBIG Studio