technical | ユガラボ

【VRChat】自作ワールド作りました！いろいろメモ(作業手順、UdonSharp、軽量化など)

ユーリ — Fri, 30 Sep 2022 10:15:05 +0000

こんにちは、ユーリです。最近VR端末のMeta Quest2を買いまして、VRにはまってます！
特にVRChatが楽しくてアバター作ったり色々してたのですが、ついにワールドも作りました。大変だったところなどをまとめました。

VRChatの紹介(軽く)

ワールドの土台作成

家具と小物の配置

UdonSharp製ギミックをつくる

ギミックの同期問題

仕上げ(軽量化とライトベイク)

VRChatの紹介(軽く)

VRChatとは、バーチャル空間上でアバターを着て他の方とおしゃべりできるツールです！

アバターは配布されているものもありますが、自作の3Dモデルをアップできるので非常に自由度が高く、人型はもちろんケモノでも触手でもなんにでもなれちゃうのがすごいところ。
楽しむために頭にかぶるようなVR機器が必要だと勘違いされがちですが、デスクトップPCでもモニタに映してプレイできます。(ただし没入感は得にくいです)

自分オリジナルの場所として「ワールド」を作って思い通りの景色に降り立つこともできるし、スクリプトを書いてギミックを置いたりもできます。
ゲームというよりソーシャルプラットフォームに近いものですが、VRならではの臨場感からあたかもその場にいるような感覚があり、好きな見た目になって好きなところへ行けるが魅力。
近い未来、バーチャル空間で暮らせるようになったらこんな感じなのかも。ギミックが作り込まれているワールドではゲームっぽい遊びもできちゃう！

ちなみにわたしはこのアバターをつかってます。

VRoidStudioというアバター制作ツール(無料)と、モデリングソフトのBlender(無料)による小物追加で自作しました！
わたしは3Dモデリングは得意なほうではありませんが、今は便利なツールがたくさんあるので専門的な技術がなくても比較的とっつきやすかったです！もしVRで見かけたらお気軽に絡んでください。

自作ワールド紹介

そして今回わたしが自作したワールドはこちら！「Cafe & Bar 宵星」です。

後述しますが、弓矢を使って夜空に星を打ち上げ、星座を作って遊べるギミックがあります。これがこのワールドの目玉！

たくさん星を打ち上げればカラフルになってにぎやかです。

カフェスペースではスイーツが食べ放題です。くつろげるスペースも置いてみました。

Barコーナーはいい感じのシーリングファンライトがまわってます。影で雰囲気をだしてる。

最近話題の画像生成AIでつくったアートを飾ったりもしてます。こういうのを配置するだけでもなんとなく見栄えがよくなるから助かる。

ご興味がある方はVRChatのアカウントがあればこちらのリンクからワールドを開けますので是非あそんでみてください！QUESTも対応してます。

以下、ワールド作成にあたり行った作業を紹介していきます。作業開始から2週間くらいでできたけど、めっちゃ楽しくて仕事と食事以外ずっとワールド作ってました。全作業合計で40~50時間くらいやった気がする。
※あくまでもわたしなりのやり方ですので参考までに！

ワールドの土台作成

Blenderで床や柱をつくる

今回のワールドはおうち+庭的な構成にするつもりでしたが、細かいレイアウトはぜんぜん考えてなかったので作りながら雰囲気で組み立てました。
床と柱部分を作ってからUnity上で配置しながら作る方向で進めます。
まずBlenderでただの立方体を作り…、

ネット上で拾ってきたフリー素材のテクスチャを貼ります。(テクスチャの貼り方はググってください)そして縦サイズを縮めて平べったくつくれば「床」の完成です。
誰がなんと言おうと床タイルです。いいですね？

同様に細長い立方体にテクスチャを貼れば柱の完成です。

柱なんです。いいですね？完成です。
本当にただの立方体で頂点が8つしかないモデリングとも呼べないシロモノですが、テクスチャを貼れば見た目がそれっぽくなるので案外大丈夫です。

ここで大事なのは縦横の寸法を1m x 1m などキリのよい数字で、座標xyzゼロで作ることです。こうすることでUnity上で座標を打って配置する時に隙間なくピッチリ置けるようになります。

中途半端な寸法で作ると配置するときに重なったりうまく繋がらなかったりするのでご注意。

書き出す時は、対象の立体(メッシュ)を選択してからfbx形式でエクスポート。

「選択したオブジェクトのみ」、「メッシュのみ」で書き出します。パーツごとに1つ1つ書き出しましょう。

ついでにちょっと頑張って斜めの床も作ったりしました。ナナメパーツがあるとマイクラ的お豆腐建築から脱出でき、組み合わせバリエーションがグッと増えます。

Unityで配置する

それからUnity側の作業に移ります。VRChatに対応しているバージョンのUnityを入手してください。無料です。
ワールドを作り始める前の一番大事な作業はVRCWorldSDKをインポートすること。
インポートができたらAssets>VRChat Examples>Prefabsの中にあるVRCWorldをシーンに配置しましょう。これを入れることでVRChatのワールドとしてアップロードできるようになります。

SDKなどの基本ファイルをインポートできたらいよいよ制作開始です。
まずお家の柱などを置く前に地面が欲しいので、3DオブジェクトのCubeを作成し基底の床(地面)をつくります。

作ったcubeの縦横の寸法を100倍にすれば平べったい形状になります。もうこの上を立って歩けちゃいます！

真っ白な床のままだと味気ないですが、テクスチャを貼れば地面にも草原にでもサイバーパンクSFフィールドにもなります。テクスチャは万能です。
テクスチャを貼るためにはマテリアルが必要なので、画面下のファイルビューで右クリックし、作成→マテリアルを作りましょう。

次に作ったマテリアルを床にしたいCubeに割り当てます。Cubeを選択すると右インスペクタ内にCubeに対応する「Mesh Renderer」の設定ができます。これがCubeの描画を担当している部分です。

MeshRendererはデフォルトでは真っ白なマテリアルが割り当てられていますが、編集するために新規作成したマテリアルをドラッグドロップして割り当てます。

割り当てたら自由に編集できるようになるのでマテリアルを開き「アルベド」から床の見た目にしたいテクスチャを選択します。するとテクスチャ画像の模様が床に反映されます！

今回は草地にしました。テクスチャ画像についてはフリー素材を探してくるなりお絵かきソフトで作成するなり、AIで生成するなりしてください。

それからBlenderで作成した床をUnityに取り込んでならべる作業です。
Blenderで書き出したfbxファイルをドラッグドロップでUnityのフォルダに放り込んでください。

するとUnityプロジェクト内にモデリングした物体を取り込めるので、今度はそれをワールドに配置していきます。

先程の手順でマテリアルとテクスチャを取り込めば見た目もBlenderで作った通りになります。ここまでくればもう後は楽しい作業しかありません。

床をいい感じに配置して、柱をいい感じに立てます。

ここはサクッとやったように見えますが1~2時間かかってます。

次に柱の間を壁を構成する用の壁も作って、柱の間を壁で埋めたらもうそれっぽい感じがでてきます。

壁部分をblenderで作ってテクスチャをさらに用意して、窓ありverも作って…といった作業でさらに2~3時間かかってます。でも一番たのしいのでやってればいつのまにか時間が過ぎちゃいます。

床と壁ができたら、床部分をコピペして天井を作ればもう屋内化が完了。屋根をつけると真っ暗になるので、建物内に光源を置きましょう。右クリックしてライトを新規作成します。

屋内用ならポイントライトなどがオススメ。
光源を置いたら勝手に雰囲気がでてきます。すごいですね。ここまで来たらもう勝ったようなもんです。

家具と小物の配置

さて、建物のガワと床と壁は自前で用意しましたが、中にある家具や小物は自力で作ろうとすると大変です。
ですが！ VRChatのワールドを作りたい需要はけっこうあるためか、Boothなどで探すと無料で使える3Dデータがたくさんあります！高クオリティで有料のものも多数。
いろいろと置きたい小物を集めて配置しました。めちゃくちゃ良い感じになった！(これだけで10時間とかあっという間に過ぎます)

有料のも一部買いましたが、小物をひとつひとつ作るのにかかる時間を考えたら買ったほうが早いかなって…。金で解決。買ったら置くだけだから。
使わせていただいたものはワールド内のクレジットにぜんぶ書いてあります！ありがとうございます！
家具と小物を置いたらこれは既に「家」じゃん…。という完成度となりました。こうなったらもう勝利は確定したようなもんです。

が、これだけだと来た方はワールド内をひと通り見たら満足して帰っちゃうので、なにか面白いものを置きたいですよね。このような欲がでてきたらもう沼にはまっています。

UdonSharp製ギミックをつくる

VRChatのワールド作成は、コンセプトにもよりますがプログラミングスキルがなくても可能です。景観やデザインや雰囲気で魅せるなら光源やモノの配置センスだけで十分すばらしいものができあがります。
ですが、VRChatではユーザーが作ったプログラムの実行が制限付きながら許されているので、スクリプトが書けると手の込んだ仕掛けをワールドに配置することもできちゃいます！
わたしもプログラミングで食べているSEの端くれ。ここからが腕の見せ所！

ここからはスクリプトを一部紹介。
このワールドのメインの見せ物は、入り口左手に置いてある「星の弓」です。
持ち運べるオブジェクトとしてワールドに配置してあります。

この弓には大まかに5つのギミックが設定されています。
・弓を持つと矢を引けるようになる
・矢を引いて手を離すと矢を生成して飛ばす
・弓に付属のボタンを押すと矢を星として固定する
・固定した星を線で繋いで星座にする
・固定した星を順番に消す
ひとつずつ仕組みを解説します！
弓は持ち手(見た目は透明)の部分、弓の見た目部分、矢を持つ部分の3パーツで構成されており、持ち手←弓←矢の順で位置と回転を追従することで見かけを制御しています。

最初は弓部分と矢の部分の2パーツだけだったのですが、矢を引いている時に弓の回転ができてしまうと系の表示がえらいことになるので、一時的に弓の回転を固定する必要がでてきました。しかしプレイヤーによるPickUpオブジェクトは回転の角度制限ができないため、弓の見た目部分と透明な持ち手部分を分離し、持ち手の回転をContraintで見た目部分に反映する方式にしました。
持ち手→弓見た目のConstraintは矢を引いている時だけスクリプトでOFFにします。すると矢を引いている時だけ弓の見た目部分が回転しなくなります。持ち手部分は実はプレイヤーの手の動きに合わせて回転しているのですが、透明なので見えません。

弓を持つと矢を引けるようになる

持ち手の部分にUdon BehaviourスクリプトとVRC PickUpコントローラーを付与しています。PickUpコンポーネントを付けることでそのオブジェクトは道具のようにユーザーが持って遊んだり操作できるようになります。

また、オブジェクトを持った時に紐づけられたUdon Behaviour側のOnPickUp、OnDropイベントが呼ばれます。
このスクリプトでは弓の持ち手部分を持ったら、矢の部分のPickUpをtrueにして矢を引けるようにしています。また、弓にくっついている制御用ボタンのアクティブ化も行っています。




public override void OnPickup(){ //グリップ部分を掴んだ時の処理
  //矢の部分を掴めるようにする
  ((VRC.SDK3.Components.VRCPickup)myArrow.GetComponent(typeof(VRC.SDK3.Components.VRCPickup))).pickupable = true;
  Networking.SetOwner(Networking.LocalPlayer, this.gameObject); //自分がこの弓のオーナーになる
  Networking.SetOwner(Networking.LocalPlayer, myArrow); //付属の矢もオーナーになる
  Networking.SetOwner(Networking.LocalPlayer, bowMesh); //弓本体見た目部分もオーナーになる
  //各種制御用コントローラーをアクティブに
  controllerUp.SetActive(true);
  controllerRight.SetActive(true);
  controllerLeft.SetActive(true);
}


//手を離した時の処理
public override void OnDrop(){
  //矢の部分を掴み許可を解除
  ((VRC.SDK3.Components.VRCPickup)myArrow.GetComponent(typeof(VRC.SDK3.Components.VRCPickup))).pickupable = false;
  //各種制御用コントローラーを隠す
  controllerUp.SetActive(false);
  controllerRight.SetActive(false);
  controllerLeft.SetActive(false);
}

矢を引いて手を離すと矢を生成して飛ばす

新しいオブジェクトをワールド内に動的に生成するには VRCInstantiate(GameObject) を利用します。
生成した後に位置や回転を渡すのを忘れないようにしましょう、
ソース内でpublic GameObject ~~~ と書くことで、Unity側でスクリプトで直接呼び出せるGameObjectやPrefabを登録できるようになりますので、使うオブジェクトは列挙して紐付けましょう！

矢の生成処理はワールド内にいる全員で行ってもらいので、SendCustomNetworkEvent(VRC.Udon.Common.Interfaces.NetworkEventTarget.All, “(関数名)”); で呼び出します。ついでに最後に打った矢を変数で保持しておきます。




public GameObject starlightArrowPrefab; //発射用の矢のPrefab


private GameObject lastShootingStar; //最後に射った流れ星




//矢から手を離した時の処理
public override void OnDrop()
{
  //ローカルで引き絞り距離を計算
  Vector3 arrow_transform = this.gameObject.transform.localPosition;
  varhikishibori_y = arrow_transform.y;
  if( hikishibori_y > 0.15f ){ //一定以上矢をひいていれば
    SendCustomNetworkEvent(VRC.Udon.Common.Interfaces.NetworkEventTarget.All, “Shot”); //矢を射つイベント(全員)
  }else{ //矢のひきしぼりが足りない
    SendCustomNetworkEvent(VRC.Udon.Common.Interfaces.NetworkEventTarget.All, “NoShot”); //矢を射たないイベント
  }
}


//矢を打つ
public void Shot()
{
  myAnimator.SetTrigger(“PositionConstraintON”); //矢を元の位置に戻す
 
  GameObject ArrowShoot = VRCInstantiate(starlightArrowPrefab); //Prefabから矢を生成
  ArrowShoot.transform.position = this.gameObject.transform.position; //矢の位置を決める


  var angles = bowMesh.transform.rotation.eulerAngles; //弓部分の角度を得る
  ArrowShoot.transform.rotation = Quaternion.Euler(angles); //角度をセット


  Rigidbody ArrowShootRigidbody = ArrowShoot.GetComponent(); //矢の「Rigidbody」を取得
  ArrowShootRigidbody.AddForce(bowMesh.transform.forward * shootPower); //Rigidbodyに前方向の推進力を伝える



  lastShootingStar = ArrowShoot; //最後に射った星として記録


}

弓に付属のボタンを押すと矢を星として固定する

弓に付属のボタンは別オブジェクト&別スクリプトです。このオブジェクトをInteract(使用)するとグリップ側のイベントを呼ぶようにしました。

SendCustomEventで、スクリプト内から別スクリプトの関数を呼び出せます。ただし引数は設定できません。




//星生成ボタン側のスクリプト
public class StarCreate : UdonSharpBehaviour{
  public GameObject myGrip; //グリップ部分
  private UdonBehaviour gripBehaviour; //グリップのうどん


  void Start(){
    gripBehaviour = (UdonBehaviour)myGrip.GetComponent(typeof(UdonBehaviour));
  }
  public override void Interact() { //オブジェクト使用時の処理
    gripBehaviour.SendCustomEvent(“StarCreate”); //グリップ側のイベント発火
  }
}

グリップ側のイベントで前述の発射処理で最後に射った矢を変数で保持しているものを使います。
物理情報はRigidbodyが持っているので、GetComponentから矢のRigidbodyを取得し、useGravityをfalse、isKinematicをtrueにするとその物体は物理演算をやめて停止します。






//持ち手ボタン側のスクリプト

[SerializeField]private int myStarMaxLength = 12; //星を撒ける最大数
[UdonSynced]private int myStarsIndex = 0; //現在扱っている星


public void StarCreate(){
  if( lastShootingStar ){ //最後の矢が存在すれば
    SendCustomNetworkEvent(VRC.Udon.Common.Interfaces.NetworkEventTarget.All, “Burst”);
  }
}


//矢を空中で固定し、その場にエフェクトを生成
public void Burst(){
  if( lastShootingStar ){
    Rigidbody lastShootRigidBody = lastShootingStar.GetComponent(); //矢のRegidBody取得
    lastShootRigidBody.useGravity = false; //重力無効化
    lastShootRigidBody.isKinematic = true; //その場に固定


    GameObject effect = VRCInstantiate(createEffect); //作成エフェクトを生成
    effect.transform.position = lastShootingStar.transform.position; //エフェクトの位置を決める
    if (stampSE) stampSE.PlayOneShot(stampSE.clip); //効果音を鳴らす


    Destroy(lastShootingStar, 3.0f); //矢は用済みなので3秒後に消す



    myStarsIndex += 1; //星の管理番号を加算


  }
}

固定した星を線で繋いで星座にする

これは見た目上は複雑なことやってるように見えますが、実は簡単です。それぞれの星をLookAtで一つ前の星に向かせて、距離ぶんの大きさの線を生成しているだけです。生成するPrefabの大きさをデフォルトで横幅1にするのがポイントです。

星は12個まで固定できる仕様で、0~11の番号で制御し GameObject配列で管理しています。




//星座をつくる(星座ボタンから呼ばれる)
public void DrawConstellation(){
  SendCustomNetworkEvent(VRC.Udon.Common.Interfaces.NetworkEventTarget.All, “NetworkDrawConstellation”);
}
public void NetworkDrawConstellation(){
  //myStarsIndex : 現在空に固定済みの星の数
  for( int index = 0; index < myStarsIndex; index++ ){ //手持ちの星すべて処理 index1から始めるので最初の星は処理しない
    GameObject currentStar = myStars[index];//最新の星
    GameObject backStar = myStars[index-1]; //一つ前の星
    if( currentStar && backStar ){ //最新と前の星がちゃんとあれば
      float distance = Vector3.Distance(currentStar.transform.position,backStar.transform.position); //距離を算出
      GameObject stellaLineSky = VRCInstantiate(stellaLine); //星座の線を生成
      stellaLineSky.transform.position = currentStar.transform.position; //星の位置に移動
      stellaLineSky.transform.LookAt(backStar.transform); //星座の線を一つ前の星へ向ける
      Vector3 localScale = stellaLineSky.transform.localScale; //拡大率(ローカル)
      localScale.z = distance; //距離を拡大率に代入
      stellaLineSky.transform.localScale = localScale; //ローカル拡大率に反映
      stellaLineSky.transform.parent = currentStar.transform; //親を最新の星にする(親の星が消えれば線も消えるようになる)
    }
  }
}

固定した星を順番に消す

こちらはもっと単純で、星を固定した後に加算する管理番号でGameObject配列から消したいオブジェクトを引っ張り出してDestroyしています。消したら管理番号の数も減算します。




//星を消すイベント(別ボタンから呼ばれる)
public void StarDestroy(){
  SendCustomNetworkEvent(VRC.Udon.Common.Interfaces.NetworkEventTarget.All, “RefreshLastStar”);
}


//夜空に配置した星をひとつ消す
public void RefreshLastStar(){
  //myStarsIndex : 現在空に固定済みの星の数
  if( myStarsIndex > 0 ){
    var lastStar = myStars[myStarsIndex-1];
    if( lastStar ){
      Destroy(lastStar, 0.0f); //星を即座に消す
 
      GameObjecteffect = VRCInstantiate(destroyEffect); //削除エフェクトを生成
      effect.transform.position = lastStar.transform.position; //エフェクトの位置を決める
      Destroy(effect, 5.0f); //エフェクトは5秒後に消す
      myStarsIndex -= 1; //管理番号をひとつ戻す
    }
  }
}

他にも細かい制御がありますが、大まかにはこんな感じです！

おまけ:矢の衝突判定

矢と星の処理とは直接関係ないのですが、矢がおうちまたはワールド内にあるターゲットに当たると消滅する処理をいれました。
おうちの中でくつろいでいる時に矢が部屋の中に飛んできたら落ち着かないだろうなと思ったためです。
最初は当たったオブジェクトのレイヤーで条件付けを試したのですが、何故かうまくいかなかったため最終的には当たったGameObjectの名前部分一致で処理を発火させるようにしました。

こちらではTargetと名のつくオブジェクトに紐づいたTriggerコライダーに当たった時に処理を行うようにし、おうち型の当たり判定を用意しています。


//矢(Perfab生成)のスクリプト

//入ってはいけないところに矢が入った時またはTargetに当てた時に矢が消滅する
public void OnTriggerEnter(Collider other){ //トリガーに入った時
  triggerTarget(other);
}
public void OnTriggerStay(Collider other){ //トリガーの中にいる時
  triggerTarget(other);
}
public void triggerTarget(Collider other){ //実際の処理
  if( hit ){ return; } //private変数 既に何かに当たってたら処理しない
  if (other != null){ //コライダーのnullチェック(念の為)
    string otherAsString = ((object)other).ToString();
    if (otherAsString.Contains(“VRCPlayer”)){ //他のプレイヤーに当たった時
      //何も演出しないことにした
    }else if(otherAsString.Contains(“Target”)){ //名前にTargetが含まれている
      //自分オブジェクトその場で停止する
      Rigidbody myRigidBody = this.gameObject.GetComponent(); //自分のRegidBody取得
      myRigidBody.useGravity = false; //重力オフ
      myRigidBody.isKinematic = true; //その場に固定
      MeshRenderer myRenderer = this.gameObject.GetComponent(); //メッシュレンダラ取得
      myRenderer.enabled = false; //矢の見た目だけオフにする(すぐ消すと軌跡が残らないため)
      Destroy(this.gameObject, 3.0f); //3秒後に破棄
      //エフェクト
      GameObject effect = VRCInstantiate(destroyEffect); //エフェクトを生成
      effect.transform.position = this.gameObject.transform.position; //エフェクトの位置を矢と同じにする
      Destroy(effect, 5.0f); //5秒後に破棄
      hit = true; //ヒットフラグON(2回目は処理しない)
    }
  }
}

おまけ:弓以外のギミック

他、置いてあるスイーツとドリンクを飲み食いできる機能もUdonSharpで組みました。こちらはアニメーターで出し入れなど見かけを作って、UdonSharp側は簡単なフラグ管理とPickUpから取り上げるのと位置リセットのみ行ってます。
こちらはスイーツ食べるやつのソース(全文)



 
using UdonSharp;

using UnityEngine;

using VRC.SDKBase;

using VRC.Udon;
 
public class EatSweets : UdonSharpBehaviour

{

private Vector3 respawnPosition; //リポップする時の位置

private Quaternion respawnRotation; //リポップする時の回転

private float deltaTime = 0.0f; //経過時間

private bool eated = false; //食べました

[SerializeField] private Animator myAnimator; //アニメーター

[SerializeField] private AudioSource eatSE; //食べる音
 

void Start(){

 //初期位置を保管

 respawnPosition = this.gameObject.transform.position;

 respawnRotation = this.gameObject.transform.rotation;

}
 

private void Update()

{

 deltaTime += Time.deltaTime; //経過時間を足す

 if( eated && deltaTime > 1.5f ){ //一定時間たっていれば位置を戻す

  this.gameObject.transform.position = respawnPosition;

  this.gameObject.transform.rotation = respawnRotation;

  eated = false; //食べフラグ初期化

 }

}
 

public override void OnPickupUseDown() { //このオブジェクトを持って使った時

 SendCustomNetworkEvent(VRC.Udon.Common.Interfaces.NetworkEventTarget.All, “Eat”); //ワールド内全員にイベント通知

}
 

//ワールド内全員に処理してもらう

public void Eat(){

 if (eatSE) eatSE.PlayOneShot(eatSE.clip); //食べる音

 myAnimator.SetTrigger(“Eat”); //アニメーター発火(縮小していくやつ)

 deltaTime = 0; //経過時間を初期化

 eated = true; //たべたフラグ
 


 //ピックアップから強制的に手を離す

 VRC_Pickup pickup = (VRC_Pickup)this.gameObject.GetComponent(typeof(VRC_Pickup));

 pickup.Drop();

 }

}

ギミックの同期問題

上記のギミックは一人で動かすぶんには何の問題もなかったのですが、いざ他人をワールドに呼んでテストしてみると色々と不具合が出ることが判明しました…。
ネットワークを介した挙動となると途端に気を遣う部分がたくさん出てきて大変になります！

同期の基本

Udonには便利な「VRC Object Sync」というコンポーネントが用意されています。基本的にはこのコンポーネントを付与しておけば位置や状態が他のプレイヤーと同期されるようになります！

逆に言うと、このコンポーネントを付与していない物体は何も同期しません。基本はローカル動作で、グローバル化したい物には全て「VRC Object Sync」を付けなければなりません。

うまく同期されないケース

これが最大のワナだったのですが、Instantiateで動的に生成したオブジェクトはVRC Object Syncを付与していても同期されません！
つまり、同期を行いたいオブジェクトは最初からワールドに配置した状態にしなければならなかったのです。
これでは矢から星を生成しても位置が完全には合わなくなるし、後からワールドに入ってきた人には生成済みの星が見えなくなります。これでは会話が噛み合わず遊んでいるひとが困っちゃいます。
そこで、やむをえず星として夜空に固定するオブジェクトはあらかじめワールドの下に埋めて隠しておく方式に変更しました。泥臭くてあまり美しくないやり方ですが仕方なし。この都合により星は最大12発しか固定できません。

矢のほうはその場で生成しているので無限に打てます。ワールドに入っている人全員に矢の発射イベントを投げれば弓の現在位置と角度に基づいてだいたい合ってる感じで射出されます！

その他、同期挙動の細かいところ

VRC Object Syncは[Udon synced]を付与すればUdon Behaviourスクリプト内の変数も同期してくれます。射った矢の番号はこの仕組みで同期しています。
オブジェクト位置の同期は静止中は常にしているわけではなく、移動時のみ再判定されるとのことなので、矢を射ったり弓を持ったりといった動作をするたびに全ての固定済みの星を誤差ミリ程度にズラすことで念入りに位置同期するようにしました。
また、プレイヤーのワールド離脱時に誰のものでもなくなった弓は同期が怪しくなるため、自動的にオーナーになったプレイヤー側で明示的に位置合わせを行うようにしました。




private float deltaTime = 0.0f; //経過時間
private bool syncedToPlayerLeft = false; //プレイヤーいなくなった後に同期するフラグ
private float toggleStarPosition = -0.0001f; //同期するときに微妙に星をずらす時に足す座標(毎回反転する)
 
public override voidOnPlayerJoined(VRCPlayerApi player){
  //プレイヤーが入ってきた時、自分がオーナーなら全ての星を再確認する
  if (Networking.IsOwner(this.gameObject) ){
    RefreshStarsCheck(); //全ての星を確認
  }
}
//プレイヤーがどっかいった時
public override void OnPlayerLeft(VRCPlayerApi player){
  deltaTime = 0;
  syncedToPlayerLeft = true; //同期用フラグON
}


private void Update(){
  deltaTime += Time.deltaTime; //経過時間を足す
  //プレイヤー離脱後、一定時間したら同期を行う
  if( syncedToPlayerLeft && deltaTime > 5.0f ){
    syncedToPlayerLeft = false;
    if (Networking.IsOwner(Networking.LocalPlayer, this.gameObject)){ //オーナーになってたら
      getAllPartsOwner(); //全てを相続する
    }
  }
}
//この弓に関連するすべてのパーツのオーナーを得る
public void getAllPartsOwner(){
  Networking.SetOwner(Networking.LocalPlayer, myAnimator.gameObject); //弓の一番親のオーナーになる
  Networking.SetOwner(Networking.LocalPlayer, this.gameObject); //自分がこの弓のオーナーになる
  Networking.SetOwner(Networking.LocalPlayer, myArrow); //付属の矢もオーナーになる
  Networking.SetOwner(Networking.LocalPlayer, bowMesh); //弓本体ビジュアルもオーナーになる
  for( int index = 0; index < myStarMaxLength; index++ ){ //全ての星に実行
    var star = myStars[index];
    if( star ){
      Networking.SetOwner(Networking.LocalPlayer, star); //うちの子です
    }
  }
  RefreshStars(); //全ての星を確認
}
//すべての星を確認する(オーナー専用)
publicvoidRefreshStars(){
  toggleStarPosition *= -1;
  for( int index = 0; index < myStarMaxLength; index++ ){ //全ての星に実行
    var star = myStars[index];
    if( star ){
      star.transform.position += newVector3(0,0 + toggleStarPosition ,0);
    }
  }
}

仕上げ(軽量化とベイク)

ここからはやらなくてもワールドが動作する部分ですが、光源やオブジェクトを置きすぎて重くなっていたので力を入れて取り組みました。
快適なワールド作りのためにはある意味いちばん大事なところかも。

オブジェクトのStatic化

まず、オブジェクトには動くモノと動かないモノがあります。ワールド内に置いてある弓や飲み物や本などは掴んで移動することができるので当然「動くモノ」です。
しかし家や木や山はその場から絶対に移動しません。移動しないなら影の計算や物理演算を一部省略することができるため「このオブジェクトは絶対動かしませんよ」と、あらかじめ登録しておくことで処理を軽くできるわけです！

Static(静的オブジェクト)の登録はインスペクターの右上のチェックを行うことでできます。動かないものはどんどんstatic化しましょう。

諸々配置が終わったら、動く可能性のあるギミック系と、動かない建物と、建物の外のオブジェクトとで大まかにオブジェクトを親子関係にして分けました。

こうすると一括でStatic化チェック管理ができて楽になります！

インポート設定による容量圧縮

ワールドに読み込むテクスチャや3Dモデルのインポート設定をいじると、見た目の影響を少なめに容量を削減できます。
まずはテクスチャ。最大サイズを下げることで画像を軽量化できます。ちょっとした手のひらサイズの小物程度であれば256や128でも見た目の影響はそんなに無かったりします。

逆に、壁や床など面積が大きいものは解像度を低くするとぼんやりとしますので、512や1024などを選んでおいたほうが無難です。

次に3Dモデル。メッシュ圧縮を設定すると容量を削減できます。見た目が大体あってればOK程度のオブジェクトはどんどん圧縮しましょう。中程度なら影響も少ないようです。

また、後述のライトベイク対象として使う3Dモデルの場合は「ライトマップUV生成」をONに設定しておきましょう。この設定をしないとライトベイクが正しくできません。

ライトベイク

軽量化のための最重要作業。それがライトベイクです！これは必ずおさえておきたい。
ライトベイクが何かというと、ひとことで言うと光の当たり具合をテクスチャに焼き付けることです。
光源がオブジェクトに当たって影を落とす計算は負荷が大きく、リアルタイムで行うと処理落ちします。光源をたくさん置いたり、影の計算対象のオブジェクトが増えれば増えるほど顕著になります。それを解決するのがライトベイク！
まず、こちらがライトベイク済みの室内です。特に違和感ないと思います。

しかし、家具をどかしてみると…。床に家具の影がお化けみたいに焼き付いています。こわいね。影の計算はその場ではしていなくて、あらかじめ床に影の模様が描かれているのです。

オブジェクトをStatic化して「絶対にその場所から動かない」とわかっているなら影が動くことはないのですから、リアルタイム計算する必要がなくなるためです。実はこれ、コンシューマゲームなどでもよく使われている手法だったりします。

ライトベイクは、画面上にあるウィンドウ→レンダリング→ライティング設定から行うことができます。

設定は詳しく解説しているサイトさんを参考にしてください。解像度は高いほど綺麗になりますが、ワールド読み込み時のサイズが重くなります。一度ダウンロードしてワールドに入ってしまえば軽いのですが、ライトベイクするということはテクスチャが増えるので必然的にサイズが増えます。
あまりサイズを肥大化させたくない場合はベイクを行う対象を絞りましょう。

ライトベイクしたくないオブジェクトのMeshRendererのグローバルイルミネーションをOFFにすればベイク対象から外せます。

いろいろ準備できたら「ライティングの生成」を押せばライトベイクが開始されます。

CPUスペックにもよりますが、けっこう重い計算なので場合によっては数十分から数時間待たされることもあります。PCを長時間放置できるタイミングで行うようにしましょう。つよつよGPUがあるなら別ですが！

他にもライトベイクに関連して「ライトプローブ」も配置しました。こちらはベイク済みのライトの影響を動的なオブジェクトに受けさせたい場合に役立つ仕組みです。

ただ、ひとつひとつ配置するのが面倒だったので「Magic Light Probes」というアセット(有料)を使って自動配置しちゃいました。作業にかかる時間を考えたら買ったほうが早いかなって…。金で解決。

メッシュベイク

ライトベイクだけでも十分軽くなりますが、さらに軽さを追求したいのであればメッシュベイクでしょう。
これは同じような見た目のモノが複数置いてある時や、細々したオブジェクトがたくさん置いてある時に有効です。
下の画像のように雑多にモノが配置されている場合、ひとつひとつのオブジェクトに座標や回転などが設定され、別々に描画処理が走るのでモノを置くほど負荷が増えるのですが…。

メッシュベイクすれば「小物がたくさん集まっている見た目の、一つのオブジェクト」として扱われるので、見た目に反して負荷がかからなくなります！

見かけ上はモノがいっぱい置いてあるように見えますが、全にして一なのです。ただし、その場から動かさないstatic化が条件。

これはBlenderなどをうまく使えば人力でできなくもないのですが、基本はツールを使うことをオススメします。
わたしは「Mesh Combine Studio」というアセット(有料)を使ってボタン一つで結合/解除できるようにしちゃいました。作業にかかる時間を考えたら買ったほうが早いかなって…。金で解決。
このアセットはとても使いやすくてオススメです！まとめたいGameObjectの親を放り込んでボタンを押せば全部やってくれます。建物の1階部分はこのアセットでくっつけてあります。ちゃんと結合後の見た目でライトベイクも考慮してくれます。

マテリアルの結合はできないため、床や壁など同じマテリアルを使った構造物をまとめるのに適しています。

無料の「Mesh Baker」というアセットも良いです！こちらも併用しました。
こちらは一度ベイクしたものを元に戻す手順が若干面倒ですが、ぜんぶばっちり配置した後に最終的にベイクするのであれば問題なさそうです。

オクルージョンカリング

これも地味に重要。
ひとことで言うと「見えない場所は描画しない」という設定です。
ユーザーの視界に入っていない部分も常に描画していると負荷になりますから、描画を行わないようにします。これもあらかじめStatic設定しているオブジェクトが影響を受けます。明示的にONにする必要があるので忘れずに設定しましょう。
ウィンドウ→レンダリング→オクルージョンカリングから設定画面を開きます。

ライトベイクと同じように「ベイク」を押す事でいまstatic化されているオブジェクトの位置を元にオクルージョンカリングの設定が行われます。static化オブジェクトが増減したら再度ベイクしましょう。

「遮蔽物の最小値」は、この値より小さいサイズのものは非表示処理に含まれなくなります。
「最小の穴」は、カメラから見る事ができるワールド内の小さな隙間より小さく設定してください。うまく設定されていないと、モノとモノの隙間から景色を覗いた時などに視界内にあるのにオブジェクトが消えることがあります。

設定が完了すると、カメラの視界から外れて見えない位置にあるモノがスッと消えるようになります。こわいね。

現実も実は人間が観測していない場所は暗闇なのかもしれないですね。

以上です！
VRChatは無料だしPCだけでもできますが、VR機器があるともっと楽しいです。MetaQuestなど購入した方は是非一度はやってみて！

The post 【VRChat】自作ワールド作りました！いろいろメモ(作業手順、UdonSharp、軽量化など) first appeared on ユガラボ.

【WordPress】Google Calendar Events プラグインの導入方法

ユーリ — Fri, 22 Jan 2016 03:00:27 +0000

そういえば私はWebクリエイターなんだった…
お仕事関連のメモで、Google Calendar Events(Simple Calendar)のプラグイン導入方法です。

Google Calendar Eventsとは

WordPressのプラグインで、Googleアカウントのカレンダー機能で作成したイベントなどを、
WordPress上に取得・表示することができるプラグインです！

WordPress上ではなく、Googleアカウントのカレンダーを編集するだけでページに反映されるので、管理画面が苦手なクライアントさんにも使い易いかもしれません。
Simple Calendarとも言うみたいです。どちらが正式名なんでしょうか。

とても便利なプラグインなのですが、使えるようにする迄の手順がなかなか多い上、
英語なのでちょっとたいへんです。

最近、仕様が変わった為、導入方法が大きく変わったようなので、日本語解説したいと思います！

このプラグインの利用には、
カレンダーの取得を行う為の「Google API Key」と、
取得したいカレンダー固有の「カレンダーID」の二つが必要になります！
※利用にはGoogleのアカウントが必要ですので、持っていない方は予め作成してください。

※この記事の情報は、2016年1月時点のものです。

インストール

まずは落ち着いてプラグインをインストールしましょう。
新規追加から「Google Calendar Events」または「Simple Calendar」で検索します。

検索で出てきた緑のカレンダーマークのプラグインを選択し、インストールおよび有効化してください。

API Keyの取得

まずは必要なもののうちの一つ、API Keyの取得について。
ここが一番面倒ですが、頑張って下さい！

プラグインの有効化でメニューに現れた「Calendar」から「Setting」を選択します。

以下の画面に遷移します。
ここにGoogle API Keyを入力するのです。

ご丁寧にAPI Keyを取得する為のGoogle Developers Consoleへのリンクが貼ってありますので、クリックしてGoogleの管理画面へ移動します。

こちらがGoogleの管理画面です。

プロジェクトを新しく選択します！

作成するプロジェクト名は、任意のもので適当につけてください。
利用規約に同意することで、作成ボタンが押せるようになります。

APIを作成したら、今度はAPIを有効状態にする必要があります。

API管理画面に移動します。

管理画面では、有効にしたいAPIを選択します。
ここでは、Calendar APIを選択します。

Calendar APIを選択したら、「APIを有効にする」をクリックし、有効にします！

もう少しです、頑張って！

今度は左メニューの認証情報を選択します。

「新しい認証情報」を選択します。
APIとか認証とか面倒そうなことばが多いですが、おまじないだと思って我慢してください。

認証情報のうち「APIキー」を選択します。

APIキーの中からさらに「サーバキー」を選びます。

名前はてきとうにつけてください。

作成！

すると…
なぞのはっしゅもじれつが生成されり！
これがAPI Keyです！
これです！これが欲しかったのです！

お疲れ様です！
これをすかさずコピーしまして、

WordPress管理画面に戻り、
Calendar -> Settingsの中のAPI Key入力部にペーストして、保存します。

カレンダーの作成

こんどは、取得して表示する対象となる、カレンダーを作成します。
Googleのメニューからカレンダーを選択します。

カレンダー編集画面に来たら、WordPressで取得を行う用の新しいカレンダーを作成します。

ポイントは「このカレンダーを一般公開する」をONにすることです。
一般公開状態のカレンダーでないと、WordPressに表示することができません。

警告が出ますが、はいを選びます。

カレンダーIDの確認

カレンダーを作成できたら、カレンダーの設定画面を開きます。

メニュー内の「カレンダーのアドレス」のところにカレンダーIDが表記されています。
これをコピーしましょう！

これで、取得に必要なAPI KeyとカレンダーIDが揃いました！
あとはWordPress側の調整だけです！

カレンダーの設定(WordPress側)

さっそく、WordPress管理画面に戻り、Calendarメニューから「Add New」を選択しましょう。

新規作成画面の下の方に、Calendar設定部があります。

その中の「Google Calendar」タブの中にCalendar IDを入力する部分があります。
ここに、先ほど作成したカレンダーのIDをコピペします。

これで、WordPressでカレンダーを取得する準備が完了しました！

あとは、画面右下に書いてあるショートコードを呼び出せば、
作成したカレンダーの情報が自動で取得されるようになります！

カレンダーを表示したい投稿内にショートコードを貼り付けてもいいですし、
テンプレートから直接カレンダーを呼び出したい場合は

echo do_shortcode(‘[calendar id=”92″]’); ?>

とでも書いて、ショートコードを実行してあげてください。
※ショートコードの番号は適宜書き換えてください。

動作確認

WordPress上に取得したカレンダーは、初期状態ではこのように表示されます。

試しに、取得元のカレンダーを編集してみます。
Googleのカレンダー管理画面に戻り、適当にイベントを追加してみます。

追加が完了しました。

WordPressのカレンダー表示ページに戻ってみると…
更新されて、たった今追加したイベントが表示されるようになりました。

カレンダーのカスタマイズ

カレンダー設定画面の本文は、カレンダーのイベントをクリックした時に表示されるツールチップの中身と連動しています。

イベントをクリックすると表示されるコレです！

これを編集したい場合は、以下のページを参考にテンプレートタグを書き換えてみてください！
http://docs.simplecalendar.io/event-template-tags/

以上です！

The post 【WordPress】Google Calendar Events プラグインの導入方法 first appeared on ユガラボ.

【Swift】プロジェクト内に置いたpng画像をNSDataとして取り出す

ユーリ — Fri, 18 Dec 2015 03:00:55 +0000

こんにちは、ユーリです！
お仕事でSwift使い始めたので、Swift関連の備忘録を書いていきます。

まずはpng画像を簡単に取り出す方法について。メルストの記事じゃなくてゴメンナサ…

今回は、プロジェクトファイル内にリソース画像などを格納するbundleファイルを設置し、
そこから画像を吸い出す方法で行きたいと思います。

まずは、bundleの作成から。
以下の作業を行う前に、ファイルの拡張子を表示するモードにしておいてください。

bundleの作成

プロジェクトのフォルダをFinderで開き、おもむろに新規フォルダを作成します。

フォルダができたら、名前を「***.bundle」に変更します。
今回は「resources.bundle」にしましょう！

すると「まじ？」と聞かれるので「あたぼうよ」と答えます。

フォルダの拡張子がbundleに変わり、アイコンも変わりました。
空のbundleファイルができました！

今度は、bundleファイルをプロジェクトに追加します。
Fileメニューから「Add Files to …」でプロジェクトにファイルを追加します。

先ほど作成したbundleファイルを選択します。

プロジェクトにbundleファイルが追加されました！

これ以降は、FinderからXcode内のbundleファイルに直接ドラッグ&ドロップで、プロジェクト内で取り扱いたいpng画像を取り込むことができます。

試しに、画像を一点ドラッグして追加してみます。
こんな画像があったとして。

ドラッグすると、追加されます。

次は、いよいよこの画像を呼んでみます。

bundleからpng画像を呼ぶ

先にソースを張ってしまいますが、png画像を呼ぶ為の関数はこちらです。

/// リソース内からpng画像を取り出し、NSData形式で返却する
/// - parameter name : 画像の名前(パス)。拡張子[png]は省略。
/// - returns : NSData形式のpng画像 存在しなければnilを返す。
func getResourceImage(name:String)-> NSData?{
    let bundlePath : String = NSBundle.mainBundle().pathForResource("resources", ofType: "bundle")!
    let bundle : NSBundle = NSBundle(path: bundlePath)!
    if let imagePath : String = bundle.pathForResource(name, ofType: "png"){
        let fileHandle : NSFileHandle = NSFileHandle(forReadingAtPath: imagePath)!
        let imageData : NSData = fileHandle.readDataToEndOfFile()
        return imageData
    }
    return nil
}

この関数はどこに書いてもいいのですが、どこからでも呼べるように、新しくUtil.swiftというファイルを作り、その中に置いてみます。

File > New > Fileを選び、

Swiftファイルを選びます。

名前をつけて、プロジェクトのグループ内に配置しましょう。

新しいSwiftファイルができたら、その中に先ほどのソースを貼り付けます。

これで準備完了です！！

使い方

以下のように、拡張子(png)を抜かしたファイル名で呼び出します。画像が存在しない場合はnilが返るので、無かった場合の処理も考えておきましょう。
こちらの例では、返ってきたNSDataを利用してUIImageを生成しています。

let testData : NSData? = getResourceImage("test")
if testData != nil{
	let testImage : UIImage! = UIImage(data: testData! )

	// do something...

}

また、以下のようにbundle内にフォルダを作って、その中の画像を呼び出したい場合は、スラッシュを挟めば大丈夫です！

let testData : NSData? = getResourceImage("images/test2")

解説

let bundlePath : String = NSBundle.mainBundle().pathForResource("resources", ofType: "bundle")!

まず、こちらの行はプロジェクト内から「resources」という名前をbundleのパスを生成しています。
プロジェクト内にresourcesというbundleが無いと大変なことになります。

let bundle : NSBundle = NSBundle(path: bundlePath)!

次に、bundleのパスからbundleのインスタンスを得ます。

if let imagePath : String = bundle.pathForResource(name, ofType: "png"){

そして、bundle内に指定した名前のpng画像があるかどうか調べています。

    let fileHandle : NSFileHandle = NSFileHandle(forReadingAtPath: imagePath)!
    let imageData : NSData = fileHandle.readDataToEndOfFile()
    return imageData

そして、画像があった場合は読み込んで、NSDataとして返します。

The post 【Swift】プロジェクト内に置いたpng画像をNSDataとして取り出す first appeared on ユガラボ.

【css/備忘録】何をどうしてもテキスト選択してほしくない時の対処法

ユーリ — Wed, 14 Oct 2015 03:00:43 +0000

お仕事で詰まった案件の備忘録。
cssやwebview関連で…

先日、webアプリの制作案件のうち一部の作業を担当しまして、
こういうご注文がありました。
「ブラウザ内での選択機能を制限したい。」

webアプリの場合、ブラウザ内であたかもネイティブアプリの如く、
機能やレイアウトを実装します。主にcssとjavascriptで。
また、アプリ風のページを作って、
ネイティブアプリ内の機能の一部としてwebviewでページを呼び出すこともあります。
イメージ的にはこんなかんじ。

その際、ブラウザの標準機能である「選択操作」ができてしまうと、こんなふうにページ内のDOMを選択できてしまいます。

こういうことができると機能的に不便というわけではありませんが、
「見た目上よくない」「スタイリッシュじゃない」という声があがります。
ごもっともです。
なんとかしましょう。

対処1:cssで選択を制限

まず、最初の対処はこちら。
大体の場合はこれで済みます。

*:not(input){
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

user-select : none;とは、「この部分の選択を禁止する」という意味のcssプロパティです。
ほとんどのブラウザは対応しているハズなので、これで効けば一件落着。

サンプル

user select指定なし(選択可)

user select指定あり(選択不可)

しかし、webviewや一部のAndroid系ブラウザでは、user-selectが効かないことがあります…
その場合は次の対処。

対処2:選択状態カラーを透明にしてしまう

デフォルトでは選択を行うと、選択部分が青くなりますが、
実は、その「選択したら青」といった色を変えることができちゃいます。

*{
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

選択色を透明にしてしまえば、仮に選択状態にできてしまったとしても、選択していることがわからなくなります！！(いささか乱暴ですが)
しかし、これも効かないことがあります。そんな手強いブラウザには次の対処。

対処3:touchstartのイベントをキャンセルする

これはもういろいろ犠牲になる最終手段ですが、preventDefault()でイベント自体を発生させないようにします。この方法を使う場合は、個別にclick時の挙動などを書かなければならないので注意しましょう。

$(function(){
	$(".target-button").on("touchstart mousedown",function(e){
		 e.preventDefault();
	});
});

サンプル

preventDefaultなし

preventDefaultあり

今回はこんな感じですみません。以上です！

The post 【css/備忘録】何をどうしてもテキスト選択してほしくない時の対処法 first appeared on ユガラボ.

【Blender】ボーンを動かしてアニメーションを作成する

ユーリ — Fri, 18 Sep 2015 03:00:08 +0000

お仕事関連のメモがてら、3Dソフトのtipsをお送りいたします。その３　

前回の記事はこちらです↓

ユガラボ | 2015/09/11
【Blender】メッシュにボーン(Armature)を入れてポーズ変更できるようにする

今回は、ボーンの位置、回転などの状態をひとつひとつ登録していき、
登録したものを繋げてアニメーションさせる、という作業を行います！

マスターボーンを追加する。

前回までの記事の手順通り、
メッシュにボーンをいれてペアリングまでが完了しているものとします。

このままだと、背骨の下部分と腰の付け根部分がまだ繋がっていません。

アニメーションさせる際も、このままでは不便なので
「マスターボーン」を追加する作業を行います。

マスターボーンは、全てのボーンの親となるボーンで、
マスターボーンを動かせば子になっている全てのボーンを動かしたり回転させたりできます。

まず、編集モードに入り背骨の真ん中あたりのボーンのTipを選択します。

そこから後ろに向かってボーンを押し出します。(ホントはどこから押し出してもいいのですが、位置的にわかりやすいので)
視点を平行視点(テンキー5)の真横から(テンキー3)にするとやりやすいです。

Eキーの押し出しを押してから、Yキーを押せば移動座標軸がY軸に固定されます。
この操作をすると、背骨のボーンの子としてボーンが作られますが、まずはそれで大丈夫です。

新しく押し出したボーンの名前を「Master」とします。

編集モードで画面右のアウトライナーからこのボーンのプロパティを開き、
「親」のボーン関連付けを解除し、このボーンを独立したボーンにします。

今度は逆に、すでにある背骨、右足の付け根、左足の付け根の３つの親ボーンを設定します。
「親:」からMasterボーンを選ぶことで、Masterボーンの子となります。

これで、すべてのボーンをMasterボーンの子としてまとめることができました。

マスターボーンは、ペアリング後に追加したボーンなので、曲げたり伸ばしたりしても、
メッシュの形が変わらないようになっています。

アニメーション登録前の準備

ここまででボーンの作成が完了したので、
アニメーション編集の際に見やすくなるよう、表示状態を変更します。

アウトライナーのアーマチュアプロパティを選び、表示を「八面体」から「スティック」に変更しましょう。

これでメッシュが見やすくなりました。

次に、画面下のエディターを「ドープシート」に変更します。

このシートにポーズを一つ一つ登録していくことで、アニメーションを作成することができます。
ドープシートメニューのアクションモードを使用します。

モーション作成！

歩行モーションを作ってみましょう。
「新規」をクリックして新しいアニメーションを登録します。

アニメーション名は「walk(loop)」としました。
名前を決めたら右にある「F」のボタンを押しておいてください。

これを押さないと作ったモーションが保存されません！
また、フレームを1コマ目に合わせておいてください。

歩行モーションですから、
「足を前に出す」
「足に合わせて腕を降る」
「腰、背中を歩く姿勢に合わせて軽く曲げる」などの動作になります。
まずは、1コマ目の動作として右足を前に出す動作を登録します。

まずは、「右足を前に出すポーズ」を作ります。
右クリックで曲げたいボーンを選択し、rキーで角度調節を行っていきます。

ひとつひとつのボーンを調整し、納得するポーズになったら「キーフレーム」を登録します。
3Dビュー上でIキーを押し、キーフレーム挿入メニューを開いて「位置/回転」をクリックします。

これで、いま作成したポーズが登録されました。

このポーズは右足を前に出していますが、これを左右判定して左足を前に出したポーズにします。
ドープシート上でキーフレームの一番上の「ドーブシート概要」の列を右クリックで選択します。これでこのフレームの全てのボーンの位置状態を選択できます。
Ctrl + Cでポーズごとコピーします。
そして、21フレーム目あたりをクリックしてShift + Ctrl + Vで「左右反転ペースト」を行います。

左足を前に出したポーズが生成されました。

次に、41フレーム目あたりに最初に作った右足を前に出したポーズを左右反転せずそのままペーストします。
ポーズのペーストはCtrl + Vで大丈夫です。

これで1~41フレームにかけて
「右足を前に出したポーズ」
「左足を前に出したポーズ」
「右足を前に出したポーズ」
の3つが登録されました。
一旦、この状態でアニメーションさせてみましょう。
左下のビューを「タイムライン」に切り替えます。

ここでアニメーション開始フレームと終了フレームを設定することができます。
開始を「1」、終了を「41」に設定しましょう。

設定したらalt + Aで再生ができます！

おお！？うーん。
いちおう手足を前後に振って動いてくれましたが、まだ躍動感が足りません。
こんなときは中間フレームを登録して動きを補間しましょう。
1フレーム目の「右足を前に出したポーズ」と
21フレーム目の「左足を前に出したポーズ」の中間に位置する
11フレーム目を選択します。ここのポーズを調整します。

いまのままだと、宙に浮いているようなポーズになっています。
人間はふつう、歩行中にこんなポーズにはならないハズです。
足の角度を調節して、地に足がついたカンジにしました。

また全体の座標を少し前寄りにし、肩と腕の角度も少し変えました。
補間用のポーズができたら、最初と同じように3Dビュー上でIキーを押し、
「位置/回転」を登録します。

1〜21の間の11フレーム目に一歩目の補間ポーズができたので、
同様に21〜41フレーム目の二歩目の部分も補間ポーズを登録します。

31フレーム目には、いま作った補間用ポーズを左右判定したものを貼り付けましょう。

もう一度再生してみると…前よりよくなりました！

このように、さらに細かい調整をしていき、こきみよいモーションになるまで試行錯誤することになります！

別のモーションを作る場合

次は歩行以外のモーションを作りたい！という場合は、
ポーズ名の右の「×」ボタンを押してそのポーズの編集を解除します。

もう一度「新規」を押して別のモーションの作成に入ることができます。
別のモーションを作る際は、フレーム番号が他のモーションとかぶらないように注意してください。

今回はこんな感じでした。
お読みいただき、ありがとうございました！

The post 【Blender】ボーンを動かしてアニメーションを作成する first appeared on ユガラボ.

【Blender】メッシュにボーン(Armature)を入れてポーズ変更できるようにする

ユーリ — Fri, 11 Sep 2015 03:00:35 +0000

お仕事関連のメモがてら、3Dソフトのtipsをお送りいたします。その２

前回の記事はこちら↓です！

ユガラボ | 2015/09/04
【Blender】Sculptrisで作成したモデルをBlenderへインポートする

今回は、Blenderにメッシュを取り込んで大きさと位置合わせまで完了しているものとし、
前回の続きからお伝えします！

今回は、Blenderに取り込んだメッシュに骨格(ボーン、アーマチュア等と呼称します)を入れて、
3Dモデルのポーズを自由自在に変更できるようにいたします。

最初のボーンを追加する

まずは、メッシュの基底部分(足の裏的な部分)がゼロ座標に合わさっていることを確認します。

正面から見るとピッタリ合っていますね。
ピッタリ正面から見たい場合は、テンキーの5で平行投影に切り替え、
テンキーの1で正面視点にしてください。

そして、3Dビューにマウスが乗った状態でShift + Aキーを押してください。
オブジェクトの追加メニューが表示されます。

この中から、アーマチュア(Armature) > 一つのボーン(Single Bone)を選択します。
ボーンが追加されました。

この、最初に追加されたボーンは一番基本となる骨である背骨として利用します。

まずは、ボーンの位置を合わせます。ボーンを選択した状態で画面右のアウトライナーからオブジェクトプロパティから座標を選択し、X、Y、Zすべて0を入力してください。
(アウトライナーとは、画面上に素材するオブジェクトのリストと、その情報が表示されるビューです。)

ボーンが中心点に移動しました。

このままでは、ボーンが他のオブジェクトと重なった時に、メリ込んで見えなくなってしまいますので、アウトライナーでアーマチュアを選択し、アーマチュアプロパティのオプションから「レントゲン」をONにします。

この設定を行うことで、ボーンがメッシュに対してどのように重なっていても、ボーン全体が優先表示されるようになります。

メッシュの形状に合わせてボーンを生やす

こちらはかなり重要な作業です！と同時に面白い部分でもあります。
現実に存在する生物の骨格を参考に作ると、かなりそれっぽい動きになりますよ！

まずは、ボーンを構成する部位について覚えてください。

初期設定の八面体表示のボーンを例にします。
ボーンの上部分(尖ったほう)をTip、下部分(太いほう)をRootと呼びます。

まずは、編集モードに移動します。

画面左側のオプションから、アーマチュアオプションの「X軸ミラー」をONにしてください。

オプションが画面に出ていない場合はTキーで表示されます。

ボーンを選択するには、右クリックを使用します。
ボーンの真ん中部分を右クリックして、ボーン全体を選択し、
最初のボーンを背骨にあたる位置まで移動しましょう。

ボーンのTip部分が上に大きくはみ出してしまっている場合、
Tip部分を右クリックで選択し、青軸の矢印(Z軸)をひっぱって下に移動します。

斜めから見るとこんな感じです。

次に、2本目、3本目…とボーンを生やして繋げていく作業です。
これを「ボーンの押し出し」と呼びます。
ボーンを生やしたい部位のTip部分かRoot部分を右クリックで選択します。
選択したらEキー→マウスドラッグで次のボーンが生えてきます。
今回はZ軸方向に固定して伸ばしたいので、ボーンを生やしてからZキーを押して、
移動軸を限定させましょう。

そのままZ軸固定の押し出しを続け、首、頭のボーンも追加します。

左右対象のボーン

両腕、両足などは左右おなじように作る必要があります。
通常の押し出しはEキーですが、
Shift + Eキーを押すことで左右対象にボーンを生やすことができます。
(オプションのX軸ミラーをONにしておいてください。)

背骨あたりから肩に相当するボーンを伸ばします。
肩から下のボーンは普通にEキーの押し出しで大丈夫です。

腰から下のボーンは、最初に置いた背骨ボーンのRootから伸ばします。

足のボーンは、カメラを正面ではなく真横(テンキー3)に向けて押し出すとよいです。

これで、大雑把ですが身体全体分ボーンを作製できました。

動かしたい部位の数だけボーンが必要です

これは別のモデルになりますが、
ポーズを変更する場合、ボーンを動かすことになる関係上、複雑な動きをさせたい場合はその分だけボーンが必要になります。

こちらの例の場合は、くちばしの上部分と下部分にボーンを入れ、くちばしの開閉ができるようにしています。
人間のモデルの場合、こだわるなら指の一本一本、関節まで考慮してボーンを入れ込むなど。

そうすれば指を一本一本自由に動かせるので、ピースさせたり、ぐわしさせたりできますが、その分処理も重くなります。

ゲームなどで動作させる場合は、ボーンの数が多くなればなるほど処理も重くなるので、その点を考慮しながらボーンの配置を行いましょう。

ボーンの命名

このままだとどれがどこの骨かわからないので、名前をつけましょう。

アウトライナーでボーンの名前部分をクリックすると名前を変えることができます。

左右二つあるボーンの場合は、末尾に「 _R」、「_L」を付けて区別しましょう。

今回の例ではこのようにつけました。

メッシュとアーマチュアのペアリング

このままでは、メッシュとアーマチュア(骨格)はそれぞれ独立したオブジェクトでしかありません。
このふたつを関連付ける操作をします。

オブジェクトモードで、アウトライナーでShift + クリックでメッシュとアーマチュアを両方同時に選択します。
両方選択した状態で Ctrl + Pを押すと「メッシュとボーンのペアリング」を行うことができます。
今回は「自動のウェイトで」を選択します！なんと！これだけでメッシュがボーンに従って大体は動いてくれるようになります！すばらしい。

ペアリングが済んだら、ポーズモードに移行しましょう。

ポーズモードではボーンを曲げたり移動させたりしても、「ポーズ編集している」とみなされ、
ボーンのデフォルト位置や角度が変わるわけではありません。

ポーズモードでボーンを回転させてみると…

メッシュもいっしょに曲がりました！

ボーンを初期位置に戻したい場合は、
3Dビュー上でaキーで全ボーンを選択し、
alt + g で位置、alt + r で回転、alt + sで拡縮を元に戻すことができます。

ポーズモード(ボーンを選択すると水色になる状態)で、ボーンを回転させたりして、
動きを確認してみましょう。

いろんなポーズができちゃいます！楽しい！

この次は、ボーンの動きの状態を登録したものを繋げて作る「アニメーション」についてお伝えしたいと思います。

The post 【Blender】メッシュにボーン(Armature)を入れてポーズ変更できるようにする first appeared on ユガラボ.

【Blender】Sculptrisで作成したモデルをBlenderへインポートする

ユーリ — Fri, 04 Sep 2015 03:00:17 +0000

お仕事関連のメモがてら、3Dソフトのtipsをお送りいたします。

Suclptrisとは、粘土をこねるように3Dモデリングが簡単にできるモデリングソフトです！

フリーソフトですので、ご興味のある方は、是非触れてみてください！

モデリング操作方法の簡単な解説は、こちら↓の記事で触れていますので今回は割愛します。

ユガラボ | 2015/08/19
3Dプリンターで誕生日プレゼントを作った話

Sculptrisでモデル作製

まずは、モデリングをはじめます。

よいしょっ

できました。

Sculptrisで色も塗ってしまう場合は、画面右上のPAINTボタンを押して、ペイント画面へ。

(ペイント画面へ進むと、モデリングへ戻れないのでご注意ください。)

塗りました。

Blenderへモデルを持っていく為に、エクスポートの作業を行います。
Show advencedツールをクリックし、
SAVE TEXMAPを選択します。

この操作で、テクスチャの書き出しができます。
***.pngという拡張子pmgのファイルを保存します。

EXPORTを選択し、3Dモデルの書き出しを行います。

***.objという拡張子objのファイルを保存します。

元ファイル1つと書き出したファイル2つが生成できました。

なお、Sculptrisからファイルを保存するときは、ファイル名は必ず半角にしてください。
ファイル名に全角文字が含まれていた場合、フリーズするようです。

Blenderへインポート

Blenderを開き、ファイルからインポート > Wavefront(.obj)を選択し、Sculptrisでエクスポートしたobjファイルを選びます。

読み込みが完了すると、3Dモデルが画面上に生成されます。
3Dモデルは、点と線の集まりで、網目のように見えることから「メッシュ」と呼称します。

座標と縮尺を合わせる

読み込んだ直後は、このように座標上の地面よりも下までメッシュがめり込んでしまっています。

また、サイズもかなり大きめになっているかと思いますので、縮尺も調整しましょう。

縮尺合わせ

先に縮尺を合わせます。
画面左のツールから「拡大・縮小」を選択するか、もしくはsキーで拡大縮小を行うことができます。

キャラクターの場合、デフォルトで生成できる立法体に対してこのくらいの大きさにするといいあんばいだと思います。(アバウトでごめんなさい)

位置合わせ

縮尺を合わせたら、位置を合わせます。
画面中央下あたりの「グローバル」という座標表記の左にあるテトラなボタンを押すと、
オブジェクトの上に赤、青、緑の矢印が表示されますので、矢印を引っ張ることで位置移動ができます。

このさい、X方向の中心軸(赤い矢印)はSculptrisからインポートした時点で合っているはずなので、動かさないでください。
調整するのはY方向とZ方向です。

キャラクターやオブジェクトの基底部分(キャラクターの場合なら足の裏)が
中心座標(0,0,0)の上に乗るように移動させましょう。

位置あわせの際は、テンキーでのカメラ移動を利用しましょう。
テンキーの5で透視投影と平行投影とを切り替えることができますが、
メッシュが歪まない平行投影での作業がオススメです。

位置と縮尺を合わせると、オブジェクト情報の「位置」、「回転」、「拡大縮小」の値が読み込み時のデフォルト値から変化した状態になっています。

このままだと回転や移動をすると合わせた位置が元に戻ってしまう為、
補正後の位置・縮尺状態をデフォルト値として登録しなおす必要があります。

メッシュを選択した状態のオブジェクトモードから、
オブジェクト > 適用 > 位置、
オブジェクト > 適用 > 回転、
オブジェクト > 適用 > 拡大縮小
をそれぞれ選択してください。

これで、合わせた位置と拡大縮小値がデフォルト状態として適用されました。

テクスチャの適用

こちらは、前回記事からの引用になります。

テクスチャを持ってくる

Sculptrisのペイントで作ったテクスチャは別データなので、読み込むための操作を行います。

画面右側のアウトライナー内で対象オブジェクトを選択(1)し、
テクスチャメニュー(2)を選んで、新規(3)から新しいテクスチャを作成します。

新しいテクスチャで出来たら少し下にある「開く」を選んで、Sculptrisで書き出したテクスチャ(png)を取りに行きましょう。

テクスチャを読み込みましたが、まだ反映はされません。

次はビューメニューから「UV Editing」を選択し、UV(テクスチャ)編集用画面に移ります。

UV Editingモードはこのような二画面構成になります。

右画面の下の方にある「オブジェクトモード」を「編集モード」に切り替えます。

編集モードになったら「メッシュ」→「UV展開…」→「展開」を選択します。

ここまででテクスチャを反映する準備ができましたので、今度は左画面の下にある「開く…」を選んで、再びSculptrisで書き出した(.png)のテクスチャファイルを読み込みましょう。

そして再びビューメニューを「UV Editing」から「Default」にもどします。
シェーダーから「マテリアル」を選択すると…

お見事！やっとテクスチャが反映されました。

テクスチャ反映後

この時点で影が濃すぎてよくわからない場合は、マテリアルメニューから
シェーディングを調整しましょう。
「放射」の値を増やすと見やすくなると思います。

Blenderに持ってきたメッシュに対して、テクスチャを反映することができました。

今回はここまでです。
次は、アーマチュアを使用したポーズ変更について書きたいと思います。

メッシュに骨組みをいれて、メッシュを動かす作業です。

The post 【Blender】Sculptrisで作成したモデルをBlenderへインポートする first appeared on ユガラボ.

【SVG】raphael.jsを使ったらすんごい色々捗った

ユーリ — Thu, 16 Apr 2015 10:00:53 +0000

こんにちは、ユーリです！
少し前、SVGでアニメーションを行う記事を書きましたが、
その後の開発でブラウザ間の挙動の違いや、古いブラウザでうまく動かなかったりと色々と苦労いたしました。

うおー、やはり一定数の古い環境は切り捨てるしかないのかッ…！対応コードを書けば書くほど煩雑になってゆく！

そこに現れた救世主！！
SVG制御用ライブラリ…　Raphael.js　っ！！　 ↓さんぷる

自前のコードだけでの対応に限界を感じ、ライブラリを使用してめんどくさいところは全部吸収してもらうことにしました。
まさにうってつけのライブラリが見つかりました！
それがraphael.jsでございます。

raphael.jsのココがスゴイ！

■IEやsafqriの古いバージョンでも動作
特に何も意識せずとも、raphael.jsからの処理を使ってSVGを操作すれば、古いブラウザでもしっかり表示され、animateも問題なく動作してくれます！
svg要素を直接うごかしていたら、animateが動作しなかったり、変な位置に表示されたりしてしまい、たいへん苦労いたしました。
■jQueryライクな記述で、直感的に要素や値を操作できる
jQueryのような値の指定やメソッドチェーンが利用できます。
jQueryに慣れている方であればすんなり飲み込めるのではないでしょうか。
■基本的なeventをサポート
マウスオーバーやクリックのような処理も、svgの要素単位で実装ができます。
svg要素はマウス判定の範囲に複雑な形状を利用できるため、リッチな動作を実現できます。

サンプルコード

SVG要素を作成し、図形を描画する

SVG要素の大きさを指定する方法はいろいろありますが、いろいろ試した結果、
divなどのブロック要素で任意の大きさを指定し、その中にsvgをwidth:100%、height:100%で配置するのがいちばん安定しました。
この方法の場合、あとからdiv要素の大きさが変わっても、中身のSVG要素もあわせて伸び縮みしてくれます。
viewboxでサイズ指定するとさらに堅牢です。
PCで閲覧している方は、このページを表示しているウィンドウ自体のサイズを変えてみていただけると伸び縮みに対応していることを確認できるハズです。

上記のコードで、このように表示されます。

クリックやマウスオーバーなど、イベントの処理を書く

SVGを表示できたらぐにぐに動かしたいですよね！
先ほどようにSVGを生成してから、その要素に対してclick、mouseover、mouseoutの処理を定義してみます。
SVG要素が複雑な形をしていても、その形の通りに当たり判定が適応されます。

	var paper = Raphael("svg_wrap","100%","100%");
	paper.setViewBox(0,0,600,200,true);	//viewBoxの大きさを指定
	var path = paper.path("M548,95v8H349C347,130,326,150,300,150c-19,0-36-11-45-28c-8,16-25,28-45,28s-36-11-45-28c-8,16-25,28-45,28c-26,0-47-20-49.8-45H50v-8h20C72,70,93,50,120,50c19,0,36,11,45,28c8-16,25-28,45-28s36,11,45,28c8-16,25-28,45-28c26,0,47,20,49,45H548z"); //パスを追加する
	path.attr({	//パスのプロパティを変更
		fill	: "#AAA" ,
		stroke	: "#666" ,
		"stroke-width" : 3, //線の太さ
	});
	path.click(function(){	//クリック時の処理
		var r = Math.floor(Math.random () * 256);	//赤ランダム
		var g = Math.floor(Math.random () * 256);	//緑ランダム
		var b = Math.floor(Math.random () * 256);	//青ランダム
		var color = "rgb("+r+","+g+","+b+")";		//ランダム色生成
		path.attr({	//パスのプロパティを変更
			fill  : color,	//塗りつぶしの色を変える
		});
	});
	path.mouseover(function(){	//マウスオーバー時の処理
		path.attr({	//パスのプロパティを変更
			"stroke-width"  : 8,	//線の太さを変える
			opacity			: 0.8	//透明度を変える
		});
	});
	path.mouseout(function(){	//マウスアウト時の処理
		path.attr({	//パスのプロパティを変更
			"stroke-width"  : 3,	//線の太さを戻す
			opacity			: 1.0	//透明度を戻す
		});
	});

上記のコードで、このように表示されます。マウスイベントに対応しています！

アニメーションを行う

前回のSVGの記事で苦労してアニメーション処理を書きましたが、raphael.jsにかかれば、非常に簡単にアニメーション処理ができてしまいます；；
記述方法はjQueryのanimateとほぼ同じで、アニメーションさせるプロパティにsvg要素の色や座標を指定すればOKです。

	path.mouseover(function(){	//マウスオーバー時の処理
		path.animate({path:"M548,95v8H349c-54,7-23,2-49,2c-19.8,0-18,2-45,2c-25,2-25-1-45-1s-19,3-45-1c-27,5-25-1-45-1c-26,0-13,5-49-0.6H50v-8h20c31-2,23-1,49-1c19,0,17-11,45-0.8c25-3,25-3,45-3s22-3,45,3c29-4,25-1.2,45-1c26,0,27-0.7,49,3H548z"},250);	//パスの形を変更
	});
	path.mouseout(function(){	//マウスアウト時の処理
		path.animate({path:"M548,95v8H349C347,130,326,150,300,150c-19,0-36-11-45-28c-8,16-25,28-45,28s-36-11-45-28c-8,16-25,28-45,28c-26,0-47-20-49-45H50v-8h20C72,70,93,50,120,50c19,0,36,11,45,28c8-16,25-28,45-28s36,11,45,28c8-16,25-28,45-28c26,0,47,20,49,45H548z"},100);	//パスの形を戻す
	});

マウスオーバーでアニメーションします！

この前の苦労はなんだったのか…。

集合要素に対して処理を行う

要素をたくさん並べて処理をしたい場合、setという配列のようなクラスを使用して、forEachでそれぞれの要素に対してまとめて処理を行うことができます。

	var paper = Raphael("svg_wrap","100%","100%");
	paper.setViewBox(0,0,600,200,true);	//viewBoxの大きさを指定
	var rectarray = paper.set();		//svg要素の集合を格納する"set"を作成
	for( var i = 0, j = 20; i < j ; i++ ){	//20回繰り返す
		rectarray.push(						//setに対してsvg要素を追加する
			paper.rect(i*(j+10),100,20,80)	//paperの中に四角形を作成(x,y,w,h)
		);
	}
	rectarray.forEach(function(e,i){		//setの中身の要素それぞれに対して処理(element,index)
		e.attr({	//プロパティを変更
			fill	: "#8CC" ,	//塗りつぶしの色
		});
		e.mouseover(function(){	//マウスオーバー時の処理
			if( e.attr("y") == 0 ){	//yの値が0の場合
				e.animate({y:100,fill:"#88C"},200,"<>");	//下に移動するアニメーション
			}else{					//yの値が0でない場合
				e.animate({y:0,fill:"#C88"},200,"<>");	//上に移動するアニメーション
			}
		});
	});

マウスオーバーでアニメーションします！

やっぱりSVGはなめらかでたのしい！
これくらい手軽に扱えれば、どんどん夢が広がっていきます！

The post 【SVG】raphael.jsを使ったらすんごい色々捗った first appeared on ユガラボ.

【備忘録】SVGのpathをJavaScriptでぬるぬる動かしたかった

ユーリ — Wed, 18 Mar 2015 08:10:45 +0000

ぬるんぬるん！ぐねんぐねん！

こちらは、最近流行りのSVG！gif画像ではありません。
クリックして色を変えるなどの処理がリアルタイムで行えます。
IEやsafariなど一部のブラウザではうまく動作しないかもしれません。ゴメンナサイ。
これをjavascriptで制御しようとしたところ、いろいろ大変だった話。

※この記事は、SVGが動作する環境の方へ向けて書いています。動かない方はゴメンナサイ。

SVGは、ドットの集まりではなく、パス(点と線)の集まりである為、解像度は無限大です！
また、パスの値は数値で書かれていて、ページが表示されてからでも、パスの値を調節すれば、見た目をぐにぐに変えちゃったりもできます！
ただし、現時点ではブラウザによって対応していない環境があったり、大きさの指定がややこしかったりと、いろいろ課題もございます。

今回は、どうしてもSVGをぬるぬる動かしたい！という案件がございまして、工数はかかりましたが、なんとか要件を満たすことができました。
拙いやり方でしたが、とりあえず備忘録として書いておきます。

今回は、こちらのSVGを例にご説明いたします。

このSVGのソースはこちらになります。

これを別のhtmlページにコピペすると、上に表示されている緑色の円がそっくりそのまま表示されるはずです。
とてもシンプルな構造ですよね！

このソースの中には、図形を表すための図形の頂点の位置、図形の線の太さや塗りつぶしの色、などが書かれています。

ブラウザはこれを読んで描画を行うわけです。
例えば、この例の場合、円の形(点と線の集まり)を表しているのはこの部分です。↓
d=”M124,89c0,27-22,49-49,49s-49-22-49-49S47,40,75,40.6S124,62,124,89z”
そして、この中に書かれている点の位置を書きかえてしまえば、その場で表示を変えることができる、という寸法です。

ここまで前置き。詳しい説明に移ります。

SVG要素を動的に変更したい場合は、animateタグを使用する、もしくはJavaScriptで直接値を打ち込む、などの方法がございます。
まずは、animateタグについて。
animateタグの中身には、変更したい要素名と、値、動作スピード、動作条件などを記載します。

上記の例では、
[attributeName]…「fill」という要素、この場合fillなので塗りつぶしの色を、
[values]…「#88BB33;#CC6699」すなわち#88BB33から#CC6699に、
[dur]…「2.0s」2秒間かけて変化させる。という命令が書いてあります。
また、繰り返し回数[repeatCount]…「indefinite」で、アニメーションを無限に繰り返すという指定をしました。

このタグをどこに書くかというと、アニメーションさせたいSVG要素の内側に書きます。
こんな感じ。

これを実際に実行したものがこちら。

色が緑から赤にだんだんと変わっています。
延々と変わっています。

これくらいなら簡単な変化でありますが、このanimateタグは、pathの形状の変化にも使えてしまうのです。

そのためには、pathについて「動作前の状態」と「動作後の状態」を用意する必要があるわけです。
ということでAdobe Illustratorにてパス形状を編集する画面を例にいたします。
(SVGを書き出せるソフトウェアでしたら、他のものでも構いません。)
こちらが、動作前の状態とします。

次が、動作後の状態とします。

それぞれ、別名で保存からsvgとして保存します。

そして、保存したSVGファイルをテキストエディタで開きます。
図形の形状を表すpathの中の“d”の値がそれぞれ違うことが確認できます。

動作前の”d”:
M124,89c0,27-22,49-49,49s-49-22-49-49S47,40,75,40.6S124,62,124,89z
動作後の”d”:
M154,89c0,27-52,49-79,49s-49-22-49-49S47,40,75,40.6S154,62,154,89z
この”d”の中身の値を抽出して、animateタグに打ち込めば良いわけです！
animateタグの[attributeName]の中身を、図形の形状を表す“d”に変更し、
実際に変化する値である、[values]の中身に動作前、動作後のパス形状を”;”セミコロンで区切って入力。
こんなタグになりました。

動作させてみます。
ぬるっと動きました！

しかし、このままでは延々とアニメーションしてしまいます。
そこで、アニメーションの動作を制御するbegin要素を追加します。
begin=”indefinite”とすることで、animateの動作タイミングをJavaScriptで制御できます。
さらに繰り返し回数[repeatCount]…「1」と設定することで、動作回数を1度だけとします。
そしてこのanimateタグにidを付与します。
また、この後の動作のためにpathのタグにもidを付与しておきます。

そして、JavaScriptからidをもとにanimateタグをゲットし、
beginElement();を呼ぶことで、アニメーションを動作させることができます！

		//アニメを動作させる
		var animate = document.getElementById('circle_animate');
		animate.beginElement();

ボタンクリックで、beginElement();を呼ぶようにしてみました。

クリック！

クリックでアニメを動かすことに成功！ひとつ前に進んだ！

ただし、このままではアニメーションしても元に戻ってしまいます。
何故かというと、表示されているSVGの形状は、pathの場合”d”の中身で決まっていて、
アニメーションした後はその値による表示に戻ってしまうためです。
そこで今度は、アニメーションしたあとにpath要素自体の”d”の値をJavaScriptで書き換えてしまうようにします。

		//アニメを動作させる
		var animate = document.getElementById('circle_animate');
		animate.beginElement();
		//pathそのものの形状を変化させる
		var path = document.getElementById('circle_path');
		path.setAttribute('d','M154,89c0,27-52,49-79,49s-49-22-49-49S47,40,75,40.6S154,62,154,89z');

むくり！

アニメ後も、要素の形状がそのままになりました！

ここで、疑問が生まれます。動作前と後で、どんなパスを入れてもちゃんとアニメーションしてくれるのか？という問題です。
ためしに、単純なパスと複雑なパスをanimateタグで繋げてみます。

あれ。ぬるぬるしない。
調査の結果、どうやら動作前と後で、「パスを表す構成」が同じでなければうまく動いてくれないようです。
具体的には、点の数が変わったり、座標の指定方法が変わったりすると、ダメみたいです。
たとえば頂点が4つしか無い四角形から、頂点が5つある五角形に変形、ということはできないようです。
ただし、「頂点が5つだけど最初だけ四角形に見えるパス」などを用意すれば、その限りではありません。

さて、脱線しましたが、animateタグは「動作前」と「動作後」だけでなく、一つのタグでいくつも動作をつなげることができます。
変化させたいパスを“;”セミコロンでどんどん繋げていけば、こんな動きもできちゃうわけです！

↑クリックすると色が変わります(笑)

さらに、複雑な動作をさせたい方には、keyTime、keySplinesという、アニメーションのスピードを細かく設定できる要素もあります！
今回は少々手間のかかる方法でしたが、もっと簡単に動かせる仕組みが一般化していくとよいですね！

The post 【備忘録】SVGのpathをJavaScriptでぬるぬる動かしたかった first appeared on ユガラボ.

cocos2d-xの環境構築をしたら次は何をすればよいのか

ユーリ — Tue, 27 Jan 2015 04:00:47 +0000

こんにちは、ユーリです！
最近、次のスマホゲームを作成するべく、cocos2d-xでの開発をはじめました！

※cocos2d-xとは、iphoneとAndroid、両方のプラットフォームで2dゲーム開発ができるフレームワークです。
この記事は、ある程度プログラムへの知識がある方へ向けて書いています。

環境構築については、うまくまとめていらっしゃるサイト様がたくさんありますので、この場では省きます！
ですが、環境構築をして、テストプロジェクトを作り、サンプルの動作を確認、まで行ったら…次になにをしたらいいか、パッと見つからなかったため、私なりにまとめてみました。
※実行環境
mac OS X ver 10.9.5
cocos2d-x ver 3.3
Xcode ver 6.1.1

メインシーン用クラスを作る

ひとまずHelloWorldの次のステップとして、オリジナルの画面をつくることですね。
デフォで存在している「Classes」フォルダの中にオリジナルシーン用のクラスを作成します。

New File…でファイル作成。

C++ Fileを選びます。

クラス名を決めます。何でもいいんですが、MainSceneにしました。

決定すると、
MainScene.cpp　と
MainScene.h　の二つのファイルが作成されます。
ソースファイルはこのようにシーンごとに作成します。

Sceneの骨組みと、入力に反応するメソッドを作る

次に、シーンを制御するコンストラクタとデストラクタ、
そして入力に反応するイベントリスナーを実装します。
まずはヘッダファイルから。

//
//  MainScene.h
//  testproject
//
//  Created by yuri on 2015/01/26.
//
//

#ifndef __testproject__MainScene__
#define __testproject__MainScene__

#include "cocos2d.h"

class MainScene :public cocos2d::Layer
{
protected:
    MainScene();            //コンストラクタ
    virtual ~MainScene();   //デストラクタ
    bool init() override;   //初期化処理

public:
    static cocos2d:: Scene* createScene();
    CREATE_FUNC(MainScene);                 //createメソッドを作成
    CC_SYNTHESIZE_RETAIN(cocos2d::Sprite *, _cursor,Cursor);    //_cursor変数を作成し、ゲッターとセッターを実装する
};

#endif /* defined(__testproject__MainScene__) */

まずは必要最低限の実装です。
シーンクラスは、SceneではなくLayerを継承して作成します。 CREATE_FUNC(MainScene); はマクロで、create();関数の生成を行います。
CC_SYNTHESIZE_RETAIN(cocos2d::Sprite *, _cursor,Cursor); では、入力に反応して動くカーソル用のスプライトを生成します。

続いて、ソースファイルです。

//
//  MainScene.cpp
//  testproject
//
//  Created by yuri on 2015/01/26.
//
//

#include "MainScene.h"

USING_NS_CC;

MainScene::MainScene()
: _cursor(NULL) //コンスタラクタ内での初期化
{

}

MainScene::~MainScene()
{
    CC_SAFE_RELEASE_NULL(_cursor);  //オブジェクトをリリースする
}

Scene* MainScene::createScene()
{
    auto scene = Scene::create();
    auto layer = MainScene::create();
    scene -> addChild(layer);
    return scene;
}

bool MainScene::init()
{
    if(!Layer::init()){
        return false;
    }
    auto director = Director::getInstance();    //Directorを取り出す

    //初期化を行う
    this -> setCursor(Sprite::create("CloseSelected.png")); //指定画像をリソースにスプライトを生成
    _cursor -> setPosition(Vec2(100,100));                  //位置の定義
    this -> addChild(_cursor);                              //生成したスプライトをシーンに追加

    //タッチ操作の動作定義
    auto listner = EventListenerTouchOneByOne::create();    //一点タッチされたときのイベント定義
    listner -> onTouchBegan = [this](Touch* touch,Event* event){
        //タッチされたときの処理(この定義は必須である)
        auto touchPosition = touch -> getLocation(); //タッチした位置を取得
        _cursor -> setPosition(touchPosition);    //カーソルの座標にタッチ座標を格納
        log("タッチ位置 : %f , %f" , touchPosition.x , touchPosition.y );
        return true;
    };
    listner -> onTouchMoved = [this](Touch* touch,Event* event){
        //タッチしたあと移動した場合
        auto touchPosition = touch -> getLocation(); //タッチした位置を取得
        _cursor -> setPosition(touchPosition);    //カーソルの座標にタッチ座標を格納
    };
    director->getEventDispatcher()->addEventListenerWithSceneGraphPriority(listner, this);  //作成したイベントを画面にひもづける

    return true;
}

カーソル用の画像は、今回はデフォルトでリソースに入っているボタン画像を使っちゃいました。

お好みのものを使いたい場合、Resourcesフォルダ内に画像を追加する必要があります。

今回は初期化用の関数 init()と、Directorというクラスがポイントになります。
init()内では、リソース内の画像ファイルからスプライトの生成、タッチした時の挙動をイベントリスナーに登録。という二つの動作を実装しています。
Directorはゲーム全体を管理するクラスで、画面サイズや端末情報を得る際に使用します。
今回はこのDirectorクラスを通じて、画面にイベントリスナーを追加しています。
その他の部分はだいたいおまじないです。

あとは、AppDelegate.cpp内のHelloWorldの部分をMainSceneに置き換えれば完成です。

#include "AppDelegate.h"
//#include "HelloWorldScene.h"
#include "MainScene.h"

    // set FPS. the default value is 1.0/60 if you don't call this
    director->setAnimationInterval(1.0 / 60);

    // create a scene. it's an autorelease object
    //auto scene = HelloWorld::createScene();
    auto scene = MainScene::createScene();

背景は真っ暗ですが、タッチするとタッチした位置にカーソルがついてくる画面が完成しました！

今日はここまでに致します…。

The post cocos2d-xの環境構築をしたら次は何をすればよいのか first appeared on ユガラボ.

technical | ユガラボ

【VRChat】自作ワールド作りました！ いろいろメモ(作業手順、UdonSharp、軽量化など)

VRChatの紹介(軽く)

自作ワールド紹介

ワールドの土台作成

Blenderで床や柱をつくる

Unityで配置する

家具と小物の配置

UdonSharp製ギミックをつくる

弓を持つと矢を引けるようになる

矢を引いて手を離すと矢を生成して飛ばす

弓に付属のボタンを押すと矢を星として固定する

固定した星を線で繋いで星座にする

固定した星を順番に消す

おまけ:矢の衝突判定

おまけ:弓以外のギミック

ギミックの同期問題

同期の基本

うまく同期されないケース

その他、同期挙動の細かいところ

仕上げ(軽量化とベイク)

オブジェクトのStatic化

インポート設定による容量圧縮

ライトベイク

メッシュベイク

オクルージョンカリング

【WordPress】Google Calendar Events プラグインの導入方法

Google Calendar Eventsとは

インストール

API Keyの取得

カレンダーの作成

カレンダーIDの確認

カレンダーの設定(WordPress側)

動作確認

カレンダーのカスタマイズ

【Swift】プロジェクト内に置いたpng画像をNSDataとして取り出す

bundleの作成

bundleからpng画像を呼ぶ

使い方

解説

【css/備忘録】何をどうしてもテキスト選択してほしくない時の対処法

対処1:cssで選択を制限

サンプル

対処2:選択状態カラーを透明にしてしまう

対処3:touchstartのイベントをキャンセルする

サンプル

【Blender】ボーンを動かしてアニメーションを作成する

マスターボーンを追加する。

アニメーション登録前の準備

モーション作成！

別のモーションを作る場合

【Blender】メッシュにボーン(Armature)を入れてポーズ変更できるようにする

最初のボーンを追加する

メッシュの形状に合わせてボーンを生やす

左右対象のボーン

動かしたい部位の数だけボーンが必要です

ボーンの命名

メッシュとアーマチュアのペアリング

【Blender】Sculptrisで作成したモデルをBlenderへインポートする

Sculptrisでモデル作製

Blenderへインポート

座標と縮尺を合わせる

縮尺合わせ

位置合わせ

テクスチャの適用

テクスチャを持ってくる

テクスチャ反映後

【SVG】raphael.jsを使ったらすんごい色々捗った

raphael.jsのココがスゴイ！

サンプルコード

SVG要素を作成し、図形を描画する

クリックやマウスオーバーなど、イベントの処理を書く

アニメーションを行う

集合要素に対して処理を行う

【備忘録】SVGのpathをJavaScriptでぬるぬる動かしたかった

ここまで前置き。詳しい説明に移ります。

cocos2d-xの環境構築をしたら次は何をすればよいのか

メインシーン用クラスを作る

Sceneの骨組みと、入力に反応するメソッドを作る

【VRChat】自作ワールド作りました！いろいろメモ(作業手順、UdonSharp、軽量化など)