Loading Cookies...
DisplaceR - Displacement Map Filter Tweener - AS3

DisplaceR is a lightweight Displacement Map Filter Tweener targeting Flash Player 9. Written in ActionScript 3.0¹², DisplaceR is built with the idea to be as simple as possible, becoming accessible by all kind of flash developers and designers. Being a static class makes it available anywhere in your project. Tweening is achieved only with one line of code.

DisplaceR.to(source_mc, map_mc, Regular.easeInOut, 255, 0.5);

(Before jumping in depth you may recollect the DisplacementMapFilter Documentation)

DisplaceR library provides static mothod "to()" for displacement manipulation of a source display object according the color data of provided map image. Methods such "from()" or "reverse()" may be added in future versions, for now the only other static method available is "dispose()". DisplaceR can also be used as object with "displace" property:

var displacer:DisplaceR = new DisplaceR(source_mc, map_mc);
var tw:Tween = new Tween(displacer,"displace", Regular.easeIn, 0,255,5);
The effect relies entirely on the provided map. In the example above the map is composed of four layered readial gradients in total placed in a movie clip in the Flash IDE - method that I call "hand-made". Of course you can pass a bitmap data generated with script on the fly, update it every frame etc.., but that is another subject :)

Let's look more closely at colors and how to generate displacement map without writting any code. DisplaceR uses the Red Color channel for displacement of pixels in X axis (horizontal) and the Green Color channel for displacement in Y (vertical). If you chose to pass a movie clip as map then it can be constructed of several overlapping colored gradients with blend mode ADD or SUBSTRACT applied to them (pretty much the same way as alpha or erase masks are built). This way we are ensuring that any color data in a layer above will be multiplied or substracted with the layer below in order to produce map with usefull color data. Generation of displacement map in short:

DisplaceR diagram

Since Red color channel displaces in X axis while Green color displaces in Y, both need to be able to manipulate the values positively or negatively. Thats why a map which creates no displacement at all is filled with a "middle-color" values of #808000.

#00(negative displacement) - #80(no displacement) - #FF(positive displacement);

Blend Modes are extremelly usefull when generating displacement maps. However we have to conform mathematically how to add/substract hex colors values. Here are how the different blend modes affect color data mixing with transparency:

DisplaceR blendmodes

Finally if you need a callback function you can use "onComplete" property:
DisplaceR.onComplete = function():void { trace("tween finished"); }

DisplaceR Library SWC will be available shortly, in the meanwhile view source at Github³ or download some flash examples from here.

¹ built on top of the DisplacementMapFilter and the native flash Tweener. Compiled is only 4 kb!
² DisplaceR can be easily translated to AS2 in order to target Flash Player 8. Contibutions are wellcome :)
³ current version of the tweener is still in earliest stage of development and it is possible to have flaws.
DisplaceR - Displacement Map Filter Tweener written in ActionScript 3, targeting Flash Player 9. Compiled is only 4kb.AS3, displace, filter, effect, tween, animation, layer, gradient, lightweight, library, blendmode, add, substract

In the previous part, we learned about the basics of the Apple II Hi-Res graphics mode, allowing us to display up to six colors on a 280x192 pixel screen. Today, we will explore the Double Hi-Res mode, its 16 colors and doubled resolution, how it works, the memory it occupies and what are its advantages and challenges...

Read more

Flash was once the dominant web technology for creating interactive and multimedia content. It powered countless websites, games, animations, and videos that entertained and educated millions of users. However, Flash also had many drawbacks, such as security issues, performance problems, and compatibility challenges. As newer web standards like HTML5 emerged, Flash became obsolete and was eventually discontinued by Adobe in 2020...

Read more

Have you ever stumbled upon an old blog post that you wish you could read again? What if that blog post was about something you're passionate about, like retro computers and programming? Unfortunately, many old blog posts are no longer available online today. But don't worry! Thanks to the WayBackMachine - an internet archive that provides backups of webpages throughout the years - you can still access these precious internet resources. In fact, it's important that we make sure these resources are available to the public again so that we can continue to learn from them and appreciate their value. That's why I'm excited to share with you a blog post about Apple II programming, especially about its Double Hi-Res graphics mode, originally published in BattleStations...

Read more

JS13K games is Javascript golfing competition that runs for a month between August 13th and September 13th every year. The game jam has one main characteristic - the entire game (source code, graphics, sounds etc.) must be contained in a 13 kilobytes ZIP archive, as constrained by the creator of the compo, Andrzej Mazur (@end3r)...

Read more

The Puzzle of Life was created during Castle Game Jam 2018 by Noncho Savov (me, programming) and Jurgita Raynite (art). The Game Jam was organized by James Newnorth (Spelkollektivet) and was held in a medieval castle located in Örebro, Sweden between the 7th and 15th of July. The main theme of the jam was "Capricious"...

Read more

My upcoming rogue-like role playing game RogueVerse Dungeon was showcased at Retrospelsmässan - one of the largest retro game conventions in the world! The convention is held every year in Gothenburg Sweden and I presented my game as part of Spelkollektivet exhibition. It was an amazing experience - I managed to collect a great portion of feedback from attendees of all ages.. and it was incredible to see a little girl beating my game:..

Read more

Check out my new game Formation Absent - a turn-based tactical puzzle, which is easy to win but hard to master. A game that is only 13 kilobytes, submission in JS13K competition. Theme of the competition this year is "Lost". As per Compo rules the game is contained in 13kb archive and includes 13 stages and a level editor. The game also keeps your game progress and score through utilizing URL vars. Here is an example of the gameplay:..

Read more

Each year, a unique JavaScript game development competition takes place within one month, starting on August 13th, named JS13KGames. What's interesting about this competition is that there is a filesize limit requirement on the submitted game source - the entire game must be packed in 13kB ZIP archive. In 2016, I participated with Skip'n Glitch, a two player competitive logical game involving strategy and arithmetics. The game has a single player mode set against a simple and predictable but challenging AI opponent. Two players can play against each other on the same device...

Read more

As the web tech is evolving, the flash player for web browsers is getting more and more obsolete. For example the biggest advertising platform - Google's DoubleClick dropped support for flash ads. I'm not speaking against the flash technology, which is still viable for game development (it can be easily compiled for mobile or wrapped into Steam). However in web there are new heroes and one of them is the HTML Canvas. I've already shared some lightweight JavaScript libraries used in #js13kgames and today I'm sharing another class - Lens Flare effect!..

Read more