I am trying to do the following on Android (then possibly on iOS) and any advices will be appreciated:
Overlaying UnityPlayer view on top of Native Android view where only the 3D objects being drawn and no camera background (transparent background)
My current progress:
So far I managed to use my Unity3D project as library into another Android project and assign UnityPlayer view to a FrameLayout on top of another Android view but the camera background color showing... I tried changing the clear flag option to depth only but it didn't work.
I also managed to use a separate GLSurfaceView which I assigned class extending UnityPlayer and implementing GLSurfaceView.Renderer to as the renderer but I am still getting opaque background.
My code as follows:
// the class extending the player
class CustomUnityPlayer extends UnityPlayer implements GLSurfaceView.Renderer {
public CustomUnityPlayer(ContextWrapper context) {
super(context);
}
public void onDrawFrame(GL10 gl) {
super.onDrawFrame(gl);
}
}
// inside OnCreate function:
m_UnityPlayer = new CustomUnityPlayer(this);
int glesMode = m_UnityPlayer.getSettings().getInt("gles_mode", 1);
m_UnityPlayer.init(glesMode, false);
mUnityView = new GLSurfaceView(getApplication());
mUnityView.setEGLContextClientVersion(2);
mUnityView.setZOrderOnTop(true);
mUnityView.setZOrderMediaOverlay(true);
mUnityView.setEGLConfigChooser(8, 8, 8, 8, 16, 0);
mUnityView.setRenderer(m_UnityPlayer);
mUnityView.getHolder().setFormat(PixelFormat.TRANSLUCENT);
setContentView(R.layout.activity_fullscreen);
FrameLayout layout = (FrameLayout) findViewById(R.id.UnityView);
LayoutParams lp = new LayoutParams(LayoutParams.FILL_PARENT,
LayoutParams.FILL_PARENT);
layout.addView(mUnityView, 0, lp);
Am I missing something and is it even possible? Any help will be much appreciated.
Thanks alot
after some attempts...removing mUnityView.setZOrderMediaOverlay(true); did the trick for me (works on Unity 4.2 and below... not in Unity 4.3 and above)
Related
I'm building an Android app that takes advantage of OpenGL. As it stands, the background for the GLSurfaceView is dynamically generated by my code and loaded in as a texture and drawn with glDrawTexfOES. Which is "ok", but I can simply display the image much more smoothly to its own surface (without OpenGL). Is there any way that I can make the background of a GLSurfaceView transparent? I've heard some rumors that this can be done with setEGLConfigChooser, but I haven't found any confirmation. Ultimately, I'd like to take a surface which I'm drawing to and put the GLSurfaceView over it to achieve a layered effect.
I know this is a tricky and is quite possibly infeasible, but any input is appreciated. Thanks in advance.
Just some simple changes that I did to get this to work.
On my GLSurfaceView.Renderer:
public void onSurfaceCreated(GL10 gl, EGLConfig config) {
gl.glDisable(GL10.GL_DITHER);
gl.glHint(GL10.GL_PERSPECTIVE_CORRECTION_HINT,
GL10.GL_FASTEST);
gl.glClearColor(0,0,0,0);
gl.glEnable(GL10.GL_CULL_FACE);
gl.glShadeModel(GL10.GL_SMOOTH);
gl.glEnable(GL10.GL_DEPTH_TEST);
}
On my GLSurfaceView:
setEGLConfigChooser(8, 8, 8, 8, 16, 0);
getHolder().setFormat(PixelFormat.TRANSLUCENT);
Your GLSurfaceView also requires setZOrderOnTop(true);
I use my own GLSurfaceView class to display charts (transparent background / overlay).
My extended GLSurfaceView is embed via XML into a popover window.
<com.dsignmatters.iq_fitfunlite.GLPieChartView
android:id="#+id/gameprogress_chart"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
...
As part of the activity I added this code:
mGamesuccessPieChart = (GLSurfaceView) gameprogressView.findViewById(R.id.gameprogress_chart);
mGamesuccessPieChart.setZOrderOnTop(true);
Last but not least my GLSurfaceView looks like this:
public class GLPieChartView extends GLSurfaceView {
public GLPieChartView(Context context) {
super(context);
initGL();
}
public GLPieChartView(Context context, AttributeSet attrs) {
super(context, attrs);
initGL();
}
void initGL() {
setEGLContextClientVersion(2);
setEGLConfigChooser(8,8,8,8,16,0);
setRenderer(new GLPieChartRenderer());
setRenderMode(GLSurfaceView.RENDERMODE_WHEN_DIRTY);
getHolder().setFormat(PixelFormat.TRANSLUCENT);
}
}
My renderer class GLPieChartRenderer does not call glClearColor at all.
Code sample at the end is for enabling transparency with GLSurfaceView. But before using transparency with GLSurfaceView, consider the following negative points.
Enabling transparency requires that you use setZOrderOnTop on GLSurfaceView. That will prevent you from placing any other views ( e.g. TextView ) on top of your transparent GLSurfaceView. Even Navigation drawers cannot slide above the transparent GLSurfaceView( ignoring tricks ). Transparent or not, GLSurfaceView can only exist above or below other android views and not in between them.
Transparency requires that you use setEGLConfigChooser and setFormat as in below example. That means, you cannot get what would have been default format chosen by system which would have been the best for that particular device. More importantly, you will need to ensure that the device has the supported format and chose alternatives if expected format isn't present as in this gsoc example.
Other options to transparency.
Running Tracer for opengl in Android, will show that, background images for activities are drawn as opengl textures. So instead of making GLSurfaceView transparent, if possible, you can as well render your background as an opengl texture in GLSurfaceView.
Also, alpha channel or transparency on the surface is not pre requirement for alpha blending in opengl. Both are independent.
TextureView (trick) is good alternative if your opengl component is to be embedded between other views. This breakout game is a very good example for GLSurfaceView 2d drawing in Android.
Below sample with layout xml and code for transparent GLSurfaceView with background.
Layout xml file with green color background
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
android:background="#00FFFF">
<android.opengl.GLSurfaceView
android:id="#+id/mySurfaceView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</RelativeLayout>
MainActivity.java file. Change ALPHA variable from 0.0 to 1.0 to see surface color red mixing with background activity color green
package com.example.transparentsurfaceview;
import android.app.Activity;
import android.graphics.PixelFormat;
import android.opengl.GLES20;
import android.opengl.GLSurfaceView;
import android.os.Bundle;
import javax.microedition.khronos.egl.EGLConfig;
import javax.microedition.khronos.opengles.GL10;
public class MainActivity extends Activity {
private GLSurfaceView mSurfaceView;
private static float ALPHA = 0.5f;
private static float RED = 1.0f;
private static float GREEN = 0.0f;
private static float BLUE = 0.0f;
protected void onCreate( Bundle savedInstanceState ) {
super.onCreate( savedInstanceState );
setContentView( R.layout.activity_main );
mSurfaceView = (GLSurfaceView)findViewById( R.id.mySurfaceView );
mSurfaceView.setEGLContextClientVersion( 2 );
mSurfaceView.setZOrderOnTop( true );
mSurfaceView.setEGLConfigChooser( 8, 8, 8, 8, 16, 0 );
mSurfaceView.getHolder().setFormat( PixelFormat.RGBA_8888 );
mSurfaceView.setRenderer( new GLSurfaceView.Renderer() {
public void onSurfaceCreated( GL10 gl10, EGLConfig eglConfig ) {
GLES20.glClearColor( RED, GREEN, BLUE, ALPHA );
}
public void onSurfaceChanged( GL10 gl10, int i, int i2 ) {}
public void onDrawFrame( GL10 gl10 ) {
GLES20.glClear( GLES20.GL_COLOR_BUFFER_BIT );
}
});
}
}
you should make sure the activity background is transparent!
If the activity's background is opaque, say white by default, then even when the content view (the glsurfaceview) is translucent, it will display the activity's white background as its background.
You can set the activity background transparency in the Android.manifest where it is declared, see the official API demo TranslucentGLSurfaceViewActivity for help
I've created 3 Java classes.
one that has a glsurfaceview object and this calls the renderer class.
this is the renderer class and this calls the cube class.
this is the cube class.
If I run the app then the screen shows a rotating cube (did rotation in the rendering class) which is fine. But I want to control the direction of rotation of the cube and for that I've set 2 buttons. This is where I need help because I don't know to to make the buttons control the movement of the cube. I'm new to Android so if you could leave some code for me to examine then that would be just great.
Your Activity class (or your class that extends Activity) should look like this:
public class stackoverflowTest extends Activity {
GLSurfaceView glSurface;
MyRenderer myRenderer;
/** Called when the activity is first created. */
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
myRenderer = new MyRenderer(this);
//Create an instance of the Renderer with this Activity
glSurface = (GLSurfaceView) findViewById(R.id.graphics_glsurfaceview1);
//Set our own Renderer and hand the renderer this Activity Context
glSurface.setEGLConfigChooser(true);
glSurface.setRenderer(myRenderer);
//Set the GLSurface as View to this Activity
}
/**
* this is the method the button click calls
*/
public void changeRotationDirection(View v){
myRenderer.changeRotationDirection();
}
}
Then in your renderer:
public class MyRenderer implements Renderer {
private float rotationDirection = 1.0f;
public MyRenderer(Context context){
this.context = context;
}
public void setRotationDirection(){
if(rotationDirection==1.0f){
rotationDirection=-1.0f;
} else {
rotationDirection=1.0f;
}
}
#Override
public void onDrawFrame(GL10 gl) {
// GL calls
gl.glRotatef(angle, rotateDirection, 0.0f, 0.0f);
// draw cube
gl.glDrawArrays( etc );
}
}
Basically, you use glRotatef to rotate the cube just before you draw it. Use -ve vales for either the angle parameter (the first) or the x,y,z amount parameters to rotate in the opposite direction. Use method calls to the Renderer to communicate with it and update the scene. Use this approach with caution as the Renderer thread and Main/UI thread (from where the button call is made) can have synchronisation issues
To make a button call the changeRotationDirection method, simply add android:onClick="changeRotationDirection" into the XML layout (of any view. Doesn't have to be just a button view). Any button methods declared in the XML layout have to be of the form public void [methodname](View [paramname]) and have to be in the Activity class from where the button is pressed
For more advanced touch control, check as Erik suggested and also check out OnTouchListeners
(Note: if you're using openGL-ES 2.0 or above (android 2.2+) then use GLES20.glRotatef())
You might want to check out the TouchRotateActivity example from the sdk. If I'm not mistaken its located in the samples/platform/api-demos folder.
I want to know is there any way to use native TextView or any other layout of android inside BaseAndEngine Activity.
My application is using Andengine for one of its whole screen. This screen is extended from BaseAndEngine and I need to use some native view like textview inside that screen. Because Andengine does not work fine for Arabic text and I need to show some Arabic text on gaming screen.
OR if possible how to show Arabic text in changeable text in Andengine. As changeable text write Arabic from left to right in reverse order.
Of course you can.
Check this code out - basically you override onSetContentView, then you can set whatever you want.
#Override
protected void onSetContentView() {
final FrameLayout frameLayout = new FrameLayout(this);
final FrameLayout.LayoutParams frameLayoutLayoutParams = new FrameLayout.LayoutParams(FrameLayout.LayoutParams.FILL_PARENT, FrameLayout.LayoutParams.FILL_PARENT);
this.mRenderSurfaceView = new RenderSurfaceView(this);
mRenderSurfaceView.setRenderer(mEngine);
final FrameLayout.LayoutParams surfaceViewLayoutParams = new FrameLayout.LayoutParams(super.createSurfaceViewLayoutParams());
frameLayout.addView(this.mRenderSurfaceView, surfaceViewLayoutParams);
//Create any other views you want here, and add them to the frameLayout.
this.setContentView(frameLayout, frameLayoutLayoutParams);
}
(This method goes to your subclass of BaseGameActivity.)
You could also do it through xml, but I think this method is more clear.
You can use Andengine for Arabic and Persian fonts too. But in a different manner. to do that you need to create a Sprite and add a bitmap to it. before that you draw your text on that bitmap.
the following code is an example that draw the Persian/Arabians text and attach it to a sprite. so we can attach the sprite to our scene.
this is an example to show how we can do that, so you can adjust the bitmap and text size by yourself.
if your device support Persian/Arabians, this code will work properly. if the text does not appear in your scene, change its position, it is out of screen
the example code function will print the "Persian Golf" in Persian/Arabians.
private void persianGolfPrinter(){
BitmapTextureAtlas mBitmapTextureAtlas = new BitmapTextureAtlas(ResourceManager.getInstance().gameActivity.getTextureManager(), 400, 800, TextureOptions.BILINEAR);
ITextureRegion mDecoratedBalloonTextureRegion;
final IBitmapTextureAtlasSource baseTextureSource = new EmptyBitmapTextureAtlasSource(400, 800);
final IBitmapTextureAtlasSource decoratedTextureAtlasSource = new BaseBitmapTextureAtlasSourceDecorator(baseTextureSource) {
#Override
protected void onDecorateBitmap(Canvas pCanvas) throws Exception {
this.mPaint.setColor(Color.BLACK);
this.mPaint.setStyle(Style.FILL);
this.mPaint.setTextSize(32f);
this.mPaint.setTextAlign(Align.CENTER);
pCanvas.drawText("خلیج فارس", 150, 150, this.mPaint);
}
#Override
public BaseBitmapTextureAtlasSourceDecorator deepCopy() {
throw new DeepCopyNotSupportedException();
}
};
mDecoratedBalloonTextureRegion = BitmapTextureAtlasTextureRegionFactory.createFromSource(mBitmapTextureAtlas, decoratedTextureAtlasSource, 0, 0);
mBitmapTextureAtlas.load();
Sprite test = new Sprite(0,0,mDecoratedBalloonTextureRegion,ResourceManager.getInstance().engine.getVertexBufferObjectManager());
this.attachChild(test);
}
don't use android textview... it makes your game ugly ....
You cannot use them directly in AndEngine, because the objects in Andengine are OpenGL objects. But you can use android OS to draw a bitmap of any standard view, and then create a texture and a sprite from that view. This is less than optimum for a case such as arabic text, but it will work. Be careful about memory leaks as you create the bitmaps of your views.
Android and libgdx noob here.
Does anyone know anything about the recent UI API that was released for libgdx?
See blog post here: http://www.badlogicgames.com/wordpress/?p=2058
I am looking to create a basic menu system, and I was wondering if this UI API would make it easier.
Updated to reflect changes to the LibGDX
I am in a similar position, the following code worked for me to create a basic menu (A container of buttons). The code won't work as is, because it uses some of my classes, but what really matter is the content of the create method. This creates a centered title, then some buttons in a container that gets centered, then fps label in the lower left and an image in the lower right corner. The theme files and some of the images are from the LibGDX tests assets.
I've gotten this to work with the JOGL, LWJGL, and android application classes. I've run it on a Droid 2 and got it to run as it did on my desktop. Hopefully this should get you started.
public class MenuScreen extends Screen{
private Stage ui;
private Table window;
#Override
public void create(final Game game) {
super.create(game);
TextureRegion image = new TextureRegion(new Texture(Gdx.files.internal(Art.badlogicSmall)));
Label fps = new Label("fps: ", Art.sSkin.getStyle(LabelStyle.class),"fps");
ui = new Stage(Gdx.graphics.getWidth(),Gdx.graphics.getHeight(), true);
Gdx.input.setInputProcessor(ui);
window = new Table("window");
window.width = ui.width();
window.height = ui.height();
window.x = 0;
window.y = 0;
window.debug();
Label title = new Label("Title",Art.sSkin.getStyle(LabelStyle.class),"title");
Button newGame = new Button("New Game",Art.sSkin.getStyle(ButtonStyle.class),"new");
newGame.setClickListener(new ClickListener() {
#Override
public void click(Actor actor) {
game.setScreen(GameScreen.class);
}
});
Button optionMenu = new Button("Option",Art.sSkin.getStyle(ButtonStyle.class),"Options");
Button helpMenu = new Button("Help",Art.sSkin.getStyle(ButtonStyle.class),"Help");
Image libgdx = new Image("libgdx", image);
window.row().fill(false,false).expand(true,false).padTop(50).padBottom(50);
window.add(title);
Table container = new Table("menu");
container.row().fill(true, true).expand(true, true).pad(10, 0, 10, 0);
container.add(newGame);
container.row().fill(true, true).expand(true, true).pad(10, 0, 10, 0);
container.add(optionMenu);
container.row().fill(true, true).expand(true, true).pad(10, 0, 10, 0);
container.add(helpMenu);
window.row().fill(0.5f,1f).expand(true,false);
window.add(container);
Table extras = new Table("extras");
extras.row().fill(false,false).expand(true,true);
extras.add(fps).left().center().pad(0,25,25,0);
extras.add(libgdx).right().center().pad(0,0,25,25);
window.row().fill(true,false).expand(true,true);
window.add(extras).bottom();
ui.addActor(window);
}
#Override
public void render(float arg0) {
Gdx.gl.glClearColor(0.2f, 0.2f, 0.2f, 1);
Gdx.gl.glClear(GL10.GL_COLOR_BUFFER_BIT);
((Label)ui.findActor("fps")).setText("fps: " + Gdx.graphics.getFramesPerSecond());
ui.act(Math.min(Gdx.graphics.getDeltaTime(), 1 / 30f));
ui.draw();
Table.drawDebug(ui);
}
#Override
public void resize(int width, int height) {
ui.setViewport(width, height, true);
Log.d("Resize: "+width+", "+height);
}
Yes, the the new UI api is very easy to use. You can use the Skin object to create some Actor object, and then join them to the Stage object.
You can reference the UITest.java file in the libgdx source. It demonstrates how to use the basic UI elements.
From low level to see the libgdx new UI, it only include the following element:
NinePatch: the basic shape object for create the element could stretch up;
Region: the shape object for the fixed size element;
Font: the bitmapfont object for display text;
The high level element is composed by them, such as the Button object, include: ninepatch and font ojbect, and so on.
So, you can very easy to create the 2D UI use them. :)
I'm building an Android app that takes advantage of OpenGL. As it stands, the background for the GLSurfaceView is dynamically generated by my code and loaded in as a texture and drawn with glDrawTexfOES. Which is "ok", but I can simply display the image much more smoothly to its own surface (without OpenGL). Is there any way that I can make the background of a GLSurfaceView transparent? I've heard some rumors that this can be done with setEGLConfigChooser, but I haven't found any confirmation. Ultimately, I'd like to take a surface which I'm drawing to and put the GLSurfaceView over it to achieve a layered effect.
I know this is a tricky and is quite possibly infeasible, but any input is appreciated. Thanks in advance.
Just some simple changes that I did to get this to work.
On my GLSurfaceView.Renderer:
public void onSurfaceCreated(GL10 gl, EGLConfig config) {
gl.glDisable(GL10.GL_DITHER);
gl.glHint(GL10.GL_PERSPECTIVE_CORRECTION_HINT,
GL10.GL_FASTEST);
gl.glClearColor(0,0,0,0);
gl.glEnable(GL10.GL_CULL_FACE);
gl.glShadeModel(GL10.GL_SMOOTH);
gl.glEnable(GL10.GL_DEPTH_TEST);
}
On my GLSurfaceView:
setEGLConfigChooser(8, 8, 8, 8, 16, 0);
getHolder().setFormat(PixelFormat.TRANSLUCENT);
Your GLSurfaceView also requires setZOrderOnTop(true);
I use my own GLSurfaceView class to display charts (transparent background / overlay).
My extended GLSurfaceView is embed via XML into a popover window.
<com.dsignmatters.iq_fitfunlite.GLPieChartView
android:id="#+id/gameprogress_chart"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
...
As part of the activity I added this code:
mGamesuccessPieChart = (GLSurfaceView) gameprogressView.findViewById(R.id.gameprogress_chart);
mGamesuccessPieChart.setZOrderOnTop(true);
Last but not least my GLSurfaceView looks like this:
public class GLPieChartView extends GLSurfaceView {
public GLPieChartView(Context context) {
super(context);
initGL();
}
public GLPieChartView(Context context, AttributeSet attrs) {
super(context, attrs);
initGL();
}
void initGL() {
setEGLContextClientVersion(2);
setEGLConfigChooser(8,8,8,8,16,0);
setRenderer(new GLPieChartRenderer());
setRenderMode(GLSurfaceView.RENDERMODE_WHEN_DIRTY);
getHolder().setFormat(PixelFormat.TRANSLUCENT);
}
}
My renderer class GLPieChartRenderer does not call glClearColor at all.
Code sample at the end is for enabling transparency with GLSurfaceView. But before using transparency with GLSurfaceView, consider the following negative points.
Enabling transparency requires that you use setZOrderOnTop on GLSurfaceView. That will prevent you from placing any other views ( e.g. TextView ) on top of your transparent GLSurfaceView. Even Navigation drawers cannot slide above the transparent GLSurfaceView( ignoring tricks ). Transparent or not, GLSurfaceView can only exist above or below other android views and not in between them.
Transparency requires that you use setEGLConfigChooser and setFormat as in below example. That means, you cannot get what would have been default format chosen by system which would have been the best for that particular device. More importantly, you will need to ensure that the device has the supported format and chose alternatives if expected format isn't present as in this gsoc example.
Other options to transparency.
Running Tracer for opengl in Android, will show that, background images for activities are drawn as opengl textures. So instead of making GLSurfaceView transparent, if possible, you can as well render your background as an opengl texture in GLSurfaceView.
Also, alpha channel or transparency on the surface is not pre requirement for alpha blending in opengl. Both are independent.
TextureView (trick) is good alternative if your opengl component is to be embedded between other views. This breakout game is a very good example for GLSurfaceView 2d drawing in Android.
Below sample with layout xml and code for transparent GLSurfaceView with background.
Layout xml file with green color background
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
android:background="#00FFFF">
<android.opengl.GLSurfaceView
android:id="#+id/mySurfaceView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</RelativeLayout>
MainActivity.java file. Change ALPHA variable from 0.0 to 1.0 to see surface color red mixing with background activity color green
package com.example.transparentsurfaceview;
import android.app.Activity;
import android.graphics.PixelFormat;
import android.opengl.GLES20;
import android.opengl.GLSurfaceView;
import android.os.Bundle;
import javax.microedition.khronos.egl.EGLConfig;
import javax.microedition.khronos.opengles.GL10;
public class MainActivity extends Activity {
private GLSurfaceView mSurfaceView;
private static float ALPHA = 0.5f;
private static float RED = 1.0f;
private static float GREEN = 0.0f;
private static float BLUE = 0.0f;
protected void onCreate( Bundle savedInstanceState ) {
super.onCreate( savedInstanceState );
setContentView( R.layout.activity_main );
mSurfaceView = (GLSurfaceView)findViewById( R.id.mySurfaceView );
mSurfaceView.setEGLContextClientVersion( 2 );
mSurfaceView.setZOrderOnTop( true );
mSurfaceView.setEGLConfigChooser( 8, 8, 8, 8, 16, 0 );
mSurfaceView.getHolder().setFormat( PixelFormat.RGBA_8888 );
mSurfaceView.setRenderer( new GLSurfaceView.Renderer() {
public void onSurfaceCreated( GL10 gl10, EGLConfig eglConfig ) {
GLES20.glClearColor( RED, GREEN, BLUE, ALPHA );
}
public void onSurfaceChanged( GL10 gl10, int i, int i2 ) {}
public void onDrawFrame( GL10 gl10 ) {
GLES20.glClear( GLES20.GL_COLOR_BUFFER_BIT );
}
});
}
}
you should make sure the activity background is transparent!
If the activity's background is opaque, say white by default, then even when the content view (the glsurfaceview) is translucent, it will display the activity's white background as its background.
You can set the activity background transparency in the Android.manifest where it is declared, see the official API demo TranslucentGLSurfaceViewActivity for help