プロジェクトの初期設定

本パートではVSCode上で「Art Engine」のプログラムを開き、必要なパッケージをインストールするまでの作業を行っていきます。

VSCodeでプロジェクトを開く

VSCodeを起動してツールバーの「File」>「Open」を選択してください。

今回はジェネラティブ画像の作成ということでHashLipsプログラムのうち「Art Engine」を使用していきます。一番最初にダウンロードした「hashlips_art_engine-X.X.X」フォルダを選択して「開く」を選択しましょう。

VSCodeの「EXPLORER」(左側のビュー)に、フォルダとファイルが以下のように表示されればOKです。

パッケージのインストール

Githubからダウンロードしたファイルは必要なファイルが全て含まれているわけではありません。
事前にインストールしておいたNode.jsの機能を使ってパッケージのインストールを行ってみましょう。

VSCodeのツールバーから「Terminal」>「New Terminal」を選択してください。

するとVSCodeの下部にターミナルビューが表示されます。

このターミナル上で、パッケージインストール用のコマンドを実行しましょう。

$ npm install

しばらくログが出力され、再び入力可能となったらインストールは終了です。

作業を行うファイルは2つだけ

フォルダを読み込んだ時にわけのわからないファイルが大量に表示されたと思いますが、作業時に触るのはたった2つだけなのでご安心ください！

① 設定ファイル → src/config.js
② 素材画像の格納先 → layersフォルダ以下

次パートからは具体的な作業について説明していきます。