今回はドット絵で簡単な地形(地面)を描いてみます。
ピクセルアートは超初心者で描き方も何も分からないので、参考画像をマネして同じようなのを描いて見ます。
はじめに
今回、参考にしたのはUnityのAssetStoreで無料で利用できる「Pixel Adventure1」です。
![](https://nosystemnolife.com/wp-content/uploads/2022/05/20220526001-1024x519.jpg)
中に入っているTerrain、赤で囲んだ部分の左側に近いものを作成してみます。
![](https://nosystemnolife.com/wp-content/uploads/2022/05/20220526003-1024x682.jpg)
ドット絵作成ソフト
PixilArtを利用してみます。無料で利用することが出来るWEBサービスです。
作成開始
では作成していきます。
サイズ、パレット選択
まずはカラーパレットを選択。
![](https://nosystemnolife.com/wp-content/uploads/2022/05/20220526005-1024x743.jpg)
人気パレットの中から、茶色と緑色が複数あるパレットを選択して、サイズを48x48pxにして「NEW DRAWING」。
![](https://nosystemnolife.com/wp-content/uploads/2022/05/20220526006-1024x742.jpg)
画像作成
まずは外枠となる黒線を引きます、アウトラインですね。
![](https://nosystemnolife.com/wp-content/uploads/2022/05/20220526007.jpg)
草部分を緑色で塗りつぶし。
![](https://nosystemnolife.com/wp-content/uploads/2022/05/20220526008.jpg)
同じように地面部分を茶色で塗りつぶし。
![](https://nosystemnolife.com/wp-content/uploads/2022/05/20220526009.jpg)
ものすごくシンプルなものだと三色で作成できますね。これだと流石にシンプル過ぎる感も。
![](https://nosystemnolife.com/wp-content/uploads/2022/05/20220526010.jpg)
次に、影などを付けていきます。まずは薄い緑で光の当たっている感を出してみます。
![](https://nosystemnolife.com/wp-content/uploads/2022/05/20220526011-1024x754.jpg)
黒色との境界には濃いめの緑を挟む感じですかね。
![](https://nosystemnolife.com/wp-content/uploads/2022/05/20220526012-1024x706.jpg)
地面部分も同じように、薄い茶色、濃い茶色を適用。
![](https://nosystemnolife.com/wp-content/uploads/2022/05/20220526013-1024x748.jpg)
地面の模様部分はコピーして複製。
![](https://nosystemnolife.com/wp-content/uploads/2022/05/20220526014-1024x707.jpg)
更に模様を追加、茶色は更に濃い色も使用。
![](https://nosystemnolife.com/wp-content/uploads/2022/05/20220526015.jpg)
利用したのは下の緑3色、茶色4色と黒色の合計8色。
![](https://nosystemnolife.com/wp-content/uploads/2022/05/20220526016.jpg)
使う色を増やすといい感じになるけど、その分大変になりますね。初心者なのである程度使う色を絞った方が逆に良いとも感じました。
画像の抽出
左上のFILEから「SAVE AS .PIXIL」でPIXILの状態を保存。画像にする場合は「EXPORT/DOWNLOAD」
![](https://nosystemnolife.com/wp-content/uploads/2022/05/20220526017.jpg)
作成したのが左側。参考画像が右なので、茶色部分の赤みがやや強いですかね。
![](https://nosystemnolife.com/wp-content/uploads/2022/05/20220526018.jpg)
ということで地面の茶色部分を変更したのが下の画像、大分近くなりましたね。
![](https://nosystemnolife.com/wp-content/uploads/2022/06/20220526020.jpg)