Username or E-mail
Password (Forgot?)
New? Sign Up
Join or Sign In
Forums Stencylpedia Stencyl TV Translations Go Pro - Plans & Pricing Download Stencyl


Switch to Book Layout

1: Getting Started

  • Getting Started
  • Crash Course
  • Crash Course 2
  • StencylForge

2: Building Logic

  • What is a Behavior?
  • Creating a Behavior
  • Attributes
  • Game Attributes
  • Attribute Types
  • Events
  • Our Behaviors

3: Actors

  • What are Actors?
  • Animations
  • Motion & Forces
  • Physics
  • Controls
  • Collisions & Groups
  • Killing vs. Recycling
  • Tweening
  • Effects
  • Chapter 3 Challenge

4: Scenes

  • Scene Basics
  • The Camera
  • Tilesets
  • Regions
  • Drawing Text & HUDs
  • Changing Scenes
  • Music, Sounds & Channels
  • Backgrounds
  • Customizing Actors
  • Chapter 4 Challenge

5: Game Mechanics

  • Saving
  • Pausing
  • 3rd Party Services
  • Web Requests

6: Advanced Topics

  • Get/Set Attributes
  • Custom Events
  • Blending Modes
  • Lists
  • Custom Blocks
  • Continuous Collisions

7: Testing & Tuning

  • Testing Games
  • Optimizing Performance 1
  • Optimizing Performance 2

8: The Last 10%

  • Flash Publishing
  • Standalone Apps
  • iOS App Store
  • Chrome Store
  • Making Money

M1: Mobile - Intro

  • Getting Started
  • Testing on your Device
  • Flash -> iOS Guide

M2: Mobile - Basics

  • Atlases
  • Drawing Text
  • Retina Display
  • Accelerometer
  • Joystick
  • Universal Games

M3: Mobile - Services

  • iAds
  • Game Center
  • In-App Purchases

M4: Mobile - Publishing

  • Debugging
  • Publishing to the App Store
  • Optimizing Performance
  • Promoting your Game

A: Troubleshooting

  • Showstoppers
  • General FAQ
  • iOS FAQ
  • The 90% Memory Warning
  • Recovering Broken Games
  • Can't Export to SWF
  • Reloading Documents
  • Generating Logs
  • Flash Security Settings
  • How to Report Bugs

B: How-To Guides

  • Importing Assets
  • Scene Designer
  • Code Mode
  • Font Editor
  • Pencyl (Image Editor)
  • Tile Editor (Shapes)
  • Game Cleaner

C: Reference

  • Glossary
  • Block Reference
  • Useful Shortcuts
  • Stencyl API

D: Resources

  • Stencyl TV
  • Abigayl's Guides
  • Giving Critiques
  • Creating Extensions
  • Translating Stencyl
  • Credits

3.0 Drafts (In Progress)

  • What's New in Stencyl 3.0?
  • Setup (Android)
  • Setup (Desktop)
  • Setup (iOS) - Concepts
  • Setup (iOS) - Mac
  • Setup (iOS) - Windows
  • Testing iOS on Windows
  • iOS Troubleshooter

  • Mobile App Scaling
  • Full Screen Mode
  • Simple Physics
  • Backgrounding an App

  • iOS App Store
  • Mac App Store
  • Windows Store
  • Google Play
  • HTML5

  • Android Ads
  • Android Purchases (WIP)
  • 4" Form Factor (iPhone 5)
  • Mobile Input
  • Mobile Features

  • Extending the Engine
  • iOS / Android Extensions
  • Developing the Official Extensions
  • Developing the Engine

  • iAds (Revised)
  • Game Center (Revised)
  • iOS Purchases (Revised)
  • Atlases (Revised)
  • Drawing Text (Revised)
  • Joystick (Revised)
  • Accelerometer (Revised)
  • Sounds (Revised, WIP)
  • Debugging (Revised, WIP)
  • iOS Performance (Revised)
Level: Beginner

The Camera

Contents

  • Scrolling
  • Example: Making the Camera Follow the Player
  • Moving the Camera
  • Off Screen Actors Become Inactive


Scrolling

Although some games exist entirely on a single screen, many extend beyond that. For example, think about a game similar to Super Mario Bros. Levels extend beyond a single screen.

In games like these, when the player walks to the right, the game “scrolls” to the right.


How does this “scrolling” work? In simple terms, scrolling is the act of changing what part of the scene is visible.

One can draw a connection to something we’re all familiar with - peering through the viewfinder (or screen) of a camera to compose a photograph.

The “camera” in our engine is the exact same concept - it’s the “thing” that controls what part of the scene is visible.

Note: In fact, the “camera” is an actor! It’s an invisible, non-physical actor, but like any kind of actor, it has a position and it can be moved around.

 

Example: Making the Camera Follow the Player

In many games, the camera follows the player, so that the player is always on screen.

This turns out to be trivial to accomplish since we have a “camera follow player” block as well as a pre-defined Behavior that you can attach to any scene that does the same thing.


Moving the Camera

The camera can be moved in 2 different ways:

  1. Set the camera’s (x,y) position.
  2. Make the camera follow an Actor. This will set the camera’s position to the center point of the Actor. Unlike the name suggests, this is a one-off move that must continually be used to continue the “following”


(Scene > View > Camera)

One question you may have is: what if I make the camera go outside the scene’s boundaries? It turns out that the camera is locked to those boundaries and won’t head beyond them.

 

Off Screen Actors Become Inactive

Something you may notice is that actors that are off screen stop “simulating”, as if they "froze" in time. We do this to preserve performance.

Nevertheless, there are cases where you want an actor to be active regardless of whether it’s on or off screen.

To make an actor always active, use the following block.


(Actor > Properties > Misc)

 

Summary

  • Scrolling is controlled by the camera.
  • The camera is a special kind of actor. It has a position and can be moved around.
  • Off screen actors become inactive. Use the “always simulate” block to override this.


Challenge 1: Auto-Scrolling

In some platformers, levels can auto-scroll. The player has no control over the camera.

How do we accomplish this effect given that you only have control over setting the camera’s position?

One approach is to make a dummy actor that controls the camera (by having the camera continually follow this actor).

By controlling this dummy actor, you gain complete control over the camera and can do more with it, such as panning it towards a destination over a time period.

Your challenge is this: Create a game that implements auto-scrolling.

Once you’ve got a simple auto-scrolling behavior completed, extend it so that once it reaches its first destination, begin auto-scrolling to the next one. Generalize this to work with an arbitrary number of destination points.

After that, figure out a way to prevent the player from exiting from the left/right sides of the screen. If you play any Mario game, you’ll notice that there’s an invisible “wall” that pushes you along should you try to exit the sides of the screen.

 

Challenge 2: Grid-Based Camera

Retro games have seen a resurgence in the past few years. To complete the retro feel of these games, some developers go to great lengths to preserve the precise, “8-bit” feel of these games.

Your task is this: create a retro-feeling camera that locks to the scene’s grid.

Instead of smooth, continuous motion, the camera only assumes positions that are multiples of the tile size. Create a game with this kind of camera motion.



Last Updated: 2012-03-30 by Jon

16090 have read this article
Disclaimer: The Stencyl Team does not actively monitor comments on articles. If you're seeking help for your game, please ask a question on the forums. Thanks!
3 Comments
lawgo
I'm so pleased that it's amazingly easy to implement camera follow. Huzzah!
0 10 months, 1 week ago
jwjb
The first video "Super Mario World - The Lost Lands: Pipe Caverns 1" is marked private and cannot be viewed.
1 10 months, 2 weeks ago
darkknighth20
Thanks for this guide!

I ran into an issue where the "Actor is on Screen" function kept counting me as not being on the screen when my actor was barely off the screen.

To remedy this, I used the function 'set offscreen bounds to' lower the sensitivity. Hopefully this helps someone else!

0 1 year, 1 month ago



Commenting Guidelines

Sign In to Comment

Make Games

  • What is Stencyl?
  • Roadmap
  • Pricing

Play

  • Arcade
  • Showcase

Community

  • Forums
  • Chat
  • Translations

Help

  • Stencylpedia
  • Stencyl TV

About Us

  • Blog
  • Contact Us
  • Press
  • Privacy
Follow Stencyl on Twitter



© 2013 Stencyl, LLC.