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


Worms-style cartoon terrain in JavaScript

123 Stars 8 Forks Other 41 Commits 0 Opened issues

Services available

Need anything else?


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.