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

Comments

• naotaro

  October 2015

  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 .
  

  img_packageexplorer.png 99.9K

  img_wallpaper.png 682.2K

  0 · Share on FacebookShare on Twitter Share on Google+
• kuro

  October 2015

  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

  32747.jpg 80.8K

  0 · Share on FacebookShare on Twitter Share on Google+
• Ronggowisnu

  April 2016

  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.

  0 · Share on FacebookShare on Twitter Share on Google+
• naotaro

  May 2016 edited May 2016

  @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 .
  

  1 · Share on FacebookShare on Twitter Share on Google+
• Ronggowisnu

  May 2016

  @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?

  0 · Share on FacebookShare on Twitter Share on Google+
• Ronggowisnu

  May 2016

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

  Screen Shot 2016-05-02 at 9.11.56 AM.png 102.3K

  Screen Shot 2016-05-02 at 9.12.11 AM.png 83.9K

  0 · Share on FacebookShare on Twitter Share on Google+
• Ronggowisnu

  May 2016

  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

  0 · Share on FacebookShare on Twitter Share on Google+
• Ronggowisnu

  May 2016

  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)

  0 · Share on FacebookShare on Twitter Share on Google+