LibGDX Draw item in players hand (2D top down view)

Cheers ;).

Jacobs solution is also viable as long as the art is not to be used by things off varying sizes. If you want to allow say a large orc to use the same dagger as the player, and the player happens to be half the size…well, you just doubled your asset count. Say you wanted to use the same sprite for the UI and pickups , it’s now triple the amount of assets.

So take these into account before doing it the cheat way lol.

So is your way the standard way of doing this type of item placement? I mainly plan on only using the assets for the player but it would be cool is something like a skeleton used the same weapons.

Would you not have to redesign the assets for bigger mobs anyway ???

Parenting transforms is a pretty standard way of positioning things relative to other things, regardless of what it is. If say a skeleton was to pick up a bow on the ground, the skeleton would know where about it should hold that particular item.

You would not have to redesign the assets for a bigger mob. Why should a dagger be bigger for a 10ft orc type mob as opposed to a 6ft hero? A dagger is a dagger, if the orcs have their own weapons then of course, you would have to make more assets, as opposed to redesigning existing ones.

If you are making a game, where anybody can pick up anything, then yes; this is a pretty standard way.

I was thinking that an orc with a tiny dagger would look silly haha ::).

I’m going to look into using the parent/child method as it seems much easier in the long run (especially if I want lots of cool weapons). Would you happen to know where I can read more about transforms and this style of placement? :slight_smile:

I have done this previously (open in new tab for full size):

This uses a rather complicated system of origins and roots. Basically, i have a humanoidLayout.json file, where i have all the roots of each piece of equipment for every frame for every direction for a humanoid entity. Each EquipableItem has a path to its equippedLayoutImageAtlas and equippedLayout. equippedLayoutImageAtlas is just a atlas containing all frames of the equipment and equippedLayout is a file that tells the program how to slice up the atlas, which TextureRegion belongs to what direction and frame, and where the origins are for each TextureRegion. Then the EquipmentRendererSystem renders the player and equipment, in order that depends on the direction the player is facing in. The renderer looks if you have a sword equipped, if you do, it retrieves the adequate frame and its origin, then it retrieves the root from the humanoidLayout, and finally it renders the frame so that its origin is aligned with the root.

Tl;Dr: its not really hard but takes a lot of time to make. Origins + atlases.

Damn. That does seem like a lot of work :frowning: I’ve never actually looked into JSON’s either, only XML, HTML, CSS etc.

Now i’m not sure what to do D:

The use of JSON is just an implementation detail, more or less. You can use whatever representation you’re most comfortable with.

As for what you (and presumably the OP) are wanting to do, transform hierarchies are really the way to go, as explained previously by Gibbo3771. I don’t know what framework you’re using, but many if not most graphics frameworks will include support for creating and combining transforms. Generally, what you’ll want to do here is combine the world transform for the player with the local transform (relative to the player) of whatever the player is holding (or is attached to the player or whatever). In terms of matrix multiplication, this will be either player_world_transform * object_local_transform or object_local_transform * player_world_transform, depending on the notational conventions used. The resulting transform will then be the world transform for the object that you want to render.

Matrices are my nightmare but I really want this to work. I found these cool videos where the guy talks about matrices, parenting and how to set things up (Though he is using a complex 3D version and uses matrix4’s).

I’m using LibGDX which likely has matrix support but I actually do know how to add/multiple matrices anyway. For the transforms, would I simply just use vector2’s from the players/weapons positions? As my game is 2D or is it vector3’s ???. I don’t plan on having the player rotate, however the player can face away from the camera so the weaponing positioning could get more complex this way

The videos I was talking about


Is this side-view, or top-down? Also, what do you mean by the player facing away from the camera? (Maybe this was mentioned earlier…)

Top down that allows the player to show his back to the camera. See image below of my game view :slight_smile:

http://s7.postimg.org/oft7c4sbf/javaw_2015_05_28_14_35_20_22.png

I don’t know if this will give you what you need, but when only positioning is involved (no scale, rotation, etc.), combining transforms reduces to simple vector addition, which is trivial. (In the OP’s case, it looks like rotation would be involved, in which case there’s a little more to do.)

Gibbo3771 gave an example of how to do this with positions only, here:

Basically, you’d want something like the following:

  • If the framework has support for anchoring, set the anchor point for the item sprite to wherever you want it to be held. (For example, if the item is a staff, the anchor point would be about midway along the staff.)
  • Determine the offset (a 2-d vector) from the anchor point of the player avatar to the player avatar’s hand.
  • The world position of the item will then be the player position plus this offset.

Hi Jesse,

I did the anchor point thing and the positioning and it works but of course at the moment it only works when the player is facing forward as the players hand location changes when he faces a direction/animations.

Do you know how I would able to setup the positioning so the item can always stay in the hand? Do I have to manually figure out 4 different vectors from the player to the players hand and then just add them the same as before?

Thanks again ;D

Yeah, pretty much. Maybe someone else will have a better suggestion, but the relative position of the hand for each frame of animation is basically a content issue, so it’s just something you have to specify. For a more sophisticated system you might have an editor that allows you to specify the hand position for each frame of animation and then exports that information as JSON, XML, or whatever, which is then read by the game code. But for something fairly straightforward like this, I’d just do the simplest thing that works. (I’d at least store the offsets in a text file so that they’re easily modifiable, but to begin with you could just hard-code them, just to get things working.)

Damn. That’s going to take me forever D:

I take it that i’ll have to also specify the rendering process for when the player is facing away from the camera as well so that the item isn’t rendered in front of the player

How many separate frames of animation (that would affect hand position) do you have total?

[quote]I take it that i’ll have to also specify the rendering process for when the player is facing away from the camera as well so that the item isn’t rendered in front of the player
[/quote]
Yes, that sounds right.

Umm. North/south/east/west have 8 frames each that affect the hand position and then the animations for stabbing/casting is around 8 each as well.

Likely… 40? xD

Well, that’s not too many :slight_smile: Maybe someone else can suggest something, but if it’s just straight-up pixel art, I’m not sure how you’d automate finding the hand offsets. It seems like it would just need to be done manually.

Didn’t want to just hand out a solution until you had multiple input, but here is pretty much what I use.

A member of JumpButton Studios helped me understand this, I now use it for everything, I even wrote it in C# and C++ it was that damn useful.

You can use it if you wish, this is the basic version that just parents everything, written in Java :

import com.badlogic.gdx.math.Affine2;
import com.badlogic.gdx.math.Matrix4;
import com.badlogic.gdx.math.Quaternion;
import com.badlogic.gdx.math.Vector2;
import com.badlogic.gdx.math.Vector3;

/**
 * Represents the data for the position, scale, angle and origin
 * 
 * @author Stephen Gibson
 */
public class Transform {

	public static Quaternion ZERO_ROTATION = new Quaternion();
	public static Matrix4 ZERO_TRANSFORM = new Matrix4();
	public static Vector3 VECTOR_ZERO = new Vector3();
	public static Vector3 VECTOR_ONE = new Vector3(1, 1, 1);

	// The transform that is parented to this transform, for relative position,
	// scale and rotation
	protected Transform parent;
	public Vector3 position = new Vector3();
	public Vector3 scale = new Vector3(1, 1, 1);
	public Quaternion rotation = new Quaternion();
	
	// Scale and rotation matrix
	public Matrix4 model = new Matrix4();
	public Matrix4 transform = new Matrix4();

	/**
	 * Sets the parent of this transform, this transform won't be updated until the next step
	 * @param parent
	 */
	public void setParent(Transform parent){
		this.parent = parent;
	}
	
	public Matrix4 getParentTransform(){
		if(parent != null)
			return parent.getTransform();
		return ZERO_TRANSFORM;
	}
	
	public Quaternion getParentRotation(){
			if(parent != null)
				return parent.getRotation();
			return ZERO_ROTATION;
	}
	
	public Vector3 getParentScale(){
		if(parent != null)
			return parent.getScale();
		return VECTOR_ONE;
	}
	
	public Matrix4 getModelMatrix(){
		model.idt();
		model.scl(scale);
		model.rotate(rotation);
		return model;
	}
	
	public Matrix4 getTransform(){
		transform.idt();
		transform.mul(getParentTransform());
		transform.translate(position);
		transform.mul(getModelMatrix());
		return transform;
	}
	
	/**
	 * Gets the position relative to the parent
	 * @return
	 */
	public Vector3 getPosition(){
		return position.cpy().mul(getParentTransform());
	}
	
	/**
	 * Gets the absolute position
	 * @return
	 */
	public Vector3 getLocalPosition(){
		return position;
	}
	
	/**
	 * Get the scale relative to the parent
	 * @return
	 */
	public Vector3 getScale(){
		Vector3 scl = parent == null ? VECTOR_ONE : parent.getScale();
		return scale.cpy().scl(scl.x, scl.y, scl.z);
	}
	
	/**
	 * Get the rotation relative to the parent
	 * @return
	 */
	public Quaternion getRotation(){
		return rotation.cpy().mul(getParentRotation());
	}
	
	public void setPosition(Vector2 position){
		this.position.set(position, 1 );
	}
	
	public void setScale(Vector2 scale){
		this.scale.set(scale, 1);
	}
	
	public void setRotation(Quaternion rotation){
		this.rotation = rotation;
	}
	
	public void setAngleAxis(float x, float y, float z, float degrees){
		rotation.setFromAxis(x, y, z, degrees);
	}
} 

This version here, although not written in Java, allows you to choose what part of the transform to parent. Should be easy to duplicate LINK

Thank you, Gibbo ;D

I don’t think I know enough about matrices/this type of math at the moment so i’m going to go the cheating route for this game (The built in assets method). I know how to add/multiple matrices but i’ve never dealt with them in LibGDX/games so it’s a bit overwhelming.

I have to decide on the collision detection for my weapons as well. I’m likely going to use a separate rectangle around the player, with varying size for the weapon OR give each weapon a hitbox that changes direction depending on how the player faces :point:

You are free to implement that class into your project, don’t worry about how it works, hell I’m still learning matrices lol.