Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Recreating the "Doom" Screen Transition Effect with JavaScript and Canvas

DZone's Guide to

Recreating the "Doom" Screen Transition Effect with JavaScript and Canvas

· Web Dev Zone ·
Free Resource

Access over 20 APIs and mobile SDKs, up to 250k transactions free with no credit card required


This is a cool blog post that walks you through one developer's method for recreating the screen transition effect in the classic video game "Doom" using JavaScript and a <canvas> element.

The author, Jason Brown, achieves this effect using a standard drawImage with offsets. He uses a background image and a foreground image in columns offset in the y direction.

He created a canvas element in memory in which to draw the images, defined the height of the columns and set a fallSpeed transition for the columns.

You can read the original blog post here for a more detailed description including code snippets, and you can check out the codepen here.

Also, if you're interested in seeing how the original Doom developers implemented the screen-wipe effect, you can check out the relevant source code on GitHub.


#1 for location developers in quality, price and choice, switch to HERE.

Topics:

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}