ゲーム制作の振り返り

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

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


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

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

まずは全体的の感想

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

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番気をつけるべきところはスコープクリープかと思います。
「スコープクリープ」とは、プロジェクトが進行するにつれてそのプロジェクトの範囲が少しずつ肥大化することです。

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

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

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

まとめ

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

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

スマートホーム化してやったぜ

こんにちわ。
リエです。

以前別のメンバーがGoogleHomeでスマートホーム化したという記事を書いていましたが、実はわたしもおうちにGoogleHomeを導入し、昨年からスマートホーム化しておりました。

さて、リエ宅はGoogleHomeで何ができるようになったかというと、以下のことができるようになりました。
※GoogleHomeと併せてNatureRemoを使用しています。
・エアコンのonとoffと温度変更
・テレビのonとoffとチャンネル変更
・電気のonとoffと明るさ調整

赤外線リモコンがついている電化製品を一通りという感じですね。
音声で色々できるのが楽しくて他に赤外線リモコンがある電化製品がないか探してしまったよ/(^O^)\

さて、スマートホーム化をした感想は「便利」
この一言につきるかなという感じです。

まぁ、電気のリモコンはベッドのすぐ横に置いているので手を伸ばせばすぐに操作はできますが(これを言っちゃ元も子もない)、寝転びながらGoogleHomeに話しかけるだけで操作できるのは謎の快感があります。

ただわたしは鼻炎持ちで寝る前と寝起きの声が枯れているせいか、たまにGoogleHomeさんから「ごめんなさい、聞き取れませんでした」と言われてしまいます。
そんなときはリモコンで操作すればいいだけなんです(これを言っちゃ元も子もない2)

設定も割と簡単にできるので、迷っている方は導入してみてはいかがでしょうか。

余談ですが、前に弊社の公式TwitterでGoogleHomeがたまに声の認識をしてくれないとツイートしたら解決策をGoogleさんからコメントいただきました。なんて親切!
Googleさん、その節はありがとうございました。

Apache Solr を Eclipse でリモートでデバッグ

はじめに

先日、久しぶりに全文検索エンジン Apache Solr に触れる機会がありました。
現時点の最新版は 7.5 です(この記事を書いている間に 7.6 がリリースされました)。以前に扱ったことのある 5.5 からはかなり色々なところが変わっているようです。

Solr は OSS なので変更点の詳細を追いかけたければソースを読めばいいのですが、Solr くらいの規模のソフトウェアとなるとソースを読むだけでは取っ掛かりが掴みにくいことも有ります。たとえば、この factory オブジェクトが生成したのはどの具象クラスなんだ、とか、この if 文の分岐はどっちが使われるんだ、とか。そういう場合にはデバッガが役に立ちます。
今回は以下のような構成でデバッガを動かすための手順をまとめました。

  • Solr 7.5 バイナリパッケージ(稼働用)
  • Solr 7.5 ソースパッケージ(デバッガ参照用)
  • Eclipse IDE for Java Developers Version 2018-09

Solr のインストール

    1. 公式サイトからsolr-7.5.0.tgzをダウンロード。
    2. 展開
$ tar zxf solr-7.5.0.tgz
$ cd solr-7.5.0
  1. サンプル設定で起動
    $ bin/solr -e cloud
    (略)
    To begin, how many Solr nodes would you like to run in your local cluster? (specify 1-4 nodes) [2]: 1
    (略)
    Please enter the port for node1 [8983]:
    (略)
    Please provide a name for your new collection: [gettingstarted] 
    test
    (略)
    How many shards would you like to split test into? [2]
    1
    (略)
    How many replicas per shard would you like to create? [2] 
    1
    (略)
    Please choose a configuration for the test collection, available options are:
    _default or sample_techproducts_configs [_default] 
    (略)
    
  2. Solr を一旦停止しておく
    $ bin/solr stop -all
    

Solr のソースを Eclipse にインポート

  1. 公式サイトからsolr-7.5.0-src.tgzをダウンロード。
  2. 展開
    $ mkdir solr-src
    $ cd solr-src
    $ tar zxf solr-7.5.0-src.tgz
    $ mv solr-7.5.0 solr-7.5.0-src
    $ cd solr-7.5.0-src
    
  3. Eclipse のプロジェクトとして読み込めるようにビルド
    $ ant eclipse
    
  4. インポート
    1. 「ファイル」→「インポート」→「既存プロジェクトをワークスペースへ」→「次へ」
    2. 「ルート・ディレクトリの選択」で solr-src/solr-7.5.0-src を指定→「完了」

デバッグ開始

    1. Solr スタート

リモートプロセスのデバッグなので java コマンドのオプションを指定して JDWP を利用します。

$ bin/solr start -c -p 8983 -s example/cloud/node1/solr -a "-agentlib:jdwp=transport=dt_socket,server=y,suspend=y,address=6900"

suspend=y を指定するとデバッガが接続するまで実行を中断してくれます。ただし180以内に起動が完了しないと Solr が起動失敗と判断して自らプロセス終了してしまうので、それまでに以下の手順でデバッガを接続しなければなりません。

  1. デバッガ起動
    1. 「実行」→「デバッグの構成」
    2. プロジェクト solr-7.5.0 指定→ポート 6900 指定→「デバッグ」

動作確認

今回は Solr 6 で追加された ExtractingRequestHandler を試してみます。
このハンドラは PDF などのバイナリファイルからテキストを抽出してインデックスを作成するためのものです。solrconfig.xml では以下のように定義されています。


  <requestHandler name="/update/extract"
                  startup="lazy"
                  class="solr.extraction.ExtractingRequestHandler" >
    <lst name="defaults">
      <str name="lowernames">true</str>
      <str name="fmap.meta">ignored_</str>
      <str name="fmap.content">_text_</str>
    </lst>
  </requestHandler>

RequestHandler のメインの処理は handleRequestBody ですが、これは ExtractingRequestHandler の親クラスである ContentStreamHandlerBase クラスで定義されているので、そちらにブレイクポイントを設定しておきます。

そして PDF ファイルを post コマンドで送信します。

$ bin/post -c test -params "extractOnly=false&wt=json&indent=true" -out yes example/exampledocs/solr-word.pdf

指定しておいた場所でブレイクされます。

あとは普通にデバッガを使っていくだけです。

たとえば ExtractingDocumentLoader のこの行で変数の内容を確認すると、
実行時パラメータとして extractOnly=false だけを指定した状態では parser として AutoDetectParser、parsingHandler として SolrContentHandler が使われることが分かりました。
metadata としてどんな情報が抽出されるのかも良く分かります。

最後に

Solrのリモートデバッグは簡単です。Solr 内部の理解を深めるのに役立てたいと思います。

みんなありがとう

あけおめことよろ。
年末ジャンボ宝くじを”あえて”当選しませんでしたマエダです。

今年も弊社ではえべっさんに商売繁盛を祈願しました。
そして毎年恒例となっている書き初めをしました。

昨年の書き初めの様子。

https://blog.splout.co.jp/4478/

今年の僕の書き初めはシンプルにこれです。

ほんとにいつも思うことですが毎朝起きてコーヒー淹れて飲めること、おいしくごはんがいただけること、仕事としてプログラミングさせてもらえていること、まわりにいる人たちが楽しそうに話しているとこを見かけること、幸せを感じる身の回りの様々なことがありがたいです。

お仕事をいただけるクライアントの皆様、弊社の関わったプロダクトを見ていただけたりご利用いただいているユーザーの方々、毎日出社してくれるスタッフのみんな、本当にありがとうございます。

新しい年、また気を引き締めて、感謝の気持ちを持って精一杯がんばります!





最後にひすいこたろうさんの言葉をご紹介です。

あなたがくだらないと
思っている今日は
昨日亡くなった人が
なんとかして生きたかった
なんとしてでも生きたかった。
今日なんです。



( ;∀;) イイコトバダナー

CSSで字詰めの調整をしよう!

デザインをする上で字詰めって大事ですよね。
でもWebページのテキストは、ブラウザの仕様で調整出来ないから諦めていたり…。
そんなことはないでしょうか?

字詰め

実は、CSSに字詰めのプロパティ「font-feature-settings」があります。
使い方は簡単で、「font-feature-settings : “palt”;」を指定するだけです。

    .kerning_sample{
        font-feature-settings : "palt";
    }

注)メイリオは、プロポーショナルメトリクスを含まないため変わりません。

 
例えばデフォルトだとこのような表示だったのが

デフォルト
カーニングとは、文字同士の間隔(アキ)を調整する技法のこと

 
font-feature-settings:”palt”;の指定をすると全体が引き締まった感じになります。

font-feature-settings:”palt”;の指定
カーニングとは、文字同士の間隔(アキ)を調整する技法のこと

 
場合によっては窮屈な感じがするので、「letter-spacing」を使って調整しましょう。

    .kerning_sample.spacing_sample{
        font-feature-settings : "palt";
        letter-spacing:2px
    }
font-feature-settings:”palt”;とletter-spacingの指定
カーニングとは、文字同士の間隔(アキ)を調整する技法のこと

デフォルトと比べて、カッコや句読点の間などが整ってると思います。
各ブラウザの対応もいつの間にか整っていました。
各ブラウザの対応状況

両端揃え

字詰めのプロパティ「font-feature-settings」を使ってブログの本文や説明文などの右端がガタついて気になった場合は、「text-align:justify;」を使ってみるのもいいかもしれません。
デフォルトだと右端がガタついていますが。

デフォルト
カーニング(英語: kerning)とは、主に欧文の組版において、プロポーショナルフォントの文字同士の間隔(アキ)を調整する技法のこと。カーニングを行わない場合は文字の間に不自然な空白を招いてしまう一方、適切にカーニングが施されたフォントでは字面間の空白の面積はほぼ均等になる。
DTPが普及した現在は組版ソフト上で行われることが多いが、以前は活字に特殊な処理を行うか、切り貼りによる文字詰め(もじつめ)と読ばれる作業が必要であった[1]。現在ではこの語や詰め文字(つめもじ)という語をカーニングの訳語として用いることもあるが[2]、カーニングと文字詰めを厳密に区別することもある[注 1]。英語では、活字を加工する工程の呼び名から派生して mortising と呼ばれることもある(原義:くり抜くこと、ほぞ穴を開けること)[4]。
引用 – Wikipedia

 
「text-align:justify;」を使うと右端がそろうと思います。

text-align:justify;とfont-feature-settings:”palt”;の指定
カーニング(英語: kerning)とは、主に欧文の組版において、プロポーショナルフォントの文字同士の間隔(アキ)を調整する技法のこと。カーニングを行わない場合は文字の間に不自然な空白を招いてしまう一方、適切にカーニングが施されたフォントでは字面間の空白の面積はほぼ均等になる。
DTPが普及した現在は組版ソフト上で行われることが多いが、以前は活字に特殊な処理を行うか、切り貼りによる文字詰め(もじつめ)と読ばれる作業が必要であった[1]。現在ではこの語や詰め文字(つめもじ)という語をカーニングの訳語として用いることもあるが[2]、カーニングと文字詰めを厳密に区別することもある[注 1]。英語では、活字を加工する工程の呼び名から派生して mortising と呼ばれることもある(原義:くり抜くこと、ほぞ穴を開けること)[4]。
引用 – Wikipedia

 
毎回、字詰めの調整や確認は大変ですが、この方法だと以外に簡単にできるかもしれません。
Webコンテンツを作る際に役立てていただければ幸いです。