5회차 해시립스 (hashlips) 사용해서 대량 이미지 만들기

# 오픈소스인 해시립스를 사용해서 대량 이미지 만들기 

 

해시립스 깃허브 링크에서 코드를 다운받아준다. 

readme에 사용법이 자세하게 나와있다. 기본 이미지가 있어서 테스트 해볼 수 있다.

https://github.com/HashLips/hashlips_art_engine

GitHub - HashLips/hashlips_art_engine: HashLips Art Engine is a tool used to create multiple different instances of artworks bas

 

코드를 다운받아서 실행시켜보자. 다운받은 경로에 가서 아래 명령어를 순서대로 쳐준다.

 

npm install
npm run build

 

그러면 로그가 출력되면서  build 폴더가 생기고, /build/images 폴더와 /build/json 폴더가 생긴다.

/build/images 폴더를 보면 만들어진 이미지 결과물들을 볼 수 있다. 

 

genator started undefined
Editions left to create:  [
  0, 1, 2, 3, 4,
  5, 6, 7, 8, 9
]
DNA: [
  '0.1:stars#5.png',
  '1.0.0:1backpack-lines.png',
  '1.0.1:backpack-FILL.png',
  '2.0:faceA#3.png',
  '3.1:floral#30.png',
  '7.2:nametag#40.png',
  '4.1:z1,z1,star eyes#30.png',
  '5.0.0:z1,bluehair#50.png'
]

Clearing canvas
Editions left to create:  [
  0, 1, 2, 3, 4,
  5, 6, 7, 8, 9
]
Writing metadata for 0: {"name":"Series 2 #0","description":"This is the description of your NFT project, remember to replace this","image":"ipfs://NewUriToReplace/0.png","imageHash":"c17dcbfe7c2074ca82a0d749158210523eee3d7a60b1e3ba4292ffe4a651ec1e","edition":0,"date":1669526063876,"attributes":[{"trait_type":"Background","value":"stars"},{"trait_type":"Back Accessory","value":"Backpack"},{"trait_type":"Head","value":"faceA"},{"trait_type":"Clothes","value":"floral"},{"trait_type":"Shirt Accessories","value":"nametag"},{"trait_type":"Eyes","value":"star eyes"},{"trait_type":"Hair","value":"bluehair"}],"compiler":"HashLips Art Engine - NFTChef fork"}
Created edition: 0
DNA: [
  '0.0:coulds#5.png',
  '1.0.0:1backpack-lines.png',
  '1.0.1:backpack-FILL.png',
  '2.0:faceA#3.png',
  '3.1:floral#30.png',
  '7.1:gold chain#40.png',
  '4.0.1.0:z1,eye1.png',
  '5.0.0:z1,bluehair#50.png'
]

Clearing canvas

 

이번에는 내가 그린 이미지들로 한번 만들어봤다. 

 

# 내가 그린 이미지 적용하기 

 

기존에 있던 layers 폴더를 날리고, 새로운 layers 폴더를 만들어줍니다. 

새로 만든 layers 폴더에 맞게 src/config.js 에 있는 layerConfigurations 를 수정해줍니다.

 

const layerConfigurations = [
  {
    growEditionSizeTo: 100,
    namePrefix: "UnderTheMovie",
    layersOrder: [
      { name: "Background" },
      { name: "Characters" },
      { name: "Eyes" },
      { name: "Lips" },
      { name: "Accessory" },
    ],
  },
];

 

* growEditionSizeTo 는 해당 설정으로 만들 그림 개수

* namePrefix 는 메타데이터에 name으로 나타나는 접두어입니다. 

저렇게 쓰면 UnderTheMovie #1, UnderTheMovie #2 이런식으로 만들어집니다.

* layersOrder가 조금 복잡한 부분인데, Layer를 쌓을 순서를 정의해주는 겁니다. 먼저 쓰는 순서대로 제일 아래에 쌓입니다. 저렇게 쓰면 Background - Characters - Eyes - Lips - Accessory 순으로 그림이 쌓입니다. 

순서를 다르게 지정해주는 방법도 있는데, 그냥 순서대로 적어주는 게 가장 보기에도 좋을 거 같습니다. 

 

Layers 폴더 구조는 아래와 같습니다! 

 

layers
  |----- Accessory
  |----- Background
  |----- Characters
  |----- Eyes
  |----- Lips

 

(중요!) 이미지 이름은 { 특성 }#{ 나타나는 비율 } 으로 지어줘야 하는 것 같습니다.

 

 

config.js 파일을 변경한 후에는 파일을 닫았다가 다시 열어서 변경사항을 다시 읽을 수 있도록 해줘야 합니다.

 

그리고 다시 빌드 (이미지 만들기) 를 해줍니다.

 

npm run build
or
npm run generate

 

허걱 제가 100개나 만들도록 해서,, 열심히 만들어지네요.

 

 

이렇게 NFT 발행에 사용할 이미지를 해시립스를 활용해서 만들어봤습니다.