読者です 読者をやめる 読者になる 読者になる

196の日記

完全に開発メモと雑談、その他忘れそうな計算式などを書き溜める場所になっています!

Unity~sprite画像をスライスする・ドット絵

unity

タイトル通りです!笑


 いろんなことに手を伸ばしながら、Unity でも LEAPMOTION を使用したマイクラ風のゲームでもちまちま作ろうかなと奮闘しているところです。まだ全然進んでいないんですけれどね笑 そんな中、本日は地形を生成する正方形のブロックの汎用プレハブを作っていました。


Cubeに取り付けたら重い?!

 一度、 Unity 内の cube オブジェクトをそのまま使用して、地形を生成したのですが、これが理想とはかけ離れた起動の遅さ!びっくりしてしまいました。一応、本家のゲームはすでに購入済みで一通り遊んでいるのですが、あれを想像していたのでがっかりしてしまいました。。。けど、闘争心は湧きました笑 しかし、いくら頑張ってもこのちんけな僕の脳では流石に限界がありそうなので、無限マップやその他もろもろは最初から諦めます。そのうえで、自分なりに工夫をしてなるべく軽くしてみようかな!とそう思ったわけです!


今日の工夫

 ということで、 cube は使いません!Spriteを立方体にしてそこにコライダーをつけて、ブロックにしようと思います!それと、Unity で効果があるかはわかりませんが、pixcel per unit を100から16にしようと思いました!これは、マイクラのブロックのドット絵が1辺16bitだったことが理由です。小さく描画した方が軽そうだな、と笑 というわけで、1面ずつ画像を保存・読み込みするのはわかりにくいし、重くなると思ったので、6面分のSprite画像から一面ずつ読み込もうと思い立ちました。。。ようやく本題です。


が、、16bitの画像がぼやける

 6面分の画像をTextureとして保存しておいて、Sprite.Createでその画像を分割!んでそれぞれの面に切り出したSpriteを張り付けて、終了!!!と思ったのですが。。あれ、おかしい。。1辺16bitの画像がぼやけている。。どうやらぼかしがかかっているようです。そのまま拡大して表示してくれれば楽なのに。。ということで、ググりました!原因だと思われるのは、 Filter Mode の部分です!


Filter Mode.Point

 この FilterModeはどうやら画像をぼかしてくれるフィルターらしく、使い方によってはありがたいはずですが、今回は迷惑でしかありません!そこで、元の Texture 画像の FilterMode の設定を Point 設定しました!!これでOK!!!。。だと思った?笑 残念、まだボケてます。。そこで僕の予想、、”これ、切り出した後の Sprite の FilterMode が Point じゃなくなっているのでは?!” というわけで、切り出した Sprite の中の Texture の FilterMode を一つずつスクリプトから Point に設定しなおしてみました!   。。。えええ!これでもボケる??!嫌われてる?!笑


Spriteをスライス!!

 そんな時、ふと思い出したことがありました。”昔ドット絵の2DアニメーションをSprite画像から作成したときは全くここでハマらなかったぞ??”はい!出ました答え!スクリプトで画像をスライスするのではなく、初めから FilterMode = Point の画像をスライスしてしまえばいいのです笑
というわけで、下の画像はその設定などの画像。 Sprite Mode を Multiple に設定して、Sprite Editor を押せば分割がエディットできます!

f:id:thinline196:20161019224935p:plain

 あとはスクリプトから呼び出してあげればOKです!ちなみに、僕は立方体の面それぞれに0~5の番号を割り当てたので、どこに何を貼るかは番号で指定しています。

 Sprite[] tiles = Resources.LoadAll<Sprite>("Tile/" + (int)i);

 //ここから2行を全ての面に適用
 Sprite s = System.Array.Find<Sprite>(tiles, (sprite) => sprite.name.Equals((int)i + "_0"));
 surface[0].sprite = s;

 これで、しっかり16bitの画像をきれいに貼ることができました!



f:id:thinline196:20161019230032p:plain
とりあえず並べてみた図