Posted on by

Note: Graphics 2.0 is now in public beta for all Corona SDK Pro and Enterprise subscribers. Please see Walter’s recent blog piece on the news.


This week I wanted to give you some more eye candy from our next-generation graphics engine to demonstrate how easy it will be to add filter effects to your app.

Like in the 2.5D quadrilateral distortion preview, we’ve modified the Fishies sample app. This time, we’ve taken the background aquarium image and created a 3×3 grid. Then we applied a filter effect to each tile (except for the center one):

To apply a filter effect, you just make one function call. For example, here’s how you’d apply the “pixelate” filter like in the top-middle of the video:

image:setEffect("filter", "pixelate")

In the video, we only show you a handful of filters, but you’ll soon have a huge catalog of built-in filters to choose from.

Right now, the preliminary list includes the following:

  • “blur”
  • “brightness”
  • “bulge”
  • “color”
  • “contrast”
  • “dispersion”
  • “dissolve”
  • “emboss”
  • “pixelate”
  • “saturate”
  • “sepia”
  • “swirl”
  • “vignette”
  • “wipe”
  • “wobble”
  • “chromaKey”
  • “duotone”
  • “monotone”
  • “grayscale”
  • “invert”

We’ve got more on the way, so if you have a favorite, let us know!

And yes, we’d like to let you write your own shaders to create custom filter effects, but that’s further out.

BTW, if you are hankering to get your hands on the new graphics engine, we will be seeding this out to beta testers very soon — possibly as soon as next month!

UPDATE: Sign up to be a beta tester here: http://coronalabs.com/beta


Posted by . Thanks for reading...

29 Responses to “Corona Weekly Update: Photoshop-style Filter Effects”

  1. ojnab

    Amazing. Looking very much forward for the new graphics engine.
    Can i sign up as a beta tester for this?

    Reply
  2. Andreas

    Wonderful!

    Can I combine filters, e.g. “blur”, “brightness” and a bit of “contrast” to show maybe clouds far away?

    And when I fly near the clouds I then would be able to gradually tone the filters down, a whole new range of visual fx would be possible by combining filters …

    Best,
    Andreas

    Reply
    • Walter

      Out of the box, single effects are going to be easy.

      In parallel, we have something in the works so you can chain multiple filter effects, so you can combine multiple filters together!

      Reply
  3. hangn

    when the windows simulator will support native textboxs and textfields?

    Reply
  4. Chris

    Looking good – how do you control the amount of the effect, especially for the blur?
    This would be important. Will it be able to change it using the transition.to-function?

    Also, will we be able to use it with masks, i.e. blur a hard-edged mask or do other funky stuff?

    This is looking really good – I hope to test it asap! :)

    Reply
    • Walter

      We will have a way to parameterize the inputs to each filter. And yes, being able to tween that with transition.to is definitely our goal.

      Good idea on the masks. We’ll play with that.

      Reply
      • Chris

        Sounds awesome. If you need any more hints from a designers aspect, just let me know.

        Masks have been a pain in the a**.. Aswell ass AA for display.objects..

        Reply
  5. Chris

    Also please add a Treshhold – in combination with bluring a group of objects (maybe even display-groups?!!!) we could make a fast-rendered liquid simulation.

    Reply
  6. Josep Alemany

    Great Job! I Wanna be a beta tester to ;)

    We can do effects by groups?

    The code to do The efffects colud be changed?

    Regards,

    Josep Alemany

    Reply
    • Walter

      We’re working on doing effects on entire group. This will involve doing the equivalent of an in-memory screen capture of the group and then applying the effect after that.

      Reply
      • Chris

        I still hope that will work – if it can display 200 fishes with an ease, it should be able to blur a whole disply group with 100 particles ;)

        Reply
  7. Perry

    Being able to utilize transition.to would be amazing! Looks great! One more stake in Flash’s heart :)

    Perry

    Reply
    • Walter

      Yup, we’re working on parameterizing the filter parameters! No comment on Flash :)

      Reply
  8. Dyson122

    At some point it’d be nice to know which new effects will be available to Starter and which will be reserved for Pro.

    Or can we assume that Starter will only have exactly what we have now (but on the faster engine), while Pro gets all the new stuff?

    Reply
    • Walter

      Yes, if you’re a Starter, you will get the equivalent graphics 1.0 functionality, so you will still benefit from the faster engine. To use the new graphics features in graphics 2.0, you will need to upgrade to Pro.

      Reply
  9. Daniel Kirk

    Will it be possible to do straight colour replacements in an image? So say I had multiple sports teams in an app, I could do one image for a sportsman, and then just do colour replacements to change his clothes for each team?

    Reply
  10. Lerg

    Drop shadow, Outline, Inner and Outer Glow applied to vector graphics with antialiasing and variety of settings would be amazing!

    Reply
    • Terry Schussler

      I would definitely put a strong vote in for Drop shadow, Inner and Outer Glow. These were filters that I have seen many Adobe Flex/Flash developers use.

      Reply

Leave a Reply

  • (Will Not Be Published)