hayateasdf's blog

Unity,C#, javascript,C++,python,batなど

一旦、CSSについてまとめてみる

目次

  • 基本

    • ボックスモデルを意識
    • display系は覚えろ
    • marginとpaddingの使い分け
  • コーディング

    • class vs id
    • ボックスモデル内の繋がり(親子関係)
  • 効率

    • すぐ試せるサイト
    • ダミーテキスト、ダミー画像

ボックスモデルを意識

https://mdn.mozillademos.org/files/13647/box-model-standard-small.png

引用元画像: https://mdn.mozillademos.org/files/13647/box-model-standard-small.png

レイアウトをする場合にボックスを配置していく。 そして、ボックスの中に一回り小さいボックス、そのボックスの中に一回り小さいボックス、…というようになる。 marginとpaddingは見えない領域なのでborder: solid red;とかしてなんとなく確認。

display系は覚えろ

要素は最初からdisplayプロパティの初期値が設定されている。例えば、h1, h2, divなどはdisplay: block;になり、その前後に改行が入る。 a, spanなどはdisplay: inline;となり、文章のなかで、そのまま繋げて書くことが可能。display: inline-block;では、ul>li*3みたいな感じでリスト並べたときに、横並びにしたい時に使われてる。

marginとpaddingの使い分け

良くわからん。が、自分がやっている感じだと ボックスモデルを意識して、デザイン的にcontentの周りの余白を調整するならpadding、隣り合ったボックスモデルの間隔を広げたいなら、margin

class vs id

htmlのattributeで記述する際、javascriptを使用して要素を特定したい場合はidcssclassって元から分けておくと 影響範囲を分離できるので管理がしやすい という情報をHTML5/CSS3モダンコーディング という本で見たので実践。

ボックスモデル内の繋がり(親子関係)

<div class="box">
    <div class="box-title">TITLE</div>
    <div class="box-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas libero felis, finibus eu dignissim sit amet, tristique venenatis turpis. </div>
</div>
.box {
    padding: 5px;
    border: solid orange;
}
.box-title {
    font-size: 1.3rem;
    font-weight: bold;
    padding: 10px;
}
.box-text {
    font-size: 0.9rem;
    letter-spacing: 0.5px;
    line-height: 1.2;
}

親の名前の後に、子の名前を付けるとかのルール作っておくと後で見やすい。なんとなくでcssのコードが読める。 大勢でやっている場合は誰かがルールを作っている可能性があるので、それに従うといい。

すぐ試せるサイト

https://jsbin.com
cssの使い方を試したいときなどすぐに書いて、確認できる。

ダミーテキスト、ダミー画像

http://www.lipsum.com/
一般的なダミーテキスト。意味のない文字列の羅列になっている。

https://placehold.jp/
ダミー画像。背景色、文字、画像サイズ変更などもできる。

マテリアルデザインの動きをjQueryのみでやる

f:id:hayateasdf:20170509191001g:plain

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<style>
.container {
    background: #224;
    overflow: hidden;
    width: 400px;
    height: 400px;
    padding: 10px 0 0 10px;
}

#first {
  background-color: #e6005c;
  width: 50px;
  height: 50px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  
}
#first.anim {
  animation: first 0.4s linear forwards;
}
#first.shrink {
  animation: first__shrink 0.3s ease forwards;
}

#second {
  position: relative;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  transform: scale(0);
  background-color: white;
  top: -50px;
  z-index: 100;
}
#second.anim {
  animation: second 0.2s linear forwards;
}
#second.shrink {
  animation: second__shrink 0.2s linear forwards;
}

@-webkit-keyframes first {
  from {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  to {
    -webkit-transform: scale(50);
    transform: scale(50);
  }
}
@-webkit-keyframes first__shrink {
  from {
    -webkit-transform: scale(50);
    transform: scale(50);
  }
  to {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@-webkit-keyframes second {
  from {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  to {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@-webkit-keyframes second__shrink {
  from {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  to {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
}
</style>
<div class="container">
    <div id="first"></div>
    <div id="second"></div>
</div>

<script>
$(function() {
    var $first = $('#first');
    var $second = $('#second');
    $first.on('mousedown', function(e) {
        $first.removeClass('shrink');
        $second.removeClass('shrink');
      
        $first.addClass('anim');
        $second.addClass('anim');
    });
    $second.on('mousedown', function(e) {
      $first.removeClass('anim');
      $second.removeClass('anim');
      
      $first.addClass('shrink');
      $second.addClass('shrink');
    });

});
</script>

Unity シーンを管理してトランジションを行う。uGUI

設計

シーン遷移する前にデータ読み込み(通信処理)でコルーチンを使うと思うので、トランジションはIEnumeratorで書く。

とりあえず適当にインターフェイスとか定義

using System.Collections;
using UnityEngine;

public interface ITransition
{
    IEnumerator onStartTransition();
    IEnumerator onEndTransition();
}
public abstract class ATransition : MonoBehaviour, ITransition
{
    public abstract IEnumerator onStartTransition();
    public abstract IEnumerator onEndTransition();
}

シーンマネージャで各シーンから遷移処理の呼び出し

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

public class SceneManager : MonoBehaviour
{
    #region singleton
    private static SceneManager instance = null;
    public static SceneManager Instance
    {
        get
        {
            if (instance == null)
                instance = (SceneManager)FindObjectOfType(typeof(SceneManager));
            return instance;
        }
    }
    void Awake()
    {
        if (SceneManager.Instance != this)
            Destroy(this);
    }
    #endregion

    [SerializeField]
    List<ATransition> cache;
    public T Cache<T>() where T : ATransition
    {
        return (T)cache.FirstOrDefault(x => (x as T) != null);
    }

    public void Transition(ATransition now, ATransition next)
    {
        StartCoroutine(_Transition(now, next));
    }
    private IEnumerator _Transition(ATransition now, ATransition next)
    {
        if (now != null)
            yield return now.onEndTransition();

        yield return next.onStartTransition();

        Debug.Log(string.Format("transition: end -> {0}, start -> {1}", now == null ? "null" : now.GetType().Name, next.GetType().Name));
    }
}

遷移用にScene1,Scene2クラス作成

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

public class Scene1 : ATransition
{
    public override IEnumerator onStartTransition()
    {
        gameObject.SetActive(true);
        yield return null;
    }
    public override IEnumerator onEndTransition()
    {
        gameObject.SetActive(false);
        yield return null;
    }
    public void onclick()
    {
        var next = SceneManager.Instance.Cache<Scene2>();
        SceneManager.Instance.Transition(this, next);
    }
}
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class Scene2 : ATransition
{
    public override IEnumerator onStartTransition()
    {
        gameObject.SetActive(true);
        yield return null;
    }
    public override IEnumerator onEndTransition()
    {
        gameObject.SetActive(false);
        yield return null;
    }
    public void onclick()
    {
        var next = SceneManager.Instance.Cache<Scene1>();
        SceneManager.Instance.Transition(this, next);
    }
}

ヒエラルキー

  1. canvas作成。
  2. canvas内でCreate Empty > 名前をScene1に変更。その子でボタン作成。
  3. Scene1にScene1.csをadd compenent。ボタンにonclickを登録。
  4. canvas内でCreate Empty > 名前をScene2に変更。その子でボタン作成。
  5. Scene2にScene2.csをadd compenent。ボタンにonclickを登録。

  6. 適当にCreate Empty > SceneManager.csをadd component。

  7. SceneManager.csのインスペクターのキャッシュの部分に上記で作成したScene1,Scene2を追加。
  8. 適当にエントリーポイント用のスクリプト作って開始。※Scene1,Scene2は非アクティブ状態にしておく。
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class EntryPoint : MonoBehaviour {
    void Start() {
        var next = SceneManager.Instance.Cache<Scene1>();
        SceneManager.Instance.Transition(null, next);
    }
}

ボタンを押せば遷移するようになる。

シーンにCanvasGroupをadd componentして、alphaのアニメーションなどを行えばそれっぽくなる。

[SerializeField]
CanvasGroup group;

public override IEnumerator onStartTransition() {
    gameObject.SetActive(true);
    yield return startAnimation();
}
public override IEnumerator onEndTransition() {
    yield return endAnimation();
    gameObject.SetActive(false);
}

private IEnumerator startAnimation() {
    group.blockRaycasts = false;
    var start = Time.time;

    var now = start;
    while (now - start < 1.0f) {
        group.alpha = Mathf.Lerp(0f, 1f, now - start);
        yield return null;
        now = Time.time;
    }

    group.alpha = 1f;
    group.blockRaycasts = true;
}
private IEnumerator endAnimation() {
    group.blockRaycasts = false;
    var start = Time.time;

    var now = start;
    while (now - start < 1.0f) {
        group.alpha = Mathf.Lerp(1f, 0f, now - start);
        yield return null;
        now = Time.time;
    }
    
    group.alpha = 0f;
    group.blockRaycasts = true;
}

avastがskypeをブロックしていた件

avast .. 無料アンチウイルスソフト

最近skypeの動きが重い(というか止まっている)ので、skypeをアンインストール→再インストールとかしてみたが変わらず。

試しにavastを無効にしてskypeを起動したら通常通りの動きに戻った。
一応まとめておく
右下のタスクバーからアバストのアイコンをクリック。
設定 > 一般 > スキャンからの除外
C:\Users\Administrator\AppData\Roaming\Skype\* ※Administratorの部分は現在のユーザ名のフォルダになります
C:\Program Files (x86)\Skype\Browser\*
の2つを追加
skype再起動

unity Anima2D test

f:id:hayateasdf:20170321183007p:plain

階層

  • skeletal_human

skeltal_human

root要素
animator,PoseManagerなど全体制御のスクリプトを保持

Bones


(白い部分)

SpriteMesh

画像素材
ポリゴンと重み付け
骨との連動
(緑の部分)

IKs

Inverse Kinematics
ターゲットの骨が回転した時、親の骨も動くようになる。
(青丸の部分)

作り方

画像を探す 棒人間

各パーツに分解する f:id:hayateasdf:20170321183023p:plain

Unityで読み込んでSprite Mode -> Multipleに変更し、Applyして、SpriteEditorを開いて、さっき分けた部分を適当に矩形に分割していく。

f:id:hayateasdf:20170321183108p:plain

Projectタブでさっきの画像を右クリックし、Create > Anima2D > SpriteMesh

で、出てきたパーツをSceneタブに追加していき、棒人間を組み立てる。(元が白色なので骨の色とカブり、見づらいので適当な色に変えておく)

レイヤーはInspector > Sprite Mesh Instance > Order in Layerで変えれた。

その後、骨を付けていく。
各画像(SpriteMesh)のInspector > Sprite Mesh Instance > Bonesの部分に骨を追加していく。

Unity > Window > Anima2D > SpriteMesh Editorを開く。

f:id:hayateasdf:20170321183127p:plain

SpriteMesh EditorBindを押して骨を関連付ける。
あとは適当にSliceテッセレーションとかいじってポリゴン増やしたり、Weight toolauto,Smoothを適当に重み付け。

これを各パーツで行い、腕、足にIKを追加したら完成。

f:id:hayateasdf:20170321183118p:plain

※ 骨の部分とかSpriteMesh EditorとかIKとかの部分をだいぶハショっているので、詳しくはAnima2DのUserGuide.pdfを読んでください。

f:id:hayateasdf:20170321183139p:plain

動かすと身体が切れるので、各パーツの付け根部分を衣服とかで隠せば自然な感じになると思われる。

f:id:hayateasdf:20170321183159g:plain