Mtk's Blog

2015年7月18日土曜日

[Unity3D] 二つのscene(シーン)を一つにまとめる方法

How to merge multiple scenes
ゲーム開発ツール・Unity3D(以下Unity)はscene(シーン)という単位でゲームを作ります。
カメラやスクリプトなどは全てsceneの中に定義します。
sceneは複数作ることができ、ゲーム開始はいずれか一つのsceneをロードするように定義します。
スクリプトを使うとゲーム実行中のsceneに他のsceneをロードすることができるので、その方法をまとめてみました。

環境

・Windows8.1
・Unity 5.1.0
・Visual Studio Tools for Unity (Unity付属のMonoDevelopでも可)

使用するアセット

検証用に著作権が緩めのユニティちゃんとクエリちゃんのアセットを使います。
ユニティちゃんは公式サイトから、クエリちゃんはアセットストアからダウンロードしました。

1つ目のsceneを作る

Unityで新しいプロジェクトを作ると空(から)のsceneの編集からはじめることになります。
このsceneにユニティちゃんを配置してscene01という名前で保存します。

File - Build Settings
を開いてAdd Currentボタンをクリックします。

Scenes In Buildにscene01が追加されました。

2つ目のsceneを作る

2つめのsceneはメニューの
File - New Scene
で作ります。
空のsceneの編集が出来るようになるのでクエリちゃんを配置します。
scene02という名前で保存します。

File - Build Settings
を開いてAdd Currentボタンをクリックします。

Scenes In Buildにscene02が追加されました。

1つ目のsceneのスクリプトを作る

で一つ目のsceneに戻ります。
File - Open Scene
を開いてscene01を選択します。

二つのsceneをまとめるのはスクリプトで行います。
C#のスクリプトを追加して、MergeScenesという名前のファイルを追加します。

このスクリプトファイルをダブルクリックするとVisual Studioが起動してC#のスクリプトを編集することになります。
sceneをまとめるタイミングですが、今回はゲーム起動時に1回だけまとめる仕様にします。
スクリプトは次の通りです。

using UnityEngine;

public class MergeScenes : MonoBehaviour {
    void Start() {
        Application.LoadLevelAdditive("Scene02");
    }
}

このスクリプトをsceneのカメラにアタッチします。
AssetsウィンドウのMergiScenesのアイコンをHierarchyウィンドウのMain Cameraにドラッグ＆ドロップします。
アタッチされるとMain CameraのInspectorにMerge Scenes(Script)が追加されます。

実行する

実行するとこうなります。

配置のバランスが悪かったりユニティちゃんのスクリプトをオフにしてなかったりでおかしく見えますが、ユニティちゃんとクエリちゃんが一つのsceneにまとめて表示されました。

手作業で複数のsceneをまとめるのは骨の折れる作業ですが、スクリプトなら1ステートメントで済みました。
ゲーム用のsceneにUI用の平行投影のsceneを別々に作って実行時にまとめるような使い方も良さそうです。

2015年7月11日土曜日

[SEO] ブログのPocket(あとで読むサービス)への登録数を調べる方法

How to regist Pocket (Read It Later)
2015年6月、WebブラウザーのFirefoxが38.0.5にバージョンアップされPocketというあとで読むサービスの機能が統合されました。

サイト運営者は自身のサイトに限られますがPocketにどれくらい登録されているか知ることが出来ます。
それまでの手順をまとめてみました。

Pocketにユーザー登録する

https://getpocket.com/signup?ep=4
からPocketにユーザー登録します。

自分のサイトを登録する

ユーザー登録後、いきなりサイトの登録画面が表示されました。

この画面で自分のサイトについて次の項目を入力します。

Site URL
Site Name
Site Twitter Account
Your First Name
Your Last Name
Your Title
Work Email

あとでサイトの登録画面を表示する場合はPocketのWebサイトの画面下の方にある「Publishers」か「出版者向け」のリンクをクリックします。

自分がサイトの所有者であることを証明する

次のVerify Your Siteで自分のサイトの所有者であることをPocketに証明します。
証明する方法は

Pocketが指定したファイルをサーバーにアップロードする (Upload a File)
Pocketが指定したmetaタグをHTMLに記述する (Add a Meta Tag)

の2種類です。
今回はblogspotでも可能なmetaタグを記述する方法にしました。

自分のサイトにmetaタグを追加する

blogspotは管理画面の
テンプレート - HTMLの編集
からmetaタグを追加することが出来ます。

Verify Siteを実行する

metaタグの追加が済んだらPocketの出版者向けの管理画面に戻って「Verify Site」をクリックします。

metaタグに間違いながなければSuccess!と表示されます。

これで設定完了です。

Pocketへの登録状況を見る

Pocketへの登録状況は出版者向けのページから照会できます。
http://getpocket.com/publisher/pending?p=chk

どんな内容が注目されているか参考になります。

サイトの追加方法

Pocketサイトの下の方の「Publishers」か「出版者向け」のリンク先の画面の左上のドロップダウンリストがあります。
このAdd New Siteからサイトを追加できます。

おまけ・blogspot(blogger.com)にPocketボタンを追加する

Pocket機能が統合されてないブラウザーのユーザーのために、WebサイトにPocketボタンをウィジットとして追加することが出来ます。

blogspotは管理画面の
テンプレート - HTMLの編集
を開いてHTMLテンプレートを編集します。
下記の通り全部で3箇所に追記するとブログにPocketボタンを追加できます。

</body>タグの直前に次のコードを追加します。

<div>
<script type="text/javascript">!function(d,i){if(!d.getElementById(i)){var j=d.createElement("script");j.id=i;j.src="https://widgets.getpocket.com/v1/j/btn.js?v=1";var w=d.getElementById(i);d.body.appendChild(j);}}(document,"pocket-btn-js");</script>

<data:post.body />
という行が2カ所あるはずなので、その直下または直前に次のHTMLを追記します。

<div>
<a data-pocket-label="pocket" data-pocket-count="horizontal" class="pocket-btn" data-lang="en"></a>
</div>

2015年7月4日土曜日

Live2Dを使ってみました

What is Live2D
2015年6月、Live2D alive2015を見学してきました。
場所は品川のソニーコンピューターエンターテイメント。

Live2Dは使ってみたいけど使い方がよく分からないソフトの一つだったのですがこれを機会に使ってみました。
ちなみにalive2015の内容はコンテストの授賞式と既にLive2Dを活用しているCGの専門家向けに新しいバージョンはこうなりますよ、というものでした。

Live2Dとは

2次元の画像を擬似的に立体化して3次元CGのように動かすことが出来るCG作成ソフトです。
Cubism SDKを使うとLive2Dで作成したしたアニメーションデータをUnity、Android、iOSなどのアプリに組み込むことが出来ます。
Live2Dのエディターは次の2種類があります。

Live2D Cubism Modeler
2次元の画像から疑似3次元のモデルを作ってデフォーマとパラメータを定義するエディター
3次元CGで例えると、Live2Dのデフォーマはボーンでパラメータはモーフのような機能です。
Live2D Cubism Animator
モデルとパラメータを使ってモーションをつけ、動画に書き出したりアプリ用のデータなどを出力するエディター

alive2015では2次元の画像を3次元のfbxデータに貼り付けて前面も背面もCGとして扱えるLive2D Euclidも紹介されてました。Euclidの公開は当分先のようです。(一般ユーザーが使えるのは来年以降？)

モデルの作成

モデルは2次元の画像から作成するのですが、動かしたいパーツ毎に画像が分かれている必要があります。
チュートリアル用のシンプルちゃんでこれだけ分かれてます。

さらに各パーツをデフォーマに合せて擬似的に3次元化する作業が必要です。
画像のパーツ毎に頂点を指定してデフォーマとパラメータで動きを定義していきます。
この作業は3次元CGでボーンやモーフを設定できるくらいのセンスが必要だと思います。
著作権フリーの画像データをLive2Dで動かしてみたい、と気軽に考えていたのですが自分が考えていたほど簡単ではありませんでした。

アニメーションの作成

作成したモデルはAnimatorでアニメーションさせることが出来ます。
こちらはとても使いやすいソフトです。MikuMikuDanceや動画編集ソフトでキーフレームを打ったことがある人ならすぐに使えると思います。

実際に作ってみたのがこちら。GIFアニメーションなのでPCで見ないと動かないかもしれません。

元はほぼ左右対称の平べったい画像ですが、首を曲げているようなアニメーションが簡単に出来ました。

FREE版ユーザーに立ちはだかる制限

Live2Dのエディターは無料で使えるFREE版があります。
Cubism Editor PRO/FREE 機能比較
http://www.live2d.com/download/comparison

Live2Dの公式サイトで公開されている完成済みのモデルデータをCubism Animatorで使うことも出来るのですが、FREE版では扱えるモデルデータに制限があります。
たとえばユニティちゃんモデルを使ってAnimatorで扱おうとすると

FREE版で追加できるパラメータ数の制限30個を超えています。

Modelerでこのユニティちゃんのパラメータを削除して保存しようとすると

FREE版で使用できるデフォーマ数の制限50個を超えています。

デフォーマは3次元CGで言うボーンやモーフのようなもので、これを削除するとアニメーションが破綻してしまいます。
パラメータの削除により使われなくなったデフォーマだけ削除という機能も見当たりません。
FREE版だけで済まそうとするのは無茶な話ですがそれでもFREE版で使いたいならデフォーマを減らしてください。

どんなユーザーなら活用できるのか？

Live2Dはキャラクターの2次元の画像からアニメーションを作成する特化したソフトです。
ただし用意する画像はパーツ毎に分かれている必要があります。そのパーツもただ分かれていればいいわけではなく、Live2Dの仕様にあわせてマスキングも考慮しなければなりません。
さらにデフォーマとパラメータの設定が必要などハードルは高めです。
とはいえ自分は今まで様々な制約の中で紙芝居のようなアプリしか開発できなかったわけですが、Live2Dならスムーズなアニメーションで動くアプリを開発できると考えています。

2015年6月27日土曜日

[電子工作] 車載用オーディオのノイズを除去する (イレギュラーなグランドループ対策)

How to remove the ground loop noise
自動車で音楽を聴くためにウォークマンを使ってます。最近故障したので買い換えました。

そのウォークマンを車載オーディオのAUX端子につなげるために、ウォークマン専用LINEOUT端子付カーチャージャーという製品を使っています。
※WM-PORT付きのモデルにのみ使えます。

(使い始めてすぐに皮膜が裂けたのが社外品の悲しいところ)
エンジン(ACC)のオン・オフに合わせてウォークマンが再生・停止し、充電も出来る便利なアクセサリーです。
ただし自分が買った製品は大きな欠点があり、エンジンの回転数に合わせてオーディオにノイズが乗ります。
グランドループという現象らしいのですが当時はそんな知識はなく電源を細工してノイズを除去しました。
そのときの方法をまとめてみました。

原因を推測する

知識が無いなりに原因について考えます。
ウォークマンにカーチャージャーをつなげてオーディオを再生すると、エンジンの回転数が上がるとノイズが大きくなりノイズ音も甲高くなります。
この現象からノイズはオルタネーター(発電機)の電圧変化か電磁波によるものと仮定しました。
一方、ウォークマンにカーチャージャーをつなげなければノイズは全く再生されません。
この現象から原因の第一候補を電圧変化に絞りました。

電子工作で電源を定電圧化してみる

自分が使っているカーチャージャーはシガーソケットから電源をとるタイプです。
シガーソケットから出力される電圧は12Vですが実際にはオルタネーターの回転数によって12Vを超えたり、時には12Vを下回ったり小刻みに変動しています。
そこで定電圧レギュレーターを使ってカーチャージャーに供給する電源を定電圧化することにしました。
定電圧レギュレーターはその名前の通り、電源を与えると一定の電圧を出力してくれる半導体です。

定電圧レギュレーターの仕様によっては抵抗・ダイオード・コンデンサなど別の電子部品が必要な場合があります。データシートで確認してください。
電子工作マガジンやエレキジャックに電子部品を取り扱ってる全国のお店が載ってるので、最寄りのお店を探して買いに行きました。

定電圧化でノイズがなくなった

定電圧レギュレーターと必要な部品を組み立てます。
電子回路の知識がない上に正しい半田付けの方法も知らないのですが売り物ではないのでよしとします。
電源の入力は自動車のACCとボディアースからとり、メス型シガーソケットに出力しました。

発光ダイオードが付いてますが通電確認用のためで必須ではありません。
組み上がったらサーキットテスターでショートしてないか調べて、乾電池で正常に動作するか確認します。
乾電池なら万が一不具合があっても大事に至らないと思います。
電源を低電圧化した結果、10Vの定電圧レギュレーターでノイズの除去ができました。
ちなみに5Vの定電圧レギュレーターでも除去できたのですが、ウォークマンが充電されませんでした。

グランドループ対策はアイソレーショントランスを使うのが一般的

上の方でも書きましたが、ノイズの本当の原因はグランドループだったようです。
グランドループ対策にはアイソレーション(絶縁)トランスを使うのが一般的のようです。
ただ、ステレオの場合は1個数百円のアイソレーショントランスが二つ必要のようで、結果的に定電圧レギュレーターの方が安上がりでした。
とはいえ電源の細工はショートや感電のおそれがあるのでアイソレーショントランスの方が安全です。

ウォークマンに限らずiPodや携帯型メディアプレイヤーを車載してグランドループノイズが発生したら同じ方法で除去できると思います。

2015年6月20日土曜日

MikuMikuDanceのガラスが透けない時の対処方法

How to correct the transparent parts
CG動画作成ソフトのMikuMikuDance(以下MMD)は、ゲーム開発ツールのUnityなどと異なる点が多々あります。
特にガラスなどの透過を表現する時は設定が必要な場合があります。
透過の表示が異常な場合の対処方法をまとめてみました。

環境

・Windows8.1
・MMD 9.10

モデル名の表記について

MMDのモデル名の表記は「○○式□□」とします。
○○はモデルデータの作者名、□□はモデルデータのキャラクター名です。

アクセサリーの透過設定

Lat式初音ミクにA01hudebako式メガネをかけさせてみました。
初音ミクは拡張子がpmd(pmx)のモデルデータで、メガネは拡張子がxのアクセサリーです。レンズが透けません。

角度を変えるとレンズの向こうにメガネのツルや座標軸が見えています。

対処方法はメニューの
背景 - アクセサリ編集
を開きます。

「1番目より後の･･･」の設定を「0番目より後の･･･」に変更します。

これで正しく表示されました。

MMEが正しく表示されない場合もこの設定で表示されることがあります。

モデルの透過設定

マシシ式MEIKOを自動車(hata式ソアラ)に乗せました。
MEIKOも自動車も拡張子がpmdまたはpmxのモデルデータです。
自動車のガラスが透けないのでおかしなことになっています。

対処方法はメニューの
背景 - モデル描画順
を開きます。

MEIKOのモデル描画順が自動車より上になるように設定してOKをクリックします。

これで正しく表示されました。

透過パーツを持つモデルは描画順を出来るだけ下に設定すると正しく表示されます。

2015年6月13日土曜日

[ASP.NET] ポストバック処理で実行するJavaScriptを選ぶ方法

How to control running JavaScript after PostBack
ASP.NETはポストバック処理からWebページのJavaScript関数(function)を直接実行する機能はないようです。
それでもJavaScriptの関数を実行するタイミングをポストバックで制御したかったのでどうにかしてみました。

環境

・Windows8.1
・Visual Studio Community 2013
・C#

どうするか？

次の処理を自分で作りました。

ASP.NETのポストバック処理はJavaScriptを実行したタイミングで画面上のラベル(<span>タグ)を特定の内容に変更する
JavaSriptはラベルの表示が特定の内容になったら実行するように監視し続ける

ASP/NET Ajaxでラベルの内容を変化させた場合の監視漏れがないように、JavaScriptは再帰呼び出しによる無限ループで監視します。
ラベルはユーザーに見せる必要が無いのでスタイルシートで非表示に設定します。

ソース

JsFromCSharp.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JsFromCSharp.aspx.cs" Inherits="CoreTweetApp.JsFromCSharp" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>JavaScript from C#</title>
    <!-- (1)非表示設定のスタイルシート -->
    <style type="text/css">
        .hidden {
            display: none;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <!-- (2)スタイルシートで非表示設定のラベル -->
            <asp:Label ID="Label1" runat="server" Text="Label" CssClass="hidden"></asp:Label>
            <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
        </div>
    </form>
    <script>
        //(3)ラベルの内容を監視し続けるJavaScript
        (function () {
            function Oversee() {
                var target = document.getElementById("Label1");
                switch (target.innerHTML) {
                    case "Show Alert":
                        alert("JavaScript from C# !");
                        target.innerHTML = "";
                        break;
                }
                setTimeout(Oversee, 100);
            }
            Oversee();
        }());
    </script>
</body>
</html>

JsFromCSharp.aspx.cs

using System;

namespace CoreTweetApp {
    public partial class JsFromCSharp : System.Web.UI.Page {
        protected void Page_Load(object sender, EventArgs e) {

        }

        protected void Button1_Click(object sender, EventArgs e) {
            //(4)ラベルの内容を書き換える
            Label1.Text = "Show Alert";
        }
    }
}

画面を開いただけでは何も起きません。
ボタンをクリックするとポストバックされた後、JavaScriptが実行されます。

とても強引な気がしますが、JavaScriptでしか実行できないライブラリーを使うなど、やむを得ないときには効果あると思います。

2015年6月6日土曜日

[ASP.NET] 動的に追加したイベントが動作しない

How to keep additional events after PostBack
ASP.NETでユーザーの操作によって画面にボタンを追加するアプリを作ったときに悩んだ内容をまとめました。
ボタンをクリックしたら新しいボタンを画面に追加するアプリを作ったのですが、新しいボタンのイベントが実行されません。

環境

・Windows8.1
・Visual Studio Community 2013
・C#

イベントが動作しない例

1. Button1をクリックすると新しいボタンを追加する
2. 新しいボタンをクリックするとラベルの文字を変化させる
というWebアプリを作ろうとして失敗した例です。

DynamicControls.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DynamicControls.aspx.cs" Inherits="CoreTweetApp.DynamicControls" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>DynamicControls.aspx</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
        <asp:Button ID="Button1" runat="server" Text="Button" />
    </div>
    </form>
</body>
</html>

DynamicControls.aspx.cs

using System;
using System.Web.UI.WebControls;

namespace CoreTweetApp {
    public partial class DynamicControls : System.Web.UI.Page {
        protected void Page_Load(object sender, EventArgs e) {
            Button1.Click += new EventHandler(Button1_Click);

        }

        private void Button1_Click(object sender, EventArgs e) {
            Button newButton = new Button();
            newButton.Text = "New Button";
            newButton.Click += new EventHandler(NewButton_Click);
            form1.Controls.Add(newButton);
        }

        private void NewButton_Click(object sender, EventArgs e) {
            Label1.Text = "new Button がクリックされました";
        }

    }
}

DynamicControls.aspx.designer.cs

//コメントは省略
namespace CoreTweetApp {
    public partial class DynamicTextBox {
        protected global::System.Web.UI.HtmlControls.HtmlForm Form1;
        protected global::System.Web.UI.WebControls.Button Button1;
        protected global::System.Web.UI.WebControls.Label Label4;
        protected global::System.Web.UI.WebControls.Label Label3;
        protected global::System.Web.UI.WebControls.Label Label2;
        protected global::System.Web.UI.WebControls.Label Label1;
    }
}

実行するとこうなります。

Button1をクリックすると新しいボタンが追加されるまではいいのですが

新しいボタンをクリックしても期待通りに動作しません。

修正後

[HOWTO] Visual C# .NET を使用して ASP.NET で動的にコントロールを作成する方法
http://support.microsoft.com/kb/317794/ja
によると
OnInit イベントハンドラまたは Page_Load イベントハンドラで、作成したコントロールをコントロールコレクションに追加する必要があります。
とのことです。

上のソースで期待通りに操作しなかった原因は、動的に追加するボタンをOnInitイベントやPage_Loadイベントで追加しなかったためです。

新しいボタンを追加する処理をPage_Loadイベントで発生させるように修正します。
ただし、ASP.NETはイベントごとにポストバックが発生し、OnInitイベントやPage_Loadイベントが処理されます。
Button1をクリックしたときだけPage_Loadで新しいボタンを追加するように工夫します。

ボタンのUseSubmitBehaviorプロパティをFalseに設定すると、ポストバックした際Page_LoadイベントのRequest["__EVENTTARGET"]にボスとバックさせたボタンのIDが設定されます。

というわけで
・ボタンの追加をPage_Loadイベントで処理
・ボタンのUseSubmitBehaviorをFalseに設定
に修正したのが次のソースです。

using System;
using System.Web.UI.WebControls;

namespace CoreTweetApp {
    public partial class DynamicControls : System.Web.UI.Page {
        private const string NEW_BUTTON_ID = "NewButton";

        protected void Page_Load(object sender, EventArgs e) {
            //ポストバックを発生さたのは
            //Button1または新しいボタンか？
            if ((string)Request["__EVENTTARGET"] == Button1.ID
            || (string)Request["__EVENTTARGET"] == NEW_BUTTON_ID) {
                Button newButton = new Button();
                newButton.Text = "New Button";
                newButton.Click += new EventHandler(NewButton_Click);
                newButton.ID = NEW_BUTTON_ID;        //追加
                newButton.UseSubmitBehavior = false; //追加
                form1.Controls.Add(newButton);
            }

            Button1.UseSubmitBehavior = false;      //追加
            //Button1.Click += new EventHandler(Button1_Click);   //削除

        }

        //新しいボタンを追加する処理はPage_Loadに移動
        //private void Button1_Click(object sender, EventArgs e) {
        //}

        private void NewButton_Click(object sender, EventArgs e) {
            Label1.Text = "new Button がクリックされました";
        }

    }
}

これで期待通りに動作しました。

まとめ

動的に追加したイベントはポストバック後のPage_Loadより後に発生します。
動的にコントロールを追加する場合はポストバックの前と後に画面に配置するように工夫すればすればいいと思います。

※ボタンを配置して生成されるHTMLタグはUseSubmitBehaviorプロパティが
Trueの場合は<input type="submit">
Falseの場合は<input type="button"> とonclickイベントのJavaScript
に変わります。プロパティ名通り振る舞いが変わるのでリファクタリングするときは要注意です。

新アプリケーション

2015年7月18日土曜日

環境

使用するアセット

1つ目のsceneを作る

2つ目のsceneを作る

1つ目のsceneのスクリプトを作る

実行する

関連ブログ

2015年7月11日土曜日

Pocketにユーザー登録する

自分のサイトを登録する

自分がサイトの所有者であることを証明する

自分のサイトにmetaタグを追加する

Verify Siteを実行する

Pocketへの登録状況を見る

サイトの追加方法

おまけ・blogspot(blogger.com)にPocketボタンを追加する

関連ブログ

2015年7月4日土曜日

Live2Dとは

モデルの作成

アニメーションの作成

FREE版ユーザーに立ちはだかる制限

どんなユーザーなら活用できるのか？

関連ブログ

2015年6月27日土曜日

原因を推測する

電子工作で電源を定電圧化してみる

定電圧化でノイズがなくなった

グランドループ対策はアイソレーショントランスを使うのが一般的

関連ブログ

2015年6月20日土曜日

環境

モデル名の表記について

アクセサリーの透過設定

モデルの透過設定

関連ブログ

2015年6月13日土曜日

環境

どうするか？

ソース

関連ブログ

2015年6月6日土曜日

環境

イベントが動作しない例

修正後

まとめ

関連ブログ