0

I am trying to create a 2D avatar customizer without using a Game Engine inside my Android app.

I will basically have a PNG image as a base to start with. Then I want to layer other images on top of the base to customize the character.

What would be the best option to create this? I have already created a custom ImageView and overrided the onDraw():

public class AvatarView extends ImageView {

public AvatarView(Context context) {
    super(context);
}

public AvatarView(Context context, AttributeSet attrs) {
    super(context, attrs);
}

public AvatarView(Context context, AttributeSet attrs, int defStyle) {
    super(context, attrs, defStyle);
}

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    canvas.drawBitmap(BitmapFactory.decodeResource(getResources(), R.drawable.battle_run_char), 0, 70, null);
    canvas.drawBitmap(BitmapFactory.decodeResource(getResources(), R.drawable.red_cartoon_hat), 70, 0, null);
}

}

This seems very specific by using coordinates. Would there be a better way to achieve this without having to use coordinates?

EDIT:

Here is what I have so far. The guy is a separate image from the red hat.

enter image description here

The Nomad
  • 7,155
  • 14
  • 65
  • 100
  • @Rod_Algonquin Edited original post. This is what I have so far. Just trying to see if this is the best way to do it before I put more effort and time into it. Was also looking at this app: http://androidify.com/ but unsure of how extensive the code is. – The Nomad Aug 20 '14 at 20:35

1 Answers1

1

If you are planning to add on that ImageView dynamically then there is not way to place those images without assigning pixel axis on it

one problem in your custom class is that dont ever decodeResource within your onDraw method that it will be called multiple times and it will cause a big lag problem, instead create an init method within your AvatarView and decode it, and call that init method in all of your constructor.

sample:

public class AvatarView extends ImageView {

private Bitmap body;
private Bitmap hat;
public AvatarView(Context context) {
    super(context);
    init();
}

public AvatarView(Context context, AttributeSet attrs) {
    super(context, attrs);
    init();
}

public AvatarView(Context context, AttributeSet attrs, int defStyle) {
    super(context, attrs, defStyle);
    init();
}

private void init()
{
  body = getResources(), R.drawable.battle_run_char);
  hat = getResources(), R.drawable.red_cartoon_hat);
}

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    canvas.drawBitmap(BitmapFactory.decodeResource(body , 0, 70, null);
    canvas.drawBitmap(BitmapFactory.decodeResource(hat , 70, 0, null);
}

}
Rod_Algonquin
  • 26,074
  • 6
  • 52
  • 63
  • Duly noted about decoding resources. Would you recommend (in your opinion) that this would be a good option for avatar customization? That is doing custom views with coordinates. Adding a game engine just for the purpose of creating an avatar seems like overkill right?? – The Nomad Aug 20 '14 at 20:45
  • @TheNomad I wont, remember all screens devices have different pixels count so when you try this on higher pixel count device it wont look like the picture above. – Rod_Algonquin Aug 20 '14 at 20:49
  • @TheNomad I would recommend using 1 image for each of the customization. but that would require a lot of images. – Rod_Algonquin Aug 20 '14 at 20:50
  • Hmm having 1 image for each customization seems like a hack job. Eventually we will have so many different combinations: hats, shirts, pants, gloves, etc there will be too many combinations. I'll have to look into other options. And thanks for the info on the other density sizes. Will look into SVG options. – The Nomad Aug 20 '14 at 20:53