Differences

This shows you the differences between two versions of the page.

--- built_in:glview [2015/09/07 07:39]
82.204.40.82 [Table]
+++ built_in:glview [2016/09/02 02:49] (current)
@@ Line 1: / Line 1: @@
 ====== GLView ======
-===== Create =====
+//(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 [[built_in:app|app]] object:
 <code>glview = app.CreateGLView( width, height, options );</code>
+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:
+<code>glview.CreateImage( fileName, callback );</code>
+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:
+<code>glview.DrawImage( image, x, y, width, height, angle );</code>
+Once all drawing has been done, the **Render** method must be called to render all the GLView graphics to the screen.
 ===== Methods =====
@@ Line 7: / Line 19: @@
 For examples of the **[[same methods]]** look here.
 ^ Method                                                                                                   ^ Description  ^
-| GLView.CreateImage( image, options )                                                                     |              |
+| 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()  |              |
-===== Sample =====
+----
-(Sample code by Chris Hopkin taken from the DroidScript Google Group)
-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:
+===== Example - DrawImage =====
-<code javascript>glview = app.CreateGLView( 1, 1, "Fast2d" );
+<code Javascript>
-glview.SetOnTouch(glview_OnTouch);
+function OnStart()
+{
+  lay = app.CreateLayout( "Linear", "FillXY" );
-glImg = glview.CreateImage( "/Sys/Img/Hello.png", StartRendering );
+  glview = app.CreateGLView( 1, 1, "Fast2d" );
+  lay.AddChild( glview );
-glImgX = 0.1;
+  img = glview.CreateImage( "/Sys/Img/Hello.png", DrawFrame );
-glImgY = 0.1;
-glImgW = 0.25;
-glImgH = 0.25;
-....
+  app.AddLayout( lay );
+}
-glview.DrawImage(glImg, glImgX, glImgY, glImgW, glImgH, 0);
+function DrawFrame()
+{
+  glview.DrawImage( img, 0.25, 0.3, 0.5, -1, 45 );
-...
+  glview.Render();
+}
+</code>
-function glview_OnTouch(ev)
+----
+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 =====
+<code Javascript>
+var angle = 0;
+function OnStart()
 {
-  if(ev.action=="Up")
+  lay = app.CreateLayout( "Linear", "FillXY" );
-  {
-    if( (ev.X >= glImgX) && (ev.X <= glImgX+glImgW) &&
+  glview = app.CreateGLView( 1, 1, "Fast2d" );
-        (ev.Y >= glImgY) && (ev.Y <= glImgY+glImgH) )
+  lay.AddChild( glview );
-    {
-      app.ShowPopup("glImg Touched");
+  img = glview.CreateImage( "/Sys/Img/Hello.png", StartRendering );
-    }
-  }
+  app.AddLayout( lay );
-}</code>
+}
+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();
+}
+</code>
+----
+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 =====
+<code Javascript>
+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,
+.3, 0.4, 0.3, -1 );
+  glview.Render();
+  frameCount++;
+}
+</code>
+----
+===== 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:
+<code javascript>
+//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)
+}
+</code>

DroidScript Wiki

User Tools

Site Tools

Differences

Page Tools