CreateGLView

Hello World

Content:
- Render Loop
- Sprite Touch Detection
- Sprite Animations
- Methods

GLView is a fast 2D canvas suitable for drawing and moving graphics around on the screen quickly, ideal for games. The options parameter should be always set to “Fast2d”.

glv = app.CreateGLView( width, height, options ) → app object: GLView

Use the CreateImage method of the GLView object to create an image that can be used with the GLView.
You can specity a callback function too which will be called once the image is ready to use.

To draw the sprite on the canvas use the DrawImage method.
Note: don't forget to specify all parameters, including angle. Otherwise the image will not be drawn.
You can leave either width or height -1 to scale the other parameter according to the sprite aspect ratio.

Once all drawing has been done, the Render method must be called to render all the GLView graphics to the screen.

Example - DrawImage click to expand contents

function OnStart()
{
    lay = app.CreateLayout( "Linear", "FillXY" );

    glview = app.CreateGLView( 1, 1, "Fast2d" );
    lay.AddChild( glview );

    img = glview.CreateImage( "/Sys/Img/Hello.png", DrawFrame );

    app.AddLayout( lay );
}

function DrawFrame()
{
    glview.DrawImage( img, 0.25, 0.3, 0.5, -1, 45 );
    glview.Render();
}

Copy Copy All Run

Render Loop

To create a rendering loop for a game, use the setInterval JavaScript function to call your drawing function at regular intervals.
The example below draws a continuously rotating image by calling the DrawFrame function 30 times each second, updating the angle each time:

Example - Render Loop click to expand contents

Copy Copy All Run

Sprite Touch Detection

If you need to want to simulate OnTouch for a GLView Image, you will need to keep track of the position, width and height that it has been drawn with. Then use the GLView OnTouch event to determine if the touch coordinates are within the GLView Image yourself. To prevent touch detect on all sprites on the touch position define a drawing order according to a list.

Example - Sprite Touch click to expand contents

objects = [];

//Called when application is started.
function OnStart() {
    //Create layout
    lay = app.CreateLayout( "linear" );

    //Create GLView
    glv = app.CreateGLView( 1, 1, "Fast2d" );
    glv.SetOnTouchUp( touch );

    //set first image
    img1 = glv.CreateImage( "/Sys/Img/Hello.png" );
    img1.name = "img1";
    img1.X = 0.1; img1.Y = 0.3;
    img1.W = 0.7; img1.H = 0.4;
    objects.push(img1);

    //set second image
    img2 = glv.CreateImage( "/Sys/Img/Droid1.png", startRender );
    img2.name = "img2";
    img2.X = 0.5; img2.Y = 0.5;
    img2.W = 0.5; img2.H = 0.3;
    objects.push(img2);

    lay.AddChild( glv );

    //Add layout to app.
    app.AddLayout( lay );
}

// Draw images
function startRender() {
    for(var i in objects) draw(objects[i]);
    glv.Render();
}

// Check which image was touched
function touch(ev) {
    for(var i = objects.length; i-- > 0; ) {
        if( touched( objects[i], ev ) ) {
            app.ShowPopup( "touched " + objects[i].name );
            break;
        }
    }
}

function draw(img, ev) {
    glv.DrawImage( img, img.X, img.Y, img.W, img.H, 0);
}

function touched(img, ev) {
    return img.X < ev.X && img.X + img.W > ev.X
        && img.Y < ev.Y && img.Y + img.H > ev.Y;
}

Copy All

Sprite Animations

GLView supports the use of Sprite Sheets. The DrawSprite method can be used to draw part of an image to the GLView.
The following example uses a sprite sheet containing 8 stages of a character running. The DrawSprite method is used to draw each of the 8 sections in turn to give the effect of the character continuously running: