여보게, 저기!
이 문서에서는 이러한 멋진 그래픽을 렌더링하는 방법을 설명합니다.

The avatar images in this article were rendered using Open Hotel Client. If you like habbo or games development in general, please consider contributing to the project or joining the team. My e-mail is at the bottom of this article.

아, 맞다. 걷기, 수영, 누워서 8가지 다른 자세를 취할 수 있다!듣자니 많은 일을 해야 할 것 같고, 확실히 가장자리 상황의 영향을 받기 쉽다.
이곳의 목표는 Habbo 그들의 자산을 어떻게 처리하여 화신을 구축하는지 이해하는 것이다.

명명 규칙

화신 인물은 여러 개의 신체와 옷 부분의 조합을 이용하여 구축된 것이다.habbox standalone avatar imager 를 사용하여 조합을 시도하고 문자를 설명하는 문자열을 얻을 수 있습니다.

Open Hotel에서는 habbox 독립 영상기기와 같은 옵션을 제공하여 이미지 렌더링에 사용합니다(또한 the default habbo api pattern.Those:

{
  look: 'hd-180-1.hr-110-61.ch-210-66.lg-280-110.sh-305-62',
  action: 'mv,respect',
  direction: 2,
  head_direction: 2,
}

그림 위젯

이 예에서 우리의 인코딩 화신은 다음과 같다.

hd-195-1.hr-679-61.ha-1012-110.ch-804-1341.lg-275-110.sh-3089-110

각 도면 섹션은 . 로 구분되며 다음과 같이 설명할 수 있습니다.figureType-imageID-colorID1-colorID2...-colorIDn

행동

동작은 우리가 화신을 구축하는 방식을 바꾸었다. std, 웃음과 mv동작을 예로 들면:

앉거나 손을 흔드는 등 여러 가지 동작이 동시에 발생할 수 있으니 주의해라.응용 동작에 따라 일부 신체 부위는 변하지 않고 다른 부위는 변화할 수 있다.

그림 부품 예

부품 조합

Open Hotel에서 개별적으로 렌더링하여 무엇을 얻었는지 살펴보겠습니다.hd-195-1: 몸+얼굴, 열쇠195와 색깔1 hr-679-61: 열쇠1012와 색깔61이 달린 머리
ha-1012-110: 열쇠1012와 색깔110이 달린 모자
ch-804-1341: 열쇠804와 색깔1341이 달린 셔츠
lg-275-110: 열쇠275와 색깔110이 달린 바지
sh-3089-110: 열쇠3089와 색깔110이 달린 신발

모든 숫자 조합:

Notice: the figure part key is different from the figure part id, as you can see in the Figure Data section of this article.

아래 머리카락 hr-110-61, hr-677-61, hr-3048-61, hr-165-61, 61 을 보세요.모든 색상 figuredata.xml:

지물 데이터

Open Hotel은 figuredata.json라는 파일을 제공합니다.이 파일은 모든 도형 부분에 정확한 이미지를 얻기 위해 우리가 필요로 하는 정보를 포함한다.
이것은 habbo pallete 를 기반으로 하지만, 우리는 그것을 json으로 바꾸어 사용하기 쉽게 한다.
그것을 사용하면 메모리의 모든 내용을 한꺼번에 불러오는 것은 비현실적이기 때문에 필요에 따라 이미지 파일을 선택적으로 불러올 수 있습니다.
그것은 기본적으로 두 개의 1급 키가 있다.

palleteid은settype을 색 사전에 비추는 사전입니다.

palette 추적hr-679-61, 메타데이터(예를 들어 성별), 그리고 각 도형 부분에 사용할 이미지가 필요합니다.

lib 인물(머리카락 679, 색깔 61)을 점차적으로 과장해 보자.머리카락이기 때문에 hh_human_hair Naming Convention 밑에 고정되어 있다.

// figuredata.json
{
  "palette": {
    // 3. get color "61" hex from palette "2"
    "2": {
      "32": { "color": "DFA66F" },
      "61": { "color": "2D2D2D" }
    },
  },
  "settype": {
    // 1. Access the figure type, which is "hr"
    "hr": {
      // 2. Access the palette with id 2
      "paletteid": "2",
      "set": {
        // 4. Get hair with key 679
        "679": {
          // Both genders accept this hair
          "gender": "U",
          "parts": [
            {
              // 5. Since type is hr, get this part 
              // id and move to figureMap.json
              "type": "hr",
              "id": 27,
              "colorable": 1,
              // for part sets with more than one
              // color, multiple color indexes can be used
              "colorindex": 1
            },
            {
              // hrb is used when the avatar is using a hat
              "type": "hrb",
              "id": 27,
              "colorable": 1,
              "colorindex": 1
            }
          ]
        },
      }
    }
  }
}

지물지도

figuremap.json 섹션에 언급된 라이브러리 이름을 저장합니다.
피규어맵에서json, 1 레벨 키:

libs
모든 라이브러리 이름을 포함하는 그룹입니다.

parts
부품 집합 이름과 부품 id를 libs 그룹 인덱스에 비추는 사전입니다.

우리가 필요로 하는 lib를 얻기 위해서는 다음과 같은 절차를 밟아야 한다.

// figuremap.json
{
  "libs": [
    // ...
    // 3. Get the lib id from the 1004th position of the array
    { "id": "hh_human_hair" },
  ],
  "parts": {
    "ha": {
      // ...
    },
    // 1. Access the "hr" partset
    "hr": {
      // 2. Access the part with id 27 and get its lib index
      "27": 1004,
    }
  }
}

현재 우리는 머리카락 이미지를 얻는 데 필요한 모든 정보를 얻었습니다. 이미지 파일 이름만 있으면 됩니다.

건축하다 이미지 파일 이름 지정

결과 파일 이름은 다음과 같습니다.hh_human_hair_h_std_hr_4_2_0 파일의 각 섹션은 다음과 같습니다.

hh_human_hair: 이 파일은 인간의 머리카락의 일부입니다 lib

h: 이미지 크기를 줄일 경우 sh개방식 호텔에서 우리는 sh 이미지를 사용하지 않습니다. 왜냐하면 축소는

에서 처리하기 때문입니다.

std: 이미지의 동작입니다.std이 표준이지만 wlk 걷는 데 쓰일 수도 있고 sml 웃는 데 쓰일 수도 있다.

For some reason, the action mv matches the files with the wlk action name. This mapping happens at animations.json. I might cover animations in detail in a future article.

hr: 도형 부분은 이 예에서 hair.

4: 이 특정 머리카락의 지물 부분 id.

2: 위치, 0부터 7까지 시계 방향으로 회전

pixi-viewport

0: 애니메이션 프레임.std와 같은 동작은 프레임 (0프레임) 하나만 있지만 걷기 mv와 휘두르기 wave와 같은 애니메이션에는 프레임이 더 필요합니다.

결론

이 강좌는 곤혹스러울 수도 있지만 많은 시사가 필요하기 때문에 애니메이션 제작이 더욱 복잡해질 수 있다.
이곳의 목표는 Habbo 렌더링 과정이 어떻게 작동하는지에 대한 일반적인 개념을 제공하고 에 기여하도록 격려하는 것이다.
현재 클라이언트 활동 지점은 Open Hotel 입니다.만약 이 지점을 실행한다면, 본고의 그림을 실제로 보여주는 코드를 볼 수 있을 것입니다.
만약 투고에 흥미가 있거나 문제가 있으면 structure-migration 저에게 연락하십시오.
감사합니다.