作者別: M.W.

ゲーム制作の振り返り

こんにちは。開発担当のマットです。

以前、ゲームの開発に関する記事 は書いたことがありますが、最近はもっと大きなプロジェクトに挑戦し戦略系のゲーム開発をしました。


この記事では、まあまあ大型なゲームを作るにあたっての感想を書かせていただきたいと思います。

ゲームを作ってみたいな〜と思っている方にとって、この記事が少しでも参考になったらとても嬉しいです。

まずは全体的の感想

とても楽しかったです。ゲーム作りが大好きなので。

3Dゲームを作る時はコードのテキストを見ているだけではなく、モデリングをやったり、アニメーションで人間を動かしたり、照明を調整したりと様々なことをやっていたので毎日が新しいチャレンジでした。

そして、何らかの不具合が起きた時はエラーログを一行一行読むのではなく、実際に不具合を目で見つけて対応することができるのでそれがとても面白かったです。

「全員同じひげ」という微妙な不具合

モデリングとアニメーション

今回のプロジェクトに挑戦する前に、3Dモデリングとアニメーションを作ることができるかとても不安で怖かったです。
「本当に3Dの人形を一から作れるか?」「作るとしても、なめらかにアニメーションの対応はできるか?」と心配事はたくさんありました。

しかし、現在のツールでは思ったよりも簡単に作ることができます。

アーティストではない私でも、Blenderという3Dモデリングソフトウェアを使うと人間モデルや建物、ゲームに出てくるアセットをすぐに作ることができました。

Blenderで3Dモデルを簡単に作れます。

Blenderで作ったモデルをUnity(ゲーム制作アプリケーション)にインポートすると、アニメーションを作成することもできるし、Unityでは複数のアニメーションの混合システムがあるのでなめらかにアニメーションを切り替えることも簡単にできます。

MVCのスクリプト構成

多くのプログラムでMVCのデザインパターンを使います。
MVCはModel,View,Controllerの省略となります。

Model とはデータを保持するスクリプトのことです。
Viewとは、ユーザーに表示されるものを管理するスクリプトです。
Controllerとは、ViewとModelの架け橋となるスクリプトです。

少し複雑なので、ニュースのウェブサイトのトップページを例としましょう。

  1. まず、Controllerがどのページにアクセスしているかを判定する(今はトップページ!)
  2. 次、トップページに最近の5個のトップストーリーを表示させる決まりがあるとすると、最近の5個のトップストーリーのデータをModelのスクリプトから取得する(Modelスクリプトはデーターベースに尋ねたりするでしょう)
  3. その次にControllerはそのデーターをトップページ用のViewクリプトに渡す
  4. 最後にViewスクリプトはそのデーターをウェブページに埋め込んで、訪問者に表示させる

ゲームも同じく、MVCで作る事ができます。

  1. まず、Controllerがどの面をロードすべきかを判定する
  2. 次、その面に出てくるオブジェクトの場所や状態をModelのスクリプトから取得する
  3. その次にControllerはそのデーターをゲームを可視化するViewクリプトに渡す
  4. 最後にViewスクリプトはそのデーターをゲームに埋め込んでプレーヤーに表示させる

結果的に言うとゲーム開発にMVC構成を使ってよかったと思います。
今後のゲーム・プロジェクトにもMVCのデザインパターンを活用しようと考えています。

ただし、ウェブやスマホアプリケーションに比べてゲームのView系のスクリプトはより一層複雑です。3Dモデル、特殊効果、 シェーダー、アニメーション、照明、効果音、音楽など、ゲームで取り扱うView系のスクリプトが多いので、大きなプロジェクトに着手する前にこれらのスクリプトをどう管理するかあらかじめ考える必要があると思います。

同期と非同期の処理

プログラミングで「同期処理」と「非同期処理」があります。

・同期処理とは、順番に実行される処理のことです。
サンドウィッチを作ることは同期処理です。まずはパンを置く。次はバター塗り。次はトマトやハムやレタスなど。そして、最後にはまたパンを。

・非同期処理とは、同時に実行される処理のことです。
スパゲッティを作ることは非同期処理です。まずはソースを炒める。ソースをかき混ぜながらパスタを茹でる。パスタが出来上がったら皿に載せる。最後にソースが出来上がったらソースをかける。

多くのアプリケーションは「同期処理」のみを使います。
つまり手順をひとつひとつ完全に終わってから次の手順に進めます。

ただしゲームでは、「非同期処理」が出てくる場面が多いです。
アニメーションやパスファインディングやAIなど、非同期処理を使わざるを得ない場面が続出します。

非同期処理の例:銃士がターゲットを取得する計算

正直言うと多くの処理が同時に並行に動いてコードが少し複雑になってしまったところがあります。

今後のゲーム・プロジェクトにもこのような事が起きやすいかと思うので、複雑にならないよう非同期処理を管理する方法をあらかじめ考えるか、コールバック(「処理が終わったら教えてね!」的な特別なファンクション)を活用することを考えています。

スコープクリープ

ゲーム開発で1番気をつけるべきところはスコープクリープかと思います。
「スコープクリープ」とは、プロジェクトが進行するにつれてそのプロジェクトの範囲が少しずつ肥大化することです。

ゲームをデザインする時、「これも入れたいなぁ」「こんなこともできたらいいのになぁ」と思うことが多いですが、すべてを対応することはできません。どこからどこまで対応するかをはっきり決めて特別な理由がない限りはそれ以上増やさないことが大事かと思います。

そうしないとキリがないプロジェクトとなってしまいます。
趣味だけであればそれで問題ないですが、完成品を作り上げたい場合は多くの機能を雑に作るよりいくつかの機能をきちんと仕上げることが大切かと思います。

ゲームを公開する場合は、実際のプレーヤーのフィードバックを聞いてどの機能がどれぐらい要望されているかを確認することができ、順番にアップデートを出すこともできます。

まとめ

ゲーム制作のプロジェクトに挑戦してみてとても良かったと思います。

作り上げたゲームのアップデートや新しいゲームプロジェクトに取り掛かることを楽しみにしています。


「人間大砲」ゲームを作ってみました!

こんにちは。開発担当のマットです。

以前の記事でUnityという3Dゲームエンジンを使って、3Dを体験できるゲームを作りましたが、今回は簡単なゲームを作りたくて「人間大砲」というゲームを作りました!
どうやって作ったか説明していきたいと思います。

ゲーム・デザイン

まず、ゲーム・デザインを行い、以下の目標を設定しました。

  1. 誰でも簡単に遊べる
  2. 開発に時間がかからない
  3. ハマってしまい遊び終わった後に『もう一回だけ』という気分になる

「こんなゲームを作れるのかな・・・そのためにはどんなゲームを作ろうかな・・・」と考えていたら、なぜか頭に浮かんだのは息子のスーパー・ボールでした。

単純でおもしろい、スーパー・ボール

スーパー・ボールを壁に向けて投げてキャッチする息子の遊びを何度も見ています。
ボールはもちろん物理の法則を則った動きをしますが、ちょっとした壁の凸凹や投げる力や方向の変動により、跳ね返り方は大きく変わります。

そこで「何かを適当に投げて、跳ね返りを楽しむのは良いかもしれないな」と思いました。

しかし、ボールはつまらないかな・・?
もっと面白い形の何かはないかな・・?
何を飛ばせば、息子に1番ウケるかな・・?
そうだ!人間!

「大砲で人間を打って、どれだけ遠く飛ばせるか」というゲームのアイディアがひらめきました。
下記のとおり目標で決めた条件を満たしていたので、開発に進めることにしました。

  1. 狙って打つだけなので、誰でも簡単に遊べる
  2. 複雑なAIや処理がないので、開発に時間がかからない
  3. 狙って打つ操作は時間がかからないのでハマって、『もう一回だけ』という気分になるはず

「アセット」の準備

Unityゲームは「アセット」と「コンポーネント」の組み合わせでできています。

「アセット」とはゲームの部品。
例えば、サッカー・ゲームの場合、ボール、選手、審判、ゴールポスト、スタジアムなどはそれぞれ「アセット」となります。

それらのアセットに付属させる「振る舞い」は「コンポーネント」と言います。
例えば、「ボール」のアセットに「球体として動く」コンポーネントを付属させることもでき、「スタジアム」のアセットに「歓声を上げる」コンポーネントを付属させることもできます。

Unityには「ラグドール」(Ragdoll = 人形のような動き)なコンポネントをアセットに付属させる機能があるので、それを使いたいなと思いました。
しかし、先に人間やゲームの中の世界となるアセットを準備する必要があります。

Blenderで3Dモデルを作成する

Blenderとは3Dモデリング・アプリケーションです。
簡単なものから、複雑なものまで、Unityゲームで使えるものが欲しければ、Blenderで作ることができます。

今回のゲームでは飛ばされる人間、その人間を飛ばす大砲、そして途中でぶつけてしまう建物や樹木などのモデルが必要だったので、それぞれをBlenderで準備しました。

Blenderでの3Dモデリング

次はこれらのBlenderファイルをUnityにインポートして、ゲーム作りに使います!

Unityでゲームを作る

上記のモデルが全部出来上がったら、次は実際のゲーム作りです。
まずは、アセットを組み合わせて世界を作ります(今回のゲームでは都会の街を使います)。

実は、今回のゲームで1番時間がかかったのはこの街づくりでした。
ユーザーが退屈にならないよう、それぞれのエリアをユニークにしたくて、コピーペーストをできる限り使わないように頑張りました。

なお、街を部分的に区切って、パフォーマンス問題を防ぐために街を部分的にロードする仕組みを取り入れました。

街が出来上がったら、それぞれの建物や木のアセットに「Collider」(衝突反応)のコンポーネントを付属させることで、「RigidBody」(固体物体)のコンポーネントが付いている人間が当たると跳ね返るようにしました。

そして、街の真ん中に大砲のモデルを設置して、ユーザーがボタンを押すと、人間が大砲から飛び出ていくスクリプト(コンポーネント)を書いて付属させます。

最後は人間の服色と髪型をランダム化、複数カメラ、及び音楽と効果音をつけました。


すべてのアセットとコンポーネントが揃ったら、ゲームは完成です。
 
まとめ

良いアイディアさえあれば簡単なゲームを開発することができ、とても楽しいです。


3Dの自動地形生成をやってみました!

こんにちは。開発担当のマットです。

以前の記事で地形生成アルゴリズムを紹介しましたが、3Dの世界が自動的に生成するプログラムを作ってみたいと思いUnityという3Dゲームエンジンで作ってみました!

自動地形生成とは?

自動地形生成(Automatic Terrain Generation)とは、世界を作ってくれるプログラムです。「手続き型の生成」(Procedural Generation)の一種です。
簡単に説明すると、コンピュータの乱数生成の特徴を活用して世界を作り出します。

乱数生成と「シード」

コンピュータというものは、とても予想しやすいものです。決まっているルールに従って、予期不可能なことを一切やりません。コンピュータのファンクション(処理手順)に同じ値を入力すると、毎回出力される結果は必ず同じです。

しかし、時々、コンピューターに乱数を決めてもらいたい場合があります。
例えば、サイコロのプログラムを作ろうと思えば、毎回同じ結果だと困りますよね。

そのため、乱数を生成するファンクションを呼び出す度に、入力値を変更しなければなりません。
多くの乱数ファンクションはコンピューターの機内時計を入力値として使います。時計を使うと、ファンクションの呼び出し時間によって、返ってくる結果が異なりますので、サイコロのプログラム等に乱数を生成することができます。

この乱数ファンクションの「入力値」を「シード」(Seed[種])といいます。

パーリン・ノイズ

パーリン・ノイズとはゲーム業界でよく活用されている「ノイズ生成アルゴリズム」です。「ノイズ」とは「雑音」ですが、パーリン・ノイズは「波」のような2D雑音マップを生成してくれます。

パーリン・ノイズ・マップ

Ken Perlin氏というコンピュータ科学教授が1983年に開発し、それから、多くのプログラムに使われているノイズ生成機能です。

いくつかの引数(ファンクションの設定値)を設定することができ、変更することによって、波の形が変わります。
例えば、ものすごい雑なノイズを作ることもできますし、なめらかな波のようなノイズも作ることができます。

引数を変更すると、波の特徴が変わります。

なお、パーリン・ノイズのファンクションに与えるシードを変更することによって、「同様ながら違う」結果が返って来ます。

シードを変更すると、波の位置が変わります。

パーリン・ノイズを活用して、白いエリアを「高い高度」と解釈し、黒いエリアを「低い高度」と解釈すると、3Dマップを作ることができます。

なお、複数のノイズを重ねる事によって、より面白いものを作る事ができます。

世界づくり(デザイン)

まずは、どのような世界をつくりたいかを決める必要があります。
個人的な好みで中心が山となっている島を作ろうと思いましたが、それをどうやって作るかを決めなければなりませんでした。

要素

まずは、全体的にちょっとなめらかな地形がほしかったので、「Base」という優しいノイズを入れました。
次に中心となる山の形となる「Mountain」のノイズも必要だったので、それもデザインに入れて、最後に海岸の形を決める「Edge」も入れることにしました。

島づくりに使う3つのノイズマップ

しかし、この3つのノイズ要素を単純に足すだけだと島にはなりませんので、最終的の地形計算を行うとき、ちょっと特別な処理を行わなければなりません。

Baseノイズをマップ全体に適応して、地形をなめらかな形にしてくれます。

Mountainに関しては、以下のルールを加えました。
「マップの中心に近いほど、マップに影響を及ぼす。」
つまり、マップの中心にMountainノイズが地形の高度に影響を及ぼしますので、島の真ん中に山が生成されますが、中心から離れているところでは高い山が生成されません。

Edgeに関しては、以下のルールを加えました。
「マップの限界に近い程、逆影響を及ぼす。限界に近くない場合、影響を及ぼさない。」
「逆効果」とは「高度を下げる」とのことなので、マップの限界近くのエリアの高度が低くなります。

海を適切な高度に設置すると、島の形になります!

世界づくり(実装)

最近個人的にUnityでプログラミングをやっていますが、Unityは3Dゲームエンジンでとても使いやすいと思います。

今回は地形を作りたいので、Unityでゲームシーンを作って、Terrain(地形)とWater(水)オブジェクトを入れて、Waterの高度を10メートルに設定しました。そうすると、Terrainの高度が10mを超えていない箇所が海に浸かります。

上記で考えた3つのパーリン・ノイズを実装して、地形の高度に設定すると島が出来上がりました!

「12345」のシードで作り上げた島

上記の画像を見るとわかるかと思いますが、右側の設定画面でSeed(シード)を「12345」と設定しています。
そのシードでマップを生成すると、パーリン・ノイズの乱数生成に使われますので、毎回必ず同じ形の島が生成されます。

しかしシードを少しでも変更すると、全く違う島が出来上がります。

シードを少しでも変更すると、全く違う島が生成されます。

世界づくり(森も入れましょう!)

島づくりはなんとなくできましたが、ちょっと寂しいので森も生成しようと思いました。

地形と同じ原理で、パーリン・ノイズで木が生える場所を決めるのがいいです。
パーリン・ノイズ・マップを使って、ある閾値より白いところに木を生やす、という仕様を決めました。
単独に立つといい樹種は、ザラザラな雑音系のノイズ・マップを生成し、森のように、「群れる」木がいい場合は、なめらかな波を作るようノイズの引数を設定します。

Unityはデフォルトで、3種類の木を用意してくれるので、それぞれの樹種にノイズ・マップを用意する必要があります。

なお、それぞれの樹種に生える箇所の条件も加えてみました。

ヤシの木:高度が低い(海に近い)ところのみ。
松の木:高度が高くて、傾斜がきついところのみ。
楠の木:中間の高度なところのみ。

これらのルールで島を生成すると、より良い島が出来上がりました。

森も生成した「12346」の島。

折角ので、探検しましょう〜

Unityで簡単にファースト・パーソン・キャラクターを導入できますので、作り上げた島にキャラクターを入れて、島を走り回って楽しむことができました!

寂しくなくなった世界

まとめ

「手続き型の生成」はとても有力なツールだと思います。
ゲームやシミュレーションに使うことができ、無限コンテンツを生成することができるので、オープン・ワールド系のプログラムに向いていると思います。

今回は地形の高度と樹木の配置に使いましたが、それ以外の使い道もたくさんありますので、今後色んなことに使ってみたいと思います。


抽選プログラムを開発しました

こんにちは。開発担当のマットです。
 
Sploutでは、ライトニングトーク大会を定期的にやっております。
メンバー全員が順番に5分間のトークをして、とても楽しい時間です。
 
ライトニングトーク大会をするには、発表順を決める必要があります。
今までは順番を決めるのにあみだくじを使ったりしていましたが、折角システム開発会社なので、順番を決めてくれる抽選プログラムを作ってみようと思いました。
 
一番簡単な方法はブラウザでJavaScriptを実行させるだけです。
Google Chromeを開き、右クリックして、「検証」>「コンソール」を押して、以下のスクリプトを貼り付けてEnterキーを押すと一瞬で順番を決めることができます。

超簡単ですが、面白くはないです。

Unityで面白いものを作ろう!

最近、Unityを学習しています。Unityは3Dゲームエンジンです(wikipedia) 。
これを使えば、何か面白い抽選プログラムを作れるではないかと!
 
考えついたのは「競馬」。

まずはプロジェクト開始。

とりあえず「Kuji」と名付けました。

プロジェクトに地面(Terrain)を入れる。

新規なUnityプロジェクトだと、カメラと照明しかないので、馬が走る地面をシーンの中に挿入する必要があります。
挿入して草のテキスチャーで塗りました。

次は馬の作成。

形を作る前に馬を象徴するゲームオブジェクトを作成します。

次はそのゲームオブジェクトの中に、複数のキューブで馬の形をなんとなく作り上げます。

色付けしましょう!

Unityでオブジェクトを色塗るには、Materialを作成すべきです。
Materialは「素材」という意味で、「色」だけではなく、「光沢」に関する色々な設定ができます。
とりあえず、2つのMaterialを作成し、馬の該当箇所に設定をしました。
片方はツヤ無しの馬毛。
他方はちょっとツヤ有りの鞍。

馬を走らせましょう!

Unityのアニメーション・システムで馬を走らせる動きを作るのは簡単です。

競馬場がないと・・・

簡単に壁と決勝線を地面の上に作りました。
馬もコピペして、サイズを調整。

馬にラベルを付ける。

誰がどの馬かわかりませんので、馬の上に名前ラベルを追加しました。

馬に個性を付ける。

次はスクリプトを作成して、馬のゲームオブジェクトに付属させました。
このスクリプトで、馬に付属しているMaterialの色やラベルの表記を設定できます。
これによって、馬をカスタマイズできるようになりました。

馬を並べましょう!

上記と同様に、馬のコピペだけでできました。
それぞれの馬の名前と色を設定します。
*この画像は数字を使っていますが、実際の抽選の時は参加するメンバーの名前を入れました。

最後の最後に「レース」のスクリプトを作成!

最後にとても簡単なレースのスクリプトを作成しました。
「Spaceキー」を押すと馬達が走り出します。
UnityのUpdateファンクションで、毎フレーム、それぞれの馬をちょっとずつ前に進める。しかし、毎フレーム進める距離はある範囲以内のランダム値です。それで、それぞれの馬の進み具合に差が発生します。

なお、決勝線にたどり着くと、走り止んで、その馬のラベルに書いてある名前が一覧に表示される。これで発表順を決めることができます!

まとめ

まだ学習中ですが、Unityで簡単にできることに驚きました。
上記の抽選プログラムの総合開発時間は2時間だけでしたのに、アニメーションを対応した3Dプログラムを一から作ることができました。
とても、有力なツールです!

これからも、色々面白いプログラムを開発してみたいと思います!


Cordovaを使ってみました!

こんにちは。開発担当のマットです。

最近、AndroidとiOSのアプリ開発をしています。
作っているアプリがiOS端末(iPhoneやiPad)とAndroidのネイティブ機能を使うので、iOS版とAndroid版を別々に作成しました。

もちろん、アプリを2つのプラットフォームで作ることは手間が掛かりますが、iOSとAndroidの力を完全に引き出すには必要です。

しかし、単純でウェブサイトのようなアプリケーションを作ろうと思ったら、二つのネイティブなアプリを作るより、簡単な方法が沢山あります。私はその簡単な方法を一つ試してみましたので、ご紹介したいと思います。

開発環境

この記事にて、iOSとAndroidのアプリをビルドします。

・iOSのアプリをビルドするには、XcodeがインストールされているMacが必要です。
・Androidのアプリをビルドするには、Android Studioをインストールする必要があります。Android StudioはWindows、Mac、Linux、全てにインストールすることができます。

Cordova

Wikipediaによりますと、Cordovaは「オープンソース(Apache 2.0 License)のモバイルアプリケーション開発フレームワーク。」

Cordovaの特徴ですが、

モバイルデバイスのカメラ、GPS、加速度センサーなどにアクセスするためのAPIを追加することにより、JavaScript、HTML、CSSといったウェブアプリケーション開発の技術でモバイルアプリケーションを開発することができるのが特徴である。

簡単に言いますと、ウェブサイトのようなものをHTML、Javascript、CSSで作れば、Cordovaはそのウェブサイトをモバイルアプリケーションに変換してくれる。
なお、Javascriptで特別のファンクションを呼び出すと、ネイティブアプリケーションのネイティブ機能(カメラ、GPS、加速度センサー、など)を利用することができます。

 

使ってみよう

まずは、Cordovaをダウンロードしました。
詳細は https://cordova.apache.org/ でも書いてありますが、コマンド実行でインストールします。

なお、Cordova自体をインストールする前に、node.jsをインストールする必要があります。まだインストールされていない場合、https://nodejs.org/ja/からダウンロードして、インストールしてください。


では、コマンドプロンプトから以下のコマンドを実行してください。
npm install -g cordova

インストールが完了されたら、Cordovaのアプリケーションを作成するコマンドを実行しましょう。例として「MyCordovaApp」というアプリケーションを作成する。
なお、アプリケーションの bundle ID (アプリを特定するID)もこの時点で設定しましょう〜。
cordova create MyCordovaApp com.example.myCordovaApp MyCordovaApp
                                  (ディレクトリー名 Bundle ID アプリ名

次は、作ったディレクトリーに移動する(MyCordovaApp)。
今回、iOS版、Android版、ブラウザー版を作ってみます。
cordova platform add browser
cordova platform add ios
cordova platform add android

なお、以下のコマンドを実行すると、対応されているプラットフォームの一覧が表示されます。今回の記事の範囲外となりますが、BlackberryやOSXやWindowsのアプリも作れるようです。
cordova platform

ところで、Cordovaの準備ができました。
さて、簡単に何かを作ってしまおう。

初めてのCordova

アプリケーションディレクトリーの中にwww/index.htmlというファイルがあります。
これがアプリケーションの最初に表示されるページとなります。
空白のページではなく、既に内容が入っています。ちょっと変更してみましょう!

bodyの部分に以下のHTMLが入っている。

以下に変更してみました。

なお、非ASCII文字も入れちゃっているので、headに以下のmetaタグも追加しました。

<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />

そして、ファイルを保存!

各プラットフォームにビルド!

コマンドプロンプトに戻って、以下のコマンドを実行すると、追加されているプラットフォームのファイルが更新されます。
cordova build

XCodeでMyCordovaApp/platforms/ios/を開くとiOSアプリケーションをビルドできます。
Android Studios で MyCordovaApp/platforms/android/を開くとAndroidのアプリケーションをビルドすることができます。
なお、cordova run browser だけでウェブページを確認することができます。

今回、作ってみたものをスクリーンショットで撮ってみました。

まとめ

Cordovaで簡単に多くのプラットフォームに対応できることはとても便利だと思います。
特に、HTML,CSS,Javascriptに経験が深いウェブ系の開発者の場合、Cordovaの利用により、複数のプラットフォームに対応しているアプリを迅速に開発できると思います。

しかし・・・
個人的意見にすぎませんが、Cordovaやこのようなマルチプラットフォームサービスは、開発オプションの中間に位置していると思います。

完全にウェブサイトのようなモバイルアプリを作成したい場合、iOSやAndroidが提供するWebViewを利用する方がいいかもしれません。
その反面、多くのネイティブ機能を使いたい場合、手間は掛かりますが、ネイティブのアプリケーションを作ると、そのプラットフォームにより適している製品を作れると思います。

でも、「あまり手間を掛けずに、ウェブサイトに近くて、カメラやGPSのようなネイティブ機能を利用するが、依存しない複数のプラットフォームに対応したアプリケーション」を作りたいと思う場合は、ぜひ使ってみてください。