Android」タグアーカイブ

スマートフォンアプリで、綺麗な画像を軽くして組み込む方法

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

今回は、スマートフォンアプリ(アンドロイド(Android)アプリ)と、iOSアプリ(iPhoneアプリ/iPadアプリ)で綺麗な画像を軽く扱いたい開発者の方のために、解決策をご紹介いたします。

※ 本エントリーはブログ掲載時点の情報をまとめたものです。将来的に仕様が変更になる可能性もあるのであらかじめご了承ください。

ファイルサイズの制限

さて、スマートフォンアプリでは、アプリケーションのファイルサイズに制限があります。「Android Market」ではアップロード可能なアプリの上限サイズが「50MBまで」と制限されていますし、

Android Market では50MBまで

Android Market では50MBまで

「App Store」では3G回線経由にてダウンロード可能なアプリの上限サイズは「20MBまで」と制限されています。

AppStoreでは20MBまで

AppStoreでは20MBまで

ちなみに、iOSでは、WiFi経由でダウンロード可能なアプリの上限サイズは2GBとのことです。

また、それぞれの端末のメモリストレージの量も現段階では「PCのように豊富にある」「湯水のように使える」とは言えない状況です。「Android Market」や「App Store」の制限もさることながら、アプリケーションは少しでも軽いほうがユーザーに喜ばれるのは確かです。

画像をキレイなまま軽く!

努力してソースコードを短くしてもアプリケーションのサイズが劇的に小さくなることはほとんど無いと言えるでしょう。

アプリケーションの中で大きくサイズを使っているのは「画像データ」なのです。

スマートフォンの画面の解像度は、昔のPCに匹敵するほど大きく(広く)なっています。最近は、WVGA:800×480以上の端末が増えています。この大きさの画像データを複数枚持つだけでアプリの容量はどんどん増えていきます。

画像の数を減らすことなく、アプリの容量を抑えようとして画像データを必要以上に圧縮すると画像内にモスキートノイズが増えてしまい、スマートフォンのキレイで広い画面のメリットを損なう結果になってしまいます。

画像は写真なのか、図表やイラストなのかをチェック!!

写真の画像はJPEG形式が最適です。キレイに小さく圧縮できます。しかし、図表やイラストの画像はJPEG形式で圧縮(保存)するとモスキートノイズだらけのひどい結果になります。

図表の画像を使う場合はPNG形式で圧縮(保存)してください。圧縮には減色で対応するとキレイな画像のまま軽くすることができます。

雑誌やパンフレットのように写真と図表や文字が混在しているような画像はあるか?

写真と図表が混在している画像は、JPEG形式?PNG形式?どちらで保存すればキレイなまま軽くできるでしょうか。

手間を惜しまないのであれば、写真の画像と図表の画像を分離するとよいでしょう。

次の図のように、写真の部分を切り出してJPEG形式で保存し、図表や文字の部分はPNG形式で保存します。そして、表示するときに1つの画像に見えるようにくっつけるわけです。

特にモスキートノイズの入りやすい文字周りはPNG形式で保存するとJPEG形式と同じバイトサイズにまで圧縮しても表示がクッキリとキレイになります。

しかし、この作業。技術や理論が理解できても実際にやってみるととても大変です。

特に、画像の枚数が多かったり、何度も改修がかかるような画像に対してこの作業を手でやるのは・・・コスト的にも品質的にも問題があります。

この作業を確実に全自動で計算&分割&保存してしまうのが「ハイブリッドフォーマット」で画像を保存できる「OPTPiX imesta 7 for Mobile & Social」です。

詳しくは「電子書籍・雑誌やコミックをキレイに!軽く!ハイブリッド画像作成ツール – OPTPiX imesta 7 for Mobile & Social」のページをご覧ください。

サンプルソースコードの提供

「・・・で、そのハイブリッド画像をアプリで表示するには、どうしたらいいの?」

アプリとして動作実績のあるアンドロイド(Android)アプリのサンプルソースコードと、iOSアプリ(iPhoneアプリ/iPadアプリ)のサンプルソースコードともにご用意しています。

「サンプルソースコードを参考にしたい」開発者の方はお問い合わせフォームからお問い合わせください。

カテゴリー: スマートフォン開発 | タグ: , , , , , , , , , , , , | 2020/06/16 更新

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 | タグ: , , , , | 2020/06/16 更新