Unityでゲームづくりにチャレンジ！
2017-10-20 勉強会
みなさんこんにちわ。
インターパーク ソリューション営業部の大瀬です。
外は寒くなり、季節はすっかり秋！
寒い日は、家でゴロゴロしながらゲームでもしてたいですね。
今回は2人チームでのモノづくりということでして、
僕は、システム部の木村くんとタッグを組むことになりました。
1人よりもアイデアの幅が広がりますね！
今回は、何か楽しみながら作れるものはないか。。。と考え、
木村くんは三度の飯よりゲーム好き。僕もゲームはやっていた方で割りと好きということもあり、
PCゲームを作ってみよう！となりました。（できるのか!?）
インターパーク ソリューション営業部の大瀬です。
外は寒くなり、季節はすっかり秋！
寒い日は、家でゴロゴロしながらゲームでもしてたいですね。
今回は2人チームでのモノづくりということでして、
僕は、システム部の木村くんとタッグを組むことになりました。
1人よりもアイデアの幅が広がりますね！
今回は、何か楽しみながら作れるものはないか。。。と考え、
木村くんは三度の飯よりゲーム好き。僕もゲームはやっていた方で割りと好きということもあり、
PCゲームを作ってみよう！となりました。（できるのか!?）
はじめに
簡単なドラクエ風なゲームを作れないかと考えましたが・・・
キャラクターを動かすのもわからない現状では、とても短時間での製作は無理だと思い、
以下の4つの目標を決めました。
1.視点はRPGでよくある上からの視点で
2.キャラクター（主人公）を動かし、その際、上下左右の向きも表現可能にする
3.他のキャラクターと会話できるようにする
4.音、音楽をつける
編成は以下の通り。
■プログラム担当：木村くん（プログラミングは専門分野です！）
■イラスト画担当：大瀬（Photoshop、Illustratorは使えます！）
ゲームのプログラミングには、いろんな言語があるようですが、今回は、
木村くんが選んだ「Unity（ユニティ）」での制作にチャレンジしてみたいと思います。
▶Unity（ユニティ）
最近人気が高まっているらしい言語「C#（シーシャープ）」に対応しているゲームエンジン。
詳しくはウィキペディアなどで。。
キャラクターを動かすのもわからない現状では、とても短時間での製作は無理だと思い、
以下の4つの目標を決めました。
1.視点はRPGでよくある上からの視点で
2.キャラクター（主人公）を動かし、その際、上下左右の向きも表現可能にする
3.他のキャラクターと会話できるようにする
4.音、音楽をつける
編成は以下の通り。
■プログラム担当：木村くん（プログラミングは専門分野です！）
■イラスト画担当：大瀬（Photoshop、Illustratorは使えます！）
ゲームのプログラミングには、いろんな言語があるようですが、今回は、
木村くんが選んだ「Unity（ユニティ）」での制作にチャレンジしてみたいと思います。
▶Unity（ユニティ）
最近人気が高まっているらしい言語「C#（シーシャープ）」に対応しているゲームエンジン。
詳しくはウィキペディアなどで。。
Unity (ゲームエンジン) - Wikipedia
https://ja.wikipedia.org/wiki/Unity_(%E3%82%B2%E3%83%BC%E3%83%A0%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%B3)イラスト・素材づくり
キャラクターや背景など、画像素材作りについて
ステージをつくる
新しくなったインターパークのオフィスをステージにすることにし、
Illustratorで画を作成しました。 ※部屋サイズなどは大体です。
一応できたのですが、Illustratorだと画が滑らかなので、ゲームっぽさが何か足りません…。
Illustratorで画を作成しました。 ※部屋サイズなどは大体です。
一応できたのですが、Illustratorだと画が滑らかなので、ゲームっぽさが何か足りません…。
ドット絵でつくる
僕はファミコン世代なので、少々古っぽいゲームらしさが欲しい。やっぱりドット絵だ！と言うことで、Photoshopでの制作に切り替え、今回使用する画はすべてドット絵で作成することにしました。
▼ドット絵が描きやすいよう、Photoshopの設定を以下のように調整しました。
●新規書類で、カラー：RGB/単位：ピクセル/サイズは適当
●環境設定（環境設定＞ガイド・グリッド・スライス）では、
グリッドの設定を調整→グリッド線2pixel・分割数2に
●ブラシは鉛筆ツールで、四角形のブラシ（直径1px）を選択します
▼ドット絵が描きやすいよう、Photoshopの設定を以下のように調整しました。
●新規書類で、カラー：RGB/単位：ピクセル/サイズは適当
●環境設定（環境設定＞ガイド・グリッド・スライス）では、
グリッドの設定を調整→グリッド線2pixel・分割数2に
●ブラシは鉛筆ツールで、四角形のブラシ（直径1px）を選択します
簡単ですが、以上で準備は完了です！
ドット絵のコツ
ドット絵はなかなか難しく、感覚を掴むまで少し時間がかかりました。
消して描いてを繰り返し、ひたすらコツコツ作成していきました。
オフィスを後回しにして、先に操作するキャラクター（主人公）を作成することにしました。
コツはまず、キャラクターや図形の縁取りをします。
その後に内側に陰影など色を入れていくと、上手く仕上がります。
消して描いてを繰り返し、ひたすらコツコツ作成していきました。
オフィスを後回しにして、先に操作するキャラクター（主人公）を作成することにしました。
コツはまず、キャラクターや図形の縁取りをします。
その後に内側に陰影など色を入れていくと、上手く仕上がります。
そんな感じで、キャラクター（主人公）が完成しました。
また、キャラクター（主人公）は、前後左右の向きに対応させるため、以下のように画を作成しました。
このように、向きのパターンをまとめた一枚の絵を、プログラム側で位置を切替え、アニメーションさせます。ゲームに昔から使われている「スプライト」という手法です。
画像の修正などがあった場合は面倒ですが、複数の画像を読み込む処理に比べ、一枚の画像を読み込んで位置調整して動かすほうが処理が軽いというメリットがあります。
Webサイトデザインでも、CSSで一枚の絵を切替えて動きを表現する、CSSスプライトという手法があります。
また、キャラクター（主人公）は、前後左右の向きに対応させるため、以下のように画を作成しました。
このように、向きのパターンをまとめた一枚の絵を、プログラム側で位置を切替え、アニメーションさせます。ゲームに昔から使われている「スプライト」という手法です。
画像の修正などがあった場合は面倒ですが、複数の画像を読み込む処理に比べ、一枚の画像を読み込んで位置調整して動かすほうが処理が軽いというメリットがあります。
Webサイトデザインでも、CSSで一枚の絵を切替えて動きを表現する、CSSスプライトという手法があります。
オフィスもドット化
PCモニターや電話などの細かいアイテムも描いていきます。
時間の都合上、キャラクターは男・女の2パターンのみとなってしまいました・・・（汗）
作成したアイテムを散りばめ、オフィスが完成。
時間の都合上、キャラクターは男・女の2パターンのみとなってしまいました・・・（汗）
作成したアイテムを散りばめ、オフィスが完成。
そして、オフィスが完成しました！
ちゃんと全てドットで描かれています。
ちゃんと全てドットで描かれています。
オープニング
ここまで来ましたが、ふとゲームといえばオープニング画面がいるなぁと、思いまして。。
急遽作成することにしました（もちろんドットで）！
さらに、GIFアニメーションを使用し、ゲームっぽく仕上げることにしました。
取り敢えず、大体使用する画の方は完成しました。
あとはこれを木村くんにプログラムに組み込んでもらいます！
急遽作成することにしました（もちろんドットで）！
さらに、GIFアニメーションを使用し、ゲームっぽく仕上げることにしました。
取り敢えず、大体使用する画の方は完成しました。
あとはこれを木村くんにプログラムに組み込んでもらいます！
オープニング画面はファミコンと同じで、
横256×縦240ドットで作成しました。
実寸は小さいですが、ファミコンでは実はこれがテレビ画面に拡大表示されていたわけですね。。
横256×縦240ドットで作成しました。
実寸は小さいですが、ファミコンでは実はこれがテレビ画面に拡大表示されていたわけですね。。
Unityでの作業
プログラム側の話に移ります。
Unityで作成していきます。
まず、Unityは上でも述べているとおり、C#で動作するプログラムです。
実は初めて触るプログラム言語だったため、四苦八苦しながら作成しました。
まずは、背景の取り込みと背景の当たり判定を設定しました。
当たり判定には空のオブジェクトに物理判定を追加することで、背景画像に壁を作りました。
次に、キャラクターとオープニングのアニメーション作成です。
大瀬さんに作成していただいたキャラクターの画像を以下のように切り取り、12個のスプライトにしました。
Unityで作成していきます。
まず、Unityは上でも述べているとおり、C#で動作するプログラムです。
実は初めて触るプログラム言語だったため、四苦八苦しながら作成しました。
まずは、背景の取り込みと背景の当たり判定を設定しました。
当たり判定には空のオブジェクトに物理判定を追加することで、背景画像に壁を作りました。
次に、キャラクターとオープニングのアニメーション作成です。
大瀬さんに作成していただいたキャラクターの画像を以下のように切り取り、12個のスプライトにしました。
オープニングはGIFアニメーションのままでは使えないため、一枚一枚分割し、コマ送りにすることでUnityのアニメーションにしました。
次にプログラムの作成です。
次にプログラムの作成です。
ザックリと内容を説明しますと、トリガーとなる当たり判定とプレイヤーが接触している状態でキーボードの「a」が押されるとメッセージウィンドウが開き、ボタン音もなるようにしています。
また、当たり判定からキャラクターが離れるとウインドウが消されます。
このような形でプログラムを作成していき、キャラクターやカメラ、人物に設定していきました。
設定し終わった画面がこちらになります。
また、当たり判定からキャラクターが離れるとウインドウが消されます。
このような形でプログラムを作成していき、キャラクターやカメラ、人物に設定していきました。
設定し終わった画面がこちらになります。
Unityは、プログラムを書く作業よりも、オブジェクトに設定を追加し、ゲームにしていく作業が多く、プログラマーじゃなくとも多少知識がある方であれば、使い方を覚えるのはそれほど難しくないと感じました。
まとめ
もっといろいろなことをしたかったのですが、
ゲームづくりは意外と大変な作業で、理想通りの仕上がりにはなりませんでした。
しかし、unityという新しいものにチャレンジした木村くん。
ドット絵に挑戦し、描く楽しさがわかり、今後の趣味となりそうな予感がする自分。
新たな技術に出会い、それを身につける事ができた（少しですが）良い機会となりました。
一応、目標とした4項目は全てクリアしたと思います。（クオリティはさておき・・・）
今回、2人チームでの制作でしたので、互いに相談してアイデアを出しながら組み立てることができ、1人では難しいモノづくりも、2人でなら作ることが出来るという可能性の広がりを改めて実感することができました。
ゲームづくりは意外と大変な作業で、理想通りの仕上がりにはなりませんでした。
しかし、unityという新しいものにチャレンジした木村くん。
ドット絵に挑戦し、描く楽しさがわかり、今後の趣味となりそうな予感がする自分。
新たな技術に出会い、それを身につける事ができた（少しですが）良い機会となりました。
一応、目標とした4項目は全てクリアしたと思います。（クオリティはさておき・・・）
今回、2人チームでの制作でしたので、互いに相談してアイデアを出しながら組み立てることができ、1人では難しいモノづくりも、2人でなら作ることが出来るという可能性の広がりを改めて実感することができました。