ザ・ゆるふわ
2016-12-26T02:35:46+09:00
ado3s
Hatena::Blog
hatenablog://blog/10328749687192790733
【Unity】BestHTTP(PRO)を触ってみた
hatenablog://entry/10328749687201211633
2016-12-26T02:35:46+09:00
2016-12-26T02:35:46+09:00 いやー、ここのところ忙しさとめんどい私用と体調不良で、 バタバタしすぎてバタコさんになりそうな年の瀬の今日この頃です。 はい、ちょっとだけやさしいUnityが書けてない言い訳です。。。orz今回はタイトルの通り、BestHTTPを仕事で使ったので、 ちょっと書いておこうと思いマウス! BestHTTPって何? BestHTTPを見てね! $60ですって!> まーけど、REST、WebSocket、Socket.IO、SignalR、Server-Sentここらへんが結構いい感じに使えるぽいので、 これ一回買えばあとは楽チンになるので、 買って損はなさそうな気しかしてません!!多分ww (まだ、…
<p>いやー、ここのところ忙しさとめんどい私用と体調不良で、<br />
バタバタしすぎてバ<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%BF%A5%B3">タコ</a>さんになりそうな年の瀬の今日この頃です。<br />
はい、ちょっとだけやさしいUnityが書けてない言い訳です。。。orz</p><p>今回はタイトルの通り、BestHTTPを仕事で使ったので、<br />
ちょっと書いておこうと思いマウス!</p>
<div class="section">
<h3>BestHTTPって何?</h3>
<p><a href="https://www.assetstore.unity3d.com/jp/#!/content/10872" target="_blank">BestHTTP</a>を見てね!<br />
$60ですって!>< 高い。。いかつい。。orz<br />
まーけど、REST、WebSocket、Socket.IO、SignalR、Server-Sentここらへんが結構いい感じに使えるぽいので、<br />
これ一回買えばあとは楽チンになるので、<br />
買って損はなさそうな気しかしてません!!多分ww<br />
(まだ、全然全部見てないし、そんなに使ってないからそこまでまだ言えないww)</p>
</div>
<div class="section">
<h3>BestHTTPってどー?</h3>
<p>んー、実装して思ったのは意外と簡単に導入できた印象です。<br />
WWWとかWebClientとか結局いじらなダメじゃん。。<br />
(UnityWebRequestはまだちゃんと見てないしorz)みたいな感じになるんですが、<br />
さすが、有料ですね!全然スっとそのまま使えましたね。<br />
どんな感じで実装できるかは、<a href="https://docs.google.com/document/d/181l8SggPrVF1qRoPMEwobN_1Fn7NXOu-VtfjE6wvokg/edit#heading=h.qrul62kaqjms" target="_blank">ここ見てね!</a><br />
見た感じ簡単でしょ?カスタマイズもすぐできそうだし、こいつは使えそうだ!!</p>
</div>
<div class="section">
<h3>ちょっと使いやすくしてみた</h3>
<p>いやはや簡単でとてもいいのですが、ちょっと物足りない気がしたので、<br />
よく使うGetとPostを使いやすく且つ可読性高くしたいと思い改良?してみました。<br />
ちょっとUniRxに興味があったので、UniRxのObservableWWW風にしてみた。(とゆーかまんまw)</p><p><script src="https://gist.github.com/ado3s/afe7996d8062b4db65644b5d24b75cbd.js"></script></p><p>うわ。。意外と長くなってもうた。。<br />
まーいーか。<br />
こんな感じで簡単に使えるようにしてみましたー!!<br />
(わかりやすいようにいろいろ端折って簡単に書いてみましたが。実際はもっとごにょってます)</p>
</div>
<div class="section">
<h3>ハマったとこ</h3>
<p>ちょっとまだそこまで使っていないので、特にハマりポイントはまだ来てないですねー。<br />
これからもっといろいろ触ってみたら出てくると思うので、<br />
その時にまたBestHTTPに関して書こうと思いますー<br />
UnityWebRequestもまだちゃんと見てないので、そこ含め書けたら良いなーと。多分書かないなww</p><p>今AssetBundle周りを調べて作ってるので、<br />
次はAssetBundle周りの事かちょっとだけやさしいUnityの続きを書きますー</p><p>ちょっと落ち着いたら一気に連載系は終わらせます><<br />
がんばりマウス。。<br />
ちゅーちゅー</p>
</div>
ado3s
【Unity】ちょっとだけやさしいUnity #2
hatenablog://entry/10328749687195266790
2016-11-28T03:03:36+09:00
2016-11-28T03:03:36+09:00 はい。という事で(どうゆうこっちゃねん)今回はUI作っていきましょうかねー 見た目を作っちゃいましょー!!前回までで、とりあえずUnityをインストールして、Projectを作成して、 Sceneまではできましたね!! そしたらUIを作成していきませう。さて今回のアプリはどんな画面が必要でしょうかね?? 考えていきましょー!! どんな画面が必要? まずはこのアプリでしたいことは・SNSと連携したいですねー ・SNSのフィード(タイムライン)が見たいですねー ・SNSに投稿したいですねーとりあえずはこんな感じですかね!では、上記で考えると必要な画面は、・設定画面 :SNS認証だったりログイン状態…
<p>はい。という事で(どうゆうこっちゃねん)今回はUI作っていきましょうかねー<br />
見た目を作っちゃいましょー!!</p><p>前回までで、とりあえずUnityをインストールして、Projectを作成して、<br />
Sceneまではできましたね!!<br />
そしたらUIを作成していきませう。</p><p>さて今回のアプリはどんな画面が必要でしょうかね??<br />
考えていきましょー!!</p>
<div class="section">
<h3>どんな画面が必要?</h3>
<p>まずはこのアプリでしたいことは</p><p>・<a class="keyword" href="http://d.hatena.ne.jp/keyword/SNS">SNS</a>と連携したいですねー<br />
・<a class="keyword" href="http://d.hatena.ne.jp/keyword/SNS">SNS</a>のフィード(タイムライン)が見たいですねー<br />
・<a class="keyword" href="http://d.hatena.ne.jp/keyword/SNS">SNS</a>に投稿したいですねー</p><p>とりあえずはこんな感じですかね!</p><p>では、上記で考えると必要な画面は、</p><p>・設定画面 :<a class="keyword" href="http://d.hatena.ne.jp/keyword/SNS">SNS</a>認証だったりログイン状態管理画面<br />
・ホーム画面:フィード(タイムライン)画面<br />
・投稿画面 :投稿!!</p><p>の、上記3画面が必要ですね!!</p><p>これらを踏まえて画面を早速作っていきましょー!!<br />
とはいえ、一気にいろいろってのもあれがあれであれなんで、<br />
とりあえず、全体の基本になる下地の画面だけ作っていきましょー!!</p>
</div>
<div class="section">
<h3>UI作成の前に準備しよー!!</h3>
<p>まずは何はともあれ「File」>「Build Settings」を開きませう<br />
そしたら、PlatformがPCになってると思うので、「<a class="keyword" href="http://d.hatena.ne.jp/keyword/Android">Android</a>」を選択して下の「Switch Platform」を押しましょー!!</p><p>はい、切り替えれましたねー</p><p>そしたら次に作業するにあたっての画面の<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A2%A5%B9%A5%DA%A5%AF%A5%C8%C8%E6">アスペクト比</a>を設定しましょー!<br />
「Game」タブを開いてとりあえず縦持ちの画面になるアス比を選択してくださいー<br />
最近、多いので、一旦1080*1920にでもしときましょうかねー。<br />
多分無いので、一番下のプラスボタンから作成してくださいー</p><p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/a/ado3s/20161128/20161128024329.png" alt="f:id:ado3s:20161128024329p:plain" title="f:id:ado3s:20161128024329p:plain" class="hatena-fotolife" itemprop="image"></span></p><p>できたら、こんな感じで指定してね!</p><p>はい、おkそーですねー</p><p>できたら、次にHierarchyにある「Main Camera」をクリックしてInspectorを開いてくださいー<br />
この中のサイズを「960」に変更してくださいー<br />
// 1920(縦サイズ) / 2 の値ですー。(気になったら調べてねw)</p><p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/a/ado3s/20161128/20161128011920.png" alt="f:id:ado3s:20161128011920p:plain" title="f:id:ado3s:20161128011920p:plain" class="hatena-fotolife" itemprop="image"></span></p><p>はい、大まかな下準備はできましたね</p>
</div>
<div class="section">
<h3>UIを作ろー!!</h3>
<p>では、作っていきましょー!</p><p>Hierarchy上で、右クリックして「Create」>「UI」>「<a class="keyword" href="http://d.hatena.ne.jp/keyword/Canvas">Canvas</a>」を押して<a class="keyword" href="http://d.hatena.ne.jp/keyword/Canvas">Canvas</a>を作成して名前を「Base」にリネームしてくださいー<br />
「<a class="keyword" href="http://d.hatena.ne.jp/keyword/Canvas">Canvas</a>」を作成すると「Event Systems」なんてオブジェクトも一緒にできますが、まー気にしないでください。<br />
そしたら、「Base」をクリックしてInspectorを開きましょー</p><p><a class="keyword" href="http://d.hatena.ne.jp/keyword/Canvas">Canvas</a> Componentの<br />
RenderMode を 「Screen Space - Camera」<br />
RenderCamera に Hierarchy上のMainCameraを<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C9%A5%E9%A5%C3%A5%B0%A5%A2%A5%F3%A5%C9%A5%C9%A5%ED%A5%C3%A5%D7">ドラッグアンドドロップ</a></p><p>CanvasScalerの<br />
UI Scale Mode を 「Scale With Screen Size」<br />
Reference Resolution を 「X:1080」「 Y:1920」<br />
Matchを「1」にしてね</p><p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/a/ado3s/20161128/20161128012603.png" alt="f:id:ado3s:20161128012603p:plain" title="f:id:ado3s:20161128012603p:plain" class="hatena-fotolife" itemprop="image"></span></p><p>次に「Base」を右クリックして、「Create」>「UI」>「Image」で作成して、名前を「Body」にリネームしちゃってくださいー</p><p>そしたら、下の方にタブでも作りましょうかねー!<br />
タブにつけるアイコンがほしいので、<br />
<a href="http://www.endlessicons.com/" target="_brank">ここから</a>ダウンロードしちゃいましょ!!</p><p>とれたら「Conn」フォルダに下のイメージのようにフォルダを作成してぶっこみましょー!!</p><p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/a/ado3s/20161128/20161128022839.png" alt="f:id:ado3s:20161128022839p:plain" title="f:id:ado3s:20161128022839p:plain" class="hatena-fotolife" itemprop="image"></span></p><p>ぶっこんだら今度はこのイメージをクリックしてInspectorを開いてね!!<br />
SpriteMode を 「Multiple」<br />
Pixels Per Unit を 「1」にして、SpriteEditorボタンを押してね!<br />
出てきた画面の左上にSliceってのがあるので、特には変更しないで「Slice」してくださいー!!</p><p>おkですかねー。</p><p>そしたら、「Body」で右クリックして「Panel」を追加して「Footer」にリネームしましょー<br />
そしたらその「Footer」で下のイメージみたいにボタン(Button)とボーダー(Image)を配置してね!!<br />
ちょっと考えて作ってみてね♪(べ、別にめんどくなったわけじゃないんだからね!!)</p><p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/a/ado3s/20161128/20161128023608.png" alt="f:id:ado3s:20161128023608p:plain" title="f:id:ado3s:20161128023608p:plain" class="hatena-fotolife" itemprop="image"></span></p><p>とりあえずホーム(フィード)画面と設定画面の切り替えができるであろう感じになりましたね!!</p><p>まーこんな感じでとりあえずベースは出来上がりですね!<br />
このキャンバスがいろんな画面のベースになりますよー!!<br />
ベースができたので、今回は一旦ここまでですかね。</p><p>次は細かくどーゆー出力が必要か見て行きましょう!</p><p>更新頻度なるべく早くできるようにちゃちゃっと作れるようにがんばりマウス<br />
ちゅーちゅー</p>
</div>
ado3s
【Unity】ちょっとだけやさしいUnity #1
hatenablog://entry/10328749687194252710
2016-11-21T00:56:53+09:00
2016-11-21T00:56:53+09:00 第一回の今回はインストールをして、プロジェクトを作って、シーンの作成までやりまっしょい! って感じでちょこちょこ作っていきましょー!! Unityをインストールしよう!! まずは、ここからインストーラをダウンロードしてね。 プラン何種類かあるけど、とりあえず無料のPersonalで遊びましょう!!ダウンロードしたら、インストールしてね! よくやっちゃうのが、Visual Studio Tools、Android Build Support、iOS Build Supportチェックしないで入れちゃうから気を付けて!! インストールが終わってUnityを起動すると、こんな画面が出てくるので、Si…
<p>第一回の今回はインストールをして、プロジェクトを作って、シーンの作成までやりまっしょい!<br />
って感じでちょこちょこ作っていきましょー!!</p>
<div class="section">
<h3>Unityをインストールしよう!!</h3>
<p>まずは、<a href="https://store.unity.com/ja" target="_blank">ここから</a><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A4%A5%F3%A5%B9%A5%C8%A1%BC%A5%E9">インストーラ</a>をダウンロードしてね。<br />
プラン何種類かあるけど、とりあえず無料のPersonalで遊びましょう!!</p><p>ダウンロードしたら、インストールしてね!<br />
よくやっちゃうのが、</p><p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/a/ado3s/20161113/20161113225124.png" alt="f:id:ado3s:20161113225124p:plain" title="f:id:ado3s:20161113225124p:plain" class="hatena-fotolife" itemprop="image"></span></p><p><a class="keyword" href="http://d.hatena.ne.jp/keyword/Visual%20Studio">Visual Studio</a> Tools、<a class="keyword" href="http://d.hatena.ne.jp/keyword/Android">Android</a> Build Support、<a class="keyword" href="http://d.hatena.ne.jp/keyword/iOS">iOS</a> Build Supportチェックしないで入れちゃうから気を付けて!!<br />
インストールが終わってUnityを起動すると、</p><p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/a/ado3s/20161113/20161113230720.png" alt="f:id:ado3s:20161113230720p:plain" title="f:id:ado3s:20161113230720p:plain" class="hatena-fotolife" itemprop="image"></span></p><p>こんな画面が出てくるので、Signinして始めましょー!<br />
上のcreate oneってリンクを押せばアカウント作成ページに飛ぶので、ない人は適当に作ってくださいー。</p>
</div>
<div class="section">
<h3>Projectを作ろう!!</h3>
<p>んじゃー、Projectを作りましょー<br />
Signinしたら右上にあるNEWを押しませう</p><p>今回は<a class="keyword" href="http://d.hatena.ne.jp/keyword/SNS">SNS</a>連携で何となくConnectってイメージなので、<br />
Project name は Conn にしましょう!(センスないとか言わない!)<br />
Locationは好きなところでいいですよー<br />
んで、今回は2Dなので、2Dにして、<br />
右下のCreate projectを押しませう</p><p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/a/ado3s/20161114/20161114015321.png" alt="f:id:ado3s:20161114015321p:plain" title="f:id:ado3s:20161114015321p:plain" class="hatena-fotolife" itemprop="image"></span></p><p>はい!Project作れましたね!!</p><p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/a/ado3s/20161114/20161114015910.png" alt="f:id:ado3s:20161114015910p:plain" title="f:id:ado3s:20161114015910p:plain" class="hatena-fotolife" itemprop="image"></span></p><p>やったね!!</p>
</div>
<div class="section">
<h3>Sceneを作ろう!!</h3>
<p>では、Project作れたので、早速<a target="_brank" href="https://docs.unity3d.com/jp/current/ScriptReference/SceneManagement.Scene.html">Scene</a>を作りましょう!</p><p>まずは下のイメージみたいにAssets下にフォルダを作成してください。</p><p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/a/ado3s/20161114/20161114020355.png" alt="f:id:ado3s:20161114020355p:plain" title="f:id:ado3s:20161114020355p:plain" class="hatena-fotolife" itemprop="image"></span></p><p>作成したらそのフォルダの中に<a target="_brank" href="https://docs.unity3d.com/jp/current/ScriptReference/SceneManagement.Scene.html">Scene</a>を作成します。<br />
右クリックで「Create」>「Scene」で作成したら名前を「New Scene」から「Main」に変更してくださいー</p><p>これで<a target="_brank" href="https://docs.unity3d.com/jp/current/ScriptReference/SceneManagement.Scene.html">Scene</a>の作成もできましたね!!</p><p>とりあえず今回はここまでにしませう。<br />
次回はSwitch Platformだったり<a target="_brank" href="https://docs.unity3d.com/jp/current/ScriptReference/Camera.html">Camera</a>の設定だったりやっていきましょー</p><p>なるべく早めに次回分書きマウス<br />
ちゅーちゅー</p>
</div>
ado3s
【Unity】ちょっとだけやさしいUnity #0
hatenablog://entry/10328749687194255928
2016-11-20T23:06:01+09:00
2016-11-20T23:06:01+09:00 と、いう事で(どうゆうこっちゃねん)ちょっといろいろ思うことがあり、 書籍とかでよくある導入からとりあえずアプリ1本作っちゃお!的なことを書いていこうかと思いマウス。 書籍だけじゃわからないところとかをちょっとでも補完できれば幸いでござる。 タイトルも書籍によくありそうなタイトルにしてみましたw けど、あくまでオレオレスタイルで書いていくので良かったら参考にしてねって感じで見てくださいー あと、こまいところの説明は基本的にしません!!ww (なので、ちょっとだけやさしいにしてますー)あ、環境はWindows10でUnity5.4.2f2(書いてる時最新)でやろうと思いますー 想定対象の方 Un…
<p>と、いう事で(どうゆうこっちゃねん)ちょっといろいろ思うことがあり、<br />
書籍とかでよくある導入からとりあえずアプリ1本作っちゃお!的なことを書いていこうかと思いマウス。<br />
書籍だけじゃわからないところとかをちょっとでも補完できれば幸いでござる。<br />
タイトルも書籍によくありそうなタイトルにしてみましたw<br />
けど、あくまでオレオレスタイルで書いていくので良かったら参考にしてねって感じで見てくださいー<br />
あと、こまいところの説明は基本的にしません!!ww<br />
(なので、ちょっとだけやさしいにしてますー)</p><p>あ、環境はWindows10でUnity5.4.2f2(書いてる時最新)でやろうと思いますー</p>
<div class="section">
<h3>想定対象の方</h3>
<p>Unity始めたor始めたい!書籍を読みだした!ブランクあるからリハビリしたい!<br />
他の人ってどうやって作ってるの?って感じの方たち向け</p>
</div>
<div class="section">
<h3>どんなアプリ作るの?</h3>
<p>ねー、どんなアプリを作りましょうかねー。。<br />
とりあえずゲーム作りたい人がUnity触ってるはずなので、ゲーム作りましょうかねー<br />
うーん、でもこの連載サクッと終わらせたいから何かユーティルなアプリにしようかなー<br />
せっかくこの前<a class="keyword" href="http://d.hatena.ne.jp/keyword/SNS">SNS</a>連携ちょっと触ったから<a class="keyword" href="http://d.hatena.ne.jp/keyword/SNS">SNS</a>連携のアプリでも作りましょうかね。<br />
つぶやいたり、投稿見れたりみたいな、そんなん作りながらやっていきませう。</p>
</div>
<div class="section">
<h3>今回の目標</h3>
<p>アプリを1個作ろう!!</p><p>そしたら下記の事がきっとわかるはず</p><p>・UnityのインストールからどうやってUnityでアプリを作るかがわかるはず<br />
・アセットをUnityに組み込む方法がわかるはず<br />
・<a class="keyword" href="http://d.hatena.ne.jp/keyword/SNS">SNS</a>連携のしかたがわかるはず</p><p>大まかにはこんくらいかな?</p><p>今回はWWWやWebClientとかのネットワーク系は触らないです。<br />
サーバサイドまで含めてやるのはちょっとめんどいのでorz</p><p>とりあえず次回から始めてみよう!そうしよう!!<br />
インストールからプロジェクト作成してシーンを作成までやりませう!</p><p>ブログって自分との戦いでもあるので、がんばりマウス<br />
ちゅーちゅー</p>
</div>
ado3s
【Unity】iTween触ってみた
hatenablog://entry/10328749687193535585
2016-11-10T11:20:38+09:00
2016-11-19T17:07:59+09:00 前に書いたSNS認証周りの時のプロジェクトにiTweenが入ってたので、触ってみたー iTweenとは iTweenはPixel Placementってとこが作ってるアセット。 アニメーションがとても楽に実装できまっせーっていう代物! 大体のさせたいアニメーションのメソッドがあるので、実装するのがとても楽!! 設定値をこっちで適宜変更してあげるだけなので、使い方わかったらとても簡単で感動しマウス。 今回の概要 まー今回2Dなんですが、画面遷移時にアニメーションで画面遷移させたいってことで、使いました。 コンテンツも少なかったので1SceneでベースのCanvasを置いて、 その子要素に複数Ca…
<p>前に書いた<a class="keyword" href="http://d.hatena.ne.jp/keyword/SNS">SNS</a>認証周りの時のプロジェクトにiTweenが入ってたので、触ってみたー</p>
<div class="section">
<h3>iTweenとは</h3>
<p><a target="_brank" href="http://itween.pixelplacement.com/gettingstarted.php">iTween</a>は<a target="_brank" href="http://pixelplacement.com/v3/portfolio/itween-httpyoutu-beqe5hpp4yah4listuue_21dtrvmiy3if0sayabla/">Pixel Placement</a>ってとこが作ってるアセット。<br />
アニメーションがとても楽に実装できまっせーっていう代物!<br />
大体のさせたいアニメーションのメソッドがあるので、実装するのがとても楽!!<br />
設定値をこっちで適宜変更してあげるだけなので、使い方わかったらとても簡単で感動しマウス。</p>
</div>
<div class="section">
<h3>今回の概要</h3>
<p>まー今回2Dなんですが、画面遷移時にアニメーションで画面遷移させたいってことで、使いました。<br />
コンテンツも少なかったので1Sceneでベースの<a class="keyword" href="http://d.hatena.ne.jp/keyword/Canvas">Canvas</a>を置いて、<br />
その子要素に複数<a class="keyword" href="http://d.hatena.ne.jp/keyword/Canvas">Canvas</a>を作って子要素の各<a class="keyword" href="http://d.hatena.ne.jp/keyword/Canvas">Canvas</a>をアニメーションで入れ替えるって感じ。</p>
<pre>ex:)
MainView(<a class="keyword" href="http://d.hatena.ne.jp/keyword/Canvas">Canvas</a>) -> DetailView(<a class="keyword" href="http://d.hatena.ne.jp/keyword/Canvas">Canvas</a>)でiTween.MoveToする感じ
</pre>
</div>
<div class="section">
<h3>Unityにいれよう</h3>
<p><a target="_brank" href="https://www.assetstore.unity3d.com/jp/#!/content/84">UnityAssetStoreからiTweenをインポートしませう。</a><br />
ザ・これだけ!!wwめっちゃ楽!<br />
基本的にnamespaceないし、staticなんで、どこでもiTween.○○で使えちゃうよー。</p>
</div>
<div class="section">
<h3>動きの種類</h3>
<p>移動、回転、拡縮、色、音とかもうホントにいろいろある。<br />
とにかく、いっぱいある。。ホントにそんなにあっても使わんがな!ってくらい。<br />
ちょっとめんどいので、<a target="_brank" href="http://itween.pixelplacement.com/documentation.php">こちらを参照してくださいー。</a><br />
ちなみにEaseTypeの参考は<a target="_brank" href="http://robertpenner.com/easing/easing_demo.html">ここがめっちゃわかりやすくてステキでしたー。</a><br />
</p>
</div>
<div class="section">
<h3>ザ・実装</h3>
<p>実装といってもただ設定値を設定するだけなので、実装ってほどでもないけど、<br />
今回自分が実装した雰囲気を書いてみようかしら。<br />
あくまでこんな感じって程度だけど。<br />
一番上の今回の概要を見てから見てね。</p><p>とりあえず、今回はiTweenのアニメーションは1種類しか使ってないので、<br />
メソッドを後で改修とかやりやすくするためViewUtilみたいなファイルにメソッドを書いた。<br />
んで、画面側Scriptからそのメソッドを呼び出すって感じ。</p>
<pre class="code lang-cs" data-lang="cs" data-unlink><span class="synComment">// ViewUtil.cs</span>
<span class="synType">public</span> <span class="synType">class</span> ViewUtil
{
<span class="synComment">// 画面遷移</span>
<span class="synType">public</span> <span class="synType">static</span> <span class="synType">void</span> ChangeView(
GameObject gObj, Transform parent, <span class="synType">string</span> prefabPath, <span class="synType">string</span> method)
{
var position = <span class="synStatement">new</span> Vector3(-<span class="synConstant">2000f</span>, <span class="synConstant">0</span>);
var view = GameObject.Instantiate(
Resources.Load(prefabPath)
, position
, Quaternion.identity) <span class="synStatement">as</span> GameObject;
view.transform.SetParent(parent, <span class="synConstant">false</span>);
iTween.MoveTo(view, iTween.Hash(
<span class="synConstant">"x"</span>, <span class="synConstant">0</span>,
<span class="synConstant">"y"</span>, <span class="synConstant">0</span>,
<span class="synConstant">"easeType"</span>, <span class="synConstant">"easeOutExpo"</span>,
<span class="synConstant">"delay"</span>, <span class="synConstant">.1</span>,
<span class="synConstant">"oncomplete"</span>, method,
<span class="synConstant">"oncompletetarget"</span>, gObj));
}
<span class="synComment">// 画面遷移後</span>
<span class="synType">public</span> <span class="synType">static</span> <span class="synType">void</span> ChangeViewComplete(GameObject gObj)
{
GameObject.Destroy(gObj);
}
}
</pre><p>とりあえず上記の感じでメソッドを作っておく。</p><p>一応説明すると遷移先<a class="keyword" href="http://d.hatena.ne.jp/keyword/Canvas">Canvas</a>をx=-2000fでInstantiateして、<br />
iTween.MoveToでx=0まで移動させるってことでござる。<br />
(今回横画面でござる)</p><p>Scene上に複数<a class="keyword" href="http://d.hatena.ne.jp/keyword/Canvas">Canvas</a>を出しておきたくないので、<br />
遷移先<a class="keyword" href="http://d.hatena.ne.jp/keyword/Canvas">Canvas</a>をInstantiateして、iTweenで移動させる。<br />
んで、遷移先<a class="keyword" href="http://d.hatena.ne.jp/keyword/Canvas">Canvas</a>が移動完了後(アニメーション終了後)に、<br />
遷移前<a class="keyword" href="http://d.hatena.ne.jp/keyword/Canvas">Canvas</a>をDestroyする。<br />
↓Hierarchy上での感じ</p>
<pre>1.Base
MainView
↓
2.Base
DetailView
MainView
↓
3.Base
DetailView
</pre><p>んで、呼び出し元が、</p>
<pre class="code lang-cs" data-lang="cs" data-unlink><span class="synComment">// MainView.cs</span>
<span class="synType">public</span> <span class="synType">class</span> MainView : MonoBehaviour
{
<span class="synType">void</span> Start ()
{
var btn = transform.FindChild(<span class="synConstant">"DetailButton"</span>).GetComponent<Button>();
btn.onClick.AddListener(ChangeView);
}
<span class="synComment">// 画面遷移</span>
<span class="synType">private</span> <span class="synType">void</span> ChangeView()
{
ViewUtil.ChangeView(
gameObject
, transform.root
, <span class="synConstant">"Prefabs/DetailView"</span>
, <span class="synConstant">"MoveComplete"</span>);
}
<span class="synComment">// 画面遷移完了後</span>
<span class="synType">private</span> <span class="synType">void</span> MoveComplete()
{
ViewUtil.ChangeViewComplete(gameObject);
}
}
</pre><p>呼び出し元はこんな感じでござる。<br />
これでいろんなとこで画面遷移するときはこれ書けばおkなので、楽ですね!<br />
ViewUtilみたいな感じでメソッド書いておけば後々幸せになります。</p>
</div>
<div class="section">
<h3>ハマったとこ</h3>
<p>今回はハマるとこがホントになくてとても簡単に実装できましたー!!<br />
とにかく簡単で、楽させてもらいました!楽な割に実装したら喜んでもらえたので、<br />
こいつは今後もちょいちょいお付き合いさせてもらおうかと思っておりマウスww</p><p>いやー、iTweenとても楽で良いですねー。便利ですね!!</p><p>また何か思いつき次第、書きマウス<br />
ちゅーちゅー</p>
</div>
ado3s
【Unity】Fabric(Twitter Kit)導入のしかた
hatenablog://entry/10328749687193284048
2016-11-08T19:02:45+09:00
2016-12-26T02:10:58+09:00 前回と同じでTwitter認証でログインできるようにしてくれーとのことで、 こっちも対応したので、書いておきマウス。 ※Twitterアプリは既に作成済みの前提で書きます ※Fabric登録も済んでる前提で書きますので、あしからず 今回の概要 Facebookの時と同じでござる。 Twitterアカウントで登録できるサイトがあり、 アプリの方でそのTwitterアカウントを使用して 登録したユーザIDで情報を取ってくる。 Unityに入れよう 今回はFabricでTwitterKitを使用するので、TwitterKitをインポートしませう。 Unityのメニューに「Fabric」ができてると思…
<p>前回と同じで<a class="keyword" href="http://d.hatena.ne.jp/keyword/Twitter">Twitter</a>認証でログインできるようにしてくれーとのことで、<br />
こっちも対応したので、書いておきマウス。<br />
<a href="https://apps.twitter.com/">※Twitterアプリは既に作成済みの前提で書きます</a><br />
<a href="https://get.fabric.io/">※Fabric登録も済んでる前提で書きますので、あしからず</a></p><p></p>
<div class="section">
<h3>今回の概要</h3>
<p><a class="keyword" href="http://d.hatena.ne.jp/keyword/Facebook">Facebook</a>の時と同じでござる。<br />
<a class="keyword" href="http://d.hatena.ne.jp/keyword/Twitter">Twitter</a>アカウントで登録できるサイトがあり、<br />
アプリの方でその<a class="keyword" href="http://d.hatena.ne.jp/keyword/Twitter">Twitter</a>アカウントを使用して<br />
登録したユーザIDで情報を取ってくる。</p>
</div>
<div class="section">
<h3>Unityに入れよう</h3>
<p>今回はFabricでTwitterKitを使用するので、TwitterKitをインポートしませう。<br />
Unityのメニューに「Fabric」ができてると思うので、<br />
そこから「Prepare Fabric」を押して、登録したアカウント情報を入力しましょう。<br />
そんで、<a class="keyword" href="http://d.hatena.ne.jp/keyword/Twitter">Twitter</a>を選択してインポートしマウス。</p>
</div>
<div class="section">
<h3>App情報を設定</h3>
<p>Assetsフォルダ下に「Editor Default Resources」というフォルダがあるので、<br />
「Fabric Settings」を押して<a class="keyword" href="http://d.hatena.ne.jp/keyword/Twitter">Twitter</a>のKeyとSecretを設定しマウス。</p>
</div>
<div class="section">
<h3>ザ・実装</h3>
<p><script src="https://gist.github.com/ado3s/20f98a0052a6d794ed9821add6c901ba.js"></script></p><p>とりあえず、↑の感じで書けばユーザIDとってごにょごにょできマウス。<br />
ちょー簡単ですね!!</p><p>と、見せかけて上の感じだけだと全然動かなかったorz<br />
調べても全然どこにも記載されてなくてだいぶハマったある。。<br />
「Fabric」>「Kits」>「<a class="keyword" href="http://d.hatena.ne.jp/keyword/Twitter">Twitter</a>」>「Runtime」の中の「TwitterInit」を<br />
対象シーンに置いておかないとダメっぽい。(誰か書いておいてくれよ。。)</p><p>TwitterInitをSceneに置いたら動いたー!!!ヤッホーイ!!!<br />
って喜んだら、<a class="keyword" href="http://d.hatena.ne.jp/keyword/iPhone">iPhone</a>で動かなかったorz<br />
なぜじゃー。。と、調べたり、<a class="keyword" href="http://d.hatena.ne.jp/keyword/xcode">xcode</a>でログとったら、<br />
<a class="keyword" href="http://d.hatena.ne.jp/keyword/Twitter">Twitter</a>アプリ側でコールバックURL設定してなかっただけだったwww</p>
</div>
<div class="section">
<h3>ハマったとこ</h3>
<p>・実装したのに、全然動かないやん。。<br />
→対象シーンにTwitterInitを配置</p><p>・TwitterInit置いたのに<a class="keyword" href="http://d.hatena.ne.jp/keyword/iPhone">iPhone</a>で全然動かないやん。。<br />
→<a class="keyword" href="http://d.hatena.ne.jp/keyword/Twitter">Twitter</a>アプリ側でコールバックURLを設定</p><p>くらいかなー</p><p>とりあえず、また何か思いついたら書きマウス。<br />
ちゅーちゅー</p>
</div>
ado3s
【Unity】Facebook SDK導入のしかた
hatenablog://entry/10328749687193273466
2016-11-07T01:57:36+09:00
2016-12-26T02:05:45+09:00 仕事でFacebook認証でログインできるようにしてくれーとのことで、 今回導入してみたので、忘れる前に書いておこう、そうしよう! ※Unityへの導入の仕方なので、FacebookDeveloperでのアプリ作成とかは割愛しマウス。 今回の概要 WebでFacebookアカウントで登録できるサイトがあり、 アプリの方でそのFacebookアカウントを使用して登録したユーザIDで情報を取ってくる 書いてて思ったけど、これログインじゃなくね?ん?ログインか。よくわからなくなってきたw Unityに入れる UnityのAssetStoreからFacebookSDKをインポートしませう。 Faceb…
<p>仕事で<a class="keyword" href="http://d.hatena.ne.jp/keyword/Facebook">Facebook</a>認証でログインできるようにしてくれーとのことで、 <br />
今回導入してみたので、忘れる前に書いておこう、そうしよう! <br />
※Unityへの導入の仕方なので、FacebookDeveloperでのアプリ作成とかは<a href='https://developers.facebook.com/docs/unity/gettingstarted'>割愛しマウス。</a><br />
</p>
<div class="section">
<h3>今回の概要</h3>
<p>Webで<a class="keyword" href="http://d.hatena.ne.jp/keyword/Facebook">Facebook</a>アカウントで登録できるサイトがあり、<br />
アプリの方でその<a class="keyword" href="http://d.hatena.ne.jp/keyword/Facebook">Facebook</a>アカウントを使用して登録したユーザIDで情報を取ってくる<br />
書いてて思ったけど、これログインじゃなくね?ん?ログインか。よくわからなくなってきたw</p>
</div>
<div class="section">
<h3>Unityに入れる</h3>
<p>UnityのAssetStoreから<a href='https://www.assetstore.unity3d.com/jp/#!/content/10989'>FacebookSDK</a>をインポートしませう。 <br />
<a class="keyword" href="http://d.hatena.ne.jp/keyword/Facebook">Facebook</a>だけで良いと思いますが、必要なら適宜Exampleも入れてくださいー <br />
</p>
</div>
<div class="section">
<h3>App情報を設定</h3>
<p>インポート終わったらUnityのメニューに「<a class="keyword" href="http://d.hatena.ne.jp/keyword/Facebook">Facebook</a>」が追加されてるので、 <br />
そこから「Edit Settings」押して、AppNameとAppIdを設定しちゃってくださいー <br />
<a class="keyword" href="http://d.hatena.ne.jp/keyword/Android">Android</a> Build <a class="keyword" href="http://d.hatena.ne.jp/keyword/Facebook">Facebook</a> SettingsのDebug <a class="keyword" href="http://d.hatena.ne.jp/keyword/Android">Android</a> Key Hashが空欄の場合は<br />
OpenSSLいれてから<a href='https://developers.facebook.com/docs/android/getting-started?locale=ja_JP#samples'>ここ見てくださいー</a><br />
結構ハマる人が多い気がする。。というか自分がハマったww </p>
</div>
<div class="section">
<h3>ザ・実装</h3>
<p><script src="https://gist.github.com/ado3s/8d2dffe1c0d34028ea3dd43d81e4553a.js"></script></p><br />
<p>とりあえず、↑の感じで書けばユーザIDとってごにょごにょできマウス。<br />
ちょー簡単ですね!!</p>
</div>
<div class="section">
<h3>ハマったとこ</h3>
<p>・ <a class="keyword" href="http://d.hatena.ne.jp/keyword/Android">Android</a> Debug Key HashがUnityに出てこねーじゃん。。<br />
→ OpenSSLをいれてから <a href='https://developers.facebook.com/docs/android/getting-started?locale=ja_JP#samples'>ここ見てくださいー</a></p><p>・ ユーザIDでDBから情報引っ張れないやん。。<br />
→ WebとNativeで別々で作業していたため、アプリを2個作ってテストしてたので、<br />
ユーザIDが一致しなかったorz</p><p>くらいかなー</p><p>この時に<a class="keyword" href="http://d.hatena.ne.jp/keyword/Twitter">Twitter</a>アカウントで同じことしたので、次は<a class="keyword" href="http://d.hatena.ne.jp/keyword/Twitter">Twitter</a>の導入を書きマウス。<br />
ちゅーちゅー</p>
</div>
ado3s