ClipRectangleExample

Overview

How to use the clip rectangles to control the rendered area of screen

Try It

Use the following Loom CLI commands to run this example:

loom new MyClipRectExample --example ClipRectExample
cd MyClipRectExample
loom run

Screenshot

ClipRectangleExample Screenshot

Code

src/ClipRectExample.ls

package
{

    import system.platform.Platform;
    import loom.Application;    
    import loom2d.events.Touch;
    import loom2d.events.TouchEvent;
    import loom2d.events.TouchPhase;    
    import loom2d.display.StageScaleMode;
    import loom2d.display.Image;   
    import loom2d.display.Sprite;   
    import loom2d.textures.Texture;
    import loom2d.ui.SimpleLabel;
    import loom2d.math.Point;
    import loom2d.math.Rectangle;

    /**
     *  Simple example to showcase the handling of clip rectangles
     */
    public class ClipRectExample extends Application
    {
        // setup some vars which will be modulated per tick

        // our clip rect!
        var clipRect = new Rectangle();

        // the size of the clip rect, set from the source image
        var clipRectSize = 0;

        // whether we are using the clip rect or not
        var clipRectToggle = false;

        // the container sprite
        var sprite:Sprite;

        override public function run():void
        {
            stage.scaleMode = StageScaleMode.LETTERBOX;

            var label = new SimpleLabel("assets/fonts/Curse-hd.fnt", 320, 128);
            label.text = "Tap to Toggle the ClipRect!";

            label.x = stage.stageWidth/2 - 320/2;
            label.y = stage.stageHeight - 120;
            stage.addChild(label);

            // Create our container sprite which will have the clip rect assigned
            sprite = new Sprite();
            sprite.x = 0;
            sprite.y = 0;
            sprite.width = stage.stageWidth;
            sprite.height = stage.stageHeight;
            stage.addChild(sprite);

            // add an image (which will be clipped)
            var image = new Image(Texture.fromAsset("assets/logo.png"));

            clipRectSize = image.height;

            image.x = stage.stageWidth/2 - clipRectSize/2;
            image.y = stage.stageHeight/2 - clipRectSize/2;

            sprite.addChild(image);

            // listen in for touches, and toggle the clip rect if we tap
            stage.addEventListener( TouchEvent.TOUCH, function(e:TouchEvent) { 
                var touch = e.getTouch(stage, TouchPhase.BEGAN);
                if (touch)
                {
                    clipRectToggle = !clipRectToggle;
                }
            } );            


        }

        override public function onTick():void
        {            
            // animate the clip rect based on time and the size
            var size = Math.abs(Math.sin(Platform.getTime()/500))  * clipRectSize;

            // the clip rect is based off the position of the sprite so offset it
            clipRect.x = stage.stageWidth/2 - size/2;
            clipRect.y = stage.stageHeight/2 - size/2;
            clipRect.width = size;
            clipRect.height = size;

            // set or clean depending on our toggle!
            sprite.clipRect = clipRectToggle ? clipRect : null;

        }


    }
}