Unity3Dで2D。「SpriteStudioPlayer for Unity3D」のご紹介

SpriteStudio担当の三輪です。
今回取り上げますのは、SpriteStudio本体の話題・・・ではなく、連携情報についてのお話しです。

SpriteStudio+Unity3D

現在弊社では、ゲームエンジンの「Unity3D」で「SpriteStudio」の2Dアニメーションデータを再生・制御する「SpriteStudioPlayer for Unity3D」という連携アセットを開発中です。

この連携アセットは、CEDEC2011ゲームツール&ミドルウェアセミナー in 福岡で紹介をさせていただきましたが、ここへきてようやく機能の詳細をご紹介できるようになってまいりました。

早速ですが、「SpriteStudioPlayer for Unity3D」を使うと、Unity3Dでどういったことが表現できるようになるのか、紹介をしている動画をご用意しました。

Unity3Dと言えば、2011年のゲーム業界の話題を総ざらいしていった感もあるゲームエンジン。なのですが、Unity3Dは3D表現が得意なゲームエンジンなので、2Dの複雑なキャラクタアニメーションやユーザーインターフェース演出といったものを作るのにはあまりお手軽とは言えません。

そこで、弊社のSpriteStudioのXML形式アニメーションデータをUnity3Dで取り込んで、アニメーションの再生・制御まで面倒を見てしまおうと開発されたのが「SpriteStudioPlayer for Unity3D」です

「SpriteStudioPlayer for Unity3D」でできること、其の壱  「アニメーション表現」

SpriteStudioの機能の大きな特徴に、キーフレームアニメーションが挙げられます。パタパタアニメのコマアニメーションでは、アニメーションパターンを作るには毎コマ違った絵を描き込んでいかなければいけませんでした。

キーフレームアニメーションでは、表示させたいパーツを作成し、それに動きを付けることによってアニメーションが表現できます。

SpriteStudioでのキーフレーム編集

▲SpriteStudioでのキーフレーム編集

また、SpriteStudioでは親子関係を設定してパーツ管理をすることができます。親パーツの動きを子パーツが継承して動作することができますので、多関節のアニメーションを表現することができます。

親子構造

▲SpriteStudioでの親子構造

これらを組み合わせてできたものが、動画中の女の子キャラクタになります。

キーフレームアニメーション例

▲キーフレームアニメーション例

この女の子キャラクタ、アニメーションはそれぞれ別に作られているのですが、パーツとして参照している画像素材は共通になっています。SpriteStudioでは、画像とアニメーションデータは別々で管理する構造になっていますので、こうした画像素材の使いまわし共通使用が可能になっています。この仕組みはSpriteStudioPlayer for Unity3Dでも取り入れられています。
同一素材からのアニメーション作成

 

SpriteStudioPlayer for Unity3D で表現できるのはキャラクタアニメーションだけではなく、ユーザーインターフェース(UI)やHUD表示の素材、エフェクトなどにも使用できます。

UIでの使用例

▲ボタン素材としての使用例

こうしたボタン絵の演出なども後述のゲームスクリプトと組み合わせることで、表現することができます。Unity3Dの3Dオブジェクトとの同時表示もちゃんと対応しています。

2Dと3D表示の同時使用

▲2Dアニメーションデータと3Dオブジェクトの同時表示

「SpriteStudioPlayer for Unity3D」でできること、其の弐 「Unity3D上での編集」

SpriteStudioPlayer for Unity3D を使ってUntiy3Dに取り込んだアニメーションデータは、ゲームシーン内ではゲームオブジェクトの一つとして管理をします。ゲームオブジェクト自体はUnity3Dの管理単位ですが、SpriteStudioPlayer for Unity3D の機能がアタッチされていると、独自のステータスを設定することができます。このステータスをUnity3DのInspectorを使って編集することができます。

Unity3D上での編集

▲Unity3DのInspector

特に値を設定しなくてもアニメーションの再生表示はできますが、細かな設定をすることで色々な演出をすることができます。

Inspectorには選択しているゲームオブジェクトの情報が表示され、

  • どのアニメーションを関連付けているか
  • 位置、回転、拡縮の値
  • 反転設定
  • 表示フレーム番号
  • 順方向、逆方向、往復などの再生方法と再生回数、速度

などの設定ができます。

「SpriteStudioPlayer for Unity3D」でできること、其の参 「ゲームスクリプトでの制御」

ゲーム中ではユーザーの入力やプログラムの処理に合わせてアニメーションの表示を制御する必要が出てきます。スライド操作でキャラクタを走らせたり、タッチ操作で攻撃を繰り出したり、ボタンを押したり・・・。

ゲーム画面イメージ

▲ゲーム画面のイメージ

Unity3DのゲームスクリプトからSpriteStudioのアニメーションデータの制御ができます。

操作できるのは主にInspectorに表示されている項目で、各ステータスの変更のほか、アニメーションデータの切り替えや再生停止などができます。

また、アニメーションデータ中にユーザーデータが埋め込まれている場合に、アニメーション再生中にそのデータが検出されたらトリガを発行するとか、ゲームオブジェクトのバウンディングボックスを当たり判定に使用するとか・・・。

紹介動画の中で女の子が棒を振るアニメーションがありますが、この振る動作の途中に「当たり判定開始」「当たり判定終了」というような情報を埋め込んでおり、判定をするタイミングをアニメーションデータから引用しています。

他にもゲーム内で使用するであろう色々な処理を機能として追加していく予定です。

「SpriteStudioPlayer for Unity3D」のもろもろについては、こちらでも紹介をしております。iPhoneやAndroid向けのパブリッシュでも使えますので、このアセットを使うことで2Dのゲームがたくさん出てくるといいなと思いながら、正式公開に向けて開発進行中でございます。逐次情報公開も進めてまいりますので、今後もぜひご注目ください。

カテゴリー: OPTPiX SpriteStudio | タグ: , , , , | 2016/08/31 更新

複数のMacでiPhone(iOS)アプリの開発を行うときの注意点

ウェブテクノロジ開発部の遠藤です。

先日、Unityを用いたiPhone(以下、iOS)アプリの開発環境を構築する機会がありまして、その過程でちょっとしたトラブルが起こりました。

1. 証明書をきちんと入れたのに認識されない!

その問題とは、1つのライセンスを用いて複数のMacでiOSアプリの開発環境を構築する際に発生するものです。
今回の記事では、この問題の解決方法についてご紹介したいと思います。

2. Xcode のインストール~証明書のインストール

iOSアプリのビルド環境を構築し、iOS実機上で動作検証するにはMacにXcodeをインストールしたあとに、証明書のインストールや認証などいくつかのステップが必要になります。

これらのステップに関する情報は既にネット上で簡単に見つけることができますのでここでは割愛します。

さて、一通りセットアップを終えたところで、いざビルドを試みると、

Xcode could not find a valid private key /
certificate pair for this profile in your keychain.

というエラーが発生しました。

オーガナイザで見たプロビジョニングのStatusには

Valid signing identity not found

とあります。

上記のエラーについて、ネット上でよく書かれているのが、デフォルトのキーチェーンが「ログイン」になっていないため、というものです。

この点については私の環境では問題ありませんでした。

3. 既存の証明書を2台目以降のMacにダウンロードして入れると…

あれこれ悩んでいたところ、問題は私が利用した証明書が、別のMac上で既に作成済みだったものであり、それをAppleの開発サイト経由でダウンロードして取り込んでいたために秘密鍵が含まれておらず、正しく認証することができなかった、ということのようです。

つまり1つのライセンス(Certificate)を用いて複数台のMacで開発を行う場合は、最初に認証したMac上にある秘密鍵が必要になる、ということでした。

このための手順は、“iPhone 証明書 複数台 Mac” といったキーワードで検索すれば先人の方々のお知恵を拝借できるので、ここも割愛させて頂きます。

そのお知恵を借りて早速「iPhone Developer: 名 姓 (HOGEHOGE)」という秘密鍵を一台目のMacから書き出し、2台目のMacに取り込んで見ましたが…

私の環境ではそれでも足りず…

4. 「iPhone Distribution: 会社名」も必要です

結果として、

iPhone Developer: 名 姓 (HOGEHOGE)
iPhone Distribution: 会社名

という2つの証明書ファイルを書き出して、取り込む必要がありました。

※「iPhone Distribution: 会社名」については個人で開発されている方には必要がないものかもしれません。

[ 正しく動作する証明書の例 ]

証明書に関する問題については以上です。

5. Unity からパブリッシュしたプロジェクトでのエラー

iOSアプリに関連してUnityプロジェクトに関しても少々触れたいと思います。

近年話題のマルチプラットフォームのゲームエンジンであるUnity 上でアプリを作成し、iOS 向けにパブリッシュする際にも、設定が正しくないと似たようなエラーが発生します。

「Player Settings…」の「Company Name, Product Name, Bundle Identifier」あたりの内容が、iOS の開発者ページで申請したものと合致していないと、Code Sign errorの類のエラーが発生します。

初めて環境を構築される方は、このあたりもチェックされるとよいと思います。

カテゴリー: 開発・プログラミング | タグ: , , , | 2016/08/25 更新

漫画作成ソフト「コミPo!」 新パッケージ発売!

漫画作成ソフト「コミPo!」は2010年12月15日に発売され、間もなく1周年を迎えます。

この間、「コミPo!」でもっと楽しんでもらいたいという思いから、ユーザーが作成した3Dデータを利用することができる「ユーザー3Dデータ読み込み」機能(Ver.1.50)や、「簡単にマンガを作成する機能」を大幅に強化した「スナップ」機能(Ver.1.60)などを無償アップデートでリリースしてきました。

そしてこの度、12月 2日に、基本ソフトに加えて追加データやインプレスジャパン社刊「できるコミPo! 公式ガイド」をセットにした「学園マンガセット・スターターパック」を、全国の家電量販店・パソコンショップなどで発売いたします。

コミPo! 学園マンガセット・スターターパック

新しいパッケージでは、「コミPo!」が最も得意とする学園マンガの制作に欠かせない追加データ(私服・夏制服・体操服)に加えて過去にリリースした無償の追加データ「コミPo! 応援隊専用アイテム」を追加データCD-ROM 1枚に収めました。

また、インプレスジャパン社刊のガイドブック「できるコミPo! 公式ガイド」も付属。大変お得なパッケージとなっております。

「コミPo!」ではこれまで、20回以上の無償アップデートとVol.5 までの有料追加データのリリース、さらに、季節感あふれる「コミPo! 応援隊専用アイテム」をVol.9 までリリースしてきました。

当初からのユーザー様にはその都度、追加データをご購入・ダウンロードしていただくことで、新しい楽しみを提供してまいりましたがこれから「コミPo!」を始めたい方にとっては、まとめて追加データを入手する方法がなく、ご不便をおかけしておりました。

今回、「コミPo! 学園マンガセット・スターターパック」では、これらのニーズにお応えし、一度に多くの追加データを利用できるよう、一つのパッケージとして提供をいたします。

このパッケージをご購入いただければ、初めて「コミPo!」をご利用になる方でも、すぐに豊富な公式の素材データを利用することができ、表現豊かな学園マンガを制作することが可能になります。

これからも、「コミPo!」では簡単に漫画作成ができるというコンセプトに更に磨きをかけると同時に、ユーザー様の使い勝手の向上にも挑戦し続けます。

2年目を迎える漫画作成ソフト「コミPo!」にどうぞご期待ください。

『コミPo! 学園マンガセット・スターターパック』概要

基本ソフト 組み立てるようにマンガをつくる、漫画作成ソフト
「コミPo!」通常版
追加CD-ROM収録データ ・コミPo! 応援隊専用アイテムVol.1 ~ Vol.9
・コミPo! データコレクションVol.1『私服』
・コミPo! データコレクションVol.2『夏制服』
・コミPo! データコレクションVol.5
『体操服&スポーツウェアセット』
付属ガイドブック できるコミPo! 公式ガイド(インプレスジャパン刊)
希望小売価格(税込) 12,800円
発売日 2011年12月 2日(金)

【プレスリリースページ】
https://www.comipo.com/pressrelease/pr20111115.html

カテゴリー: コミPo! | タグ: , , | 2016/08/31 更新

ブログ用の写真加工にはエンハンストフィルターがオススメ!

こんにちは。ウェブテクノロジ開発部の山崎です。

まずは下の画像をご覧ください。
「Before」と「After」の写真が3秒ごとに切り替わり表示されていますか?


以下の写真は OPTPiX WebFree のフィルター機能「エンハンストフィルター」の紹介用に、漫画作成ソフト「コミPo!」 のイベントでナビゲーターを担当して頂いている越谷先生のモデルの方にプライベート写真をご提供いただきました。ありがとうございました。



さて、「Before」が提供いただいたオリジナルの写真です。「After」がOPTPiX WebFree のエンハンストフィルターを通した写真です。

明るさやクッキリ具合が変わっているところがご覧いただけると思います。

ソーシャルネットワークの利用が増え、さらにスマートフォンなどで気軽に写真が撮れる状況も相まって、ブログやTwitterなどに写真を投稿する人もどんどん増えているようです。

気軽に公開できるのはよいのですが、撮った写真をそのままでは、ちょっと被写体が小さかったり、
横になって写っていたり、関係の無いところが写っていたり、暗くてよくわからなかったり、・・・あとすこし変えられれば公開できるのに・・・と、あと一歩のところでためらってしまった経験はありませんか?

そんな時に使ってほしいサービスがこちら
無料画像加工サービス「OPTPiX WebFree」

写真の中から必要な所だけを切り抜いたり(トリミング)90度回転させたり、縦横サイズを拡大したり、縮小したり。

そして、どんな写真でもおまかせの変換の「エンハンストフィルター」がオススメです。

料理の写真などを美味しく変換しますし、顔の写真もクッキリとお見せします。

特に、はじめの画像のような料理の写真で威力を発揮します。

「せっかく撮ったのに、ちょっと暗いんだよね」と感じたら、エンハンストフィルターを使ってみてください。

クッキリと明るく!そして美味しそうに写真を加工します。しかも無料でご利用いただけます。

ぜひ、お試しください。

無料画像加工サービス「OPTPiX WebFree」

カテゴリー: OPTPiX WebFree | タグ: , , , , , , , , , | 2017/12/29 更新

RGB565, RGB555形式の組み込み機器用画像の正しい作成方法(1)

ウェブテクノロジで、組み込み分野の営業を担当している(こともある)小高です。

組み込み機器を開発されているお客様、特にデザイン部門の方とやりとりしていると、しばしばいただく質問があります。「ソフト開発部門から、組み込み機器に内蔵する画像を作るときに使っても良いRGB値の一覧を渡されたけれど、どうやって画像を作ればいいですか?」というものです。

この記事では、「組み込み機器向け画像で、特定のRGB値しか使えない理由」の解説を中心に、組み込み機器向け画像を作るときの注意点とその解決方法についても軽く触れています。

デザイナーさんがこれらを理解していれば、ソフト開発者とのコミュニケーションで、デザインサイドの意向をよりスムーズに伝えられるようになるはずです。この記事が、美しいGUI表現を実現するための一助となれば幸いです。


1. まずはおさらいから

組み込み機器のディスプレイでは、コスト等の制約のために、RGB565形式やRGB555形式などの表示デバイスが良く使われます(以下では、説明を簡単にするために、RGB555の場合を例にとります)。

一方、機器に組み込む画像は、RGB888形式のPC(Macintosh含む)で制作していると思います。

PCで通常使われているRGB888形式では、RGB各チャネルを8bitで表現しています。28=256 なので、0~255;16進数で00h~FFhの値で256階調を表現しています。RGB値0は黒、255は一番明るい赤、または緑、または青です。

組み込み機器で使われるRGB555形式では、RGB各チャネルを5bit, 5bit 5bitで表現しています。25=32なので、0~31;16進数で00h~1Fhの値で32階調を表現しています。RGB値0は黒、31は一番明るい赤、または緑、または青です。

グラフ1: 8bit=256階調と5bit=32階調

グラフ1: 8bit=256階調と5bit=32階調

RGB888の画像をRGB555表示の機器で使用する場合は、RGB値の下位3bitを切り捨てた値を使うことになります(RGB565であれば、RとBの下位3bit、Gの下位2bitを切り捨てます)。

表1: RGB8bit値をRGB5bit値に変換

表1: RGB8bit値をRGB5bit値に変換


2. 落とし穴に注意

ところが、階調が違うということには落とし穴があるのです。RGB888環境で作った画像を実機にそのまま持っていくと、こんな現象が起こります(画像1)。

画像の中央に、同心円状のバンディング(マッハバンド)が生じていて、美しくありません。また、同じ明るさの色が使えるわけではないので、全体の色調も微妙に変化しています。

RGB888環境で作った画像をRGB555の実機で表示した場合

画像1: RGB888前提の画像をRGB555の実機で表示した様子(元画像と交互表示しています)

実機に画像データを組み込んでから初めてこのような現象に気づくと、大きな手戻りが発生して、開発工程に悪影響が生じてしまいます。

画面デザインの際は、あらかじめPC上でなるべく実機に近い条件でプレビューしておくことで「こんなはずじゃなかった」を防ぐことができます。


3. RGB565(RGB555)をPC上でプレビューする

OPTPiX imésta X-MP を使うと、PC上でRGB565(RGB555)の実機で表示した状態をシミュレート表示することができます。

画像2: OPTPiX iméstaで組み込み機器上の表示をシミュレートする方法

画像2: OPTPiX iméstaで組み込み機器上の表示をシミュレートする方法

OPTPiX imésta X-MP で画像を読み込み、「イメージ(I)」→「イメージ変換(W)…」で上記ダイアログが出ます。

実機のRGB形式に合わせて、RGB565, RGB555などを選択します。レンダリング処理は「誤差拡散なし(O)」、「RGB値を正規化する(@)」をONにして、[OK]を押します。

すると、画像のRGB値を全て5bit階調(32階調)に変換します(RGB565の場合は、Gの値のみ6bit階調(64階調))。

このため、RGB565, RGB555などの機器で表示した状態をPC上でシミュレート表示することができるわけです。

画像1, 画像2では、同心円状のバンディング(マッハバンド)が出ていますが、OPTPiX imésta X-MP を使うと、バンディングを抑制することができます。抑制する方法と仕組みについては、OPTPiX imésta 7 for Amusement & Embeddedのページに詳しく記載していますので、ぜひご覧ください。

ところで、画像2のダイアログに「RGB値を正規化する(@)」というチェックボックスがありますが、これが、組み込み機器向け画像で特定のRGB値しか使えない理由の鍵を握っています。


4. 組み込み機器向け画像で、特定のRGB値しか使えない理由~正規化とは

第3節では、「RGB値を正規化する(@)」をONにしてプレビューすると書きました。それでは、OFFにするとどうなるのでしょうか。ONにして変換した画像と、OFFにして変換した画像を交互表示して比べてみます。

正規化していない画像

画像3: 正規化ありとなしの画像を交互表示しています

微妙に、ではありますが、明るさが変化していることがおわかりになると思います。

正規化ONと正規化OFFでは、RGB値には次のような違いがあります。

表2: 5bit階調のRGB値を、PCで表示するときのRGB値一覧(正規化なし、あり)

表2: 5bit階調のRGB値を、PCで表示するときのRGB値一覧(正規化なし、あり)

第3節の後半に「画像のRGB値を全て5bit階調(32階調)に変換します」と書きましたが、PC上で画像をハンドリングしている間は、RGB値として表1にあるような0~31の範囲を使うのではなく、表2のような値に変換します。RGB値が0~31の画像をPCに表示しても、真っ暗でなにが表示されているのかわからなくなってしまうからです。

普通に考えれば、32階調に変換するのであれば、表2のなかの「正規化なし」のRGB値を使えば良さそうです。ところが、この表をよく見ると、最大輝度を表す最後の行の値が、F8(248)になっています。つまり、最大輝度がFF(255)ではなくなってしまうのです。「正規化あり」では、最大輝度が8bit階調の時と同じFF(255)になっています。これが、画像3の明度の違いの原因です。正規化を行うと、最大輝度を256階調の場合と同じに揃えるために、全体的に、均等に、値をシフトします。

さて、ソフト開発部門から渡された「使っても良いRGB値の一覧」は、表2の「正規化あり」「正規化なし」のどちらかの場合がほとんどのはずです。渡された値の一覧表を見て、OPTPiX iméstaの設定を行えば大丈夫です。

実は、正規化にはもう一つ方式があって値が少し異なるのですが、それはまた後日、このブログで紹介しようと思っています。

もう一つの正規化方式を、「RGB565, RGB555形式の組み込み機器用画像の正しい作成方法(2)」でご紹介しましたので、そちらもあわせてご覧下さい。

5. 実は、組み込み機器向け画像で特定のRGB値しか使えない、わけではありません

実機に画像を組み込むとき、最終的にはRGB値として表1の値が使われます。つまり、正規化は、してもしなくても、実機での表示結果には変化がありません。実は、ハードウェア的に特定のRGB値しか使えないというわけではないのです。正規化は、PC上で画像をハンドリングするときの利便性(色再現性の向上)のために行う処理なのですが、ハードウェア寄りの話のため、ソフト開発者の方でも、そのあたりを詳しく把握できていない場合が多いようです。

以上、デザイナーさんにとっては若干ややこしいお話で恐縮ですが、ご理解いただけましたでしょうか。

わかりにくい点などありましたら、コメント欄でご指摘いただければ幸いです。

2012年4月5日加筆

続きのエントリーを公開しました。下記のリンクからどうぞ。

RGB565, RGB555形式の組み込み機器用画像の正しい作成方法(2)

カテゴリー: 画像形式 | タグ: , | 2016/08/31 更新