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.
If you have your underwater image too then let’s begin with the first step.
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
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
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.
Adding Images and Masks to Scene
Now we are ready to add our images. Below you can see the code lines.
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
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
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.
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.