【Unity】スプライトシートの読み込みとアニメの作成

前回の記事で作ったスプライトシートを、Unity上でアニメーションをさせてみます。

今回は簡易メモ的な内容です。

 

スプライトエディタ

以下が前回作成した画像です。

f:id:chirotec:20180805230249p:plain

上記の画像を

Assetsフォルダ以下のどこかに置き、Inspectorウィンドウで

Texture Typeを"Sprite(2D and UI)"

Sprite Modeを"Multiple"とします。

これでスプライトシートが読み込めるので、Sprite Editorボタンを押します。

 

Sprite Editorが立ち上がるので、上の"Slice"ボタンをクリックします。

f:id:chirotec:20180813075014p:plain

これで、各アイコンがスプライトとして使えるようになりました。

Projectビュー内のスプライトシートに▶アイコンが表示されており、その中に含まれる各画像がスプライトとして単独で使えるようになっています。

 

スプライトのアニメ作成

先ほど作成されたアイコンのスプライトをProjectビュー内で複数選択して、Sceneビュー内にドラッグアンドドロップすると、自動でアニメーションが付いた2D Spriteが作られます。(この操作はスプライトシートでない普通のSpriteでも出来ます)

作られたときには12fpsとなっているようなので、必要に応じてAnimationウィンドウで適切なfpsに変更したり、キーフレームの間隔を変更したりすると良いでしょう。

f:id:chirotec:20180813080958p:plain

【画像編集】ImageMagick 7で画像を操作してみます(後編)

昨日の記事の続きです。今回は引き続き使用例を紹介したいと思います。

convertコマンド

画像変換を行うとき、多くの場面ではこのconvertコマンドを通します。

現在のImageMagick 7では、"magick"コマンドの引数として"convert"を呼び出します。

例えば

magick convert a.png b.jpg

と入力すると、PNGの"a.png"ファイルの画像をそのままJPEGの"p.jpg"ファイルに出力します。ファイル形式は拡張子を見て自動で変換されます。

例えばここで-resizeオプションと-qualityオプションを追加して

magick convert a.png -resize x200 -quality 70 b.jpg

とすると、画像のアスペクト比を保ったまま横幅を200にリサイズし、品質70でJPEGファイルが圧縮されて保存します。このように、非常に多彩なオプションが存在し、色々な操作を行うことが出来ます。

以下が公式の説明ページです。

www.imagemagick.org

あまりに多すぎてとても把握しきれませんが、やりたいことをGoogleなどで検索すればなんとかなるかもしれません。

 

スプライトシートとは

ゲーム制作で例えばキャラや装備などのアイコンを大量に用いるとき、または2Dキャラクターをパラパラアニメの要領でアニメーションさせるときなどは、大量の画像が必要になります。1枚1枚ロードしても良いですが、ローディング時や描画時にパフォーマンスが問題となる場合があります。

こういう場合は、1枚の大きな画像ファイルに小さな画像を大量に配置して利用することが多いです。特にUnityの場合、複数のアイコン画像を一画面に同時に描画する場合にはドローコールバッチングが働き、描画負荷を大幅に減らせる可能性が高いです。

同じサイズの小さな画像を等間隔のマス目上に配置したものをスプライトシート、任意の異なるサイズの画像をパズルのように配置したものをテクスチャアトラスと呼ぶことが多いようです。

 

例えば、Adobe Animate(旧:Adobe Flash)では以下のように作成します。

helpx.adobe.com

 

スプライトシートを作ってみる

ImageMagickで、スプライトシートを作ってみます。

仮素材の作成

本来は素材となる画像ファイルを用意するのですが、仮画像の作成もImageMagickで行ってみます。

Windowsを例として説明すると、"makeicons.bat"などというファイルを作り、そのフォルダの下に"tmpimg"という空のフォルダを作り、バッチファイルを実行すると、仮のアイコン画像が作成されます。

@echo off
REM 連番の呼び出し
setlocal enabledelayedexpansion
for /l %%i in (1,1,80) do (
  set num=00%%i
  set num=!num:~-3,3!
  call :makeicon !num!
)
endlocal

REM アイコンの作成
:makeicon
magick convert -size 100x100 xc:none ^
 -fill "#CC0000" -draw "roundrectangle 0,0 99,99 20,20" ^
 -fill "#FFFFFF" -draw "roundrectangle 3,3 96,96 20,20" ^
 -fill "#990000"  -font "M+-1m-medium" -pointsize 60 -gravity center -annotate +0+0 %1 ^
 tmpimg/icon%1.png
exit /b

上記のバッチファイルを実行すると、icon001~080.pngと連番の付いたアイコンファイルが作成されます。

Macなど他のOSならシェルスクリプトを書けば良いのかな? そもそもWindowsでもbash等使えますし

f:id:chirotec:20180805223246p:plain

画像の結合

素材を用意したので、次はその画像を結合します。

今回は1024x1024のサイズにするため、10x10の配置に並べます。

magick montage tmpimg/*.png -tile 10x10 -geometry +0+0 -background transparent icons1.png

上記のコマンドを実行すると、tmpimgフォルダの画像が全て連結され、一枚の画像が作成されます。隙間なく並べるために-geometryオプションを使っています。

f:id:chirotec:20180805225913p:plain

しかし上記の画像のサイズは1000x800です。上記のままでも読み込めますが、互換性やパフォーマンスを考えると、1024x1024のサイズにしておきたいです。

もしかするとこのままでも、設定次第でUnityでのImport、Build時に調整されるのかな?

 

そこで、続けて以下のコマンドを実行します。

magick convert icons1.png -gravity northwest -extent 1024x1024 icons.png

f:id:chirotec:20180805230249p:plain

左上(northwest)に画像が寄った状態で、画像サイズを1024に変更出来ました。

 

【画像編集】ImageMagick 7で画像を操作してみます(前編)

ImageMagickとは

ImageMagickは、コマンドライン上で画像の操作を行うフリーソフトウェアです。

一括で画像の操作が行える便利なツールです。

www.imagemagick.org

インストール

公式の"Download"の各OS(例えば”Windows Binary Release”)から、ダウンロードしてきてインストールします。

"Q8"あるいは"Q16"は、画像の各ピクセルを内部的に何ビットで計算しているかをあらわすようです。"HDRI"はHDRに対応しているか、"dll"および"static"はダイナミックリンクあるいはスタティックリンクを行っているかの違いです。"portable"はインストーラー無しで、コピーするだけで使えるバージョンです。(パスを通しません。)

旧バージョン(6系統まで)では一部のコマンドがWindowsのコマンドとバッティングするため困ったことになりましたが、7以降ではコマンド名が変更されているため、Windowsのconvertコマンドが隠されてしまうといった心配は無くなりました。

Windowsで試しに使うなら"ImageMagick-7.0.8-8-portable-Q16-x64.zip"を、普通に使うなら"ImageMagick-7.0.8-8-Q16-x64-dll.exe"辺りをダウンロードすればいいかなと思います。

また、デフォルトのオプションだとffmpegも(imagemagickフォルダの下に)インストールされます。

 

インストール完了後、

magick -version

を実行すればバージョンを確認できます。

f:id:chirotec:20180804094037p:plain

また、

imdisplay '画像ファイル名'

と入力すると、ウィンドウが開いて画像ファイルを確認できます。

旧バージョンではdisplayコマンドでしたが、これも7で変更されています。

f:id:chirotec:20180804094705p:plain

 

画像リサイズの例

画像を一括処理するには、mogrifyコマンドを使います。

inフォルダ以下にあるpngファイルを全てリサイズする例です。

magick mogrify -resize 256x256 in/*.png

この例ですと、inフォルダ以下のpngファイルの画像サイズが256ピクセルに拡大縮小され、ファイルが上書きされます。

 

バージョン7の違い

ここまでで示したように、ver7ではコマンドが変更されています。

旧バージョンでは"convert" "mogrify"などのコマンドを実行していましたが、

ver7では"magick" コマンドに変更され、"convert"などを引数で渡すようになりました。

過去の資料を探すときはご注意ください。

 

次回はこれらのコマンドを使って画像データを加工する事例を紹介いたします。

次回→【画像編集】ImageMagick 7で画像を操作してみます(後編) - chirotec’s blog

【VTuber】VTuberワークショップに参加させて頂きました

昨日7/21、御茶ノ水デジタルハリウッド大学で開催されましたVTuberワークショップに参加させて頂き、エンジョイしてきました。

vtuberjustdoit.peatix.com

 

オープニング

まずは株式会社キッズプレート茂出木謙太郎様より、御挨拶と事例紹介です。アメリカザリガニ平井善之さんが出演されている『ツルンッ!とたまご学園』の紹介もありました。なかなかユニークな試みです。

www.youtube.com

[360°Encyclopedia]Vol.23 バーチャルアイドルを作れないか? - PRONEWS

たまご学園では、近日中になんらかの発表があるらしいですよ。

要チェックです😎

 

基調講演 - ねこますさん

皆様ご存知「バーチャルのじゃロリ狐娘Youtuberおじさん」こと、ねこますさんのVR講演です。前方左右のプロジェクター画面に映し出されました。

私のメモでは概ねこのような内容でした。Twitter#vtuberjustdoitタグで語られていますのでそちらも参考にして下さい。

・技術選定は大事。

・使う技術はスケーリング出来るようにしておくと良いです。機材は最悪カメラだけでも使えるようにしておくと保険になり、環境によって使えないといった機会損失が無くなる。

・技術というものは問題解決でのみ価値を生むということを理解するべき。

・使用するツールも、メリットやデメリットを理解して選定しよう。DCCツールや動画配信ツールなど。

VRMという統一規格が出来たことで、ツール障壁が少なくなり、コラボレーションなどが行いやすくなった。

・画力は大切。

・迷走してたけどダメ元でVTuber。行動することは大切。

と、大変興味深いお話でした。VRメイド喫茶行きたいですね。

 

VRoid Studio

ピクシブ株式会社 のりお様より、VRoid Studioの開発状況のご紹介です。

vroid.pixiv.net

女の子の素体がすでに用意されており、これにパーツを描画したりパラメータを変更することでキャラクターを作成出来るようです。

最初に表示される素体はすっぽんぽんでちょっとえちい感じでしたが、製品版では検討中とのことです。まぁmakehumanとかにもアレなパーツはあるのですが

今回は髪型を作る機能をご紹介頂きました。頭の上に面をいくつか置き、その上からブラシのようなもので描画することによって、髪の毛を簡単に作成出来るようです。

また、3Dモデルに直接カーソルを当てて、顔や眼球などのテクスチャを描画出来るようです。

重要なことですが、このソフトウェアで作成したモデルは、ライセンスの制約は無く自由に使えるとのことです。ペイントツールで自分で描画した絵と同じように扱えるようです。ゲームなどでの利用にも適しているかもしれません。

 

ワークショップ

今回は「Blenderで楽しくキャラづくり」に挑戦してきました!

そもそもお前デザイナーじゃなくてプログラマーだろと言われそうだとか、Blenderは少し触ったけどUIが全然意味不だったとか、以前某入門サイト様でてんとう虫を作ったのはいいけど力尽きたとか、確かに難易度は相当高いです。ましてや人体モデリングなんて……

 

前半は三面図を参考に、モデリングの触りを駆け足で体験してきました。

うーんやはりBlender UI全然分からんです。昔にやった分も思い出せない……

でもポチポチと点を打ってみたり、にょーんと面を伸ばしていくのは楽しいです。Ctrl+Eで面を伸ばしていってー、こんな感じ!

f:id:chirotec:20180722204540p:plain

時間が無いので今回は顔の輪郭をなぞるくらいで終わりました。作業はどこまで進めるか、現在私の方で少しずつ進めております。

今回の講座の講師は「ワニでもわかるゼロからのBlender」のzen様です。ありがとうございます!

動画の方も非常に参考になりますので、是非とも紹介させて頂きたいです。第2回の中盤まで進めれば、上の画像になるかと思います。

www.youtube.com

後半はテクスチャの貼り方やポーズの付け方を学んできました。

テクスチャはUV展開したところに絵を書いたりすればいいのかな?

Blenderには自動ウェイト計算機能もありますが、あまり品質が高くないようなので注意が必要です。

また簡単にボーン・ウェイトやアニメーションを付けるサービスとして、AdobeMixamoの紹介もありました。

 

おわりに

突発で開催されたイベントでしたが、大変有意義なイベントでした。ゲームや映像作りにも参考になりそうな情報です。皆様、ありがとうございました!

地道な作業が次に繋がるかもしれません。モチベーションを大切にしたいですね。

【雑記】ちょっとした買い物

最近はPCを持たずにスマホで済ませている若者さんも多いらしいですが、殆どの方はなんらかのPCを持っていると思います。
私が昔Vista時代に使っていたノートPCは、使い潰して4年前くらいに遂に壊れたので廃棄してしまいました。
思えば当時はカジュアルにMMORPGを遊んでましたね。もうサービス終わってしまいましたがECOとか。

代わりに買ったのは、CPUがCore i5 760というギリギリi5を名乗れる中古PCです。
こちらはまだまだ現役です。ファンの音が気になるでしょうか。

中古品の魅力

秋葉原の店頭とかネット通販を眺めていると、多くの魅力的な中古PCが並んでいます。新品に比べて格安でPCを
またMicrosoftは中古再生品にもライセンスを提供しているので、ちゃんとした所で買えばWindowsの不正品を掴まされる恐れは少ないはずです。多分。
四年前、ノートPC壊れて困ってた私はWindows 7 Professional付きの自作っぽいPCの中古を5万円ほどで購入しました。
そしてメモリを8GB差して12GBに、HDDをSSDに交換しました。足りない物は買い足せば良いのです。これだけでとても快適に利用出来ていました。

壊れるパーツ、そして取り替え

当然中古品にはリスクが伴います。
まず2年ほど使っていたら、画面の表示が壊れて映らなくなってしまいました。どうやらグラボが昇天したようです。(Radeonの古いの、型番忘れた)
すぐさまパーツショップへ行き、安く売られていたGeforce 960を買ってきて差すことで事なきを得たようです。(今思うと奮発して970に手を伸ばすべきだったかも)
それからしばらくはトラブルは無かったのですが、時々電源が落ちるようになってしまいました。
BIOSや電源プランを弄ったりして騙し騙し対応していましたが、遂に
パーツショップに駆け込み、電源ユニットを買って交換することで完全に治りました。
ちなみに電源ユニットはコンデンサの中身が吹っ飛び、真っ白な粉まみれになっていました。今までよく頑張ってくれました合掌。

省電力PCが欲しいので

そんなわけで現在のPCには愛着があるのですが、いかんせんNeharem世代なので消費電力が気になるところです。
一日中つけっぱなしにすることもあるので、サブ機が欲しいなーと思ってました。

というわけで、今週これを買ってみました
akiba-pc.watch.impress.co.jp

リースアウト品っぽい、超小型PCです。小さいですが、重量はずっしりあります。
グラボが載らないことを除くとこっちのが性能上です。なってこったい

ちなみにまだ動作確認しかしていません😎
使い込んで気に入ったらまた感想書きたいなーと思います。

ExcelのPower Queryでアンケート結果を集計してみる

多くの人が仕事でExcelを使っていると思いますが、
多分99%以上の人が使っていないであろう機能がてんこ盛りだと思います。
なお私はExcelでセルを方眼紙のようにして書類を作るのは絶対に許せない派です。

今回はExcelに入っているPower Queryを使ってみました。

 

ことの始まり

大雑把にいうと、こういうことを行う必要がありました。
・オフラインでのアンケート集計機能を低コスト(重要)で作りたい
・アプリ中のおまけ機能なので、簡素な作りでいい
Excelで見れると便利だね

今回の解決方法はこちら
・回答者は共用マシンにインストールされたアプリでアンケートに答える
・アプリでは回答結果を1行ずつcsvファイルに書き出す
・そのファイルをExcelで読み込み、集計して表にする

しかし集計のために数式を書くのはまだしも、
データ更新のためにファイルを読み込んで整形したりそれを行うマクロを書いたりするのはちょっと面倒です。
そこでPower Queryを使うことにしました。

 

Power Queryとは

MicrosoftのPower BIとも関係があったりしますが、
今回ここで扱うのはMicrosoftが公開しているExcelのアドインです。

support.office.com


データを外部から取得してExcelで扱えるようにしたりする、なんか凄い奴です。(手抜き説明)

市販のパッケージではOffice 2013以降で無料で使用できます。Officeを買えば無料で使用できます。(Office 2010ではProfessional Plusというボリュームライセンスの製品でのみ使用できました)

Download Microsoft Power Query for Excel from Official Microsoft Download Center

また、Office 2016では「取得と変換」という標準機能となり、アドインをダウンロードする必要も無くなりました。

 

使用例 

CSVファイルの準備

最初にヘッダだけ書き込まれたCSVファイルを用意し、アプリ側でアンケートに答える度に、その結果をカンマ区切りで1件につき1行ずつ書き込むだけのシンプルな実装です。
シンプルイズベスト。

f:id:chirotec:20180704194803p:plain

ちゃんとするならDBにテーブル作っておいて1行ずつ書き込んだりするべきなのかなーと思いました。

 

Excelでの取り込み

まずExcelを起動し、空白のブックを作ります。

データリボンの「新しいクエリ > ファイルから > CSVファイルから」
を選択し、アンケートの結果が入った(という想定の)CSVファイルを取り込み先とします。

f:id:chirotec:20180704194800p:plain

f:id:chirotec:20180704194757p:plain

 

これでCSVファイルからデータを取得するクエリが作成され、
さらにテーブルの内容が書かれている新規シートが作成されました。

f:id:chirotec:20180704194754p:plain

 

今回はCSVファイルからデータを取得していますが、
SQL ServerODBCを通してRDBMSから取得するようにも出来ます。
というかそれが本来の使い方だと思います

 

シートの編集

数式で集計したり、見やすいように色を付けたりして結果を分かりやすくします。
今回はこれだけ編集しました。
・テーブルのA列のデータ部分を範囲選択して「クイック分析」→「合計>個数」
 (集計行がテーブルの下部に追加され、A7セルではSUBTOTAL関数でレコードの件数が表示されるようになりました。)
・COUNTIF関数で各項目の回答を集計し、その下ではA7で割って回答率を計算
・AVERAGE関数で点数項目の平均点を計算
・セルの書式設定を「0"件"」などにして見やすく

f:id:chirotec:20180704194750p:plain

 

データ更新
アンケートの結果が集まりました。CSVファイルが更新されています。(という設定)

f:id:chirotec:20180704195416p:plain


ここでデータの「すべて更新」を押すなどして、データを再取得します。

f:id:chirotec:20180704195412p:plain

書式などはそのままに、テーブルだけが更新されました。便利!


まとめ

このようにアンケート集計の仕組みを簡単に作成出来ました。

多分極めれば色々なことが出来ると思います。少なくともマクロを書いて弄るよりはずっと楽でした。

Power Queryは強力なツールです。200m先のコンビニに行くのにタクシーを呼ぶような贅沢感がありました。

【Unity】ネイティブプラグインを使った時のミス、ハマりポイント

前回の記事ですが、内容が多すぎて結構雑かなーと思いました。

補足説明をいれておきます。m(__)m

 

long型のサイズの違い

C言語C++ではlong型のサイズは実装系依存で、つまり実行する環境によって変わりますが、Visual Studioでx64アプリケーション(LPP64)をビルドした場合、long型は4バイトとなります。(LinuxmacOSなどのLP64環境では8バイトのようです。)

一方、C#のlong型は8バイトとして定義されています。

参考:整数型の一覧表 (C# リファレンス) | Microsoft Docs

名前が同じだからといってC++のlongをC#側でlongで受けてしまうと、例えば配列の前半部分に予期しない大きな値が入り、後半部分に0で埋まった値が入っているなどの予期せぬ動作が起こったりします。

C++でlong型で定義した関数は、C#側はint型(Int32型)で受けましょう。

C#側で文字列をstringとして使いたいとき

C++のconst char*型を、C#側でいくつかの方法でマーシャリングすることが出来ます。

参考:文字列に対する既定のマーシャリング | Microsoft Docs

参考:既定のマーシャリングの動作 | Microsoft Docs

C#側でstringとしてマーシャリングした場合は、stringのデコンストラクターが呼ばれるタイミングでメモリが解放されます。

前回malloc()でメモリ確保すると書きましたが、これだと本当にメモリリークが起きないのかが心配です。特にデバッグビルドで作成したdllを読み込ませた場合、_DEBUGが定義されているため、mallocが_malloc_dbgに書き換えられてしまうため、C#側で正しく解放できずUnityが落ちてしまうようです。

CoTaskMemAlloc()関数で確保するのが良いのでしょうか?

static const char* MallocString(const char* str) {

 size_t n = strlen(str);

 char* s = (char*)CoTaskMemAlloc(n+1);

 memcpy(s, str, n + 1);

 return s;

}

このようにした方が良いかもしれません。

VisualStudioでデバッグしたい

Visual StudioでUnity.exeのプロセスにアタッチすると、 VSのデバッガを使ってデバッグを行えます。ブレークポイントを貼れたりなど便利です。

dllでも同様にデバッグがしたいです。出来ればデバッグビルドでビルドしたdllを使いたいですが、 デフォルト設定のDebugビルドで作成したdllを読ませるとUnityが落ちてしまいます。

DLLのプロジェクトのプロパティで

 C/C++ > コード生成 > ランタイムライブラリでデバッグのdllを使っていると落ちるようです。