あるみにメモ

技術的なメモをかくかもしれない

Paint3Dでフリー素材の差分を作った話

Paint3D、思ったより便利じゃーん!

って思ったあるみにの話。

……

ゲームを作るとき、よほどグラフィックに秀でた人間であるか、そういった人間が身近にいて、かつ協力してもらえる状況でない限り、「フリー素材」を用いると思います。

「いらすとや」にお世話になった人も少なくないでしょうし、Unityで言えばアセットストアを使ったり、適当に検索して引っかかったフリー素材を使って、ゲームに組み込むのがやっぱりお手軽ですよね。

簡単なオブジェクトや、複雑なアニメーションが求められない限り、それでうまくいくと思います。

しかし、「操作キャラ」はどうでしょう。

操作キャラの場合、実現したい動きに合わせて、グラフィックも変化させたいはずです。

しかし、フリー素材にそんな差分あるわけない(ごくまれにあるけども)。

そんな感じの状況で加工OKのフリー素材を加工して差分を作ればよくね?

とおもってやってみた話です。

主人公はハムちゃん

今回用いる素材はこちらです。

ハムちゃん。

f:id:aluminum_pepe:20180826025836p:plain

かわいい。

拾ったのはここから↓↓

frame-illust.com

(無料使用可能、加工もOKとのこと)

詳細は省くがハムスターを自機に用いたゲームを作ろうとしていたのですが、

ハムスターかつゲームに使えそうなイラストがあるわけもなく。

そのなかでもかわいいと思ったこのイラストをもとに、差分を作ってみることにしました。


Paint3Dを起動

グラフィッカーいねぇ新しく書けねえで困ってるのに、優秀なペイントソフト(Photoshopとか)を持ってるわけないでしょ。

無料でも高性能なペイントソフト(GIMPとか)もあるけど、レイヤーもよくわからん素人にいきなり複雑な機能も使いこなせんわけですよ。

今回使って見るのは、Windowsなら多分みんな無料で使える?「Paint3D」です

f:id:aluminum_pepe:20180826030210p:plain

3Dの名の通り立体オブジェクトも作れるものですが、今回は2D的な利用をしていきます。

3Dでちょっといろいろしてみた記事があります。


aluminum-pepe.hatenablog.com


まあここで触った事があるのも大きいですが、

自分は、ペンが選べて、色が吸い取れて、図形が作れて、くらいしかわからないです。

それが簡単に扱えるので、十分だと思います。


f:id:aluminum_pepe:20180826030323p:plain

単純そうでしょ?

GIMPというのもダウンロードしてみましたが、わけわからなくなりました()


f:id:aluminum_pepe:20180826030621p:plain

もはや白いキャンバスとかすら出せなかったよ(調べろ)


秘技、マジック選択

今回使うのは

  • ペン機能
  • 塗りつぶし機能
  • 色コピー
  • 選択
  • マジック選択

です。

今回はこの「マジック選択」がキモです。

使ってみたらなかなか有能?だったので共有したいと思った次第です。


例えば先ほどのハムちゃんの画像をインポートしておきます。

f:id:aluminum_pepe:20180826030703p:plain

「吸い取りペン」を用いて、くわえているタネを消しました。

f:id:aluminum_pepe:20180826030713p:plain

拡大しながらかけるのもいいですね。

f:id:aluminum_pepe:20180826030722p:plain

そしてマジック選択。

f:id:aluminum_pepe:20180826031334p:plain

切り取り範囲を選択するように言われるので、鼻周りをぐるり。

f:id:aluminum_pepe:20180826032753p:plain

決定を押せば、

f:id:aluminum_pepe:20180826031347p:plain

切り取られました。

f:id:aluminum_pepe:20180826031356p:plain

なんか浮き上がった……

「マジック選択」は、選択した範囲内をソフトが判断して切り取ることが出来る機能です。

今回は鼻とその周辺をいい感じに切り取ってくれました。

あとはこれをいい感じに横に移動させて……

f:id:aluminum_pepe:20180826031423p:plain

そしてそれっぽく「吸い取りペン」で色を合わせて調節。

f:id:aluminum_pepe:20180826031441p:plain

目も「マジック選択」で移動させます。

f:id:aluminum_pepe:20180826031453p:plain

すると横を向いているハムちゃんになりました。

部位を切り取って移動させるだけでもかなりそれっぽくなるみたい。あとは手をずらせば良さそう。


「マジック選択」は精密な切り取りも必要なく、切り取り後の修正もしやすかったです。

自動で切り取られますが、決定前に範囲の修正もできます。

また、一度切り取った範囲は「選択」で移動させられるので他の差分を作るのにも役立ちました。


ハムちゃん差分いろいろ

ということで、作ったハムちゃんたち。

f:id:aluminum_pepe:20180826031521p:plain

これが横向き。

あとはなんか、再配布になってしまわないように、まとめてドン。

f:id:aluminum_pepe:20180826032440p:plain

足とか目とか、切り取って消したり移動させたり、技術無いなりに頑張ってみました。


透過

うっかり透過でないバックに書いてしまったので、背景透過のウェブツールを使用しました。

www.webtoolss.com

これがなかなか便利でした。「戻る」機能なんかもあってよい。


まとめ

ということで、素材がないと全てを諦める前に、

加工OKなフリー素材から作ってみる手があるのでは、という話でした。

比較的簡単で分かりやすい「Paint3D」も使っているので、なかなか良いのではと思いました。

f:id:aluminum_pepe:20180826032551p:plain

それにしてもハムちゃんかわいい。

自分で手を加えたのもあって、気分も上がりましたねえ

切り取ったハムちゃんで作ったゲームは、いずれ紹介できればなと思います。