Back

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

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

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      

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

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       Run      

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:

Example - Sprite Sheet Animation

var spriteCount = 8;
var srcWidth = 50;
var srcHeight = 60;
var frameCount = 0;

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

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

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

    app.AddLayout( lay );
}

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

function DrawFrame()
{
    var spriteIndex = Math.floor(frameCount / 2) % spriteCount;

    var sx = spriteIndex * srcWidth;
    var sy = 0;

    glview.DrawSprite( img, sx, sy, srcWidth, srcHeight,
                0.3, 0.4, 0.3, -1 );

    glview.Render();
    frameCount++;
}
    Copy     Copy All       Run      

Methods

The following methods are available on the GLView object:

aspect → number: float
canvas → object
ClearFocus()
CreateImage( file, callback ) → app object
DrawImage( image, x, y, w, h, angle )
DrawSprite( sheet, sx, sy, sw, sh, dx, dy, dw, dh, angle )
Focus()
GetAbsHeight() → number: integer
GetAbsWidth() → number: integer
GetContext() → object: ctx
     ctx.capture( x, y, w, h, fileName, successCallback, errorCallback )
     ctx.clearRect( x, y, width, height )
     ctx.drawImage( image, sx, sy, sw, sh, dx, dy, dw, dh )
     ctx.render()
     ctx.resetTransform()
     ctx.restore()
     ctx.rotate( angle )
     ctx.save()
     ctx.scale( a, d )
     ctx.setTransform( a, b, c, d, tx, ty )
     ctx.transform( a, b, c, d, tx, ty )
     ctx.translate( tx, ty )
GetHeight( options ) → number
GetLeft( options ) → number
GetParent() → app object
GetPosition( options ) → object: { left, top, right, bottom }
GetTop( options ) → number
GetType() → string: “GLView”
GetVisibility() → string: “Show” or “Hide” or “Gone”
GetWidth( options ) → number
Gone()
height → number: integer
Hide()
IsEnabled() → boolean
IsOverlap( obj, depth ) → boolean
IsVisible() → boolean
Method( name, types, p1, p2, p3, p4 ) → all types
Render()
SetBackColor( color )
SetBackGradient( color1, color2, color3, options )
SetBackGradientRadial( x, y, radius, color1, color2, color3, options )
SetBackground( file, options )
SetEnabled( enable )
SetMargins( left, top, right, bottom, mode )
SetOnTouch( callback )
SetOnTouchDown( callback )
SetOnTouchMove( callback )
SetOnTouchUp( callback )
SetPadding( left, top, right, bottom, mode )
SetPosition( left, top, width, height, options )
SetScale( x, y )
SetSize( width, height, options )
SetTouchable( touchable )
SetVisibility( mode )
Show()
Tween( target, duration, type, repeat, yoyo, callback )
width → number: integer
boolean
app object
function
number
string
unknown
number: angle in degrees (0..360)
number: factor
number: fraction (0..1)
number: integer
number: milliseconds
number: pixel
number: angle in radient (0..2*π)
string:
  hexadecimal: “#rrggbb”, “#aarrggbb”
  colourName: “red”, “green”, ...
string: comma “,” separated
string: path to file or folder ( “/absolute/...” or “relative/...” )
string: “fast2d”
string: “/sdcard_relative”
string: “px”
string: “screen”, “px”
string: “left-right” or “right-left” or “top-bottom” or “bottom-top” or “bl-tr” or “br-tl” or “tl-br” or “tr-bl”
string: “repeat”
string: “px” or “sp” or “dip” or “mm” or “pt”
string: “px” or “sp” or “dip” or “dp” or “mm” or “pt”
string: “Show” or “Hide” or “Gone”
string: “Linear.None” or “Quadratic.In/Out” or “Cubic.In/Out” or “Quartic.In/Out” or “Quintic.In/Out” or “Sinusoidal.In/Out” or “Exponential.In/Out” or “Circular.In/Out” or “Elastic.In/Out” or “Back.In/Out” or “Bounce.In/Out”
object: glv Image
object: GLV Image
object: { source, action, count, x: [ x1, x2, x3 ], y: [ y1, y2, y3 ] }
object: { source, action, count, x: [ x1, x2, x3 ], y: [ y1, y2, y3 ] }
object: { source, action, count, x: [ x1, x2, x3 ], y: [ y1, y2, y3 ] }
object: { source, action, count, x: [ x1, x2, x3 ], y: [ y1, y2, y3 ] }
object: { x, y, w, w, sw, sh, rot }
list: boolean,char,byte,short,int,long,float,double,String,CharSequence,...
function()
function( event )
function( event )
function( event )
function( event )
width/height relation
[HTMLDivElement]
glv.ClearFocus
Removes the focus of the control so that the user no longer has immediate access to it.
glv.CreateImage
Create a sprite object which can be drawn on the GLView
glv.DrawImage
Draws an image to the canvas
glv.DrawSprite
Draws a part of an image to the canvas.
glv.Focus
Set the focus to the control so that the user can interact with it immediately.
glv.GetAbsHeight
Get the absolute height of the control in pixels.
glv.GetAbsWidth
Get the absolute width of the control in pixels.
glv.GetContext
Returns the current FastCanvas context
glv.ctx.capture
Captures the current cached context to a png image.
The path is relative to /sdcard but requires a leading '/', ie “/Pictures/mycapture.png”
glv.ctx.clearRect
Note: This function is deprecated. does nothing. ctx is automatically cleared after render()
glv.ctx.drawImage
Draws a part of a glv image to the glv context, where s are source coordinates and d destination coordinates.
glv.ctx.render
render the draw commands to the context
glv.ctx.resetTransform
Reset all transformations to default
glv.ctx.restore
Restore a previously saved context state
glv.ctx.rotate
Rotates the current applied transformation
glv.ctx.save
Saves the current context state
glv.ctx.scale
Scales the current applied transformation matrix
glv.ctx.setTransform
Set the current transformation matrix
glv.ctx.transform
Apply an other transformation matrix to the current one
glv.ctx.translate
'Moves' the current applied transformation matrix
glv.GetHeight
Get the height of the control as screen height relative float or in pixels with the px option.
glv.GetLeft
Get the distance from the control to the left parent border as width relative float or in pixels with the px option.
glv.GetParent
Returns the parent control object where the object was added to - commonly a layout.
glv.GetPosition
Returns data about the position and size of the control.
If the screen option is given the position on the screen will be returned. Otherwise relative to the parent control.
The px options turns the relative values into pixels.
glv.GetTop
Get the distance from the control to the upper parent border as height relative float or in pixels with the px option.
glv.GetType
Returns the control class name.
glv.GetVisibility
Returns the current visibility state of the control. The Values are:
Show: visible
Hide: invisible but still consuming space
Gone: invisible and not consuming space
glv.GetWidth
Get the width of the control as screen width relative float or in pixels with the px option.
glv.Gone
Hides the control without consuming any more layout space as if it were never there.
height
glv.Hide
Hide the control but keep the layout space free.
glv.IsEnabled
Returns whether the control is currently useable by the user.
glv.IsOverlap
Returns whether the control overlaps with another by a given distance.
glv.IsVisible
Returns whether the control is currently visible to the user, ignoring overlaying controls.
glv.Method
Allows access to other functions defined on the object in Java via reflection.

Note: This function is a premium feature. Please consider subscribing to Premium to use this feature and support DroidScript in its further development.
glv.Render
Render all draw commands to the canvas
glv.SetBackColor
Changes the background color of the control.
glv.SetBackGradient
Define the background color of the control with a gradient. The default gradient direction is from top to bottom, but you can change it from left to right and the reversed versions of course.
glv.SetBackGradientRadial
Define a radial color gradient for the background of control.
glv.SetBackground
Changes the background to an image which can be repeated using the repeat option.
An image which is often used with that option is '/res/drawable/pattern_carbon' - try it out!
glv.SetEnabled
En/Disable the control physically and visually so that the user can/can not access the control. Events like OnTouch will still be fired.
glv.SetMargins
Define a distance to other controls on each side of the control.
glv.SetOnTouch
Define a callback function that is called when the user touches the control. In addition, an event object is passed to the callback function to obtain information about the touch type, the touch position(s), the amount of touches and the control that was touched.
glv.SetOnTouchDown
Define a callback function which is called when the user started toching the control.
glv.SetOnTouchMove
Define a callback function which is called when the user drags his finger over the screen.
glv.SetOnTouchUp
Define a callback function which is called when the users finger leaves the screen.
glv.SetPadding
Define distances that elements within the control are to maintain from the control borders.
glv.SetPosition
Defines the position and size for the control if the parent is an absolute layout.
glv.SetScale
Scales the control along with its contents by the factors passed to the function.
glv.SetSize
Change the size of the control in either screen relative values or in pixels if the px option was given.
glv.SetTouchable
En/Disables touch events to be fired on the control. Other events like OnChange will still be fired.
glv.SetVisibility
Change the visibility of the control to one of the available modes:
Show: visible
Hide: invisible but still consuming space
Gone: invisible and not consuming space
glv.Show
Set the visibility of the control to “Show”.
glv.Tween
Performs an animation on the control.
The target object is for the position, size and rotation that the control has at the end of the animation.

The type specifies the behavior and the speed of the animation. Separated by a dot, you must also specify whether you want to apply this behavior to the beginning (In), end (Out), or to both (InOut) times of the animation.

With the amount of repeats you can control how many times you want to play the animation.

If you have jojo activated, the animation will alternate between forward and backward playback, so that if the repetition value is odd, the control will be at the start position again at the end of the animation.

Finally the callback function will be called after the animation has finished. Well, it's about time!
width