Create a destructible terrain with Stencyl 3.1 image API

The new release of Stencyl adds a lot of awesome features you can see in the official Stencyl 3.1 release page, and above all an interesting image API which will allow us to explore new options of gameplay.

Today I am showing you how to create a destructible terrain and play with it. We will make something simpler than the Box2D destructible terrain I showed you some time ago, but it’s really effective although I am not using “real” physics.

First, let’s see what we are going to do:

The green actor is moving around the stage, and you can dig holes in the terrain with a mouse click. For the sake of semplicity, holes have a square shape, but they can be any shape you want, since both terrain and holes are images.

Now let’s see how easy is the creation of this prototype thanks to Stencyl’s image API. If you are new to Stencyl, you can start with some of these tutorials.

DRAWING THE IMAGES

First, you need to know the path Stencyl uses to save the games. You can find it in File -> Preferences -> Workspace.

Inside your game folder, create a new folder called extras where you will save your images. In the picture, you can see how I created an image for the terrain and an image for the hole to dig.

Before you continue, I have to say some images created with PhotoShop using Save for Web did not work. It’s probably a matter of PhotoShop way of saving, and the same images created with Save as worked with no problems.

Now we have the terrain, we have the images so we can start “coding”.

THE BEHAVIOR

For the sake of semplicity, I placed all the actions and events in a single scene behavior, which has three events:

Created: executed only once, as soon as the scene is created.

Click: when I click on the scene

Drawing: each time the scene is refreshed

Let’s start with the event called when the scene is created:

We have three local variables here, called attributes in Stencyl: Direction, Terrain and Hole.

Direction just specifies the direction, in pixels, the “player” will’ move at each frame. Setting it at 1 will cause the player to move to the right. Terrain and Hole will store respectively the images of the terrain and the hole I uploaded in extras folder.

With image from file block you just have to specify the relative path (without quotes) and your variables will contain the image itself.

But the only bare image is not enough to have it ready to be used in our games, we’ll need instance of to make it accessible to game events.

Also notice the player actor is also created in this block.

Now let’s see what happens when the player clicks on the stage:

Really easy here, the hole image is used to clear the terrain image. Just think about PhotoShop eraser tool. Clear <image> using <image> block will handle the whole thing.

Finally, the event to handle player movement is not that interesting for the scope of this tutorial, since it just defines some hot spots in the actor to check for collisions again terrain image with get pixel at block.

It basically shares the same concept with my pure JavaScript platform game engine.

I have a couple of ideas about a game to create with this API, and I can’t recommend enough Stencyl for its ease of use. Download the entire project.

Get the most popular Phaser 3 book

Through 202 pages, 32 source code examples and an Android Studio project you will learn how to build cross platform HTML5 games and create a complete game along the way.

Get the book

214 GAME PROTOTYPES EXPLAINED WITH SOURCE CODE
// 1+2=3
// 100 rounds
// 10000000
// 2 Cars
// 2048
// A Blocky Christmas
// A Jumping Block
// A Life of Logic
// Angry Birds
// Angry Birds Space
// Artillery
// Astro-PANIC!
// Avoider
// Back to Square One
// Ball Game
// Ball vs Ball
// Ball: Revamped
// Balloon Invasion
// BallPusher
// Ballz
// Bar Balance
// Bejeweled
// Biggification
// Block it
// Blockage
// Bloons
// Boids
// Bombuzal
// Boom Dots
// Bouncing Ball
// Bouncing Ball 2
// Bouncy Light
// BoxHead
// Breakout
// Bricks
// Bubble Chaos
// Bubbles 2
// Card Game
// Castle Ramble
// Chronotron
// Circle Chain
// Circle Path
// Circle Race
// Circular endless runner
// Cirplosion
// CLOCKS - The Game
// Color Hit
// Color Jump
// ColorFill
// Columns
// Concentration
// Crossy Road
// Crush the Castle
// Cube Jump
// CubesOut
// Dash N Blast
// Dashy Panda
// Deflection
// Diamond Digger Saga
// Don't touch the spikes
// Dots
// Down The Mountain
// Drag and Match
// Draw Game
// Drop Wizard
// DROP'd
// Dudeski
// Dungeon Raid
// Educational Game
// Elasticity
// Endless Runner
// Erase Box
// Eskiv
// Farm Heroes Saga
// Filler
// Flappy Bird
// Fling
// Flipping Legend
// Floaty Light
// Fuse Ballz
// GearTaker
// Gem Sweeper
// Globe
// Goat Rider
// Gold Miner
// Grindstone
// GuessNext
// Helicopter
// Hero Emblems
// Hero Slide
// Hexagonal Tiles
// HookPod
// Hop Hop Hop Underwater
// Horizontal Endless Runner
// Hundreds
// Hungry Hero
// Hurry it's Christmas
// InkTd
// Iromeku
// Jet Set Willy
// Jigsaw Game
// Knife Hit
// Knightfall
// Legends of Runeterra
// Lep's World
// Line Rider
// Lumines
// Magick
// MagOrMin
// Mass Attack
// Math Game
// Maze
// Meeblings
// Memdot
// Metro Siberia Underground
// Mike Dangers
// Mikey Hooks
// Nano War
// Nodes
// o:anquan
// One Button Game
// One Tap RPG
// Ononmin
// Pacco
// Perfect Square!
// Perfectionism
// Phyballs
// Pixel Purge
// PixelField
// Planet Revenge
// Plants Vs Zombies
// Platform
// Platform game
// Plus+Plus
// Pocket Snap
// Poker
// Pool
// Pop the Lock
// Pop to Save
// Poux
// Pudi
// Pumpkin Story
// Puppet Bird
// Pyramids of Ra
// qomp
// Quick Switch
// Racing
// Radical
// Rebuild Chile
// Renju
// Rise Above
// Risky Road
// Roguelike
// Roly Poly
// Run Around
// Rush Hour
// SameGame
// SamePhysics
// Save the Totem
// Security
// Serious Scramblers
// Shrink it
// Sling
// Slingy
// Snowflakes
// Sokoban
// Space Checkers
// Space is Key
// Spellfall
// Spinny Gun
// Splitter
// Spring Ninja
// Sproing
// Stabilize!
// Stack
// Stick Hero
// String Avoider
// Stringy
// Sudoku
// Super Mario Bros
// Surfingers
// Survival Horror
// Talesworth Adventure
// Tetris
// The Impossible Line
// The Moops - Combos of Joy
// The Next Arrow
// Threes
// Tic Tac Toe
// Timberman
// Tiny Wings
// Tipsy Tower
// Toony
// Totem Destroyer
// Tower Defense
// Trick Shot
// Tunnelball
// Turn
// Turnellio
// TwinSpin
// vvvvvv
// Warp Shift
// Way of an Idea
// Whack a Creep
// Wheel of Fortune
// Where's my Water
// Wish Upon a Star
// Word Game
// Wordle
// Worms
// Yanga
// Yeah Bunny
// Zhed
// zNumbers