「技術メモ」カテゴリーアーカイブ

複数のcanvasをレスポンシブに配置

小さいcanvasをレスポンシブに配置するテスト

こんなのできる.一色ずつcanvas作成

要bootstrap4,jQuery

(任意)

chroma.jsライブラリ読み込み

    <!--chroma.jsライブラリ読み込み-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/chroma-js/2.1.0/chroma.min.js"></script>

スタイルシート作成(レスポンシブ用)

    <style>
    .wrapper{
  width: 100%;
  height: 100%;
}</style>

 

canvasの外側のDIV作成 wrapperクラスのサイズ

<div id="scales" class="wrapper"></div>

 

JSでcanvasを複数作成

<script>
    
    //chroma.js使用
var scales = document.getElementById('scales');
var color_list = chroma.scale(['blue', 'crimson']);//blueからcrimsonへの色変更
var divide = 5;//色変更の分割数
var i;

    //forでcanvasを複数作成
for (i = 1; i <=divide; i++) {
    
    //canvasを次々作成
    var mem_canvas;
    mem_canvas = document.createElement("canvas");
    mem_canvas.setAttribute("id","scaleCanvas" + i);//ID変更し複数作成可能に
    
    //jQueryでこのDIVの縦横を取得
    var w = $('.wrapper').width();
    var h = $('.wrapper').height();//未使用
    mem_canvas.width = w/divide;//canvas幅はwrapper÷分割数にする
    mem_canvas.height = w/divide;//正方形にする
    //作成するcanvasのCSS設定
    mem_canvas.style.width = (100/divide) + '%';//canvasに独自のCSSを入れる
    mem_canvas.style.height = 'auto';//高さはwrapper比にはできないんでautoにする    
    //色を塗る
    var context = mem_canvas.getContext('2d');
    context.fillStyle = color_list(i/divide);//
    context.fillRect(0, 0, w/divide, w/divide);//正方形に塗りつぶす
    //HTMLに追加
    scales.appendChild(mem_canvas);//親のDIV scalesに子として追加
}
    
    </script>

 

参考

http://shiru-web.com/2017/04/20/01-24/

https://qiita.com/ShinyaOkazawa/items/9e662bf2121548f79d5f

Bootstrap4でcanvasをレスポンシブ

メモ

cssファイル読み込むか,headあたりに<style>で以下を入れる

canvas {
  background-color: blue; 
  width: 100%;
  height: auto;
}

 

canvasを作成

<canvas id="canvas" width="300" height="300">
</canvas>

 

JS実行(jquery)

$( document ).ready(function() {

    var c=document.getElementById("canvas");
    var ctx=c.getContext("2d");
    ctx.beginPath();
    ctx.arc(95,50,40,0,2*Math.PI);
    ctx.stroke();

});

 

 

参考

https://stackoverflow.com/questions/23973932/responsive-canvas-in-bootstrap-column/23974225

バーチャルYoutuberになりたい

ふとバーチャルYoutuberのアプリを作りたくなったのでリソースを探すけど,詳しい説明が無かったのでメモ

必用なもの

iPhoneX以降,Unity2018.2以降,XCODE

 

Unity Packageを以下からダウンロードしインストール

https://github.com/Unity-Technologies/facial-ar-remote/releases

新規Unityプロジェクトを立ち上げる

 

【ビルドの設定】

  1. UnityをiOSビルドに変更
  2. faical-ar-remote>Remote>Scene>Clientを起動
  3. File>Build Settings>Player Settingsを起動
  4. other settingsのBundle Identifierを設定
  5. Target minimum iOS version を11.3以上にする
  6. Camera Usage Description に AR Face Tracking と入力
  7. Requires ARKit にチェックを入れる
  8. Scripting Define Symbols に ARKIT_1_5 と入力

 

【まずiPhoneアプリを作成】

  1. final-ar-remote>Remote>Scene>Clientを開いているか確認
  2. ビルドし,XCODEでアプリ化しデバイスにインストール
  3. 作成されたアプリを起動

【サンプルシーンを開いて確認】

  1. iPhoneとMacが同じルータ内に接続されているか確認
  2. final-ar-remote>Examples>Scenes>SlothBlendShapesを開く
  3. SlothBlendShapesのHierarchyのStreamReaderのInspectorのNetworkStreamのPortをiphoneアプリにポートと同じにする
  4. 再生ボタンをクリック
  5. ConsoleにIPアドレスが出る(2つIPアドレスが出る時はWifiと有線LANが見えているのでどちらか切るといいかも)
  6. iPhoneのアプリにConsoleに表示されたIPアドレスを入力
  7. iPhoneのアプリでConnectを押す

 

facialが動きます.お疲れ様でした.

 

参考サイト

https://github.com/Unity-Technologies/facial-ar-remote

https://blogs.unity3d.com/jp/2018/08/13/facial-ar-remote-animating-with-ar/

https://qiita.com/Yuzu_Unity/items/91fc2b6f8ebe0fc0e839

https://qiita.com/syoyo/items/f0ad3eb4ed3387ee6462

 

 

 

取得してSE再生,壁に当たってSE再生

スクリプトのみ

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
 
public class destroy_SE : MonoBehaviour
{
    public AudioClip impact;//音のファイル読み込み
    public AudioClip wallhit;
 
    AudioSource audioSource;//音の再生装置
 
    private void Start()
    {
        audioSource = GetComponent<AudioSource>();
    }
 
    //当たって消すパタン
    private void OnTriggerEnter(Collider other)
    {
 
        if(other.gameObject.tag == "wall")//タグがwallなら
        {
            //audioSource.PlayOneShot(wallhit, 0.7F);//impactを音量0.7で再生
 
        }
        else
        {
            Destroy(other.gameObject);
            audioSource.PlayOneShot(impact, 0.7F);//impactを音量0.7で再生
        }
        
 
        //点数を加算
 
 
 
        //加算した点数をUIに反映
 
    }
    //壁
    private void OnCollisionEnter(Collision collision)
    {
        if (collision.gameObject.tag == "wall")//タグがcollision なら
        {
            audioSource.PlayOneShot(wallhit, 0.7F);//wallhitを音量0.7で再生
 
        }
    }
 
}

 

はじめてのUnity2019−変更箇所

はじめてのUnityのチュートリアルサイト変更に伴い,取りこぼしている点について補足します.

変更後のサイト−>https://learn.unity.com/project/yu-zhuan-gashi?language=ja

 

この後の作業は以下の通りです

UIを作成>UI用のスクリプトを作成>ゲーム実行

続きを読む はじめてのUnity2019−変更箇所

Maya->Unity2019(4)

 

スクリプトの適用

chair.csは削除します.スクリプトを選択し,chairの歯車のアイコンからremove componentを選択して削除します.

 

次に,回転に対応したスクリプトを作成する.ファイル名はmove1.cs

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

[RequireComponent(typeof(CharacterController))]
public class move1 : MonoBehaviour
{

	public float speed = 3.0F;
	public float rotateSpeed = 3.0F;
	public float gravity = 10f;
	public float jumpPower = 5;

	private Vector3 moveDirection;
	private CharacterController controller;

	void Start()
	{

		// コンポーネントの取得
		controller = GetComponent<CharacterController>();//キャラクターコントローラを取得し,変数contorllerに収納

	}

	void Update()
	{

		if (controller.isGrounded)//接地していれば
		{

			// 回転
			transform.Rotate(0, Input.GetAxis("Horizontal") * rotateSpeed, 0);

			// キャラクターのローカル空間での方向
			moveDirection = transform.transform.forward * speed * Input.GetAxis("Vertical");

			// ジャンプ
			if (Input.GetButtonDown("Jump")) moveDirection.y = jumpPower;

		}
		else
		{

			// ジャンプ落下
			moveDirection.y -= gravity * Time.deltaTime;

		}

		//移動させる
		controller.Move(moveDirection * Time.deltaTime);

	}

}

 

このスクリプトをイスのモデルにアサインします.

 

Maya->Unity2019(3)

Animation Controllerの設定

  1. Assets>Create>AnimationControllerAnimationControllerを作成する.名前は何でもかまわない
  2. 作成したAnimationControllerをダブルクリックする
  3. Animation Controller画面が開かれる
  4. アセット内のイスの中にTake001というアニメーションファイルが入っているので,Animation Controllerにドロップする(勝手にEntryと接続される)
  5. ChairのAnimator作成したAnimation Controllerを入れる
  6. その際,Apply Rootmotionにチェックを入れること
  7. 再生してみる

Maya->Unity2019(2)

スクリプトを作成する

 

  1. キャラクタを操作するスクリプトを作成します
  2. アセット内で右クリック>Create>C# Scriptを選択
  3. ファイル名は chair にする
  4. 作成されたスクリプトを開く(Visual Studioなどが開く)
  5. 全部を以下に入れ替え,保存する
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class chair : MonoBehaviour
{
    CharacterController characterController;

    public float speed = 2f;
    public float jumpSpeed = 3f;
    public float gravity = 9.8f;

    private Vector3 moveDirection = Vector3.zero;

    void Start()
    {
        characterController = GetComponent<CharacterController>();
    }

    void Update()
    {
        if (characterController.isGrounded)
        {
            moveDirection = new Vector3(Input.GetAxis("Horizontal"), 0.0f, Input.GetAxis("Vertical"));
            moveDirection *= speed;

            if (Input.GetKey(KeyCode.Space))
            {
                moveDirection.y = jumpSpeed;
            }

        }
        moveDirection.y -= gravity * Time.deltaTime;
        characterController.Move(moveDirection * Time.deltaTime);
    }
}
  1. 椅子を選び,Add ComponentからCharacter Controllerを探し出し追加する
  2. Character Controllerの設定項目でCollider(衝突用簡易オブジェクト)の大きさを調整し,床面にめり込まないようにする(緑色のカプセルの大きさを調整する)
  3. 先ほど作成したchairのスクリプトも椅子に追加する

つぎへ

Maya->Unity2019(1)

 

以下も参考に

FBX Exporterが見つからないとき−>ここ

2018バージョン(IKを使用している場合)−>ここ

 

Maya→FBXに出力

Mayaで作成したファイルをUnityに読み込むには,FBXへの出力を選択し、FBX形式のファイルで出力し,それをUnity側で読み込みます.

 

今回はFKで作成したアニメーションを書き出します.IKを使った場合は別の方法となりますので,注意してください

  1. 椅子の最上位の階層を選択します
  2. ファイル>選択項目の書き出しのオプション□を選択します
  3. 選択項目の書き出しオプションが表示されるので,ファイルタイプをFBX exportにし,選択項目の書き出しをクリック
  4. 現在のプリセットがAutodesk Media Entertainment になっていることを確認し,ファイル名をつけて保存する
  5. ファイル拡張子が.fbxになっていることを確認する
  6. 保存したファイルをUnityに読み込む
  7. 読み込んだファイルを選択し,InspectorのModelのタブを選択
  8. Scale Factorを100にし,Applyをクリック
  9. つづいてAnimationのタブを選択し,アニメーションが再生されるか確認する
  10. Loop Timeにチェックを入れ,Applyをクリックしておくこと
  11. Planeなどを作成し,その上に椅子を配置してみる
    椅子の木目が消えていますが,次のステップで読み込みます

 

Mayaのテクスチャを書き出す

  1. Mayaに戻り,椅子の座面オブジェクトと,ハイパーシェードの適用したマテリアル両方を選択する
  2. 編集>ファイルテクスチャに変換□を選択
  3. X,Y解像度を512に,ファイルフォーマットをPNGにし,保存して閉じる
  4. これによって作成されたテクスチャ画像は,MayaプロジェクトフォルダのSourceimageフォルダに入っているので,これをUnityに読みこむ
  5. アセット内で右クリック>Create>Materialで,マテリアルを作成
  6. Albedoの隣に読み込んだテクスチャをドロップする
  7. 作成したマテリアルを椅子の座面にアサインする
  8. 椅子の座面が木目になりました

つぎ

unity->Arduino->Unity開発メモ2019

UnitySerianHandloerのUnity2018で使えたやつ

 

SerialHandler.cs

using UnityEngine;
using System.Collections;
using System.IO.Ports;
using System.Threading;

public class SerialHandler : MonoBehaviour
{
    public delegate void SerialDataReceivedEventHandler(string message);
    public event SerialDataReceivedEventHandler OnDataReceived = delegate { };

    //ポート名
    //例
    //Linuxでは/dev/ttyUSB0
    //windowsではCOM1
    //Macでは/dev/tty.usbmodem1421など
    public string portName = "/dev/cu.usbmodem2101";//mac
    public int baudRate = 9600;

    private SerialPort serialPort_;
    private Thread thread_;
    private bool isRunning_ = false;

    private string message_;
    private bool isNewMessageReceived_ = false;

    void Awake()
    {
        Open();
    }

    void Update()
    {
        if (isNewMessageReceived_)
        {
            OnDataReceived(message_);
        }
        isNewMessageReceived_ = false;
    }

    void OnDestroy()
    {
        Close();
    }

    private void Open()
    {
        serialPort_ = new SerialPort(portName, baudRate, Parity.None, 8, StopBits.One);
        //または
        //serialPort_ = new SerialPort(portName, baudRate);
        serialPort_.ReadTimeout = 20;//Add this 2019
        serialPort_.Open();
        serialPort_.NewLine = "\n";//Add this 2019

        isRunning_ = true;

        thread_ = new Thread(Read);
        thread_.Start();
    }

    private void Close()
    {
        //isNewMessageReceived_ = false;
        isRunning_ = false;

        if (thread_ != null && thread_.IsAlive)
        {
            thread_.Join();
        }

        if (serialPort_ != null && serialPort_.IsOpen)
        {
            serialPort_.Close();
            serialPort_.Dispose();
        }
    }

    private void Read()
    {
        while (isRunning_ && serialPort_ != null && serialPort_.IsOpen)
        {
            try
            {
                message_ = serialPort_.ReadLine();
                isNewMessageReceived_ = true;
            }
            catch (System.Exception e)
            {
            //    Debug.LogWarning(e.Message);
            }
        }
    }

    public void Write(string message)
    {
        try
        {
            serialPort_.Write(message);
        }
        catch (System.Exception e)
        {
            Debug.LogWarning(e.Message);
        }
    }
}

 

Unityボタン側スクリプト

Btn.cs

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class Btn : MonoBehaviour
{
    //先ほど作成したクラス
    public SerialHandler serialHandler;


  void Start()
    {
        //信号を受信したときに、そのメッセージの処理を行う
        serialHandler.OnDataReceived += OnDataReceived;
    }

    void Updata()
    {
        //文字列を送信
       // serialHandler.Write("hogehoge");
    }

    //受信した信号(message)に対する処理
    void OnDataReceived(string message)
    {
        var data = message.Split(
                new string[] { "\t" }, System.StringSplitOptions.None);
        if (data.Length < 2) return;

        try
        {
         
        }
        catch (System.Exception e)
        {
            Debug.LogWarning(e.Message);
        }
    }



    /////ここから追加します
    /// 
    /// 
    /// 
    ///
    public void sendOn()
    {
        //Arduinoに文字列onを送る
        serialHandler.Write("4");
    }

    public void sendOff()
    {
        //
        serialHandler.Write("5");
    }
    public void ledOn()
    {
        //
        serialHandler.Write("6");
    }

    public void ledOff()
    {
        //
        serialHandler.Write("7");
    }

}

 

Arduino側コード

#include <Servo.h>
const int LED_PIN = 13;
int SERVO_SOCKET = 9;
Servo servo;
String InByte_strings;
int InByte;

void setup() {
 Serial.begin(9600);
 pinMode( LED_PIN, OUTPUT );
servo.attach( SERVO_SOCKET );
}

void loop() {
  
  if(Serial.available()>0){
    InByte_strings=Serial.readStringUntil(';');
    InByte=InByte_strings.toInt();
    Serial.println(InByte);

     switch (InByte){
    case 4:
      servo.write( 90 );
      break;
    case 5:
      servo.write( 180 );
      break;
      case 6:
      digitalWrite(LED_PIN,HIGH);
      break;
      case 7:
      digitalWrite(LED_PIN,LOW);
      break;
  }
}
}