こんにちは。技術部平山です。 この記事では、UnityEngine.UI.Image、つまり「普通のImage」 だと余計な所まで塗ってしまってGPU負荷が大きいので、 塗る面積を削ってみた、というお話をいたします。 一枚目の画面写真で、右端が普通のImageで、左と中央が今回作ったものです。 左はSpriteに入っている頂点を利用したもので、頂点は増えますが面積が減ります。 中央は、黒い枠を重ねて顔のところだけを切り出したもので、 手動で頂点を編集することでマスクなしでの切り出しをしています。 二枚目の画面写真はoverdraw表示で、塗る面積が減っていることがわかります。 また、画像をSpriteAtlasにまとめている場合、パッキングをtightにしたり回転を許したりすると、 普通のImageでは正常に表示できなくなりますが、今回はそこにも対応しました。 より小さな容量に詰めることが

面白い議論が上がっていたので、少し試しにやってみました。 顔だけアイコンでマスクをするのは勿体無い バストアップのスプライトを用意する やり方 オマケ：ポリゴンの切り抜き オマケ：Atlasを使用する場合での注意 関連 顔だけアイコンでマスクをするのは勿体無い ゲームでUIを見る時、立ち絵の一部を切り取ってバストアップのアイコンにするというのはよく見ます。 で、例えば上のような画像をuGUIで作ろうと思った時に、真っ先に思いつくのはMaskやRectMask2Dを使用するアプローチでしょう。このアプローチならば、立ち絵から一部を切り出して表示することは簡単に実現出来ます。 マスクを使用した立ち絵の一部切り抜き ただしマスクを使用した画像の切り抜きは殆どのケースでバッチを破壊しますし、それ自体割と重い処理でもあります。トップの画像は各キャラクター毎にマスクで切り抜きしていますが、これを表示す

はじめに この記事を執筆するに当たっての作業環境は以下の通りです。 Unity (version 2017.1.0b9[最新のβ版]) Visual Studio Code (Version 1.13.0) また、参考資料からそのまま抜粋を行なった文章に関しては、できるだけ引用&リンク状態にしています。 ご了承ください。 注意 出来上がったSprite AtlasはAnima2Dには使えなかったっぽいし、テクスチャにも変換できなさそうでした。誰かAnima2Dに使う方法を知ってたら教えてください。 素材紹介 今回は、キャラメイクファクトリーさんという、無料でアバターが作れるサービスを利用しました。以下の黒髪ツインテJKをバラバラに解体して編集を行い、Unityにインポートします。ちなみに普通はUIの画像群とかに用いると思われます。今回はたまたまです。 実際に作成してみる これらのパーツ画像

Unityで何気なくスプライトを使っていると上下左右に現れる謎の線。 時としてゴミのような点として現れたり、画面が動いている間だけ現れたりもします。 さらには普段は出ないのに画面サイズ（解像度）が変わったときだけ出てきたりと、とにかく厄介なやつです。 ニコニコの自作ゲーム動画とかを見ていると結構悩まされている人が多いようなので、 自分の知っていることについて書いておきます。 グラフィックの専門家ではないので「これをすればもう大丈夫」とまでは言えないのですが、 この現象で困っている人は一度試してみると問題が解消されるかもしれません。 【追記 2016/11/25】コメントにてご指摘いただいたスプライトパッカーについての説明を追加。 スプライト端の線 原因 シンプルな解決法 スプライトパッカー（Sprite Packer）の使用 【追記】 原因そのものの解決法 テクスチャ補間の設定 アンチエイ

[Unity]ResourcesからスライスしたSpriteを取得する3つの方法で紹介したが、もう少し詳しく書いておこうと思う。 Sprite.Createでは、単純に4つの引数を使用する。 ・texture:スプライトとして抽出する元のテクスチャ ・rect：テクスチャのUV(x,y)とスプライトのサイズ(width,height) ・pivot:スプライトの回転軸 ・pixelsToUnits: ワールド空間単位に画像内の画素をマッピングするためにスケーリング このまま生成すると透明の部分をポリゴン的に切り抜いて表示されてしまう。多くの場合はその方がフィルレート的にパフォーマンスが高そうだが、場合によってはQUADで表示したいといった場合もあると思う（ポリゴンが細かすぎてバッチングが云々って場合）。 そんな時は6番目の引数にSpriteMeshType.FullRectを設定する。（確

今回はSpritePackerとAssetBundleの挙動について少しメモします。 SpritePackerとAssetBundleといふ便利機能 SpritePackerでパックしたテクスチャアトラスはAssetBundleに自動的に組み込まれる SpritePackerでパックしたテクスチャアトラスの部分組込は出来ない AssetBundleの依存関係を構築しない場合、2重にテクスチャが読まれる事がある Spriteシェーダーを使用したマテリアルを用意する 関連 SpritePackerとAssetBundleといふ便利機能 SpritePackerは2Dゲームでよくある手法で、スプライトを一つにまとめる事でSetPassの発生を抑える機能です。この機能を使用すると、テクスチャにタグを設定することで、スプライトをテクスチャアトラスとしてまとめめる事が出来ます。 通常はスプライトを事前

概要 普段はTexturePackerを使っているのでSpritePackerについてはよく知らなかったのですが、 「SpritePackerでまとめたテクスチャって別ファイルとして生成されないけどAssetBundle化したい場合どうするの？」 という趣旨の疑問を投げ掛けられたので、いろいろ検証してみました。 今回はその結果から得られた結論とざっくりとした手順を綴ります。 ※検証環境は Unity 5.3.1 です。 結論 パックしたテクスチャを同じアセットバンドルに突っ込めばOK! とっても簡単ね！ 手順 1. Textureの設定 まとめたいテクスチャの設定は、 ファイルはResources外に SpriteModeをSingleに PackingTagを同じ値に 圧縮設定も統一 する必要があるよ。 TexAとTexBを一つのアトラスにまとめたい場合は、 こんな感じ。 2. Pack

今回はAssetBundleの中に格納したMultiple Spriteから特定のスプライトを取得する方法と、その挙動についてです。 Multiple Spriteの取得方法について AssetBundle.LoadAllAssetsでは駄目 AssetBundle.LoadAssetWithSubAssets 不要なスプライトの破棄 特定のスプライト参照からスプライトを取得する SpritePackerでAtlas化したMultiple Spriteと挙動 関連 Multiple Spriteの取得方法について AssetBundleからSpriteを取得したい場合、それが単品なら単純にAssetBundle.LoadAsset<Sprite>で取得する事が出来ますが、対象がMultiple Sprite、つまりスプライトを分割した内容ならばそうはいきません。 AssetBundle.L

Unity3Dでバージョン4.3から2Dでの画像表示(Sprite)がサポートされました。 また、同時に1枚の画像から複数のSpriteを作成する「Sprite Editor」 複数のSpriteを1枚の画像(Sprite Sheet)に変換する「Sprite Packer」の機能が追加されています (2014.1.8現在はSprite PackerはDeveloper Preview中..そしてProのみ..) (※なんでわざわざ1枚の画像にまとめるのがいいの？と思う人はDrawCallの説明へ http://docs-jp.unity3d.com/Documentation/Manual/DrawCallBatching.html 私個人は4.2.2までは 1. PNG画像をTexture形式で保持しておき、 2. Materialに貼り、 3. それを板ポリゴンに貼り、 4. ポリゴ

NGUI で Tiled Sprite を使った所、タイルの繋ぎ目の部分に1px透過が発生しました。 同梱のサンプルを参考に違いを探した所、 Atlas の Prefab を選択した時に Inspector に表示される Border の値が異なりました。 自分はこの部分の値が全て0(多分、デフォルトの値)でしたがサンプルでは全て1でした。この部分を1に設定した所隙間なく表示される様になりました。

ついにユニティちゃんの立ち絵素材が公開されましたよ。超可愛いユニティちゃんとユーコちゃん*1、あとミサキちゃんの立ち絵が使えるようになった！ヤッタネ☆ さらに嬉しい事に解像度は1620×2048と非常に高解像度で、キャラクター全体像をのイメージが使用されているよ！ なんと1キャラに表情を5つ用意するとメモリを85MB、それを3体表示するとメモリを255MBも消費出来るよ！ブイブイ☆ さらにこんな大きなテクスチャであればロード時間も追加出来るよ！ 5.3から非同期なテクスチャロードも出来るようになったけど完璧なシームレスでは無いから、ゲームをガっと止めるかカクカクに出来るよ！イエイ☆ まあ、最近のモバイルだと実は（LZMA圧縮したAssetBundleとかandroidのresourcesから持ってこない限り）結構高速で読めるし、メモリも（コンソールと違って）潤沢にあるので最悪コレでも良いの

OPTPiX SpriteStudio は超汎用の 2D アニメーション作成ツールです。 コンシューマーゲームやスマートフォンアプリ、各種ゲームなどに使用される2Dキャラクターのアニメーションや、ウィンドウなどのインターフェース周りの動き、攻撃時などに展開されるエフェクトのアニメーションなど、幅広いアニメーションを作成することができます。 作成したアニメーションはゲームエンジン等に組み込んで使用する他、アニメーションGIF・PNG・WebPやムービーとして出力することもできます。また、Ver.7.1からは音声ファイルの再生やテキスト表示にも対応し、作成できるアニメーションの幅が広がりました。 多彩な機能でキャラクターを生き生きと動かす メッシュ・ボーン機能を使用することにより、より豊かな表現を実現できるようになりました。髪の毛や布、棒のしなり等のアニメーションはもちろん、２Dイラストを立体

(2012/05/07 追記) 何故か公開されていたスライドとソースコードが削除されたみたいです。 ソースコードは自分がフォークしたものがこちらに有りますのでそちらを参照下さい。 (追記ここまで) 始まり 第7回テックヒルズ「Game Engines!!どのゲームエンジンを選ぶ？」というイベントが開催。後日、記事が掲載される。 こちらの記事は11月18日公開。 【セミナーリポート】あなたの最適な開発環境はUnity？それとも…第7回テックヒルズ「Game Engines!!どのゲームエンジンを選ぶ？」開催！ | Social Game Info http://gamebiz.jp/?p=124209 こちらの記事は11月25日公開。 【インタビュー】第7回テックヒルズ後日談…クルーズ浦田氏に聞くゲームエンジンの未来、話題のエンジン比較の真相とは？（検証コードなど追記） | Social G

Sprite CowはSprite画像からアイコンを切り出す作業を補助するソフトウェア。 Sprite CowはPython/JavaScript製のフリーウェア（ソースコードは公開されている）。Webサーバを高速化するための一つの手段がWebサーバへのコネクションを減らすということだ。複数ファイルに分かれているものを一つにまとめればそれだけ接続回数を減らすことができる。 適当に選んでもぴったりフィット 画像とCSSを使ってそれを行うのがSpriteと呼ばれる手法だ。幾つかこの手のソフトウェアがあるが、今回紹介するのはSprite Cow、後々のSprite画像メンテナンスにも使えるソフトウェアだ。 Sprite画像生成のソフトウェアやサービスというのは、一度にまとめて作ってしまうものが多かった。そのため最初のローンチ時には役立っても、その後のメンテナンスでは使い勝手が悪いものが多かった。

今日は、CSSを使ってサイトを高速化するテクニック「CSS Sprites（CSSスプライト⁠）⁠」についてのお話をさせていただきます。 サイトの高速化というと、プログラムの最適化を行ったり、サーバのチューニングを行ったりというイメージがあるかと思います。実はCSSを上手に使うことによっても、サイトの高速化を行うことができます。しかも、かなりの効果が期待できるのです。 CSS Spritesとは？ 通常、ウェブページを制作する場合、デザインファイル（psdやpngなどの画像）をスライスし、HTMLのimg要素として埋め込んだり、CSSの背景画像として指定していることと思います。 それらの画像を一つにまとめ、１度の読み込みでのリクエスト数を減らすテクニックのことを「CSS Sprites」と呼びます。 このテクニックは、以前からマウスオーバーメニューを実現する際にも使われていたものでもありま