# 오브젝트 npcProperty

npcProperty는`Map.putObjectWithKey(x, y, dynamicResource, option)`함수의

option 파라미터에서 지정할 수 있으며, 다음 7가지 속성을 지정할 수 있습니다.

<table><thead><tr><th width="171.33333333333331">이름</th><th width="113">타입</th><th>설명</th></tr></thead><tbody><tr><td>name</td><td>string</td><td>오브젝트 위에 표시될 이름</td></tr><tr><td>hp</td><td>number</td><td>오브젝트의 현재 체력</td></tr><tr><td>hpMax</td><td>number</td><td>오브젝트의 최대 체력</td></tr><tr><td>gaugeWidth</td><td>number</td><td><p>체력 게이지바의 너비</p><p>생략시 이미지의 너비 크기로 설정됩니다.</p></td></tr><tr><td>hpColor</td><td>number</td><td>체력 게이지바의 색상<br> ex) 0x03ff03 (초록색)</td></tr></tbody></table>

**예제 1 - npcProperty를 사용해 오브젝트 생성하기**

<div align="left"><figure><img src="https://2461137890-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiW553XSGeKCAPpImxXi3%2Fuploads%2FxC35ScV5OcLBBuBW3xzj%2FGIF%202023-03-27%20%EC%98%A4%ED%9B%84%2012-35-27.gif?alt=media&#x26;token=19ef6f61-5b1a-4a2b-abf5-e6203ad7d473" alt=""><figcaption></figcaption></figure></div>

{% file src="<https://2461137890-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiW553XSGeKCAPpImxXi3%2Fuploads%2FAXTW4uScSs3g2T9U1Zee%2FnpcProperty.zip?alt=media&token=6175f73b-79cc-44eb-838f-798527162e85>" %}
예제 파일
{% endfile %}

```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,
        offsetX: -8,
        offsetY: -32,
    });

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

**예제 2 - npcProperty로 체력이 깎이는 효과 구현하기**

![](https://2461137890-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiW553XSGeKCAPpImxXi3%2Fuploads%2FMEvdzCEr9tFURVDhF6qY%2FGIF%202023-03-30%20%EC%98%A4%ED%9B%84%203-30-36.gif?alt=media\&token=308c2dbd-32df-49c0-9b4d-5caa9a76031d)

{% file src="<https://2461137890-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiW553XSGeKCAPpImxXi3%2Fuploads%2Fvsr8LM2tZpRyZ2chyqJi%2FnpcProperty2.zip?alt=media&token=b19cf7b8-9464-4e33-91d0-ec8bc055497e>" %}
예제 파일
{% endfile %}

```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,
            collide: true, // ★ collid: true
            movespeed: 100, 
            key: objectKey, 
            useDirAnim: true,
            offsetX: -8,
            offsetY: -32,
    });

    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 })
    }
});

```