ブログパーツ

古い記事でのダウンロードファイルのURLについて

2014.04.05
現在、古い記事でのダウンロードファイルのURLが無効になっています。

下記の別サイトに同様のファイルをアップしてありますので、こちらからご利用ください。


ぴぽや倉庫
http://piposozai.wiki.fc2.com/


古い記事ではSkyDriveにファイルをアップしていたのですが、OneDriveへとサービス名が変更されたことで、URLが無効になってしまったようです。
最近の記事や上記の別サイトのものはYahoo!BOXにファイルをアップしていますので、大丈夫です。

古い記事のURLも隙を見て、1つ1つYahoo!BOXにアップしてあるURLに変更していきますが、時間がかかると思いますので、URLが無効だった場合は上記の通り別サイトからご利用ください。


ご不便おかけしますが、よろしくお願いします。

PNG画像を256色に減色・最適化してファイルサイズを小さくする

2014.03.04
最近のゲーム開発でよく使うPNG画像ですが、エフェクトアニメの画像に使用されるようなαチャンネル(透明度)付きのPNG画像はどうしてもファイルサイズが大きくなってしまいます。
そこで、画像で使用されている色を減らす減色処理をしたり、PNGファイルの中に付随している不要な情報を削除してファイルサイズを小さくすることができます。

減色処理は通常のグラフィックソフトではなかなかできないのですが、WEB用画像の出力ができるAdobeのPhotoshopやFireworksなどでは機能が実装されています。ただ、有料のソフトなので、なかなか手が出しにくいところ。
フリーソフトには減色に特化したソフト、PNGファイルの最適化に特化ソフトがありますので、今回は個別のソフトをいくつか使って、PNGファイルのファイルサイズの減少具合を検証してみたいと思います。

以前にも同じような記事を書きましたが、紹介しているソフトが公開中止となり有料版のみとなってしまいましたので、新たに記事にしてみました。
↓以前の記事
αチャンネル付きPNG画像のファイルサイズを小さくする


まずはこちらのそれぞれタイプの違う3点の元画像を用意します。

・エフェクトアニメ用の画像の1コマ
 見るからに重そうなαチャンネル付き画像ですので、減色効果が期待できますが、グラデーション部分の画質の低下が心配なところ。
oripng1.png

・キャラチップ画像
 完全な色数コントロールされたドット絵ですので、減色効果は期待できませんが、純粋にPNGファイルの最適化でどのくらい変わるかが気になります。
oripng2.png

・モンスターイラスト画像
 色数が少なめで明暗ハッキリしたPOPなタッチですが、細かい部分で色数を無駄に食っているところがあるので、減色効果が期待できそうです。グラデーションなど多用していないので、おそらく画質もそれほど低下することないでしょう。
oripng3.png


次にそれぞれの画像を256色に減色してみます。
使用するソフトは「OPTPiX Pro」「PNGoo」「COLGA」です。
OPTPiX Proだけ有料ソフト(販売は終了)なのですが、私が普段使っているものなので、今回比較に使用しました。
減色処理はそれぞれのエンジンで256色・ディザなしで行っています。

・OPTPiX Pro
optpix_png1.png
optpix_png2.png optpix_png3.png

・PNGoo
pnggo_png1.png
pnggo_png2.png pnggo_png3.png

・COLGA
colga_png1.png
colga_png2.png colga_png3.png

キャラチップは当然影響ないとして、エフェクトも白色単色ということもありそれほど画質は落ちてないですかね。
モンスターはCOLGAが若干がたついている印象です。



引き続き、PNGファイルの最適化処理を行います。
使用するソフトは「CGOptimizer 麦茶」「PngGauntlet」です。
両方とも既存のPNG最適化エンジンを利用してPNGの最適化を行うソフトで、それぞれに重なる最適化エンジンがあるのですが、両方で処理するのが一番ファイルサイズを小さくしてくれます。
各最適化エンジンのパラメータの指定にもよりますが、どちらか片方というなら「PngGauntlet」の方が小さくなる印象です。

・OPTPiX Pro で減色したものを最適化 
optpix_mugicha_gaunt_png1.png
optpix_mugicha_gaunt_png2.png optpix_mugicha_gaunt_png3.png

・PNGoo で減色したものを最適化 
pnggo_mugi_gaunt_png1.png
pnggo_mugi_gaunt_png2.png pnggo_mugi_gaunt_png3.png

・COLGA で減色したものを最適化 
colga_mugicha_gaunt_png1.png
colga_mugicha_gaunt_png2.png colga_mugicha_gaunt_png3.png

最適化処理は基本的には画質に影響与えることはありませんが、まあこんなかんじです。


最終的なファイルサイズの比較はこちらになります。数値部分の単位はバイトです。
エクセルの表のキャプチャですいません;
png_filesize.png
キャラチップのような256色以下で描かれているドット絵などは減色効果はほとんど出ませんが、PNGファイルの最適化でファイルサイズを小さくすることができますね。
キャラチップがCOLGAで256色にした時にファイルサイズが大きくなっているのは、カラーパレットの情報を既に256色以下のものから256色分確保して付加しているのが原因だと思います。その後PNGの最適化で不要なカラーパレットが削除されfファイルサイズが小さくなっています。
全体的な結果ではCOLGAで減色して、PNGの最適化を行ったものが一番ファイルサイズが小さくなりました。
ただ、モンスターイラストの画質が若干落ちてしまっているので、画質面の処理が気になるところでしょうか。
画質を重視したい場合はPNGooで減色するのが安全そうです。
もしくはCOLGAで処理して、画質が気になるものだけPNGooで処理するなど。

あと、それぞれの減色エンジンでもパラメータの設定などが違うので、その処理でも結果は変わると思いますので、色々試してみるのもいいかも。特に今回は減色でディザなしにしましたが、写実的なリアルな塗りのイラストなんかだとディザ処理を追加して減色した方がキレイだったりします。ものによっては画質的に256色に減色はムリ・・・という場合もありますけどw


最後に注意として、今回のように減色・最適化したPNG画像は通常のグラフィック編集ソフトで正常に開けない場合がありますので、元画像はしっかり残しておくことをオススメします!
万が一の対処法として、COLGAで「変換>ARPGフォーマットに変換」で処理したものを保存すれば、グラフィック編集ソフトで正常に開けるようになると思います。



無料のソフトでここまで出来て、作者の方々には感謝感謝です!

サイドビューキャラ素材の規格を考え中

2014.02.23
サイドビュー用キャラクター素材を作ろうかなぁ。と規格を考え中。
あまり手間を掛けずに最大限の効果を狙いたいところなので、Illustratorで作ったパーツ画像をFlashで組み合わせて動きをつけていく作り方をすることに。追加パーツの描き起こしは最低限にして、どこまで動きのバリエーションを増やせるかというとこなんだけど、下にあるパーツだけでけっこう色々できたりします。

衣装のデザインまで考える暇もなかったので、裸だったりするけど、基本はこのパーツに衣装のパーツをくっつけて動かしたり、マントみたいなのは別パーツにして動かしたりというかんじ。
このキャラクターのデザイン自体もまだ考え中なので、顔をもう少し小さくしたり、首があったほうがいいかなぁ、輪郭線あったほうがいいかなぁ、とか色々悩んでいるところです。Illustratorで描いているおかげで、さっと試せるところがあるので、実験して固めていきます。

sotaitest.jpg

で、動きをつけたのがこんなかんじ。
待機・ダメージ・ダウン・移動・攻撃といった基本的な動きはさくっと作れました。
黒色だと濃すぎだけど、やっぱ輪郭線あったほうが既存素材との組み合わせ的にいいのかなぁ?動きをつけるときに、ちょっと邪魔になったりもするんだけど・・・
ほかの動きとしては呪文の詠唱中・魔法の発動・弱り・ジャンプ・アイテム使用・防御・勝利ポーズとかも、多少パーツの描き起こしするぐらいで追加できる。

sotaitest.gif sotaitest_line.gif

実際、素材として配布する場合は下のようなかんじに1枚の画像にまとめて並べてかな。
スマホアプリなんかだと、余計な部分切り落とした画像データとマップデータを生成してくれたりするツールもあるんで、そういうの使えたらいいけど(Flashでもいちおうできるけど)、汎用性を考えるとシンプルに。

sotaitest.png
sotaitest_line.png


動きとしては決まったパーツでの動きなので、不自然に見えるところも多いんだけど、Flashでパーツの入れ替えが簡単にできるように作ってあるんで、1キャラ分のモーションを作って、別のキャラの画像パーツにサクサク差し替えれば別のキャラにも同じモーションが適用されるので、素材の量産が容易という利点が大きいんですよねぇ。
Illustrator~Flashでベクターデータのまま扱っているので、Flashで画像を書き出す際に任意の解像度指定ができるので、画像が荒れることなく高解像度対応もできるし。

ま、結局はセットの画像で用意するので、パーツ画像を提供してゲーム中に自由にキセカエみたいなことができるような対応まではしたくないんだけど、WEB上のキセカエアプリでセット画像を書き出すみたいな対応ができたらいいかなぁ。めんどくさいのそこまでしないかもだけど・・・


この素材はもう少し詰めて、数点公開して一旦放置~の流れになり、そのあとマップチップでも作ろうかと思ってます。

マップチップセット素材の販売サイト

2014.01.22
素材としてなかなか集めにくいマップチップセットが下記のサイトで販売されています。
RPGツクール用として販売されているものですが、自作プログラムやウディタなどのゲームエンジンでも使用可能とのことです。
詳しくは製品ページの詳細をご確認ください。
※ウディタで使用する場合にはウディタ用の規格に自分で調整が必要です。

ゲーム制作素材集 | DEGICA STORE

現在は下記の3種類のマップチップセットが販売されています。
SFグラフィック素材集とかは海外のRPGツクールのサイトなんかで販売されてたものですねぇ。
海外のサイトには他にもあったと思うので、そのうち追加されるといいですね。

・レトロゲーム風タイルセット(現代)素材集
 非商用利用の場合:840円
 商用利用の場合:2,500円
 degica_mapchip1.jpg

・SFグラフィック素材集
 非商用利用の場合:1,980円
 商用利用の場合:7,800円
 degica_mapchip2.jpg

・モダングラフィック素材集
 非商用利用の場合:680円
 商用利用の場合:3,800円

 degica_mapchip3.jpg


※商用利用の場合の購入は各製品の詳細ページ内にリンクがあります。


他、サウンドやキャラチップ、顔グラフィックなども販売されています。

非商用利用(フリーゲームとしての公開など)であれば、なかなかお手頃価格でマップチップセットを揃えられて良さそうですねぇ。

戦闘エフェクトアニメ 光球×10色

2014.01.02
戦闘画面などで使用するエフェクトアニメになります。

新年一発目ということで、初日の出をイメージしたシンプルな光球のアニメになります。
んー何に使うんだろ? 回復・能力上昇系とかでしょうか?


サイズは、1コマ120×120サイズ192×192サイズ240×240サイズの3サイズ分あります。
画像形式はpngです。


pipo-btleffect120a_sample.gif pipo-btleffect120b_sample.gif pipo-btleffect120c_sample.gif pipo-btleffect120d_sample.gif pipo-btleffect120e_sample.gif
pipo-btleffect120f_sample.gif pipo-btleffect120g_sample.gif pipo-btleffect120h_sample.gif pipo-btleffect120i_sample.gif pipo-btleffect120j_sample.gif



さらにファイルサイズを小さくしたい場合にはこちらの記事を参考にどうぞ。
フリーソフトを使って簡単な操作でファイルサイズを小さくすることができます。
αチャンネル付きPNG画像のファイルサイズを小さくする

▼ダウンロードはこちらから
 戦闘エフェクトアニメ24.zip
※ファイルサイズが4.1MBとなっています。


●利用条件 「ぴぽや 素材 利用規約」
NEXT≫
プロフィール

ぴぽ

管理人:ぴぽ
フリーのグラフィックデザイナーという傍ら、「ゲームを作りたいなぁ♪」と奮闘中です!
Twitter

▼運営サイト
・ぴぽや倉庫
  公開した素材のまとめ

・ぴぽやリンク
  素材配布サイトリンク集
・はじめてのウディタ
  ウディタお勉強wiki
・はじめてのウディタSNS
  ウディタ初心者向けSNS
・ぴぽ - Twilog
  Twitterまとめ
・ニコニ・コモンズ
  動画素材を登録中


ご感想・ご利用報告・ご連絡
素材のご利用報告・ご感想をいただける場合は、各素材記事か下記のコメント用記事にコメントしてください。
また、急ぎでないご連絡もこちらをご利用ください。

コメント用記事

お仕事のご相談などはこちらをご覧ください。
お仕事履歴記事

作ってほしいゲーム用画像素材のご要望はこちらにどうぞ。
「あったらいいなぁ」ぐらいの気持ちでお願いします><

素材ネタ募集
メール

名前:
メール:
件名:
本文:

おすすめ品

amazonで見つけた素材集や書籍などゲーム制作に役立ちそうなモノを色々集めてみました。
・ゲーム制作ソフト
・画像素材集
・サウンド素材集
・フォント集
・ゲームソフト
・PCソフト
・PC機器
・ゲーム制作資料
・RPG制作参考資料
・設定資料集
・DVD


WOLF RPGエディターではじめるゲーム制作―「イベントコマンド」と「データベース」で、ゲームシステムを自由に作る! (I・O BOOKS)
WOLF RPGエディターではじめるゲーム制作
RPGツクールVX Ace
RPGツクールVX Ace
Multimedia Fusion 2 + SWF File Exporter
Multimedia Fusion 2 + SWF File Exporter
ゲームの作り方  Unityで覚える遊びのアルゴリズム
ゲームの作り方 Unityで覚える遊びのアルゴリズム
ゲームクリエイターが知るべき97のこと 2
ゲームクリエイターが知るべき97のこと 2
デジタルアーティストが知っておくべきアートの原則 -色、光、構図、解剖学、遠近法、奥行き-
デジタルアーティストが知っておくべきアートの原則 -色、光、構図、解剖学、遠近法、奥行き-
ゲームアートと描画の基本:古典技法から最先端テクニックまで
ゲームアートと描画の基本:古典技法から最先端テクニックまで
描ける!  剣と魔法の格闘ポーズ スタイル図鑑
描ける! 剣と魔法の格闘ポーズ スタイル図鑑
Photoshopで描く! ファンタジー背景画
Photoshopで描く! ファンタジー背景画
ドラゴンクエストX 目覚めし五つの種族 オンライン [ダウンロード]
ドラゴンクエストX 目覚めし五つの種族 オンライン [ダウンロード]
PlayStation Vita TV Value Pack (VTE-1000AA01)
PlayStation Vita TV バリューパック(VTE-1000AA01)
ドラゴンズクラウン 数量限定特典 アートワーク集「Dragon's Crown Art Works」 付き
ドラゴンズクラウン 数量限定特典 アートワーク集「Dragon's Crown Art Works」 付き
THEATRHYTHM FINAL FANTASY Compilation album
THEATRHYTHM FINAL FANTASY Compilation album
とびだせ どうぶつの森 超完全カタログ
とびだせ どうぶつの森 超完全カタログ
パシフィック・リム ブルーレイ&DVDセット (3枚組)(初回限定生産) [Blu-ray]
パシフィック・リム ブルーレイ&DVDセット (3枚組)(初回限定生産) [Blu-ray]
シュガー・ラッシュ DVD+ブルーレイセット [Blu-ray]
シュガー・ラッシュ DVD+ブルーレイセット [Blu-ray]
ヒックとドラゴン スペシャル・コレクターズ・エディション [Blu-ray]
ヒックとドラゴン スペシャル・コレクターズ・エディション [Blu-ray]
カンパのお願い
フリー素材作成に役立つ道具・資料の購入にご協力いただるとうれしいです!
Amazonギフトカードにて15円からカンパができるサービスになります。
人気記事
カテゴリ
最新記事
最新コメント
リンク
ウディタ公式サイト
ツクールweb
にほんブログ村 ゲームブログ ゲーム制作へ
にほんブログ村
Translate