©株式会社ピコラ Picola Inc.

  • ピコラボ08號

ゲーム開発者を目指す学生のためのPhotoshopクソコラ講座② 画像配置

最終更新: 2019年11月8日

コンニチハ。ゲーム業界の片隅に生きるクソコラぶっ壊れ英語ロボ・ピコラボ08號デス。

好評にお答えして第二回デス。ちなみに書き溜め分デス。


前回のPhotoshop講座の後、ファイルを作成したり、モードを変更したり、別名で保存したりしてましたか?


今回は画面に画像を配置をしてみましょう。



使う画像について


前回、↓の画像みたいなのを作りますと言いました。元画像があって、それに手を加えてそれっぽくする技法デスね。

さて、作業をする前に、まず大きな問題が一つあります。


他のゲームの画像って使って良いの?って疑問デス。


著作権の問題デスね。SNSに上げるクソコラも、実際グレーラインだったりします(ピコラボ08號は問題ない画像のみ使ってます)


ピコラのゲームは「パンダと犬」以外は大丈夫デス。

ゲームの企画書レベルで、あんまり変な使い方をしなければ(これもどうとでも取れる、大人のズルい言い方デス)


ちなみにパンダと犬は、ピコラもスティーヴン★スピルハンバーグ先生から権利を借りてゲーム化しているのでNGデス。


この辺は、学校ごとに微妙にスタンスが違うと思うので、先生に聞いてみると良いと思います。


「自分達で作った物以外は絶対にダメ」

「勝手に使うのはダメ、ライセンス的に問題無いフリー素材ならOK」

「就活用のポートフォリオはダメ、外に出さない学校課題なら既存ゲームの画像もセーフ」

「別にどうでも良いんじゃん?著作権とかよく知らんけどな!」


まあ色々な考え方があると思います(最後の学校は無いことを祈りますが)


少なくとも就活で企業に出すなら、使わない方が無難だと思いますね。

もちろん企業によっては、企画書に既存ゲームの絵があっても出来が良ければ構わないという所もありますし、一概には言えないです。採用担当者に確認できるならアリかもしれません。そういう意味で「使わない方が無難」で留めておきます。


じゃあどうするか?

  1. 自分で描く

  2. 誰かに描いてもらう

  3. Unity / UE4で組み立てる

  4. 著作権的に問題無いフリー素材を拾ってくる

基本はこの4つでしょう。


ただ「自分で描く」はオススメしません。絵描き能力によっぽどの自信があれば別デスが。

「誰かに描いてもらう」は描いてくれる絵描きがいれば選択肢に入れてください。



「Unity / UE4で組み立てる」はオススメデス。


Unityに配置してアニメーション付けただけ、作業時間30分

当たり前デスが、ちゃんと3Dゲームとして成り立つ画面が作れます。

UIとエフェクトを乗せれば大体カタチにできますし、ゲームエンジンのトレーニングにもなりますしね。


ちなみにピコラボもゲームに使えますよ!


弱点として、ある程度使えないと中途半端になることデス。


また無料アセット縛りだと似たり寄ったりの絵になりがちで、ちゃんとバリエーションを作ろうとすると有料アセット購入を視野に入れる必要があります。


ゲーム性が違ってても、同じアセットで作られるとどうしても同じように見えてしまうので、ゲームごとの違いはハッキリさせたい所デス。


あと3Dはフリーでもそこそこアセットがあるしシェーダで見た目変えられるけど、2Dになると選択肢が狭まってキツイとかデスね。



画像を探そう


さて、残ったのは広大なネットの海から「著作権的に問題の無いフリー素材を拾ってくる」という手法デス。


……こう言うと、なぜかみんないらすとやさんを使い始めるんデスね。なぜでしょう?

一番身近だからでしょうか?母の胸のように安心できるんでしょうか?いらすとやさんは偉大デス。

いらすとやさんハンマークエスト、ゲージ最大でタップするとハンマーエネルギーが噴出し敵をぶっ飛ばすカジュアルゲーム

まあ、全てをいらすとやさんの画像で構築したゲームなら、まだ良いかもしれません。

ゲーム性が違ってても、同じアセットで作られるとどうしても同じように見えてしまうので、ゲームごとの違いはハッキリさせたい所デス。

(この問題は残り続けますが)


「いやーちょうど良い絵が見つからなくて…気にしないでください」

それ以前の問題として、な ぜ か、自分の画像の足りてない部分だけいらすとやさんで補おうとするヒトが多いデス。


これは非常によくありません。

企画系の学生が作ったゲームイメージのダメな所ツートップは「取ってつけたような画像」と「何をしているか分からない画像」デス。


一番重要なのは、一貫性を持たせるということデス。

キャラの絵がページごとに違うとか、テイストが一致していないとか、割とその時点で手抜きに見えます。


リアルなゲーム萌えキャラは出ませんし、ボクセルのキャラも出ません。当たり前のことデス。

色々なキャラクターが出るゲームはテイスト統一にものすごく気を使っています。すごいことデス。

とはいえ、学生が色々なキャラクターが出るゲームと同じことはできないので、まずは同じテイストの素材だけを使うことを心がけましょう。


こういう所を調べていけば、なんとなく見つかるんじゃないでしょうか。

萌えキャラからモンスターまで!アプリやゲーム開発で使えるフリー素材サイト10選【2018年度版】

【まとめ】ゲーム開発で使えるフリー素材<背景編>

背景からモンスターまで!?アプリ開発で使えるフリー素材サイト15選

パブリック・ドメインの画像を検索できる7つのサイト!

CLEAN PNG

素材探しに便利! クリエイティブコモンズ画像を入手できる5つのサイト

SILHOUETTE DESIGN


ライセンスはちゃんと確認してくださいね。【超入門編】オープンソースソフトウェアライセンスを知ろう

サイト側で商用無料!改変可能!と書かれていても、細かく見ると作者ごとに違ってたりしますから。


UnityアセットはAsset Storeライセンスがあるのである程度安心していいデスが、アセットによっては付属ライセンスもあるので注意してください。


それで探すけど、一貫性を持った画像を見つけるのが難しくて諦める、までがテンプレだったりします。

絵描きの友達を増やしましょう。背景は↑で探して、キャラは描いてもらうとかでもかなり違いマス。友達いなくて絵描きスキル磨きはじめるくらいなら、UnityやUE4での画面構築技術を磨く方が早いし有用デス。



画像の配置について


さて……ようやく本題デス。今回は↑の方が重要なので、こっちの方がオマケと言っても良いデス(Photoshop講座なのに)


Photoshopで画像を開く方法はざっくり2つ。

開きたい画像をドラッグ&ドロップするか、「ファイル(F)」→「開く(O)」(Ctrl + O)デス。かんた~~~ん!


ドラッグ&ドロップで注意が必要なのは、二枚目以降のドロップする場所が違うと開かれ方が違うことデス。


一枚目は何も問題なく開けます。


問題は二枚目以降デス。

一枚目に開いた画像の“外”にドロップすると、別のファイルとして開かれます。これは理解しやすいと思います。それぞれ編集できます。


Enterか上の「◯」で配置 / Escか上の「✕」でキャンセル

一枚目に開いた画像の“中”にドロップすると、一枚目の画像に、別レイヤーとして開かれます。

なんか開こうとすると変になる…とか、一枚目消えた…みたいになるのはコレが原因のことが多いデス。

慣れればどうってこと無いデスが、案外こういう細かい所で引っかかってPhotoshop難しい……ってなってる印象デス。


それぞれの開き方の使い分けもありますが、長くなるので後回しします。



今回言いたいことは一つ。


いらすとやさんにばっかり頼っちゃダメデス!ちゃんと画像を探しましょう!


いらすとやさんはワタシの宿主もユーザーのプレイイメージとか、企画書のワンポイントで使ってますが、さすがにゲーム画面に使うことは無いデス。


次回はレイヤー辺りからやっていきましょう。乞うご期待。