エンジニアが書いてるようなブログ

ゲームプログラマをやっています。仕事やゲームや趣味に関してつらつら

Model View Presenter をゲームで使う3つの方針

おひさしぶりです。最近ゲームづくりを再開いたしました。

> 自由と言われても、何もやる気が起きない。制限された自由の中にほんとうの自由はある

ということで、いきなりゲームを作っても何も方針がなければ挫折することは目に見えています。

そこで、今回はWEBアプリ作成時によく用いられるMVP(Model View Presenter )のパターンをゲームに適応したいと思います。

MVP とは?

MVPとはSIerやWEBアプリ界隈でもちいられていたオブジェクト指向プログラムの設計手法です。それぞれ以下のような意味合いを持っています。

Model

ユーザーや商品などの振る舞いや定義などを持っているものです。これだけでは振る舞いを定義しているだけなので使用することができません

View

ボタンの大きさやテキストの内容などの見栄えに関わる部分を担当する

Presenter

入力に対してなにか動作を行うもの、基本的には入力があった際にModelにアクセスして所定の処理を行い、View に対して見栄えの情報(ユーザー名など)を送ります。

実装方法としてはそれぞれがクラスとして定義されている場合、PresenterがViewをもっており、Presenter内で入力を受け取るイベントを定義しておき、入力に対して適宜Modelとやり取りをおこなって、最終的にViewのパラメータを変更します。

ゲームで表す MVP

ゲームでよくあるキャラクター選択画面をイメージしてください。キャラクタをタップすると、選択状態の枠が付与される形です。今回は画面をMVPで定義したいと思います。

f:id:tkymx83:20180603181842p:plain

Model
  • キャラクター情報:名前や画像、場合によってはモーションなどが紐付いている可能性があります。
  • デッキ情報:複数体のキャラクターをまとめたデッキです。選択状態のキャラクターがデッキに格納されます。
View
  • キャラクターアイコン:キャラクタの画像があればアイコンを出すことができます。
  • 選択の枠:選択されている位置に対して枠の画像を設定します。
Presenter

全体の処理となります。キャラクタがタップされた際に以下の順で各要素にアクセスします。

  • キャラクターをタップ:タップされたキャラクタがわかります。
  • デッキに対してキャラクタをセットする:Modelへアクセスして情報の格納をします。
  • 選択の枠の位置を変更する:Viewに対して情報を格納します。

おわりに

いろいろはなしましたが、結局は規律を自分で決めて実装することで以下のようなメリットがあります。

・共通部分をくくりだすことで作業効率化を図れる
・スタートダッシュが早くきれる
・一定の知見が溜まっているので問題が起きにくい(起きても検索できる)

設計はプログラム界の知見なので、使わない手はないと思います。

UI設計ツール Sketch を初めて使って思ったメリット

こんにちは、最近ゲームづくりをすると宣言中です。

ゲームプログラーマたるもの、ゲームの品質をどこで担保するのだろうか?実装?デザイン?僕が思うのはいかに手戻りなく最適な実装をするかだと思っています。

ゲームづくりの鬼門はUI 設計不足による手戻り

ゲームのUI を作る際にUnity を直接いじることがあると思います。はじめは良いのですが、そのうち、もっと良いレイアウトにしたいとかんじます。しかし、その段階ではUIはがちがちにかたまっているので、もう変更されません。

そこで、重要になってくるのが、いかに最善のUIを実装前に考えることができるのかとなります。その問題の解決策が UI 設計を先に行うことです。

UI 設計のツール Sketch とは?


そこで必要になるのはUI設計のためのツールです。ツールとしては手書き、ソフトウェア、色々あると思います。僕が最近使っているのは Sketch です。

www.sketchapp.com

ショートカットが充実している Sketch

まだ少ししか使っていませんが、Sketch の良いところはショートカットが充実していて開発速が速いことです。

例えば、 U を押して、ドラックすれば丸四角ができます。V をおすとベクター画像を書くことができます。T を押すと文字を書くことができます。

このように、各機能にアクセスする窓口がかなりいっぱいあります。以下記事参考です。

creive.me

qiita.com

これから、Sketch 使っていてよかって点や気になった点を投稿していこうと思います。

Unrecognized assets cannot be included in AssetBundles を乗り越えた

こんにちは、久々の投稿になります。

いつの時代もエンジニアは思いもしないバグに悩まされるものです。今日紹介するエラーも「まさか」という結果となっています。なぜそんなことになったのか。それを追求するのは難しいが、それもエンジニアの性なのかもしれません。

何が起きたのか。

Unity でアセットバンドルビルドを行っていたら、以下のエラーが起きました。このエラーが起きると、アセットバンドルに指定のファイルが圧縮されないことになり、実際にゲーム上で読み込んだ時に「無い」といわれます。

Unrecognized assets cannot be included in AssetBundles ....prefab

原因候補1 アセットのファイル名が間違っている。

www.scriptlife.jp


上のサイトにでは、アセットのファイル名が間違っていたようです。(byte -> bytes だったよう)

エラー文は「アセットが認識されない」なので、そもそもファイル名が間違うとエラが起きるようです。

しかし、今回は prefab であり、間違っているとも思えません。

原因候補2 アセットの形式が対応していない。

mochimoffu.hateblo.jp

こちらの記事では、.lua が使えずエラーとなっていたと書かれています。

また、ファイルの位置によってもエラーが出ることもあるそうです。

ですが、今回は prefab ファイルこれが使えないわけがないと思います。

原因候補3 アセットが壊れている?

結局調べてもよくわかりませんでした。エンジニアになってわけもわからないエラーに遭遇することはよくあります。こんな時は、実際のファイルをじっくり見るに限ります。そこで、Unity でファイルをじっくり見てみました。

f:id:tkymx83:20180507231531p:plain

画像を見てわかると思いますが、どう考えてもファイルのアイコンが違います。しかも、ファイルのInspectorが編集できない形となっており、open をしようとすると以下のエラーが発生していました。

Unable to open Assets/Resources/....prefab: Check external application preferences.

ファイルをReImport することで、正常な状態に戻すことができました。

結論

結論として、prefab が壊れていました。以下なんで壊れたのかを想像してみました。

壊れた原因としてインポートに失敗した可能性が考えられます。理由は2つあります。一つ目はインポート中にUnity の強制終了をよく行っていたからです。強制終了によって、インポートされた情報がUnity 側で壊れてしまっていたのかもしれません。二つ目は、別にインストールしたUnity では正常に表示されていたからです。そのため、該当の Unity のインポート時に失敗した可能性があります。

以上、同じエラーに苦しんでいる人がいたら参考にしてください。

爆速アプリ開発 Flutter を試してみた

こんにちは、今週は皆さんどのようにお過ごしですか?僕は爆速でアプリを開発したいと常に考えていました(笑)

いきなりですが、アプリ開発で一番遅いと思う動作はなんですか?






僕はコンパイルです。コンパイルがとにかく遅いです。そんな問題をことごとく解決してくれるフレームワークを発見しました。

それは Flutter といいます。

Flutterの説明

Flutter はモバイルアプリ開発に使えるフレームワークです。現在 beta 版が公開されています。言語はDart。開発効率化や多言語化などいろいろな機能がありますが一番魅力的なのはホットリロード機能です。

ホットリロード機能とは、なんとコンパイルすることなくアプリをテストできる機能です。では、そんな Flutter のインストールからAndroid アプリ開発を通して実際に ホットリロード機能を使用するところまで紹介致します。

インストール手順

公式サイト
Easy and fast SDK for beautiful apps - Flutter

Macのインストール手順
Flutter Setup for macOS - Flutter

  1. まず以下のコマンドでフレームワークをインストールします。
git clone -b beta https://github.com/flutter/flutter.git
export PATH=`pwd`/flutter/bin:$PATH
  1. インストールが終わったら、Flutterの起動に必要な環境の検査を行います。
flutter doctor

以下の画像のように "x" がついた項目が不足している要素となります。
f:id:tkymx83:20180304140729p:plain

  1. Android Studio の設定

今回はAndroid開発にAndroid Studio を使用します。
※ Flutter は Android Studio 3.0 以上を対象にしています。

起動したら、プラグインとして Flutter と Dart言語を入れます。
※ Androud Studio -> Prefferences -> Plugins で以下のように検索してインストールしてください。

f:id:tkymx83:20180304141151p:plain
f:id:tkymx83:20180304142807p:plain

これで準備は完了です。

アプリの新規作成方法

プラグインをいれて、Android Studio を再起動するとメニューに Flutter の新規プロジェクトの作成ボタンが追加されています。

f:id:tkymx83:20180304141346p:plain

新規作成ボタンを押し、ウィザードを進めていくとプロジェクトが生成されます。

f:id:tkymx83:20180304141500p:plain

一旦この状態で下記画像の実行ボタンを押すとデバイスが設定されていればアプリが起動します。

f:id:tkymx83:20180304141550p:plain

ホットリロード の凄さ

ホットリロードはアプリを起動した状態で、ソースコードを変更し、保存もしくはホットロードボタン(画像中央の雷のマーク⚡)を押すことでアプリ側に変更が反映されます。

f:id:tkymx83:20180304142530p:plain

保存は command + S でも大丈夫です。保存された瞬間にホットリロードが開始され、コンソールに以下のように表示されたら成功となります。

f:id:tkymx83:20180304142653p:plain

まとめ

コンパイルが必要にならない時代がついに来たと感動しています。気なるのはこの機能が大規模開発にも使えるかどうかです。ソースの一括置き換えをしてみましたが、4秒ほどで反映されたため、使用できないシーンはあまりないのかもしれません。しかし、変更量やソースコード量が多くなった時に何秒この動作にかかるのかが気になる点になります。

Canvas に関して簡単なまとめ

こんにちは、久しぶりの投稿になります。

最近仕事でUnityのUIをいじることがあり、Canvasの設定が全然わかりませんでした。

今日はCanvasについて簡単にまとめてみたいと思います。

そもそもCanvasってなに?

f:id:tkymx83:20180218140909p:plain

UnityでUIを置こうとするとHierarchy上に上の画像のような"Canvas"とかかれたオブジェクトが設置されます。
ボタンなどのUIはこのCanvasの子要素として設置されます。このCanvasのオブジェクトの下に設置しないとUnity上では見ることができません。

Canvasってなにをやっているの?

簡単にいうと、子要素として設定されたボタンなどのUIの見え方の制御をしています。

f:id:tkymx83:20180218140753p:plain

Canvasには上記のようなコンポーネントが設置されています。

[Canvasコンポーネント] はUIがどのように配置されるかを表しています。
Render Mode に設定された項目で見え方が大きく変わります。

  • Screen Space - Overlay

このモードでは、キャンバスのスクリーンの大きさに合わせて、3D空間上のオブジェクトに上書きされるようにレンダリングされます。

この際パースによる影響は受けないため、ゲーム上のメニュー画面のような形で使用できます。

  • Screen Space - Camera

このモードでは、[Screen Space - Overlay] とは異なり、3D空間上の奥行きを判断してレンダリングされます。この際もパースの影響は受けないため、3D空間上に板が設置されているようなレンダリングとなります。

ゲームでは常にカメラの方を向くヘルプの情報のようなかたちでみることができます。

  • World Space

このモードが一番わかり易いですね。3D空間上にUIがあたかも存在するかのように設置できます。そのため、カメラを動かすと、それに応じてUIの見え方も変わります。

キャラクタのHPバーのような形で表示することができます。

解像度が変わった場合ってどうするの?

ゲームを作っていて一番気になるのはスマホのように解像度が違う場合にどのように対処するかですね。

f:id:tkymx83:20180218140753p:plain

その場合は上記Canvasコンポーネントの中で、[Canvas Scalerコンポーネント]を使用します。

UI Scale Mode を変更することで、解像度が違う場合の対処方法を設定することができます。

  • Constant Pixel Size

このモードはUnity上のピクセル数が解像度関係なく表示されます。
つまり、100x100px の画像を表示する場合、1000x1000pxの画面では小さく表示されるが、100x100px の画面では大きく表示されるということです。

  • Scale With Screen Size

こちらは、解像度の変化によって、実際の表示されるサイズを変更するモードです。前述の例で行くと、1000x1000pxの画面でも100x100pxの画面でも画面上の大きさは変わりません。

  • Constant Physical Size

こちは、[Constant Pixel Size] と似ており、前者がピクセル数が一定であることを保証していたように、後者は物理的(ミリメートル)なサイズを一定に保つようにレンダリングします。そのため、DPIが重要視される場合に使用されます。

まとめ

基本的にメニュー画面のようなUIを作る場合は、CanvasのRender Mode は Screen Space - Overlay がおすすめで、Canvas Scaler の UI Scale Mode は Scale With Screen Size がおすすめです。理由は解像度が変わってもUIの位置がずれることがないためです。

反対にHPバーやキャラクタの名前が3D上モデルの上部に表示される場合はそれ以外の要素を使って調節する必要があります。

あとは使ってみて、一番自分の理想に合うものを選んでいただける幸いです。

【未解決】なぜ説明がうまくできないのか?

仕事の内容を伝えようと思ってもあまりうまく伝わらない
そんなことがありませんか?

説明がうまくできなかった状況について、僕が気づいたものを
いくつか上げてみたいと思います。

あるある!、と思った人はすでに説明が下手かもしれません。
気をつけてください。

係りが多い

この仕様でこの部分が間違っていたので修正したので見てください。


「で」がおおいですね。
ここまで同じ接続詞が続くと、どの部分が伝えたい事なのかがわかりづらくなります。

わかりづらい理由は、テンポが一緒が一緒だからです。句読点があるように人間は区切りで物事を判断します。
そのため、「で」が一定のリズムで現れると区切りがわからなくなり、内容の理解が困難になります。

「思います」の罠

このような自体が起きていると思われます。
対処するにはこのような対策が必要であると思われ、
そのために〇〇を行いたいと思い連絡いたしました。

思いすぎですね。

思うという文章には、重要ではないという感想がつきまといます。
それによって、文章の重要な部分がわからず、混乱をきたしてしまいます。

思うという言葉は自身がない時によく使われがちですが
断定できる部分は断定して、重要であることを伝えましょう

話の範囲がわからない

〇〇と〇〇について問題が生じました。
そのため、検証対象の他の対象についても再検証が必要です。

一見普通の文章のようです。しかし、この文章は2つの解釈があります。
1.検証対象の〇〇と〇〇を抜いたの他の対象
2.全対象の中で検証対象を抜いた他の対象

本当の意味が1だったとしても、2と解釈されると、検証の範囲が増大します。
その状況で会話を勧めていくと、とんでもない勘違いが生まれてしまします。

なので、何かの範囲の話をする場合は明確に伝わるのかを注意しましょう

やさしい日本語はながくわかりづらい

調べる大きさはとても大きなるかもしれないので、わかりやすい調べ方を探しておいてください。

文章は小学生にも理解できるようにすることが大切とよく言われます。
しかし、上の文章を理解するのは難しいでしょう。

理由は2つあります。
1.長いので読んでいる間に前半のことを忘れる
2.意味の単位がわからない

特に重要な事は2の意味の単位がわからなくなることです。
先程も述べましたが、人は区切りで物事を認識します。

ひらがなの多いこの文章では区切りがわかりづらいです。
実際に以下の文章を見てください。

調査範囲は増大傾向にあるため、明確な調査方法の検討をお願いします。

感じがあると、その区切りで物事を理解するため、理解の助けになります。

まとめ

以上、最近の文章力の不足を自分なりに分析して、悪い点を洗い出してみました。

最後の項目などは伝える対象によるところがあるかもしれません。

重要なことは誰が読んでも同様のこととして理解できる点です。

そのことに注意しましょう。

そろそろ経済学の本でも読んでみませんか?

こんにちは

皆さんはどんなことが気になりますか?
僕は古本屋さんがどのように儲けているのか気になります。

神保町の古本屋さんに行くと、本を買う人はあまりおらず
本を見ているだけ。店員さんも座って本を読んでいるので
本が売れなくても生計を立てられるのか不思議になります。

そんな僕の疑問を解決してくれたのが、このの本です。


なんで古本屋さんは売れるのか?

答えは本の売買以外のことで儲けているということです。

この本の中で登場する本屋さんにはイケメンの店員がいます。
店主はいつも店の前で本を読んでいるそうです。
ではどんなことで儲けているのか?

作者が近くのカフェに寄った時に、カフェの壁にはとてもセンスの良い本が並んでいたそうです。
本についてマスターと話していると、なんとカフェに飾ってあるこれらの本は隣イケメン店員に選んでもらっているそうです。

実はこの古本屋さんのイケメン店員は目利きのセンスが強く、とても良い古本を集めて来るそうです。
なので、本の売買だけではなく、自分の能力(目利き力)を活かした、本のプロデュースで儲けていたのです。

本のプロデュース事業は作者のよってカフェだけではなく、都内のいたるところで展開しているそうです。

他にはどんなことが書かれているのか?

本で書かれている古本屋さんのように儲る仕組みはいろいろあります。
この本ではこれ以外にもたくさんの例がわかりやすく書かれています。

古本屋さんの例から分かる通り、この本では日常の気づきを経済学に結びつけます。
なので、自分事としてすんなり経済学を受け入れることができます。

いままで経済学を難しいと思ってた人にとっても良本に

世の中にある本はたいてい難しい本です。
キャズム」や「5つの力」など聞いたことはあっても、具体的に何に使えるのかは想像がつきません。

対してこの本は、日常から経済学を学べるため
とても気持ちよく経済学の基礎の部分を理解することができます。