饂飩コーディング

iOSアプリやら、Unityやら、Cocos2dやらごにょごにょ書いております

HatenaBLog にAmazonのMobile Popoverを設定する

Amazonアフィリエイトの画面でMobile Popoverを選択し設定用のコードをコピーする。
f:id:appdeappuappu:20190120212108p:plain

↓このコードをコピーする
f:id:appdeappuappu:20190120212642p:plain


HatenaBLogの設定→詳細設定タブの「Headに要素を追加」箇所に先ほどコピーしたコードを貼り付ける。
スクロールダウンして「変更」ボタンを押す。
f:id:appdeappuappu:20190120213134p:plain


結構簡単。


スマホでこんな感じに表示されます。
Amazonアフィリエイトを追加したベージでかつそれが表示されたら、下からMobilePopoverがニューっと出てきます。

f:id:appdeappuappu:20190120213708p:plain



ブログで簡単!  アフィリエイト 稼ぐ力をつけるための教科書

ブログで簡単! アフィリエイト 稼ぐ力をつけるための教科書

スロットマシーン2

f:id:appdeappuappu:20190120195642g:plain

まずは実行結果を見てください。
Unity WebGL Player | doubleAnime

前回の記事で数字のオブジェクトを動かす基本を作ったのですが
若干納得いかない動きだったので、以下の点を修正したバージョンです。

1、数字が動き出したら少し動いたら次の数字を動かし始める。
2、動かし始め、停止位置、最終移動地点でのサイズを停止位置で大きく両はしで小さくする。
3、数字の表示範囲を限定する。


実現方法
1について アニメーション レイヤーをそれぞれの数字でそれぞれ作る。
2について アニメーション クリップでサイズの調整を追加する。
3について ステンシルで数字の表示範囲を限定する。


f:id:appdeappuappu:20190120184952p:plain

ステンシルで表示範囲を限定するのは以下の動画を参照。
www.youtube.com

次回はステンシルの記事を書く予定。


Unityゲーム プログラミング・バイブル

Unityゲーム プログラミング・バイブル

UnityではじめるC# 基礎編

UnityではじめるC# 基礎編

Unityで神になる本。

Unityで神になる本。

スロットマシーンを作ってみよう

f:id:appdeappuappu:20181230093933p:plain

スロットマシーンといっても、数字のメッシュを動かして止めるだけの
簡単な部品ですけどね。

まずは動かした結果を。↓こちらから
Unity WebGL Player | Random2

パチンコのデジタル部分とか、スロットマシーンの部品とかに使えそうですが
この部品の作り方を考えた時の変遷を書いてみます。

案1:テクスチャーのオフセットを制御して出目を表現する。
   (↓過去記事)
appdeappuappu.hateblo.jp

案2:大きめの円形オブジェクトの外周に数字のオブジェクトを貼り付けて全体を回転させ、回転角度を制御して出目をコントロールする。
案3:数字のオブジェクトそれぞれを制御して出目をコントロールする。
案4:その他


って感じでどう実現するか検討してた結果、Unityの勉強がてら案3で作ってみることにしました。

おそらく、案1が一番簡単だと思われるのと、制御が楽かな・・・

基本設計
f:id:appdeappuappu:20181230153906j:plain

空オブジェクトに数字のメッシュを子オブジェクトとして五つヒエラルキーひ設定します。
その後に、空オブジェクトにはコントロール用のスクリプトを追加して数字のメッシュそれぞれに
AnimationClipを作成していきます。
Animation Clipは位置Y=0 → 位置Y=-1.5 → 位置Y=-3.0という感じでアニメーションするように
しておきましょう。
それぞれの位置でAnimation Eventを使って遷移フラグを変更したり、スピードを落としたりストップさせたりできるので
設定すれば大枠実装できるはずです。

f:id:appdeappuappu:20181230160132j:plain
こんな感じのジャグ配列をアニメーション時に読み込みながらアニメーション状態変化用のフラグを変更していけば
くるくると数字が回転します。


Unityゲーム プログラミング・バイブル

Unityゲーム プログラミング・バイブル

UnityではじめるC# 基礎編

UnityではじめるC# 基礎編

モデルのポリゴンを削減したい

Blender でUnityようにモデルを作成して出力するんですが、結構ポリゴン数が大きくなっていてUnityでの実行を重たくする可能性がある場合が多々あります。
そこで、今回はテキストの数字をMesh化しそこからポリゴンを減らしていきましょう。

1、Textで数字の8を入力し、Exclude 0.2 Bevel 0.04で厚みとベベルをつける。
f:id:appdeappuappu:20181213132956p:plain
f:id:appdeappuappu:20181213132948p:plain
2、Mesh化する Alt + C で Mesh From Textを選択
f:id:appdeappuappu:20181213134002p:plain
3、MeshのFace数が964になっています!!!減らしていきましょう。
f:id:appdeappuappu:20181213140849p:plain
4、まずは、平面が無駄に分割されている場合にFaceを減らす為に
 Mesh → Clean UP → Limited Dissolve
 f:id:appdeappuappu:20181213141106p:plain
5、Face数502半分近くに削減するできましたが、さらに減らしていきましょう
f:id:appdeappuappu:20181213141257p:plain
6、側面をAlt + Controlを押しながらエッジをクリックしてリング選択してください。
ぐるっと一周選択してみましょう。
7、Select → Checker Deselectで一つおきに非選択し
結果として一文字側面のエッジを均等に半分選択した事になりました。
f:id:appdeappuappu:20181213141343p:plain
f:id:appdeappuappu:20181213141405p:plain
f:id:appdeappuappu:20181213141427p:plain

8、選択したエッジを削除します。xキー → Edge Loop 
これで側面のエッジが半分に削減されました!
f:id:appdeappuappu:20181213141445p:plain

9、あとは穴の中とその入り口、各5箇所に同じ処理を施すと
Face数231まで削減!あとはお好みもっと減らすなり可能。
f:id:appdeappuappu:20181213141504p:plain

Blender 3DCG モデリング・マスター

Blender 3DCG モデリング・マスター

やわらか3DCG教室 Blender

やわらか3DCG教室 Blender

Blender 3Dキャラクター メイキング・テクニック

Blender 3Dキャラクター メイキング・テクニック

UnityにBlender作成のモデルを出力する。(備忘録的な)

大まかな手順
Blender
1、モデリングする
2、中心点を重心(質量ベース)に変更する。
Object → Transform → Origin center of Mass (Volume)
f:id:appdeappuappu:20181213122446p:plain
3、Rotation Scale を確定させる。
Ctrl + A で Apply Rotation and Scale
f:id:appdeappuappu:20181213123904p:plain
4、FBXでExportする
File → Export → FBX (.fbx)
f:id:appdeappuappu:20181213124109p:plain

書き出しオプションは下の感じで!
UnityとBlenderでは空間座標の方向が違う為にこのように
設定します。
f:id:appdeappuappu:20181213125323p:plain


Unity側
1、Import New assetsで読み込む
f:id:appdeappuappu:20181213130004p:plain



やわらか3DCG教室 Blender

やわらか3DCG教室 Blender

Shaderで透明部分を抜いたり、動きを持たせたりする

f:id:appdeappuappu:20181203215314p:plain
透明抜きパターン

↓まずは実行結果↓こちらをクリック
Unity WebGL Player | Learn_Shader


テクスチャーの画像ファイルに透明化部分を作成して、その部分を抜くようにShaderで実現する
3パターンを考えて見ました。



左(青) "Queue"="AlphaTest" パターン
PNGファイルで透明部分を作成して使うことができますが、Unityでは古い方法なので推奨はされていません。



中(赤) Vertex Shader でClipするパターン
フラグメンテーション処理部分で、透明化されている部分をClip関数で抜く方法。
Unityでは現在この方法がよく使われていると思われる。



右(緑) "Queue" = "Transparent" パターン
Photoshop等でアルファマスクを作成してそのアルファマスクを使って抜く場合はこちらでOK



右下の蝶はVertex ShaderでPanelを動かして、羽を羽ばたかせてそこにテクスチャーをつけています。
ParticleSystemにこのShaderを使って飛ばして見ました。

Vertex Shader Butterfly

Shader シェーダー なんぞをいじってみる。

Shader?なーんとなくわかってるようでわかっていない自分の為に書きながらまとめてみます。

じゃ、マテリアルとシェーダーってどう違うの?ってとこからなんだけど
「マテリアルという便利な道具箱に入っている一つのツールがシェーダーである。」
という個人的な理解にしています。
もちろん、シェーダー 以外にもマテリアル道具箱にはテクスチャーとかも含まれています。

f:id:appdeappuappu:20181129113445p:plain
シェーダーってなんなの?


シェーダーってどう使うの?
まずは、Unityでどう使われているのか実際に使ってみるところから始めてみます。
1、http://www.shaderslab.com/demo-41---animated-flag.htmlを眺めて何ができるのか確認して見ましょう。
2、UnityでShaderとMaterialを新規作成し、共に「Flag」という名前に変更しておきます。
3、Assetにカナダ国旗を追加する。
↓カナダ国旗
f:id:appdeappuappu:20181129114601p:plain
↓2、3で取り込み作成結果
f:id:appdeappuappu:20181129120324p:plain
4、panelを一つシーンに追加する。
5、Flag(Material)のInspectorからFlag(Shader)を選択する。
↓5、での設定(ShaderをMaterialにドラッグしてもいい)
f:id:appdeappuappu:20181129120818p:plain
6、http://www.shaderslab.com/demo-41---animated-flag.htmlのソースをコピーして、Flag(Shader)をダブルクリックしてコードエディター上で開き、丸っとペーストしてしまう。(全置き換えでok)
7、Flag(Material)を4で作ったPanelに適応する。
8、上記PanelのInspector内MaterialコンポーネントのパラメータでSpeed,Frequency,Amplitudeを調整する。
9、Flag MaterialのInspectorで再生ボタンを押すと、SceneViewで実行結果を見ることができる。
f:id:appdeappuappu:20181129120032p:plain

↓下のリンクをクリックして実行結果をご覧ください
Unity WebGL Player | ShaderTest3


Unityでオブジェクトの変形はShaderでの出来るって事だと分かったけど
Shaderでの変形ってあくまでも見え方だけのようで、Mesh自体が変形している
訳ではないのでもちろんMeshColliderも変形していないと思われますのでご注意を!


Shaders Laboratoryは製作者さんがチュートリアルとして使ってくださいとの記述をされていましたので使用させていただきました。