Back

GLView

GLView is a fast 2D canvas suitable for drawing and moving graphics around on the screen quickly, ideal for games.

You can create a GLView object using the CreateGLView method of the app object:

 glview = app.CreateGLView( width, height, options );

The options parameter should be set to "Fast2d".

Use the CreateImage method of the GLView object to create an image that can be used with the GLView:

 glview.CreateImage( fileName, callback );

Pass the name of a function to CreateImage, which will be called once the image is ready to use.

The DrawImage method can be used to draw GLView images:

 glview.DrawImage( image, x, y, width, height, angle );

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

Example - DrawImage

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     

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

var angle = 0;

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

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

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

    app.AddLayout( lay );
}

function StartRendering()
{
    setInterval( DrawFrame, 1000/30 );
}

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

    angle = angle + 10;
    if( angle == 360 ) angle = 0;

    glview.Render();
}
    Copy     Copy All      Run     

GLView supports the use of Sprite Sheets. The DrawSprite method can be used to draw part of an image to the GLView.

See 'CreateGLView for more informations and a complete function list