B4A Library [Class] - OpenGL ES - 2D Image library

V1.5
Added: SetSkew() - To skew to image
Added: Reset() - Resets general image parameters (skew, position, rotation, handle, animation, flipped state)


I have put together a library designed for the purpose of displaying 2D images using OpenGL ES. The library needs Andrew Graham's libraries:

OpenGL ES library.
Reflection Library

Also, if you want to employ error checking you will also need Andrew's Threading library.

OpenGLES_2DLib.png
OpenGLLib_4.png


VIDEO: Jelly Beans


Key Features for the 2D Images
=======================================
* Pixel-Perfect image drawing (with unfiltered or filtered render options)
* Resize, rotate, flip, skew, change colour, alpha, blending modes, cropped areas - All faster than stock bitmap/canvas drawing
* Collision checks (only basic box-box checks)
* Anchor points - Each image has its own anchor hotspot (called handle in the library) so that the image can be rotated/flipped around a particular point
* An image can share the texture from an existing image (to save space and improve memory performance)
* Images don't need to be a power of 2 since the library will re-size them if required.
* Animation - Images can be animated easily by setting 'frames'. Image strips as well as image grids are supported
* Set specific areas of the image to draw

Key Features for the Display
=======================================
* Virtual display setup makes it easy to create a common display which scales to the devices physical screen size
* Global positioning (anchor/handle), scaling, and rotation which impacts all images.
* GL surface view can be made transparent so that GL images appear on top of regular views.

Have a play with the examples to see how the basic implementation works.
Hopefully the commands make sense.

OpenGL ES 2D Image Library v1.5 - Download link -- Select File then Download
NOTE: Demos should be run in Release Mode

V1.1
Added: Transparency for GL surface view. New subs = SetClsAlpha(), SetClsColor()
Changed: ClearScreen() to Cls()
V1.2
Added: Virtual display commands/functions
Added: SetRect() for images
V1.3
Added: GetLeft(), GetRight(), GetTop(), GetBottom(), AtPoint()
Added: More demos
V1.4a Minor change: Removed glBlendEquation
V1.4
Added: SetBlend - To change the rendering appearance of images (Alpha, Light,Dark,Mask)
Added: Jelly Beans demo
Changed: The way images are loaded. Instead of checking for surface changes every time Draw() is called, a dedicated (one-shot) LoadImages() sub is called instead.
 
Last edited:

Jim Brown

Active Member
Licensed User
Longtime User
@magicuser68,
Are you running in Release Mode?

@alfcen,
No, I have not done much in terms of 3D development, but now that the 2D lib is pretty much nailed I might pop back into 3D land.
 

Toley

Active Member
Licensed User
Longtime User
I got the same error as magicuser68 (with jelly bean demo) is it working only on Jelly Bean OS ?

btw here is the Log
LogCat connected to: B4A-Bridge: Acer A500-
--------- beginning of /dev/log/system
--------- beginning of /dev/log/main
** Activity (main) Create, isFirst = true **
** Activity (main) Resume **
** Service (service1) Create **
** Service (service1) Start **
Connected to B4A-Bridge (Wifi)
Installing file.
** Activity (main) Pause, UserClosed = true **
PackageAdded: package:basic.android.opengles.images
** Activity (main) Create, isFirst = true **
** Activity (main) Resume **
glimage_draw (java line: 229)
java.lang.UnsupportedOperationException: glBlendEquation
at com.google.android.gles_jni.GLImpl.glBlendEquation(Native Method)
at anywheresoftware.b4a.agraham.opengl.GLWrapper.glBlendEquation(GLWrapper.java:1727)
at basic.android.opengles.images.glimage._draw(glimage.java:229)
at basic.android.opengles.images.main._glsv_draw(main.java:403)
at java.lang.reflect.Method.invokeNative(Native Method)
at java.lang.reflect.Method.invoke(Method.java:511)
at anywheresoftware.b4a.BA.raiseEvent2(BA.java:170)
at anywheresoftware.b4a.BA.raiseEvent2(BA.java:158)
at anywheresoftware.b4a.BA.raiseEvent(BA.java:154)
at anywheresoftware.b4a.agraham.opengl.GLWrapper$GLSurfaceViewWrapper$myRenderer.onDrawFrame(GLWrapper.java:2227)
at android.opengl.GLSurfaceView$GLThread.guardedRun(GLSurfaceView.java:1462)
at android.opengl.GLSurfaceView$GLThread.run(GLSurfaceView.java:1216)
java.lang.UnsupportedOperationException: glBlendEquation
java.lang.RuntimeException: Can't create handler inside thread that has not called Looper.prepare()
at android.os.Handler.<init>(Handler.java:121)
at android.app.Dialog.<init>(Dialog.java:107)
at android.app.AlertDialog.<init>(AlertDialog.java:114)
at android.app.AlertDialog$Builder.create(AlertDialog.java:913)
at anywheresoftware.b4a.BA.raiseEvent2(BA.java:210)
at anywheresoftware.b4a.BA.raiseEvent2(BA.java:158)
at anywheresoftware.b4a.BA.raiseEvent(BA.java:154)
at anywheresoftware.b4a.agraham.opengl.GLWrapper$GLSurfaceViewWrapper$myRenderer.onDrawFrame(GLWrapper.java:2227)
at android.opengl.GLSurfaceView$GLThread.guardedRun(GLSurfaceView.java:1462)
at android.opengl.GLSurfaceView$GLThread.run(GLSurfaceView.java:1216)
** Activity (main) Pause, UserClosed = true **

edit : seems to do that with all the demos.
 

Jim Brown

Active Member
Licensed User
Longtime User
By the looks of it glBlendEquation is a trouble maker. I have removed this particular call. In any case it served no purpose (all blending equations were the same default value).

For those getting errors try replacing the attached GlImage.bas with the one in the main folder Or, download the library again.
Please run the OpenGLDemo_BlendModes to see if blending works.

OpenGL 2D Lib 1.4a - Choose File then Download


Go to TOP OF THREAD
 

Attachments

  • GLImage.bas
    15.3 KB · Views: 273
Last edited:

Toley

Active Member
Licensed User
Longtime User
Hi Jim sorry for the late feedback I was out for a diner with old friends.

Everything work perfectly now. Thank you very much for the great work.
 

Jim Brown

Active Member
Licensed User
Longtime User
You can leave free space in the display. For example, here, the gl surface view fills the main display but leaving 20% free space at the bottom, where you could put the ad:

glsv_Initialize
Activity.AddView(glsv,0%x,0%y,100%x,80%y)
 

walterf25

Expert
Licensed User
Longtime User
Making grass move

Hello, i have a quick question regarding the capabilities of this great library, i need to create a game for a client, but i need to decide what components and libraries i will be using and that will provide me with the best way to create good graphics, is there a way to make for example make the grass move, i've seen some apps where there's a static image of either a flower a palm tree or grass and they move giving the app a natural look as if the wind is blowing, is this possible with this library or does anyone here know of a way to accomplish this effect?

thanks,
Walter
 

walterf25

Expert
Licensed User
Longtime User
Examples not working propperly

Hello, i downloaded this library yesterday night and everything was working just fine, i came to work this morning and downloaded the library and the example again on my work's computer and now all i see when i run each example are tiny little white squares moving around the screen, did something change between last night and today, it doesn't make any sense what is going on?

below is a screenshot of the example that has a few birds and a dog running across the screen, but all i see now are small white squares

openGl2D screenshot.png

anyone has any idea what's going on?

:confused::confused:

thank,
Walter
 

walterf25

Expert
Licensed User
Longtime User
One of the Modules

Ok, i found the one of the old example versions and it works just fine, i'm thinking either the GLImage.bas or the GLDisplay module on the latest version has an issue, can you fix this please, pretty please, i'm about to get started on a game app and i'm going to use your great library.

Thanks,
Walter
 

walterf25

Expert
Licensed User
Longtime User
Duhhhh

Never mind all, i figured it out, i upgraded Basic4Android from 1.9 to 2.02 and everything works like a charm, disregard all the previous posts, sorry!

Duhhh!

:D
 

Jim Brown

Active Member
Licensed User
Longtime User
i've seen some apps where there's a static image of either a flower a palm tree or grass and they move giving the app a natural look as if the wind is blowing, is this possible with this library or does anyone here know of a way to accomplish this effect?
One trick is to place the images handle/hotspot at the bottom/centre then use math Sin() to rotate, giving a metronome type swing motion.
Other than that I might be able to add some Skew commands which would warp the image. Click HERE for an example.
You would then skew the image horizontally and place the handle/hotspot at the bottom/centre, resulting in a sway effect
 

walterf25

Expert
Licensed User
Longtime User
Awesome

Hey Jim, that would be so awesome, how hard would it be to add the skew commands, or do you have an actual code example to do it the other way, "metronome" way?

thanks for your help Jim.

While on the subject, is it possible to create a water ripple effect with this library, if so do you have a sample on how to do that?

thanks again Jim

Cheers,
Walter
 

Jim Brown

Active Member
Licensed User
Longtime User
V1.5 uploaded. See TOP THREAD

I have now added a SetSkew() command to skew the edges of the image by varying amounts.
The OpenGLDemo_Skew.b4a demo will give an indication of how this works.
OpenGLLib_Skew.png
 

bloxa69

Active Member
Licensed User
Longtime User
when I add GLSurfaceView to Activity, the whole screen goes black

hey Jim,
thank you for a great lib.
I have question: when I add GLSurfaceView to Activity, the whole screen goes black for a fraction of a second, but it's visible to the eye. Is it possible to avoid it somehow? (I tried it on my hardware devices and emulators - same thing)

B4X:
   glsv_Initialize
        'this is where I get a black flash over the whole screen
   Activity.AddView(glsv,0%x,0%y,100%x,100%y)

As a workaround, I've tried to load GLSurfaceView view first, then all others views on top of it. It worked and I didn't get any blackout. There is only one problem: after that I cannot bring GLSurfaceView view back to front (that was the idea).
glsv.BringToFront and glsv.SendToBack
don't work on it.

Thanks


Edited - Udate:

Hey Jim, I guess you are busy. After spending some time trying to fix that black screen issue, this is the solution I came up with (may be not very elegant, but it works):
1. Initialize the OpenGL 2D view, add it to Activity and then remove it right away
B4X:
   glsv_Initialize
   Activity.AddView(glsv,0%x,0%y,100%x,100%y)
       glsv.RemoveView
2. Build UI, load layouts etc
3. Add OpenGL 2D view again when done with everything else
B4X:
        'this is a fix for slower phones - remove it again just in case (otherwise OpenGL 2d view will not load at all on some phones, probably because the removal process still going on in background)
        glsv.RemoveView
        'end of the slow phone fix, load the view
   Activity.AddView(glsv,0%x,0%y,100%x,100%y)

It doesn't make much sense but it works. I sure appreciate it if you could provide a more elegant solution.
Thanks for the library.
 
Last edited:

mcmanu

Active Member
Licensed User
Longtime User
Possible?

Hi,Is it Possible to use For example your Exaple in a Other Activity? (not Main)
I tried it, but it seems to not work. Does it only works for the Main Activity?

Thanks in Advance :)
 

Informatix

Expert
Licensed User
Longtime User
I tried your class and I was a bit surprised to see a very high FPS in your performance demo while on screen smileys were moving very slowly. I looked at your code and saw that you counted the number of ticks per second and not at all the number of frames per second. You should move the FPS computation at the end of glsv_Draw. The count will be in line with what we see on the screen.

There's something more important annoying me. The performance is terrible for an OpenGL demo. I don't know if there's something wrong in the library or in your class, but there's obviously something wrong.
To give you an idea, I did a test under Gingerbread with the (fixed) demo and I got about 22-23 FPS for the settings 10/100.
I made a clone of your app but used a simple canvas and I got 60-62 FPS for the same settings.

I repeated the same test on a device under Jelly Bean and used a library of my own (an accelerated surface calling OpenGL methods, not yet publicly available). Logically, we should get the same results with the settings 10/500, but:
Your demo: about 14 FPS
My demo: about 58 FPS.
 

bloxa69

Active Member
Licensed User
Longtime User
There's something more important annoying me. The performance is terrible for an OpenGL demo.

Although I really appreciate that free library, still, I agree with Informatix - the performance of an OpenGL surface should be better. As an example, I can point out Erel's Game View - it's much smoother though it's canvas based, I think. Too bad I cannot use it for Android below version 3.0, so I have to create 2 versions for each app where I need it - one OpenGL ES for Android below 3.0, and the other one using the Game View lib. Then I switch them depending on OS. That almost doubles the amount of work.
 
Top