flanny7-blog

[flanny7-blog]

『りあーずだんじょん』を作ろう 第４話

arg[0] | Hello.

どうも。flanny（ふらんにぃ）です。 今回も『ダンジョン探索ミニゲームを作る』を始めて参ります。

前回は「環境構築その２」ということで 「Git のお手入れ」と「ルール決め」について書きました。 今回は「マップデータを考える その１」です。 とりあえず、スクリプトは書かずマップを表示させてみます。

arg[1] | atlas map chips

How To

Unity には TileMap という比較的新しい機能があります。 まるで RPGツクール のようにマップを作るツールで便利らしいです。 🔗 さぁ、UnityのTilemapを始めよう！ 1/8 \~概���編\~ - Qiita

が、今回は使いません。使い方を知らないから。 既存ツールの使い方よりも「マップってどう作る？」という視点に注目して進めます。

仕様

マップに関して、呼び名を統一しておきます。

マップチップ（MapChip）

１マスに描画するマップのこと

64×64の画像（Sprite）

マップチップセット（MapChips）

マップチップの集合体

いわゆるパレット

複数のマップチップを "アトラス化" したもの

マップチップスペース(MapChipSpace)

マップチップを埋めるスペース

１つのスペース（１マス）に１つのマップチップを持たせる

SpriteRenderer

マップ（MapChip）

ゲーム上で見せるマップ

マップチップスペースの集合体

マップチップとアトラス化

画像を用意する

さて― まずはマップチップを作ります。 Adobe社に課金しているので、Illustratorを使います。

マップチップは、64×64 (px) の png形式 とします。 とりあえずなんでもいいので、番号を振った16枚を用意しました。

ここで、その16枚のマップチップを１枚の画像にまとめてしまいます。 縦４枚 横４枚 の計16枚で 全体で 256×256 (px) になります。

Unity 上では、まとめた１枚の画像を切り分けて使うことにします。 このように複数の画像を１枚にまとめ、切り分けて使うことを "アトラス化" と呼んだりします。 複数の画像を１枚にまとると、画像の読み込み回数を減らすことができます。 "アトラス化" にはメリット・デメリットがあるので、興味のある方は調べてみてください。

Sprite を Slice する

"アトラス化" した画像を マップチップセット と呼ぶことにします。 マップチップセットを Unity に読み込ませます。 そして Inspector で次の箇所を編集します。

TextureType ： Sprite (2D and UI) Sprite Mode ： Multiple Pixels Per Unit ： 1 Filter Mode ： Point (no filter)

ポイントは３つ。 Pixels Per Unit と Filter Mode と Sprite Mode です。

Pixels Per Unit

Pixels Per Unit は 画像の大きさに関する値です。 言葉通り、１Unit あたり何 Pixel で表示するかという意味です。 "Unit" とは Unityで定義されている大きさの単位です。 Scale１ = １Unit と考えてください。 🔗 【Unity2D】Pixels per Uint について | albatrus.com

通常は「100」ですが、２Dの画像を扱うときは「1」の方が直感的に配置できるはずです。

Filter Mode

Filter Mode は画像の圧縮方法です。 今回のマップは 64×64 (px) といった小さい画像の集合になります。 そのため Point (no filter) にして綺麗に描画できるようにしています。

Sprite Mode : Multiple

Sprite Modeは Multiple にします。 これによりマップチップセットを切り分けることができます。

「Sprite Editor」をクリックします。 「Slice」の「Type」を Grid By Cell Size にして切り分けます。 画像全体の大きさは 256×256 (px) で マップチップ１枚の大きさは 64×64 (px) です。 「Pixel Size」を X：64 Y：64 にして「Slice」をクリックし、合計16枚のマップチップにしましょう。

上手く切り分けられたので、右上の「Apply」をクリックして確定します。

arg[2] | put map chip renderers

ここからは、マップチップを置く場所を用意します。 ここではマップチップを置く場所を マップチップスペース と呼ぶことにします。

Unityは Sprite を描画するために SpriteRenderer に Sprite を渡す必要があります。 つまり、今回は以下のように考えるわけです。

Sprite = 切り分けたマップチップ

SpriteRenderer = マップチップスペース

ということで、10×10 (マス) のマップチップチップスペースを配置します。

Scene は SampleScene のままです。 解像度は Standalone (1024×768) です。

Sprite を綺麗に描画するためのカメラの設定

まずはカメラの設定をしておきます。 Main Camera の Camera を以下のように編集します。

Clear Flags : Solid Color Projection : Orthographic Size : 384 (height/2 の意)

Clear Flags

Clear Flags を Solid Color にします。 ２Dを扱うときは、こちらの方を選んでおくと見やすいです。

Projection : Orthographic

Projection を Orthographic にします。 Perspective は「透視投影」、 Orthographic は「平行投影」です。 ３DCGを扱ったことのある方なら何となくわかるかもしれません。

Size は「解像度の高さ / 2」にします。 今回は Standalone (1024×768) なので 768 / 2 = 384 です。

🔗 DartでWebGL入門-3D編

🔗 【Unity】カメラの基本設定を理解しよう！｜Camera入門①

SpriteRenderer の配置

10×10 (マス) の計100個を配置していきます。

まず、親となる GameObject を用意します。 名前を「Map」とし、左上端の位置になるように座標を X = -288, Y = 288 とします。

次に、「Map」の子オブジェクトとして SpriteRenderer をアタッチした GameObject「MapChipSpace」を左上から左へと順に配置していきます。

SpriteRenderer の Sprite には、先ほど用意したマップチップの０番目を渡します。

inspector の値を入力するときは、計算式を使うことができます。 例えば (3) を配置するときに、(1) をコピぺして X に「0 + 64 * 2」のように入力すれば、「128」にしてくれます。 あとは「(1) ～ (10) までを配置したら、(1) ～ (10) をコピペして、Y の値だけ編集する」を繰り返せば、比較的楽に配置できます。

手入力で地道に配置できました。 SpriteRenderer の Sprite に違う画像を渡せば、ちゃんと置き換わるはずです。 しかし、さすがに全種類のマップ１つ１つの Sprite を置き換えるのは地獄でしょう。

return;

ひとまず、計100個のマップチップスペース(SpriteRenderer)を配置することができました。 次回は、簡易的なマップデータを用意して、マップチップスペースたちに反映させていきます。

Comment

今回のキーワード アトラス化：画像を１つにまとめて切り分けて使うこと

[flanny7-blog]

『りあーずだんじょん』を作ろう 第３話

arg[0] | Hello.

どうも。flanny（ふらんにぃ）です。 今回も『ダンジョン探索ミニゲームを作る』を始めて参ります。

前回は「環境構築その１」ということで「UnityとGitHubとSoureTree」について書きました。 今回は「環境構築その２」です。 「Git のお手入れ」と「ルール決め」について書きます。

arg[1] | .gitignore

まずは Git のお手入れから始めます。

".gitignore" は Git で管理させ��いファイル/ディレクトリを指定することができます。 例えば、Visual Studio のようなエディタが自動生成するキャッシュファイルなどは、保存していなくても再度 Visual Studio で開けば生成されます。 このような管理が不要なファイルはアップロードの妨げになりますし、ディレクトリを汚します。 別環境で開く際には、かえって邪魔になりかねません。 そういったファイルを ".gitignore" は弾いてくれます。

前回、GitHub でリポジトリを作成したときに、gitignore の項目を「Unity」で指定しました。 そのため、ある程度は Unity が扱うファイルから Git にとって不要なファイルを指定してくれています。

🔗 「Unity」で指定した.gitignore - GitHub

ここに「Mac OSXに関するファイル」と「エディタに関するファイル」で不要なものを追記します。

# Mac OSX Thumbs.db Desktop.ini .DS_Store # Rider .idea/ # Visual Studio Code .vscode/

追記したものがこちらです。 🔗.gitignoreの更新 - GitHub

arg[2] | .gitkeep

次に ".gitignore" と逆のことをします。

Git は通常、空っぽのディレクトリをコミットの対象にしません。 一方Unityは、あらゆるファイル/ディレクトリに対して「メタファイル」という独自のファイルを生成します。 空っぽのディレクトリを作った際も、そのディレクトリに対応したメタファイルが生成されます。 ここで問題になるのが「空っぽのディレクトリを作り、コミットした」場合です。 まず、ディレクトリを作ったのでメタファイルが生成されます。 次に、空のディレクトリはコミット時に Git の管理下から弾かれます。 つまり、メタファイルだけがコミットされてしまうのです。

これを避けるために「空っぽのディレクトリを作ったら ".gitkeep" で保護する」ようにします。

今回は、 shimiu 氏 が公開するスクリプトをお借りします。 これは、空のディレクトリを生成したときに、自動で ".gitkeep" を作成するものです。

🔗 GitkeepMakers.cs - GitHub Gist

こちらを Assets/Scripts/GitkeepMaker.cs という配置にしました。

スクリプトをお借りするときは、ファイルの上部に借りたリンク先をコメントに残しておくと良いでしょう。

arg[3] | .editorconfig

次は、ルール決めをします。

プログラム��書くときに、書き方のルールを設定することは非常に重要です。 個人開発であっても例外なく、書き方の統一には気を配った方が幸せになれると思います。

そのルールをイイ感じに用意できるものの１つに ".editorconfig" というものがあります。 ".editorconfig" は、エディタの種類を気にすることなく、書き方のルールを指定できるファイルです。 詳しいことは、この方の記事をご覧下さい。

🔗 どんなエディタでもEditorConfigを使ってコードの統一性を高める - Qiita

簡単に以下のように設定しました。

root = true [*.cs] indent_style = tab indent_size = 4 end_of_line = lf charset = utf-8

🔗.editorconfigの作成 - GitHub

arg[4] | Extra - tools 4 coding rule -

今回はここまでなのですが、少し��け余談です。

プログラムの書き方のルールは、"コーディング規約"などと呼ばれています。 ".editorconfig" はエディタに左右されずに規約を設定できますが、カバーしきれない部分も多くあります。

例えば、変数や関数の命名規則、スコープに基づいた宣言の順番、特定のキーワードに対する改行の有無などです。 そういった細かなルールを自動でチェックしてくれたり、修正してくれるツールがあるので、簡単に紹介します。

StyleCop

StypeCop は、C#のコーディング規約を静的に解析してくれるツールです。 ソースコードに対して設定した規約に沿っているかをチェックしてくれます。 あくまでチェックなので、修正はしません。

CodeMaid

CodeMaid は、コードを整形してくれるツールです。 C# に限らず様々な言語に対応しています。

Resharper

JetBrains社の強いツールです。 コーディング規約の動的解析から修正まで全部やってくれます。 私の知る限り、こういったコーディング規約に関するツールの中で最強です。 この Resharper は Visual Studio のアドオンとして使うことができます。 同じく JetBrains社の IDE である Rider には標準で搭載されています。 有料ですが、学生は無料で利用できます。

関連記事 🔗 C# CODING GUIDELINES - Qiita

🔗 【Unity】StyleCop でソースコードを静的解析してコードスタイルの違反をチェックする方法 - コガネブログ

🔗 【Visual Studio】コード整形用の拡張機能「CodeMaid」 - コガネブログ

🔗 【Visual Studio】Unityエンジニアから見たReSharperの便利機能まとめ - Qiita

🔗 JetBrains系IDEの学生版を取得した話 - Qiita

return;

さて― ようやく準備が整いました。 幾度も Unity を使っていると、自分なりの準備というものができてくると思います。 紹介しているのは一部ですが、皆さんの Unityライフの糧になれば幸いです。

次回は「マップデータを考える その１」です。 いよいよ、Unity でゲームを作り始めます。 最初は目に見えるところから手を出します。

Comment

今回のキーワード .gitignore：Git で管理しないファイル/ディレクトリを指定する。 .gitkeep：Git で管理するファイル/ディレクトリを指定する。 コーディング規約：プログラムの書き方のルール。幸せなプログラマになるための重要な鍵の１つ。 .edirotconfig：エディタに左右されないコーディング規約の設定ファイル。

[flanny7-blog]

『りあーずだんじょん』を作ろう 第２話

arg[0] | Hello.

どうも。flanny（ふらんにぃ）です。 さっそくですが『ダンジョン探索ミニゲームを作る』を始めて参ります。

今回は環境構築その１です。 タイトルをつけるなら「UnityとGitHubとSoureTree」ってなところです。

環境はこちら。

Windows 10 Unity .2.20.f1 Source Tree v3.0.17 Git v2.20.1 Visual Studio Community 2017

arg[1] | Unity - Create Project -

手始めに Unity のプロジェクトを立ち上げます。 Locationは後で移動するので、適当にデスクトップなどに置きます。

できました。 起動したらすぐに閉じます。( *×* )

arg[2] | GitHub - New repository -

GitHubのページに飛んで、新しくリポジトリを作ります。 右上の「＋」アイコンを押せば作れます。

とりあえず Private で作成します。※1 README は後々書くことにして、チェックはしません。 .gitignore は「Unity」にします。 今は公開しないので、License は「None」にします。

できました。

arg[3] | Source Tree - Clone -

Souce Tree を使って"リモートリポジトリ"から"ローカルリポジトリ"に"クローン"します。 Source Tree とGitHub とは連携済みです。 色々な手段がありますが、今回は GitHub から HTTPS のパスを持ってきます。

「Clone」を開いて、コピペします。 私は、プロジェクトファイルの保存場所をドキュメントとしているので、 Documents\RiasDungeon にします。

"クローン"できました。

arg[4] | Unity - porting -

少し悪い手を使います。 "クローン"したディレクトリに、Unity のプロジェクトファイルを移します。 「Assets」やら「Library」やら全部を切り取って...

貼り付けました。

Unity Hub を立ち上げて、「開く」から移植したディレクトリを選択します。

無事に開けました。（スクショは忘れました）

arg[5] | Source Tree - Push -

移植が完了したので、Gitを更新します。 Source Tree の「ファイルステータス」を見ると、「作業treeのファイル」にゴチャゴチャとリストアップされています。

「全てインデックスに追加」をクリックして、"ステージング"します。 いわゆる git add . です。 "ステージング"できたら、 "コミット"します。 コメントはちゃんと書きましょう。flannyとのお約束ね。 書けたら、「コミット」をクリックします。

"コミット"できました。 いわゆる git commit -m"コメント" です。 次は"リモートリポジトリ"に"プッシュ"します。 "プッシュ"するときは、事前に"フェッチ"しましょう。 今は必要ないけど、クセをつけるのも大事です。 これもflannyとのお約束ね。 "フェッチ"ができたら"プッシュ"します。

いわゆる git fetch からの git push origin master です。

できました。 GitHub で確認してみます。 上手く"プッシュ"できていますね。

return;

Unity のプロジェクトを Source Tree 経由で GitUub に"プッシュ"しました。 今後はこの環境で、２Dダンジョン探索ミニゲームを開発していきます。

でも次回は、環境構築その２を書きます。 準備は丁寧に、です。 主に「Git のお手入れ」と「ルール決め」について書くのでお楽しみに。

Comment

※１．"リポジトリ"をPrivateにしないと一般公開することになります。

用語集（随時、更新予定） "ローカルリポジトリ"： "リモートリポジトリ"： "クローン"： "ステージング"： "コミット"： "フェッチ"： "プッシュ"：

[flanny7-blog]

『りあーずだんじょん』を作ろう 第１話

arg[0] | Hello.

どうも。flanny（ふらんにぃ）です。

今週から、K.B.C.EXTRAのEXTRAステージ（おまけ記事）を書いてまいります。

第１弾のテーマはこちら！

『ダンジョン探索ミニゲームを作る』

はい、ミニゲームを作ります。

arg[1] | Content.

具体的で抽象的な中身を紹介します。

まずは、この企画の経緯です。

Episode 00

初めにふと思ったことが「僕がゲームを作らないで誰がゲームを作る記事を書くか」ということ。

散々「ゲームつくろうぜ」って言ってるやつがゲームの記事を書かずに、「ラー油の作り方」「カレー鍋の作り方」「カヌレの作り方」なんかを紹介しても、ちょっと意味わからないと思いました。

「仮面ライダーの変身講座」は割と良いなとひらめきましたが、自分のポーズに自信がないので辞めました。

まあということで。 EXTRAのこの活動や他のミニプロ、はたまた未来のミニプロや制作に少しでも貢献できる記事が書けたらいいなぁという想いでいます。

What? How??

じゃあどんなゲームつくるの？どんなこと書くの？というと、以下のことを考えてます。

マス状のダンジョンを作る

ダンジョンにプレイヤーを設置する

ダンジョンに敵やアイテムを設置する

ゲームループを作ってみる

オリジナルのデータファイルを作ってみる

ゲームを一通りクリアできるようにする

「え？弾幕張らないの？？」

『Unity』のGameObajectとScriptとの付き合い方やゲームループの組み方、データファイルの読み書きなどを比較的簡潔に、そして僕なりに紹介出来たらいいなってくらいで考えてます。

途中で内容が変わるかもしれないし、その辺は適当です。許してね。

return;

というわけで、数回にわたってダンジョン探索ミニゲームを作ります。

次回は、詳しい開発環境や手順について書く所存です。

よろしくお願いします。

[flanny7-blog]

tensotflow-gpu on windows10

tensotflow-gpuをwindows10で動かすための環境構築に苦戦したので、現時点（2018/11/29）での構築手順を書き置きします。

先に書いておくと、ライブラリまわりのバージョンに注意する必要があります。 また、Tensorflowの公式リファレンスを読むと大体わかります。 https://www.tensorflow.org/install/gpu

Index

環境

CUDA Toolkit 9.0 のインストール

cuDNN for CUDA 9.0 のインストール

Anaconda 5.3.0 のインストール

インストールできたか確認する

環境

windows 10

GPU (NDIVIA GeForce GTX 1060 6GB)

driver v22.21.13.8554

Anaconda 5.3.0

python 3.5.6

CUDA 9.0

cuDNN 7.2.1

tensorflow-gpu 1.10.0

CUDA Toolkit 9.0 のインストール

CUDAは、NVIDIA製のGPUを扱うライブラリです。 バージョンが10.0 9.2 9.0とありますが、現在Tensotflow-gpuが対応しているのは9.0です。なのでCUDA Toolkit 9.0をインストールします。

https://developer.nvidia.com/cuda-90-download-archive

cuDNN for CUDA 9.0 のインストール

現在CUDA 9.0に対応しているcuDNN for CUDA 9.0を選びます。

ここではcuDNN v7.2.1 Library for Windows10をインストールします。 https://developer.nvidia.com/rdp/cudnn-archive

cuDNNをダウンロードするためにはNDIVIAのアカウントが必要になるので、適宜アカウントの作成・ログインをしてください。

cuDNNがダウンロードできたら、ZIPを解凍します。

解凍したファルダ（おそらく「cuda」）の中にあるcuDNN64_7.dllを、CUDAがインストールされているフォルダC:\Program Files\NVIDIA GPU Computing Toolkit\v9.0\binに転送します。

これでcuDNNのインストールは完了です。

Anaconda 5.3.0 のインストール

まずはAnacondaをインストールします。 https://www.anaconda.com/download/

※私はscoopでインストールしました。

tensorflow-gpu 1.10.0 のインストール

tensotflow-gpuを使うためにはpython3.5.xを使う必要があります。 今回はpython 3.5.6を利用します。

まずAnaconda Navigatorを起動します。 左にある「Environments」を選び、下にある「Create」を選びます。 Nameには好きな名前を入力します。ここでは「tensorflow-gpu」とします。 PackagesのPythonを3.5にします。 そうしたら「Create」をクリックします。

次に、Search Environmentsの隣にある項目を「All」にして、「Search Packages」にtensorflow-gpuと入力します。 検索結果として出てきたtensorflow-gpuだけにチェックを入れ、右下の「Apply」をクリックします。 これでインストールが完了するはずです。

インストールできたか確認する

まずは先ほど作成した環境でpythonを立ち上げます。 tensorflow-gpu 1.10.0 のインストール で作成したEnvironmentをクリックし、選択します。 出てきた再生ボタンから「Open Terminal」を選択します。 cmdが立ち上がったら、pythonでインタプリンタ環境に移行します。

以下のコードを入力して、状態を確認します。

from tensorflow.python.client import device_lib device_lib.list_local_devices()

そこでdevice_type: "GPU"というワードがあれば環境構築完了です。

例：

その他メモ

GPU driverのバージョンがアヤシイとき

requires 384.x or higher. https://www.tensorflow.org/install/gpu

PATHが通ってなさそうなとき

SET PATH=C:\Program Files\NVIDIA GPU Computing Toolkit\CUDA\v9.0\bin;%PATH% SET PATH=C:\Program Files\NVIDIA GPU Computing Toolkit\CUDA\v9.0\extras\CUPTI\libx64;%PATH% SET PATH=C:\tools\cuda\bin;%PATH%

https://www.tensorflow.org/install/gpu

GPU(グラフィックボード)が対応しているかアヤシイとき

https://developer.nvidia.com/cuda-gpus

[flanny7-blog]

Initialize | はじめに

arg[0] | Hello, I am "Case: Ria".

私のtumblrをご閲覧いただき、誠にありがとうございます。 本ページ『Case: Ria』は、私の自由なモノ置き場となります。 題材は様々。 ゲーム制作やプログラミングの勉強、進捗の公開や詩まで......。 色々な事を不規則に書くつもりです。 規則的なものは、タグなりなんなりでキレイにまとめておきます。 更新頻度も適当です。 そんなゆるーいページになりますが、よろしければごゆっくりどうぞ。

arg[1] | My name is "flanny".

申し遅れました。 私は、このページの投稿者「flanny(ふらんにぃ)」です。 普段は大学でゲームや映像、電子工作・日曜大工に会計などと何でも屋をしています。

Character

名前：flanny7 / 読み：ふらんにぃ

別名：mottei / 読み：もってぃー

好きな言語：C#

完全に理解した(い)言語：C++

推しのゲーム：アカ��ブルー

趣味：ゲーム, 稀な舞台・ライブ鑑賞

好きな食べ物：博多とんこつラーメン

Project.K.B.C. / K.B.C.EXTRA

『Project.K.B.C.』というチームでゲーム制作をしています。(以下 K.B.C.) K.B.C.ではディレクターとプログラマーを担当しています。

またゲーム制作とは異なり、1,2年生を対象とした "モノづくり体得プロジェクト" として、 『K.B.C.EXTRA』というチームを結成し、活動しています。 その管理人として、まとめTumblrも書いているので、よろしければ立ち寄ってみてください。 まとめTumblr　K.B.C.PROJECT2018＠EXTRAの軌跡 タグ「#K.B.C.EXTRA」で検索をかけると、各メンバーの活動記録が見られます。