Split Screen FX - Gideros

Love Special Effects, they do add a new dimension to your apps/games. Today we look at a very simple FX, the screen split, this simply shreds the screen into slices and scrolls them up or down (alternatively). To see that effect, look at the screenshot or the attached video.

This is perhaps one of the simplest effect that you can achieve, and ever so simple with Gideros SDK

The Theory behind

So, what are we trying to do with this FX? We are creating the screenshot/image into slices. Then we move the slices up or down alternatively. It is that simple. In technical terms, to achieve this effect (using popular Lua based mobile frameworks) you had to create the slices and then move them, it was not done dynamically. With Gideros SDK, we shall do all of this dynamically based on the parameters we pass to the function that does this.

Creating the Image

First ,before we embark onto any fx processing, let us look at (if you are not aware or are new to GiderosSDK) how to load an image onto the screen. Step 1. Load the Texture - Texture is any image that you want to work with

local tex = Texture.new("sample1.jpg")

Step 2. Create a Bitmap from this texture - The texture is loaded and reused, but it is the Bitmap that is created and displayed on screen. So we need to create a bitmap from the texture, we do that using the Bitmap function as

local bmp = Bitmap.new(tex)

Step 3. Displaying the image on the screen - you might have noticed that after the first two steps, you do not see anything on the screen, that is because we need to add that to the stage to be visible and seen, we do that with a simple function as

stage:addChild(bmp)

Now we have the image on the screen. A major portion of our work is in these functions.

Splitting the image

There are some new functions added to Gideros that allow for creating dynamic images. While this can be thought of as a mask, it is not strictly a mask, it is a canvas of custom size that can be used to draw on and then display on the screen. It has its Pros and Cons when compared with masks. Step 1. Create a custom canvas - We can do that by using the RenderTarget.new as

local canvas = RenderTarget.new(160, 480)

This above creates a canvas of width 160 and height 480 (a horizontal half of the screen at iPhone3 resolution). However this does nothing for a couple of reasons, we haven't drawn anything on this canvas, so it is blank and secondly nothing is added to the stage to be displayed. Think of it as the cast of a stage play, you cannot see them perform unless they enter the stage, it is only once they are on the stage can you see them. The same concept holds true for our display elements with Gideros SDK. Step 2. Create a bitmap from this canvas

local bmp_canvas = Bitmap.new(canvas)
 stage:addChild(bmp_canvas)

Even now we do not see anything on the screen because we have drawn nothing on the canvas. However in the step above, we create a bitmap from the canvas and add it to the stage. Step 3. Drawing something on the canvas - thereby also drawing on our bitmap derived from the canvas

local bmp1 = Bitmap.new(tex)
 canvas:draw(bmp1)

This might look a bit complicated but it is rather simple, textures cannot be drawn directly, so you create a bitmap from the texture and then that is used to draw onto the canvas. The canvas cannot be displayed directly, so you have to create a bitmap of the canvas to display it on the screen and every time you draw on the canvas, the bitmap derived from the canvas is updated automatically. now you should see the half of the texture. If you have typed all of the code shown here progressively, you might not see this effect as the full image is also on the screen and when you overlay the left half of the image, it is the same and thereby not visible. Simply comment the line above as

--stage:addChild(bmp)

now you shall see the half of the image on screen.

Creating multiple slices

All excited, this does open up new avenues for special Fx, right? However, the next wall you might hit is creating the second half of the image. EASY you say and you proceed with the following code

local canvas2 = RenderTarget.new(160,480)
 local bmp_canvas2 = Bitmap.new(canvas2)
 stage:addChild(bmp_canvas2)

 local bmp2 = Bitmap.new(tex)
 canvas2:draw(bmp2)
 bmp_canvas:setPosition(160,0)

SURPRISED???? you might be, you do see the two images but they are the same as can be seen in the screenshot below

Now what? How do we fix that

A while ago, there was another function that was added to GiderosSDK that made animation and picking portions from the texture easy, in fact we have an article here http://howto.oz-apps.com/2012/09/gideros-set-sprites-on-fire.html The concept or the solution is quite easy, we use TextureRegions, so rather than use the entire texture, we take a portion of the texture and render that into a bitmap and then draw it on our canvas.

local tex2 = TextureRegion.new(tex, 160, 0, 160, 480)

and then create the bitmap from this tex2, not tex, so our code for the second slice would look like

local canvas2 = RenderTarget.new(160, 480)
 local bmp_canvas2 = Bitmap.new(canvas2)
 stage:addChild(bmp_canvas2)
 bmp_canvas2:setPosition(160,0)


 local tex2 = TextureRegion(tex,160,0,160,480)
 local bmp2 = Bitmap.new(tex2)
 canvas2:draw(bmp2)

Now you would see the complete picture not the same two halves.

Splitting it further into smaller slices

I leave this bit as exercise to hone (better) your skills. The tip for that is for every slice you will have to create a slice texture, a canvas, a bitmap from the texture and then a bitmap from the canvas which is visible on the screen. In the video or the screenshot at the very top, I have used 64 slices and each is 5 pixels wide (64 * 5 = 320)

Where to from here

From here, you can experiment and try different effects as you can split the image into any number of pieces you want and howsoever you want, you can even create chequered squares, add physics to those and let them fall down like broken blocks. Imagination is the key, these few functions are the solution ;) UPDATE: Here are some more effects that are achieved by altering the movement a bit.