New to Beyond Casual? – start from part 1!

From shooters to posters

Moon Patrol (1982)

The motion parallax effect has been vastly used in computer games for decades. In the 80s its was something you actually looked for in a game. If space invaders began with static camera, moving craft was quickly simulated by moving the background. At some point – the shooters and platformers rendering added the motion parallax effect – by showing more then one layer of background, each moving at different speed. Back then, was not simple – especially if you didn’t have access to HW 'blittering'

In our time – 3D rendering is commodity. And game programmers don’t need to give it a 2nd thought – as moving the virtual camera within the scene will also create the motion parallax. So for 3D content – we can simply take it for granted. But history repeat itself – and motion parallax is strong today in mobile platforms


For every process of revolution there are countless evolutions that derive from it or support it. After all, market mechanics do not tend to throw away all existing  material s upon changes. Upon the wide adaptation of TVs, some shows were actually hearing music with some static slide or even just showing the orchestra. For a notable period commercials were a mixture of just hearing the reporter citing the vendor’s slogans, or just still stream showing the printed advertisement poster. We continue to consume the older media with the newer inventions, as the cost of creating everything from scratch is intolerable.  

With the dropping cost of flat panel displays – digital signage is replacing the printed posters. Some of those continue to involve and add a level of interaction – but what kind of content will populate it?
Totally new content can be customized for the poster dimensions, user’s state of mind, and technical capabilities of the media (Like touch and gesture detection). Just like the common annoying little flash banners – such signs can offer you to kick a ball, punch sponge bob, leave a virtual graffiti or a funny augmented picture of yourself

The whole thing deserves several posts for itself of course – there are countless amazing possibilities here!

But before the full revolution happens – we already see those signs running legacy content:

  •  Non interactive TV commercials
  • Interactive internet flash advertisement
  •  Slideshow of static posters – that were designed for the correct location and audience, but do not enjoy the interactive and dynamic possibilities of the medium

“Its allllive!”

If we can track the viewer of the poster – wouldn’t it be nice to give him some motion parallax as he moves? But – our legacy content is not 3D… Do we really need to redesign all our posters for that?

Let’s look on the design process of a poster. The designer thinks on the place of the poster, at what distance the audience might be standing. When done right, the visual composition is cleverly designed to draw attention to the main merchandize and brand.

Technically speaking –  he will be using Adobe Photoshop or similar package. Specifically – he will use the features of layers extensively. There will be at least one layer for the background, and separate layers for the objects, captions and more. Before production – those layers will be flattened and sent to print. Going back to the motion parallax – what if we consider taking the layers before this process? The layer separation, can be combined with estimation of the designated virtual distance of viewer, and printed items – and almost automatically provides us with what we need in order to create a motion parallax sign!

The focus here is not on technology – but of the production process. Using this small idea – we can utilize the existing content and commonly used tools. Solving the content evolution may be one of the kicks the industry needs in order to justify the cost of adopting this new technology!
  • Conversion process:
    • The process begins by taking the original psd file that was used to create a standard poster
    • Estimate the user distance that was targeted by the designer at the time of creation
    • Estimate the appropriate distance of each layer from the plane of the poster
    • Simple geometry can now give us the ‘native’ scale and distance of each layer
  • Rendering process:
    • Pick the active viewer (IE using face detection)
    • Using the active viewer position, pan and scale each layer
    • A nice addition is adding some ‘shallow depth of field effect’ on the background. It need not be accurate – our brain is not that sensitive (Our pupil’s F-number changes all the times with various lighting conditions anyhow).  As the viewer get closer and closer – the background can blur away. It also nicely draws the attentions towards the main object

No comments:

Post a Comment