C#でゲームを作る2016 第5回
•
0 gefällt mir•1,660 views
KMC’の新入生プロジェクトの一つ「C#でゲームを作る2016」で使ったスライドです。 まとめ記事：http://kmc.hatenablog.jp/entry/2016/11/20/100421
Empfohlen
Weitere ähnliche Inhalte
Mehr von 京大 マイコンクラブ
Mehr von 京大 マイコンクラブ (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (10)
C#でゲームを作る2016 第5回
- 2. 自己紹介 京都大学理学部理学科二回生 ID: suzusime（すずしめ） 物理学徒 お絵かき勢になりたかった。
- 3. 近況報告 ゆうべ Adobe Creative Cloud を契約してしまいました。 本日限定で半額とかいうのを23:30ごろに発見して、一瞬 迷った後に購入してしまいました。 今朝インストールしたら動きませんでした。 設定を弄ったらなんとか動きました。 でも重いのでデスクトップPCの購入を模索中……
- 4. 自己紹介をしましょう 名前（もし部員であればID） 所属（学部、回生など） 出身地 好きなゲーム、本、音楽等 一言 （※全て任意です）
- 6. 今日の目標 今回は、むずかしいぷろぐらみんぐのはなしはやりませ ん。 もうプログラミング疲れた…… ということで画像編集講座です。 （私の本業） 画像で遊びましょう！
- 7. 初めての人のために このプロジェクトでは最後（夏休み前か後を予定）に 作ったゲームを発表してもらおうと思っています。 みんなで遊んで品評会をしましょう。 実際に作る段になってから考え初めても大変なので、ど ういうものを作りたいか予め考えておいて下さい。 高度なものは求めません。3分ゲーのようなもので結構 です。
- 10. ゲームを完成させること 一つの例として「ゲームを完成させること」を目標にし てみるのはいいのではないかな、と思います。 誰かゲーム会社の人がツイッターで「どんな稚拙なもの でも、ゲームをエンディングまできちんと完成させた学 生さんはどれほどいるだろう？」みたいなことを言って いたのを見た記憶。 ちなみに私は完成させたことがないのでこれを目標にし たいと思います。
- 11. なぜ画像編集術を学ぶのか まずこちらをご覧下さい。 マシなUIを作る（メニュー編） - 実践ゲーム製作メモ帳 (http://d.hatena.ne.jp/eiki_okuma/20110314/1300099605) 東方素材集 – 東方備忘録(http://www.moon.zaq.jp/ohgosho/)
- 12. なぜ画像編集術を学ぶのか みてきたように、ゲームを制作するときには様々なとこ ろに画像をあしらうとよいです。 テクスチャは大事、はっきりわかんだね。 また、他にもタイトル画面やメニュー画面、UIなどで使 う画像を用意する必要があります。
- 13. メニュー画面の例
- 14. なぜ画像編集術を学ぶか 画像の用意が必要だと言うことはわかったかと思います が、それを自分でやる必要はあるでしょうか。 画像関係はすべてグラフィッカーさん、音楽関係は全部 音楽の人に任せ、自分はプログラムだけに徹するという のもありでしょう。 が、音楽に比べると画像のほうはちょっとした調整が必 要なときにプログラマが自分で修正してしまった方がは やいということが多いかなと思います。
- 15. なぜ画像編集術を学ぶか ということで画像編集の最低限のことを知っておくと武 器になるかなと思うのです。 ただし、「キャラの絵を描くぞ！」とかそんなことはし ません。あくまで文字画像の作成や既存の画像の加工な どの簡単なことをやります。 キャラの絵を描きたい人はぜひお絵かき練習プロジェクトへ！
- 17. PictureFan 画像閲覧、写真加工ソフト レイヤーなどの機能は持たず、画像全体に対してフィル ターをかけることなど、写真加工系の機能に寄っている。 対応している画像形式が異常なまでに多いので、だいた いどんな画像形式でも開ける（Susieプラグイン対応！）。 画像加工や保存の際に非常に細かいパラメータまで弄る ことが出来る（たぶんフォトショ以上）。
- 18. Paint.Net 総合的な画像編集ソフト。 ペイントを高機能にしたようなソフトで、比較的癖がな く取っつきやすいと思われる。 レイヤーや透過色、トーンカーブなどの基本的な機能が 備わっている。 短所を挙げるならばベクタ画像を扱えないことだろうか。
- 19. GIMP フリーのもののなかではおそらく最高峰の多数の機能を 備えているつよい画像編集ソフト。 ベクタ画像や文字は特別なレイヤーとして扱える。 「選択範囲」に関する操作ができる。 レイヤーマスクなんかもある。 ただ、重い。また機能が多すぎて、初心者がいきなり使 おうとすると難しい。
- 20. 画像編集ソフト紹介 以上にあげた3つを私は愛用しています。 PictureFan: いつもの画像閲覧、画像の拡大縮小、画像形式の変 換、画像の色味の修正など Paint.Net: 画像のトリミング、レイヤーを使った画像の加工など GIMP: 文字入れをしたいとき、ロゴ画像を作るとき、その他 ある程度高度なことがしたいとき 他にも必要になったときに花子、CLIP Studio Paint、 Inkccapeなどを適宜使っています。
- 22. 画像編集ソフトの役割分担 写真編集 一般画像編集 お絵かき Adobe Photoshop GIMP PictureFan SAI Pxia CLIP Studio Pain Paint.Net
- 23. 画像編集ソフトの選択 以上のように画像編集ソフトはたくさんあるのですが、 今回はGIMPを使うことにしました。 マルチプラットフォームなのが大きい。 複雑とはいっても、ゲームのための画像を作るなら結局GIMP の機能くらいは使う必要がでてくる。 一緒にやるのでまあ難しさはなんとかなるはず。 できればみなさんインストールしてね。
- 25. 知っておきたい機能 レイヤー レイヤーのモード レイヤーの種類 レイヤーマスク＊ 選択範囲 色域選択 選択範囲の拡大・縮小・ぼかし
- 26. 知っておきたい機能 各種フィルタ ガウスぼかし トーンカーブ その他 「スタンプで描画」（コピースタンプツール） キャンパスサイズの変更と画像の拡大・縮小の違い
- 27. レイヤー レイヤーとは「層」という意味の英単語です。 ひとつの画像ファイルは何枚ものレイヤーが重なって出 来ています。 透明なフィルムが重ねてあって、あるレイヤーの透明な 部分は後ろのレイヤーが透けて見える、というイメージ です。
- 29. レイヤーモード レイヤーを重ねるときに特殊な処理を行うことが出来ま す。これをレイヤーモードと言います。 たくさんありますが、最初の内は通常、乗算、オーバー レイあたりをなんとなく知っていれば良いと思います。 詳しくは https://ofo.jp/osakana/cgtips/blendmode.phtml などで。 それぞれのレイヤーには透明度が個別に設定できます。
- 31. 選択範囲 「選択範囲」をうまく扱うことはとても大切です。 選択範囲をコピー、切り取り、塗りつぶし、切り抜き、 などなどが基本操作です。 選択範囲を作るときは、基本は矩形選択を使うのですが、 ほかにもいろいろ便利な機能があります。
- 32. 色域選択 同じ色の範囲を探して自動で選択してくれます！ 凄く便利。 閾値を変更することで、同じ色と見做す範囲が変わりま す。
- 35. ガウスぼかし ぼかします。
- 36. トーンカーブ 色味や明るさを変更できます。 これが使えると写真の修正がだいたいできる。 横軸が入力、縦軸が出力です。 S字カーブでコントラストをあげる……とかいろいろ
- 41. パロディロゴをつくる でも、結構勉強になっている気がします。 絵なら模写、音楽なら耳コピといいますし。 どう再現するか考えることで、どういう技法を使えば良 いのかわかっていきます。解らなければ調べます。 ということで今日は実習として、みなさん一緒にパロ ディロゴを作りましょう。
- 42. お題： チエちゃん最高。
- 44. 次回予告 5月28日（土曜日） 復習回です。 C#の復習をします。
- 45. 終了 お疲れ様でした！