누구나 할 수 있는 NFT 만들기 - 3강 Hashlips art engine의 레이어 순서(layersOrder)

안녕하세요 

이번 시간에는  Hashlips art engine으로 그림을 생성할 때 필요한 레이어 순서(layersOrder)에 대해서 알아 보겠습니다. 

 

 

TLTR : 유튜브를 통해 영상으로 보는것이 더 빠르게 이해할 수 있습니다 :)

 

https://www.youtube.com/watch?v=a0eZepjB014 

 

 

 

위 그림에서 볼 수 있듯이, config.js 파일에는 layersOrder이 있습니다. 

layersOrder은 레이어의 순서를 나타냅니다.

그러면 레이어란 무엇일 까요?

레이어는 하나의 층을 나타냅니다, 즉 여기서는 그림의 층을 나타내는 것이죠.

 

 config.js의 layersOrder를 보시면, 

1. background

2. Eyeball

3. Eye color

4. Iris

5. Shine

6. Bottom lid

7. Top lid

의 순서로 조합 된다고 볼 수 있습니다. 

 

 

현재 위 그림을 보시면, layers 폴더안에 Background, Bottom lid, Eye color, EyeBall, Goo, Iris, Shine, Top lid와 같은 폴더를 확인할 수 있으며, 해당 폴더의 이름은 config.js 파일의 layersOrder에 속해있는 이름과 같습니다. 

config.js 파일의 layersOrder의 레이어 이름은 layers폴더에 존재해야합니다. 

 

자 그러면 Background 파일이나, bottom lid 같은 파일을 열어서 보면  그림이 들어 있는것을 알 수 있습니다.  

즉 layersOrder의 순서는

1. background

2. Eyeball

3. Eye color

4. Iris

5. Shine

6. Bottom lid

7. Top lid

이므로, layers안에 있는 background폴더의 그림을 가장 먼저 랜덤으로 들고 옵니다.  

 

그러고나서, Eyeball 폴더의 그림을 랜덤으로 들고와서, Background 폴더에서 들고온 그림과 겹칩니다. 마지막 레이어 순서인 Top lid가 겹쳐질 때까지,  config.js의 layersOrder에 명시된 레이어 순서로 조합을 하게 됩니다. 

 

한가지 더나아가서,

Background, Bottom lid, Eye color, EyeBall, Goo, Iris, Shine, Top lid 폴더 안에 있는 그림을 랜덤으로 조합한다고 했습니다. 그렇다면 그 랜덤의 수치는 어떻게 정할 수 있을 까요?

 

각 그림의 이름을 자세히 보시면 #+숫자의 형태입니다.  #다음의 숫자는 확률을 나타냅니다. 

예를 들어 Bottom lid의 Low#100.png라면 High#20.png와 Middle#40.png을 나오지가 않고, Low#100.png만 이용해 그림이 조합됩니다.