トマシープが学ぶ

Mac/Unity/AR好きのミーハー初心者

githubでコマンドライン使わずにファイルを上げる&readmeに画像をのせる

まともにgithubを使ってない自分用に備忘録。

私はバージョン管理とかじゃなくてただコードを見やすくネット上に上げたいがために使っています。コマンドラインは使いません。

githubコマンドライン使わずにファイルを上げるor作る

リポジトリを作ったら上のほうのreadmeを押します。

f:id:bibinbaleo:20170626154023p:plain

f:id:bibinbaleo:20170626154017p:plain

そしてCommit new file

f:id:bibinbaleo:20170626154137p:plain

これでCreate new fileやUpload filesなどのボタンが表示されました!やったー

f:id:bibinbaleo:20170626154218p:plain

ファイルを編集する

作ったファイルを編集しようと思ったら、ブランチを作らないと編集や消去はできませんよって出ました。(出ないときもある)

f:id:bibinbaleo:20170626154946p:plain

ブランチはプルダウンから作れました。

f:id:bibinbaleo:20170626154842p:plain

これで編集できるようになりました。ブランチは最初のmasterが丸々コピーされました。なのでmasterを編集したほうがいいと思われます。

www.backlog.jp

ブランチを消去

わけわからずに作りすぎてしまったブランチはリポジトリから、branchesを押して、

f:id:bibinbaleo:20170626155332p:plain

この画面で消去できます。赤いゴミマーク

f:id:bibinbaleo:20170626155336p:plain

qiita.com

画像を表示

リードミーなどに画像を追加する方法。

<img src="画像のurl" alt="画像の名前" title="オンマウスしたときに出てくる名前">

これを書けばいいです。マークダウン形式でもいいらしいのですがなぜかうまくいかなかったのでhtml形式でやりました。

altはリンク切れなどで画像が表示されないときに表示される名前です。

f:id:bibinbaleo:20170626160139p:plain

画像のurlについてはgithubに画像保存用のブランチを作るのがかっこいいらしいので作りました。

f:id:bibinbaleo:20170626160447p:plain

Uploadfikeで画像をアップロードして、そのページのurlをコピーして、

f:id:bibinbaleo:20170626160454p:plain

さっきのreadmeの画像urlのところに入れればいいと思われます。

f:id:bibinbaleo:20170626160810p:plain

できました!

f:id:bibinbaleo:20170626160708p:plain

参考

gist.github.com

cakecatz.hatenadiary.com

PovrayでIBLできない・・・?

Povrayというプログラミングでモデリングからライティング、レンダリングまでできるツールを使って、IBLをします。

POV-Ray - The Persistence of Vision Raytracer

このページ↓にあるコードをコピペして、

How to create realistic skies with POV-Ray - part 10 - HDRI environment mapping, High Dynamic Range Images

hdr画像をここからダウンロードして

www.hdrlabs.com

povrayファイルがあるフォルダの中に入れて、名前を変えて実行したらこんな感じになりました。

f:id:bibinbaleo:20170626134122p:plain

元画像と比較しても、IBLできていません。背景に表示されただけ。

f:id:bibinbaleo:20170626134118p:plain

オブジェクトのマテリアルを鏡面反射にしてみます。

鏡面反射はここを参考に

http://www.arch.oita-u.ac.jp/a-kse/povjp/povjp/html/pov35ref_tex0c.html#sec10304

f:id:bibinbaleo:20170626135226p:plain

まあ映り込んではいるけど・・・ライティングはされてないですよね。

ちゃんとライティングされてたら拡散反射でも赤くなってるはず

f:id:bibinbaleo:20170626135344p:plain

もしかしてIBLではない?

わからないので、遊びました。povray触るの久しぶり

f:id:bibinbaleo:20170626145350p:plain

gist.github.com

参考

基本的なことはすべてここにある。

POV-Ray 初心者向けチュートリアル & Tips

元シーン

とりあえず球体の画像を作ってみましょう。

ライトについて

POV-Ray 使い方 入門: ライトの種類 (点光源・面光源・平行光線)

 

PovrayでIBLできない・・・?

Povrayというプログラミングでモデリングからライティング、レンダリングまでできるツールを使って、IBLをします。

このページ似合ったコードをコピペして、

How to create realistic skies with POV-Ray - part 10 - HDRI environment mapping, High Dynamic Range Images

hdr画像をここからダウンロードして

www.hdrlabs.com

povrayファイルがあるフォルダの中に入れて、名前を変えて実行したらこんな感じになりました。

f:id:bibinbaleo:20170626134122p:plain

元画像と比較しても、IBLできていません。背景に表示されただけ。

f:id:bibinbaleo:20170626134118p:plain

オブジェクトのマテリアルを鏡面反射にしてみます。

鏡面反射はここを参考に

http://www.arch.oita-u.ac.jp/a-kse/povjp/povjp/html/pov35ref_tex0c.html#sec10304

f:id:bibinbaleo:20170626135226p:plain

まあ映り込んではいるけど・・・ライティングはされてないですよね。

ちゃんとライティングされてたら拡散反射でも赤くなってるはず

f:id:bibinbaleo:20170626135344p:plain

もしかしてIBLではない?

わからないので、遊びました。povray触るの久しぶり

f:id:bibinbaleo:20170626144103p:plain

gist.github.com

参考

基本的なことはすべてここにある。

POV-Ray 初心者向けチュートリアル & Tips

元シーン

とりあえず球体の画像を作ってみましょう。

ライトについて

POV-Ray 使い方 入門: ライトの種類 (点光源・面光源・平行光線)

 

Unity1week「積む」に参加しました

 

Unity 1週間ゲームジャム | ゲーム投稿サイト unityroom - Unityのゲームをアップロードして公開しよう

twitterで存在は知っていたこれに参加しようと思いました。ゲーム版ワンドロですね。お題は「積む」です。

ちなみに私はARとかライティングはよくやるけど、ゲームに関しては参考書のサンプルやチュートリアル以外で作ったことはありません。つまりオリジナルを作ったことはない。

多分完成できないだろうなと思いながらトライ。

何とか形にはなりました。

イデア出し

積むという単語からいろいろ発想を広げて、結果的に要求された金額分の札束をアタッシュケースの中に積んでいくというゲームを考えました。

f:id:bibinbaleo:20170622161510j:plain

イメージ図

f:id:bibinbaleo:20170622161448j:plain

必要な機能

f:id:bibinbaleo:20170622161458j:plain

作る

プロトタイプ的な

まずunityでイメージをつかむためのプロトタイプ?を作りました。

f:id:bibinbaleo:20170624125136p:plain

必要そうなスクリプトもファイルだけ作ってます。

f:id:bibinbaleo:20170624125234p:plain

オブジェクトの用意(札束、アタッシュケース

Unityではキューブの面ごとにテクスチャを変えることができないらしいのでCinema4Dで札を作りました。

f:id:bibinbaleo:20170624125008p:plain

側面はオリジナルなので使っていいですよ。

f:id:bibinbaleo:20170622160619j:plain

こっちはまずいかな?フォトショで加工したやつ

f:id:bibinbaleo:20170622160624j:plain

次にアタッシュケース。Unityでキューブを組み合わせたものを作っていたのですが、回転がへんになるバグ?が発生したのでCinema4Dで作りました。

f:id:bibinbaleo:20170624125446p:plain

でもこっちもUnityに持ってきたら法線の関係で表示されない面があってめんどくさくなって放置。

blog.goo.ne.jp

結局別のバグが発生しないパソコンでUnityのキューブを組み合わせて作りました。

f:id:bibinbaleo:20170625163050p:plain

札束をドラッグで移動

このサイトのコードをお借りしてドラッグで3次元移動できるようにしました。

neareal.com

ただデフォルトのキューブでやった時はできたけど、cinema4Dで作ったお札は動かない・・・

どうしよう

札束をクリックで移動

ドラッグだとプルプルして安定しないし、重力(rigidbody)もよくわからないので札束をクリックしたら勝手にケースに移動するように変更しました。

ここら辺を参考に・・・

rikoubou.hatenablog.com

mono-pro.net

qiita.com

 クリックしたゲームオブジェクトを取得する関数を作って、

f:id:bibinbaleo:20170625205746p:plain

その位置を変更しました。数値はケースに入る範囲でランダムにしています。

小数にはfをつけないといけない

f:id:bibinbaleo:20170625210030p:plain

f:id:bibinbaleo:20170625205743p:plain

コードは最後にまとめてあります。

アタッシュケースに入ったかを判定&金額表示

ケースに移動したら(札束をクリックしたら)そのぶんの金額を表示に足していきます。

ドラッグで移動するならケースと札束の接触判定か札束の位置で判定をしないといけなかったのですが、クリックにしたのでそこらへんは無視できます!やった!

オブジェクトにタグをつけて判定しました。

f:id:bibinbaleo:20170625210418p:plain

Update関数の中でテキスト表示

f:id:bibinbaleo:20170625210511p:plain

この処理も前の移動と同じスクリプトでやっています。

ここら辺は昔勉強したことが活きた気がします。

hiyotama.hatenablog.com

teratail.com

docs.unity3d.com

マウスオーバーで金額表示

これがないとお札が何百万円なのかわからないから必要なんだけどよくわからなかった。

d.hatena.ne.jp

docs.unity3d.com

TextMeshProで表示

仕方がないので、お札のそばにテキストを表示しておくことにした。TextMeshProを使いました。

f:id:bibinbaleo:20170625210925p:plain

良いですね!立体的に扱えます。札束の子オブジェクトにしたのでクリックしても札束と一緒に移動します。

f:id:bibinbaleo:20170625211016p:plain

bibinbaleo.hatenablog.com

ゲームクリアorゲームオーバーでシーン移動

スコアが要求金額通りならクリア、オーバーしたらオーバー画面に遷移します。

まずそれぞれのシーンをtextMeshProで作って、シーンをビルドに追加して、スクリプトを書きます。

f:id:bibinbaleo:20170625211227p:plain

f:id:bibinbaleo:20170625211234p:plain

キャンバスとかUIは設定がよくわからないので、スカイボックスを無しにして、カメラの背景色を変えて、3DのtextmeshProを作ってこの画面は作りました。

f:id:bibinbaleo:20170625211214p:plain

スペースキーを押したらゲーム画面に戻るように別のスクリプトを書いて、それぞれのシーンの適当なオブジェクトにつけます。

f:id:bibinbaleo:20170625211501p:plain

using UnityEngine.SceneManagement; を忘れない。

これもやったことがあったので簡単。

mynavi-agent.jp

エラー

割と始めの頃からNullReferenceExceptionエラーが出てました。

f:id:bibinbaleo:20170625155553p:plain

f:id:bibinbaleo:20170625165642p:plain

NullReferenceException: Object reference not set to an instance of an object
idou.Update () (at Assets/idou.cs:46)

空になっっている?nullの宣言????色々調べて何となく分かった気はするけど実際どうしたらいいかわからない。

結局最後まで治らなかったけど、ビルドできたので無視です。

teratail.com

ゲームプログラミングUnity,C# 今日のエラー Object reference not set to an instance of an objectピクチャ | ピクチャ

docs.unity3d.com

また、途中スコアが表示されなくなったけど、原因は同じスクリプトを全ての札束につけていたから。一つでよかった。

 

他の困りごととしてはケース底面の影が表示されないというのもありました。

f:id:bibinbaleo:20170625163050p:plain

底を引き上げてごまかした。

最終コード

最初は3つぐらいに分けてたのですが、わけわからなくなって一つにまとめました。

gist.github.com

ギリギリまで、要求金額は1200万円に固定してたけど、ランダムにするのそんなに大変じゃないことに気がついたので最後の最後でランダムにしました。若干ゲーム性が増した。

書き出し

webGLで書き出さないといけない。

blog.naichilab.com

iosとアンドロイドぐらいしかインストールしてなかったのでダウンンロード

f:id:bibinbaleo:20170625155648p:plain

エラーが出たままビルドランしたら実行できなかった。

f:id:bibinbaleo:20170625155753p:plain

何やかんやして動くようになったけど、日本語が表示されない。

f:id:bibinbaleo:20170625212100p:plain

調べたらArialが日本語含んでないかららしい。

Unityゲーム開発所 - Unityで日本語フォントを使う

ここを参考にやさしさゴシックボールドを使いました。そしたらちゃんとできました。

f:id:bibinbaleo:20170625212543p:plain

UnityRoom

投稿はそんなに難しくなかったです。ファイルを一つ一つ間違えないようにアップして行ったらちゃんとできました。

blog.naichilab.com

f:id:bibinbaleo:20170625203949p:plain

f:id:bibinbaleo:20170625155712p:plain

完成

絶対間に合わないと思ってたのに5分前になぜか完成しました。

身代金を積め | ゲーム投稿サイト unityroom - Unityのゲームをアップロードして公開しよう

ゲームの更新も簡単にできそうなので、もうちょっと見た目をいじりたいです(コードはもうやだ)

f:id:bibinbaleo:20170625220548p:plain

見ていただいてる。

感想

今週珍しく忙しかったのと、ひぐらしのなく頃にが今日まで無料放送だったので家にいるときはずっとそれを見てたので、マジで今日までほとんど進めてませんでした。

ブログを書きながら実装してたのですが、絶対間に合わないだろうな、途中で飽きるだろうなと思ってたのですが、何とか形にはなりました。

こういう機会がないとゲーム作らないと思うので、次回からもできるだけ参加したいです。

Unityやってるって人に言う以上はゲームも多少できないと恥ずかしいし・・・

マインクラフトをViveでVR

Vivecraftという個人の方が作ったと思われるModを入れるとViveでマイクラが操作できます。

github

github.com

サイト

www.vivecraft.org

Forgeも一緒にインストールしてくれるので簡単でした。詳しくはこちらを参考に。

clairvoyance.hatenablog.com

ランチャーからViveCraftを選んでこんな感じの画面がでます。

f:id:bibinbaleo:20170620144347p:plain

パソコン画面か、コントローラーで選択します。PC版と同じようにワールドを作ると生成されます。

全体的にスケールが大きいです。一ブロックが自分の背丈より大きい気がします。

f:id:bibinbaleo:20170620144359p:plain

何も説明を見ずに手探りで操作できました。が慣れるまでにかなり時間がかかりそうです。

f:id:bibinbaleo:20170620144353p:plain

移動もテレポートなのでなかなか自分の思った通りのスピードでは移動できないですね。

操作

公式サイトに操作の図が載ってました。

f:id:bibinbaleo:20170620144934p:plain

f:id:bibinbaleo:20170620145004p:plain

 

立体音響を作れる〜?!

既存の音楽や音源を立体音響に編集することができるという情報をゲットしたので調べました。

www.earphoneinfo.net

アプリやソフトがあるんですね!てっきりダミヘなどのマイクで録音しない限り無理かと思ってたので、ワクワクします。

Bien

個人の方が作られたフリーソフト

binaural.seesaa.net

windowsのみです。普段ならwindowsだとめんどくさくてやらないのですが、どうしてもやりたいのでブートキャンプを起動します。

ソフトを起動して、オーディオファイルを読み込みます。

f:id:bibinbaleo:20170611173635p:plain

そして変更したいパラメーター(方位、高度、距離など)を選んで、タイムライン上で左クリックするとその位置に点が打たれます。取り消すには右をダブルクリックです。

f:id:bibinbaleo:20170611174208p:plain

おおー各パラメーター動かしました!ヘッドフォンで聞くとちゃんと移動しているのがわかりますね。

音をいじったこと全くないので、いい感じにはできませんが操作は簡単でした。

詳しい説明はフォルダの中のdoc>マニュアルに書いてありました。

参考

www.nicovideo.jp

blog.livedoor.jp

Theta Sで撮った動画をUnityでモバイルVRで再生したかった・・・

全天周画像・動画が撮れるTheta Sで撮った動画をUnityでモバイルVR(2眼)再生します。

 

GVR Unity SDK v1.6の使い方がわからずできませんでした。

とりあえずやったところだけメモがわりに書いておきます。

Google Cardboard

2眼表示するためのSDKを入れます。

Downloads and Samples  |  Google VR  |  Google Developers

 過去の解説サイトとか見たら2眼になるprefab(GvrMain)とかがあるはずなんですが、GVR Unity SDK v1.60.0にないんですけど?どれ?f:id:bibinbaleo:20170614111645p:plain

デモ見たらカメラの場所わかるかな〜と思ったけど全部一眼?普通のメインカメラだし。絶対仕様変わったでしょ。

なんかでも起動したら設定を変えてねってでてきたから、Edit>Project setting>playerからvirtualreality~にチェックつけてcardboard選んだからそのせいかな?それに応じて変わる?????

f:id:bibinbaleo:20170614111640p:plainf:id:bibinbaleo:20170614111636p:plain

このページ見たら英語で解説してる。でもデモを起動するまでだよね。

Get Started with Google VR in Unity  |  Google VR  |  Google Developers

よくわからないけどデモをビルドしてみた。

f:id:bibinbaleo:20170614162627p:plain

できてる〜

いやほんとデモが複雑すぎてどれがカメラとして必要なのか全然わからん!Player以下にカメラがあるのはわかるけど・・・これだけなのか?

f:id:bibinbaleo:20170614114011p:plain

ポインターは今回いらないしこれはちゃんと解説見ないとわからないよ〜

とりあえず先に進みます。

全天周表示

昔自分がやった方法では なぜか全天周表示できなかったので、他のツールを使います。とりあえず全天周表示できればなんでもいいと思われる。

今回はAVPro Videoというのを使います。

Renderheads – AVPro Video

ここの解説通りにやったら全天周表示できました。ただしウォーターマークみたいなのが出ます。

gochiuni.com

簡単に書くと、StreamingAssetsフォルダに動画を入れておいて、Demo_360SphereVideoを開いて、AVPro Video Media Playerオブジェクトのインスペクタで動画をセットしたら360ど表示できます。マウスでくるくるできる。

f:id:bibinbaleo:20170614115007p:plain

f:id:bibinbaleo:20170614114956p:plainf:id:bibinbaleo:20170614162942p:plain

あとはここに2眼表示できるカメラを置いて、OrientationFixerを消して、Sphereオブジェクトにカメラをセットしたらいいはず。

f:id:bibinbaleo:20170614115031p:plain

適当にGVRのデモのplayer以下をプレファブにしてこのシーンに追加してビルドして見たけど2眼にはなるが真っ暗になった。

f:id:bibinbaleo:20170614163102p:plain

ビルド

個人的な問題ですがビルドエラーが出たのでこのページを参考にjdkを更新しました。

blog.naichilab.com

 気が向いたらまた調べてやろう。ちなみにHTC viveではAV playerで全天周表示して、設定のvirtyal reality~をチェックするだけでいい感じにVR再生できました。楽しかった。

参考

日本語で解説してくれているgit

github.com


portaltan.hatenablog.com