How to Create Underwater Ambience Using Bitmap Masks in Corona SDK

featured

While i was doing some experiments with bitmap masking, i had an idea. Could i create an effect that make an image look like it is in the water? After some work, i got pretty satisfying result with some basic bitmap masks. In this tutorial i will show you my way and i am sure you can get better results by trying with different masks.

First i’ve searched for an appropriate and beautiful underwater image to add effects on it and found exactly what i wanted.

Artwork (c)  Ani Roschier
Artwork (c) Ani Roschier

If you have your underwater image too then let’s begin with the first step.

Creating Masks

I used Adobe Fireworks to create my mask images but you can use any image editing program because my mask images are so simple to make.

1- Open a new file with white background color

fireworks new file

I made my sample for the iphone 4 landscape mode. You know iphone 4 has 960px width and 640px height when it is landscape. I made my mask image’s width 500px and height 340px which are 20px more than 480×320. When i use this image with iphone 4 corona will automatically scale it to  960×640.

I made width and height 20 px more than 480×320 because according to corona sdk documentation, i need at least 3px black stroke around my mask image to make it work properly. I just wanted to be sure that my mask will work so i made 10 px black stroke and that’s why i need 20 px more in width and height 🙂

2 – Draw black horizontal lines on canvas and at least 3 px wide black stroke to each side

Mask image 1

Height of the horizontal lines and margins between them are totally up to you. You may want to change them in order to get the best result with your underwater image.

3 – Save your first mask image as mask1.jpg and open new file with same width and height.

4 – Import mask1 to your new file.

5 – Invert colors. I hope your image editing software has invert colors function.It will basically change black areas to white and white areas to black

6 – Don’t forget to draw at least 3 px wide black stroke to each side again, because when you inverted colors you also inverted black strokes around the sides to white too.

7 – Save your second mask as mask2.jpg.

Mask1 and Mask2.
Mask1 and Mask2.

Adding Images and Masks to Scene

Now we are ready to add our images. Below you can see the code lines.

Adding images

Lines 1,2 : Localize the display.contentWidth and display.contentHeight to reach them faster when you need.

Lines 4-6 : Add your underwater image which will be masked with mask1 to the center of the scene. I used display.newImageRect() because i want corona to change my underwater image with the @2x version if it is displayed on iphone 4 retina screen. You can find more information about dynamic image selection here

Lines 8-10 : Add your underwater image which will be masked with mask2 to the center of the scene.

Lines 12,13 : Define your mask1.jpg and mask2.jpg as your mask1 and mask2

Lines 15,16 : Set your masks to your underwater images.

And this is the result

Result 1

Even though we mask some part of underwater image, we can see almost whole image because mask1 and mask2 completes each others’ invisible parts. There are still some black horizontal lines because corona automatically scaled mask1.jpg and mask2.jpg to fit the retina screen of iphone4 so our mask images become a little bit blurry. This is negligible because we don’t need that much detailed masks.

Moving Masked Images

moving images

Lines 18,19 : Define new variables to hold the angles

Lines 21-27 : Add an instance method with the name enterFrame to image1

As you know this method will be called in every frame. It basically increases alfa and beta values, converts these values to radian angle, finds cosine and sine values of these angles, multiplies with 0.03 and 0.07 adds or subtracts them from the x and y positions of image1.

I used sine and cosine functions because no matter what angle you use they always get values between -1 and 1 so they are very good for oscillating moves.

Lines 29-32 : Add an instance method with the name enterFrame to image2.

Lines 34,35 : Add enterFrame events to Runtime.

Here is result

Well, it is almost finished but we should find a solution for the black areas. Fortunately solution is so simple. At the begining add the same underwater image to the background.

Final part

Now our underwater effect is ready. I added some bubbles to make it more eye catching but unfortunately bubbles are not included in this tutorial.

I wish you find this tutorial useful. Please don’t hesitate to ask questions in your comments.

2 thoughts on “How to Create Underwater Ambience Using Bitmap Masks in Corona SDK

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s