Time for action – enabling the Debug Drawing feature
The game file to import and load for this session is 5961_03_01.stencyl.
Stencyl makes it incredibly easy to see how collision detection is configured within our game; all we have to do is use the Enable Debug Drawing feature.
- On the main menu in Stencyl, select Run | Enable Debug Drawing.
- Test the game.
- Navigate the monkey around the scene and take note of where the colored lines appear around the monkey and the tiles.
- Close the Adobe Flash Player window.
What just happened?
We've enabled the option that displays the debug drawing feature in Stencyl. When we tested the game with debug drawing enabled, we could see that colored lines are drawn around the monkey actor and the tiles.
These lines, which are normally invisible to players of our game, are used by Stencyl to determine when collisions have occurred, that is, when the lines of any two objects intersect (or touch) each other. If we examine some of the colored lines more closely, we can see that they completely enclose each object; for example, the monkey and the floating leafy platforms are each enclosed by their own rectangles.
When adjoining tiles form a larger, more complex shape, Stencyl will automatically create a single, large collision object. As we can see in the following screenshot, the ground, the walls of the temple ruins, and the logs are all considered by Stencyl to be a single solid object, even though we know that we created the jungle environment using small rectangular tiles.
The combining of tiles in this manner is an optimization process automatically carried out by Stencyl; we don't need to do any extra work in order for this to happen!
Note
Optimization is the process of making computer code do its job more efficiently, which, in practical terms, means that our games will run more smoothly, even when there is a lot of onscreen action and background calculation.
Debug drawing is extremely useful when designing a game, because it enables us to visualize the way in which Stencyl processes collisions, and this can help us see problems that we may otherwise have overlooked; we can debug collision detection within our game!
The colored lines around the objects represent the collision shapes for those objects, but we didn't need to define the collision shapes, because they had already been configured in the actor and the tiles that we downloaded from StencylForge.
We can also see, in the previous screenshot, that most of the tiles are enclosed within collision shapes, but some are not. For example, the rope barrier on top of the temple ruins does not have a collision shape defined, which is why the monkey doesn't bump into the rope during gameplay. This feature allows us to use tiles that are purely for decorative purposes. There is no technical reason for them to be in our game; they just look nice.