User Tools

Site Tools


Sidebar

Privacy Policy

News

Version 2.50 is out since Jan 1st 2022


Frequently Asked Questions


Namespaces

Note for contributors

If you wish to create a new page in the DroidScript wiki, please click on the most appropriate namespace above and follow the notes for contributors there.

Because of spam, it has been necessary to add a CAPTCHA to the registration form and the save option for editing pages. You will not need to prove you are human if you are logged in, so please register.

Please feel free to improve any existing page, as well as adding new pages to increase the sum of public knowledge about DroidScript.

Formatting Syntax

built_in:glview

GLView

(Information and examples taken from the DroidScript documentation)

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.

Methods

Some controls use the same methods.
For examples of the same methods look here.

Method Description
GLView.CreateImage( filename, callback)
GLView.DrawImage(img, X, Y, width, height, angle)
GLView.SetOnTouch(callback)
GLView.DrawSprite(image, srcStartX, srcStartY, srcWidth, srcHeight,destX, destY, destWidth, destHeight)
GLView.SetOnTouchUp( callback )
GLView.SetOnTouchMove( callback )
GLView.SetOnTouchDown( callback )
GLView.SetTouchable( touchable )
GLView.Render()
GLView.GetContext()

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();
}

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();
}

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 - DrawSprite

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++;
} 

Touch drawn images

(Sample code by Alex, idea from Chris Hopkin)

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. Something like this:

//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.X= 0.1; img1.Y= 0.3;
	img1.W= 0.7; img1.H= 0.4;
 
	//set second image
	img2= glv.CreateImage( "/Sys/Img/Droid1.png", startRender );
	img2.X= 0.5; img2.Y= 0.5;
	img2.W= 0.5; img2.H= 0.3;
 
	lay.AddChild( glv );
 
	//Add layout to app.	
	app.AddLayout( lay );
}
 
//draw images
function startRender() {
	draw( img1 );
	draw( img2 );
	glv.Render();
}
 
//check which image was touched
function touch(ev) {
	var object="nothing"
 
	if( touched( img1,ev ) ) object="img1";
	if( touched( img2,ev ) ) object="img2";
 
	app.ShowPopup( "touched "+object );
}
 
///subfunctions
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)
}
built_in/glview.txt · Last modified: 2016/09/02 02:49 (external edit)