Need help with TerrainVer?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

124 Stars 10 Forks Other 41 Commits 0 Opened issues


Worms-style cartoon terrain in JavaScript

Services available


Need anything else?

Contributors list

# 505,172
40 commits


Generate Worms-style cartoon terrain in JavaScript. You can see a full demo on this page.

Snap 1

Generate a random terrain mask

For browsers that support es6 modules: ```html ```

To support other browsers, you can put this javascript in a

file and create a bundle with Rollup that you import:
rollup main.js --o js-bundle.js --f iife

The terrain type image is a low resolution image with red, blue, and black zones representing the general shape of a terrain. See the explanation in the demo page and

images in this repo for some examples.

If you have already loaded a terrain type image that you want to use, you can call the constructor directly:

const terrainGenerator = new TerrainGenerator({ width: 874, height: 546, terrainTypeImg: myImgElt })
const terrainShape = terrainGenerator.generate(Math.random())

The example above should produce an image like this: Snap 2

Simple rendering of a terrain mask

You can apply a simple rendering pass to the terrain shape mask:

import TerrainRenderer from './src/TerrainRenderer.js'

TerrainRenderer.fromImgUrl(terrainShape, { groundImg: './img/ground.png', // Required, url of a texture image for the terrain ground backgroundImg: './img/background.png', // Required, url of a background image charaImg: './img/chara.png', // Required, url of an image representing a grid of 'characters' to display charaWidth: 44, // Width of one character, if missing charaImg is assumed to be only one character charaHeight: 41, // Height of one character, if missing charaImg is assumed to be only one character nbCharas: 7, // Optional, default 10, Number of characters to display in the rendering borderWidth: 8, // Optional, default 8, width of the terrain border borderColor: '#89c53f', // Optional, default #89c53f, color of the terrain border waveColor: '#2f5a7e', // Optional, default #2f5a7e, color of the water waveFps: 20, // Optional, default 20, frame per second for the water animation waveDuration: 60000 // Optional, default 60000, duration of the animation in milliseconds, use 0 for infinite }).then((terrainRenderer) => { terrainRenderer.drawTerrain( Math.random(), document.getElementById('bgcanvas'), document.getElementById('bgwater'), document.getElementById('fgcanvas'), document.getElementById('fgwater') ) })

Like for the terrain mask, if you have already loaded the images to use you can call the TerrainRenderer constructor directly.

Snap 3

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.