Cz_mirror Game開発備忘録

週末にUnity でゲーム開発をしています。ゲーム開発を通じて得た情報の備忘録として活用するブログになります。

AffinityDesignerでバイクと街の背景を描いてみました

 先日AffinityDesignerで描いたバイクに街の背景を加えてみました。(近所の道路や歩道などのある横道を撮影するなどしておくと非常に参考になりました。)

AffinityDesignerは今後ゲームの素材などを自作できるようにするために、iPad版のアプリを購入し、色々なツールなどを試しています。

gyazo.com

背景は近所で撮影した写真を構図の参考にしながら描写しています。

壁、歩道、道路をだいたいのエリア分けをして、描写しています。

 

道路の描写

道路は灰色系のグラデーションとノイズをかけたもので描画しています。

奥行きを表現するために、手前のノイズは63%、奥は24%にしてみました。

gyazo.com

 

道路の白線の描写

白線は白い正方形を変形させて道路に合わせています。次に白線を親レイヤーとなるように少し削れた感じの描写をするために、黒い削れたような汚れを適当に追加しています。汚れのオブジェクトはペンツールなどで適当に描画していますが、親子関係がいじされていれば、白線からはみ出してもその部分は描写されないので、かなりざっくり作っています。

gyazo.com

排水溝の描写

排水溝も道路で使用したノイズありのグラデーションで適当に描写しています。色を道路よりも薄めにしたりしながら調整しています。排水溝も白線の時と同様に排水溝を親レイヤーにして、楕円グラデーションで中央から外側にかけてだんだん透明になるような感じで適当な汚れのオブジェクトを追加しました。

gyazo.com

排水口の描写

排水口はペンツールでかなりざっくりとして感じで周りを描いています。(撮影した写真を参考にしながら、奥側をわずかに内側に変形させるなどしています。)その他はかなりざっくりとしたオブジェクトを濃い目のグレーの色のグレデーションで描画して設置しています。

gyazo.com

 

道路の汚れの描写

道路の汚れも適当な形のオブジェクトと排水溝で使用したような半透明のグラデーションで描画しています。

ヒビはペンツールで適当なストロークにしたりしながら追加しています。

gyazo.com

 

 

Affinity Designerを触り始めました

最近iPadアプリのAffinity Designerを触り始めました。iPad上でベクターグラフィックを作成可能なツールです。

 

ベクターとラスターの両方を扱える

Affinity Designerではベクターとラスターの両方を扱うことができます。ベクターで作った画像にラスターのブラシで描画することが可能です。

https://gyazo.com/40647aec687b15a1acf4532c389b2cf9

 

親オブジェクトをベースとしたクリッピング

レイヤーで親オブジェクトの子となるように、子のオブジェクトを配置すると、親オブジェクトの描画範囲内に子のオブジェクトはクリッピングされるので、親オブジェクトに対してハイライトや影などのオブジェクトを追加するのが容易でした。

 

ブラシ

ブラシの種類もかなり豊富で、単純なオブジェクトに対してブラシをストロークに適用するだけでもちょっとした見栄えになりました。

https://gyazo.com/98461f4bbc44d406653411c7eb70ba87

 

パス

ペンツールもかなり使いやすく、スタピライザなどを使うことで、螺旋のようなものを描画しやすく、スマートペンにすると、適当に点を打っていくだけでも、いい感じに曲線になっていくので、調整程度でオブジェクトの描画ができました。

https://gyazo.com/ccde5198d8c57c7bd0b28a585f6ba1d0

https://gyazo.com/83aa01b1d629b766cf0d00b072b14eb3

 

グラデーション

グラデーションもApplePencileや指でなぞるだけで設定でき、透明度やノイズなども設定できるので、背景などでもうまく活用できそうな印象を受けました。

https://gyazo.com/969070640c477ccf1109cafce92ed972

 

レインボール ヒント 「藍」(見た目は青です)

unityroom.com

 

藍(青)の玉のヒントです。

棒の色と位置の組み合わせです。
長い棒と短い棒が被っている場合は、短い棒の色を優先してください。

レインボール ヒント 「黄色」

unityroom.com

 

黄色の玉のヒントです。

4x4の色の組み合わせが2つあるので、それを組み合わせてください。
交差する色のヒントは黄色の部屋の中にあります。