Worms-style cartoon terrain in JavaScript
Generate Worms-style cartoon terrain in JavaScript. You can see a full demo on this page.
For browsers that support es6 modules: ```html ```
To support other browsers, you can put this javascript in a
main.jsfile 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
type-x.pngimages 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:
javascript 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:
You can apply a simple rendering pass to the terrain shape mask:
html
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.