How to set an image as the background in the Live Wallpaper on Android?

kuro

The Live Wallpaper example working great but it's always has a very sad black background. I've tried to set the background the same way as sampleApp1 (using setupBackground(context)) but in GLWallpaperService it won't load the background resource. >.<

naotaro

Maybe, I think that it is the position of the background image is not be specified correctly .
Please try the following .

1) Copy from [sample/sampleApp1/src/jp/live2d/utils/android] to [liveWallpaper]
2) Copy from [sample/sampleApp1/src/jp/live2d/sample/LAppDefine.java] to [liveWallpaper]
3) Copy from [sample/sampleApp1/assets/image/back_class_normal.png] to [liveWallpaper]



4) Fixed LiveWallpaperService.java(Fixed Points Add the Comment "Add Code")

class MyEngine extends GLEngine {
	Live2DRenderer renderer;

	public MyEngine() {
		super();
		// handle prefs, other initialization
		renderer = new Live2DRenderer(getApplicationContext());
		setRenderer(renderer);
		setRenderMode(RENDERMODE_CONTINUOUSLY);
		// Add Code Start
		FileManager.init(getApplicationContext());
		// Add Code End
	}

5) Fixed Live2DRenderer.java(Fixed Points Add the Comment "Add Code")

package jp.live2d.sample;

import java.io.IOException;
import java.io.InputStream;

import jp.live2d.android.Live2DModelAndroid;
import jp.live2d.android.UtOpenGL;
import jp.live2d.framework.L2DPhysics;
import jp.live2d.framework.L2DStandardID;
import jp.live2d.framework.L2DTargetPoint;
import jp.live2d.motion.Live2DMotion;
import jp.live2d.motion.MotionQueueManager;
import jp.live2d.utils.android.FileManager;
import jp.live2d.utils.android.SimpleImage;
import android.content.Context;
import android.content.res.AssetManager;

import javax.microedition.khronos.egl.EGLConfig;
import javax.microedition.khronos.opengles.GL10;

import net.rbgrn.android.glwallpaperservice.*;

public class Live2DRenderer implements GLWallpaperService.Renderer
{
	Context con;

	Live2DModelAndroid	live2DModel ;
	Live2DMotion motion;
	MotionQueueManager motionMgr;
	L2DTargetPoint dragMgr;
	L2DPhysics physics;

	final String MODEL_PATH = "epsilon/Epsilon.moc" ;
	final String TEXTURE_PATHS[] =
		{
			"epsilon/Epsilon.1024/texture_00.png" ,
			"epsilon/Epsilon.1024/texture_01.png" ,
			"epsilon/Epsilon.1024/texture_02.png"
		} ;
	final String MOTION_PATH="epsilon/motions/Epsilon_idle_01.mtn";
	final String PHYSICS_PATH="epsilon/Epsilon.physics.json";

	float glWidth=0;
	float glHeight=0;

	// Add Code Start
	private SimpleImage bg;// BackGround Image
	private float modelWidth = 0;
	private float aspect = 0;
	// Add Code End

	public Live2DRenderer(Context context)
	{
		con = context;
		dragMgr=new L2DTargetPoint();
		motionMgr=new MotionQueueManager();
	}

	
	public void onDrawFrame(GL10 gl) {
        // Your rendering code goes here
		gl.glMatrixMode(GL10.GL_MODELVIEW ) ;
		gl.glLoadIdentity() ;
		gl.glClear( GL10.GL_COLOR_BUFFER_BIT ) ;
		// Add Code Start
		bg.draw(gl);	// background image draw
		// Live2D model adjust
		gl.glScalef(2.4f, 2.4f, 2.4f); // scale(x, y, z)
		gl.glTranslatef(0.0f, -0.3f, 0.0f);	// position(x, y, z)
		gl.glOrthof(0 ,	modelWidth , modelWidth / aspect , 0 , 0.5f , -0.5f ) ;
		// Add Code End

		live2DModel.loadParam();

		if(motionMgr.isFinished())
		{
			motionMgr.startMotion(motion, false);
		}
		else
		{
			motionMgr.updateParam(live2DModel);
		}

		live2DModel.saveParam();

		dragMgr.update();

		float dragX=dragMgr.getX();
		float dragY=dragMgr.getY();
		live2DModel.addToParamFloat(L2DStandardID.PARAM_ANGLE_X, dragX*30);
		live2DModel.addToParamFloat(L2DStandardID.PARAM_ANGLE_Y, dragY*30);
		live2DModel.addToParamFloat(L2DStandardID.PARAM_BODY_ANGLE_X, dragX*10);

		physics.updateParam(live2DModel);

		live2DModel.setGL( gl ) ;

		live2DModel.update() ;
		live2DModel.draw() ;

    }

    public void onSurfaceChanged(GL10 gl, int width, int height) {
		gl.glViewport( 0 , 0 , width , height ) ;

		gl.glMatrixMode( GL10.GL_PROJECTION ) ;
		gl.glLoadIdentity() ;

		// Add Code Start
		modelWidth = live2DModel.getCanvasWidth();
		aspect = (float)width/height;
//		gl.glOrthof(
//				0 ,
//				modelWidth ,
//				modelWidth * height / width,
//				0 ,
//				0.5f ,	-0.5f
//				) ;
//		gl.glOrthof(0, modelWidth, modelWidth * height / width, 0, 0.5f, -0.5f);
		// background image adjust
		gl.glOrthof(-2.0f ,	2.0f , -2.0f ,2.0f , 0.5f , -0.5f ) ;
		// Add Code End

		glWidth=width;
		glHeight=height;
    }

    public void onSurfaceCreated(GL10 gl, EGLConfig config)
    {
    	AssetManager mngr = con.getAssets();
		try
		{
			InputStream in = mngr.open( MODEL_PATH ) ;
			live2DModel = Live2DModelAndroid.loadModel( in ) ;
			in.close() ;
		}
		catch (IOException e)
		{
			e.printStackTrace();
		}

		try
		{
			// Add Code Start
			setupBackground(gl);
			// Add Code End

			//texture
			for (int i = 0 ; i < TEXTURE_PATHS.length ; i++ )
			{
				InputStream in = mngr.open( TEXTURE_PATHS[i] ) ;
				int texNo = UtOpenGL.loadTexture(gl , in , true ) ;
				live2DModel.setTexture( i , texNo ) ;
				in.close();
			}
		}
		catch (IOException e)
		{
			e.printStackTrace();
		}

		try
		{
			InputStream in = mngr.open( MOTION_PATH ) ;
			motion = Live2DMotion.loadMotion( in ) ;
			in.close() ;

			in=mngr.open(PHYSICS_PATH);
			physics=L2DPhysics.load(in);
			in.close();
		}
		catch (Exception e)
		{
			e.printStackTrace();
		}
    }

    /**
     * Called when the engine is destroyed. Do any necessary clean up because
     * at this point your renderer instance is now done for.
     */
    public void release() {
    }

    public void resetDrag()
    {
    	dragMgr.set(0, 0);
    }


    public void drag(float x,float y)
    {
    	float screenX=x/glWidth*2-1;
    	float screenY=-y/glHeight*2+1;

//    	Log.i("", "x:"+screenX+" y:"+screenY);

    	dragMgr.set(screenX,screenY);
    }

	/*
	 * BackGround Image Setting
	 * @param context
	 */
	private void setupBackground(GL10 context) {
		try {
			InputStream in = FileManager.open(LAppDefine.BACK_IMAGE_NAME);
			bg=new SimpleImage(context,in);
			bg.setDrawRect(
					LAppDefine.VIEW_LOGICAL_MAX_LEFT,
					LAppDefine.VIEW_LOGICAL_MAX_RIGHT,
					LAppDefine.VIEW_LOGICAL_MAX_BOTTOM,
					LAppDefine.VIEW_LOGICAL_MAX_TOP);

			// uv area
			bg.setUVRect(0.0f,1.0f,0.0f,1.0f);
		} catch (IOException e) {
			e.printStackTrace();
		}
	}
}

You can change the background image if change of BACK_IMAGE_NAME of LAppDefine.java .

kuro

Hi naotaro. Thank you for your help ! It is now working just fine. It is truly fun when something you make can come to live

Ronggowisnu

Hi all, especially perhaps Naotaro I wonder if there is a way to make the background also moves a bit? (I followed this code and the background stays), also.. just curious if "hit area" can also be implemented here as a live wallpaper?

I am sorry if I post the question here, I just thought it is related very closely.

naotaro

@Ronggowisnu

Drawing point of the background is the following code .

Live2DRenderer.java - onDrawFrame()

gl.glScalef(2.4f, 2.4f, 2.4f); // scale(x, y, z)
gl.glTranslatef(0.0f, -0.3f, 0.0f);	// position(x, y, z)
gl.glOrthof(0 ,	modelWidth , modelWidth / aspect , 0 , 0.5f , -0.5f ) ;

In other words , change the value of glTranslatef.

I don't know about the hit area .
I have never tried together with wallpaper .

Ronggowisnu

@naotaro Hi! thx.. I think I already have this code, but have not tried to change the value in LAppDefine , I will try it as soon as possible

Also... is there a way to reduce memory usage? seems that it's taking a lot of memory(ram?) quite huge . Is it because of *.mtn animation too long? or texture too much?

Ronggowisnu

Hi @naotaro , tried changing the LAppDefine but it didn't work

Ronggowisnu

Hi @naotaro , fyi I changed the
gl.glScalef(2.4f, 2.4f, 2.4f); // scale(x, y, z)
gl.glTranslatef(0.0f, -0.3f, 0.0f); // position(x, y, z)
gl.glOrthof(0 , modelWidth , modelWidth / aspect , 0 , 0.5f , -0.5f ) ;

to :
gl.glScalef(2.0f, 2.0f, 2.0f); // scale(x, y, z)
gl.glTranslatef(0.0f, -0.1f, 0.0f); // position(x, y, z)
gl.glOrthof(0 , modelWidth , modelWidth / aspect , 0 , 0.5f , -0.5f ) ;

Because it is the size and position of my model i tried returning it to your original code but still doesn't work (background doesn't move)

I am still tinkering though lol

Ronggowisnu

Hi, just wanted to share about memory usage, after looking around on some tutorial sites.

on LiveWallpaperService.java
I added :
@Override public void onVisibilityChanged(boolean visible) { if (!visible) { renderer.motionMgr.stopAllMotions(); } else { renderer.motionMgr.startMotion(renderer.motion, false); } }
Seems to reduce the memory usage significantly on my device. (though this might not be entirely correct . . but it works)