> For the complete documentation index, see [llms.txt](https://docs.zep.us/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.zep.us/zep-script/zep-script-guide/appendix/object-npcproperty.md).

# Object npcProperty

The npcProperty can be specified in the option parameters of the `Map.putObjectWithKey(x, y, dynamicResource, option)` function, and up to five properties can be defined.

<table><thead><tr><th width="171.33333333333331">Name</th><th width="113">Type</th><th>Description</th></tr></thead><tbody><tr><td>name</td><td>string</td><td>Name to be displayed above an object</td></tr><tr><td>hp</td><td>number</td><td>Current HP of an object</td></tr><tr><td>hpMax</td><td>number</td><td>Maximum HP of an object</td></tr><tr><td>gaugeWidth</td><td>number</td><td><p>Width of the HP gauage bar</p><p>If left blank, it is set to the width of the image.</p></td></tr><tr><td>hpColor</td><td>number</td><td>Color of the HP gauage bar<br>E.g. 0x03ff03 (green)</td></tr></tbody></table>

**Example 1 - Create an object using npcProperty**

![](/files/vXBpk2DMlU6J6MGcV15t)

{% file src="/files/ki2d2yApgoXJzc8qD6Tv" %}

```javascript
let blueman = App.loadSpritesheet('blueman.png', 48, 64, {
    left: [5, 6, 7, 8, 9],
    up: [15, 16, 17, 18, 19],
    down: [0, 1, 2, 3, 4],
    right: [10, 11, 12, 13, 14],
    dance: [20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37],
    down_jump: [38],
    left_jump: [39],
    right_jump: [40],
    up_jump: [41],
}, 8);
App.addOnKeyDown(81, function (player) {
    const objectKey = "TestBlueMan";
    const bluemanObject = Map.putObjectWithKey(18, 6, blueman, {
	npcProperty: { name: "BlueMan", hpColor: 0x03ff03, hp: 100, hpMax: 100 },
	overlap: true,
	movespeed: 100,
	key: objectKey, 
	useDirAnim: true 
    });

    Map.playObjectAnimationWithKey(objectKey, "down", -1);
});
```

**Example 2 -Implement an HP dropping effect using npcProperty.**

![](/files/95d1ZAtLGgAmIjhCcoUV)

{% file src="/files/8nxiktehoKIYTnGGtOZC" %}

```javascript
let blueman = App.loadSpritesheet('blueman.png', 48, 64, {
    left: [5, 6, 7, 8, 9], // Image of leftward movement
    up: [15, 16, 17, 18, 19],
    down: [0, 1, 2, 3, 4],
    right: [10, 11, 12, 13, 14],
    dance: [20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37],
    down_jump: [38],
    left_jump: [39],
    right_jump: [40],
    up_jump: [41],
}, 8);

App.addOnKeyDown(81, function (player) {
    const objectKey = "TestBlueMan";
	const bluemanObject = Map.putObjectWithKey(18, 6, blueman, {
		npcProperty: { name: "BlueMan", hpColor: 0x03ff03, hp: 100, hpMax: 100 },
		overlap: true,
                collide: true, // ★ collid: true
		movespeed: 100, 
		key: objectKey, 
		useDirAnim: true
	});

    Map.playObjectAnimationWithKey(objectKey, "down", -1);
});

App.onAppObjectAttacked.Add(function (p, x, y, layer, key) {
    const targetObject = Map.getObjectWithKey(key);
    targetObject.npcProperty.hp -= 10;
    if(targetObject.npcProperty.hp > 0) {
        const hpPercentage = targetObject.npcProperty.hp / targetObject.npcProperty.hpMax;
        if (hpPercentage < 0.3) {
            targetObject.npcProperty.hpColor = 0xff0000;
        } else if (hpPercentage < 0.7) {
            targetObject.npcProperty.hpColor = 0xffa500;
        }
        targetObject.sendUpdated();
    } else {
        Map.putObjectWithKey(targetObject.tileX, targetObject.tileY, null, { key: key })
    }
});

```